/* =====================================================================
   Mobile / responsive — collapses to tabbed single-pane below 900px
   ===================================================================== */

/* === Tablet (<1100px) — narrow sidebar === */
@media (max-width: 1100px) {
  :root {
    --sidebar-w: 64px;
    --rail-left-w: 180px;
    --rail-right-w: 280px;
  }
  .sidebar-brand .brand-name,
  .sidebar-brand .brand-sub,
  .nav-item span:not(.nav-badge),
  .ws-status .ws-label {
    display: none;
  }
  .sidebar-brand { padding: 0 6px 16px; text-align: center; }
  .sidebar-brand .brand-mark { font-size: 8px; }
  .nav-section-title { display: none; }
  .nav-item { justify-content: center; padding: 8px 0; }
  .nav-item .nav-badge { margin: 0; }
}

/* === Mobile (<900px) — single-pane cockpit, bottom-sheet drawer === */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 48px;
  }
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    z-index: 200;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-brand .brand-name,
  .sidebar-brand .brand-sub,
  .nav-item span,
  .ws-status .ws-label,
  .nav-section-title {
    display: inline-flex;
  }
  .sidebar-brand { padding: 16px 18px; text-align: left; }
  .nav-item { justify-content: flex-start; padding: 8px 18px; }

  .app-header { padding: 0 14px; gap: 12px; }
  .header-deal { font-size: 14px; }
  .header-user .user-name { display: none; }

  .main { padding: 14px 14px 80px; }
  .view-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* === Cockpit becomes tabbed single-pane === */
  .cockpit {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h));
  }
  .cockpit-header { padding: 10px 14px; }
  .cockpit-header .target-name { font-size: 18px; }
  .cockpit-header .deal-stat { padding: 0 8px; }

  /* Render pane tabs */
  .cockpit::before {
    content: '';
  }
  .cockpit-mobile-tabs {
    display: flex;
    border-bottom: 1px solid var(--rule);
    background: var(--cream-2);
  }
  .cockpit-mobile-tabs .tab {
    flex: 1;
    text-align: center;
    border-bottom: 2px solid transparent;
  }

  .left-rail, .right-rail, .memo-zone {
    border: none;
  }
  .left-rail { max-height: 35vh; }
  .right-rail { max-height: 35vh; }
  .memo-zone { max-height: 35vh; }

  /* Default to memo on mobile */
  .focus-panel { display: none; }
  .cockpit[data-mobile-pane="focus"] .focus-panel { display: block; }
  .cockpit[data-mobile-pane="focus"] .left-rail,
  .cockpit[data-mobile-pane="focus"] .right-rail,
  .cockpit[data-mobile-pane="focus"] .memo-zone { display: none; }
  .cockpit[data-mobile-pane="rail"] .left-rail { display: block; }
  .cockpit[data-mobile-pane="rail"] .focus-panel,
  .cockpit[data-mobile-pane="rail"] .right-rail,
  .cockpit[data-mobile-pane="rail"] .memo-zone { display: none; }
  .cockpit[data-mobile-pane="memo"] .memo-zone { display: block; max-height: 100%; }
  .cockpit[data-mobile-pane="memo"] .left-rail,
  .cockpit[data-mobile-pane="memo"] .focus-panel,
  .cockpit[data-mobile-pane="memo"] .right-rail { display: none; }
  .cockpit[data-mobile-pane="activity"] .right-rail { display: flex; }
  .cockpit[data-mobile-pane="activity"] .left-rail,
  .cockpit[data-mobile-pane="activity"] .focus-panel,
  .cockpit[data-mobile-pane="activity"] .memo-zone { display: none; }

  /* === Drawer becomes bottom sheet === */
  .drawer {
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 75vh;
    border-left: none;
    border-top: 1px solid var(--gold);
    animation: slideUp 0.18s ease-out;
  }

  /* === Memo: stack exhibits BELOW memo on mobile === */
  .memo-layout {
    grid-template-columns: 1fr;
  }
  .memo-exhibits-pane-wrap {
    position: static;
    max-height: none;
  }
  .memo-topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .memo-topbar .memo-actions { margin-left: 0; justify-content: flex-end; }
  .memo-section { padding: 14px 16px; }
  .memo-section h2 { font-size: 18px; }

  /* === Library: stack saved searches above === */
  .library-layout {
    grid-template-columns: 1fr;
  }
  .library-saved {
    position: static;
    max-height: none;
    order: -1;
  }
  .library-filters .search-input { min-width: 0; flex: 1 1 100%; }

  /* === Tables → horizontal scroll === */
  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* === Voice button — show by default on mobile === */
  .comment-actions .voice-btn { display: inline-flex; }

  /* === Modal full-width === */
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    padding: 18px 20px;
  }

  /* === Toast → top instead of bottom === */
  .toast {
    bottom: auto;
    top: calc(var(--header-h) + 8px);
    right: 10px;
    left: 10px;
    max-width: none;
  }

  /* === Filter bar wraps === */
  .filter-bar > * { flex: 1 1 auto; min-width: 0; }
}

/* === Touch targets — bump up clickable areas === */
@media (pointer: coarse) {
  .btn { padding: 10px 16px; }
  .btn.xs { padding: 6px 12px; }
  .nav-item { padding: 10px 18px; }
  .data-table td, .data-table th { padding: 10px 12px; }
  .agent-row { padding: 8px 14px 8px 28px; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Print fallback for memo view === */
@media print {
  .memo-layout { grid-template-columns: 1fr; }
  .memo-exhibits-pane-wrap { display: none; }
  .memo-topbar { display: none; }
  .memo-section { break-inside: avoid; page-break-inside: avoid; padding: 0 0 16px; border: none; }
  .memo-section-comments { display: none; }
  .memo-section-actions { display: none; }
}