/* shell.css — layout for the generic glitch-app shell built by shell.js.
   Phone first: 100dvh (never 100vh — iOS lies), safe-area insets everywhere,
   44px minimum touch targets, 16px inputs so iOS never zooms on focus.
   At >=900px the bottom bar disappears and the non-main screens become
   right-side panels. Tokens come from theme.css; no colours are literal here.
   Placeholders: none (screen ids arrive at runtime via GA.cfg.screens). */

html,body{height:100%;overflow:hidden}
body{min-height:100dvh}

/* ── the app frame ── */
#ga-app{position:fixed;inset:0;display:block}
[data-screen]{position:absolute;inset:0;display:none;overflow:hidden}
/* chat.css/term.css give their screens display:flex, which beats the UA [hidden] rule —
   a hidden screen must NEVER paint (it is absolutely positioned and would cover the app) */
[data-screen][hidden]{display:none !important}
[data-screen].ga-on{display:block}
[data-screen="main"]{z-index:0}

/* ── mobile: one screen at a time, bottom bar ── */
.ga-mob [data-screen]{
  padding-left:var(--ga-safe-l);padding-right:var(--ga-safe-r);
  padding-top:var(--ga-safe-t);
  padding-bottom:calc(var(--ga-bar-h) + var(--ga-safe-b));
}
#ga-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  height:calc(var(--ga-bar-h) + var(--ga-safe-b));
  padding:0 var(--ga-safe-r) var(--ga-safe-b) var(--ga-safe-l);
  background:var(--glass);border-top:1px solid var(--teal-trace);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.ga-desk #ga-bar{display:none}
.ga-bar-btn{flex:1 1 0;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.ga-bar-btn .ga-ic{font-size:18px;line-height:1}
.ga-bar-btn.on{color:var(--teal);text-shadow:0 0 10px rgba(0,245,228,.35)}

/* ── desktop: top pill row + right-side panels ── */
#ga-top{position:fixed;z-index:60;display:none;gap:8px;flex-wrap:wrap;
  right:calc(16px + var(--ga-safe-r));top:calc(14px + var(--ga-safe-t))}
.ga-desk #ga-top{display:flex}
.ga-desk [data-screen].ga-panel.ga-on{
  left:auto;right:0;top:0;bottom:0;width:min(440px,42vw);z-index:40;
  background:var(--glass);border-left:1px solid var(--teal-trace);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  overflow-y:auto;padding:64px 16px 16px}
.ga-desk [data-screen="main"]{display:block;right:0}

/* ── sidebars → tag chips on mobile ── */
.ga-tags{display:none;gap:6px;flex-wrap:wrap;padding:8px 10px}
.ga-mob .ga-tags{display:flex}
.ga-tag{min-height:32px;padding:6px 12px;border-radius:999px;cursor:pointer;
  background:var(--void-deep);border:1px solid var(--teal-trace);color:var(--dim);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ga-tag.on{color:var(--teal);border-color:var(--teal)}
.ga-mob .ga-sidebar{display:none}
.ga-mob .ga-sidebar.ga-open{display:block;position:static;width:auto;max-height:50dvh;overflow-y:auto}

/* ── hamburger for menus > 5 items ── */
.ga-burger{display:none;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer;
  color:var(--teal-mid);font-size:19px}
.ga-mob .ga-collapsible .ga-burger{display:block}
.ga-mob .ga-collapsible > *:not(.ga-burger){display:none}
.ga-mob .ga-collapsible.ga-menu-open{flex-wrap:wrap}
.ga-mob .ga-collapsible.ga-menu-open > *{display:block}

/* ── touch ergonomics ── */
.ga-mob button,.ga-mob .pill,.ga-mob .btn{min-height:44px}
.ga-mob input,.ga-mob textarea,.ga-mob select{font-size:16px}

/* ── the beacon pill (created by boot.js) ── */
#ga-beacon{position:fixed;left:calc(12px + var(--ga-safe-l));
  bottom:calc(8px + var(--ga-bar-h) + var(--ga-safe-b));z-index:61;
  font-size:10px;letter-spacing:.08em;font-family:var(--mono);padding:4px 10px;
  border-radius:999px;background:var(--glass);border:1px solid var(--teal-trace);
  color:var(--dim);pointer-events:none;text-transform:uppercase;white-space:nowrap}
.ga-desk #ga-beacon{bottom:calc(10px + var(--ga-safe-b))}
#ga-beacon.on{color:var(--teal-mid)}
#ga-beacon.off{color:var(--err);border-color:var(--err)}

/* ── small helpers the example index.html uses ── */
.ga-pad{padding:16px}
.ga-h{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}