/* mobile.css — THE MONOHULL (Sum, 2026-08-23): on a phone there is no side-by-side. one vertical hull:
   scroll down for the bot, up for the card desk, up again for the other wing. full-width everything,
   bigger text ("i keep forgetting how small text is"). LAYOUT ONLY, media-gated — desktop untouched.
   loads LAST of the structure css (after shell/desk.css) so it wins ties. tag to code: this file. */
@media (max-width: 800px) {
  html { font-size: 17px; }
  body { font-size: 1.06em; }

  /* the hull — the desk grid becomes one column; zones stack and the PAGE scrolls through them */
  #desk { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #desk > * { width: 100%; min-height: 0; flex: none; }
  #desk > .zone { flex-direction: column; }
  /* ⚠ the CARD STACK (the middle grid cell) has NO .zone class — in the hull it must size to its content
     or it collapses to 0 and the cards paint into the void (found on glass, 23 Aug) */
  #desk > :not(.zone) { height: auto !important; overflow: visible; order: 0; }
  /* CORRECTION 2026-08-29 late (Sum: "keep top and bottom wings, bots can live there instead —
     launch top where we had launch left, launch bottom where we had launch right") — the hull's
     wings REMAP instead of trailing: the LEFT wing renders as the TOP band (right under the nav,
     where a left-docked bot now lands) and the RIGHT wing as the BOTTOM band. The old order
     (left 2 · right 3 — both below the desk) is superseded; top/bottom zones keep their posts.
     Worst case he accepted: top wing + center cards + bottom wing, three stacked regions. */
  .zone[data-edge="top"]    { order: -2; }
  .zone[data-edge="left"]   { order: -1; }  /* the top wing — was order 2 */
  .zone[data-edge="right"]  { order: 4; }   /* the bottom wing — was order 3 */
  .zone[data-edge="bottom"] { order: 5; }   /* was 4 — stays the floor */

  /* full width, no floors — the 280px open-bar floor and 340px wing width are desktop law only */
  .zone[data-edge="left"] .agent-bar:not(.collapsed), .zone[data-edge="right"] .agent-bar:not(.collapsed),
  .zone[data-edge="left"] .card, .zone[data-edge="right"] .card { width: 100%; min-width: 0; }
  .agent-bar:not(.collapsed) { max-height: 88vh; }   /* a bot is a full screen you scroll to, not a sliver */
  .zone[data-edge="left"] .card.collapsed, .zone[data-edge="right"] .card.collapsed,
  .agent-bar.collapsed { width: 100% !important; min-width: 0 !important; height: 46px; }   /* a collapsed rail turns strip in the hull */

  .card { margin: 4px 2px; border-radius: 8px; }

  /* 💬 THE ROOM in the hull (2026-08-29, the phone pass): two flex rows refused to shrink and
     forced the chat screen to 556px inside a 371px card — Vogel's lines clipped mid-word. The
     room-tab strip and the 1997 format bar (font · swatch · B/I) WRAP instead; the screen then
     takes the card's width and pre-wrap does the rest. aiol.css untouched — desktop never clips. */
  .card-aiol .aiol-tabs, .card-aiol .aiol-bar { flex-wrap: wrap; }
  .card-aiol .aiol-screen { max-width: 100%; }

  /* a crowded card-head (the room seats seven controls) is wider than any phone — it SCROLLS
     sideways rather than clipping, so every control stays reachable by thumb. hull-only. */
  .card .card-head { overflow-x: auto; }

  /* 📲 CHROME AWAY lived here for an hour, phone-gated — PROMOTED the same night (Sum, on his
     desktop: "think I want that feature even in landscape") to shell/topbar.css, ungated, every
     size. The desk is flex:1, so it GROWS into the freed rows by construction — his vote: "desk
     grows, wings stay fixed" (wing widths are, and their sliders still adjust them). */

  /* the notch / dynamic island (standalone PWA draws under the status bar) */
  #topbar { padding-top: max(6px, env(safe-area-inset-top)); }
  #desk { padding-bottom: env(safe-area-inset-bottom); }
  /* iOS zooms any input under 16px on focus — hold the floor so the page never jumps */
  input, textarea, select { font-size: max(1em, 16px); }
}