@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root,
[data-theme="midnight"] {
  --bg: #0a0f1c;
  --surface: #0d1526;
  --panel: #111a2e;
  --panel-2: #162040;
  --border: #1c2a4a;
  --border-strong: #263458;
  --text: #e6edf7;
  --text-dim: #8ea0b8;
  --text-faint: #7a8cb5;
  --accent: #22d3ee;
  --accent-strong: #06b6d4;
  --accent-soft: rgba(34,211,238,0.12);
  --green: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --radius: 10px;
  /* tokens - typography, spacing, radius, motion, layout, zIndex, shadow */
  --font-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --spacing-grid: 8px; --spacing-section: 32px; --spacing-cardPadding: 16px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); --shadow-glow: 0 0 20px rgba(34,211,238,0.15);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms;
  --easing-default: cubic-bezier(0.2, 0.8, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --layout-sidebarWidth: 280px; --layout-topbarHeight: 56px; --layout-maxContent: 1200px;
  --z-sidebar: 10; --z-topbar: 20; --z-modal: 50; --z-toast: 60;
  /* token aliases (design system) — resolved from app vars */
  --color-accent-base: var(--accent);
  --color-accent-soft: var(--accent-soft);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary: var(--text-faint);
  --color-border-subtle: rgba(255,255,255,0.06);
  --accent2: #2dd4bf;
  --panel-3: #162040;
  --dim: var(--text-dim);
  --layout-sidebar: var(--layout-sidebarWidth);
  --layout-topbar: var(--layout-topbarHeight);
  --space-2: 8px;
  --space-4: 16px;
  color-scheme: dark;
}

/* ── themes ─────────────────────────────────────────────────────────── */
[data-theme="indigo"] {
  --bg: #0f1115; --surface: #161a22; --panel: #1e2430; --panel-2: #252c3a;
  --border: #2a3140; --border-strong: #3a4358;
  --text: #e6e9ef; --text-dim: #8a93a5; --text-faint: #555d6e;
  --accent: #4f8cff; --accent-strong: #3a6ee0; --accent-soft: rgba(79,140,255,0.12);
  --green: #4cc38a; --red: #f0655a; --amber: #f5c542;
}

[data-theme="deep-sea"] {
  --bg: #070b14; --surface: #0b1120; --panel: #0f1729; --panel-2: #141e35;
  --border: #1d2a47; --border-strong: #2b3c63;
  --text: #e8edf7; --text-dim: #93a0bd; --text-faint: #5f6d8c;
  --accent: #6c8cff; --accent-strong: #4a6aee; --accent-soft: rgba(108,140,255,0.12);
  --green: #34d399; --red: #f87171; --amber: #fbbf24;
}

[data-theme="gold"] {
  --bg: #0e0e11; --surface: #1a1a21; --panel: #202028; --panel-2: #282830;
  --border: #33333c; --border-strong: #444450;
  --text: #f2f2f5; --text-dim: #9a9aa6; --text-faint: #5c5c6a;
  --accent: #e5a00d; --accent-strong: #c48800; --accent-soft: rgba(229,160,13,0.12);
  --green: #4ade80; --red: #f87171; --amber: #fbbf24;
}

[data-theme="neon"] {
  --bg: #0a0a12; --surface: #10101a; --panel: #161622; --panel-2: #1c1c2c;
  --border: #24243a; --border-strong: #32324e;
  --text: #e8e8f8; --text-dim: #8888b0; --text-faint: #505070;
  --accent: #818cf8; --accent-strong: #6366f1; --accent-soft: rgba(129,140,248,0.12);
  --green: #34d399; --red: #f87171; --amber: #fbbf24;
}

[data-theme="teal"] {
  --bg: #081210; --surface: #0c1a18; --panel: #102220; --panel-2: #142a28;
  --border: #1a3834; --border-strong: #244a44;
  --text: #e0f0ec; --text-dim: #7aa89e; --text-faint: #4a7068;
  --accent: #2dd4bf; --accent-strong: #14b8a6; --accent-soft: rgba(45,212,191,0.12);
  --green: #34d399; --red: #f87171; --amber: #fbbf24;
}

[data-theme="cobalt"] {
  --bg: #0a1020; --surface: #0e1628; --panel: #121e34; --panel-2: #162640;
  --border: #1e3050; --border-strong: #284068;
  --text: #dce4f4; --text-dim: #7888b0; --text-faint: #4a5878;
  --accent: #38bdf8; --accent-strong: #0ea5e9; --accent-soft: rgba(56,189,248,0.12);
  --green: #34d399; --red: #f87171; --amber: #fbbf24;
}

