/* buddy/static/mobile.css - Nebula responsive overrides (loaded AFTER style.css).
   Desktop layout lives in style.css and is never edited here; everything below is
   gated on the 768px breakpoint except the .mobile-back base rule (hidden until a
   mobile detail pane reveals it). Uses the Nebula tokens (--glass-bg, --glass-border,
   --accent, etc.) so mobile stays visually consistent with desktop. The aurora
   (#aurora, position:fixed z-index:-1) shows through because every surface here is
   translucent glass. */

.mobile-back { display: none; }

/* Defined outside @media so the keyframe persists if the viewport crosses the
   768px breakpoint mid-animation (otherwise the sheet snaps). No selector
   references it above 768px, so desktop is unaffected. */
@keyframes sheet-up { from { transform: translateY(28px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
  /* dynamic viewport height so the bottom bar isn't clipped by mobile browser chrome */
  body { height: 100dvh; }

  /* --- Rail (68px left column) -> glass bottom tab bar -------------------- */
  #rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 58px;
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 0;
    background: var(--glass-bg);
    border-right: none; border-top: 1px solid var(--glass-border);
    box-shadow: var(--glass-hi), 0 -8px 24px rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    z-index: 50;
  }
  @supports not (backdrop-filter: blur(1px)) { #rail { background: var(--bg-2); } }
  #rail .rail-brand { display: none; }
  #rail .rail-ic {
    flex: 1; width: auto; height: 100%;
    border: none; border-radius: 0; gap: 2px;
    font-size: 19px; color: var(--rail-fg);
    transform: none;
  }
  #rail .rail-ic span { font-size: 9.5px; }
  #rail .rail-ic:hover { background: transparent; color: var(--rail-fg); transform: none; }
  #rail .rail-ic.on {
    background: var(--glass-bg-2); color: var(--rail-fg-on);
    border-color: transparent;
    /* top accent bar reads better than the desktop left bar in a horizontal strip */
    box-shadow: inset 0 2px 0 var(--accent), 0 0 14px rgba(96,165,250,.22);
  }
  #rail .rail-bottom { margin-top: 0; }

  /* app column clears the fixed bar */
  #app { padding-bottom: 58px; }
  #topbar { padding: 0 14px; }

  /* --- Master-detail: Home (#sidebar|#main) + People (.vsidebar|.vmain) --- */
  #view-home, #view-people { position: relative; }
  #view-home #sidebar, #view-people .vsidebar { width: 100%; border-right: none; }
  #view-home #main, #view-people .vmain { width: 100%; }

  /* default = list visible, detail hidden */
  #view-home #main, #view-people .vmain { display: none; }
  /* .show-detail (toggled by BuddyMobile) flips to the detail pane */
  #view-home.show-detail #sidebar, #view-people.show-detail .vsidebar { display: none; }
  #view-home.show-detail #main { display: flex; }
  #view-people.show-detail .vmain { display: block; }

  /* the injected Back button, only when a mobile detail pane is showing
     (Home: in #header; People: above #person-detail in .vmain) */
  #view-home.show-detail .mobile-back,
  #view-people.show-detail .mobile-back {
    display: inline-flex; margin-bottom: 8px;
  }

  /* --- Modals -> glass bottom sheets ------------------------------------- */
  /* .modal is the full-screen overlay (flex, align-items:center by default).
     align-items:flex-end docks the inner card to the bottom edge; both inner
     variants (.modal-card and .modal-body) get sheet geometry + a slide-up. */
  .modal { align-items: flex-end; }
  .modal-card, .modal-body {
    width: 100%; max-width: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: none;
    margin: auto 0 0;
    max-height: 90dvh; overflow: auto;
    box-shadow: var(--shadow-3), var(--glass-hi);
    animation: sheet-up var(--dur) var(--ease);
  }
  /* a small grab-handle hint at the top of every sheet */
  .modal-card::before, .modal-body::before {
    content: ""; display: block;
    width: 36px; height: 4px; margin: 2px auto 10px;
    border-radius: 999px; background: var(--glass-border);
  }
  @media (prefers-reduced-motion: reduce) {
    .modal-card, .modal-body { animation: none; }
  }

  /* --- Coach / Playbook side panel -> bottom sheet ----------------------- */
  .coach-overlay { align-items: flex-end; justify-content: stretch; }
  .coach-panel {
    width: 100%; max-width: none; height: auto; max-height: 90dvh;
    border-left: none; border-top: 1px solid var(--glass-border);
    border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
    box-shadow: var(--shadow-3), var(--glass-hi);
    animation: sheet-up var(--dur) var(--ease);
  }
  @media (prefers-reduced-motion: reduce) { .coach-panel { animation: none; } }

  /* --- Card grids -> single column (People + Growth) --------------------- */
  .cardgrid { grid-template-columns: 1fr; }

  /* per-pane scrolling - don't rely on desktop body{overflow:hidden} */
  #chat, .vmain, .vsidebar, #sidebar { overflow: auto; -webkit-overflow-scrolling: touch; }

  /* --- Composer reflow + touch sizing ------------------------------------ */
  #composer { padding: 10px 14px 12px; }
  #composer #input { font-size: 16px; } /* 16px prevents iOS auto-zoom on focus */
  #composer .btn, #composer #send { min-height: 44px; }

  /* keep the chat header usable on a narrow screen; hide crowded metadata */
  #header { flex-wrap: wrap; gap: 6px; }
  #header #clock, #header #session-cost { display: none; }

  /* --- Knowledge view: stack search + source list above results ---------- */
  #view-knowledge { display: block; overflow: auto; }
  #view-knowledge .vsidebar { width: 100%; border-right: none; }
  #view-knowledge .kb-sources { flex-direction: row; flex-wrap: wrap; }

  /* --- Generic touch targets --------------------------------------------- */
  .btn { min-height: 40px; }
  .rail-ic { min-height: 44px; }
  /* 16px on any free-text input avoids iOS focus zoom across all views */
  input[type="text"], input[type="search"], textarea, .vsearch { font-size: 16px; }

  /* --- Dashboard bento collapses to one column --------------------------- */
  .dash-bento { grid-template-columns: 1fr; }
  .dash-bento .dash-tile:first-child { grid-row: auto; }
  .dash { max-width: none; }
}