/* Minimal, modern dark theme — keyboard-first */
:root {
  --bg: #0b0f15;
  --panel: #111722;
  --panel-2: #0e141e;
  --text: #d9e1ee;
  --muted: #8c98b3;
  --border: #253044;
  --accent: #79a8ff;
  --accent-2: #8ad6ff;
  --danger: #ff6b81;
  --success: #7bd88f;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, sans-serif;
}

.topbar {
  height: 56px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 12px;
  background: #0a101a;
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.2px;}
.logo { display:inline-flex; width:20px; height:20px; border:1px solid var(--border); border-radius:3px; align-items:center; justify-content:center; color:var(--accent); }
.title { opacity:.95; }
.beta { font-size:12px; color:var(--muted); padding:4px 8px; border:1px solid var(--border); border-radius:999px; }

.actions { display:flex; align-items:center; gap:8px; }
button { border:0; border-radius:8px; padding:8px 12px; cursor:pointer; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
button.ghost:hover { border-color:#3a4862; }
button.primary { background: linear-gradient(180deg, #3a66ff, #1742f3); color:white; box-shadow: var(--shadow); }
button.primary:hover { filter: brightness(1.05); }
.icon { opacity:.7; margin-right:6px; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace; font-size:12px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:2px 6px; }

.layout { display:grid; grid-template-columns: 280px 1fr 380px; grid-template-rows: calc(100vh - 56px); height: calc(100vh - 56px); }

.sidebar, .canvas, .context { border-right:1px solid var(--border); }
.context { border-right:0; border-left:1px solid var(--border); }

.sidebar, .context { background: var(--panel); padding:12px; overflow:auto; }
.canvas { background: var(--panel-2); padding:12px; overflow:auto; position:relative; }

.panel-header { display:flex; align-items:center; justify-content:space-between; color:#cbd6e9; font-weight:600; margin-bottom:8px; }

.tree { border:1px solid var(--border); border-radius:10px; overflow:auto; background:#0e1520; max-height:42vh; }
.tree .node { padding:6px 10px; display:flex; align-items:center; gap:8px; border-bottom:1px dashed #1d2636; }
.tree .node:last-child { border-bottom:0; }
.node .chev { width:14px; display:inline-block; text-align:center; color:#6f7d95; }
.node .name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node .tag { font-size:11px; color:#9bb4d1; border:1px solid #2a3750; border-radius:999px; padding:2px 6px; }

.outline { border:1px solid var(--border); border-radius:10px; overflow:auto; background:#0e1520; max-height:32vh; }
.outline .sym { padding:6px 10px; border-bottom:1px dashed #1d2636; display:flex; gap:8px; }
.outline .sym:last-child { border-bottom:0; }
.outline .sym .kind { width:92px; color:#8aa4c8; }
.outline .sym .loc { color:#9fb2cf; }
.outline .sym:hover { background:#0f1b2e; cursor:pointer; }

.canvas-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; position:sticky; top:0; background:var(--panel-2); z-index:1; padding-bottom:8px; }
.canvas-toolbar .seps { width:1px; height:28px; background:var(--border); }
.canvas-toolbar .hint .chip { border:1px solid var(--border); border-radius:999px; padding:2px 8px; color:var(--muted); margin-right:4px; font-size:12px; }

.doc {
  background:#0d1420;
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  min-height:60vh;
  outline:none;
}
.doc:focus { border-color:#2a3a55; box-shadow: inset 0 0 0 1px #2a3a55; }
.doc h1, .doc h2 { margin: 0.4em 0; }
.doc p { margin: 0.7em 0; color:#d6deeb; }
.doc .citation { color:#8ad6ff; background:#0b1a26; border:1px solid #1f3b54; border-radius:4px; padding:1px 4px; cursor:pointer; }
.doc table { width:100%; border-collapse: collapse; margin: 12px 0; }
.doc th, .doc td { border:1px solid #2a384f; padding:6px 8px; text-align:right; }
.doc th:first-child, .doc td:first-child { text-align:left; }
.doc .added { background: rgba(56, 180, 112, .2); text-decoration: none; }
.doc .deleted { background: rgba(255, 107, 129, .18); text-decoration: line-through; }

.context-content { border:1px solid var(--border); border-radius:12px; padding:10px; background:#0f1623; min-height:120px;}
.context-content .row { display:flex; gap:8px; padding:6px 4px; border-bottom:1px dashed #1d2636; }
.context-content .row:last-child { border-bottom:0; }
.context-content .key { color:#8aa4c8; width:120px; }
.context-content .val { color:#d5deef; flex:1; }

.chat { border:1px solid var(--border); border-radius:12px; min-height:180px; padding:12px; background:#0f1623; overflow:auto; }
.chat .msg { margin-bottom:10px; }
.chat .msg .role { font-weight:600; color:#9bb4d1; }
.chat .msg .bubble { background:#0e1520; border:1px solid #233147; border-radius:10px; padding:8px 10px; margin-top:4px; }
.chat .msg .cite { color:#8ad6ff; cursor:pointer; }
.chat-input-row { display:flex; gap:8px; margin-top:8px;}
.chat-input-row input { flex:1; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#0d1420; color:var(--text); outline:none; }
.chat-input-row input:focus { border-color:#2a3a55; }
.chat-hints { margin-top:6px; color:var(--muted); }
.chip { border:1px solid var(--border); border-radius:999px; padding:2px 8px; margin-right:4px; }

.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.5); }
.modal[aria-hidden="false"] { display:flex; }
.modal-card { width: 720px; background:#0d1420; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); }
.palette-input { width:100%; padding:14px 16px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); outline:none; font-size:16px; }
.palette-results { max-height:420px; overflow:auto; }
.palette-results .item { padding:10px 12px; border-bottom:1px dashed #20304a; display:flex; gap:8px; }
.palette-results .item .meta { color:#9bb4d1; font-size:12px; }
.palette-results .item.active { background:#0f1b2e; }

.peek-card { width: 900px; background:#0d1420; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); overflow:hidden; }
.peek-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.peek-title { color:#a9b4c2; font-weight:600; }
.peek-body { padding:0; background:#0b0f15; }
.peek-body img, .peek-body iframe { width:100%; height:auto; display:block; }

.ingest-card { width: 780px; background:#0d1420; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); }
.ingest-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.progress { height:10px; background:#0e1520; border-top:1px solid #172033; border-bottom:1px solid #172033; }
.progress .bar { height:10px; background: linear-gradient(90deg, #3a66ff, #2ab0ff); transition: width .3s ease; }
.ingest-log { max-height:280px; overflow:auto; padding:10px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color:#c7d2e8; }
.ingest-log .ok { color:#86dfa1; }
.ingest-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-top:1px solid var(--border); }
.muted { color: var(--muted); }

select { background:#0e1520; color:var(--text); border:1px solid var(--border); padding:6px 10px; border-radius:8px; }

/* Light mode (toggle) */
.light {
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-2: #f8fbff;
  --text: #0e1624;
  --muted: #4e5b70;
  --border: #d7dfeb;
  --accent: #1742f3;
  --accent-2: #2ab0ff;
  --shadow: 0 6px 24px rgba(0,0,0,.12);
}