[data-theme="violet"] {
  --bg: #0e0a14; --surface: #16101e; --panel: #1e1828; --panel-2: #262032;
  --border: #302840; --border-strong: #403854;
  --text: #ece4f8; --text-dim: #a088b8; --text-faint: #685878;
  --accent: #c084fc; --accent-strong: #a855f7; --accent-soft: rgba(192,132,252,0.12);
  --green: #34d399; --red: #f87171; --amber: #fbbf24;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

html, body { height: 100%; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* left sidebar */
.app-body { flex: 1; display: flex; min-height: 0; }
.rail {
  width: 64px; flex-shrink: 0; display: flex; flex-direction: column;
  padding: 12px 8px;
  background: var(--surface); border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width var(--duration-base) var(--easing-default);
}
.rail:hover, .rail.open { width: var(--layout-sidebarWidth); }
.nav-section { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-tertiary); padding: 8px 11px 4px; opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-default); white-space: nowrap; overflow: hidden;
}
.rail:hover .nav-label, .rail.open .nav-label { opacity: 1; }
.nav-divider { height: 1px; background: var(--color-border-subtle); margin: 8px 8px; opacity: 0; transition: opacity var(--duration-fast) var(--easing-default); }
.rail:hover .nav-divider, .rail.open .nav-divider { opacity: 1; }
.nav-item.active { background: var(--color-accent-soft); color: var(--color-accent-base); border-color: var(--color-accent-soft); box-shadow: var(--shadow-glow); }
.nav-item.active .rail-label { color: var(--color-accent-base); font-weight: 600; }
.rail-lock-btn { margin-top: auto; }
.rail-lock-btn.active { color: var(--color-accent-base); background: var(--color-accent-soft); border-color: var(--color-accent-soft); }
.rail .rail-btn { pointer-events: auto; position: relative; z-index: 1; }
.rail { z-index: 10; }
.flow .view-seg { display: none !important; }
.rail-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.rail .rail-btn {
  width: 100%; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 0 11px;
  transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.rail .rail-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.rail .rail-btn:hover { background: var(--panel); color: var(--text); }
.rail .rail-btn.active { color: var(--accent); background: var(--accent-soft); }
.rail-label {
  font-size: 13px; opacity: 0; transition: opacity 0.15s ease 0.03s;
  overflow: hidden; text-overflow: ellipsis;
}
.rail:hover .rail-label, .rail.open .rail-label { opacity: 1; }
.rail-camera {
  margin-top: auto; padding: 4px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rail-camera .camera-panel { width: 100%; border-radius: 8px; }
.app-content { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ---------- chats sidebar ---------- */
.chats-sidebar {
  width: 0; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  overflow: hidden; transition: width 0.18s ease;
}
.chats-sidebar.open { width: 240px; }
.chats-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 6px; font-size: 13px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em;
}
.chats-head .icon-btn { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; }
.chats-head .icon-btn:hover { color: var(--text); }
.new-chat-btn {
  margin: 4px 12px 10px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--accent-soft); background: var(--accent-soft);
  color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter 0.12s;
}
.new-chat-btn:hover { filter: brightness(1.1); }
.chats-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.chat-item {
  display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; color: var(--text-dim); border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.chat-item:hover { background: var(--panel); color: var(--text); }
.chat-item.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent-soft); }
.chat-title { flex: 1; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-del { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px; border-radius: 5px; opacity: 0; }
.chat-item:hover .chat-del { opacity: 1; }
.chat-del:hover { color: #ff6b6b; }

.view-seg { width: 210px; flex-shrink: 0; }

/* ---------- voice view — Copilot-style clean ---------- */
.voice-view {
  flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0; padding: 28px; order: 1; position: relative;
  background:
    radial-gradient(700px 420px at 50% 120%, rgba(59, 130, 246, 0.07), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.app.voice-mode .chat { display: none; }
.app.voice-mode .voice-view { display: flex; }
.side { order: 2; }
.voice-listening-stage { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.voice-listening-text { font-size: 28px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.voice-controls {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.voice-ctrl-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.voice-ctrl-btn svg { width: 18px; height: 18px; }
.voice-ctrl-btn:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.voice-ctrl-btn.mic-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(34,211,238,0.25); }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.voice-card {
  padding: 18px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: center; transition: border-color 0.12s, background 0.12s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.voice-card:hover { border-color: var(--border-strong); background: var(--panel-2); }
.voice-card.active { background: var(--panel-2); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.voice-label { flex: 1; width: 100%; }
.voice-preview-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text-dim); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.voice-preview-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.vv-panel {
  flex: 1; max-width: 320px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.vv-name { font-size: 15px; font-weight: 650; }
.vv-state { font-size: 12px; color: var(--text-faint); text-transform: capitalize; }

.vv-ptt-btn {
  display: none; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text); font-size: 14.5px; font-weight: 600;
  cursor: pointer; margin-top: 4px; transition: background 0.12s, transform 0.12s;
  font-family: inherit;
}
.vv-ptt-btn svg { width: 18px; height: 18px; }
.vv-ptt-btn:hover { background: var(--panel-2); }
.vv-ptt-btn:active { transform: scale(0.96); background: var(--accent-soft); color: var(--accent); }
.vv-ptt-btn.recording { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.vv-ptt-btn.show { display: inline-flex; }


.avatar {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--panel);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.user-avatar img, .user-avatar video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1); display: none;
}
.user-avatar img[src], .user-avatar video.active { display: block; }
.avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-faint); }
.avatar-fallback svg { width: 62px; height: 62px; }

.vv-panel.active .avatar {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from 0deg, var(--accent), var(--accent2), var(--accent)) border-box;
  box-shadow: 0 0 44px rgba(59, 130, 246, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.3);
  animation: ringPulse 1.5s ease-in-out infinite;
}
@keyframes ringPulse {
  50% { box-shadow: 0 0 70px rgba(59, 130, 246, 0.75), inset 0 0 40px rgba(0, 0, 0, 0.3); }
}

.core-orb {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9cc0ff, var(--accent) 55%, var(--accent-strong));
  box-shadow: 0 0 44px rgba(59, 130, 246, 0.35), inset 0 0 32px rgba(0, 0, 0, 0.45);
  opacity: 0.3; transition: opacity 0.3s;
}
.core-orb::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px dashed rgba(59, 130, 246, 0.55); opacity: 0;
}
.vv-panel.active .core-orb { opacity: 1; animation: orbPulse 1.3s ease-in-out infinite; }
.vv-panel.active .core-orb::before { opacity: 1; animation: orbSpin 7s linear infinite; }
@keyframes orbPulse { 50% { transform: scale(1.06); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }

.vv-flow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  font-size: 12px; color: var(--text-faint); max-width: 250px;
}
.vv-sep { color: var(--text-faint); }
.vv-flow [data-stage] { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); transition: all 0.15s; }
.vv-flow [data-stage].active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.ai-face { width: 100%; height: 100%; }
.ai-face .face-bg { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 2; }
.ai-face .eye { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); transform-origin: center; animation: blink 4s infinite; }
.ai-face .mouth { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); transform-origin: 60px 80px; }
.ai-avatar.speaking .mouth { animation: talk 0.26s infinite alternate ease-in-out; }
@keyframes talk { from { transform: scaleY(0.35); } to { transform: scaleY(2); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
.ai-avatar.thinking .eye { animation: think 0.9s infinite; }
@keyframes think { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--layout-topbarHeight); min-height: var(--layout-topbarHeight); padding: 0 var(--space-4); flex-shrink: 0;
  font-family: var(--font-sans);
  background: var(--surface); border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.logo img { width: 26px; height: 26px; object-fit: cover; border-radius: 7px; display: block; }
.brand-text h1 { font-size: 14px; font-weight: 650; letter-spacing: 0.2px; }
.brand-text span { color: var(--text-dim); }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Top-bar status strip (P1) */
.status-strip { display: flex; align-items: center; gap: 6px; margin: 0 10px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border, #262b34); background: var(--panel, #141922);
  color: var(--text-dim, #98a1b0); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.status-chip svg { flex-shrink: 0; color: var(--text-faint, #6b7280); }
.status-chip .chip-label { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.status-chip[hidden] { display: none; }
.status-chip.is-ok { color: var(--green, #34d399); border-color: rgba(52,211,153,.3); }
.status-chip.is-ok svg { color: var(--green, #34d399); }
.status-chip.is-warn { color: var(--amber, #fbbf24); border-color: rgba(251,191,36,.3); }
.status-chip.is-warn svg { color: var(--amber, #fbbf24); }
.status-chip.is-err { color: var(--red, #f87171); border-color: rgba(248,113,113,.3); }
.status-chip.is-err svg { color: var(--red, #f87171); }
.status-engine.is-ok { color: var(--green, #34d399); }
@media (max-width: 820px) { .status-strip { display: none; } }


.mic-toggle .ic-mic-off { display: none; }
.mic-toggle.muted { color: var(--red); border-color: var(--border); background: var(--panel); }
.mic-toggle.muted .ic-mic { display: none; }
.mic-toggle.muted .ic-mic-off { display: block; }
.mic-toggle.muted:hover { border-color: var(--red); }

.theme-select {
  height: 28px; padding: 0 24px 0 8px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23616a78'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.theme-select:hover { border-color: var(--border-strong); color: var(--text); }
.theme-select option { background: var(--panel-2); color: var(--text); }

.status {
  display: flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; color: var(--text-dim);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.status[data-state="capturing"] .dot { background: var(--green); }
.status[data-state="generating"] .dot { background: var(--accent); }
.status[data-state="error"] .dot { background: var(--red); }
.status[data-state="capturing"] .label,
.status[data-state="generating"] .label { color: var(--text); }

.conn span {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
}
.conn.on span { background: var(--green); }

.icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  display: grid; place-items: center; transition: all 0.12s;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--panel); color: var(--text); border-color: var(--border); }
.icon-btn.active { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.logout-btn:hover { color: var(--red); background: var(--panel); border-color: var(--border); }

/* ---------- user menu ---------- */
.user-menu-wrap { position: relative; }
.user-btn { border-radius: 50%; }
.user-btn:hover { color: var(--accent); }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 90;
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}
.user-menu.open { display: flex; }
.user-menu-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.user-menu-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.user-menu-avatar svg { width: 20px; height: 20px; }
.user-menu-name { font-size: 13.5px; font-weight: 650; color: var(--text); }
.user-menu-role { font-size: 11px; color: var(--text-dim); }
.user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-dim); font-size: 13.5px; cursor: pointer; text-align: left;
  font-family: inherit;
}
.user-menu-item svg { width: 16px; height: 16px; }
.user-menu-item:hover { background: var(--panel-2); color: var(--text); }
.user-menu-item.danger { color: var(--red); }
.user-menu-item.danger:hover { background: rgba(229,83,75,0.1); color: var(--red); }


/* ---------- notebook view ---------- */
.notebook-view {
  display: none; flex: 1; min-height: 0; overflow: hidden; background: var(--bg);
}
.app.notebook-mode .chat, .app.notebook-mode .voice-view { display: none; }
.app.notebook-mode .notebook-view { display: flex; width: 100%; }
.app.notebook-mode .main { padding: 0; gap: 0; }

.nb-sidebar {
  width: 280px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--surface);
  transition: width 0.2s ease;
}
.nb-sidebar.collapsed { width: 48px; overflow: visible; }
.nb-sidebar.collapsed .nb-sidebar-title,
.nb-sidebar.collapsed .nb-sidebar-search,
.nb-sidebar.collapsed .nb-sources,
.nb-sidebar.collapsed .nb-sidebar-head h3 { display: none; }
.nb-sidebar.collapsed .nb-sidebar-head { justify-content: center; padding: 10px 8px; }
.nb-sidebar.collapsed .nb-sidebar-actions { flex-direction: column; align-items: center; }
.nb-sidebar.collapsed .nb-collapse-btn svg { transform: rotate(180deg); }
.nb-sidebar.collapsed .nb-add-source { display: none; }
.nb-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.nb-sidebar-title { display: flex; align-items: center; gap: 8px; }
.nb-sidebar-title h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.nb-src-count {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  background: var(--panel); padding: 1px 7px; border-radius: 10px;
}
.nb-sidebar-actions { display: flex; gap: 2px; }
.nb-collapse-btn, .nb-add-source {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer;
  display: grid; place-items: center; transition: 0.12s;
}
.nb-collapse-btn:hover, .nb-add-source:hover { background: var(--panel); color: var(--text); }
.nb-collapse-btn svg, .nb-add-source svg { width: 16px; height: 16px; }
.nb-sidebar-search {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.nb-sidebar-search svg { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.nb-sidebar-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 12px; font-family: inherit;
}
.nb-sidebar-search input::placeholder { color: var(--text-faint); }
.nb-sources {
  flex: 1; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.nb-src {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: .12s;
  border: 1px solid transparent; position: relative;
}
.nb-src:hover { background: var(--panel); }
.nb-src.active { background: var(--accent-soft); border-color: var(--accent-soft); }
.nb-src-icon {
  font-size: 11px; font-weight: 700; flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
}
.nb-src-info { flex: 1; min-width: 0; }
.nb-src-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-src-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.nb-src-actions { display: flex; gap: 2px; opacity: 0; transition: 0.12s; }
.nb-src:hover .nb-src-actions { opacity: 1; }
.nb-src-actions button {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: 4px;
  display: grid; place-items: center; transition: 0.1s;
}
.nb-src-actions button:hover { background: var(--panel-2); color: var(--text); }
.nb-src-actions button.nb-del-btn:hover { color: var(--red); }
.nb-src-actions button svg { width: 13px; height: 13px; }
.nb-empty {
  display: flex; align-items: center; justify-content: center;
  flex: 1; color: var(--text-dim); font-size: 13px; text-align: center;
  padding: 30px 20px; line-height: 1.5;
}

.nb-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.nb-welcome {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 20px; text-align: center; min-height: 0;
}
.nb-welcome.hidden { display: none; }
.nb-welcome-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
  display: grid; place-items: center; margin-bottom: 16px;
  color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.nb-welcome-icon svg { width: 28px; height: 28px; }
.nb-welcome h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--text); }
.nb-welcome-sub { margin: 0 0 24px; font-size: 14px; color: var(--text-dim); max-width: 400px; }
.nb-welcome-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; width: 100%; }
.nb-welcome-card {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); font-size: 13px; color: var(--text-dim);
  cursor: pointer; transition: 0.15s; text-align: left;
}
.nb-welcome-card:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.nb-chat {
  flex: 1; overflow-y: auto; padding: 24px 32px;
  display: none; flex-direction: column; gap: 16px; min-height: 0;
}
.nb-chat.visible { display: flex; }
.nb-msg {
  max-width: 720px; width: 100%; padding: 12px 16px; border-radius: 12px;
  font-size: 14px; line-height: 1.6; animation: nbFadeIn 0.2s ease;
}
@keyframes nbFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nb-msg.user {
  align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px; max-width: 65%;
}
.nb-msg.assistant {
  align-self: flex-start; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.nb-msg.assistant .nb-msg-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.nb-msg.assistant .nb-msg-head svg { width: 14px; height: 14px; }
.nb-msg.assistant .nb-msg-body { font-size: 14px; line-height: 1.65; }
.nb-msg.assistant .nb-msg-body p { margin: 0 0 8px; }
.nb-msg.assistant .nb-msg-body p:last-child { margin-bottom: 0; }
.nb-msg.assistant .nb-msg-body code {
  background: var(--panel); padding: 1px 5px; border-radius: 4px;
  font-size: 13px; font-family: "Fira Code", monospace;
}
.nb-msg.assistant .nb-msg-body pre {
  background: var(--panel); padding: 10px 12px; border-radius: 8px;
  overflow-x: auto; margin: 8px 0; font-size: 12.5px;
}
.nb-msg.assistant .nb-msg-body pre code { background: none; padding: 0; }
.nb-msg.assistant .nb-msg-body ul, .nb-msg.assistant .nb-msg-body ol { margin: 4px 0; padding-left: 20px; }
.nb-msg.assistant .nb-msg-body li { margin-bottom: 3px; }
.nb-msg.assistant .nb-msg-body strong { color: var(--text); }
.nb-msg.assistant .nb-msg-body h1, .nb-msg.assistant .nb-msg-body h2,
.nb-msg.assistant .nb-msg-body h3 { margin: 12px 0 6px; color: var(--text); }
.nb-msg.assistant .nb-citations {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 4px;
}
.nb-citation {
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
}
.nb-citation svg { width: 10px; height: 10px; }
.nb-msg.system {
  align-self: center; background: transparent; color: var(--text-dim);
  font-size: 12px; font-style: italic; padding: 4px 0; max-width: 100%;
}
.nb-msg.system.thinking { display: flex; align-items: center; gap: 8px; }
.nb-msg.system.thinking::before {
  content: ""; width: 14px; height: 14px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: nbSpin 0.7s linear infinite;
}
@keyframes nbSpin { to { transform: rotate(360deg); } }

.nb-input-row {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.nb-input-wrap { flex: 1; position: relative; }
.nb-input {
  width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; color: var(--text);
  font-size: 14px; font-family: inherit; resize: none; min-height: 42px;
  max-height: 140px; line-height: 1.45; transition: border-color 0.15s;
}
.nb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.nb-input-hint { font-size: 11px; color: var(--text-faint); padding: 3px 4px 0; min-height: 16px; }
.nb-send {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.15s;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.nb-send:hover { filter: brightness(1.1); transform: scale(1.05); }
.nb-send:active { transform: scale(0.95); }
.nb-send svg { width: 17px; height: 17px; }

/* notebook topbar */
.nb-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface);
  flex-shrink: 0; min-height: 44px;
}
.nb-topbar-project { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nb-topbar-label { font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.nb-topbar-name { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-topbar-actions { display: flex; gap: 4px; flex-shrink: 0; }
.nb-topbar-btn { width: 32px; height: 32px; border-radius: 8px; }
.nb-topbar-btn svg { width: 16px; height: 16px; }

.nb-add-source-btn {
  height: 32px; padding: 0 12px; border-radius: 8px; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-soft);
  color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all 0.12s;
}
.nb-add-source-btn svg { width: 14px; height: 14px; }
.nb-add-source-btn:hover { background: var(--accent); color: #08131f; }

.nb-src-status {
  min-height: 18px; font-size: 12px; color: var(--text-dim);
  padding: 6px 2px 0; text-align: center;
}

/* sidebar tab buttons */
.nb-tab-btn { width: 28px; height: 28px; border-radius: 6px; }
.nb-tab-btn svg { width: 15px; height: 15px; }
.nb-tab-btn.nb-tab-active { background: var(--accent-soft); color: var(--accent); }

/* project items */
.nb-proj {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: .12s;
  border: 1px solid transparent; position: relative;
}
.nb-proj:hover { background: var(--panel); }
.nb-proj.active { background: var(--accent-soft); border-color: var(--accent-soft); }
.nb-proj-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
  background: var(--accent-soft); color: var(--accent);
}
.nb-proj-icon svg { width: 15px; height: 15px; }
.nb-proj-info { flex: 1; min-width: 0; }
.nb-proj-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-proj-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.nb-proj-actions { display: flex; gap: 2px; opacity: 0; transition: 0.12s; }
.nb-proj:hover .nb-proj-actions { opacity: 1; }
.nb-proj-actions button {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: 4px;
  display: grid; place-items: center; transition: 0.1s;
}
.nb-proj-actions button:hover { background: var(--panel-2); color: var(--text); }
.nb-proj-actions button.nb-del-btn:hover { color: var(--red); }
.nb-proj-actions button svg { width: 13px; height: 13px; }

/* conversation items */
.nb-conv {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: .12s;
  border: 1px solid transparent; position: relative;
}
.nb-conv:hover { background: var(--panel); }
.nb-conv.active { background: var(--accent-soft); border-color: var(--accent-soft); }
.nb-conv-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--panel); color: var(--text-dim);
}
.nb-conv-icon svg { width: 14px; height: 14px; }
.nb-conv-info { flex: 1; min-width: 0; }
.nb-conv-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-conv-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.nb-conv-actions { display: flex; gap: 2px; opacity: 0; transition: 0.12s; }
.nb-conv:hover .nb-conv-actions { opacity: 1; }
.nb-conv-actions button {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: 4px;
  display: grid; place-items: center; transition: 0.1s;
}
.nb-conv-actions button:hover { background: var(--panel-2); color: var(--text); }
.nb-conv-actions button.nb-del-btn:hover { color: var(--red); }
.nb-conv-actions button svg { width: 13px; height: 13px; }

/* studio panel */
.nb-studio {
  display: none; flex-direction: column; width: 320px; flex-shrink: 0;
  border-left: 1px solid var(--border); background: var(--surface);
  overflow-y: auto;
}
.nb-studio.open { display: flex; }
.nb-studio-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.nb-studio-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.nb-studio-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.nb-studio-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.nb-studio-hint { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; }
.nb-studio-btn {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 13px; font-family: inherit;
  cursor: pointer; transition: 0.12s; text-align: center;
}
.nb-studio-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.nb-studio-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nb-studio-export-btns { display: flex; gap: 6px; }
.nb-studio-export-btns .nb-studio-btn { flex: 1; }
.nb-studio-output {
  margin-top: 8px; padding: 12px; border-radius: 8px; background: var(--panel);
  font-size: 13px; line-height: 1.55; color: var(--text-dim); white-space: pre-wrap;
  display: none; max-height: 300px; overflow-y: auto;
}
.nb-studio-output.visible { display: block; }

/* ---------- mind map modal ---------- */
.mindmap-modal-content { width: 90vw; max-width: 1100px; height: 80vh; display: flex; flex-direction: column; }
.mindmap-modal-content .modal-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mindmap-modal-content .modal-header h2 { margin: 0; font-size: 16px; flex: 1; }
.mindmap-controls { display: flex; gap: 4px; }
.mindmap-controls .ghost-btn { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.mindmap-container { flex: 1; min-height: 0; overflow: hidden; position: relative; background: var(--bg); }
.mindmap-container svg { width: 100%; height: 100%; display: block; }
.mindmap-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); font-size: 14px; gap: 10px; }
.mindmap-loading::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: nbSpin 0.7s linear infinite; }

/* ---------- pipeline flow ---------- */
.flow {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; color: var(--text-faint);
}
.flow-stages { display: none !important; }
.flow-node {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  transition: all 0.15s; white-space: nowrap;
}
.flow-node .f-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); transition: all 0.15s; }
.flow-node .f-label { color: var(--text-dim); }
.flow-sep { color: var(--text-faint); font-size: 13px; }
.flow-node.active { border-color: var(--accent); background: var(--accent-soft); }
.flow-node.active .f-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: fpulse 1s infinite; }
.flow-node.active .f-label { color: var(--text); }
@keyframes fpulse { 50% { opacity: 0.4; } }

/* ---------- main ---------- */
.main { flex: 1; display: flex; min-height: 0; gap: 12px; padding: 12px 16px; }

.chat {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}

.messages {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.messages::-webkit-scrollbar-track { background: transparent; }

/* welcome / empty state */
.welcome {
  margin: auto; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 12px; max-width: 420px; padding: 20px;
}
.welcome-mark {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; overflow: hidden;
}
.welcome-mark img { width: 52px; height: 52px; object-fit: cover; border-radius: 14px; display: block; }
.welcome h2 { font-size: 17px; font-weight: 650; }
.welcome p { font-size: 13.5px; color: var(--text-dim); }

.welcome-suggestions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px;
}
.welcome-suggestion {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text-dim); font-size: 12.5px; cursor: pointer;
  transition: all 0.15s;
}
.welcome-suggestion:hover {
  border-color: var(--accent); color: var(--text);
  background: var(--accent-soft);
}
.ws-icon { font-size: 14px; }

.welcome-tips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px;
}
.welcome-tips span {
  font-size: 11.5px; color: var(--text-faint); padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
}

.msg {
  max-width: 76%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  position: relative;
  animation: msgFadeIn 0.2s ease;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg.user {
  align-self: flex-end; background: var(--accent-strong); color: #fff;
  border-radius: 16px;
}
.msg.assistant {
  align-self: flex-start; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 16px;
}
.msg.system {
  align-self: center; background: transparent; color: var(--color-text-secondary, #8ea0b8);
  font-size: 12px; text-align: center; max-width: 90%;
}
.msg.error {
  align-self: center; background: rgba(229, 83, 75, 0.08);
  color: var(--red); border: 1px solid rgba(229, 83, 75, 0.25);
  font-size: 12.5px;
}

/* message hover actions */
.msg-actions {
  position: absolute; top: -10px; right: 6px; display: flex; gap: 3px;
  opacity: 0; transition: opacity 0.12s;
}
.msg:hover .msg-actions { opacity: 1; }
.msg-actions button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text-faint); cursor: pointer;
  display: grid; place-items: center; transition: all 0.12s;
}
.msg-actions button svg { width: 13px; height: 13px; }
.msg-actions button:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel-2); }
.msg-actions button.copied { color: var(--green); border-color: var(--green); }

.composer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border);
}
.mic-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  display: grid; place-items: center; transition: all 0.12s;
}
.mic-btn svg { width: 19px; height: 19px; }
.mic-btn:hover { color: var(--text); border-color: var(--border-strong); }
.mic-btn .ic-stop { display: none; }
.mic-btn.recording { background: var(--red); border-color: var(--red); color: #fff; }
.mic-btn.speaking { background: var(--accent); border-color: var(--accent); color: #fff; }
.mic-btn.speaking .ic-mic { display: none; }
.mic-btn.speaking .ic-stop { display: block; }

.composer input {
  flex: 1; height: 40px; padding: 0 13px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; outline: none; min-width: 0;
}
.composer input::placeholder { color: var(--text-faint); }
.composer input:focus { border-color: var(--border-strong); }

.send-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background 0.12s;
}
.send-btn svg { width: 17px; height: 17px; }
.send-btn:hover { background: var(--accent-strong); }

.stop-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  display: grid; place-items: center; transition: all 0.12s;
}
.stop-btn svg { width: 15px; height: 15px; }
.stop-btn:hover { color: var(--red); border-color: var(--red); }

.hint { padding: 0 12px 10px; font-size: 11.5px; color: var(--text-faint); }

/* ---------- side panel ---------- */
.side { width: 282px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.side::-webkit-scrollbar { width: 8px; }

.camera-panel {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius);
  background: #000; border: 1px solid var(--border); overflow: hidden;
}
.camera-panel img, .camera-panel video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.camera-off {
  position: absolute; inset: 0; display: none; place-items: center;
  flex-direction: column; gap: 4px;
  color: var(--text-faint); font-size: 11px; background: var(--surface);
}
.cam-off-icon { width: 18px; height: 18px; }
.cam-off-text { white-space: nowrap; display: none; }
.rail:hover .cam-off-text, .rail.open .cam-off-text { display: block; }
.camera-panel.off img, .camera-panel.off video { display: none; }
.camera-panel.off .camera-off { display: flex; }

.meter { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
.meter-track { position: relative; height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.meter-fill {
  height: 100%; width: 0%; border-radius: 999px; background: var(--green);
  transition: width 0.08s linear;
}
.meter-thresh {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--amber);
  left: 20%; transition: left 0.3s;
}
.meter-labels { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--text-faint); }
.meter-labels span:last-child { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.controls {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.control-row { display: flex; flex-direction: column; gap: 6px; }
.control-row > label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.3px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.control-row > label span { color: var(--text-faint); font-weight: 500; text-transform: none; }

select { width: 100%; height: 32px; padding: 0 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; outline: none; }
select:focus { border-color: var(--border-strong); }
select option { background: var(--panel-2); color: var(--text); }

.text-input {
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; outline: none;
}
.text-input:focus { border-color: var(--border-strong); }

.text-area {
  width: 100%; padding: 9px 11px; border-radius: 8px; resize: vertical;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; line-height: 1.5; outline: none;
  font-family: inherit;
}
.text-area:focus { border-color: var(--border-strong); }

.select-wrap { display: flex; gap: 6px; }
.select-wrap select { flex: 1; min-width: 0; }
.mini-btn {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; display: grid; place-items: center;
  transition: all 0.12s;
}
.mini-btn svg { width: 15px; height: 15px; }
.mini-btn:hover { color: var(--text); border-color: var(--border-strong); }
.mini-btn:disabled { opacity: 0.5; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

.dl-btn {
  width: 100%; height: 34px; margin-top: 2px; border-radius: 8px;
  background: var(--panel-2); border: 1px dashed var(--border-strong);
  color: var(--text-dim); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all 0.12s;
}
.dl-btn svg { width: 15px; height: 15px; }
.dl-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.seg { display: flex; background: var(--panel-2); border-radius: 8px; padding: 2px; }
.seg button {
  flex: 1; height: 28px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-dim); font-size: 12.5px; transition: all 0.12s;
}
.seg button.active { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 999px; background: var(--panel-2); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--panel);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--panel); cursor: pointer;
}

.switch-row { flex-direction: row; align-items: center; justify-content: space-between; }
.switch-row > label:first-child { flex: 1; font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.switch { position: relative; width: 36px; height: 20px; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); transition: 0.15s; cursor: pointer; }
.switch .slider::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-faint); top: 2px; left: 2px; transition: 0.15s;
}
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); background: #fff; }

