/* ============================================================
   itstheron.com — the front door + the living world
   Built entirely on the Vext Labs brand system (vext.css tokens).
   Three stages: landing · onboarding chat · the workspace world.
   ============================================================ */

/* gem ambient motion (required by theron-entity.js) */
@media (prefers-reduced-motion:no-preference){
 .th-rock{animation:th-rock 5.4s cubic-bezier(.22,1,.36,1) infinite;transform-box:fill-box;transform-origin:center;}
 .th-glow{animation:th-glowpulse 4.6s cubic-bezier(.22,1,.36,1) infinite;transform-box:fill-box;transform-origin:center;}
 .th-fc{animation:th-tw 3.8s cubic-bezier(.22,1,.36,1) infinite;}
 .th-sheen{animation:th-sheen 5.2s cubic-bezier(.22,1,.36,1) infinite;transform-box:fill-box;}
 .th-eye{animation:th-blink 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
}
@keyframes th-rock{0%,100%{transform:translateY(0) rotate(-2.6deg)}50%{transform:translateY(-2.5px) rotate(2.6deg)}}
@keyframes th-glowpulse{0%,100%{opacity:.4;transform:scale(.88)}50%{opacity:.95;transform:scale(1.1)}}
@keyframes th-tw{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes th-sheen{0%{transform:translateX(-36px) skewX(-18deg);opacity:0}14%{opacity:.85}42%{opacity:0}100%{transform:translateX(150px) skewX(-18deg);opacity:0}}
@keyframes th-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}98%{transform:scaleY(1)}}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{height:100%;}
/* App-grade, not website: no tap flash, no rubber-band scroll-chaining, native
   momentum scroll. */
body{ overflow:hidden; -webkit-tap-highlight-color:transparent; overscroll-behavior:none; -webkit-overflow-scrolling:touch; }
/* Kill the 300ms tap delay + double-tap-zoom on every control. */
button,.cbtn,.iconbtn,.os-space,.os-rec,.os-mod,.bw,.tchip,input,.app-btn{ touch-action:manipulation; }

/* the soft room everything breathes inside */
.room{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(62vw 52vh at 50% 16%, var(--amber-glow), transparent 62%),
    radial-gradient(48vw 42vh at 88% 104%, rgba(111,160,189,.10), transparent 60%),
    var(--bg);
  transition:background .5s var(--ease);
}
html[data-theme="dark"] .room{
  background:
    radial-gradient(60vw 54vh at 50% 14%, rgba(255,180,42,.15), transparent 60%),
    radial-gradient(46vw 42vh at 88% 104%, rgba(111,160,189,.10), transparent 60%),
    var(--bg);
}

/* ─── whisper-quiet top chrome ─── */
.top{
  position:absolute; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  /* Pad for the notch / status bar when installed as a standalone app. */
  padding:max(20px,env(safe-area-inset-top,20px)) max(clamp(18px,2.6vw,30px),env(safe-area-inset-right,0px)) 20px max(clamp(18px,2.6vw,30px),env(safe-area-inset-left,0px)); pointer-events:none;
}
.top > *{ pointer-events:auto; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand .bg{ display:none; }

/* ── Brand palette dot (composer + canvas cursor) — NOT the entity gem ── */
@keyframes brand-dot-cycle{
  0%,100%{ background:var(--amber); }
  16.67%{ background:var(--sky-deep); }
  33.33%{ background:var(--terracotta); }
  50%{ background:var(--moss); }
  66.67%{ background:var(--ok); }
  83.33%{ background:var(--ink-1); }
}
.composer-dot, .cg-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin:0 2px 0 4px;
  background:var(--amber);
}
@media (prefers-reduced-motion:no-preference){
  .composer-dot, .cg-dot{ animation:brand-dot-cycle 8s var(--ease-inout,cubic-bezier(.22,1,.36,1)) infinite; }
}
.cg-dot{ display:inline-block; width:7px; height:7px; margin:0 6px 0 0; vertical-align:middle; }

/* ── Hero Theron entity — centered above the composer (landing + chat only) ── */
.hero-gem{
  position:fixed; left:50%; z-index:68; line-height:0; pointer-events:none;
  transform:translateX(-50%);
  filter:drop-shadow(0 12px 28px var(--amber-glow));
  display:none;
  transition:bottom .6s var(--ease), opacity .5s var(--ease);
}
body[data-stage="landing"] .hero-gem,
body[data-stage="chat"] .hero-gem{ display:inline-flex; }
body[data-stage="landing"] .hero-gem{ bottom:calc(32vh + 64px); }
body[data-stage="chat"]    .hero-gem{ bottom:calc(24px + env(safe-area-inset-bottom,0px) + 64px); }
.hero-gem svg{ width:clamp(120px,18vw,168px); height:auto; }
@media (max-width:560px){
  body[data-stage="landing"] .hero-gem{ bottom:calc(18px + env(safe-area-inset-bottom,0px) + 64px); }
}
@media (max-height:600px){
  .hero-gem svg{ width:clamp(96px,14vw,128px); }
  body[data-stage="landing"] .hero-gem{ bottom:calc(12px + env(safe-area-inset-bottom,0px) + 58px); }
}

