:root {
  --bg: #07080c;
  --bg2: #0d0f16;
  --panel: #11131c;
  --line: #1e2230;
  --ink: #e6e8f0;
  --dim: #7e8499;
  --accent: #8b7cff;
  --accent2: #4be3c0;
  --warn: #ffb454;
  --bad: #ff6b8b;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 600px at 80% -10%, #15101f 0%, var(--bg) 55%);
  color: var(--ink);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  background: rgba(13,15,22,.7); backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 9px; }
.logo { color: var(--accent); font-size: 18px; text-shadow: 0 0 14px var(--accent); }
.title { font-weight: 700; letter-spacing: .14em; }
.tag { font-size: 10px; letter-spacing: .2em; color: var(--accent2); border: 1px solid var(--accent2); border-radius: 4px; padding: 1px 5px; }
.badges { display: flex; gap: 8px; }
.badge { font: 11px var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; background: var(--bg2); }
#b-conn.on { color: var(--accent2); border-color: var(--accent2); }

.grid { flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 380px; min-height: 0; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } .mind { display: none; } }

/* Chat */
.chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.transcript { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 76%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, #2a2350, #1c1838); border: 1px solid #332c5c; }
.msg.ai { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.msg.ai.streaming::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.empty { color: var(--dim); margin: auto; text-align: center; }

.composer { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.composer textarea { flex: 1; resize: none; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; max-height: 140px; }
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer button { background: var(--accent); color: #0a0a12; border: 0; border-radius: 10px; padding: 0 18px; font-weight: 700; cursor: pointer; }
.composer button:disabled { opacity: .5; cursor: default; }

.controls { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 8px 16px 14px; border-top: 1px solid var(--line); align-items: center; }
.controls label { font-size: 12px; color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
.controls input[type=text], .controls input:not([type]), .controls select { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; font: 12px var(--mono); }
.controls input:not([type]) { width: 96px; }
.controls .chk { gap: 4px; }
.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.ghost:hover { color: var(--ink); border-color: var(--accent); }

/* Mind */
.mind { overflow-y: auto; padding: 16px 16px 40px; background: var(--bg); }
.mind h2 { font-size: 12px; letter-spacing: .2em; color: var(--dim); margin: 4px 2px 12px; display: flex; gap: 8px; align-items: baseline; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.phead { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; display: flex; justify-content: space-between; }

/* trace bars */
.trace { display: flex; flex-direction: column; gap: 6px; }
.trow { display: grid; grid-template-columns: 76px 1fr 42px; align-items: center; gap: 8px; font: 11px var(--mono); }
.trow .tname { color: var(--ink); }
.trow .tbar { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.trow .tbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.trow .tms { text-align: right; color: var(--dim); }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.chip { font: 11px var(--mono); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.bad { color: var(--bad); border-color: var(--bad); }
.chip.ok { color: var(--accent2); border-color: var(--accent2); }

.assertions { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.assertion { font: 11px var(--mono); display: flex; gap: 6px; }
.assertion .st { font-weight: 700; }
.assertion .KNOWN { color: var(--accent2); }
.assertion .INFERRED { color: var(--warn); }
.assertion .UNKNOWN { color: var(--bad); }

.pill { font: 10px var(--mono); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; }
.pill.rich { color: var(--accent2); border: 1px solid var(--accent2); }
.pill.thin { color: var(--warn); border: 1px solid var(--warn); }
.pill.empty { color: var(--bad); border: 1px solid var(--bad); }

.recall { display: flex; flex-direction: column; gap: 8px; }
.ritem { border-left: 2px solid var(--accent); padding: 2px 0 2px 9px; }
.ritem .rmeta { font: 10px var(--mono); color: var(--dim); }
.ritem .rcontent { font-size: 12px; }
.ritem.link { border-left-color: var(--accent2); }

.meter { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--dim); }
.meter i { display: block; height: 7px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.meter u { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--bad)); width: 0; }