:root {
  --bg: #0b0d12;
  --bg2: #0e1118;
  --panel: #12161f;
  --panel2: #161b26;
  --border: #222a3a;
  --border-soft: #1a2130;
  --text: #e9ecf3;
  --muted: #98a1b3;
  --faint: #5d6678;
  --accent: #5b8cff;
  --accent-soft: rgba(91, 140, 255, .14);
  --accent2: #8b5cf6;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button { font-family: inherit; }
#app { display: flex; height: 100dvh; overflow: hidden; }

/* ---------- Sidebar ---------- */
#sidebar {
  width: 284px; flex: 0 0 284px; background: var(--bg2);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; z-index: 40;
}
.side-top { padding: 16px 14px 10px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-mark svg path { stroke: url(#g); }
.brand-mark { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 8px; padding: 5px; display: inline-flex; }
.brand-mark svg path { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark svg path:first-child { fill: rgba(255,255,255,.25); }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 14px; font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.side-label { padding: 8px 18px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
#convo-list { flex: 1; overflow-y: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.convo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer;
}
.convo:hover { background: var(--panel); }
.convo.active { background: var(--panel2); }
.convo .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo .del {
  opacity: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: 6px; font-size: 14px; line-height: 1;
}
.convo:hover .del { opacity: 1; }
.convo .del:hover { color: var(--red); background: rgba(248,113,113,.1); }
.convo-empty { color: var(--faint); font-size: 13px; padding: 12px; text-align: center; }
.side-foot { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border-soft); }
.btn-ghost {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 13.5px; cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border); background: var(--panel); }

/* ---------- Main ---------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
#chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
  padding-top: calc(10px + env(safe-area-inset-top));
}
.icon-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 8px; border-radius: 9px; display: inline-flex; align-items: center;
}
.icon-btn:hover { color: var(--text); background: var(--panel); }
#menu-btn { display: none; }
.header-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#chat-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backend-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-soft); background: var(--panel);
  color: var(--muted); border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.backend-pill:hover { border-color: var(--border); color: var(--text); }
.backend-pill .muted { color: var(--faint); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,.7); }
.dot.warn { background: var(--amber); }
.dot.idle { background: var(--faint); }
.header-actions { display: flex; gap: 2px; }

#messages { flex: 1; overflow-y: auto; padding: 20px 0 8px; scroll-behavior: smooth; }
.msg { display: flex; gap: 12px; padding: 10px 20px; max-width: 860px; margin: 0 auto; }
.msg .avatar {
  flex: none; width: 30px; height: 30px; border-radius: 9px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.msg.user { flex-direction: row-reverse; }
.msg.user .avatar { background: var(--panel2); border: 1px solid var(--border); color: var(--muted); }
.msg .body { min-width: 0; max-width: 100%; flex: 1; }
.msg.user .body { display: flex; justify-content: flex-end; }
.msg .bubble {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 10px 14px; overflow-wrap: anywhere;
}
.msg.user .bubble { background: var(--accent-soft); border-color: rgba(91,140,255,.3); max-width: 82%; }
.msg .meta { font-size: 11px; color: var(--faint); margin-top: 5px; display: flex; gap: 8px; align-items: center; }
.msg .meta button { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 5px; }
.msg .meta button:hover { color: var(--text); background: var(--panel); }

/* markdown */
.md > *:first-child { margin-top: 0; } .md > *:last-child { margin-bottom: 0; }
.md p { margin: 8px 0; } .md p:first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 16px 0 8px; line-height: 1.3; }
.md h1 { font-size: 1.35em; } .md h2 { font-size: 1.2em; } .md h3 { font-size: 1.08em; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 4px 0; } .md li::marker { color: var(--faint); }
.md blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--muted); }
.md a { color: var(--accent); }
.md code { font-family: var(--mono); font-size: .86em; background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 6px; }
.md pre { background: #07090d; border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 10px 0; position: relative; }
.md pre code { background: none; padding: 0; font-size: 12.8px; line-height: 1.6; }
.code-head { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 8px; }
.code-lang { font-size: 11px; color: var(--faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.code-copy { border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }
.code-copy:hover { color: var(--text); }
.md table { border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.md th, .md td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; }
.md th { background: var(--panel); }
.md hr { border: 0; border-top: 1px solid var(--border-soft); margin: 14px 0; }
.md .err { color: var(--red); }

/* empty state */
#empty-state { max-width: 640px; margin: 0 auto; padding: 8vh 24px 0; text-align: center; }
#empty-state.hidden { display: none; }
.empty-mark { display: inline-flex; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 18px; padding: 14px; margin-bottom: 18px; }
.empty-mark svg { width: 40px; height: 40px; }
.empty-mark svg path { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.empty-mark svg path:first-child { fill: rgba(255,255,255,.25); }
#empty-state h1 { font-size: 26px; margin: 0 0 10px; letter-spacing: -.01em; }
#empty-state p { color: var(--muted); margin: 0 0 22px; }
.linklike { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: inherit; padding: 0; }
.linklike:hover { text-decoration: underline; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; text-align: left; }
.quick-card {
  border: 1px solid var(--border-soft); background: var(--panel); border-radius: 12px;
  padding: 12px 13px; cursor: pointer; color: var(--text); text-align: left;
}
.quick-card:hover { border-color: var(--accent); }
.quick-card b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.quick-card span { font-size: 12px; color: var(--muted); line-height: 1.45; display: block; }
.quick-card.disabled { opacity: .55; cursor: not-allowed; }

/* composer */
#composer-zone { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); max-width: 860px; width: 100%; margin: 0 auto; }
#typing-indicator { display: flex; gap: 5px; padding: 0 6px 8px; }
#typing-indicator[hidden] { display: none; }
#typing-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite; }
#typing-indicator span:nth-child(2) { animation-delay: .2s; } #typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
#composer {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 22px;
  padding: 10px 10px 10px 18px;
}
#composer:focus-within { border-color: var(--accent); }
#input {
  flex: 1; border: 0; background: none; color: var(--text); resize: none;
  font-family: inherit; font-size: 15px; line-height: 1.5; max-height: 160px; padding: 6px 0;
}
#input:focus { outline: none; }
#input::placeholder { color: var(--faint); }
.send-btn {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.send-btn:hover { filter: brightness(1.1); }
.send-btn:disabled { opacity: .4; cursor: default; }
.send-btn.stop { background: var(--panel2); border: 1px solid var(--border); color: var(--text); }
#composer-hint { text-align: center; font-size: 11.5px; color: var(--faint); margin-top: 8px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(4,6,10,.7); backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal[hidden] { display: none; }
.modal-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 620px; max-height: 88dvh; overflow-y: auto; padding: 22px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.backend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.backend-card {
  border: 1px solid var(--border-soft); background: var(--panel); border-radius: 12px;
  padding: 12px; cursor: pointer; text-align: left; color: var(--text); position: relative;
}
.backend-card:hover { border-color: var(--border); }
.backend-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.backend-card b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.backend-card span { font-size: 11.5px; color: var(--muted); line-height: 1.4; display: block; }
.backend-card .tag {
  position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 2px 7px; border-radius: 99px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
}
.backend-card .tag.no { color: var(--amber); border-color: rgba(251,191,36,.4); }
#backend-config { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.cfg-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.cfg-note { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.cfg-note code { font-family: var(--mono); font-size: 11.5px; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 5px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); padding: 9px 11px; font-size: 13.5px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field .fhint { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.modal-actions { display: flex; gap: 8px; margin-left: auto; }
.modal-actions .btn-primary { width: auto; padding: 9px 20px; }
.modal-actions .btn-ghost { width: auto; padding: 9px 14px; }
.test-result { font-size: 12.5px; }
.test-result.ok { color: var(--green); } .test-result.bad { color: var(--red); } .test-result.busy { color: var(--amber); }

#scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }
#scrim[hidden] { display: none; }

@media (max-width: 760px) {
  #sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 8px 0 30px rgba(0,0,0,.4); }
  body.side-open #sidebar { transform: none; }
  #menu-btn { display: inline-flex; }
  .msg { padding: 8px 14px; }
  #empty-state { padding-top: 5vh; }
  .backend-pill .muted { display: none; }
}

/* ---------- Plugins ---------- */
.settings-tabs { display: flex; gap: 6px; margin: 14px 0 16px; border-bottom: 1px solid var(--border-soft); padding-bottom: 0; }
.stab {
  border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600;
  padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.stab:hover { color: var(--text); }
.stab.active { color: var(--text); border-bottom-color: var(--accent); }
.settings-pane[hidden] { display: none; }
#plugin-list { display: flex; flex-direction: column; gap: 8px; }
.plugin-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border-soft); background: var(--panel);
  border-radius: 12px; padding: 12px 14px;
}
.plugin-info { flex: 1; min-width: 0; }
.plugin-info b { display: block; font-size: 13.5px; }
.plugin-info span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.plugin-info em { display: block; font-style: normal; font-size: 11px; color: var(--faint); margin-top: 3px; }
.switch { position: relative; flex: none; width: 42px; height: 24px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border); transition: .2s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  left: 3px; top: 50%; transform: translateY(-50%); background: var(--muted); transition: .2s;
}
.switch input:checked + .slider { background: var(--accent-soft); border-color: var(--accent); }
.switch input:checked + .slider::before { left: 21px; background: var(--accent); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; z-index: 200;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  max-width: min(90vw, 480px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.warn { border-color: rgba(251,191,36,.5); }
.toast.error { border-color: rgba(248,113,113,.5); }

/* composer extras (plugin buttons) */
#composer-extras { display: flex; align-items: center; gap: 2px; }
.composer-btn {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 8px; border-radius: 9px; display: inline-flex; align-items: center;
}
.composer-btn:hover { color: var(--text); background: var(--panel2); }
.composer-btn.active { color: var(--red); }

/* message actions (plugin) */
.msg-actions { display: inline-flex; gap: 2px; margin-left: 4px; }
.msg-actions button {
  border: 0; background: none; color: var(--faint); cursor: pointer;
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
}
.msg-actions button:hover { color: var(--text); background: var(--panel); }

/* slash-command popup */
#composer-zone { position: relative; }
.slash-popup {
  position: absolute; left: 16px; right: 16px; bottom: calc(100% - 4px);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; z-index: 50; box-shadow: 0 12px 32px rgba(0,0,0,.5);
  max-width: 860px; margin: 0 auto;
}
.slash-popup button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--text); padding: 9px 14px; cursor: pointer;
}
.slash-popup button:hover { background: var(--accent-soft); }
.slash-popup b { font-size: 13px; color: var(--accent); font-family: var(--mono); }
.slash-popup span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* prompt editor rows */
.prompt-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start; }
.prompt-row .p-name {
  flex: 0 0 110px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px; font-family: var(--mono);
}
.prompt-row .p-text {
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical;
}
.prompt-row .p-del { flex: none; font-size: 18px; }
.tok { color: var(--faint); }