/* ── Dock Theron entity — locked by the composer in the world only ── */
.entity-dock{
  display:none;
  position:fixed; z-index:69; line-height:0; pointer-events:none;
  filter:drop-shadow(0 8px 20px var(--amber-glow));
  transition:bottom .6s var(--ease), left .6s var(--ease), right .6s var(--ease);
}
body[data-stage="world"] .entity-dock{ display:block; }
body[data-stage="world"] .entity-dock{
  left:auto;
  right:max(16px, calc(50% - min(280px,41vw) + 8px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px) + 54px);
}
.entity-dock .wt-gem svg{ width:72px; height:auto; }
.entity-dock .th-glow{ display:none; }
.brand .wm{ font-family:var(--ff-display); font-weight:600; font-size:15.5px; letter-spacing:-.02em; color:var(--ink-1); white-space:nowrap; }
.brand .wm .by{ font-family:var(--ff-mono); font-weight:500; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-left:9px; }
/* altitude pill — persistent "where am I" (Phase 5) */
.altitude{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--r-full,999px);
  border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 60%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.altitude .alt-dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px var(--amber-glow,transparent); flex-shrink:0; }
.altitude .alt-l{ font-family:var(--ff-display); font-weight:600; font-size:12.5px; letter-spacing:-.01em; color:var(--ink-1); }
.altitude .alt-s{ font-family:var(--ff-serif); font-style:italic; font-size:11.5px; color:var(--ink-3); }
@media (max-width:680px){ .altitude .alt-s{ display:none; } .altitude{ padding:6px 11px; } }
/* hands-free voice session (Phase 7b) — a calm ambient state */
body[data-voice="on"] .composer{ box-shadow:0 0 0 1px var(--amber), 0 18px 50px -12px var(--amber-glow,rgba(255,174,0,.4)); border-color:var(--amber); }
body[data-voice="on"] .mic{ color:var(--amber); }
body[data-voice="on"] #listencap{ color:var(--amber); font-family:var(--ff-serif); font-style:italic; }
body[data-voice="on"] .room:after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120vw 60vh at 50% 118%, var(--amber-glow,rgba(255,174,0,.10)), transparent 70%); animation:voicepulse 3.4s var(--ease,ease) infinite; }
@keyframes voicepulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.top-actions{ display:flex; align-items:center; gap:10px; }
.iconbtn{ width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-2); cursor:pointer; background:color-mix(in srgb,var(--surface) 50%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:color .15s, border-color .15s, transform .15s; }
.iconbtn:hover{ color:var(--ink-1); border-color:var(--ink-1); transform:translateY(-1px); }
.iconbtn svg{ width:17px; height:17px; }
.theme-tog .sun{ display:none; } html[data-theme="dark"] .theme-tog .sun{ display:block; } html[data-theme="dark"] .theme-tog .moon{ display:none; }
/* "start over" only outside the front door */
.restart{ opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
body:not([data-stage="landing"]) .restart{ opacity:1; pointer-events:auto; }

/* ============================================================
   STAGE 1 — THE FRONT DOOR
   ============================================================ */
.landing{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 24px 22vh; text-align:center;   /* hero centers in the upper-middle; composer sits just below it */
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
}
body[data-stage="landing"] .landing{ opacity:1; transform:none; filter:none; }
body:not([data-stage="landing"]) .landing{ opacity:0; transform:translateY(-30px) scale(.96); filter:blur(6px); pointer-events:none; }

/* the hovering being — no hard halo ring, just her */
.gem-stage{ display:inline-flex; line-height:0; cursor:default; position:relative; }
.gem-stage .th-glow, .world-theron .th-glow, #brandgem .th-glow, #dropgem .th-glow{ display:none; }
@media (prefers-reduced-motion:no-preference){ .gem-stage{ animation:hover 6.5s var(--ease-inout) infinite; } }
@keyframes hover{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* the alive, TYPED phrase — she writes it out, caret blinking */
.phrase{ position:relative; height:84px; width:min(780px,92vw); margin:24px 0 2px; }
.typed-line{ position:absolute; inset:0; text-align:center; display:flex; align-items:flex-start; justify-content:center; }
.typed-line .typed-body{ white-space:pre-wrap; }
.typed-line.say .typed-body{ font-family:var(--ff-display); font-weight:500; letter-spacing:-.02em; font-size:clamp(25px,3.5vw,39px); line-height:1.16; color:var(--ink-1); }
.typed-line.say .acc{ font-family:var(--ff-serif); font-style:italic; font-weight:400; color:var(--accent-ink); letter-spacing:0; }
.typed-line.think .typed-body{ font-family:var(--ff-serif); font-style:italic; font-weight:400; font-size:clamp(21px,2.8vw,30px); line-height:1.25; color:var(--ink-2); }
.typed-line .lang{ font-family:var(--ff-mono); font-size:.4em; font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-left:.6ch; vertical-align:.45em; }
.caret{ display:inline-block; width:2px; height:1.05em; background:var(--accent); border-radius:1px; margin-left:3px; vertical-align:-0.14em; box-shadow:0 0 8px var(--amber-glow); }
.typed-line.think .caret{ vertical-align:-0.18em; }
@media (prefers-reduced-motion:no-preference){ .caret{ animation:caretblink 1.05s steps(1) infinite; } }
@keyframes caretblink{ 0%,52%{ opacity:1; } 52.01%,100%{ opacity:0; } }
@keyframes td{ 0%,100%{ opacity:.3; transform:translateY(0); } 45%{ opacity:1; transform:translateY(-3px); } }

.hint{ position:absolute; bottom:24vh; left:50%; transform:translateX(-50%); font-size:13px; color:var(--ink-3); font-family:var(--ff-ui); display:flex; align-items:center; gap:8px; opacity:.8; white-space:nowrap; }
.hint svg{ width:15px; height:15px; }
body:not([data-stage="landing"]) .hint{ opacity:0; }

/* ============================================================
   THE ONE COMPOSER (lives across all stages)
   ============================================================ */
.composer{
  position:fixed; left:50%; z-index:70; transform:translateX(-50%);
  width:min(680px,92vw);
  display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-full); padding:8px 8px 8px 7px;
  box-shadow:var(--shadow-3);
  transition:bottom .6s var(--ease), width .6s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease), background .4s var(--ease);
}
body[data-stage="landing"] .composer{ bottom:32vh; }
body[data-stage="chat"]    .composer{ bottom:calc(24px + env(safe-area-inset-bottom,0px)); width:min(680px,92vw); }
body[data-stage="world"]   .composer{ bottom:calc(20px + env(safe-area-inset-bottom,0px)); width:min(560px,82vw); }
@media (max-width:680px){ body[data-stage="world"] .composer{ width:92vw; } }
.composer.focused{ border-color:color-mix(in srgb,var(--amber) 55%,var(--line)); box-shadow:0 0 0 4px var(--amber-glow), var(--shadow-3); }
.composer.listening{ border-color:color-mix(in srgb,var(--amber) 70%,var(--line)); box-shadow:0 0 0 5px var(--amber-glow), var(--shadow-3); }
.composer.drag{ border-color:var(--amber); box-shadow:0 0 0 5px var(--amber-glow), var(--shadow-3); }

