/* Ask Wilson — /ask. Same scheme as the sign-in page: the burgundy wall becomes the identity rail on
   the left, the answer sits on paper, and Wilson keeps his gold ring. One committed light look. */
:root{
  color-scheme:light;
  --wall:#872e30; --wall-deep:#74272a; --burgundy:#872e30; --burgundy-lit:#a33a3d; --burgundy-ghost:rgba(163,58,61,.14);
  --gold:#c9a052; --gold-light:#f0d998;
  --gold-ring:linear-gradient(135deg, #e7cc85 0%, #b8893b 45%, #f0d998 70%, #a7772c 100%);
  --ivory:#f4ece4; --ivory-2:rgba(244,236,228,.72); --ivory-3:rgba(244,236,228,.5); --ivory-line:rgba(244,236,228,.2);
  --paper:#faf7f6; --card:#ffffff; --ink:#231a18; --ink-2:#3d322f; --ink-soft:#6f605c; --placeholder:#a5948f; --rule:#e4dad7;
  --good:#3f9a62;
  --ease:cubic-bezier(.4,.14,.2,1);
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* The [hidden] attribute only sets display:none in the UA stylesheet, so ANY author display rule
   beats it — and half the controls on this page (.hearing, .controls, .takes) carry both. Without
   this the composer shows "Listening…" on an idle page and every control is visible before there
   is an answer to act on. */
[hidden]{display:none !important}
html,body{margin:0; height:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--burgundy-lit); outline-offset:3px}

.shell{height:100vh; display:grid; grid-template-columns:288px minmax(0,1fr)}

/* ── left rail: the burgundy wall ──────────────────────────────────────── */
.rail{background:var(--wall); color:var(--ivory); display:flex; flex-direction:column; padding:0 18px 20px; min-height:0}
.rail-id{display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 0 24px; flex:none}
.rail-logo{align-self:flex-start; width:180px; height:auto; margin-bottom:6px}

/* The halo rings are the ONLY animated affordance on this page — with no video avatar they are
   what tells a learner the thing is alive. They key off .state-* on .shell so the ring, the dot
   and the word can never disagree with each other. */
.portrait{position:relative; width:140px; height:140px; display:grid; place-items:center}
.halo,.halo-outer{position:absolute; border-radius:999px; opacity:0; transition:opacity .3s var(--ease)}
.halo{inset:8px; border:1.5px solid var(--gold)}
.halo-outer{inset:1px; border:1px solid rgba(201,160,82,.45)}
.shell.state-listening .halo,
.shell.state-speaking  .halo{opacity:1; animation:lac-pulse 1.6s ease-in-out infinite}
.shell.state-listening .halo-outer,
.shell.state-speaking  .halo-outer{opacity:1; animation:lac-pulse 1.6s ease-in-out .25s infinite}
.shell.state-thinking .halo{opacity:.6; animation:lac-pulse 2.4s ease-in-out infinite}
/* Reading = revealing an answer with no voice, either because it is muted or because the voice is
   unfilled. Distinct from thinking (waiting on the brain) so the pill never claims to be working
   when it is already answering. */
.shell.state-reading .halo{opacity:.7; animation:lac-pulse 2.6s ease-in-out infinite}
@keyframes lac-pulse{0%,100%{transform:scale(1); opacity:.9} 50%{transform:scale(1.05); opacity:.35}}

/* Gold ring, a light-to-dark gradient so it reads as metal — the same ring as the sign-in page. */
.ring{position:relative; width:112px; height:112px; padding:5px; border-radius:50%; background:var(--gold-ring);
  box-shadow:0 14px 30px -14px rgba(20,8,8,.6)}
.ring img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; background:#eee9e2}

.statepill{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:999px; background:rgba(35,26,24,.78); border:1px solid rgba(255,255,255,.12)}
.statepill .d{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none; transition:background .2s}
.statepill .w{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory); white-space:nowrap}
.shell.state-listening .statepill .d,
.shell.state-speaking  .statepill .d{background:var(--gold)}
.shell.state-thinking  .statepill .d{background:var(--placeholder)}
.shell.state-reading   .statepill .d,
.shell.state-paused    .statepill .d{background:var(--ivory-3)}

.rail-name{display:flex; flex-direction:column; align-items:center; gap:6px}
.rail-name .n{font-size:26px; line-height:1.1; font-weight:500; letter-spacing:-.015em}
.rail-name .n b{font-weight:600; color:var(--gold-light)}
.rail-name .r{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ivory-2); text-align:center}

