/* ============================================================
   Scene 1 — Ask Nemova
   ============================================================ */
.scene-brain{padding:0}
.brain-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:16px;flex:1;min-height:0;padding:16px 18px 60px}

/* ---------- graph side ---------- */
.graph-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}
.graph-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.gh-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.gh-toggles{display:flex;gap:10px;flex-wrap:wrap}
.tg{display:flex;align-items:center;gap:6px;background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:4px 6px 4px 9px}
.tg-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-ghost);margin-right:2px}
.tg-opt{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);padding:5px 9px;border-radius:7px;transition:color var(--dur),background var(--dur)}
.tg-opt:hover{color:var(--ink-dim)}
.tg-opt.is-on{color:var(--ink-d);background:var(--panel-hi);box-shadow:inset 0 0 0 1px var(--line-2)}

.graph-stage{position:relative;flex:1;min-height:0;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(100% 82% at 50% 6%,#172832 0%,#0d171e 54%,#070e13 100%);
  border:1px solid var(--line);box-shadow:inset 0 0 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
.graph-stage::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;opacity:.4}
.graph-stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(96% 92% at 50% 46%,transparent 64%,rgba(5,10,14,.34) 100%)}
/* node+edge subtree lifts ABOVE the vignette (z-5) so peripheral nodes stay lit */
.graph-float{position:absolute;inset:0;z-index:6}
/* slow idle drift only on roomy pointer devices (composited transform, cheap there) */
@media(hover:hover) and (min-width:1100px){
  .graph-float{animation:graphDrift 36s ease-in-out infinite;will-change:transform}
  .graph-float.paused{animation-play-state:paused}
}
@keyframes graphDrift{0%,100%{transform:translate(0,0) scale(1)}34%{transform:translate(-1%,.7%) scale(1.01)}67%{transform:translate(.9%,-.6%) scale(1.005)}}
.graph-cam{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .6s var(--e1);will-change:transform}
.edge-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.node-layer{position:absolute;inset:0}

/* edges */
.gedge{vector-effect:non-scaling-stroke;fill:none}
.gedge.link{stroke:rgba(125,180,200,.52);stroke-width:1.1}
.gedge.sim{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55;animation:simflow 14s linear infinite}
@keyframes simflow{to{stroke-dashoffset:-140}}
/* during retrieval, quiet the resting landmark labels so they don't fight the gold flares */
.node-layer.focusing .gnode.pin:not(.flare):not(.hot) .gn-label{opacity:.12}
.trace{vector-effect:non-scaling-stroke;fill:none;stroke-width:1.8;transition:stroke-dashoffset .42s var(--e1)}
.trace.gold{stroke:var(--gold);filter:drop-shadow(0 0 4px var(--gold-glow))}
.trace.surprise-edge{stroke:var(--gold);stroke-width:2.4;stroke-dasharray:5 4;filter:drop-shadow(0 0 7px var(--gold-glow));animation:surprisePulse 1.6s var(--e1) infinite}
@keyframes surprisePulse{0%,100%{filter:drop-shadow(0 0 5px var(--gold-glow))}50%{filter:drop-shadow(0 0 12px var(--gold-glow))}}

/* query core */
.query-core{position:absolute;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--gold),rgba(217,162,74,0));box-shadow:0 0 18px var(--gold-glow);
  animation:coreBreath 1.4s var(--e1) infinite;z-index:6}
@keyframes coreBreath{0%,100%{box-shadow:0 0 12px var(--gold-glow)}50%{box-shadow:0 0 26px var(--gold-glow)}}

/* nodes */
.gnode{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;z-index:4;
  padding:5px 6px;border-radius:999px;transition:opacity .35s var(--e1),filter .35s,transform .5s var(--e1)}