.cbtn{
  width:42px; height:42px; flex-shrink:0; border-radius:50%; border:1px solid transparent;
  background:transparent; color:var(--ink-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.cbtn:hover{ background:var(--surface-2); color:var(--ink-1); }
.cbtn:active{ transform:scale(.92); }
.cbtn svg{ width:20px; height:20px; }
.cbtn.send{ color:var(--ink-3); }
.cbtn.send.ready{ background:var(--amber); color:#1A1100; box-shadow:var(--shadow-glow); }
.cbtn.mic.on{ background:var(--amber); color:#1A1100; box-shadow:var(--shadow-glow); }

.cfield{ flex:1; min-width:0; position:relative; display:flex; align-items:center; height:42px; }
.cinput{
  width:100%; border:0; outline:0; background:transparent; resize:none;
  font-family:var(--ff-ui); font-size:16px; color:var(--ink-1); line-height:42px; height:42px;
  padding:0 4px;
}
.cinput::placeholder{ color:var(--ink-3); }

/* live waveform (mocked listening) */
.wave{ position:absolute; inset:0; display:none; align-items:center; gap:3px; padding:0 6px; pointer-events:none; }
.composer.listening .cinput{ visibility:hidden; }
.composer.listening .wave{ display:flex; }
.wave i{ flex:1; max-width:4px; height:6px; border-radius:2px; background:var(--accent); opacity:.85;
  transform-origin:center; will-change:transform; }
@media (prefers-reduced-motion:no-preference){ .composer.listening .wave i{ animation:wv 1s var(--ease-inout) infinite; } }
@keyframes wv{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

/* the listening transcript caption above the bar */
.listen-cap{ position:fixed; left:50%; transform:translateX(-50%); z-index:69; bottom:calc(23vh + 64px);
  font-family:var(--ff-serif); font-style:italic; font-size:19px; color:var(--ink-2); opacity:0;
  transition:opacity .3s var(--ease); pointer-events:none; text-align:center; width:min(560px,88vw); }
.composer.listening ~ .listen-cap{ opacity:1; }

/* attachment chips inside composer */
.attaches{ position:absolute; left:6px; bottom:calc(100% + 10px); display:flex; gap:8px; flex-wrap:wrap; }
.attach{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-full); padding:6px 12px 6px 8px; box-shadow:var(--shadow-1); animation:popUp .4s var(--ease-soft) both; }
@keyframes popUp{ from{ opacity:0; transform:translateY(8px) scale(.9); } to{ opacity:1; transform:none; } }
.attach .ic{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#1A1100; flex-shrink:0; }
.attach .ic svg{ width:14px; height:14px; stroke:currentColor; }
.attach .nm{ font-family:var(--ff-mono); font-size:12.5px; color:var(--ink-1); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach .x{ color:var(--ink-3); cursor:pointer; display:inline-flex; }
.attach .x:hover{ color:var(--ink-1); } .attach .x svg{ width:13px; height:13px; }

/* full-screen drop veil */
.dropveil{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--bg) 64%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.dropveil.on{ display:flex; animation:fade .25s var(--ease) both; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.dropveil .ring{ width:min(440px,80vw); aspect-ratio:1; border:2px dashed var(--amber); border-radius:var(--r-xl);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--amber-glow); }
.dropveil .ring .gg{ line-height:0; animation:hover 3s var(--ease-inout) infinite; }
.dropveil .ring .t{ font-family:var(--ff-display); font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink-1); }
.dropveil .ring .s{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); }

/* ============================================================
   STAGE 2 — ONBOARDING CHAT
   ============================================================ */
.chat{
  position:absolute; inset:0; z-index:25; display:flex; flex-direction:column; align-items:center;
  padding:96px 24px 110px; opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
body[data-stage="chat"] .chat{ opacity:1; pointer-events:auto; }
/* Top-align the conversation (was margin:auto auto 0, which bottom-crammed a
   short chat and left a glaring empty void up top). Now it reads from the top
   like every chat people know, and the space below is "room to grow". */
.thread{ width:min(680px,92vw); margin:0 auto; display:flex; flex-direction:column; gap:22px;
  overflow-y:auto; max-height:100%; padding-bottom:8px; -ms-overflow-style:none; scrollbar-width:thin; }
.thread::-webkit-scrollbar{ width:6px; } .thread::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

.msg{ display:flex; gap:14px; max-width:100%; animation:msgIn .5s var(--ease-soft) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.msg.me{ flex-direction:row-reverse; }
.msg .who{ flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; }
.msg .who.her{ line-height:0; }
.msg .who.her .th-glow{ display:none; }
.msg .who.her svg{ width:42px; height:42px; }
.msg .who.you{ border-radius:50%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); }
.msg .who.you svg{ width:20px; height:20px; stroke:var(--ink-2); }
.msg.her{ padding-left:0; }
.msg.her .bubble{ max-width:88%; }
.bubble{ font-size:16px; line-height:1.55; color:var(--ink-1); padding:13px 17px; border-radius:var(--r-xl);
  max-width:78%; box-shadow:var(--shadow-1); }
.msg.her .bubble{ background:var(--surface); border:1px solid var(--line); border-top-left-radius:var(--r-sm); }
.msg.me  .bubble{ background:var(--amber-glow); border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line)); border-top-right-radius:var(--r-sm); }
.bubble .serif{ color:var(--accent-ink); }

/* ── per-reply affordances: copy + the sources the backend already streams ── */
.msg-foot{ display:flex; gap:8px; margin-top:9px; }
.msg-copy{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-2);
  background:transparent; border:1px solid var(--line); border-radius:var(--r-full); padding:3px 10px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s; }
.msg-copy:hover{ color:var(--ink-1); border-color:var(--ink-2); }
.msg-copy:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.msg-srcs{ margin-top:9px; border-top:1px solid var(--line); padding-top:8px; }
.msg-srcs > summary{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-2);
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; user-select:none; }
.msg-srcs > summary::-webkit-details-marker{ display:none; }
.msg-srcs > summary::before{ content:'\203A'; transition:transform .15s; display:inline-block; }
.msg-srcs[open] > summary::before{ transform:rotate(90deg); }
.msg-srcs > summary:hover{ color:var(--ink-1); }
.msg-srcs-list{ margin-top:8px; display:grid; gap:9px; }
.msg-src{ font-size:13px; line-height:1.4; }
.msg-src a{ color:var(--sky-deep); text-decoration:none; font-weight:500; }
.msg-src a:hover{ text-decoration:underline; }
.msg-src .msg-src-t{ color:var(--ink-1); font-weight:500; }
.msg-src .msg-src-tier{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-3);
  margin-left:7px; padding:1px 6px; border:1px solid var(--line); border-radius:var(--r-full); }