/* ---------- Orb avatar ---------- */
.orb {
  --orb-hue: 265; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 35% 30%, hsla(var(--orb-hue), 95%, 78%, .95), transparent 52%),
    radial-gradient(circle at 68% 68%, hsla(calc(var(--orb-hue) + 45), 90%, 62%, .85), transparent 58%),
    radial-gradient(circle at 50% 50%, hsl(var(--orb-hue), 75%, 48%), hsl(calc(var(--orb-hue) + 60), 80%, 32%));
  box-shadow: 0 0 22px hsla(var(--orb-hue), 90%, 62%, .35), inset 0 0 12px rgba(255,255,255,.15);
  animation: orb-float 6s ease-in-out infinite;
}
.orb-sm { width: 30px; height: 30px; }
.orb-lg { width: 96px; height: 96px; margin: 6px auto 18px; }
.orb.working { animation: orb-work 1.1s ease-in-out infinite; }
@keyframes orb-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.03); } }
@keyframes orb-work { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* header assistant */
.header-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.assistant-status { font-size: 11px; color: var(--muted); }
.assistant-status[hidden] { display: none; }

/* hue swatches */
.hue-row { display: flex; gap: 10px; margin-top: 10px; }
.hue-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, hsla(var(--orb-hue), 95%, 78%, .95), transparent 55%), hsl(var(--orb-hue), 75%, 48%);
}
.hue-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Onboarding ---------- */
.onboard {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.onboard[hidden] { display: none; }
.onboard-card { width: 100%; max-width: 520px; text-align: center; position: relative; padding: 24px 8px; }
.onboard-skip { position: absolute; top: 0; right: 0; border: 0; background: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 8px; }
.onboard-skip:hover { color: var(--text); }
#onboard-step { min-height: 230px; }
#onboard-step h1 { font-size: 30px; margin: 0 0 12px; letter-spacing: -.02em; }
.onboard-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.onboard-sub b { color: var(--text); }
.onboard-input {
  width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); padding: 13px 16px; font-size: 16px; text-align: center; font-family: inherit;
}
.onboard-input:focus { outline: none; border-color: var(--accent); }
.onboard-card .hue-row { justify-content: center; margin-top: 18px; }
.onboard-backends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.onboard-nav { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.onboard-nav .btn-ghost { width: auto; padding: 10px 22px; }
.onboard-nav .btn-primary { width: auto; padding: 10px 30px; }

/* ---------- Config import ---------- */
.import-box { border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--panel); }
.import-head b { display: block; font-size: 13.5px; }
.import-head span { font-size: 12px; color: var(--muted); }
.import-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.import-btns .btn-ghost { width: auto; padding: 8px 12px; font-size: 12.5px; flex-direction: column; align-items: flex-start; gap: 1px; }
.import-btns em { font-style: normal; color: var(--faint); font-size: 10.5px; font-family: var(--mono); }

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg: #f4f5f7; --bg2: #ffffff; --panel: #ffffff; --panel2: #edf0f5;
  --border: #dfe3ea; --border-soft: #e9edf3;
  --text: #14171d; --muted: #5b6474; --faint: #9aa1b0;
  --accent-soft: rgba(91,140,255,.12);
}
[data-theme="light"] .msg .bubble { box-shadow: 0 1px 2px rgba(20,23,29,.06); }
[data-theme="light"] .md pre { background: #f6f7f9; }
[data-theme="light"] .md code { background: rgba(20,23,29,.07); }
[data-theme="light"] .modal { background: rgba(20,23,29,.45); }

/* ---------- Capability tags ---------- */
.caps-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.caps-row[hidden] { display: none; }
.cap-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 20px;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
  font-family: var(--mono);
}
.cap-tag.live { color: var(--accent); border-color: var(--accent); }