/* ---------- generation options (collapsible) ---------- */
.genopts { border: 1px solid var(--border); border-radius: 8px; }
.genopts summary {
  list-style: none; cursor: pointer; padding: 8px 10px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.3px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.genopts summary::-webkit-details-marker { display: none; }
.genopts summary::after { content: "+"; font-size: 14px; color: var(--text-faint); }
.genopts[open] summary::after { content: "−"; }
.genopts-body { padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 12px; }

.group-label {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent); margin-top: 2px;
}
.group-label:not(:first-child) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------- download progress ---------- */
.dl-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.dl-progress-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-progress .meter-track {
  height: 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.dl-progress .meter-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent, #3b82f6), #60a5fa);
  transition: width 0.35s ease;
}
.dl-progress .meter-fill.complete {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.dl-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.dl-stats #dlPct { color: var(--accent); font-weight: 600; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); z-index: 50;
}
.modal.open { display: grid; }
#voiceModal, #dlModal { z-index: 60; }
#engineConfirmModal, #engineAuditModal, #engineInfoModal { z-index: 80; }
#settingsHelpModal { z-index: 70; }
#settingsHelpModal .help-card { width: min(600px, 94vw); }
#toolsHelpModal { z-index: 70; }
#toolsHelpModal .help-card { width: min(600px, 94vw); }
.modal-card {
  width: min(400px, 90vw); background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.modal-card h2 { font-size: 15px; font-weight: 650; }
.modal-sub { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.modal-card input {
  height: 36px; padding: 0 12px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); font-size: 13.5px; outline: none;
}
.modal-card input:focus { border-color: var(--border-strong); }
.record-btn {
  height: 38px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; transition: background 0.12s;
}
.record-btn:hover { background: var(--accent-strong); }
.record-btn.recording { background: var(--red); }
.record-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.modal-status { font-size: 12.5px; color: var(--text-dim); min-height: 16px; }
.upload-row { display: flex; gap: 8px; }
.modal-actions { display: flex; justify-content: flex-end; }
.ghost-btn {
  height: 32px; padding: 0 14px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 12.5px;
}
.ghost-btn:hover { border-color: var(--border-strong); }
.ghost-btn.danger { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }
.ghost-btn.danger:hover { border-color: #ff6b6b; }
.primary-btn {
  height: 32px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.primary-btn:hover { background: var(--accent); color: #08131f; }

.perm-body { display: flex; flex-direction: column; gap: 10px; }
.perm-title { font-size: 14px; font-weight: 600; color: var(--text); }
.perm-args {
  font-family: monospace; font-size: 12px; line-height: 1.5; color: var(--text-dim);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto;
}

/* ---------- help ---------- */
.help-card { width: min(540px, 92vw); max-height: 85vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.settings-body { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.settings-body::-webkit-scrollbar { width: 8px; }
.settings-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.help-body { overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; }
.help-body::-webkit-scrollbar { width: 8px; }
.help-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.help-sec h3 {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent); margin-bottom: 7px;
}
.help-sec p { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.help-sec ul { margin: 7px 0 0 17px; display: flex; flex-direction: column; gap: 6px; }
.help-sec li { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.help-sec b { color: var(--text); font-weight: 600; }
.help-sec .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); font-size: 12.5px; margin: 7px 0;
}

/* ---------- what's new ---------- */
.whatsnew-list { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; padding-right: 4px; }
.whatsnew-list::-webkit-scrollbar { width: 8px; }
.whatsnew-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.whatsnew-item {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
}
.whatsnew-item h3 {
  font-size: 13px; font-weight: 650; color: var(--text); margin: 0 0 4px;
}
.whatsnew-item p {
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0;
}
.whatsnew-dismiss {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.whatsnew-dismiss input { cursor: pointer; }

/* ---------- knowledge base ---------- */
.kb-row { display: flex; align-items: center; justify-content: space-between; }
.kb-label { font-size: 13px; color: var(--text-dim); }
.kb-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.kb-list::-webkit-scrollbar { width: 8px; }
.kb-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.kb-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.kb-item.wrap { flex-wrap: wrap; }
.kb-icon { font-size: 11px; font-weight: 700; flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--accent-soft); color: var(--accent); }
.kb-item .kb-name { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-item .kb-meta { font-size: 11px; color: var(--text-faint); }
.kb-item button {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: var(--text-faint);
  cursor: pointer; display: grid; place-items: center;
}
.kb-item button:hover { color: var(--red); background: var(--panel); border-color: var(--border); }
.kb-item button svg { width: 13px; height: 13px; }
.kb-user-actions { display: flex; gap: 4px; width: 100%; padding-top: 4px; flex-wrap: wrap; }
.kb-user-actions button {
  width: auto; height: auto; padding: 2px 8px; font-size: 11px;
  border-radius: 4px; display: inline-flex; align-items: center; gap: 4px;
}
.kb-empty { font-size: 12.5px; color: var(--text-faint); text-align: center; padding: 10px; }

.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-chip {
  font-size: 11.5px; color: var(--text-dim); padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2);
}
.tool-chip b { color: var(--accent); font-weight:600; }
/* Per-category colour (--cc set in JS) so tool chips are grouped by category */
.tool-chip { border-color: color-mix(in srgb, var(--cc, var(--border)) 45%, transparent); }
.tool-chip::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; background: var(--cc, transparent); vertical-align: middle;
}
.tool-chip b { color: var(--cc, var(--accent)); }
/* Highlight the whole tool list when its category toggle is enabled */
.tool-chips.on .tool-chip {
  color: var(--text); border-color: var(--cc, rgba(34,211,238,.35));
  background: color-mix(in srgb, var(--cc, #22d3ee) 10%, transparent);
}
.tool-chips.on .tool-chip b { color: var(--cc, var(--accent)); }

.control-row .hint { flex: 1; font-size: 11.5px; color: var(--text-faint); text-align: right; }

/* ==================== responsive ==================== */

/* Tablet / small laptop */
@media (max-width: 1080px) {
  .side { width: 250px; }
  .avatar { width: 140px; height: 140px; }
  .core-orb { width: 140px; height: 140px; }
  .voice-view { gap: 28px; padding: 20px; }
  /* Hide the pipeline strip on tablets so the top bar fits. */
  .flow-stages { display: none; }
}

/* Phone / small tablet */
@media (max-width: 760px) {
  .brand-text span { color: var(--text-dim); }
  .view-seg { width: 210px; }
  .topbar { padding: 0 10px; gap: 8px; }
  .top-actions { gap: 4px; }

  /* flow bar: allow wrapping and hide on very small screens */
  .flow { flex-wrap: wrap; padding: 6px 10px; gap: 5px; }

  /* side panel becomes a slide-in drawer */
  .side {
    position: fixed; top: 52px; right: 0; bottom: 0; width: 300px; max-width: 88vw;
    transform: translateX(100%); transition: transform 0.25s ease;
    z-index: 40; background: var(--surface); border-left: 1px solid var(--border);
    padding: 12px; overflow-y: auto;
  }
  .side.open { transform: translateX(0); }

  .main { padding: 10px; }
  .messages { padding: 12px 14px; }
  .msg { max-width: 88%; }

  /* voice view stacks vertically */
  .voice-view { flex-direction: column; gap: 18px; overflow-y: auto; justify-content: flex-start; padding: 18px; }
  .vv-panel { max-width: none; flex: 0 0 auto; }
  .avatar { width: 110px; height: 110px; }
  .core-orb { width: 110px; height: 110px; }
  .vv-flow { max-width: 100%; }

  /* notebook view: sidebar collapses */
  .notebook-view { flex-direction: column; }
  .nb-sidebar { width: 100% !important; max-height: 140px; border-right: none; border-bottom: 1px solid var(--border); }
  .nb-sources { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 6px; gap: 4px; }
  .nb-proj, .nb-src, .nb-conv { flex-shrink: 0; padding: 6px 10px; }
  .nb-msg { max-width: 95%; }
  .nb-studio { width: 100% !important; border-left: none; border-top: 1px solid var(--border); }
  .nb-topbar { padding: 8px 12px; }
}

/* Small phone */
@media (max-width: 420px) {
  .brand-text h1 { font-size: 13px; }
  .view-seg { width: 190px; }
  .status .label { display: none; }
  .status { padding: 0 8px; }
  .flow { display: none; }
  .avatar { width: 92px; height: 92px; }
  .core-orb { width: 92px; height: 92px; }
  .icon-btn { width: 30px; height: 30px; }
}

/* License overlay (cannot be dismissed when expired) */
.license-overlay {
  z-index: 10000;
  display: none;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
}
.license-overlay.show { display: flex; }
.license-overlay .modal-card { pointer-events: auto; }

/* Trial banner (top of app) */
.license-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--accent);
  cursor: default;
}

/* ---- Code blocks with copy / run / save ---- */
.code-block {
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  overflow: hidden;
}
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--panel-3, rgba(255,255,255,0.04));
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.code-lang {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
}
.code-actions { display: flex; gap: 4px; }
.code-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim, #999);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.code-btn svg { width: 13px; height: 13px; }
.code-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.code-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  color: var(--text, #e0e0e0);
  background: transparent;
}
.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
}
.code-output {
  display: none;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: rgba(52, 211, 153, 0.06);
  color: var(--accent, #34d399);
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 250px;
  overflow-y: auto;
}
.code-output-err {
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
}
.inline-code {
  background: var(--panel-2, rgba(255,255,255,0.06));
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: "SF Mono", "Fira Code", monospace;
}
.license-banner.grace { background: #f59e0b22; color: #f59e0b; border-color: #f59e0b; }

/* pumTERMINAL */
.terminal-view {
  display: none;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--bg, #0a0a0a);
  border-radius: var(--radius, 10px);
}
.app.terminal-mode .chat, .app.terminal-mode .voice-view, .app.terminal-mode .notebook-view { display: none; }
.app.terminal-mode .terminal-view {
  display: flex; flex: 1; min-height: 0; min-width: 0; width: 100%; flex-direction: column;
  margin: 12px 16px 16px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg, #0a0a0a);
}
.app.terminal-mode .app-content { display: none; }
.app.terminal-mode .chats-sidebar { display: none; }
.terminal-view.hidden { display: none; }
.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface, #111);
  border-bottom: 1px solid var(--border, #222);
  flex-shrink: 0;
  min-height: 44px;
}
.terminal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.terminal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--green, #34d399);
  font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
  letter-spacing: .02em;
  white-space: nowrap;
}
.terminal-os {
  font-size: 11px;
  color: var(--text-dim, #888);
  background: var(--panel-2, #1a1a1a);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border, #222);
  white-space: nowrap;
}
.terminal-shell {
  font-size: 11px;
  color: var(--text-faint, #666);
  font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
  white-space: nowrap;
}
.terminal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.terminal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--text-dim, #888);
  background: transparent;
  border: 1px solid var(--border, #222);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  font-family: inherit;
}
.terminal-btn:hover { color: var(--text, #fff); border-color: var(--border-strong, #333); background: rgba(255,255,255,0.04); }
.terminal-btn.btn-ghost { width: auto; }
.terminal-btn.btn-icon { width: 32px; padding: 0; }
.terminal-btn.btn-icon svg { width: 15px; height: 15px; }
/* Novice therminal bar */
.novice-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #222);
  background: var(--panel, #0d1220);
}
.novice-bar.hidden { display: none; }
.novice-head { display: flex; align-items: baseline; gap: 8px; }
.novice-title { font-size: 13px; font-weight: 700; color: var(--accent, #34d399); }
.novice-sub { font-size: 11px; color: var(--text-dim, #8b93a7); }
.novice-ask { display: flex; gap: 8px; align-items: center; }
.novice-ask .text-input { flex: 1; }
.novice-send { flex-shrink: 0; }
.novice-guidance { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.18); }
.novice-guidance.hidden { display: none; }
.ng-command { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ng-label { color: var(--text-dim, #8b93a7); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }
.ng-command code { color: var(--accent, #34d399); }
.ng-explain { font-size: 12.5px; color: var(--text, #d4d4d4); }
.ng-risk { font-size: 11px; font-weight: 600; }
.ng-risk.low { color: var(--success, #34d399); }
.ng-risk.medium { color: var(--warn, #fbbf24); }
.ng-risk.high { color: var(--danger, #ef4444); }
.novice-bar .ng-err { font-size: 12px; color: var(--danger, #ef4444); }
.terminal-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 4px;
  background: var(--bg, #0a0a0a);
}
.terminal-container .xterm { height: 100%; }

/* Developer Mode */
.dev-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border, #262b34);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim, #98a1b0);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.dev-toggle svg { width: 14px; height: 14px; }
.dev-toggle:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--text, #e8ebf0);
}
.dev-toggle.active {
  background: rgba(251, 146, 60, 0.12);
  border-color: #fb923c;
  color: #fb923c;
}
body:not(.dev-mode) [data-dev-mode] {
  display: none !important;
}

/* ── Model Browser — Premium Design ────────────────────────────────────── */
.model-browser {
  max-width: 1080px;
  width: 96vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(14, 16, 19, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.model-browser .modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.model-browser .modal-head h2 {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #a0aec0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.model-browser-tabs {
  display: flex;
  gap: 3px;
  margin-left: auto;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 3px;
}
.model-tab {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim, #98a1b0);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.model-tab:hover { color: var(--text, #e8ebf0); background: rgba(255,255,255,0.04); }
.model-tab.active {
  background: var(--accent, #3b82f6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
/* ── DL toolbar (search + sort/filter row) ──────────────────────────────── */
.dl-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 24px 4px;
}
.dl-toolbar .model-browser-search { flex: 1; padding: 0; }
.dl-toolbar-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.dl-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--text, #e8ebf0);
  font-size: 11px;
  padding: 8px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.dl-select:focus { border-color: var(--accent, #3b82f6); }
.dl-select option { background: #1a1d22; color: #e8ebf0; }
.model-browser-search {
  padding: 8px 0 0;
}
.model-browser-search .text-input {
  width: 100%;
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  transition: all 0.2s;
}
.model-browser-search .text-input:focus {
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
  outline: none;
}
.model-browser-search .text-input::placeholder {
  color: var(--text-faint, #616a78);
}
/* ── HF Token row ──────────────────────────────────────────────────────── */
.dl-hf-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 8px;
}
.dl-hf-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #98a1b0);
  white-space: nowrap;
}
.dl-hf-input {
  flex: 1;
  max-width: 280px;
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--text);
  transition: border-color 0.2s;
}
.dl-hf-input:focus {
  border-color: var(--accent, #3b82f6);
  outline: none;
}
.dl-hf-hint {
  font-size: 10px;
  color: var(--text-faint, #616a78);
}
.dl-hf-hint.ok { color: #34d399; }
.dl-hf-hint.err { color: var(--red, #f43f5e); }
.model-browser-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 24px 16px;
  min-height: 200px;
  max-height: 55vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.model-browser-list::-webkit-scrollbar { width: 6px; }
.model-browser-list::-webkit-scrollbar-track { background: transparent; }
.model-browser-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.model-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-dim);
  font-size: 13px;
}
.model-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.model-category-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint, #616a78);
  padding: 12px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.model-category-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.04);
}

.model-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}
.model-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.model-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.model-card-icon.llm { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15)); }
.model-card-icon.image { background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(244,114,182,0.15)); }
.model-card-icon.voice { background: linear-gradient(135deg, rgba(52,211,153,0.15), rgba(16,185,129,0.15)); }
.model-card-icon.embedding { background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.15)); }
.model-card-icon.vision { background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(139,92,246,0.15)); }

.model-card-info { flex: 1; min-width: 0; }
.model-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8ebf0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-card-desc {
  font-size: 11px;
  color: var(--text-dim, #98a1b0);
  line-height: 1.4;
  margin-top: 1px;
}
.model-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.model-card-size {
  font-size: 10px;
  color: var(--text-faint, #616a78);
  padding: 1px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.model-card-dl {
  padding: 7px 18px;
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 8px;
  background: rgba(59,130,246,0.08);
  color: var(--accent, #3b82f6);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
}
.model-card-dl:hover {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(59,130,246,0.3);
  transform: scale(1.02);
}
.model-card-dl:active { transform: scale(0.98); }
.model-card-dl.installed {
  border-color: rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.08);
  color: #34d399;
  cursor: default;
}
.model-card-dl.installed:hover {
  transform: none;
  box-shadow: none;
}
.model-card-dl.downloading {
  border-color: rgba(251,191,36,0.4);
  background: rgba(251,191,36,0.08);
  color: #fbbf24;
  cursor: wait;
  pointer-events: none;
}
.model-card-dl.downloading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(251,191,36,0.3);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Model badges (params, quant, tools, speed) ──────────────────────── */
.model-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.model-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.model-badge.params { background: rgba(59,130,246,0.15); color: #60a5fa; }
.model-badge.quant { background: rgba(251,191,36,0.15); color: #fbbf24; }
.model-badge.tools { background: rgba(52,211,153,0.15); color: #34d399; }
.model-badge.no-tools { background: rgba(255,255,255,0.04); color: var(--text-faint, #616a78); }
.model-badge.speed-fast { background: rgba(52,211,153,0.15); color: #34d399; }
.model-badge.speed-medium { background: rgba(251,191,36,0.15); color: #fbbf24; }
.model-badge.speed-slow { background: rgba(244,63,94,0.15); color: #fb7185; }
.model-badge.ram { background: rgba(168,85,247,0.15); color: #c084fc; }
.model-badge.license { background: rgba(255,255,255,0.04); color: var(--text-faint, #616a78); }

/* ── Installed models section ─────────────────────────────────────────── */
.installed-section {
  padding: 0;
}
.installed-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #98a1b0);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.installed-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.04);
}
.installed-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(52,211,153,0.03);
  border: 1px solid rgba(52,211,153,0.1);
  border-radius: 10px;
  transition: all 0.2s;
}
.installed-card:hover {
  background: rgba(52,211,153,0.06);
  border-color: rgba(52,211,153,0.18);
}
.installed-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  background: rgba(52,211,153,0.1);
}
.installed-card-info { flex: 1; min-width: 0; }
.installed-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e8ebf0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.installed-card-path {
  font-size: 10px;
  color: var(--text-faint, #616a78);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.installed-card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.installed-card-size {
  font-size: 10px;
  color: var(--text-dim, #98a1b0);
}
.installed-card-quant {
  font-size: 9px;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  padding: 1px 5px;
  border-radius: 3px;
}
.installed-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.installed-action-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  transition: all 0.15s;
}
.installed-action-btn.load {
  border-color: rgba(59,130,246,0.3);
  color: #60a5fa;
}
.installed-action-btn.load:hover {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.5);
}
.installed-action-btn.delete {
  border-color: rgba(244,63,94,0.2);
  color: #fb7185;
}
.installed-action-btn.delete:hover {
  background: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.4);
}
.installed-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-faint, #616a78);
  font-size: 12px;
}
.ram-info {
  font-size: 10px;
  color: var(--text-faint);
  padding: 4px 0 8px;
  text-align: right;
}
.ram-info strong { color: var(--text-dim); }

/* ── Quant picker overlay ─────────────────────────────────────────────── */
.quant-picker {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: rgba(18, 20, 24, 0.97);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px;
  min-width: 260px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  display: none;
}
.quant-picker.open { display: block; }
.quant-picker-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
  padding: 2px 6px 6px;
}
.quant-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  border-radius: 11px;
  cursor: default;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.quant-picker-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.quant-picker-item.recommended {
  border-color: rgba(52,211,153,0.35);
  background: linear-gradient(135deg, rgba(52,211,153,0.06), rgba(255,255,255,0.02));
}
.quant-picker-item.recommended:hover {
  border-color: rgba(52,211,153,0.5);
}
.quant-picker-item.installed { opacity: 0.65; }
.quant-picker-item .qp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quant-picker-item .qp-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quant-picker-item .qp-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.quant-picker-item .qp-size {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.quant-picker-item .dl-btn-sm {
  padding: 6px 16px;
  border: 1px solid rgba(59,130,246,0.35);
  border-radius: 8px;
  background: rgba(59,130,246,0.08);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s;
}
.quant-picker-item .dl-btn-sm:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(59,130,246,0.3);
}
.quant-picker-item .dl-btn-sm:disabled {
  border-color: rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.08);
  color: #34d399;
  cursor: default;
}
.quant-picker-item .dl-btn-sm.done:disabled {
  border-color: rgba(52,211,153,0.4);
  color: #34d399;
}

/* Quant picker header (Back + repo) */
.quant-picker-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 10px;
}
.qp-back {
  align-self: flex-start;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.qp-back:hover { color: var(--text); border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.qp-title { font-size: 12px; color: var(--text-dim); }
.qp-title .qp-repo { font-weight: 600; color: var(--text); }
.qp-note { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
.qp-note b { color: var(--text); }

/* ── Voice Mode (accessibility) ─────────────────────────────────────── */
.voice-mode-btn {
  position: relative;
}
.voice-mode-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.voice-mode-btn.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: voice-pulse 1.5s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Voice mode overlay */
.voice-mode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  flex-direction: column;
  gap: 24px;
}
.voice-mode-overlay.active { display: flex; }
.voice-mode-indicator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: voice-breathe 2s ease-in-out infinite;
}
@keyframes voice-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,211,238,0.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 30px 10px rgba(34,211,238,0.2); }
}
.voice-mode-text {
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  max-width: 400px;
}
.voice-mode-commands {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  max-width: 500px;
  line-height: 1.6;
}

/* High contrast mode for accessibility */
body.high-contrast {
  --bg: #000;
  --surface: #111;
  --panel: #1a1a1a;
  --panel-2: #222;
  --border: #444;
  --border-strong: #666;
  --text: #fff;
  --text-dim: #ccc;
  --text-faint: #999;
  --accent: #00e5ff;
  --accent-strong: #00b8d4;
}

/* Large text mode */
body.large-text {
  font-size: 18px;
}
body.large-text .rail-label { font-size: 11px; }
body.large-text .chat-msg { font-size: 16px; }
body.large-text input, body.large-text textarea, body.large-text select {
  font-size: 16px;
}

/* Screen reader only (visually hidden, announced by screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Live region for dynamic announcements */
[aria-live] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ── Toasts ─────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(20,22,28,0.95);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  font-size: 13px;
  border-left: 3px solid var(--accent);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.25s;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: var(--red); }
.toast-success { border-left-color: #22c55e; }
.toast-warning { border-left-color: #f59e0b; }

/* ── Model browser pagination ───────────────────────────────────────── */
.model-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--text-dim);
  font-size: 12px;
}
.model-pagination button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
}
.model-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.model-pagination button:not(:disabled):hover {
  border-color: var(--accent);
}
.model-card-dl.failed {
  background: rgba(244,63,94,0.15);
  color: var(--red);
  border-color: var(--red);
}

/* ── Reduced motion (accessibility) ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Loading skeleton for chat bubbles while assistant streams ────────── */
.msg.assistant::marker { content: none; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.typing-indicator { display: inline-flex; gap: 5px; align-items: center; padding: 6px 2px; }
.typing-indicator span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: typing-dot 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .typing-indicator span { animation: none; opacity: .6; }
}

/* Model library — installed models table */
.model-table-wrap { overflow: auto; }
.model-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.model-table thead th {
  text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 600;
  color: var(--text-dim, #8ea0b8); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); white-space: nowrap;
}
.model-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle; color: var(--text, #e6edf7);
}
.model-table tbody tr:hover { background: rgba(52,211,153,.05); }
.td-model { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.td-model .installed-card-name { font-size: 12px; }
.td-type, .td-quant, .td-size { white-space: nowrap; }
.td-path, .th-path { color: var(--text-faint, #506480); font-family: monospace; font-size: 10px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.td-actions, .th-actions { text-align: right; white-space: nowrap; width: 1%; }
.installed-sort { margin-left: auto; font-size: 10px; color: var(--text-dim, #8ea0b8); display: inline-flex; align-items: center; gap: 6px; text-transform: none; font-weight: 500; white-space: nowrap; }
.installed-sort .dl-select { font-size: 11px; padding: 3px 8px; }
.installed-header { flex-wrap: wrap; }
.installed-header .count { color: var(--text-faint, #506480); }
.ram-info { color: var(--text-dim, #8ea0b8); font-weight: 500; }
.model-table-wrap { overflow-x: auto; }
.installed-action-btn { padding: 5px 12px; font-size: 11px; border-radius: 6px; border: none; cursor: pointer; white-space: nowrap; }
.td-model .installed-card-icon { width: 24px; height: 24px; font-size: 12px; flex-shrink: 0; }

/* Model library — infinite scroll */
.model-stream-sentinel { padding: 10px; text-align: center; }
.mb-load-more {
  padding: 9px 18px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,.1));
  background: var(--panel-2, #162040); color: var(--text, #e6edf7); font-size: 13px; cursor: pointer;
}
.mb-load-more:hover { border-color: var(--accent, #22d3ee); color: var(--accent, #22d3ee); }
.mb-load-more:disabled { opacity: .5; cursor: default; }

/* === pumFORGE model pill - prominent top-center (midnight/cyan, 420px) === */
.model-pill-wrap{display:flex;align-items:center;justify-content:center;flex:1;gap:8px;min-width:0;z-index:1}
.model-pill{display:inline-flex;align-items:center;gap:8px;width:420px;max-width:42vw;justify-content:space-between;background:var(--panel);border:1px solid var(--border-strong);color:var(--text);border-radius:999px;padding:8px 12px;font-size:14px;font-family:var(--font-sans);font-weight:500;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.3),0 0 20px rgba(34,211,238,.15);transition:border-color 120ms cubic-bezier(0.2,0.8,0.2,1),box-shadow 120ms cubic-bezier(0.2,0.8,0.2,1),background 120ms cubic-bezier(0.2,0.8,0.2,1)}
.model-pill:hover{border-color:#22d3ee;background:var(--panel-2);box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 24px rgba(34,211,238,.22)}
.model-pill:focus-visible{outline:2px solid #22d3ee;outline-offset:2px;box-shadow:0 0 0 3px rgba(34,211,238,.12),0 0 20px rgba(34,211,238,.15)}
.model-pill-left{display:inline-flex;align-items:center;gap:8px;min-width:0}
.model-pill-icon{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#1a2744;border:1px solid rgba(255,255,255,.06)}
.model-pill-icon-fallback{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:rgba(34,211,238,.12);color:#22d3ee;border-radius:999px;font-size:12px;flex-shrink:0}
.model-pill-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.model-pill-hint{margin-left:auto;background:#1a2744;border:1px solid #1c2a4a;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;line-height:1;padding:4px 6px;border-radius:6px;flex-shrink:0}
.model-pill-chevron{color:var(--text-dim);flex-shrink:0}
.model-select-hidden{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.topbar{position:relative}
@media(max-width:900px){.model-pill{width:320px;max-width:60vw}.model-pill-wrap{justify-content:center}}
/* accessibility focus */
*:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}

/* Voice-page camera button + preview */
.voice-ctrl-btn#vvCamera.active { color: var(--accent, #22d3ee); background: var(--accent-soft, rgba(34,211,238,0.12)); box-shadow: 0 0 0 4px rgba(52,211,153,0.12); }
.voice-ctrl-btn#vvCamera.error { color: var(--red); box-shadow: 0 0 0 4px rgba(248,113,113,0.15); }
.voice-ctrl-btn#vvCamera.requesting { pointer-events: none; opacity: 0.8; }
.vc-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent, #22d3ee); border-top-color: transparent; animation: spin 0.9s linear infinite; position: absolute; }
.voice-camera-preview { position: relative; max-width: 200px; border-radius: 12px; overflow: hidden; background: #000; margin-top: 16px; box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.4)); border: 1px solid var(--border, rgba(255,255,255,0.06)); }
.voice-camera-preview video { display: block; width: 100%; }
.voice-cam-dot { position: absolute; top: 8px; left: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--red, #f87171); box-shadow: 0 0 8px rgba(248,113,113,0.7); }
.voice-cam-close { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; cursor: pointer; display: grid; place-items: center; }
.voice-cam-close:hover { background: rgba(0,0,0,0.8); }

/* Contextual mic + Voice hint (top bar / chat) */
.icon-btn.mic-toggle.voice-inactive { opacity: 0.4; }
.icon-btn.mic-toggle.voice-inactive:hover { opacity: 0.7; background: var(--panel); color: var(--text); }
.use-voice-hint {
  display: block; margin: 6px auto 0; padding: 0 12px; background: none; border: none;
  color: var(--text-dim, #8ea0b8); font-size: 12px; cursor: pointer;
}
.use-voice-hint:hover { color: var(--accent, #22d3ee); }

/* Terminal — repo explorer + sandbox panel */
.terminal-main { display: flex; flex: 1; min-height: 0; }
.terminal-repo { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); }
.terminal-repo-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.terminal-repo-list { flex: 1; overflow-y: auto; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.repo-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-mono); }
.repo-item:hover { background: var(--panel); color: var(--text); }
.repo-lang { flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; }
.repo-empty { color: var(--text-faint); font-size: 12px; padding: 12px; text-align: center; }
.terminal-sandbox { border-top: 1px solid var(--border); background: var(--surface); padding: 8px 0 0; }
.terminal-sandbox-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px; }
.terminal-sandbox-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-right: auto; }
.terminal-sandbox #sandboxCode { margin: 0 12px; }
.terminal-sandbox-out { max-height: 220px; overflow-y: auto; padding: 8px 12px 12px; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.sb-ok { color: var(--success, #34d399); }
.sb-err { color: var(--red, #f87171); }
.sb-line { padding: 1px 0; }

/* Tool subcategory tags (mix-and-match groups) */
.subcat-group { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.subcat-empty { color: var(--text-faint, #506480); font-size: 12px; padding: 6px 0; }
.subcat-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--panel, #111a2e); border: 1px solid var(--border, #1c2a4a);
  color: var(--text-dim, #8ea0b8); user-select: none; transition: all 0.12s;
}
.subcat-tag:hover { border-color: var(--cc, var(--accent, #22d3ee)); color: var(--text, #e6edf7); }
.subcat-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc, transparent); flex: none;
}
.subcat-tag.on {
  background: color-mix(in srgb, var(--cc, #22d3ee) 18%, transparent);
  border-color: var(--cc, #22d3ee);
  color: #e6edf7; font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc, #22d3ee) 25%, transparent);
}
.subcat-tag .sc-count { font-size: 10px; color: var(--text-faint, #506480); }
.subcat-tag.on .sc-count { color: var(--cc, #22d3ee); }

/* Task checklist (renderChatMd) */
.task-item { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; line-height: 1.5; }
.gen-img { margin: 8px 0; }
.gen-img img { max-width: 100%; max-height: 44vh; border-radius: 10px; border: 1px solid var(--border, #1c2a4a); display: block; }
.gen-img-link { display: block; width: fit-content; }
.gen-img-bar { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.gen-img-btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border, #1c2a4a); background: var(--panel-2, #162040); color: var(--text, #dbe2f1); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; }
.gen-img-btn:hover { background: var(--panel, #111a2e); border-color: var(--accent, #22d3ee); }
.gen-img-btn:disabled { opacity: 0.6; cursor: default; }
/* two-column image + settings layout */
.gen-img-row { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0; flex-wrap: wrap; }
.gen-img-row > .gen-img { margin: 0; flex: 0 1 auto; min-width: 0; }
.gen-img-row > .gen-img img { max-height: 34vh; }
.gen-img-row > .gen-img-meta { flex: 1 1 200px; min-width: 150px; font-size: 12px; color: var(--text-dim, #8ea0b8); padding: 10px 12px; border: 1px solid var(--border, #1c2a4a); border-radius: 10px; background: var(--panel-2, #162040); }
.gen-img-meta strong { color: var(--text, #dbe2f1); }
.gen-img-meta .inline-code { color: var(--accent, #22d3ee); font-size: 11px; word-break: break-word; }
.task-item.done { color: var(--text-faint, #506480); }
.task-item.done s { color: var(--text-faint, #506480); }
.task-cb { accent-color: var(--accent, #22d3ee); width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }
.li { padding: 2px 0; }
.li.ol { padding-left: 2px; }
.inline-code { background: var(--panel-2, #162040); padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; }
.code-block { background: var(--panel, #111a2e); border: 1px solid var(--border, #1c2a4a); border-radius: 10px; margin: 8px 0; overflow: hidden; }
.code-block pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.code-block code { font-family: var(--font-mono); font-size: 13px; background: transparent; }
.code-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--panel-2, #162040); border-bottom: 1px solid var(--border, #1c2a4a); }
.code-lang { font-size: 11px; font-weight: 600; color: var(--accent, #22d3ee); text-transform: uppercase; letter-spacing: .05em; }
.code-actions { display: flex; gap: 6px; }
.code-btn { border: none; background: transparent; color: var(--text-dim, #8ea0b8); font-size: 12px; cursor: pointer; padding: 3px 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; }
.code-btn:hover { background: var(--surface, #0d1526); color: var(--text, #e6edf7); }
.code-btn svg { width: 14px; height: 14px; }

/* ── Terminal Work-Friend (Ava/copilot) ─────────────────────────────────── */
.terminal-copilot {
  width: 360px;
  flex-shrink: 0;
  height: 100%;
  border-left: 1px solid var(--border, #262b34);
  background: var(--surface, #0d1526);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}
.terminal-copilot.hidden { display: none; }
.copilot-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #262b34);
}
.copilot-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  color: var(--accent-strong, #4cc38a);
  background: color-mix(in srgb, var(--accent, #4cc38a) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #4cc38a) 30%, transparent);
}
.copilot-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.copilot-name { font-size: 13px; font-weight: 700; color: var(--text, #e6edf7); }
.copilot-mode { font-size: 11px; color: var(--text-dim, #8ea0b8); }
.copilot-close { margin-left: auto; }
.copilot-lock {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border, #262b34);
  font-size: 11px; color: var(--text-dim, #8ea0b8);
}
.copilot-trust-label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.copilot-head .lock-toggle.active, .copilot-lock .lock-toggle.active { background: rgba(255, 145, 90, 0.15); border-color: #ff915a; color: #ff915a; }
.copilot-log {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  align-self: stretch;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  font-size: 12.5px;
}
.copilot-empty { color: var(--text-dim, #8ea0b8); line-height: 1.5; font-size: 12.5px; max-width: 100%; overflow-wrap: break-word; }
.copilot-empty p { margin: 0 0 6px; }
.co-row { display: flex; gap: 8px; }
.co-badge {
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; margin-top: 2px;
  height: fit-content;
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  position: relative; top: 2px;
}
.co-friend { color: #4cc38a; background: rgba(76, 195, 138, 0.12); border: 1px solid rgba(76, 195, 138, 0.25); }
.co-you { color: #7aa2f7; background: rgba(122, 162, 247, 0.12); border: 1px solid rgba(122, 162, 247, 0.25); }
.co-body { flex: 1 1 auto; min-width: 0; color: var(--text, #e6edf7); line-height: 1.45; word-break: break-word; }
.co-body p { margin: 0 0 6px; }
.co-body > :last-child { margin-bottom: 0; }
.co-body pre { margin: 6px 0; overflow-x: auto; }
.co-body code.mono { font-family: var(--font-mono, monospace); font-size: 12px; background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 4px; }
.co-av { color: var(--text-dim, #8ea0b8); }
.co-caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: text-bottom; background: #4cc38a; animation: co-blink 1s steps(2, start) infinite; }
@keyframes co-blink { 50% { opacity: 0; } }
.co-stream { min-height: 1.2em; }
.co-stream-body { flex: 1 1 auto; min-width: 0; min-height: 1.2em; word-break: break-word; }
.co-stream-body p { margin: 0 0 6px; }
.co-stream-body code { font-family: var(--font-mono, monospace); font-size: 12px; }
.co-stream-body pre { margin: 6px 0; overflow-x: auto; }
.co-err { color: #ff8a8a; }
.co-cmd {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 6px; padding: 8px; border-radius: 8px;
  background: rgba(76, 195, 138, 0.05); border: 1px solid rgba(76, 195, 138, 0.18);
}
.co-cmd-spark { width: 4px; align-self: stretch; border-radius: 2px; background: var(--accent, #4cc38a); }
.co-cmd-body { flex: 1; min-width: 0; }
.co-cmd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.co-btn {
  border: 1px solid var(--border, #262b34);
  background: var(--panel, #141922);
  color: var(--text, #e6edf7);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.co-btn:hover { border-color: var(--accent, #4cc38a); color: var(--text, #e6edf7); }
.co-btn:disabled { opacity: .5; cursor: default; }
/* Agent consent card (forgey agent proposes an action; nothing runs silently) */
.co-consent-card { margin: 6px 0; }
.co-consent-head { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text, #e6edf7); margin-bottom: 6px; }
.co-consent-summary { font-size: 12.5px; color: var(--dim, #a3adc2); background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.06)); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; }
.co-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.co-consent-actions .co-btn { font-size: 12px; padding: 6px 12px; }
.co-consent-actions .co-run { background: var(--accent, #4cc38a); color: #06110b; font-weight: 700; }
.co-consent-actions .co-decline { color: #f87171; }
.co-risk {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; height: fit-content;
}
.co-risk-low { color: #4cc38a; background: rgba(76,195,138,.12); border: 1px solid rgba(76,195,138,.3); }
.co-risk-med { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); }
.co-risk-high { color: #ff8a8a; background: rgba(255,138,138,.14); border: 1px solid rgba(255,138,138,.35); }
.co-risk-none { color: #8ea0b8; background: rgba(142,160,184,.1); border: 1px solid rgba(142,160,184,.25); }
.co-risk-critical { color: #fff; background: rgba(220,38,38,.25); border: 1px solid rgba(248,113,113,.6); }
.co-run { background: rgba(76, 195, 138, 0.14); border-color: rgba(76, 195, 138, 0.4); color: #4cc38a; }
.co-run:hover { background: rgba(76, 195, 138, 0.22); }
.co-cpy { background: transparent; }
.co-cmd-run { color: var(--text-dim, #8ea0b8); }
.co-dry-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim, #8ea0b8); margin-bottom: 4px; }
.co-dry-out { font-family: var(--font-mono, monospace); font-size: 11.5px; background: #0a0a0a; border: 1px solid var(--border, #262b34); padding: 8px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; margin: 0; }
.co-dry-foot { font-size: 10.5px; color: var(--text-faint, #6b7280); margin-top: 4px; }
.co-consent-cmd {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: #0a0a0a; border: 1px solid var(--border, #262b34);
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text, #e6edf7);
  white-space: pre-wrap; word-break: break-word;
}
.copilot-ask { border-top: 1px solid var(--border, #262b34); padding: 8px 10px; }
/* Agent discovery hint — guides the owner's one-click toward the agent loop */
.copilot-agent-hint { font-size: 11.5px; color: var(--dim, #a3adc2); background: rgba(34,211,238,.05); border: 1px solid rgba(34,211,238,.14); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; line-height: 1.5; }
.copilot-agent-hint code { background: rgba(255,255,255,.06); border-radius: 4px; padding: 1px 5px; font-size: 11px; color: var(--accent, #22d3ee); }
.copilot-agent-hint b { color: var(--text, #e6edf7); }
.copilot-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.copilot-chips .chip {
  border: 1px solid var(--border, #262b34); background: transparent;
  color: var(--text-dim, #8ea0b8); font-size: 11px; padding: 4px 9px;
  border-radius: 999px; cursor: pointer; transition: all .15s; font-family: inherit;
}
.copilot-chips .chip:hover { color: var(--text, #e6edf7); border-color: var(--accent, #4cc38a); }
.copilot-input-row { display: flex; align-items: flex-end; gap: 8px; }
.copilot-input-row textarea {
  flex: 1; resize: none; min-height: 34px; max-height: 160px;
  border: 1px solid var(--border, #262b34); border-radius: 8px;
  background: var(--panel, #141922); color: var(--text, #e6edf7);
  padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.35;
}
.copilot-input-row textarea:focus { outline: none; border-color: var(--accent, #4cc38a); }
.copilot-send { flex-shrink: 0; }
.terminal-view .copilot-toggle.active,
.terminal-view .copilot-toggle[aria-pressed="true"] {
  background: rgba(76, 195, 138, 0.14); border-color: rgba(76, 195, 138, 0.4); color: #4cc38a;
}
@media (max-width: 900px) {
  .terminal-copilot { width: 100%; max-width: 420px; }
}

/* ── Model params: idle auto-unload note ────────────────────────────────── */
.mp-p.mp-note {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--text-dim, #8ea0b8);
  line-height: 1.4;
  margin-top: -4px;
}

/* ── Settings Hub (v1.3.0) ───────────────────────────────────────────────── */
.modal-card.settings-card { width: min(920px, 94vw); padding: 18px; }
.settings-hub-version { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-left: 8px; align-self: center; }
.settings-hub { display: flex; gap: 0; min-height: 0; flex: 1; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface, #0d1526); }
.settings-nav {
  width: 232px; flex-shrink: 0; background: var(--panel-2, #10141c);
  border-right: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  max-height: min(68vh, 640px); overflow-y: auto;
}
.settings-nav-masthead {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.masthead-mark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  color: #04101a; background: linear-gradient(135deg, var(--accent, #22d3ee), var(--green, #4cc38a));
}
.masthead-text { display: flex; flex-direction: column; line-height: 1.15; }
.masthead-text b { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--accent, #22d3ee); }
.masthead-text span { font-size: 12px; color: var(--text-dim, #8ea0b8); }
.nav-group-title {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint, #5a6d8a); padding: 10px 8px 4px;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent;
  color: var(--text-dim); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.settings-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .8; }
.settings-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.settings-nav-item.active { background: rgba(76, 195, 138, 0.12); color: var(--text); border-color: rgba(76, 195, 138, 0.3); }
.settings-nav-item.active svg { color: var(--green, #4cc38a); opacity: 1; }
.settings-panes { flex: 1; padding: 18px 22px; overflow-y: auto; max-height: min(68vh, 640px); background: var(--panel, #141922); }
.settings-pane { display: none; }
.settings-pane.active { display: block; }
.settings-pane:focus { outline: none; }
.pane-title {
  font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 2px;
  display: flex; align-items: center; gap: 10px;
}
.pane-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(76,195,138,.35), transparent); }
.pane-sub { font-size: 12.5px; color: var(--text-dim); margin: 0 0 16px; }
.pane-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.pane-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pane-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin: 0 0 12px;
}
.readonly-val { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hint { font-weight: 400; text-transform: none; color: var(--text-faint); }
.settings-dirty { font-size: 12px; color: var(--accent, #4cc38a); }

/* appearance preview */
.appearance-preview {
  margin-top: 16px; padding: 14px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--surface, #0d1526); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px;
}
.appearance-preview .preview-msg { padding: 8px 12px; border-radius: 8px; max-width: 78%; }
.preview-msg.you { align-self: flex-end; background: var(--accent-soft, #12203a); color: var(--text); }
.preview-msg.friend { align-self: flex-start; background: var(--panel-2, #10141c); color: var(--text); }
.preview-msg code { font-family: var(--font-mono, monospace); background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 4px; }

/* hardware */
.hardware-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.hw-card {
  padding: 12px; border-radius: 10px; background: var(--panel-2, #10141c);
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px;
}
.hw-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.hw-value { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-gpu-list { display: flex; flex-direction: column; gap: 6px; }
.hw-gpu-item { font-size: 12.5px; color: var(--text-dim); padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; }
.hw-monitor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hw-metric { padding: 12px; border-radius: 10px; background: var(--panel-2, #10141c); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.hw-metric span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.hw-metric strong { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* radio groups */
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.radio input { width: auto; margin: 0; }

/* dirty-dot on Settings Hub nav */
.settings-nav-item .nav-dirty { margin-left: auto; color: var(--accent, #4cc38a); font-weight: 800; }

/* ── Engine & Backends (Runtime) ─────────────────────────────────────── */
.engine-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.engine-ver { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.engine-ver code { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text); }
.ev-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.ev-bin { font-size: 11px; color: var(--text-faint); }
.engine-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.engine-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
  font-size: 12.5px;
}
.ei-name { flex: 1; font-weight: 600; color: var(--text); min-width: 0; }
.ei-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-left: 6px; }
.ei-ver { font-family: var(--font-mono, monospace); color: var(--text-dim); font-size: 12px; }
.ev-latest { color: var(--green); font-size: 11px; font-weight: 700; }
.ev-installed { color: var(--accent); font-size: 11px; font-weight: 600; }
.ev-missing { color: var(--text-faint); font-size: 11px; }
.ev-install { width: auto; height: auto; padding: 5px 12px; font-size: 11px; font-weight: 600; color: var(--text-dim); border-radius: 999px; }
.ev-install:hover { color: var(--accent, #22d3ee); border-color: rgba(34,211,238,.4); }
.engine-empty { color: var(--text-dim); font-size: 12px; }

/* voice-grid empty state */
.voice-empty { color: var(--text-dim); font-size: 12.5px; padding: 14px; text-align: center; grid-column: 1 / -1; }

/* config history */
.cfg-hist-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 12px; gap: 10px; }
.cfg-hist-item b { color: var(--accent); font-variant-numeric: tabular-nums; }
.cfg-hist-item span { color: var(--text-faint); font-size: 11px; }
.secret-field { cursor: pointer; }
.secret-field[readonly] { color: var(--text-dim); }

/* first-run tour */
.tour-card { width: min(480px, 92vw); }
.tour-body { position: relative; text-align: center; padding: 6px 4px 12px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.tour-orb { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(40px); opacity: .35; background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent2)); pointer-events: none; }
.tour-figure { position: relative; width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; background: var(--accent-soft); border: 1px solid rgba(34,211,238,.2); }
.tour-text { position: relative; font-size: 15px; line-height: 1.6; color: var(--text-dim); max-width: 340px; }
.tour-text b { color: var(--text); }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.tour-dots .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background .2s, transform .2s; }
.tour-dots .tdot.on { background: var(--accent); transform: scale(1.2); }

/* engine updates */
.engine-updates { margin-bottom: 10px; }
.engine-update-status { font-size: 12px; margin-top: 8px; min-height: 16px; }

/* ── Engine card (v1.3.1) ─────────────────────────────────────────────── */
.engine-card {
  border-radius: 10px; padding: 16px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(16,26,42,.9), rgba(10,16,28,.95));
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  color: var(--text);
}
.engine-card-head { display: flex; align-items: center; gap: 10px; }
.engine-icon { width: 22px; height: 22px; color: var(--accent, #22d3ee); flex: none; }
.engine-card-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.engine-badge {
  background: rgba(34,211,238,.12); color: var(--accent, #22d3ee);
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  font-family: var(--font-mono, monospace); white-space: nowrap;
}
.ev-exp { background: rgba(251,191,36,.14); color: #fbbf24; margin-left: 6px; }
.hw-ov { color: #fbbf24; font-weight: 600; }
.engine-admin-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faint); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; background: var(--panel-2);
}
.engine-card-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-dim); min-height: 18px; }
.es-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #4cc38a); flex: none; }
.es-dot.st-warn { background: #eab308; }
.es-dot.st-err { background: #ef4444; }
.es-dot.st-busy { background: var(--accent, #22d3ee); animation: es-pulse 1.2s ease-in-out infinite; }
@keyframes es-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.engine-card-controls { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.engine-channel-row { display: flex; align-items: center; gap: 8px; }
.engine-channel-row label { font-size: 12px; color: var(--text-dim); }
.engine-channel-row .dl-select { flex: 1; max-width: 200px; }
.engine-card-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.engine-card-btns .primary-btn:disabled { opacity: .45; cursor: default; }
.engine-more { position: relative; }
.engine-more .caret { font-size: 9px; opacity: .7; }
.engine-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 180px; background: var(--panel-2, #0b1220); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 2px;
}
.engine-more-menu.hidden { display: none; }
.engine-more-menu button {
  text-align: left; background: none; border: 0; color: var(--text);
  font-size: 12.5px; padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.engine-more-menu button:hover { background: var(--border); color: var(--accent); }
.engine-more-menu .mm-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.engine-progress { margin-top: 12px; }
.progress-bar {
  background: var(--panel-2, #0b1220); height: 10px; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--border);
}
.progress-fill {
  background: linear-gradient(90deg, var(--accent, #22d3ee), var(--green, #10b981));
  height: 100%; width: 0%; transition: width 200ms linear;
}
.progress-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.progress-meta .pm-sep { opacity: .5; }
.btn-link { background: none; border: 0; color: var(--accent, #22d3ee); cursor: pointer; font-size: 12px; padding: 0 2px; text-decoration: underline; }
.engine-card-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.engine-card-foot small { color: var(--text-faint); font-size: 11px; }
.engine-card-foot a { color: var(--accent, #22d3ee); text-decoration: none; }
.engine-corr { font-family: var(--font-mono, monospace); }

/* engine modals */
.ec-checksum { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim); word-break: break-all; max-width: 100%; }
.engine-audit-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.ea-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 12px; }
.ea-item .ea-top { display: flex; justify-content: space-between; gap: 8px; }
.ea-item .ea-action { font-weight: 600; color: var(--accent); }
.ea-item .ea-ts { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.ea-item .ea-corr { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text-faint); }
.engine-info-body { font-size: 12px; line-height: 1.6; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; max-height: 55vh; overflow: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }

/* ── Forgey command layer (v1.4.0) ─────────────────────────────────────── */
.forgey-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px; }
.forgey-chips-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent, #22d3ee); margin-right: 2px; }
.fg-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.22); color: var(--text-dim); cursor: pointer; font-family: var(--font-mono, monospace); }
.fg-chip:hover { color: var(--text); border-color: rgba(34,211,238,.5); }

/* forgey job card in the copilot log */
.co-forgey { border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(16,26,42,.8), rgba(10,16,28,.9)); margin: 8px 0; max-height: 45vh; display: flex; flex-direction: column; }
.co-fg-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; flex-wrap: wrap; }
.co-fg-verb { font-weight: 800; color: var(--accent, #22d3ee); font-size: 13px; }
.co-fg-raw { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim); flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-fg-id { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono, monospace); }
.co-fg-status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.co-fg-status.s-previewed { color: #22d3ee; background: rgba(34,211,238,.12); }
.co-fg-status.s-approved { color: #fbbf24; background: rgba(251,191,36,.12); }
.co-fg-status.s-done { color: #4cc38a; background: rgba(76,195,138,.12); }
.co-fg-status.s-failed { color: #ff8a8a; background: rgba(255,138,138,.14); }
.co-fg-status.s-rolled_back { color: #c084fc; background: rgba(192,132,252,.14); }
.co-fg-body { padding: 0 12px 12px; border-top: 1px solid var(--border); overflow-y: auto; flex: 1; min-height: 0; }
.co-fg-preview { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim); background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 8px; padding: 10px; white-space: pre-wrap; max-height: 30vh; overflow: auto; margin-top: 8px; }
.co-fg-files { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.co-fg-file { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim); display: flex; justify-content: space-between; border-bottom: 1px dashed var(--border); padding: 3px 0; }
.co-fg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.co-fg-actions .co-btn { font-size: 11px; padding: 5px 12px; }
.co-fg-note { font-size: 11px; color: var(--text-faint); margin-top: 8px; line-height: 1.5; }
.co-fg-collapse { font-size: 11px; color: var(--accent); cursor: pointer; margin-left: auto; user-select: none; }
.co-fg-tools { font-size: 10px; color: var(--text-faint); margin-top: 6px; }
.co-fg-result { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim); background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 8px; padding: 10px; white-space: pre-wrap; max-height: 20vh; overflow: auto; margin-top: 8px; }

/* ── copilot panel layout tidy (v1.4.1) ──────────────────────────────── */
.copilot-head .lock-toggle, .copilot-lock .lock-toggle {
  width: auto; height: auto; white-space: nowrap; flex: none;
  padding: 4px 11px; font-size: 11px; font-weight: 600;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.copilot-head .lock-toggle::before, .copilot-lock .lock-toggle::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint, #6b7280); transition: background .2s;
}
.copilot-head .lock-toggle.active::before, .copilot-lock .lock-toggle.active::before { background: #ff915a; }
.copilot-head .lock-toggle .lock-ico, .copilot-lock .lock-toggle .lock-ico { display: none; }
.copilot-lock { flex-wrap: wrap; padding: 7px 12px; }
.copilot-trust-label { white-space: nowrap; font-size: 10px; color: var(--text-faint, #6b7280); }
.copilot-trust-label input { accent-color: var(--accent, #4cc38a); }

/* chips — prompt + forgey, consistent compact pills */
.copilot-ask { padding: 9px 12px; display: flex; flex-direction: column; gap: 7px; }
.copilot-chips { margin: 0; gap: 5px; }
.copilot-chips .chip,
.forgey-chips .fg-chip { font-size: 11px; padding: 4px 10px; }
.forgey-chips { margin: 0; gap: 5px; }
.forgey-chips-label { font-size: 9px; padding-right: 2px; }

/* the scrollable log + empty state */
.copilot-log { padding: 8px 12px; }
.copilot-empty { color: var(--text-dim, #8ea0b8); font-size: 11.5px; line-height: 1.6; }
.copilot-empty p { margin: 4px 0; }

/* ── Model Hub (model picker) v1.5.0 ───────────────────────────────────── */
.modal-card.model-hub { width: min(720px, 94vw); max-height: 86vh; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.model-pick.model-hub .modal-head { border-bottom: 1px solid var(--border); }
.model-hub .hub-head { gap: 10px; }
.model-hub .hub-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.2); padding: 4px; flex: none; }
.model-hub .hub-head-text h2 { margin: 0; font-size: 1.15rem; }
.model-hub .hub-sub { margin: 0; font-size: 11px; color: var(--text-dim, #8ea0b8); }
.model-hub .mp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--border); }
.model-hub .mp-toolbar .text-input { flex: 1; min-width: 180px; }
.model-hub .mp-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.model-hub .mp-filters .dl-select { font-size: 11px; padding: 6px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); }
.model-hub .mp-sort { display: flex; gap: 4px; margin-left: auto; }
.model-hub .mp-sort-btn { font-size: 11px; padding: 5px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
.model-hub .mp-sort-btn.active { color: var(--accent); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.model-hub .mp-list { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.mp-card { border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(16,26,42,.85), rgba(10,16,28,.9)); padding: 11px 13px; }
.mp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-card-name { font-weight: 700; font-size: 13px; color: var(--text); font-family: var(--font-mono, monospace); word-break: break-all; }
.mp-size-badge { flex: none; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; }
.mp-size-badge.sz-green { color: #4cc38a; background: rgba(76,195,138,.12); border: 1px solid rgba(76,195,138,.3); }
.mp-size-badge.sz-orange { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); }
.mp-size-badge.sz-red { color: #ff8a8a; background: rgba(255,138,138,.14); border: 1px solid rgba(255,138,138,.35); }
.mp-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.mp-source-tag, .mp-quant, .mp-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; }
.mp-source-tag { color: var(--accent); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.2); }
.mp-quant { color: var(--green); background: rgba(76,195,138,.08); border: 1px solid rgba(76,195,138,.2); }
.mp-type { color: var(--text-dim); background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.mp-card-hw { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.mp-card-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.mp-card-actions .co-btn { font-size: 11px; padding: 5px 12px; }
.mp-card-actions .mp-load { border-color: rgba(52,211,153,.4); color: var(--green); background: rgba(52,211,153,.1); }
.mp-card-actions .mp-load:hover { background: rgba(52,211,153,.2); }
.model-hub .mp-adv { border-top: 1px solid var(--border); }
.model-hub .mp-adv-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 10px 12px; cursor: pointer; text-align: left; }
.model-hub .mp-adv-toggle:hover { color: var(--text); }
.model-hub .mp-adv-body { padding: 0 12px 10px; border-top: 1px solid var(--border); }
.model-hub .mp-manual { display: flex; align-items: center; gap: 7px; padding: 9px 0; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.model-hub .mp-manual input { accent-color: var(--accent); }
.model-hub .mp-hint { font-size: 10px; color: var(--text-faint); }
.model-hub .mp-adv-fields { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 8px; }
.model-hub .mp-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding: 9px 12px; font-size: 11px; }
.model-hub .mp-footer a { color: var(--accent); text-decoration: none; }
.model-hub .mp-footer a:hover { text-decoration: underline; }
.mp-history { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; max-height: 50vh; overflow: auto; }
.mp-hist-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 12px; }
.mp-hist-item b { color: var(--accent); font-family: var(--font-mono, monospace); }
.mp-hist-item .ea-ts { color: var(--text-faint); font-size: 11px; }
.mp-hist-item.bench-rep:hover { border-color: var(--border-strong); background: var(--panel-3, #1a2230); }
.mp-pass { color: #22c55e; font-weight: 700; }
.mp-fail { color: #ef4444; font-weight: 700; }
.bench-back { margin-bottom: 6px; }
.bench-results { display: flex; flex-direction: column; gap: 4px; }
.bench-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); font-size: 11.5px; }
.bench-id { color: var(--text-dim); font-family: var(--font-mono, monospace); }
.bench-detail { flex-basis: 100%; color: var(--text-dim); font-family: var(--font-mono, monospace); font-size: 10.5px; white-space: pre-wrap; word-break: break-all; padding-left: 8px; border-left: 2px solid var(--border); }
.bench-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 0 10px; }
.bench-head b { font-size: 14px; color: var(--text); }
.bench-ts { color: var(--text-faint); font-size: 11px; }
.bench-section { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.bench-sec-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 6px; }
.bench-kv { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 12px; }
.bench-kv span { color: var(--text-dim); }
.bench-kv b { color: var(--text); font-weight: 600; text-align: right; }
.bench-file { color: var(--text-faint); font-family: var(--font-mono, monospace); font-size: 10px; }
.bench-meta { color: var(--text-dim); font-size: 10.5px; font-family: var(--font-mono, monospace); }

/* ── Forgey Command Deck (v1.6.0) ──────────────────────────────────────── */
.copilot-ava-svg { width: 30px; height: 30px; flex: none; color: var(--green, #4cc38a); background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); border-radius: 9px; padding: 5px; }
.copilot-name { font-size: 13px; }
.copilot-status { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.15); }
.cs-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; cursor: default; }
.cs-item i { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-size: 9px; }
.cs-item b { font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono, monospace); }
.copilot-tabs { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.copilot-tab { flex: 1; background: transparent; border: 0; color: var(--text-dim); font-size: 11px; font-weight: 700; padding: 6px 4px; border-radius: 8px; cursor: pointer; border-bottom: 2px solid transparent; }
.copilot-tab:hover { color: var(--text); }
.copilot-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(34,211,238,.06); }
.terminal-copilot .copilot-pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.terminal-copilot .copilot-pane.active { display: flex; }
.copilot-lock { border-bottom: 1px solid var(--border); }
.co-note { font-size: 10.5px; color: var(--text-faint); line-height: 1.5; padding: 8px 12px; }
.copilot-footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding: 7px 12px; }
.copilot-footer .co-note { padding: 0; }
.copilot-footer a { color: var(--accent); text-decoration: none; }
.jobs-log { padding: 8px 12px; overflow-y: auto; }
.fg-job-min { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); padding: 8px 10px; margin-bottom: 7px; }
.fg-job-min-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fg-job-min-top b { font-size: 12px; color: var(--text); }
.fg-job-min-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-job-min-actions { display: flex; gap: 6px; margin-top: 7px; }
.fg-job-min-actions .co-btn { font-size: 11px; padding: 4px 10px; }
.co-code-empty, .co-code-empty.hidden { font-size: 11px; color: var(--text-faint); padding: 16px 14px; text-align: center; }
.co-snippet { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); margin-bottom: 8px; overflow: hidden; }
.co-snippet-head { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.co-snippet-head b { font-size: 11px; color: var(--text); font-family: var(--font-mono, monospace); }
.co-snippet-head span { font-size: 10px; color: var(--text-faint); }
.co-snippet-code { margin: 0; padding: 10px; font-size: 11px; color: var(--text-dim); background: rgba(0,0,0,.3); max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.co-snippet-actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.co-snippet-actions .co-btn { font-size: 11px; padding: 4px 11px; }
#codePane { overflow-y: auto; padding: 10px 12px; }
.suggest-chips { padding: 12px; gap: 7px; }
.suggest-chips .chip { font-size: 12px; padding: 6px 12px; }
.audit-filters { display: flex; gap: 5px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.audit-filters .af-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.af-chip { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
.af-chip.on { color: var(--accent); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.audit-log { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.audit-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 11px; }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.audit-dot.risk-low { background: #4cc38a; } .audit-dot.risk-medium { background: #fbbf24; }
.audit-dot.risk-high { background: #ff8a8a; } .audit-dot.risk-none { background: #8ea0b8; } .audit-dot.risk-critical { background: #fff; }
.audit-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.audit-text { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono, monospace); }

/* ── composer quick actions + structured preview + deck v2 extras ────────── */
.composer-preview { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; }
.composer-preview[hidden] { display: none; }
.cv-tag { font-weight: 800; color: var(--accent); font-family: var(--font-mono, monospace); }
.cv-flags { color: var(--text-dim); }
.cv-tools { color: var(--text-faint); font-family: var(--font-mono, monospace); }
.cv-err { color: #ff8a8a; font-size: 11px; }
.composer-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.composer-actions .co-btn { font-size: 11px; padding: 4px 11px; }
.cq-det { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); margin-left: auto; cursor: pointer; }
.cq-det input { accent-color: var(--accent); }
.composer-ac { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.ac-item { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.22); color: var(--text-dim); cursor: pointer; font-family: var(--font-mono, monospace); }
.ac-item:hover { color: var(--text); border-color: rgba(34,211,238,.5); }
.fg-det { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #c084fc; background: rgba(192,132,252,.12); border: 1px solid rgba(192,132,252,.3); padding: 2px 7px; border-radius: 6px; }
.fg-apr { font-size: 10px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); padding: 2px 7px; border-radius: 6px; }
.fg-history { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.fg-run { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); background: rgba(255,255,255,.04); border: 1px solid var(--border); padding: 2px 8px; border-radius: 6px; }
.fg-diff { margin-top: 8px; }
.fg-diff summary { font-size: 11px; color: var(--accent); cursor: pointer; }
.fg-diff pre { font-size: 11px; color: var(--text-dim); background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 8px; padding: 8px; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.audit-metrics { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.audit-metrics .am { display: flex; flex-direction: column; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; min-width: 52px; }
.audit-metrics .am b { font-size: 13px; color: var(--accent); }
.audit-metrics .am span { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }

/* ── guardrail slider (v1.8.0) ──────────────────────────────────────────── */
.guardrail-slider { margin: 4px 0 10px; }
.guardrail-slider .gr-track { position: relative; }
.guardrail-slider .gr-range { width: 100%; accent-color: var(--accent); }
.guardrail-slider .gr-stops { display: flex; justify-content: space-between; position: absolute; left: 0; right: 0; top: 4px; pointer-events: none; }
.guardrail-slider .gr-stops i { width: 10px; height: 10px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--border-strong); }
.guardrail-slider .gr-labels { display: flex; justify-content: space-between; margin-top: 6px; }
.guardrail-slider .gr-labels span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.guardrail-slider .gr-tip { font-size: 11px; color: var(--text-dim); margin-top: 6px; min-height: 14px; }

/* ── advanced load panel: presets + dry-run estimate ────────────────────── */
.mp-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.mp-presets .mp-preset-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-right: 2px; }
.mp-preset { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
.mp-preset:hover { color: var(--text); border-color: var(--border-strong); }
.mp-preset.active { color: var(--accent); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.mp-preset.mp-auto { color: var(--green); border-color: rgba(52,211,153,.4); }
.mp-estBtn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.mp-estBtn:hover { color: var(--text); border-color: var(--border-strong); }
.mp-estimate { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; }
.mp-estimate[hidden] { display: none; }
.mp-estimate .est-item b { color: var(--text); }
.mp-estimate[data-state="warn"] .est-item:last-child { color: #fbbf24; }
.mp-estimate[data-state="err"] { color: #ff8a8a; }

/* ── model-params modal: autosize + scroll so long param lists fit ────────
   .modal-card.model-params is used by the advanced load panel. Without these
   rules the long list of sliders overflows the viewport with no scrollbar. */
#modelParamsModal .modal-card.model-params {
  width: min(520px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  gap: 0;
  padding: 0;
}
#modelParamsModal .modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#modelParamsModal .modal-head h2 { margin: 0; }
#modelParamsModal .mp-presets {
  padding: 12px 18px 10px;
  margin: 0;
  flex-shrink: 0;
}
#modelParamsModal .mp-params {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
#modelParamsModal .mp-params::-webkit-scrollbar { width: 8px; }
#modelParamsModal .mp-params::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
#modelParamsModal .mp-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── settings status strip + unified tools nav (v1.8.0) ────────────────── */
.settings-status-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.15); }
.ss-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.ss-item i { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-size: 9px; }
.ss-item b { font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tools nav uses the same FORGE HUB masthead + icon pills as Settings */
#toolsNav .settings-nav-masthead { margin-bottom: 6px; }
#toolsNav .settings-nav-item { display: flex; align-items: center; gap: 8px; }

/* ── Live Code Window (v1.9.0) ──────────────────────────────────────────── */
.lc-block .co-snippet-head { flex-wrap: wrap; gap: 6px; }
.lc-name { font-weight: 700; color: var(--accent); margin-left: auto; }
.lc-provenance { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; width: 100%; }
.lc-provenance.lc-min { width: auto; gap: 5px; }
.lc-source { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.lc-source i { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-size: 8px; }
.lc-source b { font-weight: 600; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-compact { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.lc-compact:hover { color: var(--accent); border-color: rgba(34,211,238,.4); }
.lc-decision { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; }
.lc-decision.ok { color: #4cc38a; background: rgba(76,195,138,.12); border: 1px solid rgba(76,195,138,.3); }
.lc-decision.no { color: #ff8a8a; background: rgba(255,138,138,.14); border: 1px solid rgba(255,138,138,.35); }
.lc-actions { flex-wrap: wrap; }
.lc-actions .co-btn[hidden] { display: none; }
.lc-test { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--border); font-size: 11px; }
.lc-test[hidden] { display: none; }
.lc-pass { font-weight: 800; }
.lc-pass.ok { color: #4cc38a; } .lc-pass.no { color: #ff8a8a; }
.lc-testout { color: var(--text-faint); font-family: var(--font-mono, monospace); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }

/* ── Live Code Window (terminal main pane) v1.9.1 ──────────────────────── */
.live-code-window {
  flex: 1 1 58%; min-width: 320px; max-width: 62%;
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--border); background: var(--surface, #0d1526);
  animation: lcwIn .18s ease;
}
@keyframes lcwIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.live-code-window.hidden { display: none; }
.lcw-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lcw-title { display: flex; align-items: center; gap: 7px; }
.lcw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #4cc38a); animation: lcwPulse 1.6s ease-in-out infinite; }
@keyframes lcwPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.lcw-emblem { color: var(--accent); font-size: 15px; }
.lcw-title b { font-size: 13px; }
.lcw-sub { font-size: 10px; color: var(--text-faint); }
.lcw-tabs { display: flex; gap: 4px; margin-left: auto; }
.lcw-tab { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 8px; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; }
.lcw-tab.active { color: var(--accent); background: rgba(34,211,238,.1); }
.lcw-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lcw-actions .co-btn { font-size: 11px; padding: 4px 11px; }
.lcw-provenance { display: flex; gap: 7px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.12); }
.lcw-provenance .lc-source { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.lcw-provenance .lc-source i { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-size: 8px; }
.lcw-provenance .lc-source b { font-weight: 600; color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcw-files { display: flex; gap: 5px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.lcw-file { font-size: 11px; font-family: var(--font-mono, monospace); color: var(--text-dim); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.lcw-file.active { color: var(--accent); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.lcw-body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
.lcw-code { margin: 0; padding: 12px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.55; color: #d8dee9; background: rgba(0,0,0,.3); white-space: pre; min-height: 100%; outline: none; tab-size: 2; }
.lcw-code:focus { box-shadow: inset 2px 0 0 var(--accent); }
.lcw-code .lcw-hl { background: rgba(34,211,238,.16); border-radius: 2px; }
.lcw-diff { margin: 0; padding: 12px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.55; color: #d8dee9; white-space: pre; }
.lcw-diff.hidden, .lcw-playback.hidden, .lcw-code.hidden { display: none; }
.lcw-diff .plus { color: #4cc38a; } .lcw-diff .minus { color: #ff8a8a; } .lcw-diff .hunk { color: var(--accent); }
.lcw-playback { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lcw-timeline { display: flex; gap: 10px; align-items: center; }
.lcw-timeline input { flex: 1; accent-color: var(--accent); }
.lcw-timeline span { font-size: 11px; color: var(--text-dim); }
.lcw-playback-list { display: flex; flex-direction: column; gap: 6px; }
.lcw-snap { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 11px; color: var(--text-dim); background: var(--panel-2); }
.lcw-test { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11px; display: flex; gap: 8px; align-items: center; }
.lcw-test[hidden] { display: none; }
.lcw-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-faint); flex-wrap: wrap; }
.lcw-keys { color: var(--text-faint); }
@media (max-width: 1100px) { .live-code-window { max-width: none; flex: 1 1 50%; } }

/* ── Forge Workspace tabs (v1.10.0) ────────────────────────────────────── */
.live-code-window .lcw-pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.live-code-window .lcw-pane.active { display: flex; }
.lcw-inline-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--border); align-items: center; }
.lcw-inline-actions .co-btn { font-size: 11px; padding: 4px 11px; }
.lcw-inline-actions .lcw-sub { margin-left: auto; }
.lcw-pane-note { font-size: 11px; color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.lcw-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 7px; }
.lcw-job { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--panel-2); font-size: 11px; }
.lcw-job b { color: var(--text); }
.lcw-job-meta { color: var(--text-faint); font-size: 10px; font-family: var(--font-mono, monospace); flex: 1; min-width: 80px; }
.lcw-job-actions { display: flex; gap: 5px; }
.lcw-job-actions .co-btn { font-size: 10px; padding: 3px 9px; }
.lcw-audit { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: var(--panel-2); font-size: 11px; }
.lcw-metrics { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.lcw-metrics .am { display: flex; flex-direction: column; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; min-width: 52px; }
.lcw-metrics .am b { font-size: 13px; color: var(--accent); }
.lcw-metrics .am span { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.lcw-build { display: flex; gap: 8px; align-items: center; padding: 10px 12px; flex-wrap: wrap; }
.lcw-build .co-btn { font-size: 11px; padding: 4px 11px; }
.lcw-build-res { font-size: 11px; }
.lcw-pane .lcw-files { padding: 8px 12px; }
.lcw-playbook { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 12px; }
.lcw-pb { font-size: 12px; padding: 7px 14px; border-radius: 10px; background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.22); color: var(--text-dim); cursor: pointer; font-family: var(--font-mono, monospace); }
.lcw-pb:hover { color: var(--text); border-color: rgba(34,211,238,.5); }

/* ── Create popup (the + button) v1.10.0 ───────────────────────────────── */
.create-popup { width: min(460px, 92vw); }
.create-ctx { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 10px; }
.create-ctx span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.create-tiles { display: flex; flex-direction: column; gap: 8px; }
.create-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; color: var(--text); }
.create-tile:hover { border-color: rgba(34,211,238,.4); }
.create-tile.active { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.06); }
.create-tile .ct-icon { font-size: 16px; }
.create-tile b { font-size: 13px; }
.create-tile .ct-sub { font-size: 11px; color: var(--text-dim); }
.create-tile .ct-ctx { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono, monospace); }
.create-tile .ct-actions { display: flex; gap: 8px; margin-top: 3px; }
.create-tile .ct-actions i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); }
.create-tile .ct-actions .ct-adv { color: var(--text-faint); }
.create-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.create-footer .primary-btn { background: var(--green); color: #042018; border: 0; padding: 8px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; }

/* ---------- Command palette ---------- */
.command-palette-card {
  width: min(640px, 92vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--panel, #111a2e);
  border: 1px solid var(--border-strong, #263458);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
}
.command-palette-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #1c2a4a);
}
.command-palette-input svg { color: var(--text-faint, #7a8cb5); flex-shrink: 0; }
.command-palette-input input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text, #e6edf7); font-size: 15px; font-family: inherit;
}
.command-palette-list { overflow-y: auto; padding: 8px; max-height: 56vh; }
.command-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.command-item.active { background: var(--accent-soft, rgba(34,211,238,0.12)); }
.command-item .cmd-label { font-size: 14px; font-weight: 600; color: var(--text, #e6edf7); }
.command-item .cmd-hint { font-size: 11px; color: var(--text-faint, #7a8cb5); margin-left: auto; }
.command-item .cmd-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent, #22d3ee); background: var(--accent-soft, rgba(34,211,238,0.12));
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
}
.command-empty { padding: 24px; text-align: center; color: var(--text-faint, #7a8cb5); font-size: 13px; }

/* ---------- Autonomy segmented control ---------- */
.autonomy-seg { display: flex; gap: 2px; background: var(--panel-2, #162040); border: 1px solid var(--border, #1c2a4a); border-radius: 9px; padding: 2px; flex-shrink: 0; }
.autonomy-seg button {
  border: 0; background: transparent; color: var(--text-dim, #8ea0b8);
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.autonomy-seg button:hover { color: var(--text, #e6edf7); }
.autonomy-seg button.active { background: var(--accent-soft, rgba(34,211,238,0.12)); color: var(--accent, #22d3ee); }

/* ---------- Layered memory tiers ---------- */
.memory-tier-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent, #22d3ee); margin: 10px 0 4px;
}

/* ---------- MCP registry ---------- */
.mcp-reg-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--border, #1c2a4a); }
.mcp-reg-row b { color: var(--text, #e6edf7); }
.mcp-reg-row span { font-size: 11px; color: var(--text-faint, #7a8cb5); }
.mcp-reg-server { font-family: var(--font-mono, monospace); }

/* ---------- Skills list ---------- */
.skill-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border, #1c2a4a); }
.skill-name { font-weight: 600; color: var(--text, #e6edf7); }
.skill-desc { flex: 1; font-size: 11px; color: var(--text-faint, #7a8cb5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Engine sub-cards (CPU / CUDA / Vulkan) */
.engine-item.engine-sub-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel-2);
  font-size: 12.5px;
}
.engine-item.engine-sub-card.eb-active {
  border-color: rgba(52,211,153,.35);
  background: linear-gradient(135deg, rgba(52,211,153,.06), var(--panel-2));
}
.es-dot.ok { background: var(--green, #34d399); }
.es-dot.avail { background: var(--accent, #22d3ee); }
.es-dot.off { background: var(--text-faint, #7a8cb5); opacity: .5; }
.eb-main { flex: 1; min-width: 0; }
.eb-title { font-weight: 700; color: var(--text, #e6edf7); }
.eb-bin { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-faint, #7a8cb5); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-current { color: var(--green, #34d399); font-size: 11px; font-weight: 700; white-space: nowrap; }
.eb-actions { display: flex; gap: 6px; }
.eb-switch { white-space: nowrap; }

/* Other engines (sd-server + STT/TTS speed cards) */
.engine-speed-cards { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.engine-speed-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 180px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); font-size: 12px;
}
.engine-speed-card b { color: var(--accent, #22d3ee); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.engine-speed-card span { color: var(--text-dim, #8ea0b8); }

.engine-speed-card button { width: 100%; margin-top: 4px; }