.msg-src .msg-src-snip{ color:var(--ink-2); font-size:12px; margin-top:2px; }
.bubble .att-row{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.bubble .att-row .ic{ width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; color:#1A1100; flex-shrink:0; }
.bubble .att-row .ic svg{ width:15px; height:15px; stroke:currentColor; }
.bubble .att-row .nm{ font-family:var(--ff-mono); font-size:13px; }
.bubble .conns{ display:flex; flex-wrap:wrap; gap:8px; }
.bubble .conn-chip{ font-family:var(--ff-ui); font-size:13px; color:var(--ink-1); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full); padding:8px 14px; cursor:pointer; transition:border-color .15s, background .15s; }
.bubble .conn-chip:hover{ border-color:var(--ink-2); }
.bubble .conn-chip.on{ border-color:var(--amber); background:var(--amber-glow); color:var(--accent-ink); font-weight:600; }
.bubble .conn-chip.on::before{ content:"\2713 "; }
.bubble .conn-actions{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.bubble .conn-skip{ font-family:var(--ff-ui); font-size:13px; color:var(--ink-3); background:transparent; border:0; cursor:pointer; }
.bubble .conn-skip:hover{ color:var(--ink-1); }

/* her "thinking" bubble */
.typing{ display:inline-flex; gap:5px; align-items:center; padding:4px 2px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
@media (prefers-reduced-motion:no-preference){
  .typing i:nth-child(1){ animation:td 1.2s var(--ease-inout) infinite; }
  .typing i:nth-child(2){ animation:td 1.2s var(--ease-inout) .16s infinite; }
  .typing i:nth-child(3){ animation:td 1.2s var(--ease-inout) .32s infinite; }
}
.thinking-note{ font-family:var(--ff-serif); font-style:italic; font-size:15px; color:var(--ink-3); margin-top:8px; }

/* the "open your workspace" handoff card */
.handoff{ align-self:flex-start; margin-left:52px; display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--ink-1); border-radius:var(--r-xl); padding:16px 18px;
  box-shadow:var(--shadow-2); animation:msgIn .5s var(--ease-soft) both; max-width:80%; }
.handoff .hi{ width:44px; height:44px; border-radius:var(--r); background:var(--ok-soft); color:var(--ok);
  display:grid; place-items:center; flex-shrink:0; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent); }
.handoff .hi svg{ width:22px; height:22px; }
.handoff .ht{ font-family:var(--ff-display); font-size:16px; font-weight:600; letter-spacing:-.01em; }
.handoff .hs{ font-size:13.5px; color:var(--ink-2); margin-top:2px; }
.handoff .hcta{ margin-left:8px; }

/* ============================================================
   STAGE 3 — THE WORKSPACE WORLD
   ============================================================ */
.world{ position:absolute; inset:0; z-index:15; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
body[data-stage="world"] .world{ opacity:1; pointer-events:auto; }
/* faint construction grid — "Theron's world" */
.world-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(80% 80% at 50% 42%, #000, transparent 100%);
          mask-image:radial-gradient(80% 80% at 50% 42%, #000, transparent 100%); }

.world-bar{ position:absolute; top:72px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:14px; background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r-full);
  padding:8px 10px 8px 18px; box-shadow:var(--shadow-2); }
.world-bar .wb-task{ font-family:var(--ff-display); font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.world-bar .wb-stat{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12px; color:var(--ink-2); }
.world-bar .wb-divider{ width:1px; height:20px; background:var(--line); }
.world-bar .wb-edit{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:var(--r-full); border:1px solid transparent; cursor:default; }
.world-bar .wb-edit svg{ width:13px; height:13px; }

/* floating Theron inside world canvas — retired; entity lives in #entity-dock */
.world .world-theron:not(.entity-dock){ display:none !important; }
.world-theron.entity-dock{ /* styles in theron-frontdoor.css */ }
.world-theron .wt-say{ position:absolute; left:50%; bottom:calc(100% - 6px); transform:translateX(-50%);
  white-space:nowrap; font-family:var(--ff-serif); font-style:italic; font-size:15px; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full); padding:7px 14px;
  box-shadow:var(--shadow-2); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none; }
.world-theron .wt-say.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.world-theron .wt-say.typing-say::after{ content:''; display:inline-block; width:2px; height:.95em; background:var(--accent); margin-left:2px; vertical-align:-0.12em; border-radius:1px; animation:caretblink 1.05s steps(1) infinite; }

/* draggable panels = the editable world */
.panel{ position:absolute; z-index:20; width:300px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow-2); display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .25s var(--ease), border-color .2s var(--ease); animation:bloom .6s var(--ease-soft) both; }
@keyframes bloom{ from{ opacity:0; transform:translateY(16px) scale(.92); } to{ opacity:1; transform:none; } }
.panel.dragging{ box-shadow:var(--shadow-3); border-color:color-mix(in srgb,var(--amber) 36%,var(--line)); z-index:40; }
.panel .ph{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--line-2); cursor:grab; user-select:none; }
.panel .ph:active{ cursor:grabbing; }
.panel .ph .pdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.panel .ph .pt{ font-family:var(--ff-display); font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-1); }
.panel .ph .pgrip{ margin-left:auto; color:var(--ink-3); display:inline-flex; }
.panel .ph .pgrip svg{ width:15px; height:15px; }
.panel .ph .pclose{ color:var(--ink-3); cursor:pointer; display:inline-flex; padding:2px; }
.panel .ph .pclose:hover{ color:var(--bad); } .panel .ph .pclose svg{ width:14px; height:14px; }
.panel .pb{ padding:14px; }