/* The mute control sits ABOVE the rule, so toggling it never moves the session list. Pressed is a
   darker fill rather than a brighter one: muted is the quieter mode, and it should look it. */
.rail-voice{display:flex; justify-content:center; padding:0 0 14px; flex:none}
.rail .ctl,.mini{color:var(--ivory); background:transparent; border-color:rgba(244,236,228,.45)}
.rail .ctl:hover,.mini:hover{background:rgba(255,255,255,.1); border-color:var(--ivory); color:var(--ivory)}
.rail .ctl[aria-pressed="true"]{background:var(--wall-deep); border-color:var(--ivory-line); color:var(--ivory-2)}

.rule{height:1px; background:var(--ivory-line); flex:none}

.rail-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:22px 0 10px}
.rail-head p{margin:0; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--ivory-2)}
.mini{font:inherit; font-size:11.5px; border:1px solid; border-radius:999px; padding:4px 10px; cursor:pointer; transition:.16s var(--ease)}

.rail-empty{margin:0; font-size:12.5px; color:var(--ivory-2); line-height:1.5}
.sessions{display:flex; flex-direction:column; gap:2px; min-height:0; overflow-y:auto}
.sessions button{text-align:left; font:inherit; font-size:13px; cursor:pointer; padding:9px 11px; border-radius:10px; border:0;
  border-left:2px solid transparent; background:transparent; color:var(--ivory-2); transition:.16s var(--ease)}
.sessions button:hover{background:rgba(255,255,255,.08); color:var(--ivory)}
.sessions button[aria-current="true"]{border-left-color:var(--gold-light); background:var(--wall-deep); color:var(--ivory)}

/* Sign out sits at the foot of the rail, away from the controls used while asking. */
.rail-foot{margin:auto 0 0; padding-top:18px; display:flex; justify-content:center}
.rail-foot .mini{font-size:12.5px; padding:6px 14px}

/* ── right column: paper ───────────────────────────────────────────────── */
.main{display:flex; flex-direction:column; min-height:0; min-width:0}
.answers{flex:1; min-height:0; overflow-y:auto; padding:48px clamp(18px,4vw,56px) 24px}
.col{max-width:680px; display:flex; flex-direction:column}

