From 6ed76fb2d33ef55a67806d714aba0b339de7f84f Mon Sep 17 00:00:00 2001
From: xcaliber <jasafpro@gmail.com>
Date: Wed, 4 Mar 2026 17:39:22 +0000
Subject: [PATCH] Changeset 0.22.9 (#151)

---
 VERSION                                       |    2 +-
 extensions/builtin/js-sandbox/manifest.json   |    1 +
 extensions/builtin/regex-tester/manifest.json |    1 +
 server/handlers/completion.go                 |    6 +
 server/pages/templates/base.html              |   60 +-
 server/pages/templates/login.html             |    6 +-
 server/pages/templates/surfaces/admin.html    |    2 +-
 server/pages/templates/surfaces/chat.html     |   44 +-
 server/pages/templates/surfaces/editor.html   |    2 +-
 server/pages/templates/surfaces/notes.html    |    2 +-
 server/pages/templates/surfaces/settings.html |    2 +-
 server/version.go                             |   23 +-
 src/css/chat.css                              |  596 ++++
 src/css/layout.css                            |  401 +++
 src/css/modals.css                            |  447 +++
 src/css/panels.css                            |  547 +++
 src/css/primitives.css                        |  432 +++
 src/css/splash.css                            |  168 +
 src/css/styles.css                            | 3098 +----------------
 src/css/surfaces.css                          |  429 +++
 src/css/variables.css                         |  124 +
 src/js/app.js                                 |   85 +-
 src/js/tools-toggle.js                        |   43 +-
 src/js/ui-core.js                             |    5 +-
 src/js/ui-format.js                           |    7 +-
 src/js/ui-primitives.js                       |   74 +
 src/sw.js                                     |    9 +-
 27 files changed, 3392 insertions(+), 3224 deletions(-)
 create mode 100644 src/css/chat.css
 create mode 100644 src/css/layout.css
 create mode 100644 src/css/modals.css
 create mode 100644 src/css/panels.css
 create mode 100644 src/css/primitives.css
 create mode 100644 src/css/splash.css
 create mode 100644 src/css/surfaces.css
 create mode 100644 src/css/variables.css

diff --git a/VERSION b/VERSION
index eca6a4a..6b9f278 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.22.8
+0.22.9
diff --git a/extensions/builtin/js-sandbox/manifest.json b/extensions/builtin/js-sandbox/manifest.json
index 40b518b..b01b539 100644
--- a/extensions/builtin/js-sandbox/manifest.json
+++ b/extensions/builtin/js-sandbox/manifest.json
@@ -9,6 +9,7 @@
     "tools": [
         {
             "name": "js_eval",
+            "display_name": "JavaScript Eval",
             "description": "Execute JavaScript code in a secure browser sandbox. Use this to: verify calculations, run algorithms, transform data, test code snippets, parse/format strings, or any computation. Console output (log/warn/error) is captured. The last expression's value is returned as the result. Has no network access, no DOM access, no access to the parent page. Timeout: 10 seconds.",
             "parameters": {
                 "type": "object",
diff --git a/extensions/builtin/regex-tester/manifest.json b/extensions/builtin/regex-tester/manifest.json
index d4eea82..24259a3 100644
--- a/extensions/builtin/regex-tester/manifest.json
+++ b/extensions/builtin/regex-tester/manifest.json
@@ -9,6 +9,7 @@
     "tools": [
         {
             "name": "regex_test",
+            "display_name": "Regex Tester",
             "description": "Test a regular expression against one or more input strings. Returns match details including captured groups, indices, and whether each string matched. Use this to verify regex patterns instead of guessing.",
             "parameters": {
                 "type": "object",
diff --git a/server/handlers/completion.go b/server/handlers/completion.go
index 82bfc78..7e0ada8 100644
--- a/server/handlers/completion.go
+++ b/server/handlers/completion.go
@@ -670,6 +670,7 @@ func (h *CompletionHandler) ListTools(c *gin.Context) {
 				var manifest struct {
 					Tools []struct {
 						Name        string `json:"name"`
+						DisplayName string `json:"display_name"`
 						Description string `json:"description"`
 					} `json:"tools"`
 				}
@@ -677,8 +678,13 @@ func (h *CompletionHandler) ListTools(c *gin.Context) {
 					continue
 				}
 				for _, t := range manifest.Tools {
+					displayName := t.DisplayName
+					if displayName == "" {
+						displayName = t.Name
+					}
 					result = append(result, toolInfo{
 						Name:        t.Name,
+						DisplayName: displayName,
 						Description: t.Description,
 						Category:    "browser",
 					})
diff --git a/server/pages/templates/base.html b/server/pages/templates/base.html
index a49c45d..8b6697f 100644
--- a/server/pages/templates/base.html
+++ b/server/pages/templates/base.html
@@ -7,7 +7,15 @@
     <title>{{block "title" .}}Chat Switchboard{{end}}</title>
     <link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
     <link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
-    <link rel="stylesheet" href="{{.BasePath}}/css/styles.css?v={{.Version}}">
+    {{/* Decomposed from monolithic styles.css (v0.22.9) */}}
+    <link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/layout.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/primitives.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/modals.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/chat.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/panels.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/surfaces.css?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/splash.css?v={{.Version}}">
     {{if eq .Surface "chat"}}{{template "css-chat" .}}{{end}}
     {{if eq .Surface "editor"}}{{template "css-editor" .}}{{end}}
     <style>
@@ -73,6 +81,56 @@
     {{if eq .Surface "editor"}}{{template "scripts-editor" .}}{{end}}
     {{if eq .Surface "notes"}}{{template "scripts-notes" .}}{{end}}
     {{if eq .Surface "settings"}}{{template "scripts-settings" .}}{{end}}
+
+    {{/* ── Debug Log Modal (all surfaces) ───── */}}
+    <div id="debugModal" class="modal-overlay">
+        <div class="modal-content modal-lg">
+            <div class="modal-header">
+                <h2>Debug Log</h2>
+                <button class="modal-close" onclick="closeModal('debugModal')">✕</button>
+            </div>
+            <div class="modal-tabs">
+                <button class="debug-tab active" data-tab="console" onclick="switchDebugTab('console')">Console <span id="debugConsoleCount" class="badge">0</span></button>
+                <button class="debug-tab" data-tab="network" onclick="switchDebugTab('network')">Network <span id="debugNetworkCount" class="badge">0</span></button>
+                <button class="debug-tab" data-tab="state" onclick="switchDebugTab('state')">State</button>
+                <button class="debug-tab" data-tab="repl" onclick="switchDebugTab('repl')">REPL</button>
+            </div>
+            <div class="modal-body" style="padding:0;height:400px;overflow:hidden;">
+                <div id="debugConsoleTab" class="debug-tab-content" style="display:block;height:100%;overflow-y:auto;">
+                    <div style="padding:8px;display:flex;gap:8px;align-items:center;">
+                        <label><input type="checkbox" id="debugFilterErrors"> Errors only</label>
+                        <label><input type="checkbox" id="debugAutoScroll" checked> Auto-scroll</label>
+                    </div>
+                    <div id="debugConsoleContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
+                </div>
+                <div id="debugNetworkTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
+                    <div id="debugNetworkContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
+                </div>
+                <div id="debugStateTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
+                    <div id="debugStateContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;white-space:pre-wrap;"></div>
+                </div>
+                <div id="debugReplTab" class="debug-tab-content" style="display:none;height:100%;display:flex;flex-direction:column;">
+                    <div id="replOutput" style="flex:1;overflow-y:auto;font-family:monospace;font-size:12px;padding:8px;"></div>
+                    <div style="border-top:1px solid var(--border);padding:8px;">
+                        <input type="text" id="replInput" placeholder="Type expression…" style="width:100%;font-family:monospace;font-size:12px;">
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer" style="display:flex;justify-content:space-between;align-items:center;">
+                <div style="display:flex;gap:8px;">
+                    <button class="btn-danger btn-small" onclick="runDebugDiagnostics()">Diagnostics</button>
+                    <button class="btn-danger btn-small" onclick="purgeCache()">Purge Cache</button>
+                </div>
+                <div style="display:flex;gap:8px;">
+                    <button class="btn-secondary btn-small" onclick="clearDebugLog()">Clear</button>
+                    <button class="btn-secondary btn-small" onclick="copyDebugLog()">Copy</button>
+                    <button class="btn-secondary btn-small" onclick="exportDebugLog()">Export</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
+    <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/repl.js?v={{.Version}}"></script>
 </body>
 </html>
 {{end}}
diff --git a/server/pages/templates/login.html b/server/pages/templates/login.html
index 1e84baa..36a5d98 100644
--- a/server/pages/templates/login.html
+++ b/server/pages/templates/login.html
@@ -58,7 +58,7 @@
         .hero-content { position: relative; z-index: 1; max-width: 520px; }
 
         .hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem; }
-        .hero-brand-icon { font-size: 40px; line-height: 1; }
+        .hero-brand-icon { width: 40px; height: 40px; }
         .hero-brand-text { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
         .hero-brand-text .hl { color: var(--accent); }
 
@@ -182,7 +182,7 @@
                 <div class="hero-orb"></div>
                 <div class="hero-content">
                     <div class="hero-brand anim anim-1">
-                        <span class="hero-brand-icon">&#x1F500;</span>
+                        <img class="hero-brand-icon" src="{{.BasePath}}/favicon.svg?v={{.Version}}" alt="Chat Switchboard">
                         <span class="hero-brand-text">Chat <span class="hl">Switchboard</span></span>
                     </div>
                     <h1 class="anim anim-2">Your AI conversations,<br>your infrastructure</h1>
@@ -197,7 +197,7 @@
                         <span class="hero-pill ac"><span class="hero-pill-icon">&#x1F50D;</span> Web Search Tools</span>
                         <span class="hero-pill pu"><span class="hero-pill-icon">&#x1F4DD;</span> Notes &amp; Memory</span>
                     </div>
-                    <p class="hero-version anim anim-5">v{{.Version}} &middot; gobha.ai</p>
+                    <p class="hero-version anim anim-5">v{{.Version}}{{if .Environment}} &middot; {{.Environment}}{{end}}</p>
                 </div>
             </div>
 
diff --git a/server/pages/templates/surfaces/admin.html b/server/pages/templates/surfaces/admin.html
index dd19cfa..8d02199 100644
--- a/server/pages/templates/surfaces/admin.html
+++ b/server/pages/templates/surfaces/admin.html
@@ -97,7 +97,7 @@
 </div>
 {{end}}
 
-{{/* CSS: consolidated into styles.css */}}
+{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
 {{define "css-admin"}}{{end}}
 
 {{/* Scripts */}}
diff --git a/server/pages/templates/surfaces/chat.html b/server/pages/templates/surfaces/chat.html
index 693ec91..e1f44ff 100644
--- a/server/pages/templates/surfaces/chat.html
+++ b/server/pages/templates/surfaces/chat.html
@@ -175,7 +175,7 @@ window.addEventListener('unhandledrejection', function(e) {
                     </button>
                     <button id="menuDebug" class="flyout-item" style="display:none;">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/><path d="M12 6V12L16 14"/></svg>
-                        <span>Debug Console</span>
+                        <span>Debug Log</span>
                     </button>
                     <hr class="flyout-divider">
                     <button id="menuSignout" class="flyout-item flyout-danger">
@@ -643,44 +643,7 @@ window.addEventListener('unhandledrejection', function(e) {
     </div>
 </div>
 
-{{/* ── Debug Modal ─────────────────────────── */}}
-<div id="debugModal" class="modal-overlay">
-    <div class="modal-content modal-lg">
-        <div class="modal-header">
-            <h2>Debug Console</h2>
-            <button class="modal-close" onclick="closeModal('debugModal')">✕</button>
-        </div>
-        <div class="modal-tabs">
-            <button class="debug-tab active" data-dtab="console" onclick="switchDebugTab('console')">Console</button>
-            <button class="debug-tab" data-dtab="network" onclick="switchDebugTab('network')">Network</button>
-            <button class="debug-tab" data-dtab="state" onclick="switchDebugTab('state')">State</button>
-            <button class="debug-tab" data-dtab="repl" onclick="switchDebugTab('repl')">REPL</button>
-        </div>
-        <div class="modal-body" style="padding:0;height:400px;overflow:hidden;">
-            <div id="debugConsoleTab" class="debug-tab-content" style="display:block;height:100%;overflow-y:auto;">
-                <div style="padding:8px;display:flex;gap:8px;align-items:center;">
-                    <label><input type="checkbox" id="debugAutoScroll" checked> Auto-scroll</label>
-                    <label><input type="checkbox" id="debugFilterErrors"> Errors only</label>
-                    <span id="debugConsoleCount" class="badge">0</span>
-                </div>
-                <div id="debugConsoleContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
-            </div>
-            <div id="debugNetworkTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
-                <div style="padding:8px;"><span id="debugNetworkCount" class="badge">0</span> requests</div>
-                <div id="debugNetworkContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
-            </div>
-            <div id="debugStateTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
-                <div id="debugStateContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;white-space:pre-wrap;"></div>
-            </div>
-            <div id="debugReplTab" class="debug-tab-content" style="display:none;height:100%;display:flex;flex-direction:column;">
-                <div id="replOutput" style="flex:1;overflow-y:auto;font-family:monospace;font-size:12px;padding:8px;"></div>
-                <div style="border-top:1px solid var(--border);padding:8px;">
-                    <input type="text" id="replInput" placeholder="Type expression…" style="width:100%;font-family:monospace;font-size:12px;">
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+{{/* ── Debug Modal moved to base.html (available on all surfaces) ── */}}
 
 {{/* ── Notification bell is now inside .chat-header ── */}}
 
@@ -726,8 +689,7 @@ window.addEventListener('unhandledrejection', function(e) {
 <script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/purify.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.4/purify.min.js'"></script>
 <script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{$.Version}}" onerror="console.warn('[CM6] Bundle not available — falling back to textarea')"></script>
 {{/* App JS — order matches index.html (minus api/events/ui-primitives already in base) */}}
-<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/debug.js?v={{$.Version}}"></script>
-<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/repl.js?v={{$.Version}}"></script>
+{{/* debug.js and repl.js now loaded in base.html for all surfaces */}}
 <script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/extensions.js?v={{$.Version}}"></script>
 <script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/panels.js?v={{$.Version}}"></script>
 <script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-format.js?v={{$.Version}}"></script>
diff --git a/server/pages/templates/surfaces/editor.html b/server/pages/templates/surfaces/editor.html
index f625695..6c1e1e7 100644
--- a/server/pages/templates/surfaces/editor.html
+++ b/server/pages/templates/surfaces/editor.html
@@ -111,7 +111,7 @@
 <div id="toastContainer" class="toast-container"></div>
 {{end}}
 
-{{/* CSS: consolidated into styles.css */}}
+{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
 {{define "css-editor"}}
 <link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
 {{end}}
diff --git a/server/pages/templates/surfaces/notes.html b/server/pages/templates/surfaces/notes.html
index af71728..8270d6d 100644
--- a/server/pages/templates/surfaces/notes.html
+++ b/server/pages/templates/surfaces/notes.html
@@ -71,7 +71,7 @@
 <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
 <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
 <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/panels.js?v={{.Version}}"></script>
-<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
+{{/* debug.js now loaded in base.html for all surfaces */}}
 <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
 <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
 <script nonce="{{.CSPNonce}}">
diff --git a/server/pages/templates/surfaces/settings.html b/server/pages/templates/surfaces/settings.html
index 0f45efb..9103154 100644
--- a/server/pages/templates/surfaces/settings.html
+++ b/server/pages/templates/surfaces/settings.html
@@ -150,7 +150,7 @@
 <div id="toastContainer" class="toast-container"></div>
 {{end}}
 
-{{/* CSS: consolidated into styles.css */}}
+{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
 {{define "css-settings"}}{{end}}
 
 {{/* Scripts */}}
diff --git a/server/version.go b/server/version.go
index f5b3da6..ffc6f27 100644
--- a/server/version.go
+++ b/server/version.go
@@ -1,8 +1,29 @@
 package main
 
+import (
+	"os"
+	"strings"
+)
+
 // Version is set at build time via:
 //
 //	go build -ldflags "-X main.Version=$(cat VERSION)"
 //
-// Falls back to "dev" for local builds without ldflags.
+// Falls back to reading /VERSION or ./VERSION for container/local runs
+// without ldflags. Final fallback is "dev".
 var Version = "dev"
+
+func init() {
+	if Version != "dev" {
+		return
+	}
+	// Try well-known paths: container (/VERSION), repo root (../VERSION, ./VERSION)
+	for _, path := range []string{"/VERSION", "VERSION", "../VERSION"} {
+		if data, err := os.ReadFile(path); err == nil {
+			if v := strings.TrimSpace(string(data)); v != "" {
+				Version = v
+				return
+			}
+		}
+	}
+}
diff --git a/src/css/chat.css b/src/css/chat.css
new file mode 100644
index 0000000..ef631c8
--- /dev/null
+++ b/src/css/chat.css
@@ -0,0 +1,596 @@
+/* ── chat.css ────────────────────────────────
+   Chat area, model dropdown, markdown, input, files
+   ──────────────────────────────────────────── */
+
+/* ── Chat Area ───────────────────────────── */
+
+/* .chat-area is now .workspace-primary — alias kept for compat */
+.chat-area, .workspace-primary { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
+
+/* Role fallback banner */
+.role-fallback-banner {
+    background: var(--warning-dim); color: var(--warning);
+    text-align: center; font-size: 12px; font-weight: 500;
+    padding: 6px 12px; flex-shrink: 0;
+}
+
+/* Chat header (model selector + caps + token count + panel toggle) */
+.chat-header {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 16px; flex-shrink: 0;
+    border-bottom: 1px solid var(--border);
+}
+.chat-header-right {
+    margin-left: auto; display: flex; align-items: center; gap: 8px;
+}
+.token-count {
+    font-size: 11px; color: var(--text-3);
+    font-family: var(--mono); white-space: nowrap;
+}
+.summarized-badge {
+    font-size: 11px; color: var(--text-3); white-space: nowrap;
+    display: inline-flex; align-items: center; gap: 4px;
+}
+
+/* Message container (scrollable) */
+.msg-container {
+    flex: 1; overflow-y: auto; scroll-behavior: smooth;
+    padding-top: 12px; padding-bottom: 8px;
+}
+.msg-container::-webkit-scrollbar { width: 5px; }
+.msg-container::-webkit-scrollbar-track { background: transparent; }
+.msg-container::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border); }
+
+/* Streaming tools display */
+.stream-tools {
+    padding: 8px 24px; flex-shrink: 0;
+    font-size: 12px; color: var(--text-3);
+    display: flex; gap: 6px; align-items: center;
+}
+
+.model-bar {
+    display: flex; align-items: center; gap: 6px;
+    padding: 8px 16px; flex-shrink: 0;
+}
+.model-bar select {
+    background: transparent; border: 1px solid transparent;
+    color: var(--text); font-size: 14px; font-weight: 500;
+    padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
+    font-family: var(--font); max-width: 300px;
+    transition: border-color var(--transition);
+}
+.model-bar select:hover { border-color: var(--border); }
+.model-bar select:focus { outline: none; border-color: var(--accent); }
+.model-bar select option { background: var(--bg-surface); color: var(--text); }
+
+/* ── Custom Model Dropdown ───────────────── */
+
+.model-dropdown { position: relative; }
+.model-dropdown-btn {
+    display: flex; align-items: center; gap: 6px;
+    background: none; border: 1px solid transparent;
+    color: var(--text); font-size: 14px; font-weight: 500;
+    padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
+    font-family: var(--font); max-width: 340px;
+    transition: border-color var(--transition);
+}
+.model-dropdown-btn:hover { border-color: var(--border); }
+.model-dropdown-btn svg { flex-shrink: 0; opacity: 0.5; }
+.model-dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-dropdown-menu {
+    display: none; position: absolute; top: 100%; left: 0; z-index: 200;
+    min-width: 280px; max-width: 400px; max-height: 400px; overflow-y: auto;
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius); padding: 4px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    margin-top: 4px;
+}
+.model-dropdown-menu.open { display: block; }
+.model-dropdown-group {
+    padding: 6px 10px 4px; font-size: 11px; font-weight: 600;
+    color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
+}
+.model-dropdown-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 7px 10px; border-radius: 4px;
+    cursor: pointer; font-size: 13px;
+    color: var(--text-2); white-space: nowrap;
+    transition: background var(--transition), color var(--transition);
+}
+.model-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
+.model-dropdown-item.selected { background: var(--bg-hover); color: var(--accent); }
+.model-dropdown-item .item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.model-dropdown-item .item-provider { margin-left: auto; font-size: 10px; color: var(--text-3); }
+.dropdown-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
+
+.model-caps {
+    display: flex; align-items: center; gap: 4px;
+    margin-left: 4px; flex-wrap: wrap;
+}
+.cap-badge {
+    display: inline-flex; align-items: center; gap: 3px;
+    font-size: 10px; line-height: 1; padding: 2px 6px;
+    border-radius: 3px; white-space: nowrap;
+    background: var(--bg-raised); color: var(--text-3);
+    border: 1px solid transparent;
+}
+.cap-badge.cap-accent {
+    color: var(--accent); border-color: color-mix(in srgb, var(--accent), transparent 80%);
+    background: color-mix(in srgb, var(--accent), transparent 92%);
+}
+.cap-badge.cap-context {
+    color: var(--text-3);
+}
+
+.icon-btn {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    padding: 4px; border-radius: 4px;
+    transition: color var(--transition);
+}
+.icon-btn:hover { color: var(--text); }
+
+/* Messages — Bubble Layout (matching prototype) */
+.messages { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
+
+.message { padding: 10px 24px; }
+
+.msg-inner { max-width: 768px; margin: 0 auto; display: flex; gap: 10px; }
+
+/* User messages: right-aligned bubble */
+.message.user { display: flex; justify-content: flex-end; }
+.message.user .msg-inner { flex-direction: row-reverse; }
+.message.user .msg-body {
+    background: var(--user-bubble);
+    border: 1px solid transparent;
+    border-radius: 16px 16px 4px 16px;
+    padding: 10px 14px;
+}
+.message.user .msg-head { flex-direction: row-reverse; }
+.message.user .msg-role { color: var(--accent); }
+.message.user .msg-avatar { color: var(--accent); }
+
+/* Assistant messages: left-aligned bubble */
+.message.assistant .msg-body {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 16px 16px 16px 4px;
+    padding: 10px 14px;
+}
+
+.msg-avatar {
+    width: 28px; height: 28px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px; flex-shrink: 0; margin-top: 2px;
+    overflow: hidden;
+}
+.msg-avatar-img {
+    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
+}
+.message.user .msg-avatar { background: var(--accent-dim); }
+.message.assistant .msg-avatar { background: var(--bg-raised); }
+
+.msg-body { flex: 1; min-width: 0; }
+.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.msg-role { font-size: 13px; font-weight: 600; }
+.msg-time { font-size: 11px; color: var(--text-3); }
+.msg-actions {
+    margin-left: auto; display: flex; gap: 2px; opacity: 0;
+    transition: opacity var(--transition);
+}
+.message:hover .msg-actions { opacity: 1; }
+.msg-action-btn {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    padding: 2px 6px; border-radius: 4px; font-size: 11px;
+    transition: background var(--transition), color var(--transition);
+}
+.msg-action-btn:hover { background: var(--bg-hover); color: var(--text); }
+
+/* Branch navigation indicator */
+.branch-nav {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 12px;
+    color: var(--text-3);
+}
+.branch-arrow {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-2);
+    cursor: pointer;
+    padding: 0 5px;
+    font-size: 16px;
+    line-height: 18px;
+    transition: var(--transition);
+}
+.branch-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
+.branch-arrow:disabled { opacity: 0.25; cursor: default; }
+.branch-pos {
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    min-width: 28px;
+    text-align: center;
+    user-select: none;
+}
+
+/* Inline message editing */
+.msg-edit-input {
+    width: 100%;
+    background: var(--bg-surface);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius);
+    color: var(--text);
+    padding: 10px 12px;
+    font-family: var(--font);
+    font-size: var(--msg-font, 14px);
+    line-height: 1.6;
+    resize: vertical;
+    min-height: 60px;
+    max-height: 400px;
+    outline: none;
+}
+.msg-edit-input:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 2px var(--accent-dim); }
+.msg-edit-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    justify-content: flex-end;
+}
+.msg-edit-cancel, .msg-edit-submit {
+    padding: 6px 14px;
+    border-radius: var(--radius);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition);
+    border: 1px solid var(--border);
+}
+.msg-edit-cancel {
+    background: var(--bg-raised);
+    color: var(--text-2);
+}
+.msg-edit-cancel:hover { background: var(--bg-hover); color: var(--text); }
+.msg-edit-submit {
+    background: var(--accent);
+    color: var(--text-on-color);
+    border-color: var(--accent);
+}
+.msg-edit-submit:hover { background: var(--accent-hover); }
+
+.msg-text { font-size: var(--msg-font, 14px); line-height: 1.7; }
+
+/* ── Markdown Content ────────────────────── */
+
+.msg-text p { margin: 0.4em 0; }
+.msg-text p:first-child { margin-top: 0; }
+.msg-text p:last-child { margin-bottom: 0; }
+
+.msg-text pre {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    padding: 0.75rem 1rem; border-radius: var(--radius);
+    overflow-x: auto; margin: 0.75rem 0; position: relative;
+    font-size: 13px;
+}
+.msg-text code {
+    font-family: var(--mono); font-size: 0.9em;
+    background: var(--bg-raised); padding: 0.15em 0.4em;
+    border-radius: 4px;
+}
+.msg-text pre code { background: none; padding: 0; font-size: inherit; }
+
+/* Code block toolbar */
+.code-toolbar {
+    position: absolute; top: 6px; right: 6px;
+    display: flex; gap: 4px; align-items: center;
+    opacity: 0; transition: opacity var(--transition);
+}
+.msg-text pre:hover .code-toolbar { opacity: 1; }
+.code-block.code-collapsed .code-toolbar { opacity: 1; }
+.copy-code-btn {
+    background: var(--bg-raised); border: 1px solid var(--border);
+    color: var(--text-3); border-radius: 4px;
+    padding: 2px 10px; font-size: 11px; cursor: pointer;
+    transition: color var(--transition), border-color var(--transition);
+}
+.copy-code-btn:hover { color: var(--text); border-color: var(--border-light); }
+.code-collapse-btn {
+    background: var(--bg-raised); border: 1px solid var(--border);
+    color: var(--text-3); border-radius: 4px;
+    padding: 2px 10px; font-size: 11px; cursor: pointer;
+    font-family: var(--mono); white-space: nowrap;
+    transition: color var(--transition), border-color var(--transition);
+}
+.code-collapse-btn:hover { color: var(--text); border-color: var(--border-light); }
+
+/* Collapsed code block */
+.code-block.code-collapsed code {
+    max-height: 3.6em; overflow: hidden; display: block;
+    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
+}
+
+/* Language label */
+.code-lang {
+    position: absolute; top: 6px; left: 10px;
+    font-size: 10px; color: var(--text-3); font-family: var(--mono);
+    text-transform: uppercase; letter-spacing: 0.5px; user-select: none;
+}
+
+/* ── Extension-rendered blocks ──────── */
+
+.ext-rendered {
+    margin: 12px 0;
+    position: relative;
+}
+.ext-popout-btn {
+    position: absolute; top: 4px; right: 4px;
+    background: var(--bg-raised); border: 1px solid var(--border);
+    color: var(--text-3); cursor: pointer; font-size: 14px;
+    width: 26px; height: 26px; border-radius: var(--radius);
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity 0.15s, background 0.15s;
+    z-index: 5;
+}
+.ext-rendered:hover .ext-popout-btn { opacity: 1; }
+.ext-popout-btn:hover { background: var(--bg-hover); color: var(--text); }
+
+/* HTML preview */
+
+/* ── Input Area ──────────────────────────── */
+
+.input-area { padding: 0 1rem 1rem; flex-shrink: 0; }
+.input-area:empty { padding: 0; min-height: 0; }
+
+/* Token counter below input */
+.input-meta { display: flex; justify-content: space-between; align-items: center; padding: 2px 12px 0; min-height: 18px; }
+.input-token-count { font-size: 0.68rem; color: var(--text-3); transition: color 0.2s; }
+.input-token-count.warning { color: var(--warning); }
+.input-token-count.danger { color: var(--danger); }
+
+/* Context length warning banner */
+.context-warning {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 12px; margin-bottom: 8px; border-radius: 8px;
+    background: color-mix(in srgb, var(--warning) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
+    font-size: 0.78rem; color: var(--text-2); animation: fadeIn 0.2s ease;
+}
+.context-warning.danger {
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
+}
+.context-warning-icon { flex-shrink: 0; }
+.context-warning-text { flex: 1; }
+.context-warning-dismiss { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font-size: 0.85rem; }
+.context-warning-dismiss:hover { color: var(--text); }
+.context-warning-action {
+    flex-shrink: 0; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border);
+    background: var(--bg-surface); color: var(--text); cursor: pointer;
+    font-size: 0.75rem; white-space: nowrap; transition: all var(--transition);
+}
+.context-warning-action:hover { background: var(--accent); color: var(--text-on-color); border-color: var(--accent); }
+.context-warning-action:disabled { opacity: 0.5; cursor: not-allowed; }
+.context-warning-action:disabled:hover { background: var(--bg-surface); color: var(--text); border-color: var(--border); }
+.context-warning-toggle {
+    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
+    font-size: 0.72rem; color: var(--text-3); cursor: pointer; white-space: nowrap;
+    user-select: none;
+}
+.context-warning-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
+/* Summary message node */
+.message-summary {
+    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
+    border-radius: 8px; padding: 10px 14px; margin: 4px 0;
+    background: color-mix(in srgb, var(--accent) 6%, transparent);
+    font-size: 0.85rem; position: relative;
+}
+.message-summary .summary-header {
+    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
+    font-size: 0.75rem; color: var(--text-3); font-weight: 500;
+}
+.message-summary .summary-toggle {
+    background: none; border: none; color: var(--accent); cursor: pointer;
+    font-size: 0.75rem; padding: 0; text-decoration: underline;
+}
+.message-summary .summary-toggle:hover { color: var(--text); }
+.msg-dimmed { opacity: 0.5; }
+.message-summary-divider {
+    text-align: center; padding: 8px 0; margin: 4px 0;
+}
+.message-summary-divider .summary-toggle {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    font-size: 0.78rem; padding: 4px 12px; border-radius: 4px;
+    transition: all var(--transition);
+}
+.message-summary-divider .summary-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.input-wrap {
+    max-width: 768px; margin: 0 auto; width: 100%; box-sizing: border-box;
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: 12px; padding: 0;
+    display: flex; align-items: flex-end;
+    transition: border-color var(--transition);
+}
+.input-wrap:focus-within { border-color: var(--border-light); }
+
+.input-wrap textarea {
+    flex: 1; resize: none; background: none; border: none;
+    color: var(--text); padding: 12px 0 12px 14px;
+    font-family: var(--font); font-size: 14px;
+    max-height: 200px; line-height: 1.5;
+}
+.input-wrap textarea:focus { outline: none; }
+.input-wrap textarea::placeholder { color: var(--text-3); }
+
+/* CM6 chat input — match textarea layout within .input-wrap */
+#messageInputWrap {
+    flex: 1; min-width: 0;
+}
+#messageInputWrap .cm-editor {
+    background: transparent;
+    padding: 12px 0 12px 8px;
+    max-height: 200px;
+    font-family: var(--font);
+    font-size: 14px;
+    line-height: 1.5;
+}
+#messageInputWrap .cm-editor.cm-focused { outline: none; }
+#messageInputWrap .cm-scroller { overflow-y: auto; }
+
+/* CM6 extension editor containers */
+.ext-edit-form .cm-editor {
+    height: 100%;
+    font-size: 12px;
+}
+
+.input-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
+
+/* Chat input area wrapper (bottom pinned, padded) */
+.chat-input-area {
+    padding: 0 16px 16px; flex-shrink: 0;
+}
+.chat-footer {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 4px 4px 0; max-width: 768px; margin: 0 auto;
+    min-height: 18px;
+}
+.chat-version { font-size: 10px; color: var(--text-3); }
+.input-token-count {
+    font-size: 10px; color: var(--text-3);
+    font-family: var(--mono); margin-right: 4px; white-space: nowrap;
+}
+
+/* Left-side toolbar: attach, tools, KB — single container handles alignment */
+.input-toolbar {
+    display: flex; align-items: center; gap: 2px;
+    padding: 0 4px 6px; flex-shrink: 0;
+    max-width: 768px; margin: 0 auto; width: 100%;
+    box-sizing: border-box;
+}
+
+.action-btn {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    padding: 6px; border-radius: var(--radius);
+    transition: background var(--transition), color var(--transition);
+    display: flex; align-items: center; justify-content: center;
+}
+.action-btn:hover { background: var(--bg-hover); color: var(--text); }
+
+.send-btn { color: var(--accent); }
+.send-btn:hover { background: var(--accent-dim); color: var(--accent-hover); }
+.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+.stop-btn { display: none; color: var(--warning); }
+.stop-btn.visible { display: flex; }
+
+/* ── Files ─────────────────────────── */
+
+.attach-btn { color: var(--text-3); }
+.attach-btn:hover { color: var(--text); }
+
+.file-strip {
+    max-width: 768px; margin: 0 auto; padding: 6px 8px 2px;
+    display: flex; gap: 6px; flex-wrap: wrap;
+}
+
+.att-chip {
+    display: flex; align-items: center; gap: 6px;
+    background: var(--bg-raised); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 4px 6px;
+    font-size: 12px; max-width: 220px; position: relative;
+}
+.att-chip.att-ready { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
+.att-chip.att-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
+.att-chip.att-pending { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
+
+.att-thumb {
+    width: 32px; height: 32px; object-fit: cover;
+    border-radius: 3px; flex-shrink: 0;
+}
+.att-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
+
+.att-info { display: flex; flex-direction: column; min-width: 0; }
+.att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
+.att-meta { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.att-remove {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    padding: 2px 4px; font-size: 13px; line-height: 1; border-radius: 3px;
+    flex-shrink: 0; margin-left: auto;
+}
+.att-remove:hover { background: var(--bg-hover); color: var(--text); }
+
+/* Drag-and-drop overlay on chat area */
+.messages.drag-over {
+    outline: 2px dashed var(--accent);
+    outline-offset: -4px;
+    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
+}
+
+/* ── Message Files ────────────────────── */
+
+.msg-files {
+    display: flex; gap: 8px; flex-wrap: wrap;
+    margin-top: 8px;
+}
+
+.msg-att-image {
+    cursor: pointer; position: relative; border-radius: var(--radius);
+    overflow: hidden; border: 1px solid var(--border);
+    transition: border-color var(--transition);
+}
+.msg-att-image:hover { border-color: var(--accent); }
+.msg-att-image img {
+    display: block; max-height: 280px; border-radius: var(--radius);
+    background: var(--bg-raised);
+}
+.msg-att-image img.att-load-error {
+    min-width: 120px; min-height: 60px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; color: var(--text-3);
+}
+
+.att-vision-hint {
+    position: absolute; top: 4px; right: 4px;
+    background: color-mix(in srgb, var(--bg) 85%, transparent);
+    border-radius: 4px; padding: 2px 5px; font-size: 14px;
+    cursor: help;
+}
+
+.msg-att-doc {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; border: 1px solid var(--border);
+    border-radius: var(--radius); background: var(--bg-raised);
+    text-decoration: none; color: var(--text);
+    max-width: 280px; transition: border-color var(--transition);
+}
+.msg-att-doc:hover { border-color: var(--accent); }
+.att-doc-icon { font-size: 20px; flex-shrink: 0; }
+.att-doc-info { display: flex; flex-direction: column; min-width: 0; }
+.att-doc-name {
+    font-size: 13px; font-weight: 500;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.att-doc-size { font-size: 11px; color: var(--text-3); }
+.att-doc-dl { color: var(--text-3); font-size: 14px; margin-left: auto; }
+
+/* ── Image Lightbox ─────────────────────────── */
+
+.lightbox-overlay {
+    display: none; position: fixed; inset: 0; z-index: 10000;
+    background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
+}
+.lightbox-overlay.active { display: flex; }
+.lightbox-overlay img {
+    max-width: 92vw; max-height: 90vh; object-fit: contain;
+    border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+}
+.lightbox-close {
+    position: absolute; top: 16px; right: 20px;
+    background: rgba(255,255,255,0.15); border: none; color: var(--text-on-color);
+    font-size: 22px; width: 40px; height: 40px; border-radius: 50%;
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s;
+}
+.lightbox-close:hover { background: rgba(255,255,255,0.3); }
+
diff --git a/src/css/layout.css b/src/css/layout.css
new file mode 100644
index 0000000..8995022
--- /dev/null
+++ b/src/css/layout.css
@@ -0,0 +1,401 @@
+/* ── layout.css ──────────────────────────────
+   App shell, workspace, sidebar, responsive
+   ──────────────────────────────────────────── */
+
+/* ── App Shell ───────────────────────────── */
+
+.app { display: flex; height: 100%; flex-direction: column; }
+.app-body { display: flex; flex: 1; min-height: 0; }
+
+/* ── Workspace (everything right of sidebar) ── */
+
+.workspace {
+    display: flex; flex: 1; min-width: 0; min-height: 0;
+    overflow: hidden; position: relative;
+}
+.workspace-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.workspace-primary { flex: 1; min-width: 0; background: var(--bg); }
+.workspace-secondary {
+    width: 0; min-width: 0; overflow: hidden;
+    background: var(--bg); border-left: 1px solid var(--border);
+    transition: width 0.25s ease, min-width 0.25s ease;
+}
+.workspace-secondary.open {
+    width: 480px; min-width: 480px;
+}
+.workspace-secondary.fullscreen {
+    position: fixed; top: 0; right: 0; bottom: 0;
+    width: 100% !important; min-width: 100% !important;
+    z-index: 100; transition: none;
+}
+.workspace-handle {
+    width: 0; flex-shrink: 0; position: relative; z-index: 10;
+}
+.workspace-handle.active {
+    width: 6px; cursor: col-resize;
+}
+.workspace-handle.active::after {
+    content: ''; position: absolute; inset: 0;
+    transition: background 0.15s;
+}
+.workspace-handle.active:hover::after { background: var(--accent); opacity: 0.3; }
+.workspace-secondary.fullscreen ~ .workspace-handle { display: none; }
+
+/* ── Environment Banners ──────────────────── */
+
+.banner {
+    display: none;
+    width: 100%; text-align: center;
+    font-size: 12px; font-weight: 700; letter-spacing: 1px;
+    text-transform: uppercase;
+    padding: 2px 0; line-height: 1.4;
+    background: var(--banner-bg); color: var(--banner-fg);
+    flex-shrink: 0; z-index: 9999;
+    min-height: 22px; box-sizing: border-box;
+}
+.banner.active { display: flex; align-items: center; justify-content: center; }
+.banner-top { order: -1; }
+.banner-bottom { order: 999; }
+
+/* ── Sidebar ─────────────────────────────── */
+
+.sidebar {
+    width: var(--sidebar-w); background: var(--bg-surface);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column;
+    transition: width var(--transition);
+    overflow: hidden; flex-shrink: 0;
+}
+.sidebar.collapsed { width: var(--sidebar-rail); }
+
+.sidebar-top {
+    display: flex; flex-direction: column; gap: 2px;
+    padding: 10px 10px 6px;
+    border-bottom: 1px solid var(--border);
+}
+
+/* Brand / collapse toggle */
+.sb-brand {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px; border-radius: var(--radius);
+    background: none; border: none; color: var(--text);
+    cursor: pointer; font-size: 13px; white-space: nowrap;
+    transition: background var(--transition); width: 100%;
+    position: relative;
+}
+.sb-brand:hover { background: var(--bg-hover); }
+.sb-logo { flex-shrink: 0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
+.sb-logo img, .sb-logo .brand-logo-img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
+.brand-collapse { display: none; }
+.brand-text { font-weight: 600; font-size: 14px; }
+
+.sb-btn {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px; border-radius: var(--radius);
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; font-size: 13px; white-space: nowrap;
+    transition: background var(--transition), color var(--transition);
+    width: 100%;
+}
+.sb-btn:hover { background: var(--bg-hover); color: var(--text); }
+.sb-btn svg { flex-shrink: 0; }
+/* Sidebar toggle: hidden on desktop (brand click handles collapse) */
+.sidebar-toggle { display: none; }
+.sb-label { overflow: hidden; transition: opacity var(--transition); }
+.sidebar.collapsed .sb-label { opacity: 0; width: 0; }
+.sidebar.collapsed .brand-text { opacity: 0; width: 0; }
+
+/* Collapsed centering */
+.sidebar.collapsed .sidebar-top { padding: 10px 0 8px; align-items: center; }
+.sidebar.collapsed .sidebar-bottom { padding: 8px 0; display: flex; flex-direction: column; align-items: center; }
+.sidebar.collapsed .sb-brand { justify-content: center; padding: 8px 0; gap: 0; }
+.sidebar.collapsed .sb-btn { justify-content: center; padding: 8px 0; gap: 0; }
+.sidebar.collapsed .split-btn-main { justify-content: center; padding: 8px 0; gap: 0; }
+.sidebar.collapsed .user-btn { justify-content: center; padding: 6px 0; gap: 0; }
+.sidebar.collapsed .user-flyout {
+    position: fixed;
+    left: var(--sidebar-rail);
+    bottom: 8px;
+    right: auto;
+    width: 200px;
+    margin-bottom: 0;
+}
+.sidebar.collapsed .avatar-bug { display: none; }
+
+/* Split button (New Chat + dropdown) */
+.split-btn { display: flex; width: 100%; gap: 0; position: relative; }
+.split-btn-main {
+    flex: 1; display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px; border-radius: var(--radius) 0 0 var(--radius);
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; font-size: 13px; white-space: nowrap;
+    transition: background var(--transition), color var(--transition);
+}
+.split-btn-main:hover { background: var(--bg-hover); color: var(--text); }
+.split-btn-main svg { flex-shrink: 0; }
+
+.split-btn-drop {
+    display: flex; align-items: center; padding: 8px 6px;
+    border-radius: 0 var(--radius) var(--radius) 0;
+    background: none; border: none; border-left: 1px solid var(--border);
+    color: var(--text-3); cursor: pointer;
+    transition: background var(--transition), color var(--transition);
+}
+.split-btn-drop:hover { background: var(--bg-hover); color: var(--text); }
+.sidebar.collapsed .split-btn-drop { display: none; }
+
+/* Dropdown menu */
+.split-dropdown {
+    display: none; position: absolute; left: 6px; right: 6px;
+    top: 100%; z-index: 200;
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius); padding: 4px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+}
+.split-dropdown.open { display: block; }
+.split-dropdown-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 7px 10px; border-radius: 4px; width: 100%;
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; font-size: 12px; white-space: nowrap;
+    transition: background var(--transition), color var(--transition);
+}
+.split-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
+.split-dropdown-item.disabled { opacity: 0.4; pointer-events: none; }
+.split-dropdown-item .dd-hint {
+    margin-left: auto; font-size: 10px; color: var(--text-3);
+}
+
+/* Chat/Channel list */
+.sidebar-chats {
+    flex: 1; overflow-y: auto; overflow-x: hidden;
+    padding: 8px 6px;
+}
+.sidebar-chats::-webkit-scrollbar { width: 4px; }
+
+/* Channels section header */
+.sidebar-section-header {
+    display: flex; align-items: center; gap: 6px;
+    padding: 8px 10px 4px; cursor: pointer;
+    user-select: none;
+}
+.sidebar-section-header .section-arrow {
+    font-size: 10px; color: var(--text-3); transition: transform var(--transition);
+}
+.sidebar-section-header.collapsed .section-arrow { transform: rotate(-90deg); }
+.sidebar-section-header .section-label {
+    font-size: 11px; font-weight: 600; color: var(--text-3);
+    text-transform: uppercase; letter-spacing: 0.5px;
+}
+.sidebar-section-header .section-count {
+    font-size: 10px; color: var(--text-3); margin-left: auto;
+}
+.sidebar.collapsed .sidebar-section-header { display: none; }
+
+.channel-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 7px 10px; border-radius: var(--radius);
+    cursor: pointer; font-size: 13px; color: var(--text-2);
+    transition: background var(--transition); position: relative;
+    overflow: hidden;
+}
+.channel-item:hover { background: var(--bg-hover); color: var(--text); }
+.channel-item.active { background: var(--bg-raised); color: var(--text); }
+.channel-item .channel-hash { color: var(--text-3); font-weight: 600; flex-shrink: 0; }
+.channel-item .channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sidebar.collapsed .channel-item .channel-name { display: none; }
+
+.chat-group-label {
+    font-size: 11px; font-weight: 600; color: var(--text-3);
+    padding: 12px 10px 4px; text-transform: uppercase; letter-spacing: 0.5px;
+    white-space: nowrap; overflow: hidden;
+}
+.sidebar.collapsed .chat-group-label { display: none; }
+
+.chat-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 7px 10px; border-radius: var(--radius);
+    cursor: pointer; font-size: 13px; color: var(--text-2);
+    transition: background var(--transition); position: relative;
+    overflow: hidden;
+}
+.chat-item:hover { background: var(--bg-hover); color: var(--text); }
+.chat-item.active { background: var(--bg-raised); color: var(--text); }
+.chat-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-item-time {
+    font-size: 10px; color: var(--text-3); flex-shrink: 0;
+    white-space: nowrap;
+}
+.chat-item-delete {
+    opacity: 0; position: absolute; right: 6px; background: var(--bg-raised);
+    border: none; color: var(--text-3); cursor: pointer; font-size: 11px;
+    padding: 2px 6px; border-radius: 4px; transition: opacity var(--transition);
+}
+.chat-item:hover .chat-item-delete { opacity: 1; }
+.chat-item:hover .chat-item-time { display: none; }
+.sidebar.collapsed .chat-item-title,
+.sidebar.collapsed .chat-item-time,
+.sidebar.collapsed .chat-item-delete { display: none; }
+.sidebar.collapsed .sidebar-chats { visibility: hidden; }
+
+.sidebar-empty {
+    color: var(--text-3); font-size: 12px; text-align: center; padding: 2rem 0.5rem;
+}
+.sidebar.collapsed .sidebar-empty { display: none; }
+
+/* User area */
+.sidebar-bottom {
+    border-top: 1px solid var(--border);
+    padding: 8px 10px; position: relative;
+}
+.sidebar-bottom-divider {
+    height: 1px; background: var(--border);
+    margin: 4px 8px;
+}
+.sidebar-notes-btn {
+    color: var(--text-2); font-size: 13px;
+}
+.sidebar-notes-btn:hover { background: var(--bg-hover); color: var(--text); }
+.sidebar.collapsed .sidebar-notes-btn .sb-label { opacity: 0; width: 0; }
+.sidebar.collapsed .sidebar-notes-btn { justify-content: center; padding: 8px 0; gap: 0; }
+.sidebar.collapsed .sidebar-bottom-divider { margin: 4px 12px; }
+
+.user-btn {
+    display: flex; align-items: center; gap: 10px;
+    padding: 6px 8px; border-radius: var(--radius);
+    background: none; border: none; color: var(--text);
+    cursor: pointer; width: 100%;
+    transition: background var(--transition);
+}
+.user-btn:hover { background: var(--bg-hover); }
+
+.user-avatar {
+    width: 30px; height: 30px; border-radius: 50%;
+    background: var(--accent-dim); display: flex; align-items: center;
+    justify-content: center; font-size: 13px; font-weight: 600;
+    color: var(--accent); flex-shrink: 0; position: relative;
+    overflow: hidden;
+}
+.user-avatar-img {
+    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
+}
+.avatar-bug {
+    position: absolute; bottom: -3px; right: -3px;
+    font-size: 10px; line-height: 1;
+    display: none;
+    transition: filter var(--transition);
+}
+.avatar-bug.has-errors {
+    display: block;
+    filter: drop-shadow(0 0 4px var(--danger));
+    animation: bug-pulse 1.5s ease infinite;
+}
+@keyframes bug-pulse { 0%,100% { filter: drop-shadow(0 0 3px var(--danger)); } 50% { filter: drop-shadow(0 0 8px var(--danger)); } }
+.user-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Flyout */
+.user-flyout {
+    display: none; position: absolute; bottom: 100%; left: 8px; right: 8px;
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg); padding: 4px; margin-bottom: 4px;
+    box-shadow: 0 -4px 24px rgba(0,0,0,0.5); z-index: 200;
+}
+.user-flyout.open { display: block; }
+
+.flyout-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px; border-radius: var(--radius);
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; font-size: 13px; width: 100%;
+    transition: background var(--transition), color var(--transition);
+}
+.flyout-item:hover { background: var(--bg-hover); color: var(--text); }
+.flyout-item svg { flex-shrink: 0; }
+.flyout-danger:hover { color: var(--danger); }
+.flyout-divider { height: 1px; background: var(--border); margin: 4px 8px; }
+
+
+/* ── Sidebar Tabs (v0.21.6) ──────────── */
+
+.sidebar-tabs {
+    display: flex; padding: 0 8px; gap: 0;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.sidebar-tab {
+    flex: 1; padding: 6px 0; font-size: 12px; font-weight: 500;
+    background: none; border: none; border-bottom: 2px solid transparent;
+    color: var(--text-3); cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+}
+.sidebar-tab:hover { color: var(--text-2); }
+.sidebar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.sidebar.collapsed .sidebar-tabs { display: none; }
+.sidebar-tab-panel { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
+.sidebar-files-panel { padding: 0; }
+
+
+/* ── Sidebar Search ──────────────────────── */
+
+.sidebar-search {
+    display: flex; align-items: center; gap: 7px;
+    padding: 6px 10px; margin: 8px 10px 4px;
+    background: var(--input-bg); border: 1px solid var(--border);
+    border-radius: var(--radius); transition: border-color var(--transition);
+}
+.sidebar-search:focus-within { border-color: var(--accent); }
+.sidebar-search svg { color: var(--text-3); flex-shrink: 0; }
+.sidebar-search input {
+    flex: 1; background: none; border: none; color: var(--text);
+    font-size: 12px; font-family: var(--font); outline: none;
+    min-width: 0;
+}
+.sidebar-search input::placeholder { color: var(--text-3); }
+.sidebar-search-clear {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    font-size: 11px; padding: 2px 4px; border-radius: 4px;
+    transition: color var(--transition); display: none;
+}
+.sidebar-search-clear:hover { color: var(--text); }
+.sidebar-search.has-value .sidebar-search-clear { display: block; }
+.sidebar.collapsed .sidebar-search { display: none; }
+
+.sidebar-search-empty {
+    color: var(--text-3); font-size: 12px; text-align: center;
+    padding: 1.5rem 0.5rem;
+}
+
+
+/* ── Responsive ──────────────────────────── */
+
+.mobile-menu-btn {
+    display: none; align-items: center; justify-content: center;
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; padding: 4px; border-radius: var(--radius);
+    transition: color var(--transition);
+}
+.mobile-menu-btn:hover { color: var(--text); }
+.sidebar-overlay {
+    display: none; position: fixed; inset: 0; z-index: 99;
+    background: var(--overlay);
+}
+
+@media (max-width: 768px) {
+    .sidebar { position: fixed; z-index: 100; height: 100%; transition: width 0.2s ease; }
+    .sidebar.collapsed { width: 0; border: none; overflow: hidden; }
+    .msg-inner { padding: 0 1rem; }
+    .model-caps { display: none; }
+    .input-area { padding: 0 0.5rem 0.5rem; }
+    .input-wrap textarea { font-size: 16px; } /* prevent iOS zoom */
+    .mobile-menu-btn { display: flex; }
+    .modal-overlay { padding: 0.75rem; }
+    .modal { width: 100%; }
+    .tab-arrow { width: 36px; font-size: 20px; } /* larger touch target */
+    .modal-tabs { padding: 0 12px; }
+    .admin-sidebar { width: 48px; padding: 0.5rem 0; }
+    .admin-sidebar button { padding: 8px 0; text-align: center; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
+    .admin-sidebar button.active { border-bottom-color: var(--accent); border-left: none; }
+    .admin-main { padding: 1rem; }
+    .admin-cat { padding: 10px 12px; font-size: 13px; }
+}
+
diff --git a/src/css/modals.css b/src/css/modals.css
new file mode 100644
index 0000000..0b1c01a
--- /dev/null
+++ b/src/css/modals.css
@@ -0,0 +1,447 @@
+/* ── modals.css ──────────────────────────────
+   Modal system, debug modal, command palette, confirm dialog
+   ──────────────────────────────────────────── */
+
+/* ── Modal ────────────────────────────────── */
+
+.modal-overlay {
+    position: fixed; inset: 0; background: var(--overlay);
+    display: none; align-items: center; justify-content: center;
+    z-index: 1000; backdrop-filter: blur(2px);
+    padding: 2rem;  /* keeps modal away from viewport edges at any zoom */
+}
+.modal-overlay.active { display: flex; }
+
+.modal {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius-lg); width: 90%; max-width: 520px;
+    max-height: 100%; display: flex; flex-direction: column;
+    animation: modal-in 0.15s ease;
+}
+.modal-wide { max-width: 700px; }
+@keyframes modal-in { from { opacity: 0; transform: translateY(-8px); } }
+
+.modal-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 20px; border-bottom: 1px solid var(--border);
+}
+.modal-header h2 { font-size: 16px; font-weight: 600; }
+.modal-close {
+    background: none; border: none; color: var(--text-3); font-size: 18px;
+    cursor: pointer; padding: 2px 6px; border-radius: 4px;
+    transition: color var(--transition);
+}
+.modal-close:hover { color: var(--text); }
+.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.modal-footer {
+    padding: 12px 20px; border-top: 1px solid var(--border);
+    display: flex; justify-content: flex-end; gap: 0.5rem;
+}
+
+.settings-section { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
+.settings-section:last-child { border-bottom: none; margin-bottom: 0; }
+.settings-section h3 { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
+.avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
+.avatar-preview {
+    width: 56px; height: 56px; border-radius: 50%; background: var(--bg-raised);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 22px; font-weight: 600; color: var(--accent); flex-shrink: 0;
+    overflow: hidden; border: 2px solid var(--border);
+}
+.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
+.avatar-actions { display: flex; flex-direction: column; gap: 4px; }
+.avatar-actions .form-hint { font-size: 11px; margin-left: 0; }
+.avatar-preview-sm { width: 42px; height: 42px; font-size: 18px; }
+
+/* Modal tab bars — shared horizontal scroll with arrow navigation */
+.modal-tabs-wrap {
+    position: relative; flex-shrink: 0;
+    border-bottom: 1px solid var(--border); background: var(--bg-raised);
+}
+.modal-tabs {
+    display: flex; padding: 0 16px;
+    border-bottom: 1px solid var(--border); background: var(--bg-raised);
+    overflow-x: auto; overflow-y: hidden;
+    scrollbar-width: none; -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    flex-shrink: 0;
+}
+.modal-tabs::-webkit-scrollbar { display: none; }
+/* When wrapped, the wrapper owns the border */
+.modal-tabs-wrap .modal-tabs { border-bottom: none; background: none; }
+
+.tab-arrow {
+    position: absolute; top: 0; bottom: 1px; /* 1px for border */ width: 28px;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--bg-raised); border: none; color: var(--text-2);
+    cursor: pointer; font-size: 16px; z-index: 2; opacity: 0;
+    pointer-events: none; transition: opacity 0.15s ease;
+}
+.tab-arrow.visible { opacity: 1; pointer-events: auto; }
+.tab-arrow:hover { color: var(--accent); }
+.tab-arrow-left { left: 0; padding-left: 2px; box-shadow: 4px 0 8px -2px rgba(0,0,0,0.15); }
+.tab-arrow-right { right: 0; padding-right: 2px; box-shadow: -4px 0 8px -2px rgba(0,0,0,0.15); }
+
+/* Settings tabs */
+.settings-tabs { gap: 0; }
+.settings-tabs .settings-tab {
+    padding: 10px 14px; background: none; border: none; border-radius: 0;
+    color: var(--text-3); cursor: pointer; font-size: 13px; font-family: var(--font);
+    border-bottom: 2px solid transparent; transition: color var(--transition);
+    outline: none; -webkit-appearance: none; appearance: none;
+    white-space: nowrap; flex-shrink: 0;
+}
+.settings-tabs .settings-tab:hover { color: var(--text-2); }
+.settings-tabs .settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.settings-notice {
+    background: rgba(234,179,8,0.08); border: 1px solid var(--warning-dim);
+    border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
+    color: var(--warning); display: flex; align-items: center; gap: 8px;
+    margin-top: 1rem;
+}
+
+/* Providers */
+.provider-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 0; border-bottom: 1px solid var(--border);
+}
+.provider-name { font-weight: 500; font-size: 13px; }
+.provider-meta { font-size: 11px; color: var(--text-3); margin-left: 8px; }
+.provider-actions { display: flex; align-items: center; gap: 8px; }
+.badge-global { font-size: 10px; color: var(--text-3); background: var(--bg-raised); padding: 2px 8px; border-radius: 4px; }
+
+/* Admin panel (fullscreen) */
+.admin-panel {
+    position: fixed; z-index: 1000;
+    top: var(--banner-top-height); right: 0;
+    bottom: var(--banner-bottom-height); left: 0;
+    background: var(--bg); display: flex; flex-direction: column;
+}
+.admin-topbar {
+    display: flex; align-items: center; padding: 0 1rem; height: 48px;
+    border-bottom: 1px solid var(--border); background: var(--bg-surface); flex-shrink: 0;
+}
+.admin-back {
+    background: none; border: none; color: var(--text-3); cursor: pointer;
+    font-size: 14px; padding: 4px 10px; border-radius: 4px; font-family: var(--font);
+}
+.admin-back:hover { color: var(--accent); background: var(--bg-raised); }
+.admin-title { font-size: 16px; font-weight: 600; margin-left: 1rem; flex: 1; }
+.admin-user { font-size: 12px; color: var(--text-3); }
+
+.admin-categories {
+    display: flex; gap: 0; border-bottom: 1px solid var(--border);
+    background: var(--bg-surface); padding: 0 1rem; flex-shrink: 0;
+}
+.admin-cat {
+    background: none; border: none; border-bottom: 2px solid transparent;
+    color: var(--text-3); padding: 10px 20px; cursor: pointer;
+    font-size: 14px; font-weight: 500; font-family: var(--font);
+    transition: color 0.15s, border-color 0.15s; outline: none;
+}
+.admin-cat:hover { color: var(--text-2); }
+.admin-cat.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.admin-body { display: flex; flex: 1; overflow: hidden; }
+
+.admin-sidebar {
+    width: 160px; flex-shrink: 0; border-right: 1px solid var(--border);
+    background: var(--bg-surface); padding: 0.75rem 0; overflow-y: auto;
+}
+.admin-sidebar button {
+    display: block; width: 100%; text-align: left; background: none; border: none;
+    padding: 8px 20px; color: var(--text-3); cursor: pointer;
+    font-size: 13px; font-family: var(--font); border-left: 3px solid transparent;
+    transition: color 0.1s, background 0.1s;
+}
+.admin-sidebar button:hover { color: var(--text-2); background: var(--bg-raised); }
+.admin-sidebar button.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-raised); }
+
+.admin-main { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; }
+.admin-section-content { /* replaces .admin-tab-content */ }
+
+/* Admin shared */
+/* admin-tab: still used by team admin modal */
+.admin-tab {
+    padding: 10px 14px; background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent;
+    white-space: nowrap; flex-shrink: 0; transition: color var(--transition);
+    outline: none; font-family: var(--font);
+}
+.admin-tab:hover { color: var(--text-2); }
+.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
+.admin-hint { font-size: 12px; color: var(--text-3); }
+.admin-inline-form {
+    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 1rem; margin-bottom: 1rem;
+}
+.ext-edit-form {
+    background: var(--bg); padding: 12px 0;
+}
+.ext-edit-form textarea {
+    resize: vertical; min-height: 60px;
+    line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto;
+}
+
+.admin-user-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
+    min-height: 52px;
+}
+.admin-user-info { flex: 1; }
+.admin-user-email { font-size: 12px; color: var(--text-3); margin-top: 2px; }
+.admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; }
+.admin-user-actions button { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; min-width: 68px; text-align: center; }
+.admin-user-actions button:hover { border-color: var(--border-light); color: var(--text); }
+.admin-user-actions .btn-danger { color: var(--danger); }
+.admin-user-actions .btn-danger:hover { border-color: var(--danger); }
+.inline-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
+
+.admin-model-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; }
+.admin-model-row .model-name { flex: 1; font-weight: 500; }
+.admin-model-row .model-caps-inline { display: flex; gap: 3px; }
+.admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; }
+.admin-model-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text-2); min-width: 82px; text-align: center; }
+.admin-model-toggle:hover { border-color: var(--accent); color: var(--accent); }
+.admin-model-toggle.enabled { border-color: var(--success); color: var(--success); }
+.admin-model-toggle.team { border-color: var(--accent); color: var(--accent); }
+.model-list-item.model-hidden { opacity: 0.5; }
+.model-list-item.model-hidden .model-name { text-decoration: line-through; }
+
+.admin-provider-row {
+    display: flex; align-items: center; gap: 12px; padding: 10px 0;
+    border-bottom: 1px solid var(--border); font-size: 14px;
+}
+.admin-provider-row .provider-name { font-weight: 500; flex: 1; }
+.admin-provider-row .provider-endpoint { font-size: 12px; color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.btn-edit { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
+.btn-edit:hover { color: var(--accent); }
+.admin-provider-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
+.admin-provider-row .btn-delete:hover { color: var(--danger); }
+
+.admin-persona-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
+.admin-persona-row .persona-info { flex: 1; min-width: 0; }
+.persona-row-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
+.persona-row-icon { margin-right: 4px; }
+.admin-persona-row .persona-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
+.admin-persona-row .persona-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.admin-persona-row .persona-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
+.admin-persona-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
+.admin-persona-row .btn-delete:hover { color: var(--danger); }
+.badge-user { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--accent-dim); color: var(--accent); }
+
+/* Stats cards */
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
+.stat-card {
+    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 14px 16px; text-align: center;
+}
+.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.2; }
+.stat-card .stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
+
+/* Audit log */
+.audit-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
+.audit-row:last-child { border-bottom: none; }
+.audit-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.audit-action { font-weight: 600; color: var(--accent); font-family: var(--font-mono, monospace); font-size: 12px; }
+.audit-actor { color: var(--text); }
+.audit-resource { color: var(--text-3); font-family: var(--font-mono, monospace); font-size: 11px; }
+.audit-meta { display: flex; gap: 10px; margin-top: 2px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
+.audit-details { color: var(--text-2); }
+.audit-ip { font-family: var(--font-mono, monospace); }
+.pagination-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
+
+/* Banner preview */
+.banner-preview {
+    margin-top: 0.75rem; padding: 6px 16px; text-align: center;
+    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
+    border-radius: var(--radius);
+}
+.color-input-wrap { display: flex; align-items: center; gap: 8px; }
+.color-input-wrap input[type="color"] {
+    width: 36px; height: 32px; border: 1px solid var(--border);
+    border-radius: var(--radius); background: var(--bg);
+    cursor: pointer; padding: 2px;
+}
+.color-hex {
+    width: 80px; background: var(--bg-raised); border: 1px solid var(--border);
+    color: var(--text); padding: 6px 10px; border-radius: var(--radius);
+    font-family: var(--mono); font-size: 12px;
+}
+.section-hint { font-size: 13px; color: var(--text-3); margin-bottom: 0.75rem; }
+
+/* User model list */
+.model-list-grid { display: flex; flex-direction: column; gap: 2px; }
+.model-list-item {
+    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
+    border-radius: var(--radius); font-size: 13px; cursor: default;
+}
+.model-list-item:hover { background: var(--bg-hover); }
+.model-list-item .model-name { flex: 1; font-weight: 500; }
+.model-list-item .model-provider { font-size: 12px; color: var(--text-3); }
+.model-list-item .model-caps-inline { display: flex; gap: 3px; }
+
+.badge-admin { background: var(--accent); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-user { background: var(--bg-raised); color: var(--text-3); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-inactive { background: var(--danger); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-pending { background: var(--warning); color: var(--text-on-warning); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-team { background: var(--accent-dim); color: var(--accent-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; margin-left: 2px; }
+.admin-approve-form { padding: 10px 12px; margin: -4px 0 8px; background: var(--glass); border-radius: 0 0 8px 8px; border-top: 1px solid var(--border); }
+.admin-approve-form .checkbox-label { display: block; margin: 2px 0; }
+.btn-approve { background: var(--success-dim); color: var(--success-light); border: 1px solid rgba(34,197,94,0.3); border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
+.team-card { padding: 8px 10px; background: var(--glass); border-radius: 6px; margin-bottom: 6px; }
+.team-card-info { display: flex; align-items: center; gap: 8px; }
+.team-admin-back {
+    cursor: pointer; margin-right: 4px; opacity: 0.5;
+    transition: opacity var(--transition);
+}
+.team-admin-back:hover { opacity: 1; }
+.team-tab-content { padding: 0; }
+.badge-private { background: var(--purple); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-success { background: var(--success-dim); color: var(--success-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-warning { background: var(--warning-dim); color: var(--warning-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+.badge-danger { background: var(--danger-dim); color: var(--danger-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
+
+/* Health + Routing admin (v0.22.3) */
+.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
+.admin-health-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
+.list-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
+.admin-table { border-collapse: collapse; }
+.admin-table th, .admin-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
+.admin-table th { font-weight: 600; color: var(--text-2); font-size: 11px; text-transform: uppercase; }
+.admin-user-row.user-inactive { opacity: 0.7; }
+.loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; }
+.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }
+.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; }
+
+
+/* ── Debug Modal ─────────────────────────── */
+
+.debug-modal { max-width: 900px; height: 100%; overflow: hidden; }
+.debug-tabs { }
+.debug-tab { padding: 8px 12px; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
+.debug-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.debug-modal-body { flex: 1; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; }
+.debug-tab-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.debug-toolbar { display: flex; gap: 1rem; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 11px; }
+.debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; }
+.debug-content { flex: 1; overflow-y: auto; padding: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; }
+.debug-entry { padding: 1px 6px; border-bottom: 1px solid rgba(128,128,128,0.06); white-space: pre-wrap; word-break: break-all; }
+.debug-time { color: var(--text-3); opacity: 0.6; font-size: 10px; }
+.debug-msg { color: var(--text); }
+.debug-empty { color: var(--text-3); text-align: center; padding: 2rem; }
+.debug-net-entry { border-bottom: 1px solid var(--border); }
+.debug-net-entry summary { padding: 6px; cursor: pointer; font-size: 11px; }
+.debug-net-method { font-weight: bold; color: var(--accent); }
+.debug-net-url { color: var(--text); word-break: break-all; }
+.debug-net-detail { padding: 6px 12px; font-size: 11px; }
+.debug-pre { white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; padding: 6px; background: rgba(0,0,0,0.2); border-radius: 4px; margin: 4px 0; }
+.debug-state-pre { max-height: none; margin: 0; }
+.debug-footer { display: flex; align-items: center; }
+
+
+/* ── Command Palette ─────────────────────── */
+
+.cmd-palette-overlay {
+    position: fixed; inset: 0; background: var(--overlay);
+    display: none; align-items: flex-start; justify-content: center;
+    z-index: 2000; backdrop-filter: blur(4px);
+    padding-top: min(20vh, 160px);
+}
+.cmd-palette-overlay.active { display: flex; }
+
+.cmd-palette {
+    background: var(--bg-surface); border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg); width: 90%; max-width: 480px;
+    box-shadow: 0 16px 64px rgba(0,0,0,0.6);
+    animation: modal-in 0.12s ease;
+    overflow: hidden;
+}
+
+.cmd-input-wrap {
+    display: flex; align-items: center; gap: 10px;
+    padding: 12px 16px; border-bottom: 1px solid var(--border);
+}
+.cmd-input-wrap svg { color: var(--text-3); flex-shrink: 0; }
+.cmd-input-wrap input {
+    flex: 1; background: none; border: none; color: var(--text);
+    font-size: 15px; font-family: var(--font); outline: none;
+}
+.cmd-input-wrap input::placeholder { color: var(--text-3); }
+.cmd-kbd {
+    font-size: 10px; font-family: var(--mono); color: var(--text-3);
+    background: var(--bg); border: 1px solid var(--border);
+    border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
+}
+
+.cmd-results {
+    max-height: 320px; overflow-y: auto;
+    padding: 4px;
+}
+
+.cmd-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px; border-radius: var(--radius);
+    cursor: pointer; font-size: 13px; color: var(--text-2);
+    transition: background 60ms ease, color 60ms ease;
+}
+.cmd-item:hover, .cmd-item.active {
+    background: var(--accent-dim); color: var(--text);
+}
+.cmd-item svg { flex-shrink: 0; color: var(--text-3); }
+.cmd-item.active svg { color: var(--accent); }
+.cmd-item-label { flex: 1; }
+.cmd-item-hint {
+    font-size: 11px; color: var(--text-3); flex-shrink: 0;
+}
+.cmd-item.active .cmd-item-hint { color: var(--accent); }
+.cmd-group-label {
+    font-size: 10px; font-weight: 600; color: var(--text-3);
+    padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: 0.5px;
+}
+
+.cmd-footer {
+    display: flex; align-items: center; gap: 16px;
+    padding: 8px 16px; border-top: 1px solid var(--border);
+    font-size: 11px; color: var(--text-3);
+}
+.cmd-footer kbd {
+    font-size: 10px; font-family: var(--mono);
+    background: var(--bg); border: 1px solid var(--border);
+    border-radius: 3px; padding: 1px 4px;
+}
+
+
+/* ── Confirm Dialog ──────────────────────── */
+
+.confirm-overlay {
+    position: fixed; inset: 0; z-index: 9999;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--overlay);
+    animation: fade-in 0.12s ease;
+}
+.confirm-dialog {
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg); padding: 0;
+    min-width: 320px; max-width: 440px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+    animation: confirm-in 0.15s ease;
+}
+.confirm-header {
+    padding: 16px 20px 0; font-weight: 600; font-size: 15px; color: var(--text);
+}
+.confirm-body {
+    padding: 12px 20px 20px; font-size: 13px; color: var(--text-2);
+    line-height: 1.5; white-space: pre-wrap;
+}
+.confirm-footer {
+    display: flex; justify-content: flex-end; gap: 8px;
+    padding: 0 20px 16px;
+}
+@keyframes confirm-in { from { opacity: 0; transform: scale(0.95); } }
+@keyframes fade-in { from { opacity: 0; } }
+
diff --git a/src/css/panels.css b/src/css/panels.css
new file mode 100644
index 0000000..c022d9b
--- /dev/null
+++ b/src/css/panels.css
@@ -0,0 +1,547 @@
+/* ── panels.css ──────────────────────────────
+   Side panel, preview, notes, graph, backlinks
+   ──────────────────────────────────────────── */
+
+/* ── Side Panel (Preview + Notes) ──────── */
+
+/* ── Secondary Pane (was .side-panel, now .workspace-secondary) ── */
+/* Layout handled by .workspace-secondary above; these are internal styles */
+
+.side-panel-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 12px; border-bottom: 1px solid var(--border);
+    background: var(--bg-raised); flex-shrink: 0;
+}
+.side-panel-actions {
+    display: flex; align-items: center; gap: 2px;
+}
+.side-panel-action-btn {
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
+    transition: all var(--transition); display: flex; align-items: center;
+}
+.side-panel-action-btn:hover { background: var(--bg-hover); color: var(--text); }
+.side-panel-label {
+    font-size: 12px; font-family: var(--font); font-weight: 600;
+    color: var(--text-2); white-space: nowrap; font-style: normal;
+}
+.side-panel-btn {
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
+    transition: all var(--transition); display: flex; align-items: center;
+}
+.side-panel-btn:hover { background: var(--bg-hover); color: var(--text); }
+.side-panel-close {
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-size: 16px; padding: 2px 6px;
+    border-radius: var(--radius); transition: all var(--transition);
+}
+.side-panel-close:hover { background: var(--bg-hover); color: var(--text); }
+.side-panel-body {
+    flex: 1; overflow-y: auto; min-height: 0;
+}
+.side-panel-page { height: 100%; display: flex; flex-direction: column; }
+.side-panel-empty {
+    display: flex; align-items: center; justify-content: center;
+    height: 100%; color: var(--text-3); font-size: 13px;
+    padding: 2rem; text-align: center;
+}
+.preview-frame {
+    flex: 1; width: 100%; border: none; background: var(--bg-surface);
+}
+.preview-empty {
+    display: flex; align-items: center; justify-content: center;
+    height: 100%; color: var(--text-3); font-size: 13px;
+    padding: 2rem; text-align: center;
+}
+
+/* Notes inside secondary pane */
+.notes-actions-bar {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; border-bottom: 1px solid var(--border);
+}
+.workspace-secondary .notes-list, .side-panel .notes-list { padding: 4px 8px; }
+.workspace-secondary .notes-editor, .side-panel .notes-editor { padding: 8px 12px; }
+.workspace-secondary .note-read-content, .side-panel .note-read-content {
+    max-height: none; flex: 1; overflow-y: auto;
+}
+.workspace-secondary .notes-content-input, .side-panel .notes-content-input {
+    min-height: 150px;
+}
+.workspace-secondary #notesListView, .side-panel #notesListView {
+    flex: 1; overflow-y: auto; min-height: 0;
+}
+.workspace-secondary #notesEditorView, .side-panel #notesEditorView {
+    flex: 1; overflow-y: auto; min-height: 0;
+}
+
+/* Side panel overlay (mobile tap-to-close, mirrors sidebar-overlay) */
+.side-panel-overlay {
+    display: none; position: fixed; inset: 0; z-index: 199;
+    background: var(--overlay);
+}
+
+/* Mobile: full-width overlay */
+@media (max-width: 768px) {
+    .workspace-secondary.open {
+        position: fixed; top: 0; right: 0; bottom: 0;
+        width: 100vw; min-width: 100vw; z-index: 200;
+    }
+    .workspace-handle { display: none !important; }
+
+    /* Larger touch targets on mobile */
+    .side-panel-close { font-size: 20px; padding: 4px 10px; }
+    .side-panel-action-btn { padding: 6px 8px; }
+    .side-panel-header { padding: 10px 12px; }
+}
+
+/* Dual-view removed in workspace refactor (v0.22.0) — workspace
+   handles all pane placement via primary/secondary slots. */
+
+.msg-text ul, .msg-text ol { margin: 0.4em 0; padding-left: 1.5em; }
+.msg-text li { margin: 0.2em 0; }
+.msg-text li > p { margin: 0.2em 0; }
+
+.msg-text blockquote {
+    border-left: 3px solid var(--accent); padding: 0.25em 0.75em; margin: 0.5em 0;
+    color: var(--text-2); background: var(--accent-dim); border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.msg-text hr { border: none; border-top: 1px solid var(--border); margin: 0.75em 0; }
+
+.msg-text table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 13px; }
+.msg-text th, .msg-text td { border: 1px solid var(--border); padding: 0.4em 0.7em; text-align: left; }
+.msg-text th { background: var(--bg-raised); font-weight: 600; }
+
+.msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4 { margin: 0.75em 0 0.3em; font-weight: 600; }
+.msg-text h1 { font-size: 1.4em; }
+.msg-text h2 { font-size: 1.2em; }
+.msg-text h3 { font-size: 1.05em; }
+
+.msg-text a { color: var(--accent); }
+.msg-text img { max-width: 100%; border-radius: var(--radius); }
+
+/* Thinking blocks */
+.thinking-block {
+    border: 1px solid var(--accent-dim); border-radius: var(--radius);
+    margin: 0.5rem 0; background: rgba(108,159,255,0.03);
+}
+.thinking-block summary {
+    padding: 0.4rem 0.75rem; cursor: pointer; font-size: 12px;
+    color: var(--text-3); user-select: none;
+    transition: color var(--transition);
+}
+.thinking-block summary:hover { color: var(--text-2); }
+.thinking-block[open] summary { border-bottom: 1px solid rgba(108,159,255,0.08); }
+.thinking-content {
+    padding: 0.5rem 0.75rem; font-size: 12px; color: var(--text-3);
+    max-height: 300px; overflow-y: auto; line-height: 1.6;
+}
+
+/* Tool activity indicators */
+.msg-tools {
+    display: flex; flex-direction: column; gap: 4px;
+    margin-bottom: 0.5rem;
+}
+.tool-activity {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 12px; color: var(--text-3);
+    background: var(--bg-raised); border: 1px solid var(--border);
+    padding: 4px 10px; border-radius: var(--radius);
+    animation: tool-fade-in 0.2s ease;
+}
+@keyframes tool-fade-in { from { opacity: 0; transform: translateY(-4px); } }
+.tool-icon { font-size: 13px; }
+.tool-name { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
+.tool-status { font-size: 11px; margin-left: auto; }
+.tool-running { color: var(--warning); }
+.tool-running::after {
+    content: ''; display: inline-block; width: 4px; height: 4px;
+    border-radius: 50%; background: var(--warning); margin-left: 4px;
+    animation: tool-pulse 1s infinite;
+}
+@keyframes tool-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+.tool-done { color: var(--success); }
+.tool-error { color: var(--danger); }
+.tool-hint {
+    font-size: 11px; color: var(--text-3); margin-left: 6px;
+    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tool-note-link {
+    background: none; border: none; color: var(--accent); cursor: pointer;
+    font-size: 11px; margin-left: 6px; padding: 0;
+    text-decoration: none;
+    transition: color var(--transition);
+}
+.tool-note-link:hover { color: var(--text); text-decoration: underline; }
+
+/* Tool calls in message history (collapsed) */
+.tool-call-block {
+    border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--bg-raised); font-size: 12px;
+}
+.tool-call-summary {
+    display: flex; align-items: center; gap: 6px;
+    padding: 4px 10px; cursor: pointer; user-select: none;
+    color: var(--text-3); list-style: none;
+    transition: color var(--transition);
+}
+.tool-call-summary::-webkit-details-marker { display: none; }
+.tool-call-summary::before {
+    content: '▸'; font-size: 10px; color: var(--text-3);
+    transition: transform 0.15s ease;
+}
+.tool-call-block[open] .tool-call-summary::before { transform: rotate(90deg); }
+.tool-call-summary:hover { color: var(--text-2); }
+.tool-detail {
+    border-top: 1px solid var(--border); padding: 6px 10px;
+    display: flex; flex-direction: column; gap: 6px;
+}
+.tool-detail-label {
+    font-size: 10px; color: var(--text-3); text-transform: uppercase;
+    letter-spacing: 0.5px; font-weight: 600;
+}
+.tool-detail-pre {
+    margin: 2px 0 0; padding: 6px 8px;
+    background: var(--bg-surface); border-radius: 4px;
+    font-size: 11px; color: var(--text-2); white-space: pre-wrap;
+    word-break: break-all; max-height: 200px; overflow-y: auto;
+}
+
+/* Empty state */
+.empty-state {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; height: 100%; color: var(--text-3); gap: 0.25rem;
+}
+.empty-logo { font-size: 3rem; margin-bottom: 0.5rem; }
+.empty-logo-img { width: 64px; height: 64px; object-fit: contain; }
+.empty-state h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-2); }
+.empty-state p { font-size: 0.85rem; }
+
+/* Typing indicator */
+.typing-dots { display: flex; gap: 4px; padding: 0.5rem 0; }
+.typing-dots span {
+    width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
+    animation: dot-pulse 1.2s infinite;
+}
+.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes dot-pulse { 0%,60%,100% { opacity: 0.4; } 30% { opacity: 1; } }
+
+
+/* ── Sidebar Notes Button ───────────────── */
+
+.sidebar-notes-btn {
+    padding: 4px 8px; border-top: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.sb-notes {
+    display: flex; align-items: center; gap: 8px; width: 100%;
+    padding: 8px 12px; background: none; border: none;
+    border-radius: var(--radius); color: var(--text-2);
+    cursor: pointer; font-size: 13px; font-family: var(--font);
+    transition: background var(--transition), color var(--transition);
+}
+.sb-notes:hover { background: var(--bg-hover); color: var(--text); }
+.sidebar.collapsed .sidebar-notes-btn .sb-label { display: none; }
+.sidebar.collapsed .sb-notes { justify-content: center; padding: 8px; }
+
+/* ── Notes (inside side panel) ──────────── */
+
+/* Notes toolbar and selection bar now live inside the side panel */
+
+.notes-toolbar {
+    display: flex; gap: 8px; padding: 8px 12px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-raised);
+    flex-wrap: wrap;
+}
+.notes-search-row {
+    padding: 8px 12px 4px;
+}
+.notes-search-input {
+    width: 100%; background: var(--input-bg); border: 1px solid var(--border);
+    border-radius: var(--radius); color: var(--text);
+    font-size: 13px; font-family: var(--font); padding: 6px 10px;
+    outline: none; transition: border-color var(--transition);
+}
+.notes-search-input:focus { border-color: var(--accent); }
+.notes-filter-row {
+    display: flex; gap: 8px; padding: 0 12px 8px;
+}
+.notes-editor-header {
+    display: flex; align-items: center; gap: 6px;
+    padding: 8px 12px; border-bottom: 1px solid var(--border);
+    background: var(--bg-raised);
+}
+.notes-meta-row {
+    display: flex; gap: 8px; margin-bottom: 8px;
+}
+.notes-meta-row input { flex: 1; }
+.notes-content-container { min-height: 200px; }
+.notes-read-view { padding: 12px; }
+.notes-search-wrap {
+    display: flex; align-items: center; gap: 6px; flex: 1;
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 0 10px;
+}
+.notes-search-wrap svg { color: var(--text-3); flex-shrink: 0; }
+.notes-search-wrap input {
+    flex: 1; background: none; border: none; color: var(--text);
+    font-size: 13px; font-family: var(--font); padding: 6px 0;
+    outline: none;
+}
+.notes-filter-select {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius); color: var(--text); font-size: 12px;
+    padding: 4px 8px; font-family: var(--font); cursor: pointer;
+    max-width: 160px;
+}
+
+/* Notes toolbar and selection bar now live inside the side panel */
+
+/* Selection bar */
+.notes-selection-bar {
+    display: flex; align-items: center; gap: 10px;
+    padding: 6px 12px;
+    background: var(--accent-dim); border-bottom: 1px solid var(--border);
+    font-size: 12px;
+}
+.notes-select-all {
+    display: flex; align-items: center; gap: 6px;
+    color: var(--text-2); cursor: pointer; font-size: 12px;
+}
+.notes-select-all input { cursor: pointer; }
+
+.notes-list { padding: 8px; }
+.notes-empty, .notes-loading {
+    text-align: center; color: var(--text-3); padding: 2rem;
+    font-size: 13px;
+}
+
+.note-item {
+    display: flex; align-items: flex-start; gap: 8px;
+    padding: 10px 12px; border-radius: var(--radius);
+    cursor: pointer; border: 1px solid transparent;
+    transition: background var(--transition), border-color var(--transition);
+}
+.note-item:hover {
+    background: var(--bg-hover); border-color: var(--border);
+}
+.note-item.selected {
+    background: var(--accent-dim); border-color: var(--accent);
+}
+.note-select-col { flex-shrink: 0; padding-top: 2px; }
+.note-checkbox { cursor: pointer; accent-color: var(--accent); }
+.note-content-col { flex: 1; min-width: 0; }
+.note-item-header {
+    display: flex; align-items: baseline; justify-content: space-between;
+    gap: 8px; margin-bottom: 2px;
+}
+.note-item-title {
+    font-size: 13px; font-weight: 600; color: var(--text);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.note-item-time { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
+.note-preview {
+    font-size: 12px; color: var(--text-3); line-height: 1.4;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    max-height: 1.4em;
+}
+.note-headline {
+    font-size: 12px; color: var(--text-3); line-height: 1.4;
+}
+.note-headline mark {
+    background: var(--accent-dim); color: var(--accent);
+    padding: 0 2px; border-radius: 2px;
+}
+.note-item-meta {
+    display: flex; align-items: center; gap: 4px;
+    margin-top: 4px; flex-wrap: wrap;
+}
+.note-folder {
+    font-size: 11px; color: var(--text-3); font-family: var(--mono);
+    background: var(--bg-raised); padding: 1px 6px; border-radius: 3px;
+}
+.note-tag {
+    font-size: 10px; color: var(--purple); background: var(--purple-dim);
+    padding: 1px 6px; border-radius: 3px;
+}
+
+/* Notes editor */
+.notes-editor { padding: 12px; }
+.notes-editor-toolbar {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+/* Note read mode */
+.note-read-title {
+    font-size: 18px; font-weight: 600; color: var(--text);
+    margin: 0 0 6px; line-height: 1.3;
+}
+.note-read-meta {
+    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
+    margin-bottom: 12px;
+}
+.note-read-content {
+    font-size: var(--msg-font, 14px); line-height: 1.7;
+    max-height: 50vh; overflow-y: auto;
+    padding: 12px; background: var(--bg-surface);
+    border: 1px solid var(--border); border-radius: var(--radius);
+}
+.notes-back-btn {
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-size: 12px; font-family: var(--font);
+    padding: 4px 0; margin-bottom: 8px;
+    transition: color var(--transition);
+}
+.notes-back-btn:hover { color: var(--text); }
+.notes-title-input {
+    font-size: 16px !important; font-weight: 600;
+    border: 1px solid var(--border) !important;
+    padding: 8px 10px !important;
+}
+.notes-folder-input, .notes-tags-input {
+    font-size: 12px !important; font-family: var(--mono);
+}
+.notes-content-input {
+    font-size: 13px !important; line-height: 1.6 !important;
+    min-height: 200px; resize: vertical;
+    font-family: var(--mono); border: 1px solid var(--border) !important;
+}
+.notes-editor input, .notes-editor textarea {
+    width: 100%; background: var(--bg-surface); color: var(--text);
+    border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 6px 10px; font-family: var(--font); font-size: var(--msg-font, 14px);
+    outline: none; transition: border-color var(--transition);
+}
+.notes-editor input:focus, .notes-editor textarea:focus {
+    border-color: var(--accent);
+}
+.notes-editor-actions {
+    display: flex; gap: 8px; margin-top: 12px;
+}
+
+/* ── Note Backlinks ──────────────────────── */
+
+.note-backlinks {
+    margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px;
+}
+.note-backlinks-header {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 12px; color: var(--text-2); cursor: pointer;
+    padding: 4px 0; user-select: none;
+}
+.note-backlinks-header:hover { color: var(--text); }
+.note-backlinks-header .badge {
+    background: var(--accent); color: var(--text-on-color); font-size: 10px;
+    padding: 1px 6px; border-radius: 10px;
+}
+.note-backlinks-list { margin-top: 6px; }
+.note-backlink-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
+    font-size: 13px; transition: background var(--transition);
+}
+.note-backlink-item:hover { background: var(--bg-hover); }
+.note-backlink-title { color: var(--accent); font-weight: 500; }
+.note-backlink-folder { font-size: 11px; color: var(--text-3); }
+
+/* ── Wikilink Chips (Read Mode) ──────────── */
+
+.wikilink-chip {
+    display: inline-block; padding: 1px 6px; margin: 0 1px;
+    border-radius: 4px; cursor: pointer; font-size: 0.9em;
+    font-weight: 500; text-decoration: none; vertical-align: baseline;
+    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
+    color: var(--accent, #6366f1);
+    transition: background var(--transition);
+}
+.wikilink-chip:hover {
+    background: rgba(var(--accent-rgb, 99, 102, 241), 0.25);
+}
+.wikilink-transclusion {
+    border-left: 2px solid var(--accent, #6366f1);
+    font-style: italic;
+}
+
+/* ── Transclusion Embeds ─────────────────── */
+
+.transclusion-embed {
+    margin: 8px 0; border: 1px solid var(--border);
+    border-left: 3px solid var(--accent, #6366f1);
+    border-radius: var(--radius); overflow: hidden;
+    background: var(--bg-surface);
+}
+.transclusion-header {
+    padding: 6px 10px; background: var(--bg-2);
+    border-bottom: 1px solid var(--border); font-size: 12px;
+}
+.transclusion-content {
+    padding: 10px 12px; font-size: 13px; line-height: 1.5;
+}
+.transclusion-content .msg-text { margin: 0; }
+
+/* ── Graph View ──────────────────────────── */
+
+.notes-graph-view {
+    display: flex; flex-direction: column; height: 100%;
+}
+.notes-graph-toolbar {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 10px; border-bottom: 1px solid var(--border);
+    background: var(--bg-surface); flex-shrink: 0;
+}
+.notes-graph-stats {
+    flex: 1; text-align: center; font-size: 11px; color: var(--text-3);
+}
+#noteGraphCanvas {
+    flex: 1; width: 100%; min-height: 200px;
+    background: var(--bg);
+}
+
+/* ── Daily Note Navigation ───────────────── */
+
+.note-daily-nav {
+    display: flex; align-items: center; justify-content: center;
+    gap: 12px; padding: 6px 10px;
+    border-bottom: 1px solid var(--border); background: var(--bg-surface);
+}
+.note-daily-date {
+    font-size: 13px; font-weight: 500; color: var(--text);
+    min-width: 100px; text-align: center;
+}
+
+/* ── Save-to-Note Modal ──────────────────── */
+
+.save-to-note-modal {
+    max-width: 460px; width: 90%;
+}
+.save-to-note-modal h3 { margin: 0 0 12px; font-size: 16px; }
+.save-note-mode-toggle {
+    display: flex; gap: 16px; margin-bottom: 12px; font-size: 13px;
+}
+.save-note-mode-toggle label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
+.save-note-preview {
+    max-height: 120px; overflow-y: auto; padding: 8px;
+    border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--bg); font-size: 12px; line-height: 1.5;
+}
+.save-note-search-results {
+    max-height: 160px; overflow-y: auto; margin-top: 4px;
+    border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--bg-surface);
+}
+.save-note-search-results:empty { display: none; }
+.save-note-result {
+    padding: 6px 10px; cursor: pointer; font-size: 13px;
+    transition: background var(--transition);
+}
+.save-note-result:hover, .save-note-result.selected {
+    background: var(--bg-hover);
+}
+.save-note-result.selected {
+    border-left: 3px solid var(--accent); font-weight: 500;
+}
+
diff --git a/src/css/primitives.css b/src/css/primitives.css
new file mode 100644
index 0000000..aa93d18
--- /dev/null
+++ b/src/css/primitives.css
@@ -0,0 +1,432 @@
+/* ── primitives.css ──────────────────────────
+   Buttons, forms, toasts, popups, toggles, badges
+   ──────────────────────────────────────────── */
+
+/* ── Buttons ─────────────────────────────── */
+
+button { font-family: var(--font); cursor: pointer; }
+.btn-primary {
+    background: var(--accent); color: var(--text-on-color); border: none;
+    padding: 8px 16px; border-radius: var(--radius);
+    font-weight: 500; font-size: 13px;
+    transition: background var(--transition);
+}
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-full { width: 100%; }
+.btn-small {
+    background: var(--bg-raised); border: 1px solid var(--border);
+    color: var(--text-2); padding: 6px 12px; border-radius: var(--radius);
+    font-size: 12px; transition: all var(--transition);
+}
+.btn-small:hover { background: var(--bg-hover); color: var(--text); }
+.btn-small.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-color); }
+.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; border-radius: var(--radius); }
+
+
+/* ── Forms ────────────────────────────────── */
+
+/* Base form element styling — ensures selects/inputs match the dark theme
+   even when not wrapped in .form-group (e.g. role config, inline toolbars) */
+select, input[type="text"], input[type="email"], input[type="password"],
+input[type="number"], input[type="search"], textarea {
+    background: var(--bg-raised); border: 1px solid var(--border);
+    color: var(--text); padding: 8px 12px; border-radius: var(--radius);
+    font-family: var(--font); font-size: 13px;
+    transition: border-color var(--transition);
+}
+select:focus, input[type="text"]:focus, input[type="email"]:focus,
+input[type="password"]:focus, textarea:focus {
+    outline: none; border-color: var(--accent);
+}
+select option { background: var(--bg-surface); color: var(--text); }
+
+.form-group { margin-bottom: 0.75rem; }
+.form-group label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; font-weight: 500; }
+.form-group input, .form-group select, .form-group textarea {
+    width: 100%;
+}
+.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
+    outline: none; border-color: var(--accent);
+}
+.form-row { display: flex; gap: 0.75rem; }
+.form-row .form-group { flex: 1; }
+.form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; }
+.range-input {
+    width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
+    background: var(--border); border-radius: 2px; outline: none;
+    margin: 8px 0 4px; cursor: pointer;
+}
+.range-input::-webkit-slider-thumb {
+    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
+    background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer;
+}
+.range-input::-moz-range-thumb {
+    width: 16px; height: 16px; border-radius: 50%;
+    background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer;
+}
+.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
+.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0.5rem 0; color: var(--text-2); }
+
+/* ── Theme Toggle ────────────────────────── */
+.theme-toggle {
+    display: flex; gap: 4px; padding: 3px;
+    background: var(--bg); border: 1px solid var(--border);
+    border-radius: var(--radius); width: fit-content;
+}
+.theme-btn {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 14px; border-radius: calc(var(--radius) - 2px);
+    border: none; background: none; color: var(--text-3);
+    font-family: var(--font); font-size: 13px; font-weight: 500;
+    cursor: pointer; transition: all var(--transition);
+}
+.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
+.theme-btn.active {
+    color: var(--text); background: var(--bg-raised);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+}
+
+
+/* ── Toast ────────────────────────────────── */
+
+.toast-container { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; }
+.toast {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 8px 16px; font-size: 13px;
+    display: flex; align-items: center; gap: 8px;
+    animation: toast-in 0.25s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+.toast.error { border-color: var(--danger); }
+.toast.warning { border-color: var(--warning); }
+.toast.success { border-color: var(--success); }
+.toast button { background: none; border: none; color: var(--text-3); cursor: pointer; }
+@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
+
+
+/* ── Mode Selector (v0.21.3) ───────────── */
+
+/* Surface region wrappers must participate in parent flex layouts */
+[data-surface-region="sidebar-content"] {
+    flex: 1; min-height: 0;
+    display: flex; flex-direction: column;
+}
+
+.mode-selector {
+    display: flex; gap: 2px; padding: 6px 8px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.mode-btn {
+    display: flex; align-items: center; gap: 6px;
+    padding: 4px 10px; height: 28px; border: none;
+    border-radius: var(--radius); background: none;
+    color: var(--text-3); cursor: pointer; font-size: 12px;
+    transition: background var(--transition), color var(--transition);
+    white-space: nowrap;
+}
+.mode-btn svg { flex-shrink: 0; }
+.mode-btn-label { font-weight: 500; }
+.mode-btn:hover { background: var(--bg-hover); color: var(--text); }
+.mode-btn.active { background: var(--bg-active); color: var(--accent); }
+.sidebar.collapsed .mode-selector { justify-content: center; }
+.sidebar.collapsed .mode-btn-label { display: none; }
+.sidebar.collapsed .mode-btn { padding: 4px; width: 28px; justify-content: center; }
+
+
+/* ── REPL Console (v0.21.3) ────────────── */
+
+.repl-toolbar {
+    display: flex; gap: 0.5rem; padding: 6px 12px;
+    border-bottom: 1px solid var(--border); font-size: 11px;
+}
+.repl-output {
+    flex: 1; overflow-y: auto; padding: 6px;
+    font-family: var(--mono); font-size: 12px; line-height: 1.6;
+}
+.repl-input-wrap {
+    display: flex; align-items: flex-start; gap: 6px;
+    padding: 8px 12px; border-top: 1px solid var(--border);
+    background: var(--bg-raised);
+}
+.repl-prompt {
+    font-family: var(--mono); font-size: 12px; line-height: 1.6;
+    color: var(--accent); font-weight: bold;
+    flex-shrink: 0; padding-top: 2px;
+}
+.repl-input {
+    flex: 1; background: none; border: none; outline: none;
+    font-family: var(--mono); font-size: 12px; line-height: 1.6;
+    color: var(--text); resize: none; overflow: hidden;
+    min-height: 20px;
+}
+.repl-entry { padding: 2px 6px; }
+.repl-entry-input pre { color: var(--text-2); margin: 0; white-space: pre-wrap; word-break: break-all; }
+.repl-entry-result { color: var(--text); }
+.repl-entry-error { color: var(--danger, #e55); }
+.repl-entry-info { color: var(--text-3); font-size: 11px; }
+
+.repl-error-msg { margin: 0; white-space: pre-wrap; font-weight: 500; }
+.repl-error-stack { margin: 2px 0 0 0; color: var(--text-3); font-size: 11px; white-space: pre-wrap; }
+.repl-stack-toggle {
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-size: 10px; font-family: var(--mono);
+    padding: 0; margin-top: 2px;
+}
+.repl-stack-toggle:hover { color: var(--text-2); }
+
+.repl-elapsed { color: var(--text-3); font-size: 10px; margin-left: 8px; }
+
+/* REPL value types */
+.repl-null, .repl-undefined { color: var(--text-3); margin: 0; }
+.repl-string { color: #98c379; margin: 0; white-space: pre-wrap; word-break: break-all; }
+.repl-number { color: #d19a66; margin: 0; }
+.repl-boolean { color: #56b6c2; margin: 0; }
+.repl-function { color: #c678dd; margin: 0; font-style: italic; }
+.repl-symbol { color: #e5c07b; margin: 0; }
+.repl-dom { color: #61afef; margin: 0; }
+.repl-object { color: var(--text); margin: 0; }
+.repl-json { margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--text); font-size: 11px; }
+
+.repl-collapsible { display: inline; }
+.repl-json-toggle {
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; font-family: var(--mono); font-size: 12px;
+    padding: 0;
+}
+.repl-json-toggle:hover { color: var(--accent); }
+
+
+/* ── Popup Menu (shared base) ───────────── */
+
+.popup-menu {
+    display: none; position: absolute; z-index: 200;
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius); padding: 4px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    min-width: 160px;
+}
+.popup-menu.open { display: block; }
+.popup-menu-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px; border-radius: var(--radius);
+    background: none; border: none; color: var(--text-2);
+    cursor: pointer; font-size: 13px; width: 100%;
+    transition: background var(--transition), color var(--transition);
+}
+.popup-menu-item:hover { background: var(--bg-hover); color: var(--text); }
+.popup-menu-item.disabled { opacity: 0.4; pointer-events: none; }
+.popup-menu-danger:hover { color: var(--danger); }
+.popup-menu-icon { flex-shrink: 0; display: flex; align-items: center; }
+.popup-menu-hint { margin-left: auto; font-size: 11px; color: var(--text-3); }
+.popup-menu-divider { height: 1px; background: var(--border); margin: 4px 8px; }
+
+/* ── Tools Toggle ────────────────────────── */
+
+/* ── Popup (shared base for tools/KB popups) ── */
+.popup {
+    display: none; position: absolute;
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg); padding: 4px;
+    box-shadow: var(--shadow-lg); z-index: 300;
+}
+.popup.open { display: block; }
+
+.tools-toggle-wrap { position: relative; display: flex; align-items: center; }
+.tools-toggle-btn.has-disabled { color: var(--text-3); }
+.tools-toggle-btn.has-disabled::after {
+    content: ''; position: absolute; top: 4px; right: 4px;
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--warning);
+}
+.tools-popup { bottom: 100%; left: 0; margin-bottom: 8px; min-width: 210px; }
+.tools-popup-category, .tools-popup-tool {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px; border-radius: var(--radius);
+    cursor: pointer; font-size: 13px; color: var(--text-2);
+    transition: background var(--transition);
+}
+.tools-popup-category:hover, .tools-popup-tool:hover { background: var(--bg-hover); }
+.tools-popup-tool { padding-left: 36px; font-size: 12px; } /* indented children */
+/* Toggle switch */
+.tools-popup-switch {
+    width: 32px; height: 18px; border-radius: 9px;
+    background: var(--border); flex-shrink: 0;
+    position: relative; cursor: pointer;
+    transition: background 0.2s;
+}
+.tools-popup-switch-knob {
+    position: absolute; top: 2px; left: 2px;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--text-3);
+    transition: transform 0.2s, background 0.2s;
+}
+.tools-popup-switch.on { background: var(--accent); }
+.tools-popup-switch.on .tools-popup-switch-knob {
+    transform: translateX(14px); background: var(--text-on-color);
+}
+.tools-popup-switch.on.partial { background: var(--accent-dim); }
+.tools-popup-switch.on.partial .tools-popup-switch-knob {
+    transform: translateX(7px); background: var(--accent);
+}
+.tools-popup-label { flex: 1; }
+.tools-popup-expand {
+    font-size: 14px; color: var(--text-3); cursor: pointer;
+    transition: transform var(--transition); padding: 0 2px;
+    user-select: none;
+}
+.tools-popup-expand.open { transform: rotate(90deg); }
+
+/* ── Knowledge Bases ────────────────────── */
+
+/* Toggle button in input bar */
+.kb-toggle-wrap {
+    position: relative; display: flex; align-items: center;
+}
+.kb-toggle-btn.has-active {
+    color: var(--accent);
+}
+
+/* Channel KB popup */
+.kb-popup {
+    bottom: 100%; left: 0; margin-bottom: 8px;
+    min-width: 240px; max-height: 300px; overflow-y: auto;
+}
+.kb-popup-header {
+    padding: 8px 12px 4px; font-size: 12px; font-weight: 600;
+    color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
+}
+.kb-popup-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 12px; cursor: pointer;
+    transition: background var(--transition);
+}
+.kb-popup-item:hover { background: var(--bg-hover); }
+.kb-popup-item .kb-popup-check {
+    width: 16px; height: 16px; border-radius: 3px;
+    border: 1.5px solid var(--border); flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    transition: all var(--transition);
+}
+.kb-popup-item.enabled .kb-popup-check {
+    background: var(--accent); border-color: var(--accent);
+}
+.kb-popup-item.enabled .kb-popup-check::after {
+    content: '✓'; font-size: 11px; color: var(--text-on-color);
+}
+.kb-popup-label { display: flex; flex-direction: column; min-width: 0; }
+.kb-popup-name {
+    font-size: 13px; color: var(--text);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.kb-popup-meta { font-size: 11px; color: var(--text-3); }
+.kb-popup-empty, .kb-popup-loading {
+    padding: 16px; text-align: center; font-size: 13px; color: var(--text-3);
+}
+
+/* KB management panel (settings tab) */
+.kb-manage-header {
+    display: flex; align-items: center; gap: 8px;
+    margin-bottom: 12px;
+}
+.kb-manage-header h3 { flex: 1; margin: 0; font-size: 15px; }
+.kb-manage-summary { font-size: 11px; color: var(--text-3); margin-bottom: 10px; padding: 0 2px; }
+.kb-manage-list { display: flex; flex-direction: column; gap: 2px; }
+.kb-manage-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 10px; border-radius: var(--radius);
+    background: var(--bg-2); transition: background var(--transition);
+}
+.kb-manage-item:hover { background: var(--bg-hover); }
+.kb-manage-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.kb-manage-name { font-size: 13px; font-weight: 500; color: var(--text); }
+.kb-manage-desc { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.kb-manage-stats { font-size: 11px; color: var(--text-3); }
+.kb-manage-desc-block { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
+.kb-manage-actions { display: flex; gap: 4px; flex-shrink: 0; }
+.kb-manage-empty, .kb-manage-loading {
+    padding: 20px; text-align: center; font-size: 13px; color: var(--text-3);
+}
+.kb-doc-item[data-doc-status="pending"] .kb-manage-name,
+.kb-doc-item[data-doc-status="extracting"] .kb-manage-name,
+.kb-doc-item[data-doc-status="chunking"] .kb-manage-name,
+.kb-doc-item[data-doc-status="embedding"] .kb-manage-name {
+    opacity: 0.7;
+}
+
+
+/* ── Shared Form Controls ────────────────── */
+
+.form-group { margin-bottom: 14px; }
+.form-group label {
+    display: block; font-size: 12px; font-weight: 500;
+    color: var(--text-2); margin-bottom: 5px;
+}
+.form-group input, .form-group select, .form-group textarea {
+    padding: 8px 12px; border-radius: 8px;
+    border: 1px solid var(--border);
+    background: var(--input-bg, var(--bg)); color: var(--text);
+    font-size: 13px; font-family: inherit;
+    width: 100%; max-width: 360px; outline: none;
+    transition: border-color 0.15s;
+}
+.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
+    border-color: var(--accent);
+}
+.form-group input:disabled { opacity: 0.6; }
+.form-group input[type="range"] { max-width: 100%; border: none; background: none; }
+.form-group input[type="range"]:focus { box-shadow: none; }
+.form-group input[type="checkbox"] { width: auto; max-width: none; accent-color: var(--accent); }
+
+.toggle-group {
+    display: flex; gap: 1px; padding: 3px;
+    background: var(--bg); border-radius: 10px;
+    border: 1px solid var(--border); width: fit-content;
+}
+.toggle-btn {
+    padding: 6px 14px; border: none; border-radius: 7px;
+    background: transparent; color: var(--text-3);
+    cursor: pointer; font-size: 12px; font-weight: 500;
+    font-family: inherit; transition: all 0.15s;
+}
+.toggle-btn.active { background: var(--bg-raised); color: var(--text); }
+.toggle-btn:hover { color: var(--text-2); }
+
+.btn-primary { background: var(--accent); color: var(--text-on-color); border: none; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; }
+.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
+.btn-ghost:hover { background: var(--bg-hover); }
+.btn-subtle { background: var(--accent-dim); color: var(--accent); border: none; }
+.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 500; font-family: inherit; }
+.btn-md { padding: 7px 15px; font-size: 13px; border-radius: 8px; cursor: pointer; font-weight: 500; font-family: inherit; }
+
+/* ── Badge ───────────────────────────────── */
+.badge {
+    font-size: 10px; padding: 2px 7px; border-radius: 4px;
+    font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
+    display: inline-flex; align-items: center;
+}
+.badge-accent { background: var(--accent-dim); color: var(--accent); }
+.badge-success { background: var(--success-dim); color: var(--success); }
+.badge-warning { background: var(--warning-dim); color: var(--warning); }
+.badge-danger { background: var(--danger-dim); color: var(--danger); }
+.badge-muted { background: var(--bg-raised); color: var(--text-3); }
+
+/* ── Status Dot ──────────────────────────── */
+.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.status-dot.healthy { background: var(--success); }
+.status-dot.degraded { background: var(--warning); }
+.status-dot.down { background: var(--danger); }
+.status-dot.disabled { background: var(--text-3); }
+
+/* ── Icon Button ─────────────────────────── */
+.icon-btn {
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; padding: 5px; border-radius: 7px;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s;
+}
+.icon-btn:hover { background: var(--bg-hover); color: var(--text-2); }
+.icon-btn.active { color: var(--accent); }
+
diff --git a/src/css/splash.css b/src/css/splash.css
new file mode 100644
index 0000000..c2eec73
--- /dev/null
+++ b/src/css/splash.css
@@ -0,0 +1,168 @@
+/* ── splash.css ───────────────────────────────
+   Auth splash, login, PWA install banner
+   ──────────────────────────────────────────── */
+
+/* ── Auth Splash ─────────────────────────── */
+
+.splash {
+    display: flex;
+    min-height: 100vh;
+    min-height: 100dvh;
+}
+
+/* Hero Panel (left) */
+.splash-hero {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 4rem 3.5rem;
+    position: relative;
+    overflow: hidden;
+    background:
+        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(108,159,255,0.06), transparent),
+        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(167,139,250,0.05), transparent),
+        var(--bg);
+}
+.splash-hero::before {
+    content: '';
+    position: absolute;
+    inset: -50%;
+    background-image:
+        linear-gradient(rgba(108,159,255,0.04) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(108,159,255,0.04) 1px, transparent 1px);
+    background-size: 48px 48px;
+    animation: gridDrift 30s linear infinite;
+    pointer-events: none;
+}
+@keyframes gridDrift { to { transform: translate(48px, 48px); } }
+.splash-hero::after {
+    content: '';
+    position: absolute;
+    width: 320px; height: 320px;
+    bottom: -80px; right: -60px;
+    background: radial-gradient(circle, rgba(167,139,250,0.08), transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+}
+
+.hero-content { position: relative; z-index: 1; max-width: 520px; }
+.hero-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem; }
+.hero-logo-mark { width: 48px; height: 48px; flex-shrink: 0; }
+.hero-logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
+.hero-wordmark { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
+.hero-wordmark span { color: var(--accent); }
+
+.hero-headline {
+    font-size: 2.4rem; font-weight: 700; line-height: 1.15;
+    letter-spacing: -0.03em; margin-bottom: 1rem;
+    background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.hero-sub { font-size: 1.05rem; color: var(--text-2); line-height: 1.6; margin-bottom: 2.5rem; max-width: 440px; }
+
+.hero-features { display: flex; flex-wrap: wrap; gap: 10px; }
+.hero-pill {
+    display: inline-flex; align-items: center; gap: 7px;
+    padding: 7px 14px; background: var(--bg-surface);
+    border: 1px solid var(--border); border-radius: 100px;
+    font-size: 0.8rem; font-weight: 500; color: var(--text-2);
+    transition: all var(--transition);
+}
+.hero-pill:hover { border-color: var(--border-light); color: var(--text); }
+.hero-pill .pill-icon { font-size: 0.95rem; line-height: 1; }
+.hero-pill.accent { border-color: rgba(108,159,255,0.2); color: var(--accent); }
+.hero-pill.purple { border-color: rgba(167,139,250,0.2); color: var(--purple); }
+.hero-version { margin-top: 3rem; font-size: 0.72rem; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.04em; }
+
+/* Auth Panel (right) */
+.splash-auth {
+    width: 440px; flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    padding: 2rem; background: var(--bg-surface);
+    border-left: 1px solid var(--border);
+}
+.auth-card { width: 100%; max-width: 340px; }
+.auth-card-header { margin-bottom: 2rem; }
+.auth-card-header h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
+.auth-card-header p { font-size: 0.85rem; color: var(--text-3); }
+
+.auth-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
+.auth-tab {
+    flex: 1; background: none; border: none; color: var(--text-3);
+    padding: 10px 0; cursor: pointer; font-family: var(--font);
+    font-size: 0.85rem; font-weight: 500;
+    border-bottom: 2px solid transparent;
+    transition: color var(--transition);
+}
+.auth-tab:hover { color: var(--text-2); }
+.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.auth-error { color: var(--danger); font-size: 0.78rem; min-height: 1.2em; margin: 0.5rem 0; }
+.splash-error { color: var(--danger); font-size: 0.78rem; text-align: center; margin-top: 0.5rem; line-height: 1.5; }
+.splash-error strong { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; }
+.splash-error-hint { color: var(--text-3); font-size: 0.72rem; }
+.splash-error-hint a { color: var(--accent); text-decoration: underline; cursor: pointer; }
+.auth-actions { margin-top: 1.5rem; }
+.auth-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; }
+.auth-footer p { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; }
+
+/* Splash entrance animation */
+.hero-logo-row, .hero-headline, .hero-sub, .hero-features, .hero-version,
+.auth-card-header, .splash .auth-tabs, #authLoginForm, .splash .auth-actions {
+    opacity: 0; transform: translateY(12px);
+    animation: fadeUp 0.5s ease forwards;
+}
+.hero-logo-row    { animation-delay: 0.05s; }
+.hero-headline    { animation-delay: 0.12s; }
+.hero-sub         { animation-delay: 0.19s; }
+.hero-features    { animation-delay: 0.26s; }
+.hero-version     { animation-delay: 0.33s; }
+.auth-card-header { animation-delay: 0.15s; }
+.splash .auth-tabs   { animation-delay: 0.22s; }
+#authLoginForm    { animation-delay: 0.29s; }
+.splash .auth-actions { animation-delay: 0.36s; }
+@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+/* Splash responsive */
+@media (max-width: 860px) {
+    .splash { flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
+    .splash-hero { padding: 2.5rem 1.75rem 2rem; min-height: auto; flex: none; }
+    .hero-headline { font-size: 1.8rem; }
+    .hero-sub { font-size: 0.95rem; margin-bottom: 1.5rem; }
+    .hero-version { margin-top: 1.5rem; }
+    .splash-auth { width: 100%; border-left: none; border-top: 1px solid var(--border); padding: 2rem 1.75rem; }
+    .auth-card { max-width: 400px; }
+}
+@media (max-width: 480px) {
+    .splash-hero { padding: 1.5rem 1.25rem 1rem; }
+    .hero-logo-row { gap: 10px; margin-bottom: 0.75rem; }
+    .hero-logo-mark { width: 40px; height: 40px; }
+    .hero-logo-img { width: 40px; height: 40px; }
+    .hero-wordmark { font-size: 1.3rem; }
+    .hero-headline { font-size: 1.35rem; margin-bottom: 0.5rem; }
+    .hero-sub { font-size: 0.85rem; margin-bottom: 1rem; line-height: 1.5; }
+    .hero-features { gap: 6px; }
+    .hero-pill { padding: 5px 10px; font-size: 0.72rem; }
+    .hero-version { margin-top: 1rem; }
+    .splash-auth { padding: 1.5rem 1.25rem; }
+    .auth-card-header { margin-bottom: 1rem; }
+    .auth-card-header h2 { font-size: 1.1rem; }
+    .auth-actions { margin-top: 1rem; }
+}
+
+
+/* ── PWA Install Banner ──────────────────── */
+
+.pwa-install-banner {
+    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
+    background: var(--bg-raised); border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg); padding: 10px 16px;
+    display: flex; align-items: center; gap: 12px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 3000;
+    font-size: 13px; color: var(--text-2);
+    animation: pwa-banner-in 0.3s ease;
+    max-width: 90vw;
+}
+@keyframes pwa-banner-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
+
diff --git a/src/css/styles.css b/src/css/styles.css
index b512369..4a90e40 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,3085 +1,13 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');
-
-/* ==========================================
-   Chat Switchboard
-   Clean utility layout · Open WebUI inspired
-   ========================================== */
-
-:root {
-    /* ── Core palette (Dark — default) ────────── */
-    --bg:           #0e0e10;
-    --bg-surface:   #18181b;
-    --bg-raised:    #222227;
-    --bg-hover:     #2a2a30;
-    --border:       #2e2e35;
-    --border-light: #3a3a42;
-    --text:         #e8e8ed;
-    --text-2:       #9898a8;
-    --text-3:       #6b6b7b;
-    --accent:       #6c9fff;
-    --accent-hover: #84b0ff;
-    --accent-dim:   rgba(108,159,255,0.12);
-    --danger:       #ef4444;
-    --success:      #22c55e;
-    --warning:      #eab308;
-    --purple:       #a78bfa;
-    --purple-dim:   rgba(167,139,250,0.10);
-
-    /* ── Contrast text for solid-color backgrounds ── */
-    --text-on-color:   #fff;
-    --text-on-warning: #000;
-
-    /* ── Light variants (badge/pill text on dim backgrounds) ── */
-    --accent-light:  #93c5fd;
-    --danger-light:  #f87171;
-    --success-light: #4ade80;
-    --warning-light: #fbbf24;
-
-    /* ── Dim variants (badge/pill backgrounds) ── */
-    --danger-dim:    rgba(239,68,68,0.2);
-    --success-dim:   rgba(34,197,94,0.2);
-    --warning-dim:   rgba(234,179,8,0.2);
-
-    /* ── Surfaces ────────────────────────────── */
-    --overlay:       rgba(0,0,0,0.55);
-    --glass:         rgba(255,255,255,0.03);
-    --input-bg:      #1a1a1f;
-    --user-bubble:   rgba(108,159,255,0.08);
-    --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
-
-    /* ── Layout ──────────────────────────────── */
-    --radius:       8px;
-    --radius-lg:    12px;
-    --sidebar-w:    260px;
-    --sidebar-rail: 52px;
-    --font:         'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --mono:         'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
-    --transition:   180ms ease;
-
-    /* Banner system — set by JS from /api/v1/admin/settings/banner */
-    --banner-top-height: 0px;
-    --banner-bottom-height: 0px;
-    --banner-bg: transparent;
-    --banner-fg: transparent;
-}
-
-/* ── Light Theme ─────────────────────────────── */
-[data-theme="light"] {
-    --bg:           #f7f7fa;
-    --bg-surface:   #ffffff;
-    --bg-raised:    #eff0f3;
-    --bg-hover:     #e5e6eb;
-    --border:       #d5d6dc;
-    --border-light: #c2c3cb;
-    --text:         #1a1a2e;
-    --text-2:       #555770;
-    --text-3:       #8b8da3;
-    --accent:       #4a7cdb;
-    --accent-hover: #3968c4;
-    --accent-dim:   rgba(74,124,219,0.09);
-    --danger:       #dc2626;
-    --success:      #16a34a;
-    --warning:      #ca8a04;
-    --purple:       #7c3aed;
-    --purple-dim:   rgba(124,58,237,0.08);
-
-    --text-on-color:   #fff;
-    --text-on-warning: #000;
-
-    --accent-light:  #2563eb;
-    --danger-light:  #dc2626;
-    --success-light: #16a34a;
-    --warning-light: #ca8a04;
-
-    --danger-dim:    rgba(220,38,38,0.09);
-    --success-dim:   rgba(22,163,74,0.09);
-    --warning-dim:   rgba(202,138,4,0.09);
-
-    --overlay:       rgba(0,0,0,0.25);
-    --glass:         rgba(0,0,0,0.02);
-    --input-bg:      #f2f3f6;
-    --user-bubble:   rgba(74,124,219,0.06);
-    --shadow-lg:     0 8px 32px rgba(0,0,0,0.1);
-
-    color-scheme: light;
-}
-
-*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-html, body { height: 100%; }
-body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }
-
-/* Global scrollbar styling */
-* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-::selection { background: var(--accent-dim); }
-
-/* ── App Shell ───────────────────────────── */
-
-.app { display: flex; height: 100%; flex-direction: column; }
-.app-body { display: flex; flex: 1; min-height: 0; }
-
-/* ── Workspace (everything right of sidebar) ── */
-
-.workspace {
-    display: flex; flex: 1; min-width: 0; min-height: 0;
-    overflow: hidden; position: relative;
-}
-.workspace-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
-.workspace-primary { flex: 1; min-width: 0; background: var(--bg); }
-.workspace-secondary {
-    width: 0; min-width: 0; overflow: hidden;
-    background: var(--bg); border-left: 1px solid var(--border);
-    transition: width 0.25s ease, min-width 0.25s ease;
-}
-.workspace-secondary.open {
-    width: 480px; min-width: 480px;
-}
-.workspace-secondary.fullscreen {
-    position: fixed; top: 0; right: 0; bottom: 0;
-    width: 100% !important; min-width: 100% !important;
-    z-index: 100; transition: none;
-}
-.workspace-handle {
-    width: 0; flex-shrink: 0; position: relative; z-index: 10;
-}
-.workspace-handle.active {
-    width: 6px; cursor: col-resize;
-}
-.workspace-handle.active::after {
-    content: ''; position: absolute; inset: 0;
-    transition: background 0.15s;
-}
-.workspace-handle.active:hover::after { background: var(--accent); opacity: 0.3; }
-.workspace-secondary.fullscreen ~ .workspace-handle { display: none; }
-
-/* ── Environment Banners ──────────────────── */
-
-.banner {
-    display: none;
-    width: 100%; text-align: center;
-    font-size: 12px; font-weight: 700; letter-spacing: 1px;
-    text-transform: uppercase;
-    padding: 2px 0; line-height: 1.4;
-    background: var(--banner-bg); color: var(--banner-fg);
-    flex-shrink: 0; z-index: 9999;
-    min-height: 22px; box-sizing: border-box;
-}
-.banner.active { display: flex; align-items: center; justify-content: center; }
-.banner-top { order: -1; }
-.banner-bottom { order: 999; }
-
-/* ── Sidebar ─────────────────────────────── */
-
-.sidebar {
-    width: var(--sidebar-w); background: var(--bg-surface);
-    border-right: 1px solid var(--border);
-    display: flex; flex-direction: column;
-    transition: width var(--transition);
-    overflow: hidden; flex-shrink: 0;
-}
-.sidebar.collapsed { width: var(--sidebar-rail); }
-
-.sidebar-top {
-    display: flex; flex-direction: column; gap: 2px;
-    padding: 10px 10px 6px;
-    border-bottom: 1px solid var(--border);
-}
-
-/* Brand / collapse toggle */
-.sb-brand {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 10px; border-radius: var(--radius);
-    background: none; border: none; color: var(--text);
-    cursor: pointer; font-size: 13px; white-space: nowrap;
-    transition: background var(--transition); width: 100%;
-    position: relative;
-}
-.sb-brand:hover { background: var(--bg-hover); }
-.sb-logo { flex-shrink: 0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
-.sb-logo img, .sb-logo .brand-logo-img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
-.brand-collapse { display: none; }
-.brand-text { font-weight: 600; font-size: 14px; }
-
-.sb-btn {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 10px; border-radius: var(--radius);
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-size: 13px; white-space: nowrap;
-    transition: background var(--transition), color var(--transition);
-    width: 100%;
-}
-.sb-btn:hover { background: var(--bg-hover); color: var(--text); }
-.sb-btn svg { flex-shrink: 0; }
-/* Sidebar toggle: hidden on desktop (brand click handles collapse) */
-.sidebar-toggle { display: none; }
-.sb-label { overflow: hidden; transition: opacity var(--transition); }
-.sidebar.collapsed .sb-label { opacity: 0; width: 0; }
-.sidebar.collapsed .brand-text { opacity: 0; width: 0; }
-
-/* Collapsed centering */
-.sidebar.collapsed .sidebar-top { padding: 10px 0 8px; align-items: center; }
-.sidebar.collapsed .sidebar-bottom { padding: 8px 0; display: flex; flex-direction: column; align-items: center; }
-.sidebar.collapsed .sb-brand { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .sb-btn { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .split-btn-main { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .user-btn { justify-content: center; padding: 6px 0; gap: 0; }
-.sidebar.collapsed .user-flyout {
-    position: fixed;
-    left: var(--sidebar-rail);
-    bottom: 8px;
-    right: auto;
-    width: 200px;
-    margin-bottom: 0;
-}
-.sidebar.collapsed .avatar-bug { display: none; }
-
-/* Split button (New Chat + dropdown) */
-.split-btn { display: flex; width: 100%; gap: 0; position: relative; }
-.split-btn-main {
-    flex: 1; display: flex; align-items: center; gap: 10px;
-    padding: 8px 10px; border-radius: var(--radius) 0 0 var(--radius);
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-size: 13px; white-space: nowrap;
-    transition: background var(--transition), color var(--transition);
-}
-.split-btn-main:hover { background: var(--bg-hover); color: var(--text); }
-.split-btn-main svg { flex-shrink: 0; }
-
-.split-btn-drop {
-    display: flex; align-items: center; padding: 8px 6px;
-    border-radius: 0 var(--radius) var(--radius) 0;
-    background: none; border: none; border-left: 1px solid var(--border);
-    color: var(--text-3); cursor: pointer;
-    transition: background var(--transition), color var(--transition);
-}
-.split-btn-drop:hover { background: var(--bg-hover); color: var(--text); }
-.sidebar.collapsed .split-btn-drop { display: none; }
-
-/* Dropdown menu */
-.split-dropdown {
-    display: none; position: absolute; left: 6px; right: 6px;
-    top: 100%; z-index: 200;
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius); padding: 4px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-}
-.split-dropdown.open { display: block; }
-.split-dropdown-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 7px 10px; border-radius: 4px; width: 100%;
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-size: 12px; white-space: nowrap;
-    transition: background var(--transition), color var(--transition);
-}
-.split-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
-.split-dropdown-item.disabled { opacity: 0.4; pointer-events: none; }
-.split-dropdown-item .dd-hint {
-    margin-left: auto; font-size: 10px; color: var(--text-3);
-}
-
-/* Chat/Channel list */
-.sidebar-chats {
-    flex: 1; overflow-y: auto; overflow-x: hidden;
-    padding: 8px 6px;
-}
-.sidebar-chats::-webkit-scrollbar { width: 4px; }
-
-/* Channels section header */
-.sidebar-section-header {
-    display: flex; align-items: center; gap: 6px;
-    padding: 8px 10px 4px; cursor: pointer;
-    user-select: none;
-}
-.sidebar-section-header .section-arrow {
-    font-size: 10px; color: var(--text-3); transition: transform var(--transition);
-}
-.sidebar-section-header.collapsed .section-arrow { transform: rotate(-90deg); }
-.sidebar-section-header .section-label {
-    font-size: 11px; font-weight: 600; color: var(--text-3);
-    text-transform: uppercase; letter-spacing: 0.5px;
-}
-.sidebar-section-header .section-count {
-    font-size: 10px; color: var(--text-3); margin-left: auto;
-}
-.sidebar.collapsed .sidebar-section-header { display: none; }
-
-.channel-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 7px 10px; border-radius: var(--radius);
-    cursor: pointer; font-size: 13px; color: var(--text-2);
-    transition: background var(--transition); position: relative;
-    overflow: hidden;
-}
-.channel-item:hover { background: var(--bg-hover); color: var(--text); }
-.channel-item.active { background: var(--bg-raised); color: var(--text); }
-.channel-item .channel-hash { color: var(--text-3); font-weight: 600; flex-shrink: 0; }
-.channel-item .channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sidebar.collapsed .channel-item .channel-name { display: none; }
-
-.chat-group-label {
-    font-size: 11px; font-weight: 600; color: var(--text-3);
-    padding: 12px 10px 4px; text-transform: uppercase; letter-spacing: 0.5px;
-    white-space: nowrap; overflow: hidden;
-}
-.sidebar.collapsed .chat-group-label { display: none; }
-
-.chat-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 7px 10px; border-radius: var(--radius);
-    cursor: pointer; font-size: 13px; color: var(--text-2);
-    transition: background var(--transition); position: relative;
-    overflow: hidden;
-}
-.chat-item:hover { background: var(--bg-hover); color: var(--text); }
-.chat-item.active { background: var(--bg-raised); color: var(--text); }
-.chat-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.chat-item-time {
-    font-size: 10px; color: var(--text-3); flex-shrink: 0;
-    white-space: nowrap;
-}
-.chat-item-delete {
-    opacity: 0; position: absolute; right: 6px; background: var(--bg-raised);
-    border: none; color: var(--text-3); cursor: pointer; font-size: 11px;
-    padding: 2px 6px; border-radius: 4px; transition: opacity var(--transition);
-}
-.chat-item:hover .chat-item-delete { opacity: 1; }
-.chat-item:hover .chat-item-time { display: none; }
-.sidebar.collapsed .chat-item-title,
-.sidebar.collapsed .chat-item-time,
-.sidebar.collapsed .chat-item-delete { display: none; }
-.sidebar.collapsed .sidebar-chats { visibility: hidden; }
-
-.sidebar-empty {
-    color: var(--text-3); font-size: 12px; text-align: center; padding: 2rem 0.5rem;
-}
-.sidebar.collapsed .sidebar-empty { display: none; }
-
-/* User area */
-.sidebar-bottom {
-    border-top: 1px solid var(--border);
-    padding: 8px 10px; position: relative;
-}
-.sidebar-bottom-divider {
-    height: 1px; background: var(--border);
-    margin: 4px 8px;
-}
-.sidebar-notes-btn {
-    color: var(--text-2); font-size: 13px;
-}
-.sidebar-notes-btn:hover { background: var(--bg-hover); color: var(--text); }
-.sidebar.collapsed .sidebar-notes-btn .sb-label { opacity: 0; width: 0; }
-.sidebar.collapsed .sidebar-notes-btn { justify-content: center; padding: 8px 0; gap: 0; }
-.sidebar.collapsed .sidebar-bottom-divider { margin: 4px 12px; }
-
-.user-btn {
-    display: flex; align-items: center; gap: 10px;
-    padding: 6px 8px; border-radius: var(--radius);
-    background: none; border: none; color: var(--text);
-    cursor: pointer; width: 100%;
-    transition: background var(--transition);
-}
-.user-btn:hover { background: var(--bg-hover); }
-
-.user-avatar {
-    width: 30px; height: 30px; border-radius: 50%;
-    background: var(--accent-dim); display: flex; align-items: center;
-    justify-content: center; font-size: 13px; font-weight: 600;
-    color: var(--accent); flex-shrink: 0; position: relative;
-    overflow: hidden;
-}
-.user-avatar-img {
-    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
-}
-.avatar-bug {
-    position: absolute; bottom: -3px; right: -3px;
-    font-size: 10px; line-height: 1;
-    display: none;
-    transition: filter var(--transition);
-}
-.avatar-bug.has-errors {
-    display: block;
-    filter: drop-shadow(0 0 4px var(--danger));
-    animation: bug-pulse 1.5s ease infinite;
-}
-@keyframes bug-pulse { 0%,100% { filter: drop-shadow(0 0 3px var(--danger)); } 50% { filter: drop-shadow(0 0 8px var(--danger)); } }
-.user-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* Flyout */
-.user-flyout {
-    display: none; position: absolute; bottom: 100%; left: 8px; right: 8px;
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius-lg); padding: 4px; margin-bottom: 4px;
-    box-shadow: 0 -4px 24px rgba(0,0,0,0.5); z-index: 200;
-}
-.user-flyout.open { display: block; }
-
-.flyout-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-size: 13px; width: 100%;
-    transition: background var(--transition), color var(--transition);
-}
-.flyout-item:hover { background: var(--bg-hover); color: var(--text); }
-.flyout-item svg { flex-shrink: 0; }
-.flyout-danger:hover { color: var(--danger); }
-.flyout-divider { height: 1px; background: var(--border); margin: 4px 8px; }
-
-/* ── Chat Area ───────────────────────────── */
-
-/* .chat-area is now .workspace-primary — alias kept for compat */
-.chat-area, .workspace-primary { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
-
-/* Role fallback banner */
-.role-fallback-banner {
-    background: var(--warning-dim); color: var(--warning);
-    text-align: center; font-size: 12px; font-weight: 500;
-    padding: 6px 12px; flex-shrink: 0;
-}
-
-/* Chat header (model selector + caps + token count + panel toggle) */
-.chat-header {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 16px; flex-shrink: 0;
-    border-bottom: 1px solid var(--border);
-}
-.chat-header-right {
-    margin-left: auto; display: flex; align-items: center; gap: 8px;
-}
-.token-count {
-    font-size: 11px; color: var(--text-3);
-    font-family: var(--mono); white-space: nowrap;
-}
-.summarized-badge {
-    font-size: 11px; color: var(--text-3); white-space: nowrap;
-    display: inline-flex; align-items: center; gap: 4px;
-}
-
-/* Message container (scrollable) */
-.msg-container {
-    flex: 1; overflow-y: auto; scroll-behavior: smooth;
-    padding-top: 12px; padding-bottom: 8px;
-}
-.msg-container::-webkit-scrollbar { width: 5px; }
-.msg-container::-webkit-scrollbar-track { background: transparent; }
-.msg-container::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border); }
-
-/* Streaming tools display */
-.stream-tools {
-    padding: 8px 24px; flex-shrink: 0;
-    font-size: 12px; color: var(--text-3);
-    display: flex; gap: 6px; align-items: center;
-}
-
-.model-bar {
-    display: flex; align-items: center; gap: 6px;
-    padding: 8px 16px; flex-shrink: 0;
-}
-.model-bar select {
-    background: transparent; border: 1px solid transparent;
-    color: var(--text); font-size: 14px; font-weight: 500;
-    padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
-    font-family: var(--font); max-width: 300px;
-    transition: border-color var(--transition);
-}
-.model-bar select:hover { border-color: var(--border); }
-.model-bar select:focus { outline: none; border-color: var(--accent); }
-.model-bar select option { background: var(--bg-surface); color: var(--text); }
-
-/* ── Custom Model Dropdown ───────────────── */
-
-.model-dropdown { position: relative; }
-.model-dropdown-btn {
-    display: flex; align-items: center; gap: 6px;
-    background: none; border: 1px solid transparent;
-    color: var(--text); font-size: 14px; font-weight: 500;
-    padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
-    font-family: var(--font); max-width: 340px;
-    transition: border-color var(--transition);
-}
-.model-dropdown-btn:hover { border-color: var(--border); }
-.model-dropdown-btn svg { flex-shrink: 0; opacity: 0.5; }
-.model-dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.model-dropdown-menu {
-    display: none; position: absolute; top: 100%; left: 0; z-index: 200;
-    min-width: 280px; max-width: 400px; max-height: 400px; overflow-y: auto;
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius); padding: 4px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-    margin-top: 4px;
-}
-.model-dropdown-menu.open { display: block; }
-.model-dropdown-group {
-    padding: 6px 10px 4px; font-size: 11px; font-weight: 600;
-    color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
-}
-.model-dropdown-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 7px 10px; border-radius: 4px;
-    cursor: pointer; font-size: 13px;
-    color: var(--text-2); white-space: nowrap;
-    transition: background var(--transition), color var(--transition);
-}
-.model-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
-.model-dropdown-item.selected { background: var(--bg-hover); color: var(--accent); }
-.model-dropdown-item .item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.model-dropdown-item .item-provider { margin-left: auto; font-size: 10px; color: var(--text-3); }
-.dropdown-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
-
-.model-caps {
-    display: flex; align-items: center; gap: 4px;
-    margin-left: 4px; flex-wrap: wrap;
-}
-.cap-badge {
-    display: inline-flex; align-items: center; gap: 3px;
-    font-size: 10px; line-height: 1; padding: 2px 6px;
-    border-radius: 3px; white-space: nowrap;
-    background: var(--bg-raised); color: var(--text-3);
-    border: 1px solid transparent;
-}
-.cap-badge.cap-accent {
-    color: var(--accent); border-color: color-mix(in srgb, var(--accent), transparent 80%);
-    background: color-mix(in srgb, var(--accent), transparent 92%);
-}
-.cap-badge.cap-context {
-    color: var(--text-3);
-}
-
-.icon-btn {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    padding: 4px; border-radius: 4px;
-    transition: color var(--transition);
-}
-.icon-btn:hover { color: var(--text); }
-
-/* Messages — Bubble Layout (matching prototype) */
-.messages { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
-
-.message { padding: 10px 24px; }
-
-.msg-inner { max-width: 768px; margin: 0 auto; display: flex; gap: 10px; }
-
-/* User messages: right-aligned bubble */
-.message.user { display: flex; justify-content: flex-end; }
-.message.user .msg-inner { flex-direction: row-reverse; }
-.message.user .msg-body {
-    background: var(--user-bubble);
-    border: 1px solid transparent;
-    border-radius: 16px 16px 4px 16px;
-    padding: 10px 14px;
-}
-.message.user .msg-head { flex-direction: row-reverse; }
-.message.user .msg-role { color: var(--accent); }
-.message.user .msg-avatar { color: var(--accent); }
-
-/* Assistant messages: left-aligned bubble */
-.message.assistant .msg-body {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: 16px 16px 16px 4px;
-    padding: 10px 14px;
-}
-
-.msg-avatar {
-    width: 28px; height: 28px; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 14px; flex-shrink: 0; margin-top: 2px;
-    overflow: hidden;
-}
-.msg-avatar-img {
-    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
-}
-.message.user .msg-avatar { background: var(--accent-dim); }
-.message.assistant .msg-avatar { background: var(--bg-raised); }
-
-.msg-body { flex: 1; min-width: 0; }
-.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
-.msg-role { font-size: 13px; font-weight: 600; }
-.msg-time { font-size: 11px; color: var(--text-3); }
-.msg-actions {
-    margin-left: auto; display: flex; gap: 2px; opacity: 0;
-    transition: opacity var(--transition);
-}
-.message:hover .msg-actions { opacity: 1; }
-.msg-action-btn {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    padding: 2px 6px; border-radius: 4px; font-size: 11px;
-    transition: background var(--transition), color var(--transition);
-}
-.msg-action-btn:hover { background: var(--bg-hover); color: var(--text); }
-
-/* Branch navigation indicator */
-.branch-nav {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    font-size: 12px;
-    color: var(--text-3);
-}
-.branch-arrow {
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    color: var(--text-2);
-    cursor: pointer;
-    padding: 0 5px;
-    font-size: 16px;
-    line-height: 18px;
-    transition: var(--transition);
-}
-.branch-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
-.branch-arrow:disabled { opacity: 0.25; cursor: default; }
-.branch-pos {
-    font-size: 11px;
-    font-variant-numeric: tabular-nums;
-    min-width: 28px;
-    text-align: center;
-    user-select: none;
-}
-
-/* Inline message editing */
-.msg-edit-input {
-    width: 100%;
-    background: var(--bg-surface);
-    border: 1px solid var(--accent);
-    border-radius: var(--radius);
-    color: var(--text);
-    padding: 10px 12px;
-    font-family: var(--font);
-    font-size: var(--msg-font, 14px);
-    line-height: 1.6;
-    resize: vertical;
-    min-height: 60px;
-    max-height: 400px;
-    outline: none;
-}
-.msg-edit-input:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 2px var(--accent-dim); }
-.msg-edit-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    justify-content: flex-end;
-}
-.msg-edit-cancel, .msg-edit-submit {
-    padding: 6px 14px;
-    border-radius: var(--radius);
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: var(--transition);
-    border: 1px solid var(--border);
-}
-.msg-edit-cancel {
-    background: var(--bg-raised);
-    color: var(--text-2);
-}
-.msg-edit-cancel:hover { background: var(--bg-hover); color: var(--text); }
-.msg-edit-submit {
-    background: var(--accent);
-    color: var(--text-on-color);
-    border-color: var(--accent);
-}
-.msg-edit-submit:hover { background: var(--accent-hover); }
-
-.msg-text { font-size: var(--msg-font, 14px); line-height: 1.7; }
-
-/* ── Markdown Content ────────────────────── */
-
-.msg-text p { margin: 0.4em 0; }
-.msg-text p:first-child { margin-top: 0; }
-.msg-text p:last-child { margin-bottom: 0; }
-
-.msg-text pre {
-    background: var(--bg-surface); border: 1px solid var(--border);
-    padding: 0.75rem 1rem; border-radius: var(--radius);
-    overflow-x: auto; margin: 0.75rem 0; position: relative;
-    font-size: 13px;
-}
-.msg-text code {
-    font-family: var(--mono); font-size: 0.9em;
-    background: var(--bg-raised); padding: 0.15em 0.4em;
-    border-radius: 4px;
-}
-.msg-text pre code { background: none; padding: 0; font-size: inherit; }
-
-/* Code block toolbar */
-.code-toolbar {
-    position: absolute; top: 6px; right: 6px;
-    display: flex; gap: 4px; align-items: center;
-    opacity: 0; transition: opacity var(--transition);
-}
-.msg-text pre:hover .code-toolbar { opacity: 1; }
-.code-block.code-collapsed .code-toolbar { opacity: 1; }
-.copy-code-btn {
-    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text-3); border-radius: 4px;
-    padding: 2px 10px; font-size: 11px; cursor: pointer;
-    transition: color var(--transition), border-color var(--transition);
-}
-.copy-code-btn:hover { color: var(--text); border-color: var(--border-light); }
-.code-collapse-btn {
-    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text-3); border-radius: 4px;
-    padding: 2px 10px; font-size: 11px; cursor: pointer;
-    font-family: var(--mono); white-space: nowrap;
-    transition: color var(--transition), border-color var(--transition);
-}
-.code-collapse-btn:hover { color: var(--text); border-color: var(--border-light); }
-
-/* Collapsed code block */
-.code-block.code-collapsed code {
-    max-height: 3.6em; overflow: hidden; display: block;
-    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
-    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
-}
-
-/* Language label */
-.code-lang {
-    position: absolute; top: 6px; left: 10px;
-    font-size: 10px; color: var(--text-3); font-family: var(--mono);
-    text-transform: uppercase; letter-spacing: 0.5px; user-select: none;
-}
-
-/* ── Extension-rendered blocks ──────── */
-
-.ext-rendered {
-    margin: 12px 0;
-    position: relative;
-}
-.ext-popout-btn {
-    position: absolute; top: 4px; right: 4px;
-    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text-3); cursor: pointer; font-size: 14px;
-    width: 26px; height: 26px; border-radius: var(--radius);
-    display: flex; align-items: center; justify-content: center;
-    opacity: 0; transition: opacity 0.15s, background 0.15s;
-    z-index: 5;
-}
-.ext-rendered:hover .ext-popout-btn { opacity: 1; }
-.ext-popout-btn:hover { background: var(--bg-hover); color: var(--text); }
-
-/* HTML preview */
-/* ── Side Panel (Preview + Notes) ──────── */
-
-/* ── Secondary Pane (was .side-panel, now .workspace-secondary) ── */
-/* Layout handled by .workspace-secondary above; these are internal styles */
-
-.side-panel-header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 8px 12px; border-bottom: 1px solid var(--border);
-    background: var(--bg-raised); flex-shrink: 0;
-}
-.side-panel-actions {
-    display: flex; align-items: center; gap: 2px;
-}
-.side-panel-action-btn {
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
-    transition: all var(--transition); display: flex; align-items: center;
-}
-.side-panel-action-btn:hover { background: var(--bg-hover); color: var(--text); }
-.side-panel-label {
-    font-size: 12px; font-family: var(--font); font-weight: 600;
-    color: var(--text-2); white-space: nowrap;
-}
-.side-panel-close {
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-size: 16px; padding: 2px 6px;
-    border-radius: var(--radius); transition: all var(--transition);
-}
-.side-panel-close:hover { background: var(--bg-hover); color: var(--text); }
-.side-panel-body {
-    flex: 1; overflow-y: auto; min-height: 0;
-}
-.side-panel-page { height: 100%; display: flex; flex-direction: column; }
-.side-panel-empty {
-    display: flex; align-items: center; justify-content: center;
-    height: 100%; color: var(--text-3); font-size: 13px;
-    padding: 2rem; text-align: center;
-}
-.preview-frame {
-    flex: 1; width: 100%; border: none; background: #fff;
-}
-
-/* Notes inside secondary pane */
-.notes-actions-bar {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 12px; border-bottom: 1px solid var(--border);
-}
-.workspace-secondary .notes-list, .side-panel .notes-list { padding: 4px 8px; }
-.workspace-secondary .notes-editor, .side-panel .notes-editor { padding: 8px 12px; }
-.workspace-secondary .note-read-content, .side-panel .note-read-content {
-    max-height: none; flex: 1; overflow-y: auto;
-}
-.workspace-secondary .notes-content-input, .side-panel .notes-content-input {
-    min-height: 150px;
-}
-.workspace-secondary #notesListView, .side-panel #notesListView {
-    flex: 1; overflow-y: auto; min-height: 0;
-}
-.workspace-secondary #notesEditorView, .side-panel #notesEditorView {
-    flex: 1; overflow-y: auto; min-height: 0;
-}
-
-/* Side panel overlay (mobile tap-to-close, mirrors sidebar-overlay) */
-.side-panel-overlay {
-    display: none; position: fixed; inset: 0; z-index: 199;
-    background: var(--overlay);
-}
-
-/* Mobile: full-width overlay */
-@media (max-width: 768px) {
-    .workspace-secondary.open {
-        position: fixed; top: 0; right: 0; bottom: 0;
-        width: 100vw; min-width: 100vw; z-index: 200;
-    }
-    .workspace-handle { display: none !important; }
-
-    /* Larger touch targets on mobile */
-    .side-panel-close { font-size: 20px; padding: 4px 10px; }
-    .side-panel-action-btn { padding: 6px 8px; }
-    .side-panel-header { padding: 10px 12px; }
-}
-
-/* Dual-view removed in workspace refactor (v0.22.0) — workspace
-   handles all pane placement via primary/secondary slots. */
-
-.msg-text ul, .msg-text ol { margin: 0.4em 0; padding-left: 1.5em; }
-.msg-text li { margin: 0.2em 0; }
-.msg-text li > p { margin: 0.2em 0; }
-
-.msg-text blockquote {
-    border-left: 3px solid var(--accent); padding: 0.25em 0.75em; margin: 0.5em 0;
-    color: var(--text-2); background: var(--accent-dim); border-radius: 0 var(--radius) var(--radius) 0;
-}
-
-.msg-text hr { border: none; border-top: 1px solid var(--border); margin: 0.75em 0; }
-
-.msg-text table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 13px; }
-.msg-text th, .msg-text td { border: 1px solid var(--border); padding: 0.4em 0.7em; text-align: left; }
-.msg-text th { background: var(--bg-raised); font-weight: 600; }
-
-.msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4 { margin: 0.75em 0 0.3em; font-weight: 600; }
-.msg-text h1 { font-size: 1.4em; }
-.msg-text h2 { font-size: 1.2em; }
-.msg-text h3 { font-size: 1.05em; }
-
-.msg-text a { color: var(--accent); }
-.msg-text img { max-width: 100%; border-radius: var(--radius); }
-
-/* Thinking blocks */
-.thinking-block {
-    border: 1px solid var(--accent-dim); border-radius: var(--radius);
-    margin: 0.5rem 0; background: rgba(108,159,255,0.03);
-}
-.thinking-block summary {
-    padding: 0.4rem 0.75rem; cursor: pointer; font-size: 12px;
-    color: var(--text-3); user-select: none;
-    transition: color var(--transition);
-}
-.thinking-block summary:hover { color: var(--text-2); }
-.thinking-block[open] summary { border-bottom: 1px solid rgba(108,159,255,0.08); }
-.thinking-content {
-    padding: 0.5rem 0.75rem; font-size: 12px; color: var(--text-3);
-    max-height: 300px; overflow-y: auto; line-height: 1.6;
-}
-
-/* Tool activity indicators */
-.msg-tools {
-    display: flex; flex-direction: column; gap: 4px;
-    margin-bottom: 0.5rem;
-}
-.tool-activity {
-    display: flex; align-items: center; gap: 6px;
-    font-size: 12px; color: var(--text-3);
-    background: var(--bg-raised); border: 1px solid var(--border);
-    padding: 4px 10px; border-radius: var(--radius);
-    animation: tool-fade-in 0.2s ease;
-}
-@keyframes tool-fade-in { from { opacity: 0; transform: translateY(-4px); } }
-.tool-icon { font-size: 13px; }
-.tool-name { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
-.tool-status { font-size: 11px; margin-left: auto; }
-.tool-running { color: var(--warning); }
-.tool-running::after {
-    content: ''; display: inline-block; width: 4px; height: 4px;
-    border-radius: 50%; background: var(--warning); margin-left: 4px;
-    animation: tool-pulse 1s infinite;
-}
-@keyframes tool-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
-.tool-done { color: var(--success); }
-.tool-error { color: var(--danger); }
-.tool-hint {
-    font-size: 11px; color: var(--text-3); margin-left: 6px;
-    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.tool-note-link {
-    background: none; border: none; color: var(--accent); cursor: pointer;
-    font-size: 11px; margin-left: 6px; padding: 0;
-    text-decoration: none;
-    transition: color var(--transition);
-}
-.tool-note-link:hover { color: var(--text); text-decoration: underline; }
-
-/* Tool calls in message history (collapsed) */
-.tool-call-block {
-    border: 1px solid var(--border); border-radius: var(--radius);
-    background: var(--bg-raised); font-size: 12px;
-}
-.tool-call-summary {
-    display: flex; align-items: center; gap: 6px;
-    padding: 4px 10px; cursor: pointer; user-select: none;
-    color: var(--text-3); list-style: none;
-    transition: color var(--transition);
-}
-.tool-call-summary::-webkit-details-marker { display: none; }
-.tool-call-summary::before {
-    content: '▸'; font-size: 10px; color: var(--text-3);
-    transition: transform 0.15s ease;
-}
-.tool-call-block[open] .tool-call-summary::before { transform: rotate(90deg); }
-.tool-call-summary:hover { color: var(--text-2); }
-.tool-detail {
-    border-top: 1px solid var(--border); padding: 6px 10px;
-    display: flex; flex-direction: column; gap: 6px;
-}
-.tool-detail-label {
-    font-size: 10px; color: var(--text-3); text-transform: uppercase;
-    letter-spacing: 0.5px; font-weight: 600;
-}
-.tool-detail-pre {
-    margin: 2px 0 0; padding: 6px 8px;
-    background: var(--bg-surface); border-radius: 4px;
-    font-size: 11px; color: var(--text-2); white-space: pre-wrap;
-    word-break: break-all; max-height: 200px; overflow-y: auto;
-}
-
-/* Empty state */
-.empty-state {
-    display: flex; flex-direction: column; align-items: center;
-    justify-content: center; height: 100%; color: var(--text-3); gap: 0.25rem;
-}
-.empty-logo { font-size: 3rem; margin-bottom: 0.5rem; }
-.empty-logo-img { width: 64px; height: 64px; object-fit: contain; }
-.empty-state h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-2); }
-.empty-state p { font-size: 0.85rem; }
-
-/* Typing indicator */
-.typing-dots { display: flex; gap: 4px; padding: 0.5rem 0; }
-.typing-dots span {
-    width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
-    animation: dot-pulse 1.2s infinite;
-}
-.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
-@keyframes dot-pulse { 0%,60%,100% { opacity: 0.4; } 30% { opacity: 1; } }
-
-/* ── Input Area ──────────────────────────── */
-
-.input-area { padding: 0 1rem 1rem; flex-shrink: 0; }
-.input-area:empty { padding: 0; min-height: 0; }
-
-/* Token counter below input */
-.input-meta { display: flex; justify-content: space-between; align-items: center; padding: 2px 12px 0; min-height: 18px; }
-.input-token-count { font-size: 0.68rem; color: var(--text-3); transition: color 0.2s; }
-.input-token-count.warning { color: var(--warning); }
-.input-token-count.danger { color: var(--danger); }
-
-/* Context length warning banner */
-.context-warning {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px; margin-bottom: 8px; border-radius: 8px;
-    background: color-mix(in srgb, var(--warning) 12%, transparent);
-    border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
-    font-size: 0.78rem; color: var(--text-2); animation: fadeIn 0.2s ease;
-}
-.context-warning.danger {
-    background: color-mix(in srgb, var(--danger) 12%, transparent);
-    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
-}
-.context-warning-icon { flex-shrink: 0; }
-.context-warning-text { flex: 1; }
-.context-warning-dismiss { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font-size: 0.85rem; }
-.context-warning-dismiss:hover { color: var(--text); }
-.context-warning-action {
-    flex-shrink: 0; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border);
-    background: var(--bg-surface); color: var(--text); cursor: pointer;
-    font-size: 0.75rem; white-space: nowrap; transition: all var(--transition);
-}
-.context-warning-action:hover { background: var(--accent); color: var(--text-on-color); border-color: var(--accent); }
-.context-warning-action:disabled { opacity: 0.5; cursor: not-allowed; }
-.context-warning-action:disabled:hover { background: var(--bg-surface); color: var(--text); border-color: var(--border); }
-.context-warning-toggle {
-    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
-    font-size: 0.72rem; color: var(--text-3); cursor: pointer; white-space: nowrap;
-    user-select: none;
-}
-.context-warning-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
-/* Summary message node */
-.message-summary {
-    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
-    border-radius: 8px; padding: 10px 14px; margin: 4px 0;
-    background: color-mix(in srgb, var(--accent) 6%, transparent);
-    font-size: 0.85rem; position: relative;
-}
-.message-summary .summary-header {
-    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
-    font-size: 0.75rem; color: var(--text-3); font-weight: 500;
-}
-.message-summary .summary-toggle {
-    background: none; border: none; color: var(--accent); cursor: pointer;
-    font-size: 0.75rem; padding: 0; text-decoration: underline;
-}
-.message-summary .summary-toggle:hover { color: var(--text); }
-.msg-dimmed { opacity: 0.5; }
-.message-summary-divider {
-    text-align: center; padding: 8px 0; margin: 4px 0;
-}
-.message-summary-divider .summary-toggle {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    font-size: 0.78rem; padding: 4px 12px; border-radius: 4px;
-    transition: all var(--transition);
-}
-.message-summary-divider .summary-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
-.input-wrap {
-    max-width: 768px; margin: 0 auto; width: 100%; box-sizing: border-box;
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: 12px; padding: 0;
-    display: flex; align-items: flex-end;
-    transition: border-color var(--transition);
-}
-.input-wrap:focus-within { border-color: var(--border-light); }
-
-.input-wrap textarea {
-    flex: 1; resize: none; background: none; border: none;
-    color: var(--text); padding: 12px 0 12px 14px;
-    font-family: var(--font); font-size: 14px;
-    max-height: 200px; line-height: 1.5;
-}
-.input-wrap textarea:focus { outline: none; }
-.input-wrap textarea::placeholder { color: var(--text-3); }
-
-/* CM6 chat input — match textarea layout within .input-wrap */
-#messageInputWrap {
-    flex: 1; min-width: 0;
-}
-#messageInputWrap .cm-editor {
-    background: transparent;
-    padding: 12px 0 12px 8px;
-    max-height: 200px;
-    font-family: var(--font);
-    font-size: 14px;
-    line-height: 1.5;
-}
-#messageInputWrap .cm-editor.cm-focused { outline: none; }
-#messageInputWrap .cm-scroller { overflow-y: auto; }
-
-/* CM6 extension editor containers */
-.ext-edit-form .cm-editor {
-    height: 100%;
-    font-size: 12px;
-}
-
-.input-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
-
-/* Chat input area wrapper (bottom pinned, padded) */
-.chat-input-area {
-    padding: 0 16px 16px; flex-shrink: 0;
-}
-.chat-footer {
-    display: flex; justify-content: space-between; align-items: center;
-    padding: 4px 4px 0; max-width: 768px; margin: 0 auto;
-    min-height: 18px;
-}
-.chat-version { font-size: 10px; color: var(--text-3); }
-.input-token-count {
-    font-size: 10px; color: var(--text-3);
-    font-family: var(--mono); margin-right: 4px; white-space: nowrap;
-}
-
-/* Left-side toolbar: attach, tools, KB — single container handles alignment */
-.input-toolbar {
-    display: flex; align-items: center; gap: 2px;
-    padding: 0 4px 6px; flex-shrink: 0;
-    max-width: 768px; margin: 0 auto; width: 100%;
-    box-sizing: border-box;
-}
-
-.action-btn {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    padding: 6px; border-radius: var(--radius);
-    transition: background var(--transition), color var(--transition);
-    display: flex; align-items: center; justify-content: center;
-}
-.action-btn:hover { background: var(--bg-hover); color: var(--text); }
-
-.send-btn { color: var(--accent); }
-.send-btn:hover { background: var(--accent-dim); color: var(--accent-hover); }
-.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-
-.stop-btn { display: none; color: var(--warning); }
-.stop-btn.visible { display: flex; }
-
-/* ── Files ─────────────────────────── */
-
-.attach-btn { color: var(--text-3); }
-.attach-btn:hover { color: var(--text); }
-
-.file-strip {
-    max-width: 768px; margin: 0 auto; padding: 6px 8px 2px;
-    display: flex; gap: 6px; flex-wrap: wrap;
-}
-
-.att-chip {
-    display: flex; align-items: center; gap: 6px;
-    background: var(--bg-raised); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 4px 6px;
-    font-size: 12px; max-width: 220px; position: relative;
-}
-.att-chip.att-ready { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
-.att-chip.att-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
-.att-chip.att-pending { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
-
-.att-thumb {
-    width: 32px; height: 32px; object-fit: cover;
-    border-radius: 3px; flex-shrink: 0;
-}
-.att-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
-
-.att-info { display: flex; flex-direction: column; min-width: 0; }
-.att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
-.att-meta { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-.att-remove {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    padding: 2px 4px; font-size: 13px; line-height: 1; border-radius: 3px;
-    flex-shrink: 0; margin-left: auto;
-}
-.att-remove:hover { background: var(--bg-hover); color: var(--text); }
-
-/* Drag-and-drop overlay on chat area */
-.messages.drag-over {
-    outline: 2px dashed var(--accent);
-    outline-offset: -4px;
-    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
-}
-
-/* ── Message Files ────────────────────── */
-
-.msg-files {
-    display: flex; gap: 8px; flex-wrap: wrap;
-    margin-top: 8px;
-}
-
-.msg-att-image {
-    cursor: pointer; position: relative; border-radius: var(--radius);
-    overflow: hidden; border: 1px solid var(--border);
-    transition: border-color var(--transition);
-}
-.msg-att-image:hover { border-color: var(--accent); }
-.msg-att-image img {
-    display: block; max-height: 280px; border-radius: var(--radius);
-    background: var(--bg-raised);
-}
-.msg-att-image img.att-load-error {
-    min-width: 120px; min-height: 60px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 13px; color: var(--text-3);
-}
-
-.att-vision-hint {
-    position: absolute; top: 4px; right: 4px;
-    background: color-mix(in srgb, var(--bg) 85%, transparent);
-    border-radius: 4px; padding: 2px 5px; font-size: 14px;
-    cursor: help;
-}
-
-.msg-att-doc {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 12px; border: 1px solid var(--border);
-    border-radius: var(--radius); background: var(--bg-raised);
-    text-decoration: none; color: var(--text);
-    max-width: 280px; transition: border-color var(--transition);
-}
-.msg-att-doc:hover { border-color: var(--accent); }
-.att-doc-icon { font-size: 20px; flex-shrink: 0; }
-.att-doc-info { display: flex; flex-direction: column; min-width: 0; }
-.att-doc-name {
-    font-size: 13px; font-weight: 500;
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.att-doc-size { font-size: 11px; color: var(--text-3); }
-.att-doc-dl { color: var(--text-3); font-size: 14px; margin-left: auto; }
-
-/* ── Image Lightbox ─────────────────────────── */
-
-.lightbox-overlay {
-    display: none; position: fixed; inset: 0; z-index: 10000;
-    background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
-}
-.lightbox-overlay.active { display: flex; }
-.lightbox-overlay img {
-    max-width: 92vw; max-height: 90vh; object-fit: contain;
-    border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-}
-.lightbox-close {
-    position: absolute; top: 16px; right: 20px;
-    background: rgba(255,255,255,0.15); border: none; color: var(--text-on-color);
-    font-size: 22px; width: 40px; height: 40px; border-radius: 50%;
-    cursor: pointer; display: flex; align-items: center; justify-content: center;
-    transition: background 0.15s;
-}
-.lightbox-close:hover { background: rgba(255,255,255,0.3); }
-
-/* ── Admin Storage Panel ────────────────────── */
-
-.admin-storage-card {
-    background: var(--bg-raised); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
-}
-.admin-storage-card h4 { margin: 0 0 10px 0; font-size: 14px; }
-.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 10px 0; }
-.admin-storage-grid {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 10px;
-}
-.admin-storage-item { display: flex; flex-direction: column; gap: 2px; }
-.admin-storage-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
-.admin-storage-value { font-size: 14px; font-weight: 500; }
-
-/* ── Buttons ─────────────────────────────── */
-
-button { font-family: var(--font); cursor: pointer; }
-.btn-primary {
-    background: var(--accent); color: var(--text-on-color); border: none;
-    padding: 8px 16px; border-radius: var(--radius);
-    font-weight: 500; font-size: 13px;
-    transition: background var(--transition);
-}
-.btn-primary:hover { background: var(--accent-hover); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-.btn-full { width: 100%; }
-.btn-small {
-    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text-2); padding: 6px 12px; border-radius: var(--radius);
-    font-size: 12px; transition: all var(--transition);
-}
-.btn-small:hover { background: var(--bg-hover); color: var(--text); }
-.btn-small.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-color); }
-.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; border-radius: var(--radius); }
-
-/* ── Auth Splash ─────────────────────────── */
-
-.splash {
-    display: flex;
-    min-height: 100vh;
-    min-height: 100dvh;
-}
-
-/* Hero Panel (left) */
-.splash-hero {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 4rem 3.5rem;
-    position: relative;
-    overflow: hidden;
-    background:
-        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(108,159,255,0.06), transparent),
-        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(167,139,250,0.05), transparent),
-        var(--bg);
-}
-.splash-hero::before {
-    content: '';
-    position: absolute;
-    inset: -50%;
-    background-image:
-        linear-gradient(rgba(108,159,255,0.04) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(108,159,255,0.04) 1px, transparent 1px);
-    background-size: 48px 48px;
-    animation: gridDrift 30s linear infinite;
-    pointer-events: none;
-}
-@keyframes gridDrift { to { transform: translate(48px, 48px); } }
-.splash-hero::after {
-    content: '';
-    position: absolute;
-    width: 320px; height: 320px;
-    bottom: -80px; right: -60px;
-    background: radial-gradient(circle, rgba(167,139,250,0.08), transparent 70%);
-    border-radius: 50%;
-    pointer-events: none;
-}
-
-.hero-content { position: relative; z-index: 1; max-width: 520px; }
-.hero-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem; }
-.hero-logo-mark { width: 48px; height: 48px; flex-shrink: 0; }
-.hero-logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
-.hero-wordmark { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
-.hero-wordmark span { color: var(--accent); }
-
-.hero-headline {
-    font-size: 2.4rem; font-weight: 700; line-height: 1.15;
-    letter-spacing: -0.03em; margin-bottom: 1rem;
-    background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-}
-.hero-sub { font-size: 1.05rem; color: var(--text-2); line-height: 1.6; margin-bottom: 2.5rem; max-width: 440px; }
-
-.hero-features { display: flex; flex-wrap: wrap; gap: 10px; }
-.hero-pill {
-    display: inline-flex; align-items: center; gap: 7px;
-    padding: 7px 14px; background: var(--bg-surface);
-    border: 1px solid var(--border); border-radius: 100px;
-    font-size: 0.8rem; font-weight: 500; color: var(--text-2);
-    transition: all var(--transition);
-}
-.hero-pill:hover { border-color: var(--border-light); color: var(--text); }
-.hero-pill .pill-icon { font-size: 0.95rem; line-height: 1; }
-.hero-pill.accent { border-color: rgba(108,159,255,0.2); color: var(--accent); }
-.hero-pill.purple { border-color: rgba(167,139,250,0.2); color: var(--purple); }
-.hero-version { margin-top: 3rem; font-size: 0.72rem; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.04em; }
-
-/* Auth Panel (right) */
-.splash-auth {
-    width: 440px; flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-    padding: 2rem; background: var(--bg-surface);
-    border-left: 1px solid var(--border);
-}
-.auth-card { width: 100%; max-width: 340px; }
-.auth-card-header { margin-bottom: 2rem; }
-.auth-card-header h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
-.auth-card-header p { font-size: 0.85rem; color: var(--text-3); }
-
-.auth-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
-.auth-tab {
-    flex: 1; background: none; border: none; color: var(--text-3);
-    padding: 10px 0; cursor: pointer; font-family: var(--font);
-    font-size: 0.85rem; font-weight: 500;
-    border-bottom: 2px solid transparent;
-    transition: color var(--transition);
-}
-.auth-tab:hover { color: var(--text-2); }
-.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-.auth-error { color: var(--danger); font-size: 0.78rem; min-height: 1.2em; margin: 0.5rem 0; }
-.splash-error { color: var(--danger); font-size: 0.78rem; text-align: center; margin-top: 0.5rem; line-height: 1.5; }
-.splash-error strong { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; }
-.splash-error-hint { color: var(--text-3); font-size: 0.72rem; }
-.splash-error-hint a { color: var(--accent); text-decoration: underline; cursor: pointer; }
-.auth-actions { margin-top: 1.5rem; }
-.auth-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; }
-.auth-footer p { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; }
-
-/* Splash entrance animation */
-.hero-logo-row, .hero-headline, .hero-sub, .hero-features, .hero-version,
-.auth-card-header, .splash .auth-tabs, #authLoginForm, .splash .auth-actions {
-    opacity: 0; transform: translateY(12px);
-    animation: fadeUp 0.5s ease forwards;
-}
-.hero-logo-row    { animation-delay: 0.05s; }
-.hero-headline    { animation-delay: 0.12s; }
-.hero-sub         { animation-delay: 0.19s; }
-.hero-features    { animation-delay: 0.26s; }
-.hero-version     { animation-delay: 0.33s; }
-.auth-card-header { animation-delay: 0.15s; }
-.splash .auth-tabs   { animation-delay: 0.22s; }
-#authLoginForm    { animation-delay: 0.29s; }
-.splash .auth-actions { animation-delay: 0.36s; }
-@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
-@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-
-/* Splash responsive */
-@media (max-width: 860px) {
-    .splash { flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
-    .splash-hero { padding: 2.5rem 1.75rem 2rem; min-height: auto; flex: none; }
-    .hero-headline { font-size: 1.8rem; }
-    .hero-sub { font-size: 0.95rem; margin-bottom: 1.5rem; }
-    .hero-version { margin-top: 1.5rem; }
-    .splash-auth { width: 100%; border-left: none; border-top: 1px solid var(--border); padding: 2rem 1.75rem; }
-    .auth-card { max-width: 400px; }
-}
-@media (max-width: 480px) {
-    .splash-hero { padding: 1.5rem 1.25rem 1rem; }
-    .hero-logo-row { gap: 10px; margin-bottom: 0.75rem; }
-    .hero-logo-mark { width: 40px; height: 40px; }
-    .hero-logo-img { width: 40px; height: 40px; }
-    .hero-wordmark { font-size: 1.3rem; }
-    .hero-headline { font-size: 1.35rem; margin-bottom: 0.5rem; }
-    .hero-sub { font-size: 0.85rem; margin-bottom: 1rem; line-height: 1.5; }
-    .hero-features { gap: 6px; }
-    .hero-pill { padding: 5px 10px; font-size: 0.72rem; }
-    .hero-version { margin-top: 1rem; }
-    .splash-auth { padding: 1.5rem 1.25rem; }
-    .auth-card-header { margin-bottom: 1rem; }
-    .auth-card-header h2 { font-size: 1.1rem; }
-    .auth-actions { margin-top: 1rem; }
-}
-
-/* ── Forms ────────────────────────────────── */
-
-/* Base form element styling — ensures selects/inputs match the dark theme
-   even when not wrapped in .form-group (e.g. role config, inline toolbars) */
-select, input[type="text"], input[type="email"], input[type="password"],
-input[type="number"], input[type="search"], textarea {
-    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text); padding: 8px 12px; border-radius: var(--radius);
-    font-family: var(--font); font-size: 13px;
-    transition: border-color var(--transition);
-}
-select:focus, input[type="text"]:focus, input[type="email"]:focus,
-input[type="password"]:focus, textarea:focus {
-    outline: none; border-color: var(--accent);
-}
-select option { background: var(--bg-surface); color: var(--text); }
-
-.form-group { margin-bottom: 0.75rem; }
-.form-group label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; font-weight: 500; }
-.form-group input, .form-group select, .form-group textarea {
-    width: 100%;
-}
-.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
-    outline: none; border-color: var(--accent);
-}
-.form-row { display: flex; gap: 0.75rem; }
-.form-row .form-group { flex: 1; }
-.form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; }
-.range-input {
-    width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
-    background: var(--border); border-radius: 2px; outline: none;
-    margin: 8px 0 4px; cursor: pointer;
-}
-.range-input::-webkit-slider-thumb {
-    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
-    background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer;
-}
-.range-input::-moz-range-thumb {
-    width: 16px; height: 16px; border-radius: 50%;
-    background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer;
-}
-.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
-.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0.5rem 0; color: var(--text-2); }
-
-/* ── Theme Toggle ────────────────────────── */
-.theme-toggle {
-    display: flex; gap: 4px; padding: 3px;
-    background: var(--bg); border: 1px solid var(--border);
-    border-radius: var(--radius); width: fit-content;
-}
-.theme-btn {
-    display: flex; align-items: center; gap: 6px;
-    padding: 6px 14px; border-radius: calc(var(--radius) - 2px);
-    border: none; background: none; color: var(--text-3);
-    font-family: var(--font); font-size: 13px; font-weight: 500;
-    cursor: pointer; transition: all var(--transition);
-}
-.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
-.theme-btn.active {
-    color: var(--text); background: var(--bg-raised);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* ── Modal ────────────────────────────────── */
-
-.modal-overlay {
-    position: fixed; inset: 0; background: var(--overlay);
-    display: none; align-items: center; justify-content: center;
-    z-index: 1000; backdrop-filter: blur(2px);
-    padding: 2rem;  /* keeps modal away from viewport edges at any zoom */
-}
-.modal-overlay.active { display: flex; }
-
-.modal {
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius-lg); width: 90%; max-width: 520px;
-    max-height: 100%; display: flex; flex-direction: column;
-    animation: modal-in 0.15s ease;
-}
-.modal-wide { max-width: 700px; }
-@keyframes modal-in { from { opacity: 0; transform: translateY(-8px); } }
-
-.modal-header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 16px 20px; border-bottom: 1px solid var(--border);
-}
-.modal-header h2 { font-size: 16px; font-weight: 600; }
-.modal-close {
-    background: none; border: none; color: var(--text-3); font-size: 18px;
-    cursor: pointer; padding: 2px 6px; border-radius: 4px;
-    transition: color var(--transition);
-}
-.modal-close:hover { color: var(--text); }
-.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
-.modal-footer {
-    padding: 12px 20px; border-top: 1px solid var(--border);
-    display: flex; justify-content: flex-end; gap: 0.5rem;
-}
-
-.settings-section { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
-.settings-section:last-child { border-bottom: none; margin-bottom: 0; }
-.settings-section h3 { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
-.avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
-.avatar-preview {
-    width: 56px; height: 56px; border-radius: 50%; background: var(--bg-raised);
-    display: flex; align-items: center; justify-content: center;
-    font-size: 22px; font-weight: 600; color: var(--accent); flex-shrink: 0;
-    overflow: hidden; border: 2px solid var(--border);
-}
-.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
-.avatar-actions { display: flex; flex-direction: column; gap: 4px; }
-.avatar-actions .form-hint { font-size: 11px; margin-left: 0; }
-.avatar-preview-sm { width: 42px; height: 42px; font-size: 18px; }
-
-/* Modal tab bars — shared horizontal scroll with arrow navigation */
-.modal-tabs-wrap {
-    position: relative; flex-shrink: 0;
-    border-bottom: 1px solid var(--border); background: var(--bg-raised);
-}
-.modal-tabs {
-    display: flex; padding: 0 16px;
-    border-bottom: 1px solid var(--border); background: var(--bg-raised);
-    overflow-x: auto; overflow-y: hidden;
-    scrollbar-width: none; -ms-overflow-style: none;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    flex-shrink: 0;
-}
-.modal-tabs::-webkit-scrollbar { display: none; }
-/* When wrapped, the wrapper owns the border */
-.modal-tabs-wrap .modal-tabs { border-bottom: none; background: none; }
-
-.tab-arrow {
-    position: absolute; top: 0; bottom: 1px; /* 1px for border */ width: 28px;
-    display: flex; align-items: center; justify-content: center;
-    background: var(--bg-raised); border: none; color: var(--text-2);
-    cursor: pointer; font-size: 16px; z-index: 2; opacity: 0;
-    pointer-events: none; transition: opacity 0.15s ease;
-}
-.tab-arrow.visible { opacity: 1; pointer-events: auto; }
-.tab-arrow:hover { color: var(--accent); }
-.tab-arrow-left { left: 0; padding-left: 2px; box-shadow: 4px 0 8px -2px rgba(0,0,0,0.15); }
-.tab-arrow-right { right: 0; padding-right: 2px; box-shadow: -4px 0 8px -2px rgba(0,0,0,0.15); }
-
-/* Settings tabs */
-.settings-tabs { gap: 0; }
-.settings-tabs .settings-tab {
-    padding: 10px 14px; background: none; border: none; border-radius: 0;
-    color: var(--text-3); cursor: pointer; font-size: 13px; font-family: var(--font);
-    border-bottom: 2px solid transparent; transition: color var(--transition);
-    outline: none; -webkit-appearance: none; appearance: none;
-    white-space: nowrap; flex-shrink: 0;
-}
-.settings-tabs .settings-tab:hover { color: var(--text-2); }
-.settings-tabs .settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-
-.settings-notice {
-    background: rgba(234,179,8,0.08); border: 1px solid var(--warning-dim);
-    border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
-    color: var(--warning); display: flex; align-items: center; gap: 8px;
-    margin-top: 1rem;
-}
-
-/* Providers */
-.provider-row {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 8px 0; border-bottom: 1px solid var(--border);
-}
-.provider-name { font-weight: 500; font-size: 13px; }
-.provider-meta { font-size: 11px; color: var(--text-3); margin-left: 8px; }
-.provider-actions { display: flex; align-items: center; gap: 8px; }
-.badge-global { font-size: 10px; color: var(--text-3); background: var(--bg-raised); padding: 2px 8px; border-radius: 4px; }
-
-/* Admin panel (fullscreen) */
-.admin-panel {
-    position: fixed; z-index: 1000;
-    top: var(--banner-top-height); right: 0;
-    bottom: var(--banner-bottom-height); left: 0;
-    background: var(--bg); display: flex; flex-direction: column;
-}
-.admin-topbar {
-    display: flex; align-items: center; padding: 0 1rem; height: 48px;
-    border-bottom: 1px solid var(--border); background: var(--bg-surface); flex-shrink: 0;
-}
-.admin-back {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    font-size: 14px; padding: 4px 10px; border-radius: 4px; font-family: var(--font);
-}
-.admin-back:hover { color: var(--accent); background: var(--bg-raised); }
-.admin-title { font-size: 16px; font-weight: 600; margin-left: 1rem; flex: 1; }
-.admin-user { font-size: 12px; color: var(--text-3); }
-
-.admin-categories {
-    display: flex; gap: 0; border-bottom: 1px solid var(--border);
-    background: var(--bg-surface); padding: 0 1rem; flex-shrink: 0;
-}
-.admin-cat {
-    background: none; border: none; border-bottom: 2px solid transparent;
-    color: var(--text-3); padding: 10px 20px; cursor: pointer;
-    font-size: 14px; font-weight: 500; font-family: var(--font);
-    transition: color 0.15s, border-color 0.15s; outline: none;
-}
-.admin-cat:hover { color: var(--text-2); }
-.admin-cat.active { color: var(--accent); border-bottom-color: var(--accent); }
-
-.admin-body { display: flex; flex: 1; overflow: hidden; }
-
-.admin-sidebar {
-    width: 160px; flex-shrink: 0; border-right: 1px solid var(--border);
-    background: var(--bg-surface); padding: 0.75rem 0; overflow-y: auto;
-}
-.admin-sidebar button {
-    display: block; width: 100%; text-align: left; background: none; border: none;
-    padding: 8px 20px; color: var(--text-3); cursor: pointer;
-    font-size: 13px; font-family: var(--font); border-left: 3px solid transparent;
-    transition: color 0.1s, background 0.1s;
-}
-.admin-sidebar button:hover { color: var(--text-2); background: var(--bg-raised); }
-.admin-sidebar button.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-raised); }
-
-.admin-main { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; }
-.admin-section-content { /* replaces .admin-tab-content */ }
-
-/* Admin shared */
-/* admin-tab: still used by team admin modal */
-.admin-tab {
-    padding: 10px 14px; background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent;
-    white-space: nowrap; flex-shrink: 0; transition: color var(--transition);
-    outline: none; font-family: var(--font);
-}
-.admin-tab:hover { color: var(--text-2); }
-.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-
-.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
-.admin-hint { font-size: 12px; color: var(--text-3); }
-.admin-inline-form {
-    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 1rem; margin-bottom: 1rem;
-}
-.ext-edit-form {
-    background: var(--bg); padding: 12px 0;
-}
-.ext-edit-form textarea {
-    resize: vertical; min-height: 60px;
-    line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto;
-}
-
-.admin-user-row {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
-    min-height: 52px;
-}
-.admin-user-info { flex: 1; }
-.admin-user-email { font-size: 12px; color: var(--text-3); margin-top: 2px; }
-.admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; }
-.admin-user-actions button { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; min-width: 68px; text-align: center; }
-.admin-user-actions button:hover { border-color: var(--border-light); color: var(--text); }
-.admin-user-actions .btn-danger { color: var(--danger); }
-.admin-user-actions .btn-danger:hover { border-color: var(--danger); }
-.inline-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
-
-.admin-model-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; }
-.admin-model-row .model-name { flex: 1; font-weight: 500; }
-.admin-model-row .model-caps-inline { display: flex; gap: 3px; }
-.admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; }
-.admin-model-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text-2); min-width: 82px; text-align: center; }
-.admin-model-toggle:hover { border-color: var(--accent); color: var(--accent); }
-.admin-model-toggle.enabled { border-color: var(--success); color: var(--success); }
-.admin-model-toggle.team { border-color: var(--accent); color: var(--accent); }
-.model-list-item.model-hidden { opacity: 0.5; }
-.model-list-item.model-hidden .model-name { text-decoration: line-through; }
-
-.admin-provider-row {
-    display: flex; align-items: center; gap: 12px; padding: 10px 0;
-    border-bottom: 1px solid var(--border); font-size: 14px;
-}
-.admin-provider-row .provider-name { font-weight: 500; flex: 1; }
-.admin-provider-row .provider-endpoint { font-size: 12px; color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.btn-edit { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
-.btn-edit:hover { color: var(--accent); }
-.admin-provider-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
-.admin-provider-row .btn-delete:hover { color: var(--danger); }
-
-.admin-persona-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
-.admin-persona-row .persona-info { flex: 1; min-width: 0; }
-.persona-row-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
-.persona-row-icon { margin-right: 4px; }
-.admin-persona-row .persona-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
-.admin-persona-row .persona-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.admin-persona-row .persona-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
-.admin-persona-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
-.admin-persona-row .btn-delete:hover { color: var(--danger); }
-.badge-user { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--accent-dim); color: var(--accent); }
-
-/* Stats cards */
-.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
-.stat-card {
-    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 14px 16px; text-align: center;
-}
-.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.2; }
-.stat-card .stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
-
-/* Audit log */
-.audit-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
-.audit-row:last-child { border-bottom: none; }
-.audit-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.audit-action { font-weight: 600; color: var(--accent); font-family: var(--font-mono, monospace); font-size: 12px; }
-.audit-actor { color: var(--text); }
-.audit-resource { color: var(--text-3); font-family: var(--font-mono, monospace); font-size: 11px; }
-.audit-meta { display: flex; gap: 10px; margin-top: 2px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
-.audit-details { color: var(--text-2); }
-.audit-ip { font-family: var(--font-mono, monospace); }
-.pagination-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
-
-/* Banner preview */
-.banner-preview {
-    margin-top: 0.75rem; padding: 6px 16px; text-align: center;
-    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
-    border-radius: var(--radius);
-}
-.color-input-wrap { display: flex; align-items: center; gap: 8px; }
-.color-input-wrap input[type="color"] {
-    width: 36px; height: 32px; border: 1px solid var(--border);
-    border-radius: var(--radius); background: var(--bg);
-    cursor: pointer; padding: 2px;
-}
-.color-hex {
-    width: 80px; background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text); padding: 6px 10px; border-radius: var(--radius);
-    font-family: var(--mono); font-size: 12px;
-}
-.section-hint { font-size: 13px; color: var(--text-3); margin-bottom: 0.75rem; }
-
-/* User model list */
-.model-list-grid { display: flex; flex-direction: column; gap: 2px; }
-.model-list-item {
-    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
-    border-radius: var(--radius); font-size: 13px; cursor: default;
-}
-.model-list-item:hover { background: var(--bg-hover); }
-.model-list-item .model-name { flex: 1; font-weight: 500; }
-.model-list-item .model-provider { font-size: 12px; color: var(--text-3); }
-.model-list-item .model-caps-inline { display: flex; gap: 3px; }
-
-.badge-admin { background: var(--accent); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-user { background: var(--bg-raised); color: var(--text-3); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-inactive { background: var(--danger); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-pending { background: var(--warning); color: var(--text-on-warning); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-team { background: var(--accent-dim); color: var(--accent-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; margin-left: 2px; }
-.admin-approve-form { padding: 10px 12px; margin: -4px 0 8px; background: var(--glass); border-radius: 0 0 8px 8px; border-top: 1px solid var(--border); }
-.admin-approve-form .checkbox-label { display: block; margin: 2px 0; }
-.btn-approve { background: var(--success-dim); color: var(--success-light); border: 1px solid rgba(34,197,94,0.3); border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
-.team-card { padding: 8px 10px; background: var(--glass); border-radius: 6px; margin-bottom: 6px; }
-.team-card-info { display: flex; align-items: center; gap: 8px; }
-.team-admin-back {
-    cursor: pointer; margin-right: 4px; opacity: 0.5;
-    transition: opacity var(--transition);
-}
-.team-admin-back:hover { opacity: 1; }
-.team-tab-content { padding: 0; }
-.badge-private { background: var(--purple); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-success { background: var(--success-dim); color: var(--success-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-warning { background: var(--warning-dim); color: var(--warning-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-.badge-danger { background: var(--danger-dim); color: var(--danger-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
-
-/* Health + Routing admin (v0.22.3) */
-.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
-.admin-health-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
-.list-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
-.admin-table { border-collapse: collapse; }
-.admin-table th, .admin-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
-.admin-table th { font-weight: 600; color: var(--text-2); font-size: 11px; text-transform: uppercase; }
-.admin-user-row.user-inactive { opacity: 0.7; }
-.loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; }
-.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }
-.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; }
-
-/* ── Toast ────────────────────────────────── */
-
-.toast-container { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; }
-.toast {
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 8px 16px; font-size: 13px;
-    display: flex; align-items: center; gap: 8px;
-    animation: toast-in 0.25s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-.toast.error { border-color: var(--danger); }
-.toast.warning { border-color: var(--warning); }
-.toast.success { border-color: var(--success); }
-.toast button { background: none; border: none; color: var(--text-3); cursor: pointer; }
-@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
-
-/* ── Debug Modal ─────────────────────────── */
-
-.debug-modal { max-width: 900px; height: 100%; overflow: hidden; }
-.debug-tabs { }
-.debug-tab { padding: 8px 12px; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
-.debug-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-.debug-modal-body { flex: 1; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; }
-.debug-tab-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
-.debug-toolbar { display: flex; gap: 1rem; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 11px; }
-.debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; }
-.debug-content { flex: 1; overflow-y: auto; padding: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; }
-.debug-entry { padding: 1px 6px; border-bottom: 1px solid rgba(128,128,128,0.06); white-space: pre-wrap; word-break: break-all; }
-.debug-time { color: var(--text-3); opacity: 0.6; font-size: 10px; }
-.debug-msg { color: var(--text); }
-.debug-empty { color: var(--text-3); text-align: center; padding: 2rem; }
-.debug-net-entry { border-bottom: 1px solid var(--border); }
-.debug-net-entry summary { padding: 6px; cursor: pointer; font-size: 11px; }
-.debug-net-method { font-weight: bold; color: var(--accent); }
-.debug-net-url { color: var(--text); word-break: break-all; }
-.debug-net-detail { padding: 6px 12px; font-size: 11px; }
-.debug-pre { white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; padding: 6px; background: rgba(0,0,0,0.2); border-radius: 4px; margin: 4px 0; }
-.debug-state-pre { max-height: none; margin: 0; }
-.debug-footer { display: flex; align-items: center; }
-
-/* ── Mode Selector (v0.21.3) ───────────── */
-
-/* Surface region wrappers must participate in parent flex layouts */
-[data-surface-region="sidebar-content"] {
-    flex: 1; min-height: 0;
-    display: flex; flex-direction: column;
-}
-
-.mode-selector {
-    display: flex; gap: 2px; padding: 6px 8px;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-}
-.mode-btn {
-    display: flex; align-items: center; gap: 6px;
-    padding: 4px 10px; height: 28px; border: none;
-    border-radius: var(--radius); background: none;
-    color: var(--text-3); cursor: pointer; font-size: 12px;
-    transition: background var(--transition), color var(--transition);
-    white-space: nowrap;
-}
-.mode-btn svg { flex-shrink: 0; }
-.mode-btn-label { font-weight: 500; }
-.mode-btn:hover { background: var(--bg-hover); color: var(--text); }
-.mode-btn.active { background: var(--bg-active); color: var(--accent); }
-.sidebar.collapsed .mode-selector { justify-content: center; }
-.sidebar.collapsed .mode-btn-label { display: none; }
-.sidebar.collapsed .mode-btn { padding: 4px; width: 28px; justify-content: center; }
-
-/* ── Sidebar Tabs (v0.21.6) ──────────── */
-
-.sidebar-tabs {
-    display: flex; padding: 0 8px; gap: 0;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-}
-.sidebar-tab {
-    flex: 1; padding: 6px 0; font-size: 12px; font-weight: 500;
-    background: none; border: none; border-bottom: 2px solid transparent;
-    color: var(--text-3); cursor: pointer;
-    transition: color 0.15s, border-color 0.15s;
-}
-.sidebar-tab:hover { color: var(--text-2); }
-.sidebar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-.sidebar.collapsed .sidebar-tabs { display: none; }
-.sidebar-tab-panel { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
-.sidebar-files-panel { padding: 0; }
-
-/* ── REPL Console (v0.21.3) ────────────── */
-
-.repl-toolbar {
-    display: flex; gap: 0.5rem; padding: 6px 12px;
-    border-bottom: 1px solid var(--border); font-size: 11px;
-}
-.repl-output {
-    flex: 1; overflow-y: auto; padding: 6px;
-    font-family: var(--mono); font-size: 12px; line-height: 1.6;
-}
-.repl-input-wrap {
-    display: flex; align-items: flex-start; gap: 6px;
-    padding: 8px 12px; border-top: 1px solid var(--border);
-    background: var(--bg-raised);
-}
-.repl-prompt {
-    font-family: var(--mono); font-size: 12px; line-height: 1.6;
-    color: var(--accent); font-weight: bold;
-    flex-shrink: 0; padding-top: 2px;
-}
-.repl-input {
-    flex: 1; background: none; border: none; outline: none;
-    font-family: var(--mono); font-size: 12px; line-height: 1.6;
-    color: var(--text); resize: none; overflow: hidden;
-    min-height: 20px;
-}
-.repl-entry { padding: 2px 6px; }
-.repl-entry-input pre { color: var(--text-2); margin: 0; white-space: pre-wrap; word-break: break-all; }
-.repl-entry-result { color: var(--text); }
-.repl-entry-error { color: var(--danger, #e55); }
-.repl-entry-info { color: var(--text-3); font-size: 11px; }
-
-.repl-error-msg { margin: 0; white-space: pre-wrap; font-weight: 500; }
-.repl-error-stack { margin: 2px 0 0 0; color: var(--text-3); font-size: 11px; white-space: pre-wrap; }
-.repl-stack-toggle {
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-size: 10px; font-family: var(--mono);
-    padding: 0; margin-top: 2px;
-}
-.repl-stack-toggle:hover { color: var(--text-2); }
-
-.repl-elapsed { color: var(--text-3); font-size: 10px; margin-left: 8px; }
-
-/* REPL value types */
-.repl-null, .repl-undefined { color: var(--text-3); margin: 0; }
-.repl-string { color: #98c379; margin: 0; white-space: pre-wrap; word-break: break-all; }
-.repl-number { color: #d19a66; margin: 0; }
-.repl-boolean { color: #56b6c2; margin: 0; }
-.repl-function { color: #c678dd; margin: 0; font-style: italic; }
-.repl-symbol { color: #e5c07b; margin: 0; }
-.repl-dom { color: #61afef; margin: 0; }
-.repl-object { color: var(--text); margin: 0; }
-.repl-json { margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--text); font-size: 11px; }
-
-.repl-collapsible { display: inline; }
-.repl-json-toggle {
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-family: var(--mono); font-size: 12px;
-    padding: 0;
-}
-.repl-json-toggle:hover { color: var(--accent); }
-
-/* ── Sidebar Notes Button ───────────────── */
-
-.sidebar-notes-btn {
-    padding: 4px 8px; border-top: 1px solid var(--border);
-    flex-shrink: 0;
-}
-.sb-notes {
-    display: flex; align-items: center; gap: 8px; width: 100%;
-    padding: 8px 12px; background: none; border: none;
-    border-radius: var(--radius); color: var(--text-2);
-    cursor: pointer; font-size: 13px; font-family: var(--font);
-    transition: background var(--transition), color var(--transition);
-}
-.sb-notes:hover { background: var(--bg-hover); color: var(--text); }
-.sidebar.collapsed .sidebar-notes-btn .sb-label { display: none; }
-.sidebar.collapsed .sb-notes { justify-content: center; padding: 8px; }
-
-/* ── Notes (inside side panel) ──────────── */
-
-/* Notes toolbar and selection bar now live inside the side panel */
-
-.notes-toolbar {
-    display: flex; gap: 8px; padding: 8px 12px;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg-raised);
-    flex-wrap: wrap;
-}
-.notes-search-row {
-    padding: 8px 12px 4px;
-}
-.notes-search-input {
-    width: 100%; background: var(--input-bg); border: 1px solid var(--border);
-    border-radius: var(--radius); color: var(--text);
-    font-size: 13px; font-family: var(--font); padding: 6px 10px;
-    outline: none; transition: border-color var(--transition);
-}
-.notes-search-input:focus { border-color: var(--accent); }
-.notes-filter-row {
-    display: flex; gap: 8px; padding: 0 12px 8px;
-}
-.notes-editor-header {
-    display: flex; align-items: center; gap: 6px;
-    padding: 8px 12px; border-bottom: 1px solid var(--border);
-    background: var(--bg-raised);
-}
-.notes-meta-row {
-    display: flex; gap: 8px; margin-bottom: 8px;
-}
-.notes-meta-row input { flex: 1; }
-.notes-content-container { min-height: 200px; }
-.notes-read-view { padding: 12px; }
-.notes-search-wrap {
-    display: flex; align-items: center; gap: 6px; flex: 1;
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 0 10px;
-}
-.notes-search-wrap svg { color: var(--text-3); flex-shrink: 0; }
-.notes-search-wrap input {
-    flex: 1; background: none; border: none; color: var(--text);
-    font-size: 13px; font-family: var(--font); padding: 6px 0;
-    outline: none;
-}
-.notes-filter-select {
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius); color: var(--text); font-size: 12px;
-    padding: 4px 8px; font-family: var(--font); cursor: pointer;
-    max-width: 160px;
-}
-
-/* Notes toolbar and selection bar now live inside the side panel */
-
-/* Selection bar */
-.notes-selection-bar {
-    display: flex; align-items: center; gap: 10px;
-    padding: 6px 12px;
-    background: var(--accent-dim); border-bottom: 1px solid var(--border);
-    font-size: 12px;
-}
-.notes-select-all {
-    display: flex; align-items: center; gap: 6px;
-    color: var(--text-2); cursor: pointer; font-size: 12px;
-}
-.notes-select-all input { cursor: pointer; }
-
-.notes-list { padding: 8px; }
-.notes-empty, .notes-loading {
-    text-align: center; color: var(--text-3); padding: 2rem;
-    font-size: 13px;
-}
-
-.note-item {
-    display: flex; align-items: flex-start; gap: 8px;
-    padding: 10px 12px; border-radius: var(--radius);
-    cursor: pointer; border: 1px solid transparent;
-    transition: background var(--transition), border-color var(--transition);
-}
-.note-item:hover {
-    background: var(--bg-hover); border-color: var(--border);
-}
-.note-item.selected {
-    background: var(--accent-dim); border-color: var(--accent);
-}
-.note-select-col { flex-shrink: 0; padding-top: 2px; }
-.note-checkbox { cursor: pointer; accent-color: var(--accent); }
-.note-content-col { flex: 1; min-width: 0; }
-.note-item-header {
-    display: flex; align-items: baseline; justify-content: space-between;
-    gap: 8px; margin-bottom: 2px;
-}
-.note-item-title {
-    font-size: 13px; font-weight: 600; color: var(--text);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.note-item-time { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
-.note-preview {
-    font-size: 12px; color: var(--text-3); line-height: 1.4;
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    max-height: 1.4em;
-}
-.note-headline {
-    font-size: 12px; color: var(--text-3); line-height: 1.4;
-}
-.note-headline mark {
-    background: var(--accent-dim); color: var(--accent);
-    padding: 0 2px; border-radius: 2px;
-}
-.note-item-meta {
-    display: flex; align-items: center; gap: 4px;
-    margin-top: 4px; flex-wrap: wrap;
-}
-.note-folder {
-    font-size: 11px; color: var(--text-3); font-family: var(--mono);
-    background: var(--bg-raised); padding: 1px 6px; border-radius: 3px;
-}
-.note-tag {
-    font-size: 10px; color: var(--purple); background: var(--purple-dim);
-    padding: 1px 6px; border-radius: 3px;
-}
-
-/* Notes editor */
-.notes-editor { padding: 12px; }
-.notes-editor-toolbar {
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 8px;
-}
-
-/* Note read mode */
-.note-read-title {
-    font-size: 18px; font-weight: 600; color: var(--text);
-    margin: 0 0 6px; line-height: 1.3;
-}
-.note-read-meta {
-    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
-    margin-bottom: 12px;
-}
-.note-read-content {
-    font-size: var(--msg-font, 14px); line-height: 1.7;
-    max-height: 50vh; overflow-y: auto;
-    padding: 12px; background: var(--bg-surface);
-    border: 1px solid var(--border); border-radius: var(--radius);
-}
-.notes-back-btn {
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-size: 12px; font-family: var(--font);
-    padding: 4px 0; margin-bottom: 8px;
-    transition: color var(--transition);
-}
-.notes-back-btn:hover { color: var(--text); }
-.notes-title-input {
-    font-size: 16px !important; font-weight: 600;
-    border: 1px solid var(--border) !important;
-    padding: 8px 10px !important;
-}
-.notes-folder-input, .notes-tags-input {
-    font-size: 12px !important; font-family: var(--mono);
-}
-.notes-content-input {
-    font-size: 13px !important; line-height: 1.6 !important;
-    min-height: 200px; resize: vertical;
-    font-family: var(--mono); border: 1px solid var(--border) !important;
-}
-.notes-editor input, .notes-editor textarea {
-    width: 100%; background: var(--bg-surface); color: var(--text);
-    border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 6px 10px; font-family: var(--font); font-size: var(--msg-font, 14px);
-    outline: none; transition: border-color var(--transition);
-}
-.notes-editor input:focus, .notes-editor textarea:focus {
-    border-color: var(--accent);
-}
-.notes-editor-actions {
-    display: flex; gap: 8px; margin-top: 12px;
-}
-
-/* ── Note Backlinks ──────────────────────── */
-
-.note-backlinks {
-    margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px;
-}
-.note-backlinks-header {
-    display: flex; align-items: center; gap: 8px;
-    font-size: 12px; color: var(--text-2); cursor: pointer;
-    padding: 4px 0; user-select: none;
-}
-.note-backlinks-header:hover { color: var(--text); }
-.note-backlinks-header .badge {
-    background: var(--accent); color: #fff; font-size: 10px;
-    padding: 1px 6px; border-radius: 10px;
-}
-.note-backlinks-list { margin-top: 6px; }
-.note-backlink-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
-    font-size: 13px; transition: background var(--transition);
-}
-.note-backlink-item:hover { background: var(--bg-hover); }
-.note-backlink-title { color: var(--accent); font-weight: 500; }
-.note-backlink-folder { font-size: 11px; color: var(--text-3); }
-
-/* ── Wikilink Chips (Read Mode) ──────────── */
-
-.wikilink-chip {
-    display: inline-block; padding: 1px 6px; margin: 0 1px;
-    border-radius: 4px; cursor: pointer; font-size: 0.9em;
-    font-weight: 500; text-decoration: none; vertical-align: baseline;
-    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
-    color: var(--accent, #6366f1);
-    transition: background var(--transition);
-}
-.wikilink-chip:hover {
-    background: rgba(var(--accent-rgb, 99, 102, 241), 0.25);
-}
-.wikilink-transclusion {
-    border-left: 2px solid var(--accent, #6366f1);
-    font-style: italic;
-}
-
-/* ── Transclusion Embeds ─────────────────── */
-
-.transclusion-embed {
-    margin: 8px 0; border: 1px solid var(--border);
-    border-left: 3px solid var(--accent, #6366f1);
-    border-radius: var(--radius); overflow: hidden;
-    background: var(--bg-surface);
-}
-.transclusion-header {
-    padding: 6px 10px; background: var(--bg-2);
-    border-bottom: 1px solid var(--border); font-size: 12px;
-}
-.transclusion-content {
-    padding: 10px 12px; font-size: 13px; line-height: 1.5;
-}
-.transclusion-content .msg-text { margin: 0; }
-
-/* ── Graph View ──────────────────────────── */
-
-.notes-graph-view {
-    display: flex; flex-direction: column; height: 100%;
-}
-.notes-graph-toolbar {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 10px; border-bottom: 1px solid var(--border);
-    background: var(--bg-surface); flex-shrink: 0;
-}
-.notes-graph-stats {
-    flex: 1; text-align: center; font-size: 11px; color: var(--text-3);
-}
-#noteGraphCanvas {
-    flex: 1; width: 100%; min-height: 200px;
-    background: var(--bg);
-}
-
-/* ── Daily Note Navigation ───────────────── */
-
-.note-daily-nav {
-    display: flex; align-items: center; justify-content: center;
-    gap: 12px; padding: 6px 10px;
-    border-bottom: 1px solid var(--border); background: var(--bg-surface);
-}
-.note-daily-date {
-    font-size: 13px; font-weight: 500; color: var(--text);
-    min-width: 100px; text-align: center;
-}
-
-/* ── Save-to-Note Modal ──────────────────── */
-
-.save-to-note-modal {
-    max-width: 460px; width: 90%;
-}
-.save-to-note-modal h3 { margin: 0 0 12px; font-size: 16px; }
-.save-note-mode-toggle {
-    display: flex; gap: 16px; margin-bottom: 12px; font-size: 13px;
-}
-.save-note-mode-toggle label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
-.save-note-preview {
-    max-height: 120px; overflow-y: auto; padding: 8px;
-    border: 1px solid var(--border); border-radius: var(--radius);
-    background: var(--bg); font-size: 12px; line-height: 1.5;
-}
-.save-note-search-results {
-    max-height: 160px; overflow-y: auto; margin-top: 4px;
-    border: 1px solid var(--border); border-radius: var(--radius);
-    background: var(--bg-surface);
-}
-.save-note-search-results:empty { display: none; }
-.save-note-result {
-    padding: 6px 10px; cursor: pointer; font-size: 13px;
-    transition: background var(--transition);
-}
-.save-note-result:hover, .save-note-result.selected {
-    background: var(--bg-hover);
-}
-.save-note-result.selected {
-    border-left: 3px solid var(--accent); font-weight: 500;
-}
-
-/* ── Sidebar Search ──────────────────────── */
-
-.sidebar-search {
-    display: flex; align-items: center; gap: 7px;
-    padding: 6px 10px; margin: 8px 10px 4px;
-    background: var(--input-bg); border: 1px solid var(--border);
-    border-radius: var(--radius); transition: border-color var(--transition);
-}
-.sidebar-search:focus-within { border-color: var(--accent); }
-.sidebar-search svg { color: var(--text-3); flex-shrink: 0; }
-.sidebar-search input {
-    flex: 1; background: none; border: none; color: var(--text);
-    font-size: 12px; font-family: var(--font); outline: none;
-    min-width: 0;
-}
-.sidebar-search input::placeholder { color: var(--text-3); }
-.sidebar-search-clear {
-    background: none; border: none; color: var(--text-3); cursor: pointer;
-    font-size: 11px; padding: 2px 4px; border-radius: 4px;
-    transition: color var(--transition); display: none;
-}
-.sidebar-search-clear:hover { color: var(--text); }
-.sidebar-search.has-value .sidebar-search-clear { display: block; }
-.sidebar.collapsed .sidebar-search { display: none; }
-
-.sidebar-search-empty {
-    color: var(--text-3); font-size: 12px; text-align: center;
-    padding: 1.5rem 0.5rem;
-}
-
-/* ── Command Palette ─────────────────────── */
-
-.cmd-palette-overlay {
-    position: fixed; inset: 0; background: var(--overlay);
-    display: none; align-items: flex-start; justify-content: center;
-    z-index: 2000; backdrop-filter: blur(4px);
-    padding-top: min(20vh, 160px);
-}
-.cmd-palette-overlay.active { display: flex; }
-
-.cmd-palette {
-    background: var(--bg-surface); border: 1px solid var(--border-light);
-    border-radius: var(--radius-lg); width: 90%; max-width: 480px;
-    box-shadow: 0 16px 64px rgba(0,0,0,0.6);
-    animation: modal-in 0.12s ease;
-    overflow: hidden;
-}
-
-.cmd-input-wrap {
-    display: flex; align-items: center; gap: 10px;
-    padding: 12px 16px; border-bottom: 1px solid var(--border);
-}
-.cmd-input-wrap svg { color: var(--text-3); flex-shrink: 0; }
-.cmd-input-wrap input {
-    flex: 1; background: none; border: none; color: var(--text);
-    font-size: 15px; font-family: var(--font); outline: none;
-}
-.cmd-input-wrap input::placeholder { color: var(--text-3); }
-.cmd-kbd {
-    font-size: 10px; font-family: var(--mono); color: var(--text-3);
-    background: var(--bg); border: 1px solid var(--border);
-    border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
-}
-
-.cmd-results {
-    max-height: 320px; overflow-y: auto;
-    padding: 4px;
-}
-
-.cmd-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
-    cursor: pointer; font-size: 13px; color: var(--text-2);
-    transition: background 60ms ease, color 60ms ease;
-}
-.cmd-item:hover, .cmd-item.active {
-    background: var(--accent-dim); color: var(--text);
-}
-.cmd-item svg { flex-shrink: 0; color: var(--text-3); }
-.cmd-item.active svg { color: var(--accent); }
-.cmd-item-label { flex: 1; }
-.cmd-item-hint {
-    font-size: 11px; color: var(--text-3); flex-shrink: 0;
-}
-.cmd-item.active .cmd-item-hint { color: var(--accent); }
-.cmd-group-label {
-    font-size: 10px; font-weight: 600; color: var(--text-3);
-    padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: 0.5px;
-}
-
-.cmd-footer {
-    display: flex; align-items: center; gap: 16px;
-    padding: 8px 16px; border-top: 1px solid var(--border);
-    font-size: 11px; color: var(--text-3);
-}
-.cmd-footer kbd {
-    font-size: 10px; font-family: var(--mono);
-    background: var(--bg); border: 1px solid var(--border);
-    border-radius: 3px; padding: 1px 4px;
-}
-
-/* ── PWA Install Banner ──────────────────── */
-
-.pwa-install-banner {
-    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius-lg); padding: 10px 16px;
-    display: flex; align-items: center; gap: 12px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 3000;
-    font-size: 13px; color: var(--text-2);
-    animation: pwa-banner-in 0.3s ease;
-    max-width: 90vw;
-}
-@keyframes pwa-banner-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
-
-/* ── Confirm Dialog ──────────────────────── */
-
-.confirm-overlay {
-    position: fixed; inset: 0; z-index: 9999;
-    display: flex; align-items: center; justify-content: center;
-    background: var(--overlay);
-    animation: fade-in 0.12s ease;
-}
-.confirm-dialog {
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius-lg); padding: 0;
-    min-width: 320px; max-width: 440px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-    animation: confirm-in 0.15s ease;
-}
-.confirm-header {
-    padding: 16px 20px 0; font-weight: 600; font-size: 15px; color: var(--text);
-}
-.confirm-body {
-    padding: 12px 20px 20px; font-size: 13px; color: var(--text-2);
-    line-height: 1.5; white-space: pre-wrap;
-}
-.confirm-footer {
-    display: flex; justify-content: flex-end; gap: 8px;
-    padding: 0 20px 16px;
-}
-@keyframes confirm-in { from { opacity: 0; transform: scale(0.95); } }
-@keyframes fade-in { from { opacity: 0; } }
-
-/* ── Popup Menu (shared base) ───────────── */
-
-.popup-menu {
-    display: none; position: absolute; z-index: 200;
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius); padding: 4px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-    min-width: 160px;
-}
-.popup-menu.open { display: block; }
-.popup-menu-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-size: 13px; width: 100%;
-    transition: background var(--transition), color var(--transition);
-}
-.popup-menu-item:hover { background: var(--bg-hover); color: var(--text); }
-.popup-menu-item.disabled { opacity: 0.4; pointer-events: none; }
-.popup-menu-danger:hover { color: var(--danger); }
-.popup-menu-icon { flex-shrink: 0; display: flex; align-items: center; }
-.popup-menu-hint { margin-left: auto; font-size: 11px; color: var(--text-3); }
-.popup-menu-divider { height: 1px; background: var(--border); margin: 4px 8px; }
-
-/* ── Tools Toggle ────────────────────────── */
-
-/* ── Popup (shared base for tools/KB popups) ── */
-.popup {
-    display: none; position: absolute;
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius-lg); padding: 4px;
-    box-shadow: var(--shadow-lg); z-index: 300;
-}
-.popup.open { display: block; }
-
-.tools-toggle-wrap { position: relative; display: flex; align-items: center; }
-.tools-toggle-btn.has-disabled { color: var(--text-3); }
-.tools-toggle-btn.has-disabled::after {
-    content: ''; position: absolute; top: 4px; right: 4px;
-    width: 6px; height: 6px; border-radius: 50%;
-    background: var(--warning);
-}
-.tools-popup { bottom: 100%; left: 0; margin-bottom: 8px; min-width: 210px; }
-.tools-popup-category, .tools-popup-tool {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
-    cursor: pointer; font-size: 13px; color: var(--text-2);
-    transition: background var(--transition);
-}
-.tools-popup-category:hover, .tools-popup-tool:hover { background: var(--bg-hover); }
-.tools-popup-tool { padding-left: 36px; font-size: 12px; } /* indented children */
-.tools-popup-check {
-    width: 16px; height: 16px; border-radius: 3px;
-    border: 1.5px solid var(--border); flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-    transition: background var(--transition), border-color var(--transition);
-}
-/* Fully enabled */
-.tools-popup-category.enabled .tools-popup-check,
-.tools-popup-tool.enabled .tools-popup-check {
-    background: var(--accent); border-color: var(--accent);
-}
-.tools-popup-category.enabled .tools-popup-check::after,
-.tools-popup-tool.enabled .tools-popup-check::after {
-    content: '✓'; color: var(--text-on-color); font-size: 11px; font-weight: 700;
-}
-/* Partial (indeterminate) */
-.tools-popup-category.partial .tools-popup-check {
-    background: var(--accent-dim); border-color: var(--accent);
-}
-.tools-popup-category.partial .tools-popup-check::after {
-    content: '─'; color: var(--accent); font-size: 12px; font-weight: 700;
-}
-.tools-popup-label { flex: 1; }
-.tools-popup-expand {
-    font-size: 14px; color: var(--text-3); cursor: pointer;
-    transition: transform var(--transition); padding: 0 2px;
-    user-select: none;
-}
-.tools-popup-expand.open { transform: rotate(90deg); }
-
-/* ── Knowledge Bases ────────────────────── */
-
-/* Toggle button in input bar */
-.kb-toggle-wrap {
-    position: relative; display: flex; align-items: center;
-}
-.kb-toggle-btn.has-active {
-    color: var(--accent);
-}
-
-/* Channel KB popup */
-.kb-popup {
-    bottom: 100%; left: 0; margin-bottom: 8px;
-    min-width: 240px; max-height: 300px; overflow-y: auto;
-}
-.kb-popup-header {
-    padding: 8px 12px 4px; font-size: 12px; font-weight: 600;
-    color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
-}
-.kb-popup-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px; cursor: pointer;
-    transition: background var(--transition);
-}
-.kb-popup-item:hover { background: var(--bg-hover); }
-.kb-popup-item .kb-popup-check {
-    width: 16px; height: 16px; border-radius: 3px;
-    border: 1.5px solid var(--border); flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-    transition: all var(--transition);
-}
-.kb-popup-item.enabled .kb-popup-check {
-    background: var(--accent); border-color: var(--accent);
-}
-.kb-popup-item.enabled .kb-popup-check::after {
-    content: '✓'; font-size: 11px; color: #fff;
-}
-.kb-popup-label { display: flex; flex-direction: column; min-width: 0; }
-.kb-popup-name {
-    font-size: 13px; color: var(--text);
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.kb-popup-meta { font-size: 11px; color: var(--text-3); }
-.kb-popup-empty, .kb-popup-loading {
-    padding: 16px; text-align: center; font-size: 13px; color: var(--text-3);
-}
-
-/* KB management panel (settings tab) */
-.kb-manage-header {
-    display: flex; align-items: center; gap: 8px;
-    margin-bottom: 12px;
-}
-.kb-manage-header h3 { flex: 1; margin: 0; font-size: 15px; }
-.kb-manage-summary { font-size: 11px; color: var(--text-3); margin-bottom: 10px; padding: 0 2px; }
-.kb-manage-list { display: flex; flex-direction: column; gap: 2px; }
-.kb-manage-item {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 10px; border-radius: var(--radius);
-    background: var(--bg-2); transition: background var(--transition);
-}
-.kb-manage-item:hover { background: var(--bg-hover); }
-.kb-manage-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-.kb-manage-name { font-size: 13px; font-weight: 500; color: var(--text); }
-.kb-manage-desc { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.kb-manage-stats { font-size: 11px; color: var(--text-3); }
-.kb-manage-desc-block { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
-.kb-manage-actions { display: flex; gap: 4px; flex-shrink: 0; }
-.kb-manage-empty, .kb-manage-loading {
-    padding: 20px; text-align: center; font-size: 13px; color: var(--text-3);
-}
-.kb-doc-item[data-doc-status="pending"] .kb-manage-name,
-.kb-doc-item[data-doc-status="extracting"] .kb-manage-name,
-.kb-doc-item[data-doc-status="chunking"] .kb-manage-name,
-.kb-doc-item[data-doc-status="embedding"] .kb-manage-name {
-    opacity: 0.7;
-}
-
-/* ── Responsive ──────────────────────────── */
-
-.mobile-menu-btn {
-    display: none; align-items: center; justify-content: center;
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; padding: 4px; border-radius: var(--radius);
-    transition: color var(--transition);
-}
-.mobile-menu-btn:hover { color: var(--text); }
-.sidebar-overlay {
-    display: none; position: fixed; inset: 0; z-index: 99;
-    background: var(--overlay);
-}
-
-@media (max-width: 768px) {
-    .sidebar { position: fixed; z-index: 100; height: 100%; transition: width 0.2s ease; }
-    .sidebar.collapsed { width: 0; border: none; overflow: hidden; }
-    .msg-inner { padding: 0 1rem; }
-    .model-caps { display: none; }
-    .input-area { padding: 0 0.5rem 0.5rem; }
-    .input-wrap textarea { font-size: 16px; } /* prevent iOS zoom */
-    .mobile-menu-btn { display: flex; }
-    .modal-overlay { padding: 0.75rem; }
-    .modal { width: 100%; }
-    .tab-arrow { width: 36px; font-size: 20px; } /* larger touch target */
-    .modal-tabs { padding: 0 12px; }
-    .admin-sidebar { width: 48px; padding: 0.5rem 0; }
-    .admin-sidebar button { padding: 8px 0; text-align: center; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
-    .admin-sidebar button.active { border-bottom-color: var(--accent); border-left: none; }
-    .admin-main { padding: 1rem; }
-    .admin-cat { padding: 10px 12px; font-size: 13px; }
-}
-
-/* =========================================
-   PROJECTS (v0.19.0)
-   ========================================= */
-
-.project-group {
-    margin-bottom: 2px;
-    border-radius: var(--radius);
-    transition: background 0.15s;
-}
-.project-group.drag-over {
-    background: color-mix(in srgb, var(--accent) 12%, transparent);
-    outline: 1px dashed var(--accent);
-    outline-offset: -1px;
-    border-radius: var(--radius);
-}
-
-.project-header {
-    display: flex; align-items: center; gap: 6px;
-    padding: 6px 10px; cursor: pointer; user-select: none;
-    border-radius: var(--radius);
-    transition: background var(--transition);
-}
-.project-header:hover { background: var(--bg-hover); }
-
-.project-arrow {
-    font-size: 10px; color: var(--text-3); width: 12px; text-align: center; flex-shrink: 0;
-}
-.project-dot {
-    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
-    background: var(--text-3); display: inline-block;
-}
-.project-name {
-    font-size: 12px; font-weight: 600; color: var(--text-2);
-    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.project-count {
-    font-size: 10px; color: var(--text-3); flex-shrink: 0; margin-left: auto;
-}
-.project-menu-btn {
-    opacity: 0; background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-size: 14px; padding: 0 4px; border-radius: 4px;
-    transition: opacity var(--transition), background var(--transition);
-    line-height: 1; flex-shrink: 0;
-}
-.project-header:hover .project-menu-btn { opacity: 1; }
-.project-header:hover .project-count { display: none; }
-.project-menu-btn:hover { background: var(--bg-raised); color: var(--text); }
-
-.project-empty {
-    font-size: 11px; color: var(--text-3); padding: 4px 10px 8px 28px;
-    font-style: italic;
-}
-
-/* Active project indicator (v0.19.1) */
-.project-group.active { border-left: 2px solid var(--accent); }
-.project-group.active .project-header { background: color-mix(in srgb, var(--accent) 6%, transparent); }
-.project-pin { font-size: 10px; margin-left: 2px; opacity: 0.7; }
-
-.sidebar.collapsed .project-group { display: none; }
-.sidebar.collapsed .recent-section .chat-group-label { display: none; }
-
-/* Recent section drop target */
-.recent-section { min-height: 40px; }
-.recent-section.drag-over {
-    background: color-mix(in srgb, var(--accent) 8%, transparent);
-    border-radius: var(--radius);
-}
-
-/* Dragging state */
-.chat-item.dragging { opacity: 0.4; }
-.chat-item[draggable="true"] { cursor: grab; }
-.chat-item[draggable="true"]:active { cursor: grabbing; }
-
-/* Context menu */
-.project-ctx-menu {
-    position: fixed; z-index: 9999;
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius); box-shadow: var(--shadow);
-    padding: 4px; min-width: 160px; max-width: 220px;
-}
-.ctx-item {
-    display: flex; align-items: center; gap: 8px;
-    width: 100%; padding: 7px 10px; border: none; background: none;
-    color: var(--text-2); font-size: 13px; cursor: pointer;
-    border-radius: calc(var(--radius) - 2px); text-align: left;
-    white-space: nowrap; overflow: hidden;
-}
-.ctx-item:hover { background: var(--bg-hover); color: var(--text); }
-.ctx-item.ctx-danger:hover { background: var(--danger-bg, #fef2f2); color: var(--danger, #ef4444); }
-.ctx-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 12px; }
-.ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }
-.ctx-hint { font-size: 11px; color: var(--text-3); padding: 6px 10px; }
-
-/* Time labels inside project-grouped sidebar */
-.chat-time-label { padding-left: 12px; font-size: 10px; }
-
-/* ── Project Detail Panel (v0.19.1) ───────── */
-.project-panel { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
-.project-panel-section { display: flex; flex-direction: column; gap: 6px; }
-.project-panel-section-header { display: flex; justify-content: space-between; align-items: center; }
-.project-panel-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
-.project-panel-textarea {
-    width: 100%; resize: vertical; min-height: 80px; padding: 8px;
-    font-family: var(--font-mono, monospace); font-size: 13px;
-    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-    color: var(--text);
-}
-.project-panel-textarea:focus { outline: none; border-color: var(--accent); }
-.project-panel-status { font-size: 11px; margin-left: 8px; }
-.project-panel-status.success { color: var(--success, #22c55e); }
-.project-panel-status.error { color: var(--danger, #ef4444); }
-.project-panel-list { display: flex; flex-direction: column; gap: 2px; }
-.project-panel-item {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 6px 8px; border-radius: var(--radius);
-    background: var(--bg); border: 1px solid var(--border);
-    font-size: 13px;
-}
-.project-panel-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.project-panel-item-remove {
-    background: none; border: none; cursor: pointer; color: var(--text-3);
-    font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
-}
-.project-panel-item-remove:hover { color: var(--danger, #ef4444); background: var(--danger-bg, #fef2f2); }
-.project-panel-empty { font-size: 12px; color: var(--text-3); font-style: italic; padding: 4px 0; }
-.project-panel-select {
-    width: 100%; padding: 6px 8px; font-size: 13px;
-    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-    color: var(--text);
-}
-.project-panel-select:focus { outline: none; border-color: var(--accent); }
-.project-panel-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }
-.project-panel-ws-row { display: flex; gap: 6px; align-items: center; }
-.project-panel-ws-row select { flex: 1; }
-.project-panel-checkbox {
-    display: flex; align-items: center; gap: 8px; font-size: 13px;
-    cursor: pointer; color: var(--text-2);
-}
-.project-panel-checkbox input { cursor: pointer; }
-.project-panel-footer { padding-top: 8px; border-top: 1px solid var(--border); }
-.project-show-archived {
-    background: none; border: none; cursor: pointer;
-    font-size: 11px; color: var(--text-3); padding: 6px 10px;
-    width: 100%; text-align: left;
-}
-.project-show-archived:hover { color: var(--text-2); }
-.project-group.archived { opacity: 0.5; }
-.project-group.archived .project-header { font-style: italic; }
-
-/* ── Router Workspace Picker (v0.21.6) ──── */
-
-.router-picker-overlay {
-    position: fixed; inset: 0; z-index: 9999;
-    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
-    display: flex; align-items: center; justify-content: center;
-}
-.router-picker {
-    background: var(--bg-primary, #1a1a2e); color: var(--text, #e0e0e0);
-    border: 1px solid var(--border, #333); border-radius: 12px;
-    padding: 24px; min-width: 320px; max-width: 440px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-}
-.router-picker h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
-.router-picker p { margin: 0 0 16px; font-size: 13px; color: var(--text-2, #999); }
-.router-picker-list {
-    display: flex; flex-direction: column; gap: 4px;
-    max-height: 280px; overflow-y: auto; margin-bottom: 16px;
-}
-.router-picker-empty {
-    padding: 24px; text-align: center; color: var(--text-3, #666); font-size: 13px;
-}
-.router-picker-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 10px 12px; border: 1px solid var(--border, #333);
-    border-radius: 8px; background: none; color: var(--text, #e0e0e0);
-    cursor: pointer; font-size: 14px; text-align: left;
-    transition: background 0.15s, border-color 0.15s;
-}
-.router-picker-item:hover {
-    background: var(--hover, rgba(255,255,255,0.05));
-    border-color: var(--accent, #6366f1);
-}
-.router-picker-icon { font-size: 18px; flex-shrink: 0; }
-.router-picker-actions {
-    display: flex; gap: 8px; justify-content: flex-end;
-}
-
-/* ── Settings Surface ────────────────────── */
-
-.surface-settings {
-    display: flex; height: 100%; overflow: hidden;
-}
-.settings-topbar {
-    display: flex; align-items: center; gap: 12px;
-    padding: 10px 20px; border-bottom: 1px solid var(--border);
-    background: var(--bg-surface); flex-shrink: 0;
-}
-.settings-topbar-back {
-    display: flex; align-items: center; gap: 8px;
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-family: inherit; font-size: 13px;
-    padding: 4px 8px; border-radius: 6px; transition: color 0.12s;
-}
-.settings-topbar-back:hover { color: var(--text); }
-.settings-topbar-sep { width: 1px; height: 20px; background: var(--border); }
-.settings-topbar-title { font-size: 15px; font-weight: 600; }
-.settings-nav {
-    width: 220px; flex-shrink: 0;
-    border-right: 1px solid var(--border);
-    background: var(--bg-surface);
-    padding: 12px 8px; overflow-y: auto;
-    display: flex; flex-direction: column; gap: 2px;
-}
-.settings-nav-link {
-    display: flex; align-items: center; gap: 8px;
-    padding: 8px 12px; border-radius: 8px;
-    color: var(--text-2); text-decoration: none;
-    font-size: 13px; font-weight: 500; transition: all 0.12s;
-    border: none; background: none; cursor: pointer;
-    font-family: inherit; width: 100%; text-align: left;
-}
-.settings-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
-.settings-nav-link.active { background: var(--accent-dim); color: var(--accent); }
-.settings-nav-sep { margin: 8px 0; border-top: 1px solid var(--border); }
-.settings-nav-footer {
-    margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--border);
-}
-.settings-content { flex: 1; overflow-y: auto; padding: 28px; }
-.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
-.settings-section {
-    margin-bottom: 24px; padding: 20px;
-    background: var(--bg-surface); border-radius: 10px;
-    border: 1px solid var(--border);
-}
-.settings-section h3 {
-    font-size: 15px; font-weight: 600; margin: 0 0 16px;
-    padding-bottom: 10px; border-bottom: 1px solid var(--border);
-}
-.settings-placeholder {
-    padding: 40px 20px; color: var(--text-3);
-    text-align: center; font-size: 13px;
-}
-
-/* ── Admin Surface ───────────────────────── */
-
-.surface-admin {
-    display: flex; flex-direction: column; height: 100%; overflow: hidden;
-}
-.admin-topbar {
-    display: flex; align-items: center; gap: 12px;
-    padding: 10px 20px; border-bottom: 1px solid var(--border);
-    background: var(--bg-surface); flex-shrink: 0;
-}
-.admin-topbar-back {
-    display: flex; align-items: center; gap: 8px;
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-family: inherit; font-size: 13px;
-    padding: 4px 8px; border-radius: 6px; transition: color 0.12s;
-}
-.admin-topbar-back:hover { color: var(--text); }
-.admin-topbar-sep { width: 1px; height: 20px; background: var(--border); }
-.admin-topbar-title { font-size: 15px; font-weight: 600; }
-.admin-category-tabs {
-    display: flex; gap: 1px; padding: 3px;
-    background: var(--bg); border-radius: 10px;
-    border: 1px solid var(--border); margin-left: auto;
-}
-.admin-cat-btn {
-    display: flex; align-items: center; gap: 6px;
-    padding: 6px 14px; border-radius: 7px; border: none;
-    cursor: pointer; font-size: 13px; font-weight: 500;
-    font-family: inherit; background: transparent; color: var(--text-3);
-    transition: all 0.12s;
-}
-.admin-cat-btn.active { background: var(--bg-raised); color: var(--text); }
-.admin-cat-btn:hover { color: var(--text-2); }
-.admin-body { display: flex; flex: 1; min-height: 0; }
-.admin-nav {
-    width: 200px; background: var(--bg-surface);
-    border-right: 1px solid var(--border);
-    padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
-}
-.admin-nav-link {
-    display: flex; padding: 8px 12px; border-radius: 8px;
-    border: none; cursor: pointer; font-family: inherit;
-    font-size: 13px; font-weight: 500; width: 100%;
-    text-align: left; transition: all 0.12s;
-    background: transparent; color: var(--text-2);
-    text-decoration: none;
-}
-.admin-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
-.admin-nav-link.active { background: var(--accent-dim); color: var(--accent); }
-.admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.admin-content-header {
-    display: flex; align-items: center; gap: 12px;
-    padding: 14px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
-}
-.admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
-.admin-search {
-    display: flex; align-items: center; gap: 7px;
-    background: var(--input-bg, var(--bg)); border-radius: 8px;
-    padding: 6px 10px; border: 1px solid var(--border); width: 220px;
-}
-.admin-search input {
-    background: none; border: none; color: var(--text);
-    font-size: 12px; font-family: inherit; flex: 1; outline: none;
-}
-.admin-content-body { flex: 1; overflow-y: auto; padding: 24px; }
-
-/* ── Stat Cards ──────────────────────────── */
-.stat-cards { display: flex; gap: 12px; margin-bottom: 20px; }
-.stat-card {
-    padding: 16px 20px; background: var(--bg-surface);
-    border: 1px solid var(--border); border-radius: 10px; flex: 1;
-}
-.stat-card-value { font-size: 24px; font-weight: 700; }
-.stat-card-label { font-size: 12px; color: var(--text-2); margin-top: 2px; }
-.stat-card-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
-
-/* ── Data Tables ─────────────────────────── */
-.data-table { width: 100%; border-collapse: collapse; }
-.data-table th {
-    padding: 10px 14px; text-align: left; font-weight: 600;
-    font-size: 11px; color: var(--text-3); text-transform: uppercase;
-    letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
-}
-.data-table td {
-    padding: 10px 14px; font-size: 13px;
-    border-bottom: 1px solid var(--border);
-}
-.data-table tr:hover td { background: var(--bg-hover); }
-
-/* ── Editor Surface ──────────────────────── */
-
-.surface-editor {
-    display: flex; flex-direction: column; height: 100%; overflow: hidden;
-}
-.editor-topbar {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px; border-bottom: 1px solid var(--border);
-    background: var(--bg-surface); flex-shrink: 0;
-}
-.editor-topbar-back {
-    display: flex; align-items: center; gap: 8px;
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; font-family: inherit; font-size: 13px;
-    padding: 4px 8px; border-radius: 6px;
-}
-.editor-topbar-back:hover { color: var(--text); }
-.editor-body { display: flex; flex: 1; min-height: 0; }
-.editor-tree {
-    width: 220px; background: var(--bg-surface);
-    border-right: 1px solid var(--border);
-    display: flex; flex-direction: column; flex-shrink: 0;
-}
-.editor-tree-header {
-    padding: 8px 10px; border-bottom: 1px solid var(--border);
-    display: flex; align-items: center; gap: 6px;
-}
-.editor-tree-files { flex: 1; overflow-y: auto; padding: 4px 0; }
-.editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.editor-tabs {
-    display: flex; align-items: center;
-    background: var(--bg-raised); border-bottom: 1px solid var(--border);
-    flex-shrink: 0; overflow-x: auto; min-height: 33px;
-}
-.editor-tab {
-    display: flex; align-items: center; gap: 6px;
-    padding: 6px 12px; cursor: pointer; font-size: 12px;
-    white-space: nowrap; border-right: 1px solid var(--border);
-    background: transparent; color: var(--text-3);
-    border-bottom: 2px solid transparent;
-    border-top: none; border-left: none;
-    font-family: inherit;
-}
-.editor-tab.active {
-    background: var(--bg); color: var(--text);
-    border-bottom-color: var(--accent);
-}
-.editor-content { flex: 1; overflow: auto; }
-.editor-statusbar {
-    display: flex; align-items: center; gap: 14px;
-    padding: 3px 12px; background: var(--bg-surface);
-    border-top: 1px solid var(--border); flex-shrink: 0;
-    font-size: 11px; color: var(--text-3);
-    font-family: var(--mono);
-}
-.editor-chat {
-    display: flex; flex-direction: column;
-    min-width: 200px; background: var(--bg-surface);
-}
-.editor-chat-header {
-    padding: 8px 12px; border-bottom: 1px solid var(--border);
-    display: flex; align-items: center; gap: 8px;
-}
-.editor-chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
-.editor-chat-input {
-    padding: 8px 12px; border-top: 1px solid var(--border);
-}
-
-/* ── Shared Form Controls ────────────────── */
-
-.form-group { margin-bottom: 14px; }
-.form-group label {
-    display: block; font-size: 12px; font-weight: 500;
-    color: var(--text-2); margin-bottom: 5px;
-}
-.form-group input, .form-group select, .form-group textarea {
-    padding: 8px 12px; border-radius: 8px;
-    border: 1px solid var(--border);
-    background: var(--input-bg, var(--bg)); color: var(--text);
-    font-size: 13px; font-family: inherit;
-    width: 100%; max-width: 360px; outline: none;
-    transition: border-color 0.15s;
-}
-.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
-    border-color: var(--accent);
-}
-.form-group input:disabled { opacity: 0.6; }
-.form-group input[type="range"] { max-width: 100%; border: none; background: none; }
-.form-group input[type="range"]:focus { box-shadow: none; }
-.form-group input[type="checkbox"] { width: auto; max-width: none; accent-color: var(--accent); }
-
-.toggle-group {
-    display: flex; gap: 1px; padding: 3px;
-    background: var(--bg); border-radius: 10px;
-    border: 1px solid var(--border); width: fit-content;
-}
-.toggle-btn {
-    padding: 6px 14px; border: none; border-radius: 7px;
-    background: transparent; color: var(--text-3);
-    cursor: pointer; font-size: 12px; font-weight: 500;
-    font-family: inherit; transition: all 0.15s;
-}
-.toggle-btn.active { background: var(--bg-raised); color: var(--text); }
-.toggle-btn:hover { color: var(--text-2); }
-
-.btn-primary { background: var(--accent); color: #fff; border: none; }
-.btn-primary:hover { background: var(--accent-hover); }
-.btn-danger { background: var(--danger); color: #fff; border: none; }
-.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
-.btn-ghost:hover { background: var(--bg-hover); }
-.btn-subtle { background: var(--accent-dim); color: var(--accent); border: none; }
-.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 500; font-family: inherit; }
-.btn-md { padding: 7px 15px; font-size: 13px; border-radius: 8px; cursor: pointer; font-weight: 500; font-family: inherit; }
-
-/* ── Badge ───────────────────────────────── */
-.badge {
-    font-size: 10px; padding: 2px 7px; border-radius: 4px;
-    font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
-    display: inline-flex; align-items: center;
-}
-.badge-accent { background: var(--accent-dim); color: var(--accent); }
-.badge-success { background: var(--success-dim); color: var(--success); }
-.badge-warning { background: var(--warning-dim); color: var(--warning); }
-.badge-danger { background: var(--danger-dim); color: var(--danger); }
-.badge-muted { background: var(--bg-raised); color: var(--text-3); }
-
-/* ── Status Dot ──────────────────────────── */
-.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-.status-dot.healthy { background: var(--success); }
-.status-dot.degraded { background: var(--warning); }
-.status-dot.down { background: var(--danger); }
-.status-dot.disabled { background: var(--text-3); }
-
-/* ── Icon Button ─────────────────────────── */
-.icon-btn {
-    background: none; border: none; color: var(--text-3);
-    cursor: pointer; padding: 5px; border-radius: 7px;
-    display: flex; align-items: center; justify-content: center;
-    transition: all 0.15s;
-}
-.icon-btn:hover { background: var(--bg-hover); color: var(--text-2); }
-.icon-btn.active { color: var(--accent); }
-
-@media (max-width: 768px) {
-    .settings-nav { width: 160px; font-size: 12px; padding: 12px 8px; }
-    .settings-content { padding: 16px; }
-    .admin-nav { width: 160px; }
-    .admin-content-body { padding: 16px; }
-    .editor-tree { width: 180px; }
-}
+/* ── styles.css ──────────────────────────────
+   DECOMPOSED in v0.22.9 into:
+     variables.css   - Theme vars, reset, base
+     layout.css      - App shell, workspace, sidebar, responsive
+     primitives.css  - Buttons, forms, toasts, popups, toggles, badges
+     modals.css      - Modal system, debug, command palette, confirm
+     chat.css        - Chat area, markdown, input, files, lightbox
+     panels.css      - Side panel, preview, notes, graph
+     surfaces.css    - Admin, settings, editor, projects
+     splash.css      - Auth splash, PWA banner
+
+   All loaded via base.html. This file is no longer used.
+   ──────────────────────────────────────────── */
diff --git a/src/css/surfaces.css b/src/css/surfaces.css
new file mode 100644
index 0000000..29fe124
--- /dev/null
+++ b/src/css/surfaces.css
@@ -0,0 +1,429 @@
+/* ── surfaces.css ─────────────────────────────
+   Admin, settings, editor, projects, stat cards, data tables
+   ──────────────────────────────────────────── */
+
+/* ── Admin Storage Panel ────────────────────── */
+
+.admin-storage-card {
+    background: var(--bg-raised); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
+}
+.admin-storage-card h4 { margin: 0 0 10px 0; font-size: 14px; }
+.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 10px 0; }
+.admin-storage-grid {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+}
+.admin-storage-item { display: flex; flex-direction: column; gap: 2px; }
+.admin-storage-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
+.admin-storage-value { font-size: 14px; font-weight: 500; }
+
+
+/* =========================================
+   PROJECTS (v0.19.0)
+   ========================================= */
+
+.project-group {
+    margin-bottom: 2px;
+    border-radius: var(--radius);
+    transition: background 0.15s;
+}
+.project-group.drag-over {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    outline: 1px dashed var(--accent);
+    outline-offset: -1px;
+    border-radius: var(--radius);
+}
+
+.project-header {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 10px; cursor: pointer; user-select: none;
+    border-radius: var(--radius);
+    transition: background var(--transition);
+}
+.project-header:hover { background: var(--bg-hover); }
+
+.project-arrow {
+    font-size: 10px; color: var(--text-3); width: 12px; text-align: center; flex-shrink: 0;
+}
+.project-dot {
+    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+    background: var(--text-3); display: inline-block;
+}
+.project-name {
+    font-size: 12px; font-weight: 600; color: var(--text-2);
+    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.project-count {
+    font-size: 10px; color: var(--text-3); flex-shrink: 0; margin-left: auto;
+}
+.project-menu-btn {
+    opacity: 0; background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-size: 14px; padding: 0 4px; border-radius: 4px;
+    transition: opacity var(--transition), background var(--transition);
+    line-height: 1; flex-shrink: 0;
+}
+.project-header:hover .project-menu-btn { opacity: 1; }
+.project-header:hover .project-count { display: none; }
+.project-menu-btn:hover { background: var(--bg-raised); color: var(--text); }
+
+.project-empty {
+    font-size: 11px; color: var(--text-3); padding: 4px 10px 8px 28px;
+    font-style: italic;
+}
+
+/* Active project indicator (v0.19.1) */
+.project-group.active { border-left: 2px solid var(--accent); }
+.project-group.active .project-header { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+.project-pin { font-size: 10px; margin-left: 2px; opacity: 0.7; }
+
+.sidebar.collapsed .project-group { display: none; }
+.sidebar.collapsed .recent-section .chat-group-label { display: none; }
+
+/* Recent section drop target */
+.recent-section { min-height: 40px; }
+.recent-section.drag-over {
+    background: color-mix(in srgb, var(--accent) 8%, transparent);
+    border-radius: var(--radius);
+}
+
+/* Dragging state */
+.chat-item.dragging { opacity: 0.4; }
+.chat-item[draggable="true"] { cursor: grab; }
+.chat-item[draggable="true"]:active { cursor: grabbing; }
+
+/* Context menu */
+.project-ctx-menu {
+    position: fixed; z-index: 9999;
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius); box-shadow: var(--shadow);
+    padding: 4px; min-width: 160px; max-width: 220px;
+}
+.ctx-item {
+    display: flex; align-items: center; gap: 8px;
+    width: 100%; padding: 7px 10px; border: none; background: none;
+    color: var(--text-2); font-size: 13px; cursor: pointer;
+    border-radius: calc(var(--radius) - 2px); text-align: left;
+    white-space: nowrap; overflow: hidden;
+}
+.ctx-item:hover { background: var(--bg-hover); color: var(--text); }
+.ctx-item.ctx-danger:hover { background: var(--danger-bg, #fef2f2); color: var(--danger, #ef4444); }
+.ctx-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 12px; }
+.ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }
+.ctx-hint { font-size: 11px; color: var(--text-3); padding: 6px 10px; }
+
+/* Time labels inside project-grouped sidebar */
+.chat-time-label { padding-left: 12px; font-size: 10px; }
+
+/* ── Project Detail Panel (v0.19.1) ───────── */
+.project-panel { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
+.project-panel-section { display: flex; flex-direction: column; gap: 6px; }
+.project-panel-section-header { display: flex; justify-content: space-between; align-items: center; }
+.project-panel-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
+.project-panel-textarea {
+    width: 100%; resize: vertical; min-height: 80px; padding: 8px;
+    font-family: var(--font-mono, monospace); font-size: 13px;
+    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+    color: var(--text);
+}
+.project-panel-textarea:focus { outline: none; border-color: var(--accent); }
+.project-panel-status { font-size: 11px; margin-left: 8px; }
+.project-panel-status.success { color: var(--success, #22c55e); }
+.project-panel-status.error { color: var(--danger, #ef4444); }
+.project-panel-list { display: flex; flex-direction: column; gap: 2px; }
+.project-panel-item {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 6px 8px; border-radius: var(--radius);
+    background: var(--bg); border: 1px solid var(--border);
+    font-size: 13px;
+}
+.project-panel-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.project-panel-item-remove {
+    background: none; border: none; cursor: pointer; color: var(--text-3);
+    font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
+}
+.project-panel-item-remove:hover { color: var(--danger, #ef4444); background: var(--danger-bg, #fef2f2); }
+.project-panel-empty { font-size: 12px; color: var(--text-3); font-style: italic; padding: 4px 0; }
+.project-panel-select {
+    width: 100%; padding: 6px 8px; font-size: 13px;
+    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+    color: var(--text);
+}
+.project-panel-select:focus { outline: none; border-color: var(--accent); }
+.project-panel-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }
+.project-panel-ws-row { display: flex; gap: 6px; align-items: center; }
+.project-panel-ws-row select { flex: 1; }
+.project-panel-checkbox {
+    display: flex; align-items: center; gap: 8px; font-size: 13px;
+    cursor: pointer; color: var(--text-2);
+}
+.project-panel-checkbox input { cursor: pointer; }
+.project-panel-footer { padding-top: 8px; border-top: 1px solid var(--border); }
+.project-show-archived {
+    background: none; border: none; cursor: pointer;
+    font-size: 11px; color: var(--text-3); padding: 6px 10px;
+    width: 100%; text-align: left;
+}
+.project-show-archived:hover { color: var(--text-2); }
+.project-group.archived { opacity: 0.5; }
+.project-group.archived .project-header { font-style: italic; }
+
+/* ── Router Workspace Picker (v0.21.6) ──── */
+
+.router-picker-overlay {
+    position: fixed; inset: 0; z-index: 9999;
+    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
+    display: flex; align-items: center; justify-content: center;
+}
+.router-picker {
+    background: var(--bg-primary, #1a1a2e); color: var(--text, #e0e0e0);
+    border: 1px solid var(--border, #333); border-radius: 12px;
+    padding: 24px; min-width: 320px; max-width: 440px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+}
+.router-picker h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
+.router-picker p { margin: 0 0 16px; font-size: 13px; color: var(--text-2, #999); }
+.router-picker-list {
+    display: flex; flex-direction: column; gap: 4px;
+    max-height: 280px; overflow-y: auto; margin-bottom: 16px;
+}
+.router-picker-empty {
+    padding: 24px; text-align: center; color: var(--text-3, #666); font-size: 13px;
+}
+.router-picker-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 10px 12px; border: 1px solid var(--border, #333);
+    border-radius: 8px; background: none; color: var(--text, #e0e0e0);
+    cursor: pointer; font-size: 14px; text-align: left;
+    transition: background 0.15s, border-color 0.15s;
+}
+.router-picker-item:hover {
+    background: var(--hover, rgba(255,255,255,0.05));
+    border-color: var(--accent, #6366f1);
+}
+.router-picker-icon { font-size: 18px; flex-shrink: 0; }
+.router-picker-actions {
+    display: flex; gap: 8px; justify-content: flex-end;
+}
+
+/* ── Settings Surface ────────────────────── */
+
+.surface-settings {
+    display: flex; height: 100%; overflow: hidden;
+}
+.settings-topbar {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 20px; border-bottom: 1px solid var(--border);
+    background: var(--bg-surface); flex-shrink: 0;
+}
+.settings-topbar-back {
+    display: flex; align-items: center; gap: 8px;
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-family: inherit; font-size: 13px;
+    padding: 4px 8px; border-radius: 6px; transition: color 0.12s;
+}
+.settings-topbar-back:hover { color: var(--text); }
+.settings-topbar-sep { width: 1px; height: 20px; background: var(--border); }
+.settings-topbar-title { font-size: 15px; font-weight: 600; }
+.settings-nav {
+    width: 220px; flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    background: var(--bg-surface);
+    padding: 12px 8px; overflow-y: auto;
+    display: flex; flex-direction: column; gap: 2px;
+}
+.settings-nav-link {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; border-radius: 8px;
+    color: var(--text-2); text-decoration: none;
+    font-size: 13px; font-weight: 500; transition: all 0.12s;
+    border: none; background: none; cursor: pointer;
+    font-family: inherit; width: 100%; text-align: left;
+}
+.settings-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
+.settings-nav-link.active { background: var(--accent-dim); color: var(--accent); }
+.settings-nav-sep { margin: 8px 0; border-top: 1px solid var(--border); }
+.settings-nav-footer {
+    margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--border);
+}
+.settings-content { flex: 1; overflow-y: auto; padding: 28px; }
+.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
+.settings-section {
+    margin-bottom: 24px; padding: 20px;
+    background: var(--bg-surface); border-radius: 10px;
+    border: 1px solid var(--border);
+}
+.settings-section h3 {
+    font-size: 15px; font-weight: 600; margin: 0 0 16px;
+    padding-bottom: 10px; border-bottom: 1px solid var(--border);
+}
+.settings-placeholder {
+    padding: 40px 20px; color: var(--text-3);
+    text-align: center; font-size: 13px;
+}
+
+/* ── Admin Surface ───────────────────────── */
+
+.surface-admin {
+    display: flex; flex-direction: column; height: 100%; overflow: hidden;
+}
+.admin-topbar {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 20px; border-bottom: 1px solid var(--border);
+    background: var(--bg-surface); flex-shrink: 0;
+}
+.admin-topbar-back {
+    display: flex; align-items: center; gap: 8px;
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-family: inherit; font-size: 13px;
+    padding: 4px 8px; border-radius: 6px; transition: color 0.12s;
+}
+.admin-topbar-back:hover { color: var(--text); }
+.admin-topbar-sep { width: 1px; height: 20px; background: var(--border); }
+.admin-topbar-title { font-size: 15px; font-weight: 600; }
+.admin-category-tabs {
+    display: flex; gap: 1px; padding: 3px;
+    background: var(--bg); border-radius: 10px;
+    border: 1px solid var(--border); margin-left: auto;
+}
+.admin-cat-btn {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 14px; border-radius: 7px; border: none;
+    cursor: pointer; font-size: 13px; font-weight: 500;
+    font-family: inherit; background: transparent; color: var(--text-3);
+    transition: all 0.12s;
+}
+.admin-cat-btn.active { background: var(--bg-raised); color: var(--text); }
+.admin-cat-btn:hover { color: var(--text-2); }
+.admin-body { display: flex; flex: 1; min-height: 0; }
+.admin-nav {
+    width: 200px; background: var(--bg-surface);
+    border-right: 1px solid var(--border);
+    padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
+}
+.admin-nav-link {
+    display: flex; padding: 8px 12px; border-radius: 8px;
+    border: none; cursor: pointer; font-family: inherit;
+    font-size: 13px; font-weight: 500; width: 100%;
+    text-align: left; transition: all 0.12s;
+    background: transparent; color: var(--text-2);
+    text-decoration: none;
+}
+.admin-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
+.admin-nav-link.active { background: var(--accent-dim); color: var(--accent); }
+.admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.admin-content-header {
+    display: flex; align-items: center; gap: 12px;
+    padding: 14px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+.admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
+.admin-search {
+    display: flex; align-items: center; gap: 7px;
+    background: var(--input-bg, var(--bg)); border-radius: 8px;
+    padding: 6px 10px; border: 1px solid var(--border); width: 220px;
+}
+.admin-search input {
+    background: none; border: none; color: var(--text);
+    font-size: 12px; font-family: inherit; flex: 1; outline: none;
+}
+.admin-content-body { flex: 1; overflow-y: auto; padding: 24px; }
+
+/* ── Stat Cards ──────────────────────────── */
+.stat-cards { display: flex; gap: 12px; margin-bottom: 20px; }
+.stat-card {
+    padding: 16px 20px; background: var(--bg-surface);
+    border: 1px solid var(--border); border-radius: 10px; flex: 1;
+}
+.stat-card-value { font-size: 24px; font-weight: 700; }
+.stat-card-label { font-size: 12px; color: var(--text-2); margin-top: 2px; }
+.stat-card-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
+
+/* ── Data Tables ─────────────────────────── */
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table th {
+    padding: 10px 14px; text-align: left; font-weight: 600;
+    font-size: 11px; color: var(--text-3); text-transform: uppercase;
+    letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
+}
+.data-table td {
+    padding: 10px 14px; font-size: 13px;
+    border-bottom: 1px solid var(--border);
+}
+.data-table tr:hover td { background: var(--bg-hover); }
+
+/* ── Editor Surface ──────────────────────── */
+
+.surface-editor {
+    display: flex; flex-direction: column; height: 100%; overflow: hidden;
+}
+.editor-topbar {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 12px; border-bottom: 1px solid var(--border);
+    background: var(--bg-surface); flex-shrink: 0;
+}
+.editor-topbar-back {
+    display: flex; align-items: center; gap: 8px;
+    background: none; border: none; color: var(--text-3);
+    cursor: pointer; font-family: inherit; font-size: 13px;
+    padding: 4px 8px; border-radius: 6px;
+}
+.editor-topbar-back:hover { color: var(--text); }
+.editor-body { display: flex; flex: 1; min-height: 0; }
+.editor-tree {
+    width: 220px; background: var(--bg-surface);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column; flex-shrink: 0;
+}
+.editor-tree-header {
+    padding: 8px 10px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: 6px;
+}
+.editor-tree-files { flex: 1; overflow-y: auto; padding: 4px 0; }
+.editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.editor-tabs {
+    display: flex; align-items: center;
+    background: var(--bg-raised); border-bottom: 1px solid var(--border);
+    flex-shrink: 0; overflow-x: auto; min-height: 33px;
+}
+.editor-tab {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 12px; cursor: pointer; font-size: 12px;
+    white-space: nowrap; border-right: 1px solid var(--border);
+    background: transparent; color: var(--text-3);
+    border-bottom: 2px solid transparent;
+    border-top: none; border-left: none;
+    font-family: inherit;
+}
+.editor-tab.active {
+    background: var(--bg); color: var(--text);
+    border-bottom-color: var(--accent);
+}
+.editor-content { flex: 1; overflow: auto; }
+.editor-statusbar {
+    display: flex; align-items: center; gap: 14px;
+    padding: 3px 12px; background: var(--bg-surface);
+    border-top: 1px solid var(--border); flex-shrink: 0;
+    font-size: 11px; color: var(--text-3);
+    font-family: var(--mono);
+}
+.editor-chat {
+    display: flex; flex-direction: column;
+    min-width: 200px; background: var(--bg-surface);
+}
+.editor-chat-header {
+    padding: 8px 12px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: 8px;
+}
+.editor-chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
+.editor-chat-input {
+    padding: 8px 12px; border-top: 1px solid var(--border);
+}
+
+
+@media (max-width: 768px) {
+    .settings-nav { width: 160px; font-size: 12px; padding: 12px 8px; }
+    .settings-content { padding: 16px; }
+    .admin-nav { width: 160px; }
+    .admin-content-body { padding: 16px; }
+    .editor-tree { width: 180px; }
+}
diff --git a/src/css/variables.css b/src/css/variables.css
new file mode 100644
index 0000000..677b939
--- /dev/null
+++ b/src/css/variables.css
@@ -0,0 +1,124 @@
+/* ── variables.css ────────────────────────────
+   Theme variables, reset, base styles
+   ──────────────────────────────────────────── */
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ==========================================
+   Chat Switchboard
+   Clean utility layout · Open WebUI inspired
+   ========================================== */
+
+:root {
+    /* ── Core palette (Dark — default) ────────── */
+    --bg:           #0e0e10;
+    --bg-surface:   #18181b;
+    --bg-raised:    #222227;
+    --bg-hover:     #2a2a30;
+    --border:       #2e2e35;
+    --border-light: #3a3a42;
+    --text:         #e8e8ed;
+    --text-2:       #9898a8;
+    --text-3:       #6b6b7b;
+    --accent:       #6c9fff;
+    --accent-hover: #84b0ff;
+    --accent-dim:   rgba(108,159,255,0.12);
+    --danger:       #ef4444;
+    --success:      #22c55e;
+    --warning:      #eab308;
+    --purple:       #a78bfa;
+    --purple-dim:   rgba(167,139,250,0.10);
+
+    /* ── Contrast text for solid-color backgrounds ── */
+    --text-on-color:   #fff;
+    --text-on-warning: #000;
+
+    /* ── Light variants (badge/pill text on dim backgrounds) ── */
+    --accent-light:  #93c5fd;
+    --danger-light:  #f87171;
+    --success-light: #4ade80;
+    --warning-light: #fbbf24;
+
+    /* ── Dim variants (badge/pill backgrounds) ── */
+    --danger-dim:    rgba(239,68,68,0.2);
+    --success-dim:   rgba(34,197,94,0.2);
+    --warning-dim:   rgba(234,179,8,0.2);
+
+    /* ── Surfaces ────────────────────────────── */
+    --overlay:       rgba(0,0,0,0.55);
+    --glass:         rgba(255,255,255,0.03);
+    --input-bg:      #1a1a1f;
+    --user-bubble:   rgba(108,159,255,0.08);
+    --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
+
+    /* ── Layout ──────────────────────────────── */
+    --radius:       8px;
+    --radius-lg:    12px;
+    --sidebar-w:    260px;
+    --sidebar-rail: 52px;
+    --font:         'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --mono:         'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    --transition:   180ms ease;
+
+    /* Banner system — set by JS from /api/v1/admin/settings/banner */
+    --banner-top-height: 0px;
+    --banner-bottom-height: 0px;
+    --banner-bg: transparent;
+    --banner-fg: transparent;
+}
+
+/* ── Light Theme ─────────────────────────────── */
+[data-theme="light"] {
+    --bg:           #f7f7fa;
+    --bg-surface:   #ffffff;
+    --bg-raised:    #eff0f3;
+    --bg-hover:     #e5e6eb;
+    --border:       #d5d6dc;
+    --border-light: #c2c3cb;
+    --text:         #1a1a2e;
+    --text-2:       #555770;
+    --text-3:       #8b8da3;
+    --accent:       #4a7cdb;
+    --accent-hover: #3968c4;
+    --accent-dim:   rgba(74,124,219,0.09);
+    --danger:       #dc2626;
+    --success:      #16a34a;
+    --warning:      #ca8a04;
+    --purple:       #7c3aed;
+    --purple-dim:   rgba(124,58,237,0.08);
+
+    --text-on-color:   #fff;
+    --text-on-warning: #000;
+
+    --accent-light:  #2563eb;
+    --danger-light:  #dc2626;
+    --success-light: #16a34a;
+    --warning-light: #ca8a04;
+
+    --danger-dim:    rgba(220,38,38,0.09);
+    --success-dim:   rgba(22,163,74,0.09);
+    --warning-dim:   rgba(202,138,4,0.09);
+
+    --overlay:       rgba(0,0,0,0.25);
+    --glass:         rgba(0,0,0,0.02);
+    --input-bg:      #f2f3f6;
+    --user-bubble:   rgba(74,124,219,0.06);
+    --shadow-lg:     0 8px 32px rgba(0,0,0,0.1);
+
+    color-scheme: light;
+}
+
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; }
+body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }
+
+/* Global scrollbar styling */
+* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+::selection { background: var(--accent-dim); }
+
diff --git a/src/js/app.js b/src/js/app.js
index 56ef0e9..3855569 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -117,6 +117,11 @@ async function startApp() {
         }
     } catch (_) {}
 
+    // If no chat was restored, show the welcome/empty state
+    if (!App.currentChatId) {
+        UI.showEmptyState();
+    }
+
     UI.updateUser();
     UI.showAdminButton(API.isAdmin);
     initListeners();
@@ -125,6 +130,12 @@ async function startApp() {
     try {
         Events.connect((window.__BASE__ || '') + '/ws');
 
+        // Once WS connects, re-fetch tools so browser extension tools appear
+        // (ToolsToggle.init runs before WS is up → server omits browser tools)
+        Events.on('ws.connected', () => {
+            if (typeof ToolsToggle !== 'undefined') ToolsToggle.refresh();
+        });
+
         // Admin-only: persistent fallback alert banner (v0.17.0)
         Events.on('role.fallback', (payload) => {
             if (App.user?.role !== 'admin') return;
@@ -161,80 +172,6 @@ function showFallbackBanner(data) {
 
 // ── Modal Helpers ───────────────────────────
 
-function openModal(id) {
-    const el = document.getElementById(id);
-    if (!el) return;
-    el.classList.add('active');
-    // Defer overflow check — browser needs a frame to lay out the modal
-    requestAnimationFrame(() => {
-        el.querySelectorAll('.modal-tabs').forEach(checkTabsOverflow);
-    });
-}
-
-function closeModal(id) {
-    const el = document.getElementById(id);
-    if (el) el.classList.remove('active');
-}
-
-// Toggle .is-scrollable on tab bars that overflow horizontally
-// and inject arrow navigation buttons when needed.
-function checkTabsOverflow(tabs) {
-    if (!tabs) return;
-    const scrollable = tabs.scrollWidth > tabs.clientWidth + 1;
-
-    if (!scrollable) {
-        // Remove wrapper if overflow went away (e.g. zoom decreased)
-        const wrap = tabs.parentElement;
-        if (wrap && wrap.classList.contains('modal-tabs-wrap')) {
-            wrap.parentElement.insertBefore(tabs, wrap);
-            wrap.remove();
-        }
-        return;
-    }
-
-    // Wrap if not already wrapped
-    if (!tabs.parentElement.classList.contains('modal-tabs-wrap')) {
-        const wrap = document.createElement('div');
-        wrap.className = 'modal-tabs-wrap';
-        tabs.parentElement.insertBefore(wrap, tabs);
-        wrap.appendChild(tabs);
-
-        // Inject arrows
-        const left = document.createElement('button');
-        left.className = 'tab-arrow tab-arrow-left';
-        left.innerHTML = '&#x2039;';
-        left.addEventListener('click', () => { tabs.scrollLeft -= 120; });
-
-        const right = document.createElement('button');
-        right.className = 'tab-arrow tab-arrow-right';
-        right.innerHTML = '&#x203A;';
-        right.addEventListener('click', () => { tabs.scrollLeft += 120; });
-
-        wrap.appendChild(left);
-        wrap.appendChild(right);
-
-        // Update arrow visibility on scroll
-        tabs.addEventListener('scroll', () => updateTabArrows(tabs), { passive: true });
-    }
-
-    updateTabArrows(tabs);
-}
-
-function updateTabArrows(tabs) {
-    const wrap = tabs.parentElement;
-    if (!wrap || !wrap.classList.contains('modal-tabs-wrap')) return;
-
-    const left = wrap.querySelector('.tab-arrow-left');
-    const right = wrap.querySelector('.tab-arrow-right');
-    if (!left || !right) return;
-
-    const atStart = tabs.scrollLeft <= 2;
-    const atEnd = tabs.scrollLeft + tabs.clientWidth >= tabs.scrollWidth - 2;
-
-    left.classList.toggle('visible', !atStart);
-    right.classList.toggle('visible', !atEnd);
-}
-
 // ── Auth Flow ────────────────────────────────
 
 function showSplash(health) {
diff --git a/src/js/tools-toggle.js b/src/js/tools-toggle.js
index a35b575..6a57589 100644
--- a/src/js/tools-toggle.js
+++ b/src/js/tools-toggle.js
@@ -14,6 +14,9 @@ const ToolsToggle = (() => {
         knowledge: { label: 'Knowledge Bases', icon: '📚' },
         notes:     { label: 'Notes',           icon: '📝' },
         utilities: { label: 'Utilities',       icon: '🧮' },
+        workspace: { label: 'Workspace',       icon: '🗂️' },
+        context:   { label: 'Context',         icon: '📎' },
+        memory:    { label: 'Memory',          icon: '🧠' },
         browser:   { label: 'Extensions',      icon: '🧩' },
     };
 
@@ -157,14 +160,15 @@ const ToolsToggle = (() => {
             const state = _categoryState(cat);
             const tools = _categories[cat];
             const expanded = _expanded.has(cat);
-            const stateClass = state === 'all' ? 'enabled' : state === 'partial' ? 'partial' : '';
+            const switchClass = state === 'all' ? 'on' : state === 'partial' ? 'on partial' : '';
             const chevron = tools.length > 1
                 ? `<span class="tools-popup-expand ${expanded ? 'open' : ''}" data-expand="${cat}">›</span>`
                 : '';
+            const labelExpand = tools.length > 1 ? ` data-expand="${cat}"` : '';
 
-            html += `<div class="tools-popup-category ${stateClass}" data-category="${cat}">
-                <span class="tools-popup-check"></span>
-                <span class="tools-popup-label">${meta.icon} ${meta.label}</span>
+            html += `<div class="tools-popup-category" data-category="${cat}">
+                <span class="tools-popup-switch ${switchClass}" data-switch="${cat}"><span class="tools-popup-switch-knob"></span></span>
+                <span class="tools-popup-label"${labelExpand}>${meta.icon} ${meta.label}</span>
                 ${chevron}
             </div>`;
 
@@ -172,8 +176,8 @@ const ToolsToggle = (() => {
             if (expanded && tools.length > 1) {
                 for (const t of tools) {
                     const on = !_disabled.has(t.name);
-                    html += `<div class="tools-popup-tool ${on ? 'enabled' : ''}" data-tool="${t.name}">
-                        <span class="tools-popup-check"></span>
+                    html += `<div class="tools-popup-tool" data-tool="${t.name}">
+                        <span class="tools-popup-switch ${on ? 'on' : ''}" data-tool-switch="${t.name}"><span class="tools-popup-switch-knob"></span></span>
                         <span class="tools-popup-label">${t.displayName}</span>
                     </div>`;
                 }
@@ -196,23 +200,40 @@ const ToolsToggle = (() => {
         popup.addEventListener('click', (e) => {
             e.stopPropagation();
 
-            // Expand/collapse chevron
-            const expander = e.target.closest('.tools-popup-expand');
+            // Toggle switch on category row
+            const catSwitch = e.target.closest('[data-switch]');
+            if (catSwitch) {
+                _toggleCategory(catSwitch.dataset.switch);
+                return;
+            }
+
+            // Toggle switch on individual tool row
+            const toolSwitch = e.target.closest('[data-tool-switch]');
+            if (toolSwitch) {
+                _toggleTool(toolSwitch.dataset.toolSwitch);
+                return;
+            }
+
+            // Expand/collapse: chevron or label click on multi-tool categories
+            const expander = e.target.closest('[data-expand]');
             if (expander) {
                 _toggleExpand(expander.dataset.expand);
                 return;
             }
 
-            // Individual tool toggle
+            // Individual tool label (no expand, just toggle)
             const toolRow = e.target.closest('.tools-popup-tool');
             if (toolRow) {
                 _toggleTool(toolRow.dataset.tool);
                 return;
             }
 
-            // Category toggle
+            // Single-tool category label click (no chevron) — toggle
             const catRow = e.target.closest('.tools-popup-category');
-            if (catRow) _toggleCategory(catRow.dataset.category);
+            if (catRow) {
+                _toggleCategory(catRow.dataset.category);
+                return;
+            }
         });
 
         // Close on outside click
diff --git a/src/js/ui-core.js b/src/js/ui-core.js
index 786008d..45c1e07 100644
--- a/src/js/ui-core.js
+++ b/src/js/ui-core.js
@@ -539,9 +539,10 @@ const UI = {
     },
 
     showEmptyState() {
+        var base = window.__BASE__ || '';
         document.getElementById('chatMessages').innerHTML = `
             <div class="empty-state">
-                <div class="empty-logo"><img src="favicon-256.png" class="empty-logo-img" alt=""></div>
+                <div class="empty-logo"><img src="${base}/favicon-256.png" class="empty-logo-img" alt=""></div>
                 <h2>Chat Switchboard</h2>
                 <p>Select a model and start chatting</p>
             </div>`;
@@ -995,6 +996,8 @@ const UI = {
 
     showAdminButton(show) {
         document.getElementById('menuAdmin').style.display = show ? '' : 'none';
+        var dbg = document.getElementById('menuDebug');
+        if (dbg) dbg.style.display = show ? '' : 'none';
     },
 
     // ── Generating State ─────────────────────
diff --git a/src/js/ui-format.js b/src/js/ui-format.js
index 84f3963..558d9df 100644
--- a/src/js/ui-format.js
+++ b/src/js/ui-format.js
@@ -348,13 +348,18 @@ function popOutExtBlock(blockId) {
 
     const lang = block.getAttribute('data-ext-lang') || '';
 
+    // Read current theme colors so the iframe respects light/dark mode
+    const cs = getComputedStyle(document.documentElement);
+    const bgColor = cs.getPropertyValue('--bg-surface').trim() || '#fff';
+    const textColor = cs.getPropertyValue('--text').trim() || '#1a1a2e';
+
     // Wrap in a minimal HTML document for the iframe
     const html = `<!DOCTYPE html>
 <html><head>
 <meta charset="utf-8">
 <style>
   body { margin: 0; padding: 16px; display: flex; justify-content: center;
-         align-items: flex-start; min-height: 100vh; background: #fff;
+         align-items: flex-start; min-height: 100vh; background: ${bgColor}; color: ${textColor};
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
   body > * { max-width: 100%; }
   svg { max-width: 100%; height: auto; }
diff --git a/src/js/ui-primitives.js b/src/js/ui-primitives.js
index 610c6aa..c3630e8 100644
--- a/src/js/ui-primitives.js
+++ b/src/js/ui-primitives.js
@@ -791,3 +791,77 @@ function showConfirm(message, opts = {}) {
         overlay.querySelector('[data-action="cancel"]').focus();
     });
 }
+
+// ── Modal open/close ────────────────────────
+// Generic modal show/hide used by settings, admin, debug, team-admin modals.
+// Moved here from app.js so all surfaces (not just chat) can use modals.
+
+function openModal(id) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.add('active');
+    // Defer overflow check — browser needs a frame to lay out the modal
+    requestAnimationFrame(() => {
+        el.querySelectorAll('.modal-tabs').forEach(checkTabsOverflow);
+    });
+}
+
+function closeModal(id) {
+    const el = document.getElementById(id);
+    if (el) el.classList.remove('active');
+}
+
+// Toggle .is-scrollable on tab bars that overflow horizontally
+// and inject arrow navigation buttons when needed.
+function checkTabsOverflow(tabs) {
+    if (!tabs) return;
+    const scrollable = tabs.scrollWidth > tabs.clientWidth + 1;
+
+    if (!scrollable) {
+        const wrap = tabs.parentElement;
+        if (wrap && wrap.classList.contains('modal-tabs-wrap')) {
+            wrap.parentElement.insertBefore(tabs, wrap);
+            wrap.remove();
+        }
+        return;
+    }
+
+    if (!tabs.parentElement.classList.contains('modal-tabs-wrap')) {
+        const wrap = document.createElement('div');
+        wrap.className = 'modal-tabs-wrap';
+        tabs.parentElement.insertBefore(wrap, tabs);
+        wrap.appendChild(tabs);
+
+        const left = document.createElement('button');
+        left.className = 'tab-arrow tab-arrow-left';
+        left.innerHTML = '&#x2039;';
+        left.addEventListener('click', () => { tabs.scrollLeft -= 120; });
+
+        const right = document.createElement('button');
+        right.className = 'tab-arrow tab-arrow-right';
+        right.innerHTML = '&#x203A;';
+        right.addEventListener('click', () => { tabs.scrollLeft += 120; });
+
+        wrap.appendChild(left);
+        wrap.appendChild(right);
+
+        tabs.addEventListener('scroll', () => updateTabArrows(tabs), { passive: true });
+    }
+
+    updateTabArrows(tabs);
+}
+
+function updateTabArrows(tabs) {
+    const wrap = tabs.parentElement;
+    if (!wrap || !wrap.classList.contains('modal-tabs-wrap')) return;
+
+    const left = wrap.querySelector('.tab-arrow-left');
+    const right = wrap.querySelector('.tab-arrow-right');
+    if (!left || !right) return;
+
+    const atStart = tabs.scrollLeft <= 2;
+    const atEnd = tabs.scrollLeft + tabs.clientWidth >= tabs.scrollWidth - 2;
+
+    left.classList.toggle('visible', !atStart);
+    right.classList.toggle('visible', !atEnd);
+}
diff --git a/src/sw.js b/src/sw.js
index 9d24277..13aa20e 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -15,7 +15,14 @@ const CACHE_NAME = 'switchboard-%%APP_VERSION%%-%%BUILD_HASH%%';
 const SHELL_FILES = [
     './',
     './index.html',
-    './css/styles.css',
+    './css/variables.css',
+    './css/layout.css',
+    './css/primitives.css',
+    './css/modals.css',
+    './css/chat.css',
+    './css/panels.css',
+    './css/surfaces.css',
+    './css/splash.css',
     './js/debug.js',
     './js/events.js',
     './js/extensions.js',