/* ============================================================
   RAGScope — visual language
   dark instrument panel · teal = data · violet = model · amber = guardrail
   ============================================================ */

:root{
  --bg:        #070a10;
  --bg-2:      #0b1018;
  --panel:     #0e141d;
  --panel-2:   #121a25;
  --line:      #1e2a38;
  --line-soft: #182230;

  --ink:       #dce6f2;
  --ink-dim:   #8698ad;
  --ink-faint: #5a6b7e;

  --teal:      #2fd4c8;
  --teal-dim:  #178f89;
  --violet:    #9d7bff;
  --violet-dim:#5f47a8;
  --amber:     #ffb340;
  --rose:      #ff5f7e;
  --lime:      #8bd450;
  --blue:      #4d9dff;

  --r: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(157,123,255,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(47,212,200,.09), transparent 60%),
    var(--bg);
  display:flex; flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:rgba(47,212,200,.28); }

/* scrollbars */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#1d2836; border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#2b3a4d; background-clip:padding-box; }

/* ─────────────────────────── top bar ─────────────────────────── */

.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:22px;
  padding:0 18px; height:58px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,26,37,.92), rgba(11,16,24,.92));
  backdrop-filter:blur(8px);
  z-index:45;
}

.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark{ display:flex; gap:3px; align-items:flex-end; height:22px; }
.brand-mark span{
  width:4px; border-radius:2px; display:block;
  background:linear-gradient(180deg,var(--teal),var(--teal-dim));
  animation:pulseBar 1.8s ease-in-out infinite;
}
.brand-mark span:nth-child(1){ height:10px; animation-delay:0s; }
.brand-mark span:nth-child(2){ height:20px; animation-delay:.22s; background:linear-gradient(180deg,var(--violet),var(--violet-dim)); }
.brand-mark span:nth-child(3){ height:14px; animation-delay:.44s; }
@keyframes pulseBar{ 0%,100%{ transform:scaleY(.55); opacity:.65 } 50%{ transform:scaleY(1); opacity:1 } }

.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text strong{ font-size:15px; letter-spacing:.28px; }
.brand-text em{
  font-style:normal; font-family:var(--mono);
  font-size:10px; color:var(--ink-faint); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.modes{ display:flex; gap:4px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--bg-2); }
.mode{
  appearance:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:6px 15px; border-radius:6px;
  font:600 12.5px/1 var(--sans); letter-spacing:.2px;
  color:var(--ink-dim); background:transparent;
  transition:background .16s, color .16s;
}
.mode .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; }
.mode:hover{ color:var(--ink); }
.mode.is-active{ background:var(--panel-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.mode.is-active .dot{ opacity:1; box-shadow:0 0 8px currentColor; }
.mode[data-mode="ingest"].is-active .dot{ color:var(--teal); }
.mode[data-mode="client"].is-active .dot{ color:var(--violet); }

.topctl{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.speed{ display:flex; align-items:center; gap:8px; font:500 11px var(--mono); color:var(--ink-faint); }
.speed input{ width:96px; }
.speed output{ color:var(--teal); min-width:34px; }

/* range inputs */
input[type=range]{
  -webkit-appearance:none; appearance:none; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--teal-dim),var(--line)); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--ink); border:2px solid var(--teal);
  box-shadow:0 0 0 3px rgba(47,212,200,.14); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--ink);
  border:2px solid var(--teal); cursor:grab;
}

