/* ===========================================================================
   SYC Passport — Sia Citti welcome screen
   Dark is canonical; light is fully solved. Tokens inherited from the
   shipped Passport shell, plus the semantic layer it lacked.
   ======================================================================== */

:root{
  /* light */
  --paper:#F2EFE7; --surface:#FFFFFF; --surface-2:#F0ECE1; --surface-3:#E7E2D5;
  --ink:#191B22; --ink-soft:#4B4D57; --ink-faint:#6E7079;
  --line:#E2DDD0; --line-strong:#CFC8B6;
  --gold:#9A7620;
  --ok:#2F8F5B;  --ok-bg:#E4F2E9;
  --warn:#9A5E0C; --warn-bg:#F7EEDC;
  --danger:#C93A1E;
  --accent:#7A241B; --accent-ink:#FFFFFF;   /* overwritten per companion app */

  --ff-disp:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-ui:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#0E1016; --surface:#191C24; --surface-2:#1E222C; --surface-3:#262B36;
  --ink:#F0ECE2; --ink-soft:#B8BBC6; --ink-faint:#8A8D98;
  --line:#2A2E39; --line-strong:#3A3F4C;
  --gold:#C6A24A;
  --ok:#3FBF7F;  --ok-bg:#12291E;
  --warn:#E5A93C; --warn-bg:#2A2012;
  --danger:#F26B4E;
  --accent:#B03A2C; --accent-ink:#FFFFFF;
}}
:root[data-theme="dark"]{
  --paper:#0E1016; --surface:#191C24; --surface-2:#1E222C; --surface-3:#262B36;
  --ink:#F0ECE2; --ink-soft:#B8BBC6; --ink-faint:#8A8D98;
  --line:#2A2E39; --line-strong:#3A3F4C;
  --gold:#C6A24A;
  --ok:#3FBF7F;  --ok-bg:#12291E;
  --warn:#E5A93C; --warn-bg:#2A2012;
  --danger:#F26B4E;
  --accent:#B03A2C; --accent-ink:#FFFFFF;
}

/* Self-hosted, latin subset, variable. No CDN, no network dependency.
   Fetched from @fontsource-variable — same files Google Fonts serves. */
@font-face{
  font-family:'Fraunces'; src:url('fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree'; src:url('fonts/figtree-var.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── the shell: one flex column that owns the viewport ─────────────────── */
.app[hidden]{display:none}
/* REACTIVE STAGE. Four rows, and only the log scrolls. The shell is sized from
   visualViewport (syc-chat-viewport.js), never from 100vh, because iOS resizes
   AND pans the layout viewport when the keyboard opens. */
.app{
  position:fixed; left:0; right:0;
  top:var(--vvt,0px);
  height:var(--vvh,100dvh);
  display:grid;
  /* brandbar, bar, strip, stage, history pill, suggest rail, composer */
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;
  grid-template-columns:minmax(0,1fr);   /* one column, so nothing can be auto-placed beside it */
  max-width:520px; margin-inline:auto;
  touch-action:pan-y;
}
.app > *{min-width:0}
.app > *{grid-column:1}

/* ── brandbar ──────────────────────────────────────────────────────────── */
.brandbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 15px 10px; border-bottom:1px solid var(--line); background:var(--surface-2);
  padding-top:calc(11px + env(safe-area-inset-top));
}
/* The logo replaces the wordmark. It is a debossed mark: strong white on the
   dark brandbar, and a genuine engraved read on light grounds. Height-capped so
   it never pushes the 56px bar around, and it carries its own alt because on
   light backgrounds it is deliberately low-contrast. */
.brandbar .wm .lgo{display:block; height:26px; width:auto; max-width:min(52vw,190px)}
@media (max-width:380px){ .brandbar .wm .lgo{height:22px} }
.brandbar .wm{display:flex; align-items:center; gap:8px; font-family:var(--ff-disp); font-weight:900; font-size:15px}
.brandbar .dot{width:17px; height:17px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; color:#fff; font-size:9px}
.bbr{display:flex; align-items:center; gap:7px}
.brandbar .tgl.phase{width:auto; padding:0 11px; font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; font-family:var(--ff-ui)}
.brandbar .tgl{background:none; border:1px solid var(--line-strong); color:var(--ink-soft);
  border-radius:999px; width:34px; height:34px; cursor:pointer; font-size:13px; line-height:1}

/* ── action bar: the two writes + directions, in their windows ─────────── */
.bar{display:flex; gap:1px}
.bar:empty{display:none}
.bar button, .bar a{
  flex:1 1 0; min-width:0; min-height:54px; border:none; cursor:pointer; font-family:inherit;
  font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
  gap:7px; text-align:center; padding:6px 10px; line-height:1.2; text-decoration:none;
}
.bar .lateb{background:var(--warn); color:#22180A}
.bar .checkb{background:var(--ok); color:#06150D}
.bar .routeb{background:var(--surface-3); color:var(--ink); flex:0 0 38%}
.bar .routeb.wide{flex:1 1 auto}
.bar .flagged,.bar .doneb{
  cursor:default; flex-direction:column; gap:1px; line-height:1.25;
  background:var(--warn-bg); color:var(--warn);
}
.bar .doneb{background:var(--ok-bg); color:var(--ok)}
.bar .flagged small,.bar .doneb small{font-weight:600; font-size:11.5px; color:var(--ink-soft)}

/* ── strip: the one true thing, her name, the ticket ───────────────────── */
/* which build am I looking at — answered without opening devtools */
.strip.late{background:color-mix(in srgb,#C1121F 13%,var(--surface-2))}
.strip.late .small{color:#E5484D}
.tapp{display:block; margin-top:9px; padding:13px; text-align:center; border-radius:13px;
  background:var(--accent,#9A7620); color:#fff; font-weight:750; text-decoration:none}
.ubld{display:block; margin:18px 0 0; text-align:center; letter-spacing:.1em}
.bld{margin-left:7px; font-family:var(--ff-mono); font-size:9px; font-weight:700;
  letter-spacing:.06em; color:var(--ink-faint); opacity:.65; vertical-align:2px;
  font-variant-numeric:tabular-nums; white-space:nowrap}

.strip{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  padding:9px 15px 8px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.strip .l{display:flex; flex-direction:column; min-width:0}
.strip .small{font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.strip .big{font-family:var(--ff-disp); font-weight:600; font-variation-settings:'opsz' 144;
  font-size:26px; line-height:1.08; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.strip .where{font-size:13px; font-weight:600; line-height:1.2; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.strip .caller{display:flex; flex-direction:column; align-items:flex-end; gap:0; flex:0 0 auto; padding-bottom:2px}
.strip .crow{display:flex; align-items:center; gap:8px}

/* contact: small, always there, never a chip. Sourced from policy. */
.strip .mini{display:flex; align-items:center; gap:1px; margin-right:-3px}
.ic{width:32px; height:32px; display:grid; place-items:center; border-radius:9px; flex:0 0 auto;
  color:var(--ink-soft); text-decoration:none; -webkit-tap-highlight-color:transparent}
.ic svg{width:16px; height:16px}
.ic:hover{color:var(--ink); background:color-mix(in srgb,var(--ink) 9%,transparent)}
.ic:active{color:var(--ink); transform:scale(.9)}
/* the one that leads somewhere rather than out to a phone app */
/* The Passport button is the one thing in this row a guest actually wants, and
   it was a 32px anonymous glyph beside two utility icons. It is now a labelled
   pill in the accent colour: same row, obviously the primary. */
.ic.game{color:var(--accent,var(--gold)); width:auto; padding:0 11px 0 8px; gap:6px;
  grid-auto-flow:column; align-items:center; min-height:34px; font:700 12px/1 var(--ff-ui);
  letter-spacing:.02em; border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 42%,transparent);
  background:color-mix(in srgb,var(--accent,var(--gold)) 13%,transparent)}
.ic.game span{display:block}
@media (max-width:360px){ .ic.game span{display:none} .ic.game{width:34px; padding:0} }
.ic.game svg{width:20px; height:20px}
.ic.game:hover{background:color-mix(in srgb,var(--accent,var(--gold)) 15%,transparent)}
.strip .who{font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft)}
.live{width:7px; height:7px; border-radius:50%; background:var(--ok); animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.tik{background:none; border:none; padding:2px; margin:0 1px 0 0; cursor:pointer; color:var(--gold);
  width:44px; height:44px; display:grid; place-items:center; border-radius:12px; flex:0 0 auto}
.tik svg{width:30px; height:30px; overflow:visible; transform-origin:50% 82%; animation:sway 3.4s ease-in-out infinite}
.tik:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.tik:active svg{animation:none; transform:scale(.94)}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* ── stage: Sia left, conversation over the right. THE ONLY SCROLLER. ─── */
.stage{position:relative; grid-row:4; min-height:0; overflow:hidden}
.stage::before{
  content:""; position:absolute; left:-10%; bottom:-6%; width:74%; height:72%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--accent) 22%,transparent), transparent 72%);
}
.stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:26px; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--paper));
}
/* Every pose is pre-normalised to one 600x602 frame with her body at the same
   scale and her head at the same point, so this is a single rule. */
.sia{
  position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1;
  width:128%; height:auto; max-width:none;
  opacity:0; transition:opacity .45s ease;
  animation:breathe 5.5s ease-in-out infinite; transform-origin:50% 0%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.34));
}
.sia.on{opacity:1}
/* an animated loop has its own motion — don't double it up */
.sia.moving{animation:none}
@keyframes breathe{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-2px) scale(1.006)}}

.log{
  position:absolute; z-index:2; left:0; right:0; top:0; bottom:0; width:auto;
  padding:22px 12px 14px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,#000 38%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 14%,#000 38%,#000 100%);
}
.log::before{content:''; margin-top:auto; flex:0 0 auto}   /* stack from the bottom */
.log::-webkit-scrollbar{display:none}

/* bubbles */
.b{
  max-width:100%; font-size:14.5px; line-height:1.42; padding:8px 13px 9px;
  border-radius:18px; box-shadow:0 3px 12px -5px rgba(0,0,0,.55);
  animation:pop .18s ease both; overflow-wrap:anywhere;
}
@keyframes pop{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}
.b.from{align-self:flex-start; max-width:86%;
  background:color-mix(in srgb,var(--surface-2) 92%,transparent); color:var(--ink);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px)}
.b.from.tail{border-bottom-left-radius:6px}
.b.me{align-self:flex-end; max-width:86%; background:var(--accent); color:var(--accent-ink);
  font-weight:500; border-bottom-right-radius:6px}
.b a{color:inherit; font-weight:700; text-decoration-thickness:2px; text-underline-offset:3px}
.b.from a{text-decoration-color:var(--accent)}
.b strong{font-weight:700}
.gap{height:6px; flex:0 0 auto}

.notice{
  align-self:flex-start; max-width:100%; font-size:13px; line-height:1.4;
  background:var(--surface-2); border-left:3px solid var(--danger);
  border-radius:0 12px 12px 0; padding:9px 11px; color:var(--ink-soft);
  box-shadow:0 3px 12px -5px rgba(0,0,0,.55);
}
.notice b{display:block; color:var(--ink); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:2px}

.stamp{
  align-self:center; border:2px solid var(--accent); border-radius:10px; padding:11px 18px;
  transform:rotate(-3.5deg); text-align:center; color:var(--accent); margin:2px 0;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.stamp .t{font-family:var(--ff-disp); font-weight:900; font-size:13.5px; line-height:1.15; text-transform:uppercase}
.stamp .d{font-size:9px; letter-spacing:.17em; margin-top:4px; text-transform:uppercase; opacity:.9}
.stampline{align-self:center; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding:6px 0 2px}

/* ── "you've got access to": the companions this booking already owns ────
   Not a bubble — a small shelf of the things they have paid for and may not
   know about. Each card carries its own tile art and its own accent, so the
   Ripper card looks like the Ripper app before it is opened. Full-bleed of
   the thread column, because tapping is the whole point. */
/* Sia's tour-photo card. Same shelf treatment as .acc, because it sits over
   her portrait too and would be unreadable against her hair without a ground. */
.pcard{
  align-self:stretch; margin:4px 0 2px; overflow:hidden;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border:1px solid var(--line); border-radius:15px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.7);
}
.pcstrip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; padding:2px}
.pct{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px; background:var(--line)}
.pct img{width:100%; height:100%; object-fit:cover; display:block}
.pct[data-more]::after{
  content:attr(data-more); position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(10,12,17,.66); color:#f4f1ea;
  font-family:var(--ff-disp,Georgia,serif); font-size:17px; font-weight:600;
}
.pcbody{padding:11px 13px 12px}
.pct1{font-family:var(--ff-disp,Georgia,serif); font-size:16px; font-weight:600; color:var(--ink)}
.pcd{font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin-top:3px}
.pcgo{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  margin-top:10px; border-radius:11px; background:var(--gold,#c6a24a); color:#152238;
  text-decoration:none; font-size:14.5px; font-weight:700;
}
.pcgo:hover{filter:brightness(1.05)}

.acc{
  align-self:stretch; display:flex; flex-direction:column; gap:7px; margin:4px 0 2px;
  /* It sits over her portrait, so the shelf carries its own ground — the
     label and the footnote were unreadable against her hair without it. */
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border:1px solid var(--line); border-radius:15px; padding:9px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.7);
}
.acc-h{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  padding-left:2px}
.acc-c{
  --acc:var(--accent);
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:12px; padding:8px 10px 8px 9px; min-height:58px;
  box-shadow:0 3px 12px -6px rgba(0,0,0,.55);
}
.acc-c:hover,.acc-c:focus-visible{background:color-mix(in srgb,var(--acc) 14%,var(--surface-2))}
.acc-i{flex:0 0 46px; width:46px; height:46px; border-radius:9px; overflow:hidden;
  background:color-mix(in srgb,var(--acc) 30%,#000); display:block}
.acc-i img{width:100%; height:100%; object-fit:cover; display:block}
.acc-x{flex:1 1 auto; min-width:0; display:block}
.acc-x b{display:block; font-size:13.5px; font-weight:700; line-height:1.2}
.acc-x span{display:block; font-size:11.5px; line-height:1.35; color:var(--ink-soft); margin-top:2px}
.acc-go{flex:0 0 auto; color:var(--acc); font-size:16px; font-weight:700; padding:0 2px}
.acc-f{margin:1px 2px 0; font-size:11.5px; line-height:1.45; color:var(--ink-faint)}
.acc-f a{color:var(--ink-soft); font-weight:700; text-decoration-color:var(--accent);
  text-underline-offset:3px}

/* ── chips: unsent bubbles, two across plus "+" ────────────────────────── */
.suggest{padding:9px 12px 0; border-top:1px solid var(--line)}
.chips{display:flex; gap:6px; align-items:stretch; justify-content:flex-end}
.chip{
  flex:1 1 0; min-width:0; font-family:inherit; font-size:13.5px; font-weight:600; line-height:1.2;
  color:var(--ink); background:transparent; border:1.5px solid var(--accent);
  border-radius:18px; border-bottom-right-radius:6px; padding:7px 12px; min-height:46px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center; gap:6px;
}
.chip:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.chip:active{background:var(--accent); color:var(--accent-ink)}
.chip.late{border-color:var(--warn)}
.chip.ok{border-color:var(--ok)}
.chip.done{border-color:var(--ok); color:var(--ok); cursor:default}
.more{
  flex:0 0 46px; min-height:46px; border-radius:50%; border:1.5px solid var(--line-strong);
  background:transparent; color:var(--ink-soft); font-size:21px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.more:hover{color:var(--ink); border-color:var(--ink-faint)}
.more[aria-expanded="true"]{background:var(--surface-3); color:var(--ink)}

.tray{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px}
.tray[hidden]{display:none}
.tray button{
  font-family:inherit; font-size:13px; font-weight:600; line-height:1.2; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:14px;
  min-height:44px; padding:6px 10px; cursor:pointer; text-align:center;
}
.tray button:hover{color:var(--ink); border-color:var(--ink-faint)}
.tray .wide{grid-column:1 / -1}

/* ── ask: 16px minimum, which is the whole iOS zoom fix ────────────────── */
.ask{display:flex; gap:8px; padding:9px 12px 11px}
.ask input{
  flex:1; min-width:0; font-family:inherit; font-size:16px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:22px; padding:0 15px; min-height:46px;
}
.ask input::placeholder{color:var(--ink-faint)}
.ask button{
  flex:0 0 auto; width:46px; min-height:46px; border-radius:50%; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); border:none; font-size:16px; font-family:inherit;
}

/* While the keyboard is up, her portrait and the chips give way so the input
   and the last replies stay above it. Driven by visualViewport in the JS. */
body.kb-open .sia,
body.kb-open .suggest,
body.kb-open .bar{display:none}
body.kb-open .stage::before{display:none}
body.kb-open .log{width:100%; padding-right:12px; padding-left:12px}

/* ── the ticket sheet ──────────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:40; background:rgba(5,6,9,.74);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:fade .18s ease both;
}
.scrim[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ticket{
  width:100%; max-width:340px; max-height:86dvh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--gold); border-radius:16px;
  padding:17px 17px 15px; display:flex; flex-direction:column; gap:9px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
.ticket .th{display:flex; justify-content:space-between; font-size:9.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold)}
.ticket .tt{font-family:var(--ff-disp); font-weight:600; font-variation-settings:'opsz' 144;
  font-size:23px; line-height:1.1; letter-spacing:-.015em}
.ticket .rule{height:3px; width:46px; border-radius:2px; background:var(--accent)}
.tgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:1px}
.tgrid > div{font-size:14px; font-weight:600; line-height:1.28}
.tgrid > div.wide{grid-column:1 / -1}
.tgrid b{display:block; font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px}
.ticket .perf{
  border-top:1px dashed var(--line-strong); padding-top:9px; margin-top:1px;
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em;
}
.ticket .close{
  margin-top:3px; min-height:48px; border-radius:12px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.ticket .switch{display:flex; gap:6px; flex-wrap:wrap}
.ticket .switch button{
  flex:1 1 44%; min-height:44px; border-radius:10px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; background:var(--surface-2); color:var(--ink-soft);
  border:1px solid var(--line-strong); padding:6px 8px; line-height:1.2;
}
.ticket .switch button[aria-pressed="true"]{border-color:var(--accent); color:var(--ink)}

/* ── toast ─────────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px); z-index:50; opacity:0; pointer-events:none;
  background:var(--surface-3); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:999px; padding:10px 16px; font-size:13.5px; font-weight:600;
  transition:opacity .2s ease, transform .2s ease; max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ── the floor ─────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}
@media (min-width:520px){ .log{width:58%} }

/* On a real desktop window the shell would otherwise stretch to 1400px with
   most of it empty. Cap it and centre it so it reads as the phone app it is.
   Scoped to pointer:fine so no tablet with an on-screen keyboard picks it up —
   the visualViewport pinning above must keep working there. */
@media (min-width:900px) and (min-height:860px) and (pointer:fine){
  .app{
    height:min(calc(100dvh - 64px), 880px);
    top:50%; transform:translateY(-50%);
    border:1px solid var(--line); border-radius:26px; overflow:hidden;
    box-shadow:0 34px 90px -34px rgba(0,0,0,.65);
  }
}

/* ── DESKTOP: room to breathe (2026-09-24) ─────────────────────────────────
   The card above was still 520px wide, and `.log` is 58% of it — so the
   conversation column measured 300px on a 1440px monitor against 349px on a
   390px phone. Desktop read WORSE than mobile.

   Everything here is additive `min-width`, so no phone can match it and the
   mobile layout is untouched. Scoped to the same pointer:fine card, because the
   visual-viewport pinning that makes the keyboard work must not be disturbed. */
@media (min-width:900px) and (min-height:860px) and (pointer:fine){
  .app{ max-width:860px }

  /* The column can afford to be generous now. 58% of 860 is ~500px, which is
     comfortable line length without running under her portrait. */
  .log{ width:56%; max-width:520px }

  /* She was sized to overflow a 520px shell on purpose. At 860 that would make
     her 1100px and crop her mid-shoulder, so cap her at what she was. */
  .sia{ width:auto; max-width:none; height:min(100%, 780px) }

  /* Bubbles were capped at 86% of a 300px column. Give them the room. */
  .b.from, .b.me{ max-width:76% }

  /* The chip rail and composer look marooned at full width. */
  .suggest, .askwrap{ max-width:660px; margin-inline:auto }

  /* Access cards were 256px on desktop against 380 on mobile — two up reads
     better than one narrow column. */
  .acc-c{ min-height:64px }
  .acc{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; align-items:start }
  .acc-h{ grid-column:1 / -1 }
}


/* ═══════════════════════════════════════════════════════════════════════
   UNLOCK — two factors, the first thing a guest sees
   ═══════════════════════════════════════════════════════════════════ */
.unlock{
  position:fixed; inset:0; z-index:10; background:var(--paper);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:0 20px calc(28px + env(safe-area-inset-bottom));
  padding-top:calc(18px + env(safe-area-inset-top));
}
.unlock[hidden]{display:none}
.ublock{width:100%; max-width:380px; display:flex; flex-direction:column; align-items:center; text-align:center}
.usia{width:auto; height:190px; margin-bottom:-6px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.34))}
.uh{font-family:var(--ff-disp); font-weight:600; font-variation-settings:'opsz' 144;
  font-size:26px; line-height:1.12; letter-spacing:-.02em; margin:0 0 6px}
.up{font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 18px; max-width:32ch}
.unlock form{width:100%; display:flex; flex-direction:column; text-align:left}
.unlock label{font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 5px 2px}
.unlock input{
  font-family:var(--ff-ui); font-size:16px; font-weight:600;   /* 16px = no iOS zoom */
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:12px; padding:0 14px; min-height:52px; margin-bottom:14px; width:100%;
}
.unlock input#uRef{font-family:var(--ff-mono); letter-spacing:.06em; text-transform:uppercase}
.unlock input::placeholder{color:var(--ink-faint); font-weight:400; text-transform:none; letter-spacing:0}
.unlock button{
  min-height:54px; border:none; border-radius:14px; cursor:pointer; font-family:inherit;
  font-size:15.5px; font-weight:700; background:var(--accent); color:var(--accent-ink); margin-top:2px;
}
.unlock button:disabled{opacity:.6; cursor:default}
.uerr{
  font-size:13.5px; color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent);
  border-radius:10px; padding:10px 12px; margin:0 0 12px; line-height:1.4;
}
.uerr[hidden]{display:none}
.uhint{font-size:12.5px; color:var(--ink-faint); line-height:1.5; margin:16px 2px 0; text-align:center}
.uhint a{color:var(--ink-soft)}
.uhint.refs{margin-top:20px; padding-top:14px; border-top:1px solid var(--line); line-height:2.1}
.reflink{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.03em; cursor:pointer;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line-strong);
  border-radius:999px; padding:6px 11px; min-height:32px}
.reflink:hover{color:var(--ink); border-color:var(--ink-faint)}
@media (max-height:680px){ .usia{height:140px} .uh{font-size:22px} .up{margin-bottom:12px} }

/* ═══════════════════════════════════════════════════════════════════════
   SHE IS THINKING — a real round trip now, so this is honest
   ═══════════════════════════════════════════════════════════════════ */
.b.thinking{display:flex; gap:5px; align-items:center; padding:13px 15px; width:auto; align-self:flex-start}
.b.thinking i{
  width:7px; height:7px; border-radius:50%; background:var(--ink-faint); display:block;
  animation:blink 1.25s ease-in-out infinite;
}
.b.thinking i:nth-child(2){animation-delay:.18s}
.b.thinking i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.28; transform:translateY(0)}40%{opacity:1; transform:translateY(-2px)}}

/* offline: the green dot goes amber and the input says why */
.live.off{background:var(--warn); animation:none}
.ask input:disabled{opacity:.7}

/* the ticket now carries the research */
.tgrid .look{
  display:block; font-size:12.5px; font-weight:400; color:var(--ink-soft);
  line-height:1.42; margin-top:5px;
}
.tdir{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  border-radius:12px; background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--ink); font-size:14.5px; font-weight:700; text-decoration:none; margin-top:2px;
}


/* ── REACTIVE: the history pill and the suggest rail ─────────────────────── */
.histpill{
  grid-row:5; justify-self:center; margin:0 0 6px; min-height:34px; padding:0 16px;
  border-radius:999px; border:1px solid var(--line-strong); cursor:pointer;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ink-soft); font-family:inherit; font-size:12.5px; font-weight:600;
}
.histpill[hidden]{display:none}
.histpill:hover{color:var(--ink)}

/* one 48px rail: chips when the box is empty, predictions while typing, gone when neither */
.suggest{
  grid-row:6; height:48px; display:flex; align-items:center; gap:8px;
  padding:0 12px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
          mask-image:linear-gradient(to right,#000 88%,transparent);
}
.suggest::-webkit-scrollbar{display:none}
.suggest:empty{display:none}
.suggest .chip{
  flex:0 0 auto; min-height:40px; padding:0 14px; border-radius:20px; white-space:nowrap;
  border:1.5px solid var(--accent); background:transparent; color:var(--ink);
  font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
}
.suggest .chip.pred{border-color:var(--line-strong); color:var(--ink-soft)}
.suggest .chip:active{background:var(--accent); color:var(--accent-ink)}

/* the composer keeps its row; the + opens the sheet rather than a tray that never opened */
.ask{grid-row:7; padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.app[data-kb="open"] .ask{padding-bottom:11px}   /* the keyboard covers the home indicator */
.ask .plus{
  flex:0 0 auto; width:46px; min-height:46px; border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid var(--line-strong); color:var(--ink-soft);
  font-family:inherit; font-size:22px; line-height:1;
}
.ask .plus[aria-expanded="true"]{background:var(--surface-3); color:var(--ink)}

.sheetscrim{position:fixed; inset:0; z-index:44; background:rgba(5,6,9,.55)}
.sheetscrim[hidden]{display:none}
.sheet{
  position:fixed; z-index:45; left:0; right:0; bottom:0; max-width:520px; margin-inline:auto;
  max-height:70dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border-top:1px solid var(--line-strong);
  border-radius:18px 18px 0 0; padding:10px 14px calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:7px;
}
.sheet[hidden]{display:none}
.sheet .grab{width:40px; height:4px; border-radius:2px; background:var(--line-strong); margin:2px auto 8px; flex:0 0 auto}
/* Group headings in the + sheet. It now leads with whatever she was just
   talking about, so each group has to say what it is. Slightly stronger than
   the sheet's own h3 so the groups read as sections, not repeats. */
/* Book another walk: the list, then the calendar, in the same sheet. */
.bk-lede{margin:2px 2px 10px; font-size:12.5px; line-height:1.45; color:var(--ink-soft)}
.q.bk{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left}
.bk-t{font-size:14.5px; font-weight:600; line-height:1.3}
.bk-c{font-size:11.5px; color:var(--ink-soft)}
.bk-back{display:inline-flex; align-items:center; min-height:38px; padding:0 2px; margin-bottom:2px;
  border:0; background:none; font:600 12.5px var(--ff-ui); color:var(--ink-soft); cursor:pointer}
.bk-back:hover{color:var(--ink)}
/* Bokun renders its own widget in here; give it room and let it scroll. */
.bk-cal{min-height:340px; margin-top:8px}
/* A Bokun calendar asks for about 1270px of height and sets that on its own
   iframe, so in a 70dvh sheet the guest scrolls a long way to reach the "book"
   button. While one is open the sheet takes nearly the screen: the list behind
   it is short and does not need the height, the calendar does. */
.sheet.cal{max-height:92dvh}
.bk-cal iframe{width:100%!important; border:0; border-radius:12px}
.sheet h4{margin:15px 2px 5px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); font-family:var(--ff-ui); font-weight:700}
.sheet h4:first-of-type{margin-top:9px}
.sheet h3{margin:4px 2px 2px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--ff-ui); font-weight:700}
.sheet button.q{
  min-height:48px; padding:10px 14px; border-radius:13px; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink);
  font-family:inherit; font-size:14.5px; font-weight:600;
}
.sheet button.q:hover{border-color:var(--ink-faint)}

/* With the keyboard up the art gives way to the conversation, which is the whole
   point of the fix: on the old detector this never fired. */
.app[data-kb="open"] .sia{opacity:.30}
.app[data-kb="open"] .stage::before{display:none}
.app[data-kb="open"] .histpill{display:none}
@media (prefers-reduced-motion:reduce){ .sia{animation:none} }