/* ============================================================================
   COAI PA APP — layout layer.
   Everything COLOUR/TYPE/RADIUS comes from design/bos-tokens.css (the extracted
   B.O.S system). This file only does LAYOUT, so the app stays visually native to
   the dashboard: if a token changes there, it changes here for free.

   MOBILE FIRST. The base rules below ARE the 390px phone layout; the desktop
   tiers are the media queries at the bottom. That is the opposite of the live
   SPA (desktop-first with overrides) and is deliberate — most workshop
   attendees are on a phone, so the phone path must be the simple path, not the
   one reached through six !important overrides.
   ========================================================================= */

/* iOS: 100vh includes the browser chrome and the composer ends up under it.
   dvh is the fix; the vh line stays first as the fallback for old Safari.

   dvh alone is NOT enough for the software keyboard. iOS Safari shrinks the
   VISUAL viewport when the keyboard opens but leaves the LAYOUT viewport (and
   therefore dvh) exactly as it was, so the composer and the bottom nav end up
   behind the keyboard with no way to scroll them back — body cannot scroll.
   app.js watchKeyboard() publishes the keyboard height as --pa-kb from
   window.visualViewport and we subtract it here. Falls back to 0 everywhere
   visualViewport does not exist. */
html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }

:root { --pa-kb: 0px; }

.pa-boot, .pa-gate { height: 100vh; height: 100dvh; }
.pa-shell { height: 100vh; height: calc(100dvh - var(--pa-kb, 0px)); }

/* ── BOOT ─────────────────────────────────────────────────────────────────── */
.pa-boot{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; text-align:center; }
.pa-boot__txt{ margin:0; font-family:var(--bos-font-display); font-weight:300; font-size:16px;
  color:var(--bos-muted); }
.pa-boot__fallback{ margin:0; max-width:300px; font-size:12px; line-height:1.5;
  color:var(--bos-faint); opacity:0; animation:pa-fadein .4s ease 6s forwards; }
@keyframes pa-fadein{ to{ opacity:1; } }

.pa-orb-wrap{ display:flex; align-items:center; justify-content:center; }
.pa-orb-wrap--sm .bos-orb{ width:66px; height:66px; }
.pa-orb-wrap--sm .bos-orb__mark{ width:54px; height:54px; }

/* ── LOGIN GATE ───────────────────────────────────────────────────────────── */
.pa-gate{ display:flex; align-items:center; justify-content:center; padding:20px 16px;
  overflow-y:auto; }
.pa-gate__card{ width:100%; max-width:380px; border:1px solid var(--bos-line);
  border-radius:var(--bos-r-xl); background:var(--bos-card); padding:26px 20px 22px;
  box-shadow:var(--bos-shadow-card); }
.pa-gate__head{ display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:20px; text-align:center; }
.pa-gate__title{ margin:0; font-family:var(--bos-font-display); font-weight:300; font-size:23px;
  letter-spacing:-.3px; color:var(--bos-text-hi); }
.pa-gate__title b{ color:var(--bos-accent); font-weight:600; }
.pa-gate__sub{ margin:0; font-family:var(--bos-font-mono); font-size:9px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--bos-faint); }

/* segmented door switch */
.pa-seg{ display:flex; gap:4px; padding:4px; margin-bottom:18px;
  border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(255,255,255,.03); }
.pa-seg__btn{ flex:1; min-height:38px; border:none; border-radius:9px; background:transparent;
  color:var(--bos-muted); font-family:var(--bos-font-display); font-weight:500; font-size:12.5px;
  cursor:pointer; transition:background-color .16s var(--bos-ease), color .16s var(--bos-ease); }