.intro{gap:16px; animation:lac-pop .32s var(--ease)}
@keyframes lac-pop{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.intro h1{margin:0; font-weight:500; font-size:44px; line-height:1.05; letter-spacing:-.025em; text-wrap:balance}
.intro h1 em{font-style:normal; color:var(--burgundy)}
.intro p{margin:0; color:var(--ink-soft); font-size:16px; max-width:56ch; font-weight:300}
.intro p b{color:var(--ink); font-weight:500}
.eyebrow{margin:18px 0 0; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{font:inherit; font-size:13.5px; color:var(--ink-2); background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:10px 16px; cursor:pointer; text-align:left; transition:.16s var(--ease)}
.pill:hover{border-color:var(--burgundy); color:var(--burgundy)}

.turn{gap:20px; display:none}
.turn.on{display:flex}
.turn h2{margin:0; font-weight:500; font-size:30px; line-height:1.22; letter-spacing:-.015em; color:var(--burgundy); text-wrap:balance}
.thinking{margin:0; font-size:15px; color:var(--ink-soft); font-style:italic}
.thinking i{display:inline-block; width:5px; height:5px; margin-left:3px; border-radius:50%; background:var(--ink-soft); animation:lac-dot 1.1s infinite}
.thinking i:nth-child(2){animation-delay:.16s} .thinking i:nth-child(3){animation-delay:.32s}
@keyframes lac-dot{0%,60%,100%{opacity:.25} 30%{opacity:1}}
.body p{margin:0 0 14px; font-size:17.5px; line-height:1.66; color:var(--ink-2); text-wrap:pretty}
.body p:last-child{margin-bottom:0}
.caret{display:inline-block; width:2px; height:20px; background:var(--burgundy); animation:lac-caret 1s steps(2) infinite;
  vertical-align:-3px; margin:-14px 0 0 2px}
.caret[hidden]{display:none}
@keyframes lac-caret{0%,100%{opacity:1} 50%{opacity:0}}

.controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ctl{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:999px; padding:7px 14px; cursor:pointer; transition:.16s var(--ease)}
.ctl:hover{border-color:var(--burgundy); color:var(--burgundy)}
.ctl:disabled{opacity:.45; cursor:default; border-color:var(--rule); color:var(--ink-soft)}
.ctl svg{width:13px; height:13px; flex:none}
.ctl.solid{background:var(--burgundy); border-color:var(--burgundy); color:#fff}
.ctl.solid:hover{background:var(--burgundy-lit); color:#fff}
.takes{display:flex; align-items:center; gap:4px; border:1px solid var(--rule); background:var(--card); border-radius:999px; padding:3px 5px}
.takes button{font:inherit; font-size:14px; line-height:1; color:var(--burgundy); background:transparent; border:0; border-radius:999px;
  width:24px; height:24px; cursor:pointer}
.takes button:hover:not(:disabled){background:var(--burgundy-ghost)}
.takes button:disabled{opacity:.28; cursor:default}
.takes .lbl{font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap}

/* ── composer ──────────────────────────────────────────────────────────── */
.composer{border-top:1px solid var(--rule); background:var(--paper); padding:16px clamp(18px,4vw,56px) 22px}
.composer .col{gap:9px}
.field{display:flex; align-items:center; gap:10px; border:1.5px solid var(--rule); border-radius:14px; background:var(--card);
  padding:10px 10px 10px 16px; box-shadow:0 1px 2px rgba(35,26,24,.05); transition:border-color .16s var(--ease), box-shadow .16s var(--ease)}
.field:focus-within{border-color:var(--burgundy); box-shadow:0 0 0 3px var(--burgundy-ghost)}
.shell.state-listening .field{border-color:var(--burgundy); box-shadow:0 0 0 3px var(--burgundy-ghost)}
.field input{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; outline:none; padding:4px 0}
.field input::placeholder{color:var(--placeholder)}
.hearing{flex:1; min-width:0; display:inline-flex; align-items:center; gap:9px; color:var(--burgundy); font-size:15px}
.hearing .d{flex:none; width:8px; height:8px; border-radius:50%; background:var(--burgundy); animation:lac-pulse 1.2s infinite}
#hearingLabel{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.iconbtn{flex:none; width:40px; height:40px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--rule);
  background:var(--card); color:var(--burgundy); cursor:pointer; padding:0; transition:.16s var(--ease)}
.iconbtn:hover{border-color:var(--burgundy)}
.iconbtn svg{width:18px; height:18px}
.iconbtn.send{border-color:var(--burgundy); background:var(--burgundy); color:#fff}
.iconbtn.send:hover{background:var(--burgundy-lit); border-color:var(--burgundy-lit)}
.iconbtn:disabled{opacity:.4; cursor:default}
.shell.state-listening .iconbtn.mic{border-color:var(--burgundy); background:var(--burgundy); color:#fff}
/* Countdown ring round the mic: fills over the quiet wait before a spoken question is sent. */
.micwrap{position:relative; flex:none; width:40px; height:40px}
.micwrap .iconbtn{position:absolute; inset:0}
.countdown{position:absolute; inset:-5px; width:50px; height:50px; transform:rotate(-90deg); pointer-events:none; opacity:0; transition:opacity .15s}
.countdown circle{fill:none; stroke-width:3}
.countdown .track{stroke:var(--burgundy-ghost)}
.countdown .bar{stroke:var(--burgundy); stroke-linecap:round; stroke-dasharray:138.2; stroke-dashoffset:138.2}
.micwrap.counting .countdown{opacity:1}
.hint{font-size:12px; color:var(--ink-soft); min-height:14px}
.hint.warn{color:var(--burgundy)}

@media (max-width:900px){
  .shell{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  .rail{flex-direction:row; align-items:center; gap:14px; padding:12px 16px}
  .rail-id{flex-direction:row; padding:0; gap:12px} .rail-logo{display:none}
  .portrait{width:60px; height:60px} .ring{width:56px; height:56px; padding:3px}
  .halo,.halo-outer,.statepill{display:none}
  .rail-name{align-items:flex-start} .rail-name .n{font-size:20px} .rail-name .r{text-align:left; font-size:10px}
  .rail-voice{margin-left:auto; padding:0}
  .rail-foot{margin:0; padding:0}
  .rule,.rail-head,.rail-empty,.sessions{display:none}
  .answers{padding-top:28px} .intro h1{font-size:34px} .turn h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }