/* ═══════════════════════════════════════════════════════════════════════════
   ASK VERN — royal purple and gold.

   The reference is a private card room, not a chat app: velvet in the dark,
   gold leaf on the edges, a portrait in a gilt frame. Vern plays poker, runs
   businesses and holds court, so the room he lives in should feel like one
   where money changes hands and someone's father is telling you the truth.

   Read the palette top down — it is ordered the way the room is lit:

     void        the dark outside the lamplight — the page itself
     velvet      the surfaces that catch light: cards, panels, the frame
     royal       the purple that carries interaction — what you can touch
     gold        trim, rules, emphasis. Used like real gold leaf: sparingly,
                 on edges, never as a fill for large areas
     parchment   warm off-white for text, never pure #fff — white on purple
                 buzzes, and this room has no fluorescent light in it
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The dark */
  --void:       #120a1f;
  --void-2:     #180d28;
  --velvet:     #1d1133;
  --velvet-hi:  #2a1a47;
  --edge:       #3a2560;

  /* The purple — interaction lives here */
  --royal:      #6b3fa0;
  --royal-lit:  #8b5cc7;
  --royal-deep: #4a2874;

  /* The gold — trim only */
  --gold:       #d9ac3c;
  --gold-hi:    #f2d071;
  --gold-deep:  #a37d1f;

  /* Ink */
  --parchment:  #f2e9d8;
  --dim:        #a294b8;
  --faint:      #6f6285;

  /* Signals */
  --live:       #4ade80;
  --hot:        #e0603c;

  --r:          14px;
  --r-sm:       9px;
  --lift:       0 18px 44px rgba(0, 0, 0, .55);
  --ring:       0 0 0 2px rgba(139, 92, 199, .55);

  --display:    'Anton', 'Arial Black', sans-serif;
  --serif:      'Spectral', Georgia, serif;
  --ui:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  background: var(--void);
  /* Two lamps: a purple one high and behind, a gold one low on the felt.
     Fixed so neither can create a scrollbar. */
  background-image:
    radial-gradient(90ch 60ch at 50% -12%, rgba(107, 63, 160, .34), transparent 66%),
    radial-gradient(70ch 44ch at 50% 108%, rgba(217, 172, 60, .10), transparent 64%);
  background-attachment: fixed;
}