.gn-dot{width:var(--dsz,13px);height:var(--dsz,13px);border-radius:50%;background:var(--gd,#7FB8CF);position:relative;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 16px -1px var(--gd,#7FB8CF)}
.gn-dot::after{content:'';position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--gd,#7FB8CF) 0%,transparent 66%);opacity:.55}
.gnode.flare .gn-dot::after{opacity:.75;inset:-12px;background:radial-gradient(circle,var(--gold) 0%,transparent 66%)}
/* labels sit centered ABOVE the dot; wrap to 2 lines (no ellipsis truncation) */
.gn-label{position:absolute;left:50%;bottom:calc(100% + 7px + var(--lo,0px));font-family:var(--mono);font-size:10.5px;line-height:1.25;text-align:center;color:var(--ink-d);
  background:color-mix(in oklab,var(--bg) 92%,transparent);border:1px solid var(--line-2,var(--line));border-radius:7px;padding:3px 8px;
  width:max-content;max-width:186px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin-left:var(--lx,0px);
  opacity:0;transform:translate(-50%,4px) scale(.96);transition:opacity .2s,transform .2s;pointer-events:none;z-index:2;
  box-shadow:0 6px 18px -9px rgba(0,0,0,.8)}
/* landmark labels (anchors + hubs) stay visible at rest, styled as quiet-but-legible metadata */
.gnode.pin{z-index:5}
.gnode.pin .gn-label{opacity:1;transform:translate(-50%,0) scale(1);color:var(--ink-dim)}
/* flip below the dot near the top edge so the plate is never clipped */
.gnode.label-below .gn-label{bottom:auto;top:calc(100% + 7px + var(--lo,0px))}
.gnode.hot{z-index:8}
.gnode.hot .gn-label,.gnode.flare .gn-label{opacity:1;transform:translate(-50%,0) scale(1)}
.gnode.hot .gn-dot{transform:scale(1.22)}
/* keep the whole constellation visible during retrieval (a soft de-emphasis, not a blackout) */
.gnode.dim{opacity:.5}
.gnode.flare{z-index:9}
.gnode.flare .gn-dot{background:var(--gold);box-shadow:0 0 0 2px rgba(217,162,74,.35),0 0 16px var(--gold-glow);animation:nodeBreath 1.8s var(--e1) infinite}
.gnode.flare .gn-label{color:var(--ink-d);border-color:var(--gold);background:var(--bg);box-shadow:0 0 12px -4px var(--gold-glow)}
.gnode.hot{z-index:10}
.gnode.hot .gn-label{background:var(--bg)}
@keyframes nodeBreath{0%,100%{box-shadow:0 0 0 2px rgba(217,162,74,.30),0 0 12px var(--gold-glow)}50%{box-shadow:0 0 0 3px rgba(217,162,74,.5),0 0 22px var(--gold-glow)}}

/* group dot colors */
.gnode[data-group="offer"]{--gd:#5BBF8E}
.gnode[data-group="sched"]{--gd:#2E83A6}
.gnode[data-group="leads"]{--gd:#C2613B}
.gnode[data-group="supply"]{--gd:#9C8B6E}
.gnode[data-group="brand"]{--gd:#D9A24A}
.gnode[data-group="money"]{--gd:#4FA8C9}
.gnode[data-group="admin"]{--gd:#8A93A0}
.gnode[data-group="signal"]{--gd:#7FB8CF}

/* legend + readout — panel decodes the group colours (built per-industry in graph.js) */
.graph-legend{position:absolute;left:11px;bottom:10px;z-index:7;max-width:66%;
  display:flex;flex-direction:column;gap:5px;
  font-size:9.5px;letter-spacing:.02em;color:var(--ink-ghost);
  background:color-mix(in oklab,var(--bg) 76%,transparent);border:1px solid var(--line);border-radius:9px;padding:7px 9px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lg-row{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.graph-legend span{display:inline-flex;align-items:center;gap:6px}
.lg-sw{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#7FB8CF}
/* per-group swatch colours via class (CSP-safe: no inline style attribute) */
.lg-sw[data-group="offer"]{background:#5BBF8E}
.lg-sw[data-group="sched"]{background:#2E83A6}
.lg-sw[data-group="leads"]{background:#C2613B}
.lg-sw[data-group="supply"]{background:#9C8B6E}
.lg-sw[data-group="brand"]{background:#D9A24A}
.lg-sw[data-group="money"]{background:#4FA8C9}
.lg-sw[data-group="admin"]{background:#8A93A0}
.lg-sw[data-group="signal"]{background:#7FB8CF}
.lg-edges{opacity:.9;padding-top:5px;margin-top:1px;border-top:1px solid var(--line)}
.lg{width:14px;height:0;border-top:2px solid;display:inline-block}
.lg-link{border-color:rgba(110,160,180,.6)}
.lg-sim{border-color:var(--gold);border-top-style:dashed}
.graph-readout{position:absolute;right:12px;top:11px;z-index:7;font-size:10.5px;color:var(--gold);
  background:color-mix(in oklab,var(--bg) 72%,transparent);border:1px solid var(--gold-soft);border-radius:7px;padding:4px 9px;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.graph-readout.show{opacity:1;transform:none}

/* ---------- chat side ---------- */
.chat-wrap{display:flex;flex-direction:column;min-height:0;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat-head .ch-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--teal-soft);color:var(--teal-2);border:1px solid var(--teal)}
.chat-head .ch-ico svg{width:19px;height:19px}
.ch-title{font-size:15px;font-weight:600}
.ch-sub{font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px}
.chat-feed{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
/* bottom-anchor: messages hug just above the chips, no dead vertical gap; scroll still works */
.chat-feed > .msg:first-child{margin-top:auto}
.msg{max-width:90%;display:flex;flex-direction:column;gap:6px;animation:rise .4s var(--e1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.brain{align-self:flex-start}
.bubble{padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.5}
.msg.user .bubble{background:var(--accent);color:var(--onAccent);border-bottom-right-radius:4px}
.msg.brain .bubble{background:var(--tile);border:1px solid var(--line);color:var(--ink-d);border-bottom-left-radius:4px}
.cites{display:flex;gap:6px;flex-wrap:wrap}
.cite{font-family:var(--mono);font-size:10px;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-soft);
  border-radius:6px;padding:3px 7px;display:inline-flex;align-items:center;gap:5px;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--e1),transform .3s var(--e1)}
.cite.in{opacity:1;transform:none}
.cite::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold)}
.surprise-note{font-family:var(--mono);font-size:11px;color:#231d12;background:linear-gradient(180deg,var(--gold),#caa14a);
  border-radius:9px;padding:8px 11px;display:flex;gap:7px;align-items:flex-start;box-shadow:0 6px 18px -8px var(--gold-glow);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.surprise-note.in{opacity:1;transform:none}
.surprise-note b{font-weight:700}
.draft-tag{font-family:var(--mono);font-size:10.5px;color:var(--await);border:1px dashed var(--await);border-radius:6px;
  padding:3px 8px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.typing{display:inline-flex;gap:4px;padding:10px 13px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:td 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 10px}
.chat-chip{font-family:var(--mono);font-size:11px;line-height:1.3;text-align:left;color:var(--ink-dim);background:var(--tile);border:1px solid var(--line);
  border-radius:16px;padding:7px 12px;max-width:100%;transition:border-color var(--dur),color var(--dur),transform .12s var(--e2)}
.chat-chip:hover{border-color:var(--teal);color:var(--ink-d)}
.chat-chip:active{transform:scale(.96)}
.chat-chip.more{color:var(--ink-faint);border-style:dashed}
.chat-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:11px 14px;color:var(--ink-d);font-size:13.5px;outline:none;transition:border-color .2s,box-shadow .2s}
.chat-input input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.chat-input input::placeholder{color:var(--ink-ghost)}
.ci-send{width:44px;height:44px;flex:0 0 auto;border-radius:11px;background:var(--accent);color:var(--onAccent);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .12s var(--e2)}
.ci-send:hover{background:var(--accent2)}
.ci-send:active{transform:scale(.94)}

/* relayout pause for graph nodes */
.graph-stage.relayout .gnode{transition:left .6s var(--e1),top .6s var(--e1),opacity .35s,filter .35s}

@media(max-width:980px){
  .brain-grid{grid-template-columns:1fr;grid-template-rows:minmax(360px,52vh) 1fr;gap:12px;padding:12px}
  .chat-feed{max-height:none}
  .gn-dot{width:calc(var(--dsz,13px) - 2px);height:calc(var(--dsz,13px) - 2px)}
  .graph-legend{max-width:82%;font-size:9px}
}
/* on phones, rely on tap-to-reveal instead of always-on landmark labels */
@media(max-width:640px){
  .gnode.pin .gn-label{opacity:0}
}