/* file / upload panel */
.filebox{ display:flex; align-items:center; gap:12px; }
.filebox .fic{ width:46px; height:46px; border-radius:var(--r); display:grid; place-items:center; color:#1A1100; flex-shrink:0; box-shadow:var(--shadow-1); }
.filebox .fic svg{ width:22px; height:22px; stroke:currentColor; }
.filebox .fmeta{ flex:1; min-width:0; }
.filebox .fmeta .fn{ font-family:var(--ff-mono); font-size:13px; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filebox .fmeta .fs{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-3); margin-top:3px; }
.filebar{ margin-top:14px; height:6px; border-radius:var(--r-xs); background:var(--surface-2); overflow:hidden; }
.filebar i{ display:block; height:100%; width:0; background:var(--ok); border-radius:var(--r-xs); transition:width .9s var(--ease); }
.filenote{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-2); margin-top:9px; display:flex; align-items:center; gap:7px; }
.filenote .ok{ color:var(--ok); }

/* hive worker swarm panel */
.hive{ display:flex; flex-direction:column; gap:9px; }
.worker{ display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); transition:opacity .35s var(--ease-soft), border-color .35s var(--ease); }
.worker.pending{ opacity:.4; }
.worker.done{ border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); }
.worker .wav{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:12px; color:var(--ok); position:relative;
  background:radial-gradient(72% 72% at 36% 28%, color-mix(in srgb,var(--ok) 24%,#fff), var(--surface));
  border:1px solid color-mix(in srgb,var(--ok) 42%,transparent); }
html[data-theme="dark"] .worker .wav{ background:radial-gradient(72% 72% at 36% 28%, color-mix(in srgb,var(--ok) 30%,var(--surface)), var(--surface)); }
.worker .wmeta{ flex:1; min-width:0; }
.worker .wnm{ font-family:var(--ff-display); font-size:13px; font-weight:600; color:var(--ink-1); line-height:1.2; }
.worker .wrl{ font-size:11.5px; color:var(--ink-2); }
.worker .wsp{ flex-shrink:0; color:var(--ink-3); }
.worker .wsp svg{ width:16px; height:16px; }
@media (prefers-reduced-motion:no-preference){ .worker.busy .wsp svg{ animation:spin 1.1s linear infinite; transform-box:fill-box; transform-origin:center; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.worker.done .wsp{ color:var(--ok); }

/* receipt panel — the moat: a forming, verifiable receipt */
.rcpt-panel{ width:330px; }
.rcpt-panel .pb{ padding:0; }
.rr{ display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:baseline; padding:10px 14px; border-bottom:1px solid var(--line-2); }
.rr:last-of-type{ border-bottom:0; }
.rr .rk{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rr .rv{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-1); word-break:break-all; }
.rr .rv .ag{ color:var(--accent-ink); }
.rsig{ padding:11px 14px; }
.rsig .rk{ display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.rsig .sig{ font-family:var(--ff-mono); font-size:12px; line-height:1.65; color:var(--ink-1); word-break:break-all; user-select:none; }
.rsig .sig .hx{ padding:0 .5px; border-radius:2px; cursor:text; transition:background .15s, color .15s; }
.rsig .sig .hx:hover{ background:var(--amber-glow); }
.rsig .sig .hx.tampered{ color:var(--bad); background:var(--bad-soft); font-weight:600; }
.rverify{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-top:1px solid var(--line); }
.vbadge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-full); border:1px solid var(--ok);
  color:var(--ok); background:var(--ok-soft); transition:color .3s, border-color .3s, background .3s; }
.vbadge svg{ width:13px; height:13px; }
.vbadge .x{ display:none; }
.rcpt-panel.invalid .vbadge{ color:var(--bad); border-color:var(--bad); background:var(--bad-soft); }
.rcpt-panel.invalid .vbadge .ok{ display:none; } .rcpt-panel.invalid .vbadge .x{ display:block; }
.vbadge .lab-ok{ display:inline; } .vbadge .lab-bad{ display:none; }
.rcpt-panel.invalid .vbadge .lab-ok{ display:none; } .rcpt-panel.invalid .vbadge .lab-bad{ display:inline; }
.rcpt-panel.invalid{ border-color:var(--bad); }
.rverify .vhint{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); margin-left:auto; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.rverify .vhint:hover{ color:var(--ink-1); } .rverify .vhint svg{ width:12px; height:12px; }
.rverify .vhint.reset{ display:none; } .rcpt-panel.invalid .vhint.reset{ display:inline-flex; }
.rcpt-panel.invalid .vhint.tamper{ display:none; }

/* note / canvas panel (editable text) */
.notebox{ font-family:var(--ff-serif); font-size:16px; line-height:1.55; color:var(--ink-1); outline:none; min-height:64px; }
.notebox:focus{ }
.notebox:empty:before{ content:attr(data-ph); color:var(--ink-3); font-style:italic; }

/* preview / result panel (e.g. a generated thing) */
.resultbox{ font-size:14px; line-height:1.6; color:var(--ink-2); }
.resultbox b{ color:var(--ink-1); font-weight:600; }
.resultbox .tag{ display:inline-block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--amber-glow); border-radius:var(--r-sm); padding:2px 8px; margin-bottom:9px; }

/* the "add to world" tray */
.tray{ position:absolute; left:50%; bottom:84px; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:7px; background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r-full);
  padding:6px; box-shadow:var(--shadow-2); opacity:0; transition:opacity .5s var(--ease) .4s; }
body[data-stage="world"] .tray{ opacity:1; }
.tray .tlabel{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 8px 0 12px; }
.traybtn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-ui); font-size:13px; font-weight:500;
  color:var(--ink-2); border:1px solid transparent; border-radius:var(--r-full); padding:7px 13px; cursor:pointer;
  transition:background .15s, color .15s; }