/* buttons */
.btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 14px; border-radius:8px;
  font:600 12.5px/1 var(--sans); letter-spacing:.15px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  transition:transform .1s, border-color .16s, background .16s, box-shadow .16s;
}
.btn:hover{ border-color:#2c3d52; background:#16202c; }
.btn:active{ transform:translateY(1px); }
.btn.primary{
  border-color:transparent; color:#04120f;
  background:linear-gradient(135deg,#57e8d9,#22b8ad);
  box-shadow:0 3px 14px rgba(47,212,200,.22);
}
.btn.primary:hover{ background:linear-gradient(135deg,#6ff0e2,#28ccbf); }
.btn.ghost{ background:transparent; }
.btn.danger-ghost{ background:transparent; color:#c3798c; border-color:#3a2530; }
.btn.danger-ghost:hover{ color:var(--rose); border-color:#563240; background:rgba(255,95,126,.06); }
.btn.wide{ width:100%; padding:10px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ─────────────────────────── shell layout ─────────────────────────── */

.shell{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns: 316px minmax(0,1fr) 340px;
}

.panel{
  min-height:0; overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(180deg,var(--panel),rgba(14,20,29,.6));
  display:flex; flex-direction:column;
}
.panel.left{ border-right:1px solid var(--line); }
.panel.right{ border-left:1px solid var(--line); }

.pane{ display:flex; flex-direction:column; }
.pane[hidden]{ display:none; }

.pane-head{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:14px 16px 8px;
}
.pane-head.tight{ padding-top:18px; border-top:1px solid var(--line-soft); margin-top:6px; }
.pane-head h2{
  margin:0; font:700 11px/1 var(--sans);
  letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-dim);
}
.hint{ font:400 10.5px var(--mono); color:var(--ink-faint); }

.empty{
  margin:0; padding:14px 16px;
  font:400 12px/1.65 var(--sans); color:var(--ink-faint);
}

/* ─────────────────────────── connectors ─────────────────────────── */

.connector-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  padding:2px 16px 12px;
}
.conn{
  position:relative; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:11px 4px 9px; border-radius:9px;
  border:1px solid var(--line-soft); background:var(--bg-2);
  transition:border-color .15s, background .15s, transform .1s;
}
.conn:hover{ border-color:#2c3d52; background:#131c27; }
.conn.is-active{
  border-color:var(--teal); background:rgba(47,212,200,.07);
  box-shadow:0 0 0 1px rgba(47,212,200,.25), 0 4px 18px -8px rgba(47,212,200,.5);
}
.conn svg{ width:19px; height:19px; color:var(--ink-dim); }
.conn.is-active svg{ color:var(--teal); }
.conn span{ font:600 9.5px/1.1 var(--sans); color:var(--ink-dim); text-align:center; letter-spacing:.2px; }
.conn.is-active span{ color:var(--ink); }
.conn .sim{
  position:absolute; top:4px; right:4px;
  width:5px; height:5px; border-radius:50%; background:var(--amber); opacity:.75;
}

.connector-config{ padding:0 16px 4px; display:flex; flex-direction:column; gap:9px; }
.cfg-note{
  font:400 10.5px/1.5 var(--mono); color:var(--ink-faint);
  padding:8px 10px; border-radius:7px;
  background:rgba(255,179,64,.05); border:1px solid rgba(255,179,64,.16);
}
.cfg-note.real{ background:rgba(47,212,200,.05); border-color:rgba(47,212,200,.18); }
.cfg-note b{ color:var(--amber); font-weight:700; }
.cfg-note.real b{ color:var(--teal); }

.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font:500 10.5px var(--mono); color:var(--ink-faint); letter-spacing:.2px; }
.field > span b{ color:var(--teal); font-weight:700; }
.field.inline{ flex-direction:row; align-items:center; gap:8px; }
.field.inline input[type=range]{ width:74px; }

input[type=text], input[type=password], textarea, select{
  width:100%; font:400 12px var(--mono); color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:7px;
  padding:8px 10px; outline:none; resize:vertical;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--teal-dim); box-shadow:0 0 0 3px rgba(47,212,200,.10);
}
textarea{ line-height:1.55; }
input[type=file]{ font:400 11px var(--mono); color:var(--ink-dim); width:100%; }
input[type=file]::file-selector-button{
  font:600 11px var(--sans); color:var(--ink); cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:6px 11px; margin-right:9px;
}

.run-row{ padding:12px 16px 4px; }

.settings{ padding:2px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.toggles{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.switch{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font:500 11.5px var(--sans); color:var(--ink-dim);
}
.switch input{ display:none; }
.switch span{
  width:28px; height:16px; border-radius:9px; flex:0 0 auto;
  background:#1b2532; border:1px solid var(--line); position:relative;
  transition:background .18s, border-color .18s;
}
.switch span::after{
  content:""; position:absolute; top:2px; left:2px;
  width:10px; height:10px; border-radius:50%; background:var(--ink-faint);
  transition:transform .18s, background .18s;
}
.switch input:checked + span{ background:rgba(255,179,64,.2); border-color:rgba(255,179,64,.5); }
.switch input:checked + span::after{ transform:translateX(12px); background:var(--amber); }
.switch input:checked ~ *{ color:var(--ink); }

/* ─────────────────────────── ask / answer ─────────────────────────── */

.ask{ padding:2px 16px 10px; display:flex; flex-direction:column; gap:9px; }
.ask-row{ display:flex; align-items:center; gap:10px; justify-content:space-between; }

.suggest{ padding:0 16px 12px; display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  cursor:pointer; border:1px solid var(--line-soft); background:var(--bg-2);
  color:var(--ink-dim); border-radius:20px; padding:5px 10px;
  font:500 10.5px var(--sans); transition:.15s;
}
.chip:hover{ border-color:var(--violet-dim); color:var(--ink); background:rgba(157,123,255,.08); }

.answer{ padding:0 16px 8px; }
.answer .verdict{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  font:600 10.5px var(--mono); letter-spacing:.3px; text-transform:uppercase;
  padding:7px 10px; border-radius:7px;
}
.verdict.ok{ color:var(--lime); background:rgba(139,212,80,.07); border:1px solid rgba(139,212,80,.22); }
.verdict.warn{ color:var(--amber); background:rgba(255,179,64,.07); border:1px solid rgba(255,179,64,.24); }
.verdict.bad{ color:var(--rose); background:rgba(255,95,126,.07); border:1px solid rgba(255,95,126,.24); }

.answer .text{ font:400 13px/1.72 var(--sans); color:#cfdbe9; }
.answer .text .cite{
  display:inline-block; vertical-align:super;
  font:700 9px var(--mono); color:var(--violet);
  background:rgba(157,123,255,.13); border-radius:4px;
  padding:1px 4px; margin:0 1px; cursor:pointer;
}
.answer .text .cite:hover{ background:rgba(157,123,255,.3); color:#fff; }
.caret{
  display:inline-block; width:7px; height:14px; margin-left:2px;
  background:var(--teal); vertical-align:-2px; animation:blink .9s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

.sources{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.src{
  border:1px solid var(--line-soft); border-radius:8px; padding:9px 10px;
  background:var(--bg-2); cursor:pointer; transition:.15s;
}
.src:hover{ border-color:var(--violet-dim); background:rgba(157,123,255,.05); }
.src-top{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.src-idx{
  font:700 9px var(--mono); color:var(--violet);
  background:rgba(157,123,255,.14); border-radius:4px; padding:2px 5px;
}
.src-name{ font:600 10.5px var(--mono); color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.src-score{ margin-left:auto; font:700 10px var(--mono); color:var(--teal); }
.src-body{ font:400 11px/1.55 var(--sans); color:var(--ink-faint); max-height:52px; overflow:hidden; }
.src mark{ background:rgba(47,212,200,.2); color:var(--teal); border-radius:2px; padding:0 1px; }

/* context window bar */
.ctxwin{ padding:2px 16px 18px; }
.ctxbar{
  height:22px; border-radius:6px; overflow:hidden; display:flex;
  border:1px solid var(--line); background:var(--bg-2);
}
.ctxbar i{ display:block; height:100%; transition:width .5s cubic-bezier(.2,.7,.3,1); }
.ctxlegend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; }
.ctxlegend span{ display:flex; align-items:center; gap:5px; font:500 10px var(--mono); color:var(--ink-faint); }
.ctxlegend i{ width:8px; height:8px; border-radius:2px; }

/* ─────────────────────────── stage / graph ─────────────────────────── */

.stage-wrap{ display:flex; flex-direction:column; min-width:0; min-height:0; }

.stage-head{
  flex:0 0 auto; display:flex; align-items:center; gap:16px;
  padding:9px 18px; border-bottom:1px solid var(--line-soft);
  background:rgba(11,16,24,.5);
}
.lane-legend{ display:flex; gap:14px; }
.lg{ display:flex; align-items:center; gap:6px; font:500 10px var(--mono); color:var(--ink-faint); }
.lg::before{ content:""; width:14px; height:2px; border-radius:2px; }
.lg-ingest::before{ background:var(--teal); box-shadow:0 0 6px var(--teal); }
.lg-query::before{ background:var(--violet); box-shadow:0 0 6px var(--violet); }
.lg-store::before{ background:var(--blue); box-shadow:0 0 6px var(--blue); }

.livestats{ margin-left:auto; display:flex; gap:18px; }
.livestats > div{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.livestats b{ font:700 13px var(--mono); color:var(--ink); }
.livestats b em{ font-style:normal; font-size:9px; color:var(--ink-faint); margin-left:1px; }
.livestats span{ font:500 8.5px var(--mono); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.6px; }

.stage{
  position:relative; flex:1 1 auto; min-height:0;
  overflow:auto;
  background-image:
    linear-gradient(rgba(30,42,56,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,42,56,.30) 1px, transparent 1px);
  background-size:34px 34px;
}
.stage canvas{ position:absolute; inset:0; display:block; }
.nodes{ position:absolute; inset:0; }

/* node card */
.node{
  position:absolute; width:140px;
  transform:translate(-50%,-50%);
  border-radius:11px; padding:9px 10px 8px;
  border:1px solid var(--line);
  background:linear-gradient(165deg,#131c27,#0d141d);
  cursor:pointer; user-select:none;
  transition:border-color .2s, box-shadow .25s, transform .18s;
  box-shadow:0 6px 22px -14px #000;
}
.node:hover{ border-color:#33465c; }
.node.sel{ border-color:var(--ink-dim); box-shadow:0 0 0 1px var(--ink-dim), 0 8px 26px -14px #000; }

.node .nhead{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.node .nico{
  width:20px; height:20px; flex:0 0 auto; border-radius:6px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.04); color:var(--ink-dim);
}
.node .nico svg{ width:12px; height:12px; }
.node .ntitle{
  font:700 10px/1.15 var(--sans); letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.node .nstat{
  font:500 9.5px/1.35 var(--mono); color:var(--ink-faint);
  min-height:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.node .nbar{
  margin-top:6px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.05); overflow:hidden;
}
.node .nbar i{
  display:block; height:100%; width:0%; border-radius:2px;
  background:currentColor; transition:width .18s linear;
}
.node .nbadge{
  position:absolute; top:-7px; right:-7px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; display:none; place-items:center;
  font:700 9px var(--mono); color:#160d02;
  background:var(--amber); box-shadow:0 0 12px rgba(255,179,64,.5);
}
.node .nbadge.on{ display:grid; }

/* lane tinting */
.node.lane-ingest{ color:var(--teal); }
.node.lane-query{ color:var(--violet); }
.node.lane-store{ color:var(--blue); }
.node.kind-guard{ color:var(--amber); }
.node.kind-model{ color:var(--violet); }

.node.lane-ingest .nico{ color:var(--teal); background:rgba(47,212,200,.09); }
.node.lane-query  .nico{ color:var(--violet); background:rgba(157,123,255,.09); }
.node.lane-store  .nico{ color:var(--blue); background:rgba(77,157,255,.09); }
.node.kind-guard  .nico{ color:var(--amber); background:rgba(255,179,64,.09); }

/* active pulse */
.node.active{
  border-color:currentColor;
  box-shadow:0 0 0 1px currentColor, 0 0 30px -6px currentColor, 0 8px 26px -16px #000;
  transform:translate(-50%,-50%) scale(1.045);
}
.node.active .ntitle{ color:#fff; }
.node.done{ border-color:rgba(255,255,255,.14); }
.node.dim{ opacity:.5; filter:saturate(.45); }
.node.err{ color:var(--rose) !important; border-color:var(--rose); box-shadow:0 0 0 1px var(--rose), 0 0 26px -8px var(--rose); }

/* the store node is bigger */
.node.hub{ width:168px; padding:11px 12px 10px; }
.node.hub .ntitle{ font-size:10.5px; }

/* mini vector strip inside embed node */
.vstrip{ display:flex; gap:1px; height:11px; margin-top:6px; }
.vstrip i{ flex:1; border-radius:1px; background:#1a2431; }

/* console */
.stage-foot{ flex:0 0 auto; border-top:1px solid var(--line); background:rgba(7,10,16,.7); }
.console{
  height:104px; overflow-y:auto; padding:8px 16px;
  font:400 10.5px/1.65 var(--mono);
}
.console .line{ color:var(--ink-faint); white-space:pre-wrap; word-break:break-word; }
.console .line b{ color:var(--ink-dim); font-weight:600; margin-right:7px; }
.console .line.sys{ color:var(--ink-faint); }
.console .line.ok{ color:var(--teal); }
.console .line.warn{ color:var(--amber); }
.console .line.bad{ color:var(--rose); }
.console .line.model{ color:var(--violet); }

/* ─────────────────────────── inspector ─────────────────────────── */

.inspector{ padding:0 16px 8px; min-height:120px; }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin-bottom:12px; }
.kv dt{ font:500 10px var(--mono); color:var(--ink-faint); }
.kv dd{ margin:0; font:600 10.5px var(--mono); color:var(--ink); text-align:right; overflow:hidden; text-overflow:ellipsis; }

.sub{
  font:700 9.5px var(--sans); letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink-faint); margin:14px 0 7px;
}
.blob{
  font:400 10.5px/1.6 var(--mono); color:var(--ink-dim);
  background:var(--bg-2); border:1px solid var(--line-soft);
  border-radius:8px; padding:9px 10px; max-height:170px; overflow:auto;
  white-space:pre-wrap; word-break:break-word;
}
.blob mark{ background:rgba(255,95,126,.18); color:var(--rose); border-radius:2px; padding:0 2px; }
.blob mark.ok{ background:rgba(47,212,200,.16); color:var(--teal); }
.blob mark.ov{ background:rgba(255,179,64,.14); color:var(--amber); }

.findings{ display:flex; flex-direction:column; gap:6px; }
.finding{
  display:flex; align-items:flex-start; gap:8px;
  border:1px solid var(--line-soft); border-radius:7px; padding:7px 9px; background:var(--bg-2);
}
.finding .ftag{
  font:700 8.5px var(--mono); letter-spacing:.4px; text-transform:uppercase;
  padding:2px 5px; border-radius:4px; flex:0 0 auto;
}
.ftag.redact{ color:var(--amber); background:rgba(255,179,64,.13); }
.ftag.block{ color:var(--rose); background:rgba(255,95,126,.13); }
.ftag.pass{ color:var(--lime); background:rgba(139,212,80,.12); }
.finding .fbody{ font:400 10.5px/1.5 var(--mono); color:var(--ink-dim); min-width:0; word-break:break-word; }
.finding .fbody b{ color:var(--ink); font-weight:600; }

.chunklist{ display:flex; flex-direction:column; gap:6px; max-height:280px; overflow:auto; }
.chunkrow{
  border:1px solid var(--line-soft); border-radius:7px; padding:7px 9px;
  background:var(--bg-2); cursor:pointer; transition:.14s;
}
.chunkrow:hover{ border-color:var(--teal-dim); }
.chunkrow .ctop{ display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.chunkrow .cid{ font:700 9px var(--mono); color:var(--teal); }
.chunkrow .cmeta{ margin-left:auto; font:500 9px var(--mono); color:var(--ink-faint); }
.chunkrow .ctext{
  font:400 10px/1.5 var(--mono); color:var(--ink-faint);
  max-height:30px; overflow:hidden;
}

.heat{ display:flex; gap:1px; height:16px; margin:5px 0 9px; border-radius:3px; overflow:hidden; }
.heat i{ flex:1 1 0; min-width:0; }

.bars{ display:flex; flex-direction:column; gap:5px; }
.bars .brow{ display:flex; align-items:center; gap:8px; }
.bars .blabel{ font:600 9.5px var(--mono); color:var(--ink-dim); width:52px; flex:0 0 auto; }
.bars .btrack{ flex:1; height:7px; border-radius:4px; background:#141d28; overflow:hidden; }
.bars .btrack i{ display:block; height:100%; border-radius:4px; transition:width .45s cubic-bezier(.2,.7,.3,1); }
.bars .bval{ font:700 9.5px var(--mono); color:var(--ink); width:42px; text-align:right; flex:0 0 auto; }

/* scatter */
.scatter-wrap{ padding:0 16px 18px; position:relative; }
#scatter{
  width:100%; height:190px; display:block;
  border:1px solid var(--line-soft); border-radius:9px; background:var(--bg-2);
}
.scatter-legend{ display:flex; gap:12px; margin-top:8px; }
.sl{ display:flex; align-items:center; gap:5px; font:500 9.5px var(--mono); color:var(--ink-faint); }
.sl::before{ content:""; width:7px; height:7px; border-radius:50%; }
.sl.chunk::before{ background:var(--teal-dim); }
.sl.hit::before{ background:var(--amber); box-shadow:0 0 7px var(--amber); }
.sl.q::before{ background:var(--violet); box-shadow:0 0 7px var(--violet); }

/* stacked (narrow) graph layout — one column, taller cards */
.nodes.stackmode .node,
.nodes.stackmode .node.hub{ width:190px; }
.stage.stackmode{ scroll-behavior:smooth; }

/* inspector drawer (narrow screens only) */
.drawer-close{
  display:none; margin-left:auto; cursor:pointer;
  width:26px; height:26px; place-items:center; border-radius:7px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim);
}
.drawer-close:hover{ color:var(--ink); border-color:#2c3d52; }
.scrim{
  display:none; position:fixed; inset:0; z-index:35;
  background:rgba(3,6,10,.62); opacity:0; pointer-events:none;
  transition:opacity .24s ease;
}
/* the docked panel is always visible; only the drawer form toggles */
.panel.right{ opacity:1; visibility:visible; }

/* ── ≤1600 / ≤1400: tighten the panels but keep all three columns,
      so the inspector and the embedding-space map stay on screen ── */
@media (max-width:1600px){
  .shell{ grid-template-columns: 284px minmax(0,1fr) 306px; }
  .livestats{ gap:13px; }
}
@media (max-width:1400px){
  .shell{ grid-template-columns: 250px minmax(0,1fr) 280px; }
  .livestats{ gap:11px; }
  #scatter{ height:168px; }
}
@media (max-width:1300px){
  .shell{ grid-template-columns: 232px minmax(0,1fr) 256px; }
  .connector-grid{ gap:6px; }
}

/* ── ≤1250: no room for a third column — the inspector becomes a
      drawer that fades and slides in over the right edge ───────── */
@media (max-width:1250px){
  .shell{ grid-template-columns: 262px minmax(0,1fr); }
  .brand-text em{ display:none; }

  .panel.right{
    position:fixed; top:58px; right:0; bottom:0; z-index:40;
    width:min(370px, 92vw);
    border-left:1px solid var(--line);
    opacity:0; visibility:hidden;
    transform:translateX(24px);
    transition:transform .26s cubic-bezier(.2,.7,.3,1),
               opacity .22s ease, visibility 0s linear .26s;
    box-shadow:-24px 0 60px -28px #000;
  }
  .panel.right.open{
    opacity:1; visibility:visible; transform:none;
    transition:transform .26s cubic-bezier(.2,.7,.3,1),
               opacity .22s ease, visibility 0s;
  }
  .drawer-close{ display:grid; }
  .scrim{ display:block; }
  .scrim.on{ opacity:1; pointer-events:auto; }
}

/* ── ≤900: compact chrome ─────────────────────────────── */
@media (max-width:900px){
  .topbar{
    height:auto; min-height:54px; padding:7px 12px;
    flex-wrap:wrap; gap:10px 14px;
  }
  .topctl{ gap:9px; }
  .speed{ display:none; }
  .lane-legend{ display:none; }
  .livestats{ margin-left:0; }
  .stage-head{ padding:8px 12px; overflow-x:auto; }
  .console{ height:86px; }
}

/* ── ≤760: single column, page-shell stacks ───────────── */
@media (max-width:760px){
  .shell{ display:flex; flex-direction:column; }

  .panel.left{
    flex:0 0 auto; max-height:44vh;
    border-right:0; border-bottom:1px solid var(--line);
  }
  .stage-wrap{ flex:1 1 auto; min-height:260px; }
  .panel.right{ top:0; width:min(370px, 96vw); }

  .connector-grid{ grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); }
  .livestats{ gap:14px; }
  .livestats > div:nth-child(n+5){ display:none; }
  .console{ height:74px; padding:7px 12px; }

  .pane-head, .empty, .inspector, .answer, .ask,
  .suggest, .ctxwin, .scatter-wrap, .settings,
  .connector-grid, .connector-config, .run-row{ padding-left:13px; padding-right:13px; }

  .btn{ padding:7px 12px; }
  .brand-text strong{ font-size:14px; }
}

/* ── ≤430: phone ──────────────────────────────────────── */
@media (max-width:430px){
  .topbar{ gap:8px 10px; }
  .brand-text{ display:none; }
  .modes{ flex:1 1 auto; }
  .mode{ flex:1 1 0; justify-content:center; padding:6px 10px; }
  .topctl{ width:100%; }
  .topctl .btn{ flex:1 1 0; }
  .panel.left{ max-height:48vh; }
  .livestats > div:nth-child(n+4){ display:none; }
  .answer .text{ font-size:12.5px; }
}

/* ── short viewports (landscape phones) ───────────────── */
@media (max-height:560px) and (max-width:1150px){
  .panel.left{ max-height:56vh; }
  .console{ height:58px; }
}

/* ── short landscape (phones on their side): stacking vertically would
      leave almost no stage, so keep the panel beside the graph ────── */
@media (max-width:760px) and (max-height:520px){
  .shell{ display:grid; grid-template-columns: 236px minmax(0,1fr); }
  .panel.left{
    max-height:none; border-right:1px solid var(--line); border-bottom:0;
  }
  .console{ height:50px; }
  .stage-head{ padding:5px 12px; }
  .livestats > div:nth-child(n+4){ display:none; }
}

/* users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .stage.stackmode{ scroll-behavior:auto; }
}