/* ---------- Accent swatches ---------- */
.accent-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
  background: linear-gradient(135deg, var(--sa), var(--sb));
}
.accent-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Media embeds ---------- */
.md-img { max-width: 100%; border-radius: 10px; margin: 6px 0; display: block; }
.md-audio { width: 100%; margin: 8px 0; display: block; }
.md-video { max-width: 100%; border-radius: 10px; margin: 6px 0; display: block; background: #000; }

/* Nirvana landing, private device pairing */
#empty-state{max-width:740px;margin:auto;padding:clamp(20px,6vw,55px) 24px;text-align:center}
#empty-state h1{font-size:clamp(35px,5vw,62px);line-height:1.12;letter-spacing:-.045em;margin:16px 0}
#empty-state p{max-width:610px;margin:0 auto 22px;color:var(--muted);font-size:clamp(14px,2vw,17px);line-height:1.7}
.nirvana-eyebrow{font-size:11px;font-weight:750;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.landing-gradient{background:linear-gradient(105deg,#81caff,#ae8fff,#f1b2e5);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:15px;margin:20px auto 27px}
.landing-actions .btn-primary{padding:12px 22px;border-radius:12px}
.landing-actions span{color:var(--muted);font-size:12px}
.nirvana-pair-modal{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:18px;max-width:min(510px,calc(100vw - 20px));width:100%;padding:0;box-shadow:0 30px 80px #0009}
.nirvana-pair-modal::backdrop{background:#000a;backdrop-filter:blur(5px)}
.nirvana-pair-card{padding:clamp(16px,4vw,28px);display:grid;gap:14px}
.nirvana-pair-card h2{margin:0;font-size:23px}
.nirvana-pair-card p{margin:0;color:var(--muted);font-size:13px}
.nirvana-pair-card label{display:grid;gap:6px;font-size:12px;font-weight:650}
.nirvana-pair-card input,.nirvana-pair-card textarea{width:100%;border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:9px;padding:10px;font:inherit}
.nirvana-pair-card textarea{font:12px var(--mono);resize:vertical}
.np-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.np-actions button{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 13px;cursor:pointer}
@media(max-width:600px){#empty-state{padding:22px 18px}#empty-state h1{font-size:35px}.nirvana-eyebrow{font-size:9px}}

/* First-run avatar studio: visual choices over configuration forms */
.ob-avatar-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:17px 0}
.ob-avatar-choice{display:grid;justify-items:center;gap:6px;padding:10px 5px;border:1px solid var(--border);border-radius:16px;background:var(--panel2);color:var(--text);cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.ob-avatar-choice:hover{transform:translateY(-3px);border-color:var(--accent)}
.ob-avatar-choice.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ob-avatar-choice span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:31px;background:radial-gradient(circle at 35% 30%,rgba(137,181,255,.55),rgba(110,71,213,.3) 55%,rgba(10,16,28,.8));box-shadow:inset 0 0 15px #ffffff2a,0 4px 26px #7f54e42b;animation:avatarFloat 4s ease-in-out infinite alternate}
.ob-avatar-choice small{font-size:12px;color:var(--muted)}
.ob-avatar-upload{display:block;margin:12px auto 20px;padding:10px 12px;border:1px dashed var(--border);border-radius:12px;font-size:13px;color:var(--muted)}
.ob-avatar-upload input{display:block;width:100%;margin-top:6px;font-size:12px}
#onboard-step select{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px;margin:8px 0}
#onboard-orb{background-size:cover;background-position:center;display:grid;place-items:center;font-size:42px;text-shadow:0 0 18px #ffffff88;animation:avatarFloat 4s ease-in-out infinite alternate}
#header-orb{background-size:cover;background-position:center;display:grid;place-items:center;font-size:13px}
#header-orb.avatar-custom{font-size:0}
@keyframes avatarFloat{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.ob-avatar-choice span,#onboard-orb{animation:none}.ob-avatar-choice{transition:none}}
@media(max-width:420px){.ob-avatar-choices{gap:6px}.ob-avatar-choice span{width:45px;height:45px;font-size:24px}}

/* A tiny interactive world on the home canvas, not a wall of setup controls. */
.nirvana-world{position:relative;isolation:isolate;display:grid;place-items:center;min-height:235px;margin:-24px auto 12px;max-width:700px;overflow:hidden;border-radius:26px;background:radial-gradient(ellipse at 50% 60%,rgba(100,91,240,.13),transparent 65%)}
.world-grid{position:absolute;z-index:-1;inset:25% 3% 0;opacity:.4;background-image:linear-gradient(rgba(140,160,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(140,160,255,.08) 1px,transparent 1px);background-size:28px 28px;transform:perspective(250px) rotateX(55deg);mask-image:linear-gradient(transparent,#000 50%,transparent)}
.world-avatar{appearance:none;border:0;display:grid;place-items:center;width:150px;height:150px;border-radius:50%;font-size:78px;color:#fff;cursor:pointer;text-shadow:0 0 30px #b5b7ff;background:radial-gradient(circle at 30% 28%,#aecfff95,#7457ff90 48%,#241b5bea 85%);background-position:center;background-size:cover;box-shadow:0 0 65px #6f6aff44,inset 0 0 28px #dbe8ff55;animation:avatarFloat 4s ease-in-out infinite alternate;transition:box-shadow .2s}
.world-avatar:hover,.world-avatar:focus-visible{box-shadow:0 0 90px #8b89ff99,inset 0 0 40px #dbe8ff80;outline:2px solid #a0baff}
.world-status{position:absolute;bottom:12px;font-size:10px;color:var(--muted);letter-spacing:.16em;display:flex;gap:8px;align-items:center}
.world-pulse{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.world-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0 27px}
.world-action{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:999px;padding:10px 19px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.world-action:hover{background:var(--accent-soft);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.world-avatar{animation:none}.world-action{transition:none}}
@media(max-width:600px){.nirvana-world{min-height:185px;margin:0 auto 10px}.world-avatar{width:115px;height:115px;font-size:60px}}

/* Activity-responsive world: no heavyweight renderer or remote dependency. */
.nirvana-world[data-activity="listening"] .world-avatar,
#header-orb[data-activity="listening"]{animation:worldListen 1.2s ease-in-out infinite;box-shadow:0 0 68px #37d7df99,inset 0 0 35px #b8ffff55}
.nirvana-world[data-activity="thinking"] .world-avatar,
#header-orb[data-activity="thinking"]{animation:worldThink 3s linear infinite;box-shadow:0 0 72px #ab86ff88,inset 0 0 35px #d5c6ff66}
.nirvana-world[data-activity="speaking"] .world-avatar,
#header-orb[data-activity="speaking"]{animation:worldSpeak .75s ease-in-out infinite;box-shadow:0 0 85px #74afffaa,inset 0 0 30px #ffffff66}
.nirvana-world[data-activity="creating"] .world-avatar{animation:worldThink 2s linear infinite;filter:hue-rotate(50deg)}
@keyframes worldListen{50%{transform:scale(1.07)}}
@keyframes worldThink{50%{filter:hue-rotate(25deg);transform:translateY(-5px)}}
@keyframes worldSpeak{50%{transform:scale(1.095)}}
@media(prefers-reduced-motion:reduce){.nirvana-world[data-activity] .world-avatar,#header-orb[data-activity]{animation:none}}

/* Media outputs become visual objects in the agent world */
.nirvana-world:has(.world-media){min-height:355px;align-content:start;padding-top:18px}
.world-media{display:flex;gap:12px;overflow-x:auto;align-items:center;max-width:100%;width:100%;padding:12px 15px 32px;scroll-snap-type:x mandatory}
.world-media-card{flex:0 0 min(220px,65vw);display:grid;gap:7px;scroll-snap-align:center;background:var(--panel2);border:1px solid var(--border);padding:9px;border-radius:18px;box-shadow:0 10px 35px #0003}
.world-media-card img,.world-media-card video{width:100%;max-height:180px;object-fit:contain;border-radius:12px;background:#090c14}
.world-media-card a{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.nirvana-world:has(.world-media) .world-avatar{width:92px;height:92px;font-size:45px}
@media(prefers-reduced-motion:reduce){.world-media{scroll-behavior:auto}}

/* Progressive GPU scene coexists with the familiar avatar control and media stage */
.nirvana-world .world-gpu{position:absolute;left:50%;top:50%;width:min(320px,92%);height:auto;transform:translate(-50%,-57%);pointer-events:none;z-index:0;filter:drop-shadow(0 0 24px #817bff55)}
.nirvana-world[data-renderer] .world-avatar{position:relative;z-index:2;background:transparent;box-shadow:none;color:transparent;text-shadow:none}
.nirvana-world[data-renderer] .world-avatar:hover,.nirvana-world[data-renderer] .world-avatar:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
.nirvana-world .world-grid{z-index:-1}
.nirvana-world .world-media,.nirvana-world .world-status{position:relative;z-index:3}
@media(prefers-reduced-motion:reduce){.nirvana-world .world-gpu{display:none}.nirvana-world[data-renderer] .world-avatar{color:inherit;background:radial-gradient(circle at 30% 28%,#aecfff95,#7457ff90 48%,#241b5bea 85%)}}

/* Small native task workspace, progressively disclosed from the canvas */
.task-board-panel{position:fixed;z-index:120;inset:8vh max(16px,8vw);max-height:84vh;overflow:auto;border-radius:22px;background:var(--bg,#11121b);color:var(--text,#fff);border:1px solid var(--border,#444);padding:22px;box-shadow:0 25px 95px #0009}
.task-board-panel[hidden]{display:none}
.task-board-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.task-board-header button,.task-card button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:18px}
.task-board-form{display:flex;gap:8px;margin-bottom:20px}
.task-board-form input{flex:1;min-width:0;background:var(--panel2,#20202c);border:1px solid var(--border,#444);border-radius:9px;padding:11px;color:inherit}
.task-board-form button{border:0;border-radius:9px;background:var(--accent,#827aff);padding:9px 17px;color:#fff;cursor:pointer}
.task-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.task-column{background:var(--panel2,#20202c);padding:12px;border-radius:13px;min-height:160px}
.task-column h3{font-size:13px;margin:0 0 12px}
.task-card{display:flex;gap:7px;align-items:center;justify-content:space-between;background:var(--bg,#11121b);border:1px solid var(--border,#444);border-radius:10px;padding:10px;margin:6px 0;overflow-wrap:anywhere}
.task-card span{flex:1;font-size:13px}
@media(max-width:650px){.task-board-panel{inset:5vh 8px;padding:14px}.task-columns{grid-template-columns:1fr}.task-column{min-height:80px}}

/* Always-moving world with distinct emotional/functional status cues */
.nirvana-world{--world-hue:250}
.world-status{color:var(--world-status-color,var(--muted))}
.world-pulse{background:var(--world-status-color,#8980ff);box-shadow:0 0 12px var(--world-status-color,#8980ff)}
.nirvana-world .world-gpu{filter:drop-shadow(0 0 28px var(--world-status-color,#817dff))}
:root[data-world-time="morning"] .nirvana-world{background:radial-gradient(ellipse at 50% 60%,#ffd89210,transparent 68%)}
:root[data-world-time="day"] .nirvana-world{background:radial-gradient(ellipse at 50% 60%,#88d6ff13,transparent 68%)}
:root[data-world-time="evening"] .nirvana-world{background:radial-gradient(ellipse at 50% 60%,#d38aff15,transparent 68%)}
:root[data-world-time="night"] .nirvana-world{background:radial-gradient(ellipse at 50% 60%,#777cf717,transparent 68%)}

/* Capability hints stay below the primary canvas actions, not in a permanent menu. */
.capability-tray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 12px}
.capability-chip{border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);padding:7px 13px;cursor:pointer;font:inherit;font-size:12px;transition:background .2s,color .2s}
.capability-chip:hover,.capability-chip:focus-visible{background:var(--accent-soft);color:var(--text)}
@media(prefers-reduced-motion:reduce){.capability-chip{transition:none}}

/* Browser model library */
.model-library{display:grid;gap:9px;margin:14px 0}
.model-library-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:center;border:1px solid var(--border);border-radius:13px;padding:12px;background:var(--panel2)}
.model-library-row strong,.model-library-row small{grid-column:1}
.model-library-row small{color:var(--muted);overflow-wrap:anywhere;font-size:11px}
.model-library-row button{grid-column:2;grid-row:1 / span 2;border:1px solid var(--border);border-radius:999px;padding:7px 12px;background:var(--bg);color:var(--text);cursor:pointer}
.model-library-row progress{grid-column:1 / -1;width:100%;height:6px}
@media(max-width:480px){.model-library-row{grid-template-columns:1fr}.model-library-row button{grid-column:1;grid-row:auto}}

/* Unified execution provider details, secondary to the main assistant canvas. */
.provider-capabilities{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.provider-capabilities label{display:flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:99px;padding:5px 9px;font-size:11px}
#tab-provider-engines details input:not([type="checkbox"]){display:block;box-sizing:border-box;width:100%;margin:8px 0;padding:10px;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:9px}
#tab-provider-engines details>small{display:block;margin:10px 0;color:var(--muted)}
#tab-provider-engines details summary{cursor:pointer}

/* Conduit is an assistant, not a landing page. */
#empty-state{max-width:960px;padding:clamp(16px,5vh,48px) 20px;margin:auto}
#empty-state .world-greeting{font-size:clamp(24px,4vw,38px);margin:4px 0;font-weight:550}
#empty-state .world-subtitle{font-size:14px;line-height:1.4;margin:0 0 15px}
#empty-state .nirvana-world{width:min(100%,780px);height:clamp(280px,45vh,560px);margin:0 auto 4px;min-height:280px;background:radial-gradient(ellipse at 50% 55%,rgba(70,76,130,.09),transparent 70%)}
#empty-state .nirvana-world .world-gpu{width:min(470px,90%);height:auto;aspect-ratio:1;max-width:none;transform:translate(-50%,-50%)}
#empty-state .world-actions{margin-top:12px}
#empty-state #quick-backends{display:none!important}
body:not(.side-open) #sidebar{transition:transform .23s ease}
@media(min-width:801px){
 body.side-collapsed #sidebar{transform:translateX(-105%);position:fixed}
 body.side-collapsed #main{margin-left:0}
}
.conversation-media{border:1px solid var(--border);border-radius:18px;max-width:540px;padding:12px;margin:18px auto;background:var(--panel2)}
.conversation-media img,.conversation-media video{width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:12px}
.conversation-media p{font-size:13px;color:var(--muted);margin:10px 2px}
.conversation-media-actions{display:flex;flex-wrap:wrap;gap:8px}
.conversation-media-actions button{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:999px;padding:7px 12px;cursor:pointer}

/* The GPU world persists above the conversation; it does not disappear when messages arrive. */
#main>.nirvana-world{flex:0 0 auto;align-self:center;width:min(100%,860px);height:clamp(260px,42vh,490px);min-height:0;margin:8px auto 0;overflow:hidden}
#main>.nirvana-world .world-gpu{position:absolute;left:50%;top:50%;width:min(440px,86%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
#main>.nirvana-world .world-avatar{position:relative;z-index:2}
body.has-conversation #main>.nirvana-world{height:clamp(130px,20vh,210px);margin:0 auto}
body.has-conversation #main>.nirvana-world .world-gpu{width:min(205px,75%);}
body.has-conversation #main>.nirvana-world .world-avatar{width:84px;height:84px;font-size:36px}
body.has-conversation #main>.nirvana-world .world-status{font-size:10px}
#menu-btn{display:inline-flex}
@media(min-width:801px){body.side-collapsed #sidebar{flex-basis:0;width:0;border:0;visibility:hidden}}
@media(max-width:600px){#main>.nirvana-world{height:clamp(230px,36vh,350px)}body.has-conversation #main>.nirvana-world{height:120px}}

/* Full-scene 3D: GPU renders the object, glass UI remains above it. */
#nirvana-world[data-renderer="spatial-cube"]{background:radial-gradient(ellipse at center,rgba(77,69,108,.22),rgba(6,5,13,.88) 65%,#08070d);isolation:isolate}
#nirvana-world .spatial-cube{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
#nirvana-world[data-renderer="spatial-cube"] .world-avatar{position:relative;z-index:2;background:transparent!important;color:transparent!important;box-shadow:none!important;border:0;opacity:.01}
#nirvana-world[data-renderer="spatial-cube"] .world-grid{opacity:.1}
#nirvana-world .spatial-node-dock{position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:10px}
.spatial-node{border:1px solid rgba(192,189,236,.32);background:rgba(38,37,55,.55);backdrop-filter:blur(12px);color:#e0dcff;width:34px;height:34px;border-radius:11px;cursor:pointer}
.spatial-node[data-status="active"]{box-shadow:0 0 14px #43dbb45e}.spatial-node[data-status="error"]{box-shadow:0 0 14px #f05f695e}
#nirvana-world .spatial-inspect{position:absolute;right:55px;top:12%;z-index:10;max-width:min(280px,75vw);padding:16px;border:1px solid #89829d55;border-radius:15px;background:#151522ef;color:#d9d8ea;text-align:left;backdrop-filter:blur(18px)}
.spatial-inspect h3{margin:0 0 12px}.spatial-inspect p{font-size:12px;margin:5px 0}.spatial-inspect>button{float:right;background:none;border:0;color:inherit;cursor:pointer;font-size:19px}
@media(prefers-reduced-motion:reduce){#nirvana-world .spatial-cube{display:none}}

/* Spatial shell composition: the 3D scene owns the entire main viewport. */
#main{position:relative;isolation:isolate;overflow:hidden}
#main>.nirvana-world{position:absolute;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;min-height:0!important;margin:0!important;border-radius:0!important;z-index:0;pointer-events:auto}
body.has-conversation #main>.nirvana-world{height:100%!important;margin:0!important}
#chat-header{position:relative;z-index:3;background:rgba(10,9,18,.42);backdrop-filter:blur(18px)}
#messages{position:relative;z-index:2;pointer-events:auto}
#empty-state{position:relative;z-index:2;max-width:460px;align-self:center;margin:auto auto 0;padding:14px 20px}
#empty-state .world-greeting{font-size:24px}
#empty-state .world-subtitle{font-size:12px}
#composer-zone{position:relative;z-index:4;max-width:min(640px,calc(100% - 24px));width:100%;margin:0 auto 14px;border:1px solid rgba(173,169,213,.22);border-radius:22px;background:rgba(28,26,40,.66);backdrop-filter:blur(24px);box-shadow:0 22px 80px #02020877;padding:11px}
#nirvana-world .world-status{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;opacity:.65}
body.has-conversation #nirvana-world .world-status{bottom:16px;opacity:.35}
#main>.nirvana-world .spatial-cube{width:100%!important;height:100%!important}
@media(max-width:650px){#composer-zone{margin-bottom:calc(10px + env(safe-area-inset-bottom))}#nirvana-world .world-status{bottom:26%}}

/* Immersive view: background world is independent of empty-state layout. */
#main>.nirvana-world{display:block!important}
#nirvana-world[data-renderer="spatial-cube"] .world-avatar{visibility:hidden;pointer-events:none}
#nirvana-world[data-renderer="spatial-cube"] .world-grid{display:none}
#empty-state{pointer-events:none}
#empty-state .world-actions{pointer-events:auto;justify-content:center}
body:not(.has-conversation) #main #messages:empty{pointer-events:none}
#main>.nirvana-world .world-status{bottom:clamp(130px,22vh,230px);font-size:11px;letter-spacing:.19em;color:rgba(219,216,235,.8)}
#main>.nirvana-world .spatial-node-dock{right:clamp(14px,2vw,28px)}
#main>.nirvana-world .spatial-cube{filter:drop-shadow(0 0 26px rgba(162,141,226,.22))}
#main #empty-state .world-actions{margin:0}
#main #composer-zone{box-sizing:border-box}
@media(max-width:650px){#main>.nirvana-world .world-status{bottom:28%}}

/* Onboarding is now a real spatial preview with local neural speech. */
#onboard-orb.onboard-spatial-preview{display:block;position:relative;overflow:hidden;width:min(300px,70vw);height:210px;margin:0 auto 8px;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;filter:none!important;color:transparent;font-size:0}
#onboard-orb.onboard-spatial-preview::before,#onboard-orb.onboard-spatial-preview::after{display:none!important}
#onboard-orb.onboard-spatial-preview .spatial-cube{position:absolute;inset:0;width:100%;height:100%;display:block}
#onboard-orb.onboard-spatial-preview[data-renderer="spatial-cube"]{animation:none!important;transform:none!important}
#onboard-step .ob-voice-label{display:grid;gap:10px;margin:25px 0 12px;text-align:left;font-size:13px;color:var(--muted)}
#onboard-step .ob-voice-label select{width:100%;max-width:none;text-align:left;font-size:14px}
#onboard-step .ob-voice-status{display:block;min-height:24px;color:var(--muted);font-size:12px;line-height:1.45;margin-top:8px}
#onboard-step .onboard-sub{line-height:1.5}

#onboard-step progress.ob-model-download{display:block;width:100%;height:7px;margin:14px auto 8px;border:0;border-radius:20px;accent-color:#9c81ff;background:rgba(161,145,224,.2)}
#onboard-step progress.ob-model-download[hidden]{display:none}
#onboard-step .ob-voice-status{white-space:normal;overflow-wrap:anywhere;text-align:center}
#onboard-orb.onboard-spatial-preview{flex-shrink:0;opacity:1!important}

/* The main spatial scene is not a decorative background behind obsolete controls. */
#main>.nirvana-world{background:#080811!important}
#main>.nirvana-world canvas.spatial-cube{position:absolute!important;inset:0!important;display:block!important;opacity:1!important;z-index:1!important;visibility:visible!important}
#nirvana-world[data-renderer="spatial-cube"] .world-avatar,
#nirvana-world[data-renderer="spatial-cube"] .world-grid{display:none!important}
#main>.nirvana-world .world-status{z-index:2}
/* A deliberately chrome-free production URL for independent GPU validation. */
html.spatial-only #sidebar,html.spatial-only #scrim,
html.spatial-only #chat-header,html.spatial-only #messages,
html.spatial-only #empty-state,html.spatial-only #composer-zone,
html.spatial-only #onboarding,html.spatial-only #modal-root,
html.spatial-only .capability-tray{display:none!important}
html.spatial-only #main{position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;height:100dvh!important;max-width:none!important}
html.spatial-only #main>.nirvana-world{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;z-index:20!important;overflow:visible!important}
html.spatial-only #nirvana-world .world-status,html.spatial-only #nirvana-world .spatial-node-dock{display:none!important}
#spatial-diagnostic{display:none}
html.spatial-only #spatial-diagnostic{display:block;position:fixed;left:16px;bottom:16px;z-index:999999;color:#c7baff;background:#131020dd;border:1px solid #6e659d66;padding:9px 13px;border-radius:10px;font:12px/1.5 ui-monospace,monospace;pointer-events:none}


/* Conduit spatial shell: one canvas, clear foreground hierarchy. */
#main{position:relative!important;background:#080810!important}
#main>.nirvana-world{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;z-index:1!important;overflow:hidden!important;pointer-events:auto}
#main>.nirvana-world canvas.spatial-cube{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;z-index:1!important;opacity:1!important;visibility:visible!important;pointer-events:none}
#main>.nirvana-world[data-renderer="spatial-cube"]>.world-avatar,
#main>.nirvana-world[data-renderer="spatial-cube"]>.world-grid{display:none!important}
#main #chat-header{position:relative;z-index:4}
#main #messages{position:relative;z-index:3;background:transparent}
#main #empty-state{position:relative;z-index:3;background:transparent;pointer-events:none}
#main #empty-state .world-actions{pointer-events:auto}
#main #composer-zone{position:relative;z-index:5}
#main>.nirvana-world .spatial-node-dock{z-index:5}

/* The real Three.js scene is the only visible spatial avatar. */
#nirvana-world[data-renderer="three-spatial"]>.world-avatar,
#nirvana-world[data-renderer="three-spatial"]>.world-grid{display:none!important}
#nirvana-world[data-renderer="three-spatial"] .spatial-cube{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important;display:block!important;opacity:1!important}
#onboard-orb[data-renderer="three-spatial"]{background:transparent!important;box-shadow:none!important;animation:none!important}
#onboard-orb[data-renderer="three-spatial"] .spatial-cube{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
#nirvana-world .spatial-error{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:6;padding:10px 14px;color:#f0a9ae;background:#1c0a13db;border:1px solid #ba404a55;border-radius:12px;font:12px system-ui;max-width:80%;text-align:center}

/* Spatial scene is a visual layer, never a full-screen interaction shield. */
#main>.nirvana-world{z-index:0!important;pointer-events:none!important}
#main>.nirvana-world canvas.spatial-cube{pointer-events:none!important}
#main #chat-header,#main #composer-zone,#main #messages,#main #empty-state{z-index:3!important}
#main #empty-state .world-actions{position:relative;z-index:4;pointer-events:auto}
#main>.nirvana-world .spatial-node-dock{pointer-events:auto}
#main>.nirvana-world .world-status{pointer-events:none}
#onboarding:not([hidden]){position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex!important;visibility:visible!important;pointer-events:auto!important}
#onboarding[hidden]{display:none!important}
#onboarding .onboard-card{position:relative;z-index:1}
#onboard-orb.onboard-spatial-preview{isolation:isolate;pointer-events:none}
#onboard-orb.onboard-spatial-preview canvas.spatial-cube{pointer-events:none!important}

/* Production navigation: one drawer across all viewport sizes. */
#main #chat-header{display:flex!important;visibility:visible!important;pointer-events:auto!important;min-height:54px}
#main #chat-header #menu-btn{display:inline-flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:20!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;flex:0 0 40px;pointer-events:auto!important;cursor:pointer}
#sidebar{position:fixed!important;top:0!important;bottom:0!important;left:0!important;width:min(320px,88vw)!important;max-width:88vw!important;z-index:1001!important;display:flex!important;visibility:visible!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;box-shadow:12px 0 50px #0008;pointer-events:none!important}
body.side-open #sidebar{transform:translateX(0)!important;pointer-events:auto!important}
#scrim:not([hidden]){display:block!important;position:fixed!important;inset:0!important;z-index:1000!important;background:rgba(2,4,12,.65)!important}
#main{width:100%!important;margin-left:0!important;min-width:0!important}
#onboarding:not([hidden]){z-index:2000!important}
@media (max-width:600px){#main #chat-header{padding-left:8px;padding-right:8px}#main #chat-header #menu-btn{min-width:44px;min-height:44px}}

/* Settings tabs must remain reachable regardless of viewport width. */
#settings-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#settings-tabs .stab{flex:0 0 auto!important;white-space:nowrap!important}
#settings-modal .modal-card,#settings-modal .settings-card{max-width:min(960px,96vw)!important;min-width:0!important}
#settings-modal .settings-pane{overflow-wrap:anywhere;min-width:0}

/* Nirvana immersion: lightweight translucent conversation and clear spatial canvas. */
#main #chat-header{border:0!important;box-shadow:none!important;background:transparent!important}
#main #chat-header::after{display:none!important}
#main .msg.user .bubble{background:rgba(65,75,130,.25)!important;border-color:rgba(120,140,220,.24)!important;backdrop-filter:blur(12px)}
#main .msg.assistant .bubble{background:rgba(26,29,47,.22)!important;border-color:rgba(140,150,180,.13)!important;backdrop-filter:blur(8px)}
#composer .composer-backend{display:inline-flex!important;align-items:center;gap:6px;max-width:min(95%,360px);margin:2px 8px 5px;padding:4px 9px;border-radius:14px;font-size:11px;opacity:.85}
#composer .composer-backend .muted{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main #chat-header,#main #messages,#main #empty-state,#main #nirvana-world .world-status,#sidebar{transition:opacity .65s ease!important}
body.nirvana-idle #main #chat-header,body.nirvana-idle #main #messages,body.nirvana-idle #main #empty-state,body.nirvana-idle #nirvana-world .world-status,body.nirvana-idle #sidebar{opacity:.10!important}
body.nirvana-idle #main #chat-header,body.nirvana-idle #main #messages,body.nirvana-idle #sidebar{pointer-events:none!important}
body.nirvana-idle #composer-zone{opacity:.35;transition:opacity .4s ease}
body.nirvana-idle #composer-zone:focus-within{opacity:1}
@media (prefers-reduced-motion:reduce){#main #chat-header,#main #messages,#main #empty-state,#sidebar,#composer-zone{transition:none!important}}

/* Composer: metadata lives above the input, action buttons occupy one exclusive slot. */
#composer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:0 7px 8px;max-width:100%;font-size:12px;color:var(--muted)}
#composer-meta #chat-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
#composer-meta .composer-backend{margin:0!important;flex:0 1 auto;max-width:60%;min-width:0}
#composer-meta .composer-backend #backend-name,#composer-meta .composer-backend #model-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#composer{display:flex!important;align-items:center;gap:7px;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
#composer #composer-extras{flex:0 0 auto;min-width:0}
#composer #input{flex:1 1 0!important;min-width:0!important;width:0!important;max-width:100%!important}
#composer #send-btn,#composer #stop-btn{flex:0 0 42px!important;width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;position:static!important;transform:none!important;margin:0!important}
#composer #send-btn[hidden],#composer #stop-btn[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
#composer-zone #composer-meta{opacity:1}
@media(max-width:600px){#composer-meta{gap:5px;padding-inline:3px}#composer-meta .composer-backend{max-width:55%}#composer #send-btn,#composer #stop-btn{flex-basis:38px!important;width:38px!important;min-width:38px!important;height:38px!important}}

/* Immersive shell: no full-width top bar; only a floating navigation trigger. */
#main #chat-header{position:absolute!important;left:12px;top:10px;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-bottom:0!important;box-shadow:none!important;background:none!important;backdrop-filter:none!important;display:block!important;z-index:8!important}
#main #chat-header .header-title,#main #chat-header .header-actions{display:none!important}
#main #chat-header #menu-btn{border:0!important;background:transparent!important;box-shadow:none!important}
/* Fade *completely* out after inactivity. All interactive chrome restores on activity. */
#main #chat-header,#main #messages,#main #empty-state,#main #nirvana-world .world-status,#sidebar,#composer-zone{transition:opacity 1.2s ease-in-out!important}
body.nirvana-idle #main #chat-header,body.nirvana-idle #main #messages,body.nirvana-idle #main #empty-state,body.nirvana-idle #main #nirvana-world .world-status,body.nirvana-idle #sidebar,body.nirvana-idle #composer-zone{opacity:0!important;pointer-events:none!important}
/* Use transparent backgrounds instead of applying opacity to text and icons. */
#main .msg.user .bubble{background:rgba(64,77,135,.13)!important;border-color:rgba(125,145,224,.16)!important;backdrop-filter:blur(3px)!important}
#main .msg.assistant .bubble{background:rgba(18,22,38,.09)!important;border-color:rgba(125,140,180,.10)!important;backdrop-filter:blur(2px)!important}
@media(prefers-reduced-motion:reduce){#main #chat-header,#main #messages,#main #empty-state,#sidebar,#composer-zone{transition:none!important}}