.pa-seg__btn.is-on{ background:linear-gradient(180deg,#5cebab,#38cf8d);
  color:var(--bos-accent-ink-2); font-weight:600; }

.pa-door{ display:flex; flex-direction:column; gap:8px; }
.pa-label{ font-family:var(--bos-font-mono); font-size:8.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--bos-dim); margin-top:6px; }
.pa-hint{ margin:0; font-size:11.5px; line-height:1.5; color:var(--bos-faint); }
.pa-btn-block{ width:100%; margin-top:14px; text-decoration:none; }
.pa-linkbtn{ margin-top:4px; padding:10px; min-height:44px; background:none; border:none;
  color:var(--bos-muted); font-family:var(--bos-font-body); font-size:12.5px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.pa-linkbtn:hover{ color:var(--bos-text-hi); }

/* the single honest error/status line */
.pa-msg{ margin:14px 0 0; padding:11px 13px; border-radius:var(--bos-r-md); font-size:12.5px;
  line-height:1.5; border:1px solid rgba(255,140,120,.3); background:rgba(255,120,100,.08);
  color:#ffc9bd; }
.pa-msg.is-ok{ border-color:rgba(55,233,106,.3); background:var(--bos-accent-tint);
  color:#a9edc2; }
.pa-msg.is-warn{ border-color:var(--bos-gold-ring); background:var(--bos-gold-tint);
  color:#f3d79a; }

/* ── APP SHELL ────────────────────────────────────────────────────────────── */
/* Rows: topbar / trial / main(1fr) / composer / nav. Only `main` scrolls, so the
   composer can never be pushed off-screen by a long transcript. */
.pa-shell{ display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; }

.pa-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--bos-line); }
.pa-top__id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pa-top__sub{ font-family:var(--bos-font-mono); font-size:8px; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--bos-faint); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }

/* trial banner */
.pa-trial{ display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:12px;
  border-bottom:1px solid var(--bos-line); background:var(--bos-accent-tint);
  color:#a9edc2; }
.pa-trial__dot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--bos-accent);
  box-shadow:0 0 6px var(--bos-accent); }
.pa-trial__txt{ font-weight:500; }
.pa-trial__meta{ margin-left:auto; font-family:var(--bos-font-mono); font-size:9px;
  letter-spacing:.8px; opacity:.75; white-space:nowrap; }
