/* 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; }
  .zone[data-edge="top"]    { order: -2; }
  .zone[data-edge="left"]   { order: 2; }   /* bots ride BELOW the desk — scroll down for the bot */
  .zone[data-edge="right"]  { order: 3; }
  .zone[data-edge="bottom"] { order: 4; }

  /* 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 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); }
}