.traybtn:hover{ background:var(--surface-2); color:var(--ink-1); }
.traybtn svg{ width:15px; height:15px; }

/* tiny toast */
.toast{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(10px); z-index:120;
  background:var(--ink-1); color:var(--bg); font-family:var(--ff-ui); font-size:13.5px; font-weight:500;
  padding:10px 18px; border-radius:var(--r-full); box-shadow:var(--shadow-3); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:680px){
  .panel{ width:264px; }
  .rcpt-panel{ width:280px; }
  .world-bar .wb-task{ max-width:38vw; }
  .handoff{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ════════ IDENTITY — account chip + inline sign-in modal + onboarding choices ════════ */
.acct{ display:inline-flex; }
.acct-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-display); font-weight:600; font-size:12.5px;
  color:var(--ink-1); background:color-mix(in srgb,var(--surface) 55%,transparent); border:1px solid var(--line);
  border-radius:var(--r-full); padding:8px 14px; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .15s, color .15s, transform .15s; }
.acct-chip:hover{ border-color:var(--ink-1); transform:translateY(-1px); }
.acct-chip.in{ color:var(--ink-2); }
.acct-chip .acct-dot{ width:6px; height:6px; border-radius:50%; background:var(--moss,var(--ok)); flex-shrink:0; }
.acct-chip .acct-em{ max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.si-overlay{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  background:color-mix(in srgb,var(--ink-1) 32%,transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:siFade .25s var(--ease) both; }
@keyframes siFade{ from{ opacity:0 } to{ opacity:1 } }
.si-card{ position:relative; width:min(420px,94vw); background:var(--paper,var(--surface)); border:1px solid var(--line);
  border-radius:22px; padding:30px 28px 26px; box-shadow:0 30px 80px -20px color-mix(in srgb,var(--ink-1) 50%,transparent);
  text-align:center; animation:siRise .35s var(--ease-soft,var(--ease)) both; }
@keyframes siRise{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.si-x{ position:absolute; top:14px; right:14px; width:30px; height:30px; border:0; background:transparent; color:var(--ink-3);
  cursor:pointer; border-radius:50%; display:grid; place-items:center; }
.si-x:hover{ color:var(--ink-1); background:var(--surface-2); }
.si-x svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.si-gem{ display:flex; justify-content:center; align-items:center; margin-bottom:14px; line-height:0; min-height:8px; }
.si-t{ font-family:var(--ff-display); font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink-1); }
.si-s{ font-family:var(--ff-serif); font-style:italic; font-size:14px; line-height:1.5; color:var(--ink-3); margin:8px 4px 18px; }
.si-body{ display:flex; flex-direction:column; gap:11px; }
.si-input{ width:100%; box-sizing:border-box; font-family:var(--ff-ui,inherit); font-size:15px; color:var(--ink-1);
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 15px; outline:none; text-align:center;
  transition:border-color .15s, box-shadow .15s; }
.si-input:focus{ border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-glow,rgba(255,174,0,.25)); }
.si-input.si-code{ letter-spacing:.4em; font-family:var(--ff-mono); font-weight:600; }
.si-btn{ width:100%; font-family:var(--ff-display); font-weight:600; font-size:14.5px; color:var(--paper,#fff); background:var(--ink-1);
  border:0; border-radius:12px; padding:13px; cursor:pointer; transition:transform .15s, opacity .15s; }
.si-btn:hover{ transform:translateY(-1px); }
.si-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.si-skip{ font-family:var(--ff-ui,inherit); font-size:13px; color:var(--ink-3); background:transparent; border:0; cursor:pointer; padding:4px; }
.si-skip:hover{ color:var(--ink-1); }
.si-err{ display:none; color:var(--bad,#c0392b); font-size:12.5px; font-family:var(--ff-ui,inherit); }
.si-sent{ font-family:var(--ff-serif); font-style:italic; font-size:13.5px; color:var(--ink-2); }

/* onboarding inline choice rows (in the chat thread) */
.ob-auth{ display:flex; flex-direction:column; gap:9px; align-items:stretch; }
.ob-auth .btn{ justify-content:center; }

/* ════════════════ MOBILE — phone widths + short heights ════════════════ */
/* P0-1: the header can't carry 5 children on a phone — drop the byline + altitude
   pill (redundant on mobile; the gem + stage orient you), shrink the account chip. */
@media (max-width:560px){
  .top{ padding:max(13px,env(safe-area-inset-top,13px)) max(15px,env(safe-area-inset-right,0px)) 13px max(15px,env(safe-area-inset-left,0px)); }
  .brand .wm .by{ display:none; }
  .altitude{ display:none !important; }
  .acct-chip{ padding:7px 11px; font-size:12px; }
  .acct-chip .acct-em{ max-width:92px; }
  .top-actions{ gap:7px; }

  /* P0-2: front door — hero owns the top, the composer anchors at the BOTTOM. */
  body[data-stage="landing"] .landing{ padding:0 18px 16vh; }
  body[data-stage="landing"] .composer{ bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:92vw; }
  .hint{ display:none; }                 /* decorative; the placeholder already says it */
  .phrase{ height:74px; width:92vw; margin:18px 0 2px; }
  .typed-line.say .typed-body{ font-size:clamp(22px,6.6vw,30px); }
  .typed-line.think .typed-body{ font-size:clamp(18px,5.4vw,25px); }
}
/* short / landscape height — keep the hero + composer from stacking on top of each other */
@media (max-height:600px){
  .hint{ display:none; }
  body[data-stage="landing"] .landing{ padding-bottom:12vh; }
  body[data-stage="landing"] .composer{ bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
}
/* P1-3: finger-sized tap targets on touch devices */
@media (pointer:coarse){
  .iconbtn{ width:44px; height:44px; }
  .si-x{ width:40px; height:40px; }
  .cbtn{ min-width:42px; min-height:42px; }
}

/* ════════ MANUS SPLIT (desktop ≥881px) — chat LEFT, her computer RIGHT ════════
   The signed-in world is a conversation (left) beside Theron's live computer
   (right): you talk, her work + brain show on the right, every step on the
   record. Below 881px we keep the existing full-screen stages (no split). */
@media (min-width:881px){
  body[data-stage="world"] .chat{ opacity:1; pointer-events:auto; position:absolute; inset:0; right:auto; width:clamp(360px,36%,460px); padding:84px 26px 104px; align-items:stretch; border-right:1px solid var(--line); background:linear-gradient(180deg, color-mix(in srgb,var(--paper) 62%, transparent), transparent); z-index:20; }
  body[data-stage="world"] .chat .thread{ width:100%; margin:0; }
  body[data-stage="world"] .world{ left:clamp(360px,36%,460px); }
  body[data-stage="world"] .composer{ left:clamp(180px,18%,230px); width:clamp(300px,30%,400px); bottom:22px; transform:none; }
  body[data-stage="world"] .entity-dock{
    left:auto; right:calc(100% - clamp(360px,36%,460px) + 18px); bottom:calc(22px + 54px); transform:none;
  }
  /* Entity lives in the chat column — not over the brain canvas. */
}

/* ════════ CHAT HEADER — new chat + previous chats (top of the chat column) ════════ */
.chat-head{ position:absolute; top:46px; left:0; right:0; display:flex; gap:8px; padding:0 22px; z-index:26; pointer-events:none; }
.chat-head > *{ pointer-events:auto; }
body[data-stage="landing"] .chat-head{ display:none; }
.ch-btn{ display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--ff-ui,inherit); color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full); padding:7px 12px; cursor:pointer; box-shadow:var(--shadow-1); transition:color .15s var(--ease), border-color .15s var(--ease); }
.ch-btn:hover:not([disabled]){ color:var(--ink-1); border-color:var(--ink-2); }
.ch-btn[disabled]{ opacity:.45; cursor:default; }
.ch-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }
.ch-list{ position:absolute; top:42px; left:22px; width:min(300px,80%); max-height:54vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg, 12px); box-shadow:var(--shadow-3); padding:6px; z-index:40; }
.ch-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:0; border-radius:8px; padding:9px 10px; cursor:pointer; }
.ch-item:hover{ background:var(--surface-2); }
.ci-t{ font:500 13px/1.3 var(--ff-ui,inherit); color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-a{ font:11px var(--ff-mono, monospace); color:var(--ink-3); flex-shrink:0; }
.ch-empty{ padding:14px; font:13px var(--ff-ui,inherit); color:var(--ink-3); text-align:center; }