/* =============================================================================
   MUSE · Mobile — the responsive reimagining (v1-responsive)
   ---------------------------------------------------------------------------
   A single, self-contained mobile layer. Loaded LAST so every rule here wins
   over the desktop sheets within its media query. Targets phones + small
   portrait (≤ 700px). The 760/820/860px breakpoints in the other sheets handle
   the tablet range; this file owns the phone experience end-to-end.

   Foundations: dvh height (tracks the dynamic toolbar + soft keyboard via the
   `interactive-widget=resizes-content` viewport), safe-area insets for the
   notch + home indicator, 16px composer (kills iOS focus-zoom), ≥40px taps.
   ========================================================================== */

@media (max-width: 700px) {

  /* ── Foundations ───────────────────────────────────────────────────────── */
  .app {
    /* dvh follows the browser chrome + keyboard; falls back to the inherited
       height:100% on engines without dvh. */
    height: 100dvh;
  }
  body { -webkit-tap-highlight-color: transparent; }
  /* roomier hit areas for touch */
  .iconbtn { width: 40px; height: 40px; }

  /* ═══ HEADER ═══════════════════════════════════════════════════════════════
     A clean mobile bar: ☰ (opens the conversation drawer) · title · Files. */
  .topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0;
    gap: 8px;
    position: sticky; top: 0; z-index: 20;
  }
  /* the PRISM-mark "new chat" button is drawer-only on mobile; ☰ leads */
  .brand-mini { display: none !important; }
  .reopen { display: inline-grid !important; }      /* always show the menu toggle */
  .topbar__name { font-size: 16px; }
  .topbar__files { padding-left: 9px; padding-right: 9px; }

  /* ═══ DRAWER (off-canvas sidebar) ══════════════════════════════════════════ */
  :root { --sidebar-w: min(86vw, 350px); }
  .sidebar__head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .sidebar__foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* taller, thumb-friendly rows */
  .nav-entry { padding: 12px 10px 12px 12px; }
  .rail-row { padding: 12px 8px 12px 12px; }
  .rail-row__title { font-size: 14px; }
  .acct { padding: 11px 10px; }
  /* delete lives on a left-swipe now — retire the meatball on phones */
  .rail-row__more { display: none !important; }

  /* ═══ SWIPE-TO-DELETE (conversation rows) ══════════════════════════════════
     The wrapper becomes a clip container; a red Delete sits behind the row and
     is revealed as the row slides left. */
  .rail-swipe { display: block; position: relative; overflow: hidden; border-radius: var(--r-sm); }
  .rail-swipe__del {
    display: flex; align-items: center; justify-content: flex-end; gap: 7px;
    position: absolute; inset: 0; z-index: 0; padding-right: 20px;
    border-radius: var(--r-sm);
    background: var(--danger); color: #fff; font: 600 13px/1 var(--font-ui);
    /* Hidden at rest so no red antialiasing seam can leak around the row's
       rounded corners; revealed only while actively swiping / open. */
    opacity: 0; transition: opacity 0.2s ease;
  }
  .rail-swipe.is-swiping .rail-swipe__del,
  .rail-swipe.is-open .rail-swipe__del { opacity: 1; }
  .rail-swipe__del .icon { width: 17px; height: 17px; }
  /* The row rides above the backdrop with an opaque fill so nothing bleeds through
     at rest. It must be SQUARE (radius 0) and fully cover the backdrop — the
     rounding is done by the wrapper's overflow clip. A second radius on the row
     (plus a will-change layer) left a red fringe leaking around the corners. */
  .rail-swipe .rail-row { position: relative; z-index: 1; background: var(--canvas-2); border-radius: 0; }
  .rail-swipe .rail-row.is-active { background: var(--surface); }

  /* ═══ THREAD ═══════════════════════════════════════════════════════════════ */
  .thread { padding: 18px 14px 8px; }
  .app:not([data-view="gallery"]) .thread { padding-bottom: 64px; }   /* chat: room above the composer, trimmed for small screens */
  .thread__inner { gap: 16px; }
  .msg__text { font-size: 15px; }
  .msg--user .msg__text { max-width: 88%; }

  /* ═══ COMPOSER ═════════════════════════════════════════════════════════════ */
  .composer-wrap { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .composer__main { padding: 12px 12px 10px; }
  .composer__input { font-size: 16px; }             /* ≥16px ⇒ no iOS focus-zoom */
  .composer__send { width: 44px; height: 44px; }
  #btnUpload { width: 42px; height: 42px; }
  /* the keyboard hint is meaningless without a physical keyboard */
  .composer__hint { display: none; }

  /* ═══ HOME ═════════════════════════════════════════════════════════════════ */
  .home { margin-top: max(2vh, 14px); padding: 0 16px; }
  .home-hero { width: 104px; height: 104px; margin-bottom: 18px; }
  .home-hero__mark { width: 48px; height: 68px; }
  .home-welcome { margin-bottom: 8px; }
  .home-sub { font-size: 14px; }
  .home-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .home-card { flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; }
  .home-card__ico { margin: 0; flex: none; }
  /* welcome (empty-conversation) seeds stack full-width */
  .welcome { margin-top: max(5vh, 28px); }
  .welcome__seeds { gap: 8px; }
  .seed { max-width: 100%; width: 100%; }

  /* ═══ OVERVIEW (gallery) ═══════════════════════════════════════════════════ */
  .gallery { gap: 14px; }
  /* The big "Overview" heading duplicates the top-bar title, and the cards/list
     toggle is moot on a phone (the grid is single-column in both modes) — hide
     both so the dashboard leads straight with its subtitle + stats. */
  .gallery__title { display: none; }
  .ov-layout { display: none; }
  .gallery__sub { font-size: 12.5px; }
  /* compact three-up stat row instead of three tall stacked panels */
  .ov-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .ov-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 11px; }
  .ov-stat__ico { width: 30px; height: 30px; }
  .ov-stat__ico .icon { width: 16px; height: 16px; }
  .ov-stat__n { font-size: 18px; }
  .ov-stat__l { font-size: 10.5px; }
  /* source tabs: keep on one line, scroll if they overflow */
  .ov-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ov-tabs::-webkit-scrollbar { display: none; }
  .ov-tabs .seg__opt { white-space: nowrap; }
  /* Single column, clamped with minmax(0,1fr): a plain `1fr` track grows to its
     widest item's min-content, so a long artifact name (white-space:nowrap) blew
     the card out to ~412px and pushed it off the right edge. minmax(0,…) pins the
     track to the container and lets the name ellipsize. The second selector beats
     gallery.css's higher-specificity list-mode `1fr` (same edit, applied later). */
  .gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gallery__grid.gallery__grid--list { grid-template-columns: minmax(0, 1fr); }

  /* ═══ ARTIFACT WORKSPACE ═══════════════════════════════════════════════════
     Reimagined for a phone: the artifact takes the FULL screen. The embedded
     conversation column is dropped (no room for a split); the toolbar is the
     header and ✕ returns you to the conversation. */
  .aw__body { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
  .aw__panel--chat { display: none !important; }
  .aw__divider { display: none !important; }
  .aw__toolbar {
    height: calc(54px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0 10px;
    gap: 6px;
  }
  /* Trim the toolbar to what fits a phone: view-toggle · ↻ Regenerate · Download · ✕.
     (Device-width presets, version badge, copy, expand + the name label drop out.) */
  .aw__tool-name,
  #awViewports,
  #awVersions,
  #awCopy,
  #awExpand { display: none !important; }
  /* The name was the flex:1 spacer; with it gone, pin the actions to the right
     edge (otherwise Refresh/Download/✕ bunch up on the left). */
  .aw__tool-right { margin-left: auto; }
  .aw__stage { padding: 0; }
  .aw__device--framed { margin: 12px 0; }

  /* ═══ POPOVERS → BOTTOM SHEETS ═════════════════════════════════════════════
     The account flyout + meatball menu dock to the bottom edge as full-width
     sheets (override floatPanel's inline left/top positioning). Files is its own
     push-down drawer below. */
  .flyout, .menu {
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0 !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom)) !important;
    transform-origin: bottom center !important;
  }
  .flyout__item, .menu__item { padding-top: 13px; padding-bottom: 13px; }

  /* ═══ FILES → PUSH-DOWN DRAWER ═════════════════════════════════════════════
     Anchored under its top-bar button (more pregnant than a floating sheet), it
     opens between the header and the thread and pushes the conversation down —
     the (flex:1) thread shrinks as the drawer grows. The button flips Files⇄Close.
     grid-template-rows 0fr→1fr animates an auto height with no JS measuring. */
  .files-drawer {
    flex: none; position: relative; z-index: 5;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    /* raised surface (not canvas-2) for clear contrast against the thread */
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--line-strong), 0 14px 26px -18px rgba(0, 0, 0, 0.72);
  }
  .files-drawer.is-open { grid-template-rows: 1fr; }
  .files-drawer__inner { overflow: hidden; min-height: 0; }
  /* a touch shorter so it reads as a panel, not a takeover (was 58vh) */
  .files-drawer__panel { padding: 4px 12px 12px; max-height: 44vh; overflow-y: auto; }
  /* the panel owns the scroll; neutralize the inner list's own cap/scroll */
  .files-drawer .files__list { max-height: none; overflow: visible; }
  .files-drawer .files__open { padding-top: 12px; padding-bottom: 12px; }
  /* keep "Files / Download all" pinned while the list scrolls */
  .files-drawer .files__head {
    position: sticky; top: 0; z-index: 1; background: var(--surface-2);
    margin: 0 -12px; padding: 8px 12px 10px;
  }

  /* ═══ MODAL ════════════════════════════════════════════════════════════════
     Destructive-confirm dialog docks to the bottom as a sheet too. */
  .scrim { place-items: end stretch; padding: 0; }
  .modal {
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 24px 22px calc(22px + env(safe-area-inset-bottom));
  }
  .modal__actions { margin-top: 24px; }
  .modal__actions .btn { flex: 1; justify-content: center; }

  /* ═══ TOASTS ═══════════════════════════════════════════════════════════════ */
  .toaster { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { width: 100%; max-width: 100%; }
}