/* ============================================================================
   ui.css  —  Responsive layout, info sidebar, live-status strip, citations.
   ADDITIVE UX layer for the public Rabbi Akiva avatar. Owns layout + chrome
   ONLY; it must NOT change the talking-head / speak() / audio behaviour, which
   lives in index.html + assets/{viseme,duplex,face3d}.js (edited separately).

   Design language: warm gold (#c8a24a) on parchment (#f4ecd8) over a deep
   candle-lit radial. Mobile-first, fluid phone -> tablet -> desktop, no
   horizontal overflow, tap targets >= 44px, keyboard-safe input.
   ============================================================================ */

:root{
  --gold:#c8a24a; --gold-soft:#e3c878; --ink:#1a1408; --parch:#f4ecd8;
  --panel:#1c1609; --panel-edge:#4a3b18; --maxw:760px;
  --safe-top:env(safe-area-inset-top); --safe-bot:env(safe-area-inset-bottom);
}

/* ---- App scaffold: a column that never exceeds the viewport width. -------- */
body{ width:100%; max-width:100%; overflow-x:hidden; }
.app-shell{ width:100%; max-width:100vw; display:flex; flex-direction:column;
  align-items:center; }

/* ---- Top bar: brand + info button, fixed-height, safe-area aware. -------- */
.topbar{
  position:sticky; top:0; z-index:40; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:calc(8px + var(--safe-top)) 14px 8px;
  background:linear-gradient(#0e0b04ee,#0e0b0488 70%,#0e0b0400);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.topbar .brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.topbar .brand .dot{ width:9px; height:9px; border-radius:50%;
  background:#7ad17a; box-shadow:0 0 8px #7ad17a; flex:0 0 auto; }
.topbar .brand .dot.busy{ background:var(--gold); box-shadow:0 0 8px var(--gold);
  animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.topbar .brand b{ color:var(--gold); font-size:1rem; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn{
  flex:0 0 auto; min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; gap:7px; padding:0 14px;
  border-radius:24px; border:1.5px solid var(--gold); background:transparent;
  color:var(--gold); font-family:inherit; font-size:.9rem; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.iconbtn:active{ background:#ffffff14; }
.iconbtn svg{ width:20px; height:20px; }
.topnav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
/* Verbose labels by default; the short labels are swapped in on narrow phones. */
.iconbtn .short{ display:none; }

/* Visually-hidden but available to AT (skip-link target labels, input labels). */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Hero trust/reassurance line: the conversion hook, surfaced where visitors land. */
.app-shell header .trust{ margin-top:6px; font-size:.8rem; color:var(--gold-soft);
  opacity:.92; max-width:46ch; }

/* ---- Live status strip: always tells the visitor what's happening. ------- */
.statusbar{
  width:min(var(--maxw),94vw); margin:6px auto 0;
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:8px 14px; border-radius:30px; min-height:40px;
  background:#241b0c; border:1px solid var(--panel-edge);
  color:var(--parch); font-size:.9rem; text-align:center;
  transition:border-color .2s, box-shadow .2s;
}
.statusbar.active{ border-color:var(--gold);
  box-shadow:0 0 16px rgba(200,162,74,.25); }
.statusbar .spark{ width:8px; height:8px; border-radius:50%;
  background:var(--gold); flex:0 0 auto; opacity:.35; }
.statusbar.active .spark{ opacity:1; animation:pulse 1s ease-in-out infinite; }
.statusbar .txt{ min-width:0; }

/* ---- GLB loading overlay over the stage (graceful 3D head load). --------- */
.stage-loading{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #2a2110, #14100655);
  color:var(--gold-soft); font-size:.8rem; text-align:center; padding:14px;
  transition:opacity .5s; pointer-events:none;
}
.stage-loading.hidden{ opacity:0; }
.stage-loading .ring{ width:42px; height:42px; border-radius:50%;
  border:3px solid #ffffff22; border-top-color:var(--gold);
  animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Citations under each answer. ---------------------------------------- */
.cites{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.cites .label{ width:100%; font-size:.72rem; letter-spacing:.6px;
  text-transform:uppercase; opacity:.85; color:var(--gold-soft); }
.cite{
  font-size:.74rem; line-height:1.2; padding:4px 10px; border-radius:14px;
  background:#2a210f; border:1px solid var(--panel-edge); color:var(--gold-soft);
  font-family:Georgia,serif;
}

/* ---- Powered-by line. ---------------------------------------------------- */
/* Contrast: small informational text reads >=4.5:1 on the dark radial — lift the
   foreground (was opacity .5, effectively below threshold for body-size text). */
.poweredby{ width:min(var(--maxw),94vw); margin:2px auto 0; text-align:center;
  font-size:.72rem; color:#bba874; opacity:1; }
.poweredby b{ color:var(--gold-soft); font-weight:normal; }

/* ============================================================================
   PIPELINE PROGRESS STEPPER
   A 5-stage stepper with an animated fill bar that advances as the real
   interaction events fire. Reads clearly on phone (labels shrink) and desktop.
   ============================================================================ */
.stepper{ width:min(var(--maxw),94vw); margin:10px auto 2px; }
.stepper__track{ position:relative; height:4px; border-radius:4px;
  background:#3a3320; overflow:hidden; }
.stepper__fill{ position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px rgba(200,162,74,.5); }
.stepper.busy .stepper__fill::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,#fff6 50%,transparent);
  animation:shimmer 1.3s linear infinite; }
@keyframes shimmer{ from{transform:translateX(-100%)} to{transform:translateX(220%)} }
.stepper__steps{ list-style:none; display:flex; justify-content:space-between;
  padding:0; margin:8px 0 0; }
.stepper__steps li{ display:flex; flex-direction:column; align-items:center;
  gap:3px; flex:1 1 0; min-width:0; text-align:center; }
.stepper__steps .bub{ width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  background:#241b0c; border:1.5px solid var(--panel-edge);
  /* Monochrome gold line-glyph icons: dim/desaturate idle, brighten when active. */
  color:var(--gold-soft); opacity:.55;
  transition:opacity .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.stepper__steps .bub svg{ width:15px; height:15px; display:block; }
.stepper__steps .lbl{ font-size:.62rem; letter-spacing:.2px; opacity:.55;
  color:var(--gold-soft); white-space:nowrap; transition:opacity .25s; }
.stepper__steps li.done .bub{ opacity:1; color:var(--gold); border-color:var(--gold); }
.stepper__steps li.active .bub{ opacity:1; color:var(--gold-soft); border-color:var(--gold);
  transform:scale(1.18); box-shadow:0 0 12px rgba(200,162,74,.6);
  animation:bubpulse 1.1s ease-in-out infinite; }
.stepper__steps li.active .lbl,.stepper__steps li.done .lbl{ opacity:1; }
@keyframes bubpulse{ 0%,100%{box-shadow:0 0 12px rgba(200,162,74,.6)}
  50%{box-shadow:0 0 4px rgba(200,162,74,.3)} }

/* ============================================================================
   SIDEBAR / INFO DRAWER
   Right-side panel on desktop, full-screen drawer on phones. Scrollable inside.
   ============================================================================ */
.scrim{
  position:fixed; inset:0; z-index:60; background:#0009;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.scrim.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; z-index:70; height:100%;
  width:min(440px,100vw); max-width:100vw;
  transform:translateX(102%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(160deg,#211a0c,#16110699);
  background-color:#1b1509;
  border-left:1px solid var(--panel-edge);
  display:flex; flex-direction:column;
  box-shadow:-18px 0 50px #0008;
}
.drawer.open{ transform:translateX(0); }
.drawer__head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:calc(14px + var(--safe-top)) 18px 12px;
  border-bottom:1px solid var(--panel-edge);
  background:#1b150980;
}
.drawer__head h2{ margin:0; font-size:1.15rem; color:var(--gold);
  font-family:Georgia,serif; }
.drawer__close{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--panel-edge); background:transparent; color:var(--gold);
  font-size:1.4rem; line-height:1; cursor:pointer; touch-action:manipulation;
}
.drawer__close:active{ background:#ffffff14; }
.drawer__body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 18px calc(28px + var(--safe-bot));
  color:var(--parch); line-height:1.6; font-size:.95rem;
}
.drawer__body h3{ color:var(--gold); font-size:1rem; margin:22px 0 8px;
  display:flex; align-items:center; gap:8px; }
.drawer__body h3:first-child{ margin-top:0; }
.drawer__body p{ margin:0 0 10px; opacity:.92; }
.drawer__body .lead{ font-size:1.02rem; opacity:1; }
.drawer__body ol.flow{ counter-reset:step; list-style:none; padding:0; margin:0 0 6px; }
.drawer__body ol.flow li{ position:relative; padding:6px 0 6px 38px; }
.drawer__body ol.flow li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:5px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  color:var(--ink); background:var(--gold); font-weight:bold; font-family:sans-serif;
}
.drawer__body .chips{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.drawer__body .chip{ font-size:.72rem; padding:5px 11px; border-radius:14px;
  background:#2a210f; border:1px solid var(--panel-edge); color:var(--gold-soft); }
.drawer__body ul.road{ list-style:none; padding:0; margin:0; }
.drawer__body ul.road li{ position:relative; padding:5px 0 5px 22px; opacity:.9; }
.drawer__body ul.road li::before{ content:"→"; position:absolute; left:0;
  color:var(--gold); }
.drawer__body .share-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.drawer__body .share-row button{ flex:1 1 auto; min-height:44px; }
.drawer__foot{ margin-top:18px; padding-top:14px; border-top:1px solid var(--panel-edge);
  font-size:.74rem; opacity:.55; }

/* ============================================================================
   RESPONSIVE TUNING
   ============================================================================ */
/* Tablet+ : a touch more breathing room. */
@media (min-width:768px){
  .topbar{ padding-left:22px; padding-right:22px; }
  .topbar .brand b{ font-size:1.1rem; }
}
/* Phones: full-screen drawer, compact chrome. */
@media (max-width:600px){
  .drawer{ width:100vw; border-left:none; }
  .statusbar{ width:94vw; font-size:.86rem; }
  .poweredby{ width:94vw; font-size:.68rem; }
  .stepper{ width:94vw; }
  .stepper__steps .lbl{ font-size:.55rem; }
  .stepper__steps .bub{ width:24px; height:24px; }
  .stepper__steps .bub svg{ width:13px; height:13px; }
  /* Top bar can wrap, and the verbose nav labels collapse to short ones, so the
     right-most control is never clipped at 320px (HIGH-severity overflow fix). */
  .topbar{ flex-wrap:wrap; row-gap:6px; }
  .topnav{ gap:8px; }
  .iconbtn{ padding:0 12px; }
  .iconbtn .full{ display:none; }
  .iconbtn .short{ display:inline; }
}
/* Landscape phones: keep drawer scroll usable. */
@media (max-height:480px) and (orientation:landscape){
  .drawer__head{ padding-top:10px; }
}
/* The original tiny .status line is now mirrored into the prominent strip; keep
   it in the DOM (the speak/ask JS still writes it, and status.js observes it) but
   collapse it visually so the status is shown once, clearly. */
.status{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Respect reduced-motion. Also gate the perpetual stepper shimmer + active-bubble
   pulse, which were previously unconditional continuous motion. */
@media (prefers-reduced-motion:reduce){
  .drawer,.scrim,.stage-loading,.statusbar{ transition:none; }
  .ring,.statusbar.active .spark,.topbar .brand .dot.busy{ animation:none; }
  .stepper.busy .stepper__fill::after{ animation:none; content:none; }
  .stepper__steps li.active .bub{ animation:none; }
}