body {
  color: var(--parchment);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* Android/Chrome paints a translucent blue box over every tapped control by
   default. On a dark purple surface that flash reads as a rendering glitch,
   so it is replaced with each control's own :active state below. */
* { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.shell { max-width: 620px; margin: 0 auto; padding: 0 16px calc(132px + var(--kb, 0px)); }

/* ── The signet ─────────────────────────────────────────────────────────────
   A single enormous gold V behind the conversation, like a monogram pressed
   into the room. It is the one piece of decoration in the design, so it earns
   its place by being the thing you remember and by never competing with text:
   it sits at 3% opacity, fixed, and cannot be clicked through to. */
.signet {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.signet span {
  font-family: var(--display);
  font-size: min(105vw, 800px);
  line-height: .8;
  color: var(--gold);
  /* Measured against a real reply on a phone: at .031 the V's diagonals read
     as two pale bands crossing the paragraph, and the eye keeps trying to
     resolve them. A watermark that competes with the text it sits behind has
     stopped being a watermark. */
  opacity: .018;
  transform: translateY(4%);
  user-select: none;
}

.shell, .topbar, .dock { position: relative; z-index: 1; }

/* ── Compact mode ────────────────────────────────────────────────────────────
   Measured with a keyboard open on a 375x667 phone: the masthead and portrait
   together took 313px of the remaining 340px, so the answer you were reading
   was pushed entirely off-screen while you typed the follow-up.

   Once a conversation exists the branding has done its job, so it stands down:
   the wordmark shrinks, the tagline and idle line go, and the portrait halves.
   That returns about 150px — the difference between reading his answer while
   you reply and not. */
body.talking .mast { padding: 12px 0 2px; }
body.talking .wordmark { font-size: 1.5rem; letter-spacing: .09em; }
body.talking .tagline,
body.talking .rule,
body.talking .portrait-line { display: none; }
body.talking .portrait-row { margin: 12px 0 0; gap: 12px; }
body.talking .frame { width: 52px; height: 78px; }
body.talking .portrait-name { font-size: 1rem; }
body.talking .mast, body.talking .portrait-row,
body.talking .frame, body.talking .wordmark { transition: all .28s ease; }

/* Keyboard up on a small phone. Compact mode alone got the readable band from
   27px to 51px, which is still not enough to see a sentence of what you are
   replying to. Below 500px tall the branding goes entirely: while you are
   typing, the only things that earn screen space are Vern's answer, the tabs
   and the box you are typing into. Everything comes back when the keyboard
   closes. */
@media (max-height: 500px) {
  body.talking .mast,
  body.talking .portrait-row { display: none; }
  body.talking .tabs { margin: 8px 0 2px; }
  body.talking .thread { margin-top: 10px; }
  body.talking .shell { padding-bottom: 108px; }
}

/* ── Masthead ───────────────────────────────────────────────────────────────
   The wordmark is set tight and heavy with a gold rule under it — a fight
   card, not a logo lockup. */
.mast { text-align: center; padding: 26px 0 6px; }

.wordmark {
  font-family: var(--display);
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  letter-spacing: .055em;
  line-height: .95;
  background: linear-gradient(178deg, var(--gold-hi) 8%, var(--gold) 48%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The glow sits behind the letterforms, not on them — a text-shadow on
     transparent-filled text renders as a smear of the shadow colour. */
  filter: drop-shadow(0 3px 18px rgba(217, 172, 60, .3));
}

.tagline {
  margin-top: 7px;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--faint);
}

.rule {
  height: 1px;
  margin: 16px auto 0;
  max-width: 300px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 50%, var(--gold-deep) 78%, transparent);
  opacity: .65;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────
   Five rooms, one man. Scrolls sideways on a phone rather than wrapping to a
   second line, so the header height never jumps.

   Five labels cannot fit across 393px at a legible size, so the last one is
   always partly off-screen. Left alone that reads as a broken layout rather
   than a scrollable strip, so the wrap carries a gradient fade on the right
   edge: the tab passing *under* something is the cue that there is more. */
/* Pinned. A long conversation used to mean scrolling all the way back up to
   change room, on a phone and on a desktop alike. Full-bleed past the shell's
   16px padding so it reads as a bar rather than a row of pills floating over
   the text, and translucent so the conversation is visibly running underneath
   it rather than being clipped away. */
.tab-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 14px -16px 4px;
  padding: 8px 16px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 10, 31, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}
/* A hairline, but only once it has actually reached the top — otherwise it
   draws a line across the page when nothing is scrolled. */
.tab-wrap::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge) 22%, var(--edge) 78%, transparent);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.tab-wrap.stuck::before { opacity: 1; }

.tab-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 16px; bottom: 0;
  width: 42px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--void) 82%);
}
/* Keep the fade against the end of the tabs, not over the button. */
.tab-wrap:has(.to-top.show)::after { right: 62px; }
.tab-wrap.at-end::after { opacity: 0; transition: opacity .2s; }

.tabs {
  flex: 1 1 auto;
  min-width: 0;                     /* or the scroller refuses to shrink */
  display: flex;
  gap: 6px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

/* Collapses to nothing until you have scrolled far enough to want it, so it
   never steals width from the rooms when it would do nothing. */
.to-top {
  flex: 0 0 auto;
  width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 17, 51, .92);
  color: var(--dim);
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: width .18s ease, opacity .18s ease, visibility .18s, color .16s, border-color .16s;
}
.to-top.show { width: 38px; opacity: 1; visibility: visible; border: 1px solid var(--edge); }
.to-top:hover { color: var(--gold-hi); border-color: var(--royal); }
.to-top:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s, visibility .01s; }
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* 44px minimum, measured — at the old 9px padding these came out 41px
     tall, which is inside the range where thumbs start missing. */
  padding: 12px 17px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: rgba(29, 17, 51, .7);
  color: var(--dim);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .16s, border-color .16s, background .16s;
  white-space: nowrap;
}
.tab:hover { color: var(--parchment); border-color: var(--royal); }
.tab:active { transform: scale(.96); }
.tab[aria-selected="true"] {
  color: var(--void);
  background: linear-gradient(170deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
  font-weight: 700;
}

/* ── Vern ───────────────────────────────────────────────────────────────────
   A portrait in a gilt frame. The frame brightens and the portrait breathes
   while he talks — that is the only animation in the design that runs on its
   own, and it stops the moment he stops. */
.portrait-row { display: flex; align-items: center; gap: 16px; margin: 20px 0 4px; }

.frame {
  position: relative;
  flex: 0 0 auto;
  width: 96px; height: 144px;
  border-radius: 10px;
  padding: 3px;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-deep) 55%, var(--gold) 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: box-shadow .35s ease, transform .35s ease;
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 8px;
  display: block;
  background: var(--velvet);
}
.frame.speaking {
  box-shadow: 0 10px 40px rgba(217, 172, 60, .5), 0 0 0 1px var(--gold-hi);
  animation: breathe 1.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.014); }
}
.frame.stumble { animation: stumble .45s ease-in-out; }
@keyframes stumble {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px) rotate(-1.2deg); }
  75%      { transform: translateX(7px) rotate(1.2deg); }
}

.portrait-say { min-width: 0; }
.portrait-name {
  font-family: var(--display);
  font-size: 1.28rem;
  letter-spacing: .07em;
  color: var(--gold);
  line-height: 1;
}
.portrait-role {
  font-size: .74rem;
  color: var(--faint);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 4px;
}
.portrait-line {
  margin-top: 9px;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--dim);
  line-height: 1.4;
  transition: opacity .45s ease;
}

/* ── The conversation ───────────────────────────────────────────────────────
   Two deliberately different registers. What you say is small, plain and set
   in the UI face on a flat panel. What Vern says is set in a warm serif at
   reading size behind a gold rule — a pull-quote in a book rather than a chat
   bubble, because his answers are the thing you came for. */
.thread { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }

.turn-you {
  align-self: flex-end;
  max-width: 88%;
  background: var(--velvet-hi);
  border: 1px solid var(--edge);
  border-radius: var(--r) var(--r) 4px var(--r);
  padding: 11px 15px;
  font-size: .95rem;
  color: var(--parchment);
}

.turn-vern { position: relative; padding-left: 17px; }
.turn-vern::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
}
.turn-vern p {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--parchment);
}
.turn-vern p + p { margin-top: .7em; }

.turn-vern.thinking p::after {
  content: '';
  display: inline-block;
  width: .5em; height: 1.05em;
  margin-left: 2px;
  vertical-align: -.16em;
  background: var(--gold);
  animation: blink .85s steps(2) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.turn-note {
  margin-top: 9px;
  font-size: .74rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.turn-note b { color: var(--gold-deep); font-weight: 600; }

.replay {
  border: 1px solid var(--edge);
  border-radius: 999px;
  /* Was 3px/11px — about 24px tall, far too small to hit reliably while
     holding a phone one-handed. */
  padding: 11px 16px;
  min-height: 44px;
  font-size: .78rem;
  color: var(--dim);
  transition: color .15s, border-color .15s;
}
.replay:hover { color: var(--gold); border-color: var(--gold-deep); }
.replay:active { transform: scale(.95); }

/* ── Openers ────────────────────────────────────────────────────────────────
   Real questions people actually have, per room. Shown only on an empty
   thread — once you're talking they'd be clutter. */
.openers { margin-top: 26px; }
.openers-label {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 11px;
}
.opener {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(170deg, rgba(42, 26, 71, .8), rgba(29, 17, 51, .8));
  border: 1px solid var(--edge);
  border-left: 2px solid var(--royal-deep);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin-bottom: 8px;
  color: var(--parchment);
  font-size: .93rem;
  line-height: 1.4;
  transition: border-left-color .16s, transform .12s, background .16s;
}
.opener:hover {
  border-left-color: var(--gold);
  background: linear-gradient(170deg, rgba(58, 37, 96, .85), rgba(42, 26, 71, .85));
}
.opener:active { transform: translateX(2px); }

/* ── The dock ───────────────────────────────────────────────────────────────
   Ask box pinned to the bottom on every tab, so the way you talk to Vern
   never moves and is never more than a thumb away. */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(18, 10, 31, 0), rgba(18, 10, 31, .93) 26%, var(--void) 62%);
}
.dock-inner { max-width: 620px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }

.ask {
  flex: 1;
  min-height: 50px;
  max-height: 156px;
  resize: none;
  background: var(--velvet);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 14px 15px;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .16s;
}
.ask::placeholder { color: var(--faint); }
.ask:focus { border-color: var(--royal-lit); }

.icon-btn {
  flex: 0 0 auto;
  width: 50px; height: 50px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  border: 1px solid var(--edge);
  background: var(--velvet);
  color: var(--dim);
  transition: transform .1s, border-color .16s, color .16s, background .16s;
}
.icon-btn:hover { color: var(--parchment); border-color: var(--royal); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.gold {
  background: linear-gradient(170deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
  color: var(--void);
  font-weight: 700;
}
.icon-btn.live {
  background: var(--hot);
  border-color: var(--hot);
  color: #fff;
  animation: pulse 1.15s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.dock-status {
  max-width: 620px;
  margin: 6px auto 0;
  font-size: .74rem;
  color: var(--faint);
  /* Tall enough to tap: when sound is blocked this line becomes the button
     that turns it on, and a 15px strip is not something a thumb can hit. */
  min-height: 26px;
  padding: 5px 0;
  text-align: center;
}
.dock-status.hot { color: var(--hot); }

/* ── Panels (You / Business profile) ────────────────────────────────────────*/
.panel {
  background: linear-gradient(170deg, var(--velvet-hi), var(--velvet));
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 18px;
  margin-top: 16px;
}
.panel-title {
  font-family: var(--display);
  font-size: 1.02rem;
  letter-spacing: .07em;
  color: var(--gold);
  margin-bottom: 4px;
}
.panel-sub { font-size: .82rem; color: var(--dim); line-height: 1.5; }

.field { margin-top: 14px; }
.field label {
  display: block;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%;
  background: var(--void-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  /* 16px exactly, and not a fraction less. Safari zooms the viewport on
     focus for anything smaller, which on this page threw the layout sideways
     every time you tapped a profile field and never zoomed back out. */
  font-size: 16px;
  outline: none;
  transition: border-color .16s;
}
.field textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus { border-color: var(--royal-lit); }

.btn {
  border-radius: var(--r-sm);
  padding: 11px 20px;
  font-size: .9rem;
  font-weight: 600;
  transition: transform .1s, filter .16s;
}
.btn:active { transform: scale(.97); }
.btn-gold { background: linear-gradient(170deg, var(--gold-hi), var(--gold)); color: var(--void); font-weight: 700; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-ghost { border: 1px solid var(--edge); color: var(--dim); }
.btn-ghost:hover { color: var(--parchment); border-color: var(--royal); }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

/* What Vern remembers */
.notes { list-style: none; margin-top: 12px; }
.notes li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(58, 37, 96, .5);
  font-size: .9rem;
  color: var(--parchment);
  line-height: 1.45;
}
.notes li:last-child { border-bottom: none; }
.notes li::before { content: '◆'; color: var(--gold-deep); font-size: .6rem; margin-top: .45em; flex: 0 0 auto; }
.note-drop {
  margin-left: auto;
  color: var(--faint);
  font-size: 1.15rem;
  line-height: 1;
  /* A bare × glyph is a ~12px target. Padded out to a real one — and this
     one deletes something, so it is the last control that should be fiddly. */
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  margin-top: -8px;
  flex: 0 0 auto;
}
.note-drop:hover { color: var(--hot); }

.empty { color: var(--faint); font-size: .88rem; font-style: italic; padding: 8px 0; }

/* ── The interview ──────────────────────────────────────────────────────────
   A full-screen takeover rather than a form on the page: this is Vern asking,
   one question at a time, and a scrollable list of twelve inputs would feel
   like an onboarding wizard instead of a conversation. */
.veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 5, 18, .93);
  backdrop-filter: blur(7px);
  display: grid;
  place-items: center;
  padding: 20px;
  /* With a keyboard open the viewport can be shorter than the card. Centring
     alone would clip the top — including the question itself — with no way to
     scroll to it. */
  overflow-y: auto;
}
@media (max-height: 560px) {
  .veil { align-items: start; }
  .interview { padding: 18px; }
  .iv-q { font-size: 1.12rem; }
  .iv-input { min-height: 56px; }
}
.interview {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(170deg, var(--velvet-hi), var(--velvet));
  border: 1px solid var(--edge);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--lift);
}
.iv-step {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}
.iv-q {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--parchment);
  margin: 12px 0 5px;
}
.iv-why { font-size: .84rem; color: var(--dim); line-height: 1.45; }
.iv-input {
  width: 100%;
  margin-top: 16px;
  background: var(--void-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 13px;
  font-size: 1rem;
  min-height: 84px;
  resize: vertical;
  outline: none;
  line-height: 1.45;
}
.iv-input:focus { border-color: var(--royal-lit); }
.iv-row { display: flex; gap: 9px; align-items: center; margin-top: 16px; }
.iv-row .btn-gold { flex: 1; }

.dots { display: flex; gap: 5px; justify-content: center; margin-top: 18px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--edge); transition: background .25s; }
.dots i.on { background: var(--gold); }

/* ── Small print ────────────────────────────────────────────────────────────*/
.foot { margin-top: 34px; text-align: center; font-size: .72rem; color: var(--faint); line-height: 1.7; }
.foot a {
  color: var(--gold-deep);
  text-decoration: none;
  /* Inline links in a footer are ~14px tall. Padded to a tappable band. */
  display: inline-block;
  padding: 14px 9px;
}
.foot a:hover { color: var(--gold); }

.toast {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--velvet-hi);
  border: 1px solid var(--gold-deep);
  color: var(--parchment);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: .85rem;
  box-shadow: var(--lift);
}

@media (max-width: 400px) {
  .frame { width: 78px; height: 117px; }
  .turn-vern p { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ── The gate ────────────────────────────────────────────────────────────────
   Reuses the interview card so signing in looks like the same room rather than
   a login page bolted on the front. The wordmark carries it: you should be able
   to tell whose door this is before you've typed anything. */
.gate { z-index: 90; }
.gate-card { max-width: 380px; }
.gate-mark { font-size: 2.1rem; text-align: center; display: block; }
.gate-sub { text-align: center; margin-top: 8px; }
.gate .field label { margin-top: 2px; }
.gate .iv-row { margin-top: 20px; }
.gate .iv-row .btn-gold { flex: 1; min-height: 48px; }

.gate-err {
  margin-top: 14px;
  color: var(--hot);
  font-size: .86rem;
  line-height: 1.4;
  border-left: 2px solid var(--hot);
  padding-left: 10px;
}

.gate-swap { text-align: center; margin-top: 14px; }
.linkish {
  color: var(--dim);
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 11px 8px;      /* 44px tappable, same floor as everything else */
  min-height: 44px;
}
.linkish:hover { color: var(--gold); }

.gate-busy { opacity: .6; pointer-events: none; }

.who {
  font-size: .72rem;
  color: var(--faint);
  letter-spacing: .04em;
}
.who b { color: var(--gold-deep); font-weight: 600; }


/* ── Check-in ────────────────────────────────────────────────────────────────
   Deliberately not styled like the chat. One question at a time, centred, with
   nothing else on screen — the point is that it feels like being asked rather
   than like using an app. */
.ci-wrap { margin-top: 26px; }

.ci-q {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--parchment);
  padding-left: 17px;
  position: relative;
}
.ci-q::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
}
.ci-ack {
  font-family: var(--serif);
  font-style: italic;
  color: var(--dim);
  font-size: 1rem;
  margin-bottom: 12px;
  padding-left: 17px;
}
.ci-count {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
.ci-input {
  width: 100%;
  margin-top: 18px;
  background: var(--void-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 14px;
  font-size: 16px;
  min-height: 108px;
  resize: vertical;
  line-height: 1.5;
  outline: none;
}
.ci-input:focus { border-color: var(--royal-lit); }
.ci-row { display: flex; gap: 9px; margin-top: 14px; }
.ci-row .btn-gold { flex: 1; min-height: 48px; }

/* The read — what he actually thinks. Set apart from everything else because
   it is the thing the questions were for. */
.ci-read {
  background: linear-gradient(170deg, var(--velvet-hi), var(--velvet));
  border: 1px solid var(--edge);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 20px;
  margin-top: 8px;
}
.ci-read h3 {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .09em;
  color: var(--gold);
  margin-bottom: 12px;
}
.ci-read p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
}
.ci-read p + p { margin-top: .65em; }

.ci-topics { margin-top: 20px; }
.ci-topics .openers-label { margin-bottom: 10px; }

.ci-past { margin-top: 22px; }
.ci-past summary {
  font-size: .78rem;
  color: var(--faint);
  cursor: pointer;
  padding: 12px 0;
  letter-spacing: .04em;
}
.ci-past summary::marker { color: var(--gold-deep); }
.ci-past-item {
  border-left: 2px solid var(--edge);
  padding: 4px 0 4px 13px;
  margin-bottom: 14px;
}
.ci-past-when { font-size: .7rem; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.ci-past-item p { font-family: var(--serif); font-size: .96rem; color: var(--dim); margin-top: 5px; line-height: 1.5; }

.icon-btn.off { color: var(--faint); border-style: dashed; }

/* ── The mute, which must never be mistaken for the microphone ──────────────
   These two sat side by side as identical circles drawn with the same glyph,
   and "you are muted" was expressed as a dim colour and a dashed border. You
   could talk into a dead mic for a while before noticing. So: a pill rather
   than a circle, a word rather than only a picture, and a muted state that is
   the loudest thing in the dock rather than the faintest. */
.mute-btn {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 14px 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;                 /* not var(--r) — the shape IS the signal */
  border: 1px solid var(--edge);
  background: var(--velvet);
  color: var(--dim);
  font: 600 .84rem/1 var(--sans, inherit);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .1s;
}
.mute-btn:hover { color: var(--parchment); border-color: var(--royal); }
.mute-btn:active { transform: scale(.94); }

/* Muted: solid, hot, and stated in words. */
.mute-btn.off {
  background: var(--hot);
  border-color: var(--hot);
  color: #fff;
}
/* A slow breath, distinct from the mic's quicker pulse — this one means
   "stopped", not "live", so it must not read as the same animation. */
.mute-btn.off { animation: muted-breath 2.4s ease-in-out infinite; }
@keyframes muted-breath { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }

@media (prefers-reduced-motion: reduce) {
  .mute-btn.off { animation: none; }
  .icon-btn.live { animation: none; }
}

/* On a narrow phone the dock is tight; keep the word, drop the padding. */
@media (max-width: 380px) {
  .mute-btn { padding: 0 10px 0 8px; gap: 5px; font-size: .78rem; }
}


/* ── Telling Vern something yourself ─────────────────────────────────────────
   Sits above the list rather than below it: you come to this panel to add
   something far more often than to read what's already there. */
.add-note { display: flex; gap: 8px; margin: 16px 0 4px; }
.add-note input {
  flex: 1;
  min-width: 0;
  background: var(--void-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  font-size: 16px;          /* 16 exactly, or iOS zooms the page on focus */
  outline: none;
  transition: border-color .16s;
}
.add-note input:focus { border-color: var(--royal-lit); }
.add-note .btn { flex: 0 0 auto; min-height: 46px; padding: 11px 18px; }

.note-src {
  display: block;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 3px;
}


/* ── "Vern noted …" ──────────────────────────────────────────────────────────
   Quotes the sentence he stored rather than just announcing that he stored
   something. Seeing the words is what lets you catch a wrong one — and it is
   the only moment you would think to. */
.toast.noted {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  border-radius: var(--r);
  padding: 12px 16px;
  max-width: min(420px, calc(100vw - 32px));
  bottom: calc(104px + var(--kb, 0px));
  cursor: pointer;
}
.toast.noted b {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.toast.noted span {
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.4;
  color: var(--parchment);
}


/* ── Waiting on you ──────────────────────────────────────────────────────────
   Proposals are visually unfinished on purpose — dashed, set apart from the
   settled list — so it reads as something asked rather than something done. */
.pending { margin: 16px 0 6px; border: 1px dashed var(--gold-deep); border-radius: var(--r-sm); padding: 12px; }
.pending-head {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.pending-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; flex-wrap: wrap; }
.pending-row span { flex: 1 1 100%; font-family: var(--serif); font-size: .98rem; line-height: 1.4; }
.pill {
  border: 1px solid var(--edge); border-radius: 999px;
  padding: 9px 16px; min-height: 40px; font-size: .78rem; color: var(--dim);
}
.pill.yes { background: linear-gradient(170deg, var(--gold-hi), var(--gold)); color: var(--void); font-weight: 700; border-color: var(--gold-hi); }
.pill.no:hover { color: var(--hot); border-color: var(--hot); }

.note-src.sure { color: var(--gold); }

.toast.noted .noted-row { display: flex; gap: 8px; margin-top: 10px; }
.noted-yes, .noted-no {
  border-radius: 999px; padding: 9px 16px; min-height: 40px; font-size: .8rem; font-weight: 600;
}
.noted-yes { background: linear-gradient(170deg, var(--gold-hi), var(--gold)); color: var(--void); }
.noted-no { border: 1px solid var(--edge); color: var(--dim); }

#replaces {
  width: 100%; background: var(--void-2); border: 1px solid var(--edge);
  border-radius: var(--r-sm); padding: 12px 13px; font-size: 16px; outline: none;
}
.ci-past-item s { color: var(--faint); }