/* responsive.css split from legacy.css on 2026-07-13T14:30:34.723Z. */

@media (max-width: 900px) {
      .log-summary-grid {
        grid-template-columns: 1fr 1fr;
      }

      .log-filter-panel {
        grid-template-columns: 1fr;
        position: static;
      }

      .log-entry-card {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .log-entry-side {
        justify-content: space-between;
      }

      .log-detail-meta-grid {
        grid-template-columns: 1fr;
      }
    }

@media (max-width: 900px) {
      html, body {
        overflow: hidden;
        height: 100%;
      }

      .app {
        height: 100%;
        padding: 0;
        display: block;
        background: #fff;
      }

      .sidebar, .main {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .sidebar {
        display: flex;
      }

      .main {
        display: none;
      }

      .app.mobile-chat-open .sidebar {
        display: none;
      }

      .app.mobile-chat-open .main {
        display: flex;
      }

      .sidebar-top {
        padding: calc(14px + env(safe-area-inset-top)) 14px 12px;
        border-bottom: 1px solid var(--line);
      }

      .brand-title { font-size: 16px; }
      .brand-subtitle { font-size: 11px; }

      .loader-row {
        grid-template-columns: 1fr 1fr 1.1fr;
      }

      .main-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .create-btn {
        padding: 0 10px;
      }

      .job-list {
        padding: 10px 12px 16px;
        background: #fff;
      }

      .job-card {
        border: 1px solid transparent;
        border-bottom-color: var(--line-soft);
        border-radius: 14px;
        margin: 0 0 8px;
        padding: 10px;
        box-shadow: none;
        background: #fff;
      }

      .job-card::before {
        top: 10px;
        bottom: 10px;
        width: 3px;
      }

      .job-card:hover {
        transform: none;
        box-shadow: none;
      }

      .job-card.selected {
        border-color: #c7d2fe;
        background: linear-gradient(135deg, #f7f7ff, #fff);
        box-shadow: 0 8px 18px rgb(99 102 241 / 0.08);
      }

      .job-card-inner {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
      }

      .job-card-inner.with-checkbox {
        grid-template-columns: 22px 36px minmax(0, 1fr);
      }

      .job-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 15px;
      }

      .job-card-head {
        align-items: center;
      }

      .job-id {
        font-size: 12px;
      }

      .job-meta {
        gap: 7px 9px;
      }

      .job-inline-actions {
        margin-left: auto;
        padding-left: 12px;
        gap: 7px;
      }

      .job-icon-action {
        width: 28px;
        height: 28px;
      }

      .job-icon-action svg {
        width: 14px;
        height: 14px;
      }

      .job-title {
        font-size: 12px;
        margin: 5px 0 8px;
      }

      .mobile-back-btn {
        display: inline-flex;
      }

      .main-header {
        padding: calc(12px + env(safe-area-inset-top)) 14px 11px;
      }

      .episode-avatar {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 20px;
      }

      .main-title {
        font-size: 15px;
      }

      .meta-desc {
        font-size: 10.5px;
        max-width: 64vw;
      }

      .header-actions {
        display: none;
      }

      .stage-bar {
        padding: 8px 12px;
        gap: 6px;
      }

      .stage-title {
        display: inline-flex;
        margin-right: 0;
        align-items: center;
      }

      .stage-chip-wrap { display: none; }
      .stage-filter-select { display: block; font-size: 16px; }

      .stage-item {
        font-size: 10px;
        padding: 4px 8px;
      }

      .chat-feed {
        padding: 12px;
        gap: 12px;
      }

      .msg-row {
        max-width: 100%;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
      }

      .msg-row.user {
        grid-template-columns: minmax(0, 1fr) 32px;
      }

      .msg-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
      }

      .msg-sender {
        font-size: 11.5px;
      }

      .msg-bubble {
        max-width: 100%;
        font-size: 11.8px;
        padding: 9px 11px;
      }

      .composer-area {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      }

      .mention-menu {
        left: 12px;
        bottom: 70px;
        width: calc(100% - 24px);
      }

      .bottom-hint {
        display: none;
      }

      .modal-backdrop {
        padding: 0;
        align-items: stretch;
      }

      .modal, .modal.small, .modal.wide {
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
      }

      .modal.media-select {
        align-self: center;
        width: min(92vw, 420px);
        height: auto;
        max-height: 68dvh;
        border-radius: 20px;
      }

      .modal.media-viewer {
        align-self: center;
        width: min(94vw, 520px);
        height: auto;
        max-height: 86dvh;
        border-radius: 20px;
      }

      .modal.media-fullscreen {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
      }

      .modal.media-fullscreen .modal-body {
        display: grid;
        place-items: center;
        padding: 10px;
        background: #020617;
      }

      .modal.media-fullscreen .modal-footer {
        display: none;
      }

      .modal.media-fullscreen .media-full-preview {
        width: auto;
        max-width: 100%;
        max-height: calc(100dvh - 92px);
        border-radius: 12px;
      }

      .modal.media-fullscreen .media-full-preview.video {
        width: 100%;
      }

      .modal.media-select .modal-body {
        padding: 12px;
      }

      .modal.media-viewer .modal-body {
        padding: 12px;
      }

      .modal.media-viewer .modal-header,
      .modal.media-select .modal-header {
        padding: 12px 14px;
      }

      .modal.media-viewer .modal-footer,
      .modal.media-select .modal-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      }

      .modal-footer {
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
      }

      .create-form {
        padding-bottom: 8px;
      }

      .form-grid, .stage-check-list {
        grid-template-columns: 1fr;
      }

      .detail-row {
        grid-template-columns: 1fr;
        gap: 3px;
      }

      #sidebarToggleBtn { display: none; }

      input,
      textarea,
      select {
        font-size: 16px !important;
      }

      .create-form .form-input,
      .create-form .form-select,
      .create-form .form-textarea,
      .modal .form-input,
      .modal .form-select,
      .modal .form-textarea {
        font-size: 16px !important;
      }

      .idea-magic-backdrop {
        padding: 10px;
        place-items: end center;
      }

      .idea-magic-dialog {
        width: 100%;
        max-height: 92dvh;
        border-radius: 18px 18px 12px 12px;
      }

      .idea-magic-dialog-header,
      .idea-magic-dialog-body {
        padding-left: 14px;
        padding-right: 14px;
      }

      .idea-magic-compare {
        grid-template-columns: 1fr;
      }

      .idea-magic-dialog-footer {
        padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .idea-magic-dialog-footer .load-btn {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .idea-magic-dialog-footer .btn-secondary {
        width: 100%;
      }

      .idea-magic-btn {
        min-height: 34px;
        padding-inline: 12px;
      }

      button {
        touch-action: manipulation;
      }

      button svg,
      .icon-btn svg,
      .modal-close-x svg {
        display: block;
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
      }

      .job-avatar,
      .msg-avatar,
      .episode-avatar,
      .modal-close-x,
      .icon-btn {
        display: grid;
        place-items: center;
        line-height: 1;
      }

      .stage-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        overflow: hidden;
      }

      .mobile-only { display: inline-flex; }
      .desktop-only { display: none !important; }
    }