.pa-trial.is-warn{ background:var(--bos-gold-tint); color:#f3d79a; }
.pa-trial.is-warn .pa-trial__dot{ background:var(--bos-gold); box-shadow:0 0 6px var(--bos-gold); }
.pa-trial.is-dead{ background:rgba(255,120,100,.1); color:#ffc9bd; }
.pa-trial.is-dead .pa-trial__dot{ background:#ff8a76; box-shadow:0 0 6px #ff8a76; }

.pa-main{ position:relative; min-height:0; overflow:hidden; }
.pa-view{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; }
.pa-view[hidden]{ display:none; }

/* ── CHAT ─────────────────────────────────────────────────────────────────── */
.pa-msgs{ display:flex; flex-direction:column; gap:14px; padding:16px 14px 20px; }

.pa-row{ display:flex; gap:9px; align-items:flex-end; }
.pa-row--me{ flex-direction:row-reverse; }
.pa-col{ display:flex; flex-direction:column; gap:4px; min-width:0; max-width:calc(100% - 42px); }
.pa-row--me .pa-col{ align-items:flex-end; }

.pa-bubble{ max-width:100%; padding:11px 14px; border-radius:var(--bos-r-xl); font-size:14.5px;
  line-height:1.5; font-family:var(--bos-font-body); white-space:pre-wrap;
  overflow-wrap:anywhere; }
.pa-bubble--them{ background:var(--bos-surface-2); color:var(--bos-text-bubble);
  border:1px solid var(--bos-line); border-bottom-left-radius:var(--bos-r-xs); }
.pa-bubble--me{ background:var(--bos-accent); color:var(--bos-accent-ink); font-weight:500;
  border-bottom-right-radius:var(--bos-r-xs); }
/* an agent turn that FAILED — visually distinct from a real answer so a user can
   never mistake an error for JUNO's opinion */
.pa-bubble--bad{ background:rgba(255,120,100,.08); border:1px solid rgba(255,140,120,.32);
  color:#ffc9bd; border-bottom-left-radius:var(--bos-r-xs); }
.pa-stamp{ font-family:var(--bos-font-mono); font-size:8.5px; letter-spacing:.7px;
  color:var(--bos-faint); padding:0 4px; }

.pa-empty{ margin:32px auto; max-width:290px; text-align:center; }
.pa-empty h2{ margin:14px 0 6px; font-family:var(--bos-font-display); font-weight:300;
  font-size:20px; color:var(--bos-text-hi); }
.pa-empty p{ margin:0; font-size:13px; line-height:1.55; color:var(--bos-muted); }
.pa-chips{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:16px; }
.pa-chip{ padding:9px 13px; min-height:38px; border-radius:var(--bos-r-pill);
  border:1px solid var(--bos-line-strong); background:rgba(255,255,255,.03);
  color:var(--bos-text); font-family:var(--bos-font-body); font-size:12.5px; cursor:pointer;
  text-align:left; }
.pa-chip:hover{ border-color:var(--bos-accent); color:var(--bos-text-max); }

/* thinking state — the three dots + the server's own stage label */
.pa-think{ display:flex; align-items:center; gap:9px; }
.pa-think__dots{ display:inline-flex; gap:4px; }
.pa-think__dots i{ width:5px; height:5px; border-radius:50%; background:var(--bos-juno);
  animation:pa-bounce 1.15s ease-in-out infinite; }
.pa-think__dots i:nth-child(2){ animation-delay:.16s; }
.pa-think__dots i:nth-child(3){ animation-delay:.32s; }
@keyframes pa-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.45; }
                      30%{ transform:translateY(-4px); opacity:1; } }
.pa-think__txt{ font-size:12px; color:var(--bos-dim); font-style:italic; }

/* ── COMPOSER ─────────────────────────────────────────────────────────────── */
.pa-composer{ padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--bos-line); background:rgba(6,10,11,.72); }
.pa-composer__row{ display:flex; gap:8px; align-items:flex-end; }
/* 16px is NOT cosmetic: any smaller and iOS Safari zooms the whole page on focus
   and the user is left scrolled sideways mid-demo (live SPA hit this, :443). */
#pa-composer{ font-size:16px; max-height:132px; }
.pa-send{ flex:none; width:46px; height:46px; border:none; border-radius:var(--bos-r-lg);
  background:linear-gradient(135deg,var(--bos-accent),var(--bos-accent-deep));
  color:var(--bos-accent-ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 18px var(--bos-accent-glow);
  transition:filter .15s var(--bos-ease), transform .12s var(--bos-ease); }
.pa-send:active{ transform:scale(.94); }
.pa-send:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
/* send <-> stop. While a turn streams the button stays LIVE and becomes Stop —
   a user must always have something to press. */
.pa-send__stop{ display:none; }
.pa-send.is-stop{ background:linear-gradient(135deg,#ff9a86,#e8654a); box-shadow:none; }
.pa-send.is-stop .pa-send__go{ display:none; }
.pa-send.is-stop .pa-send__stop{ display:block; }
.pa-retry{ align-self:flex-start; }
.pa-composer__foot{ display:flex; justify-content:space-between; align-items:center; gap:8px;
  min-height:14px; margin-top:5px; padding:0 2px; }
.pa-count{ font-family:var(--bos-font-mono); font-size:9px; color:var(--bos-faint); }
.pa-count.is-over{ color:#ff8a76; }
.pa-blocked{ font-size:11px; color:#f3d79a; text-align:right; }
.pa-composer.is-off{ opacity:.55; pointer-events:none; }

/* ── BOTTOM NAV ───────────────────────────────────────────────────────────── */
.pa-nav{ display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--bos-line); background:rgba(6,10,11,.9);
  padding-bottom:env(safe-area-inset-bottom, 0px); }
.pa-nav__btn{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:54px; padding:6px 2px; border:none; background:transparent;
  color:var(--bos-muted-2); font-family:var(--bos-font-display); font-size:9.5px;
  letter-spacing:.4px; cursor:pointer; position:relative;
  transition:color .16s var(--bos-ease); }
.pa-nav__btn svg{ width:21px; height:21px; }
.pa-nav__btn.is-on{ color:var(--bos-accent); }
.pa-nav__btn.is-on::after{ content:""; position:absolute; top:0; left:22%; right:22%; height:2px;
  border-radius:0 0 2px 2px; background:var(--bos-accent); }

/* ── PLACEHOLDER for the not-yet-built views ──────────────────────────────── */
.pa-todo{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; height:100%; padding:30px 24px; text-align:center; }
.pa-todo h2{ margin:0; font-family:var(--bos-font-display); font-weight:300; font-size:19px;
  color:var(--bos-text-hi); }
.pa-todo p{ margin:0; max-width:270px; font-size:13px; line-height:1.55; color:var(--bos-muted); }

/* ── EXPIRED / BLOCKING OVERLAY ───────────────────────────────────────────── */
.pa-dead{ position:absolute; inset:0; z-index:40; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:30px 26px; text-align:center;
  background:rgba(5,8,9,.93); }
.pa-dead h2{ margin:0; font-family:var(--bos-font-display); font-weight:300; font-size:21px;
  color:var(--bos-text-hi); }
.pa-dead p{ margin:0; max-width:290px; font-size:13.5px; line-height:1.6; color:var(--bos-muted); }

/* ── ACCOUNT SHEET ────────────────────────────────────────────────────────── */
.pa-sheet{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end;
  background:rgba(4,8,10,.66); }
.pa-sheet__panel{ width:100%; border-radius:var(--bos-r-xl) var(--bos-r-xl) 0 0;
  border-top:1px solid var(--bos-line-strong); background:#0a1310;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:8px; animation:pa-up .24s var(--bos-ease-reveal) both; }
@keyframes pa-up{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.pa-sheet__name{ margin:0; font-family:var(--bos-font-display); font-size:16px; font-weight:500;
  color:var(--bos-text-hi); }
.pa-sheet__meta{ margin:0 0 8px; font-family:var(--bos-font-mono); font-size:9px;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--bos-faint); }

/* ── TOAST ────────────────────────────────────────────────────────────────── */
.bos-toast[hidden]{ display:none; }

/* ── FOCUS: keyboard users must always see where they are ─────────────────── */
:focus-visible{ outline:2px solid var(--bos-accent); outline-offset:2px; border-radius:4px; }

/* ── DESKTOP TIERS ────────────────────────────────────────────────────────── */
@media (min-width:700px){
  .pa-shell{ max-width:860px; margin:0 auto; border-left:1px solid var(--bos-line);
    border-right:1px solid var(--bos-line); }
  .pa-top{ padding:12px 20px; }
  .pa-msgs{ padding:22px 20px 24px; }
  .pa-col{ max-width:min(600px, calc(100% - 60px)); }
  .pa-composer{ padding:12px 18px 16px; }
  .pa-sheet{ align-items:center; justify-content:center; }
  .pa-sheet__panel{ max-width:380px; border-radius:var(--bos-r-xl); border:1px solid var(--bos-line-strong); }
}

/* Phones: the SPA's single most load-bearing mobile rule — glass blur is what
   made the dashboard crawl on the demo handsets (bos-tokens.css / index.html:426). */
@media (max-width:1024px){
  *{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
}
@media (prefers-reduced-motion:reduce){
  .pa-think__dots i, .pa-sheet__panel, .pa-boot__fallback{ animation:none; }
  .pa-boot__fallback{ opacity:1; }
}

/* 27-Jul FIX: .pa-boot sets display:flex, which OVERRIDES the browser default
   [hidden]{display:none}. Boot completed and set hidden=true, but the overlay stayed
   on screen covering a working login - the app looked completely dead. Guards existed
   for .pa-view and .bos-toast; .pa-boot was missed. One global rule so no future
   element can repeat it. */
[hidden] { display: none !important; }