@sean.holung/minicode 0.3.8 → 0.3.10

package/dist/src/web/style.css

@@ -1,3 +1,9 @@
+/* ─────────────────────────────────────────────────────────────────────────
+   minicode web app — style.css
+   Facelift: teal accent, tightened token system, editorial header,
+   grouped toolbar, polished chat + symbol detail. No class names changed.
+───────────────────────────────────────────────────────────────────────── */
+
 *, *::before, *::after {
   margin: 0;
   padding: 0;
@@ -5,19 +11,42 @@
 }
 
 :root {
-  --bg: #1a1b26;
-  --bg-surface: #222336;
-  --bg-hover: #2a2b3d;
-  --text: #c0caf5;
-  --text-dim: #565f89;
-  --accent: #7aa2f7;
-  --accent-dim: #3d59a1;
-  --green: #9ece6a;
-  --yellow: #e0af68;
-  --red: #f7768e;
-  --border: #33354a;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  /* ── Base palette ────────────────────────────────────────────────── */
+  --bg:          #0f1118;
+  --bg-surface:  #161921;
+  --bg-hover:    #1d2130;
+  --bg-2:        #1a1e2a;
+
+  /* ── Text ────────────────────────────────────────────────────────── */
+  --text:        #d8dff5;
+  --text-dim:    #5a6380;
+  --text-mid:    #8d96b8;
+
+  /* ── Accent (teal — matches landing page) ────────────────────────── */
+  --accent:      #56c8d8;
+  --accent-dim:  #1e4a52;
+  --accent-soft: rgba(86, 200, 216, 0.12);
+  --accent-line: rgba(86, 200, 216, 0.28);
+
+  /* ── Semantic colors ─────────────────────────────────────────────── */
+  --green:  #7dcea0;
+  --yellow: #d4a84b;
+  --red:    #e06c75;
+  --purple: #9d8cff;
+
+  /* ── Borders / surfaces ──────────────────────────────────────────── */
+  --border:      rgba(255, 255, 255, 0.07);
+  --border-mid:  rgba(255, 255, 255, 0.12);
+
+  /* ── Radii — locked to 3 sizes ───────────────────────────────────── */
+  --r-sm:  4px;
+  --r-md:  8px;
+  --r-lg:  12px;
+  --r-xl:  16px;
+
+  /* ── Type ────────────────────────────────────────────────────────── */
+  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
+  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
 html, body {
@@ -25,13 +54,12 @@ html, body {
   background: var(--bg);
   color: var(--text);
   font-family: var(--font-mono);
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
 }
 
-body.modal-open {
-  overflow: hidden;
-}
+body.modal-open { overflow: hidden; }
 
 #app {
   display: flex;
@@ -39,356 +67,428 @@ body.modal-open {
   height: 100vh;
 }
 
-/* Header */
+/* ── Header ─────────────────────────────────────────────────────────── */
 header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: 0 16px;
+  height: 52px;
   border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
   flex-shrink: 0;
+  gap: 12px;
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
 }
 
+/* Logo — wordmark with graph glyph */
 h1 {
-  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-mono);
+  font-size: 13px;
   font-weight: 600;
-  color: var(--accent);
+  letter-spacing: 0.04em;
+  color: var(--text);
 }
 
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+h1 .logo-glyph {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--accent);
 }
 
-#model-info {
-  font-size: 12px;
-  color: var(--text-dim);
+h1 .logo-glyph svg {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
-#model-info.placeholder {
-  color: var(--text-dim);
-  opacity: 0.5;
-  font-style: italic;
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-/* Model menu */
+/* Model selector button — gets a more prominent pill */
 .model-menu {
   position: relative;
 }
 
 #model-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
-}
-
-#model-dropdown {
-  width: min(420px, calc(100vw - 32px));
-  max-height: 360px;
-}
-
-#model-search {
-  width: 100%;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text);
+  gap: 6px;
+  padding: 5px 10px;
+  background: var(--bg-2);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-md);
+  color: var(--text-mid);
   font-family: var(--font-mono);
   font-size: 12px;
-  padding: 6px 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+  max-width: 240px;
 }
-
-#model-search:focus {
-  outline: none;
-  border-color: var(--accent);
+#model-btn:hover {
+  border-color: var(--accent-line);
+  color: var(--text);
 }
 
-#model-list {
-  max-height: 300px;
-  overflow-y: auto;
+#model-info {
+  font-size: 12px;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 180px;
 }
 
-.dropdown-search-section {
-  padding-bottom: 10px;
+#model-info.placeholder {
+  opacity: 0.45;
+  font-style: italic;
 }
 
-.model-item {
-  display: flex;
+/* Standard header buttons */
+.header-btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  border: none;
+  justify-content: center;
+  padding: 5px 10px;
   background: transparent;
-  text-align: left;
-  font-size: 12px;
-  transition: background 0.15s;
-  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  color: var(--text-dim);
   font-family: var(--font-mono);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  white-space: nowrap;
 }
-
-.model-item:hover {
+.header-btn:hover {
+  color: var(--text);
+  border-color: var(--border-mid);
   background: var(--bg-hover);
 }
 
-.model-item.active {
-  background: rgba(122, 162, 247, 0.12);
-  outline: 1px solid rgba(122, 162, 247, 0.35);
+/* Graph toggle active state */
+#graph-toggle.active {
+  background: var(--accent-soft);
+  border-color: var(--accent-line);
+  color: var(--accent);
 }
 
-.model-item-body {
+/* ── Context indicator ───────────────────────────────────────────────── */
+#context-indicator {
   display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
+  align-items: center;
+  gap: 6px;
 }
 
-.model-item-name {
-  color: var(--text);
-  font-weight: 500;
+#context-bar {
+  width: 64px;
+  height: 4px;
+  background: var(--bg-2);
+  border-radius: 99px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  border: 1px solid var(--border);
 }
 
-.model-item-subtitle {
-  color: var(--text-dim);
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+#context-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  border-radius: 99px;
+  transition: width 0.3s ease, background-color 0.3s ease;
 }
+#context-fill.warn     { background: var(--yellow); }
+#context-fill.critical { background: var(--red); }
 
-.model-item-badge {
-  color: var(--accent);
+#context-label {
   font-size: 11px;
-  font-weight: 600;
-  flex-shrink: 0;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  color: var(--text-dim);
+  min-width: 28px;
+  font-variant-numeric: tabular-nums;
 }
 
-/* Session menu */
-.session-menu {
-  position: relative;
+/* ── Status badge ────────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 99px;
+  font-weight: 600;
+  border: 1px solid transparent;
 }
-
-.header-btn {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
+.badge.ready {
+  background: rgba(125, 206, 160, 0.12);
+  color: var(--green);
+  border-color: rgba(125, 206, 160, 0.2);
 }
-
-.header-btn:hover {
-  color: var(--text);
-  border-color: var(--accent-dim);
+.badge.busy {
+  background: rgba(212, 168, 75, 0.12);
+  color: var(--yellow);
+  border-color: rgba(212, 168, 75, 0.2);
+}
+.badge.error {
+  background: rgba(224, 108, 117, 0.12);
+  color: var(--red);
+  border-color: rgba(224, 108, 117, 0.2);
 }
 
+/* ── Dropdowns ───────────────────────────────────────────────────────── */
 .dropdown {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
   min-width: 260px;
   background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  z-index: 100;
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-lg);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
+  z-index: 200;
   overflow: hidden;
 }
 
-.dropdown-section {
-  padding: 8px;
-}
-
-.session-update-row {
-  display: flex;
-  margin-bottom: 8px;
-}
-
-.dropdown-divider {
-  height: 1px;
-  background: var(--border);
-}
+.dropdown-section { padding: 8px; }
+.dropdown-divider { height: 1px; background: var(--border); }
 
 .dropdown-row {
   display: flex;
   gap: 6px;
 }
-
 .dropdown-row input {
   flex: 1;
   background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-sm);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 12px;
   padding: 5px 8px;
 }
-
 .dropdown-row input:focus {
   outline: none;
-  border-color: var(--accent-dim);
+  border-color: var(--accent-line);
 }
 
 .dropdown-action {
-  background: var(--accent-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 12px;
+  background: var(--accent);
   border: none;
-  color: var(--text);
+  color: #0a0e15;
   font-family: var(--font-mono);
   font-size: 12px;
-  padding: 5px 12px;
-  border-radius: 4px;
+  font-weight: 600;
+  border-radius: var(--r-sm);
   cursor: pointer;
+  transition: opacity 0.15s;
   flex-shrink: 0;
 }
-
-.dropdown-action:hover {
-  background: var(--accent);
-  color: var(--bg);
-}
+.dropdown-action:hover { opacity: 0.85; }
 
 .dropdown-empty {
   font-size: 12px;
   color: var(--text-dim);
   text-align: center;
-  padding: 8px;
+  padding: 10px 8px;
 }
 
-.session-item {
+/* ── Model dropdown ──────────────────────────────────────────────────── */
+#model-dropdown {
+  width: min(440px, calc(100vw - 32px));
+  max-height: 380px;
+}
+
+#model-search {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 6px 8px;
+}
+#model-search:focus { outline: none; border-color: var(--accent-line); }
+.dropdown-search-section { padding-bottom: 8px; }
+
+#model-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.model-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 8px;
-  border-radius: 4px;
+  gap: 12px;
+  width: 100%;
+  padding: 8px;
+  border-radius: var(--r-sm);
   cursor: pointer;
+  border: none;
+  background: transparent;
+  text-align: left;
   font-size: 12px;
   transition: background 0.15s;
+  color: var(--text);
+  font-family: var(--font-mono);
 }
-
-.session-item:hover {
-  background: var(--bg-hover);
+.model-item:hover { background: var(--bg-hover); }
+.model-item.active {
+  background: var(--accent-soft);
+  outline: 1px solid var(--accent-line);
 }
 
-.session-item.active {
-  background: rgba(122, 162, 247, 0.12);
-  outline: 1px solid rgba(122, 162, 247, 0.35);
+.model-item-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
 }
-
-.session-label {
+.model-item-name {
   color: var(--text);
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.session-meta {
+.model-item-subtitle {
   color: var(--text-dim);
   font-size: 11px;
-  flex-shrink: 0;
-  margin-left: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-.session-active-badge {
+.model-item-badge {
   color: var(--accent);
-}
-
-.badge {
   font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
+  font-weight: 600;
+  flex-shrink: 0;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-.badge.ready {
-  background: rgba(158, 206, 106, 0.15);
-  color: var(--green);
-}
+/* ── Session dropdown ────────────────────────────────────────────────── */
+.session-menu { position: relative; }
 
-.badge.busy {
-  background: rgba(224, 175, 104, 0.15);
-  color: var(--yellow);
+.session-update-row {
+  display: flex;
+  margin-bottom: 8px;
 }
 
-/* Context indicator */
-#context-indicator {
+.session-autosave-row {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-left: 12px;
-}
-
-#context-bar {
-  width: 80px;
-  height: 8px;
-  background: var(--bg-surface);
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid var(--border);
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
 }
+.session-autosave-row input { accent-color: var(--accent); }
 
-#context-fill {
-  height: 100%;
-  width: 0%;
-  background: var(--accent);
-  border-radius: 4px;
-  transition: width 0.3s ease, background-color 0.3s ease;
+.session-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--r-sm);
+  font-size: 12px;
+  transition: background 0.15s;
 }
-
-#context-fill.warn {
-  background: var(--yellow);
+.session-item:hover { background: var(--bg-hover); }
+.session-item.active {
+  background: var(--accent-soft);
+  outline: 1px solid var(--accent-line);
 }
 
-#context-fill.critical {
-  background: var(--red);
+.session-load-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.session-load-btn:focus-visible,
+.session-delete-btn:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 1px;
 }
 
-#context-label {
-  font-size: 11px;
+.session-label {
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-meta {
   color: var(--text-dim);
-  min-width: 28px;
+  font-size: 11px;
+  flex-shrink: 0;
+  margin-left: 8px;
 }
+.session-active-badge { color: var(--accent); }
 
-.badge.error {
-  background: rgba(247, 118, 142, 0.15);
+.session-delete-btn {
+  flex-shrink: 0;
+  margin: 4px 6px 4px 0;
+  padding: 3px 8px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.session-delete-btn:hover {
   color: var(--red);
+  border-color: rgba(224, 108, 117, 0.45);
+  background: rgba(224, 108, 117, 0.08);
 }
 
-/* ── Workspace: side-by-side chat + graph ── */
-
+/* ── Workspace ───────────────────────────────────────────────────────── */
 #workspace {
   display: flex;
   flex: 1;
   min-height: 0;
 }
 
-/* Chat pane (left, default ~33%) */
+/* ── Chat pane ───────────────────────────────────────────────────────── */
 #chat-pane {
   display: flex;
   flex-direction: column;
   width: 33%;
   min-width: 280px;
   position: relative;
+  background: var(--bg);
 }
 
-/* Config overlay — shown when model provider is not configured */
+/* Config overlay */
 .config-overlay {
   position: absolute;
   inset: 0;
@@ -396,12 +496,11 @@ h1 {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  background: rgba(26, 27, 38, 0.92);
-  backdrop-filter: blur(4px);
+  background: rgba(10, 12, 18, 0.88);
+  backdrop-filter: blur(6px);
   padding: 24px;
   overflow-y: auto;
 }
-
 .config-overlay.hidden { display: none; }
 
 .config-overlay-content {
@@ -409,119 +508,79 @@ h1 {
   width: 100%;
   margin: 0 auto;
 }
-
 .config-overlay-content h2 {
   color: var(--yellow);
-  font-size: 16px;
+  font-size: 15px;
   margin-bottom: 8px;
 }
-
 .config-overlay-content > p {
   color: var(--text-dim);
-  font-size: 13px;
+  font-size: 12px;
   margin-bottom: 16px;
 }
 
 .config-overlay-shortcuts {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   margin-bottom: 16px;
 }
 
 .config-overlay-spotlight {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   padding: 14px 16px;
-  border-radius: 8px;
-  border: 1px solid rgba(122, 162, 247, 0.35);
-  background:
-    linear-gradient(135deg, rgba(122, 162, 247, 0.18), rgba(158, 206, 106, 0.08)),
-    var(--bg-surface);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  border-radius: var(--r-lg);
+  border: 1px solid var(--accent-line);
+  background: linear-gradient(135deg, rgba(86,200,216,0.10), rgba(125,206,160,0.06)), var(--bg-surface);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
 }
-
 .config-overlay-spotlight-secondary {
-  border-color: rgba(158, 206, 106, 0.24);
-  background:
-    linear-gradient(135deg, rgba(158, 206, 106, 0.14), rgba(122, 162, 247, 0.06)),
-    var(--bg-surface);
-}
-
-.config-overlay-spotlight-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  border-color: rgba(125, 206, 160, 0.22);
+  background: linear-gradient(135deg, rgba(125,206,160,0.10), rgba(86,200,216,0.05)), var(--bg-surface);
 }
 
+.config-overlay-spotlight-copy { display: flex; flex-direction: column; gap: 6px; }
 .config-overlay-spotlight-badge {
   align-self: flex-start;
   padding: 2px 8px;
-  border-radius: 999px;
-  background: rgba(122, 162, 247, 0.18);
+  border-radius: 99px;
+  background: var(--accent-soft);
   color: var(--accent);
   font-size: 11px;
   font-weight: 600;
-  letter-spacing: 0.02em;
-}
-
-.config-overlay-spotlight strong {
-  color: var(--text);
-  font-size: 14px;
-}
-
-.config-overlay-spotlight p {
-  margin: 0;
-  color: var(--text);
-  font-size: 12px;
-}
-
-.config-overlay-spotlight-actions {
-  margin-bottom: 0;
+  letter-spacing: 0.04em;
 }
+.config-overlay-spotlight strong { color: var(--text); font-size: 13px; }
+.config-overlay-spotlight p { margin: 0; color: var(--text); font-size: 12px; }
+.config-overlay-spotlight-actions { margin-bottom: 0; }
 
 .config-missing {
-  color: var(--red, #f7768e);
-  font-size: 13px;
+  color: var(--red);
+  font-size: 12px;
   padding: 8px 12px;
-  background: rgba(247, 118, 142, 0.1);
-  border-radius: 4px;
+  background: rgba(224, 108, 117, 0.1);
+  border: 1px solid rgba(224,108,117,0.2);
+  border-radius: var(--r-sm);
   margin-bottom: 12px;
 }
 
-.config-overlay-options {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
+.config-overlay-options { display: flex; flex-direction: column; gap: 14px; }
 .config-overlay-option {
   background: var(--bg-surface);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-md);
   padding: 12px 14px;
 }
-
-.config-overlay-option strong {
-  display: block;
-  color: var(--text);
-  font-size: 13px;
-  margin-bottom: 4px;
-}
-
-.config-overlay-option p {
-  color: var(--text-dim);
-  font-size: 12px;
-  margin-bottom: 8px;
-}
-
+.config-overlay-option strong { display: block; color: var(--text); font-size: 12px; margin-bottom: 4px; }
+.config-overlay-option p { color: var(--text-dim); font-size: 12px; margin-bottom: 8px; }
 .config-overlay-option pre {
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 8px 10px;
-  font-size: 12px;
+  font-size: 11px;
   color: var(--green);
   white-space: pre-wrap;
   word-break: break-all;
@@ -530,48 +589,30 @@ h1 {
 .config-overlay-actions {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
+  gap: 8px;
+  margin-bottom: 8px;
   flex-wrap: wrap;
 }
-
-.config-overlay-action-note {
-  color: var(--text-dim);
-  font-size: 12px;
-}
+.config-overlay-action-note { color: var(--text-dim); font-size: 11px; }
 
 .config-connect-status {
   font-size: 12px;
   padding: 8px 12px;
-  border-radius: 4px;
-  margin-top: 14px;
+  border-radius: var(--r-sm);
+  margin-top: 12px;
 }
-
 .config-connect-status.info {
-  color: var(--text);
-  background: rgba(122, 162, 247, 0.14);
-  border: 1px solid rgba(122, 162, 247, 0.28);
+  color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-line);
 }
-
 .config-connect-status.success {
-  color: var(--green);
-  background: rgba(158, 206, 106, 0.12);
-  border: 1px solid rgba(158, 206, 106, 0.28);
+  color: var(--green); background: rgba(125,206,160,0.1); border: 1px solid rgba(125,206,160,0.22);
 }
-
 .config-connect-status.error {
-  color: var(--red, #f7768e);
-  background: rgba(247, 118, 142, 0.12);
-  border: 1px solid rgba(247, 118, 142, 0.28);
-}
-
-.config-overlay-footer {
-  margin-top: 16px;
-  color: var(--text-dim);
-  font-size: 12px;
+  color: var(--red); background: rgba(224,108,117,0.1); border: 1px solid rgba(224,108,117,0.2);
 }
+.config-overlay-footer { margin-top: 14px; color: var(--text-dim); font-size: 11px; }
 
-/* Pane divider (draggable) */
+/* ── Pane divider ────────────────────────────────────────────────────── */
 #pane-divider {
   width: 1px;
   cursor: col-resize;
@@ -581,1314 +622,530 @@ h1 {
   z-index: 10;
   position: relative;
 }
-
 #pane-divider::after {
   content: '';
   position: absolute;
-  top: 0;
-  left: -3px;
-  width: 7px;
-  height: 100%;
+  top: 0; left: -3px;
+  width: 7px; height: 100%;
 }
-
 #pane-divider:hover,
 #pane-divider.dragging {
-  width: 3px;
+  width: 2px;
   background: var(--accent-dim);
 }
 
-/* Graph pane (right, takes remaining space) */
+/* ── Graph pane ──────────────────────────────────────────────────────── */
 #graph-pane {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 300px;
   position: relative;
+  background: var(--bg);
 }
 
-/* Chat-only mode: hide graph, expand chat full-width */
 #workspace.chat-only #graph-pane,
-#workspace.chat-only #pane-divider {
-  display: none;
-}
-
+#workspace.chat-only #pane-divider { display: none; }
 #workspace.chat-only #chat-pane {
   width: 100%;
-  max-width: 900px;
+  max-width: 860px;
   margin: 0 auto;
 }
 
-#graph-toggle.active {
-  background: var(--accent);
-  color: var(--bg);
-  border-color: var(--accent);
-}
-
-/* Messages */
-main {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
+/* ── Graph toolbar ───────────────────────────────────────────────────── */
+#graph-toolbar {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.message {
-  padding: 10px 14px;
-  border-radius: 8px;
-  max-width: 100%;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.message.user {
-  background: var(--accent-dim);
-  color: #fff;
-  align-self: flex-end;
-  max-width: 90%;
-  border-radius: 8px 8px 2px 8px;
-}
-
-.message.assistant {
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
   background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 8px 8px 8px 2px;
-  white-space: normal;
+  flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
-/* Markdown content inside assistant messages and explain */
-.message.assistant p,
-.detail-explain-content p {
-  margin: 0 0 8px 0;
+#graph-search {
+  background: var(--bg-2);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-md);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 5px 10px;
+  width: 210px;
+  transition: border-color 0.15s, width 0.2s;
 }
-
-.message.assistant p:last-child,
-.detail-explain-content p:last-child {
-  margin-bottom: 0;
+#graph-search:focus {
+  outline: none;
+  border-color: var(--accent-line);
+  width: 240px;
 }
 
-.message.assistant pre,
-.detail-explain-content pre {
-  background: var(--bg) !important;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 8px 10px !important;
-  margin: 8px 0;
-  overflow-x: auto;
-  font-size: 12px;
-  line-height: 1.5;
+/* ── Graph stage ─────────────────────────────────────────────────────── */
+#graph-stage {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg);
 }
 
-.message.assistant code,
-.detail-explain-content code {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
+#cy {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  background: var(--bg);
+  position: relative;
 }
 
-.message.assistant :not(pre) > code,
-.detail-explain-content :not(pre) > code {
-  background: rgba(122, 162, 247, 0.1);
-  padding: 1px 5px;
-  border-radius: 3px;
-  color: var(--accent);
+/* ── Search dropdown ─────────────────────────────────────────────────── */
+.search-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 320px;
+  max-height: 320px;
+  overflow-y: auto;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-lg);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  z-index: 200;
+  margin-top: 4px;
 }
-
-.message.assistant ul,
-.message.assistant ol,
-.detail-explain-content ul,
-.detail-explain-content ol {
-  margin: 6px 0;
-  padding-left: 20px;
+.search-result {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.1s;
 }
-
-.message.assistant li,
-.detail-explain-content li {
-  margin-bottom: 3px;
+.search-result:hover { background: var(--bg-hover); }
+.search-result-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
+.search-result-name {
+  color: var(--text); font-weight: 500;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-
-.message.assistant h1,
-.message.assistant h2,
-.message.assistant h3,
-.detail-explain-content h1,
-.detail-explain-content h2,
-.detail-explain-content h3 {
-  font-size: 13px;
-  font-weight: 600;
-  margin: 10px 0 4px 0;
-  color: var(--text);
+.search-result-subtitle {
+  color: var(--text-dim); font-size: 11px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-
-.message.assistant h1 { font-size: 15px; }
-.message.assistant h2 { font-size: 14px; }
-
-.message.assistant strong,
-.detail-explain-content strong {
-  color: var(--text);
+.search-result-kind {
+  font-size: 11px; opacity: 0.7; flex-shrink: 0;
+  letter-spacing: 0.04em; text-transform: uppercase;
 }
+.search-result-kind.file { opacity: 0.9; }
 
-.message.assistant blockquote,
-.detail-explain-content blockquote {
-  border-left: 3px solid var(--border);
-  padding-left: 10px;
-  margin: 6px 0;
-  color: var(--text-dim);
+/* ── Graph empty / onboarding ────────────────────────────────────────── */
+.graph-empty {
+  display: flex; align-items: center; justify-content: center;
+  height: 100%; color: var(--text-dim);
+  font-size: 13px; padding: 40px; text-align: center;
 }
 
-.message.error {
-  background: rgba(247, 118, 142, 0.1);
-  border: 1px solid rgba(247, 118, 142, 0.3);
-  color: var(--red);
+.graph-onboarding {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 8px; pointer-events: none; z-index: 10;
+  color: var(--text-dim); text-align: center; padding: 40px;
 }
-
-.message.thinking {
-  color: var(--text-dim);
-  font-style: italic;
-  font-size: 13px;
-  padding: 6px 14px;
+.graph-onboarding-icon {
+  font-size: 26px; opacity: 0.2; letter-spacing: 4px; margin-bottom: 4px;
 }
+.graph-onboarding-title { font-size: 14px; font-weight: 600; opacity: 0.45; }
+.graph-onboarding-subtitle { font-size: 12px; opacity: 0.35; line-height: 1.5; }
 
-/* Tool call group — clusters consecutive tool calls */
-.tool-group {
+/* ── Analysis panel ──────────────────────────────────────────────────── */
+#analysis-panel {
+  position: absolute;
+  top: 16px; left: 16px; bottom: 16px;
+  width: min(380px, calc(100% - 32px));
+  background: rgba(14, 17, 26, 0.97);
+  border: 1px solid var(--accent-line);
+  border-radius: var(--r-xl);
+  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
+  backdrop-filter: blur(20px);
+  z-index: 40;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  margin: 2px 0;
-}
-
-/* Tool calls — compact inline pills */
-.tool-call {
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 4px;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition: background 0.15s;
-  line-height: 1.4;
-}
-
-.tool-call:hover {
-  background: rgba(122, 162, 247, 0.08);
-}
-
-.tool-call .tool-header {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-}
-
-.tool-call .tool-name {
-  color: var(--accent);
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.tool-call .tool-arg {
-  color: var(--text-dim);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tool-call .tool-time {
-  color: var(--text-dim);
-  margin-left: auto;
-  flex-shrink: 0;
-  font-size: 11px;
-  opacity: 0.7;
-}
-
-.tool-call .tool-result {
-  display: none;
-  margin-top: 6px;
-  padding: 6px 8px;
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.2);
-  white-space: pre-wrap;
-  max-height: 200px;
-  overflow-y: auto;
-  font-size: 11px;
-  color: var(--text-dim);
-}
-
-.tool-call.expanded .tool-result {
-  display: block;
-}
-
-/* Streaming cursor */
-.streaming-cursor::after {
-  content: '\25CC';
-  animation: blink 0.8s step-end infinite;
-  color: var(--accent);
-}
-
-@keyframes blink {
-  50% { opacity: 0; }
-}
-
-/* Usage info */
-.usage-info {
-  font-size: 11px;
-  color: var(--text-dim);
-  opacity: 0.6;
-  text-align: right;
-  padding: 2px 4px;
-}
-
-/* Footer / Input */
-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-#chat-form {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-#chat-input {
-  flex: 1;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 14px;
-  padding: 10px 12px;
-  resize: none;
-  max-height: 150px;
-  line-height: 1.5;
-}
-
-#chat-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-#send-btn, #cancel-btn {
-  padding: 10px 18px;
-  border: none;
-  border-radius: 6px;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-#send-btn {
-  background: var(--accent);
-  color: var(--bg);
-}
-
-#send-btn:hover {
-  opacity: 0.9;
-}
-
-#send-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-#cancel-btn {
-  background: var(--red);
-  color: #fff;
-}
-
-.hidden {
-  display: none !important;
-}
-
-/* Settings modal */
-.modal {
-  position: fixed;
-  inset: 0;
-  z-index: 500;
-}
-
-.modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(10, 10, 18, 0.72);
-  backdrop-filter: blur(4px);
-}
-
-.modal-panel {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: min(960px, calc(100vw - 32px));
-  max-height: calc(100vh - 48px);
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
-  overflow: hidden;
-}
-
-.modal-panel-compact {
-  width: min(640px, calc(100vw - 32px));
-}
-
-.modal-panel-file-preview {
-  width: min(1200px, 80vw);
-  height: 80vh;
-  max-width: 80vw;
-  max-height: 80vh;
-}
-
-.modal-header,
-.modal-footer,
-.settings-toolbar {
-  padding: 18px 20px;
-}
-
-.modal-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h2 {
-  font-size: 16px;
-  color: var(--text);
-  margin-bottom: 4px;
-}
-
-.modal-subtitle {
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.file-preview-body {
-  flex: 1;
-  min-height: 0;
-  padding: 0 20px 20px;
-  overflow: auto;
-  background: rgba(15, 16, 26, 0.92);
-}
-
-.file-preview-code {
-  margin: 0;
-  min-height: 100%;
-  padding: 18px;
-  border-radius: 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-size: 12px;
-  line-height: 1.6;
-  overflow: auto;
-  white-space: pre;
-  font-family: var(--font-mono);
-}
-
-.settings-toolbar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-  border-bottom: 1px solid var(--border);
-  background: rgba(26, 27, 38, 0.55);
-}
-
-.settings-scope-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.settings-scope-picker select,
-.settings-control,
-.settings-select {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.settings-scope-picker select,
-.settings-select {
-  padding: 8px 10px;
-}
-
-.settings-control {
-  width: 100%;
-  padding: 9px 11px;
-}
-
-.settings-control:disabled,
-.settings-select:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-  background: rgba(17, 19, 29, 0.9);
-}
-
-.settings-scope-picker select:focus,
-.settings-control:focus,
-.settings-select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.settings-path-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 6px;
-  min-width: 0;
-}
-
-.settings-path-label {
-  font-size: 11px;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.settings-path {
-  max-width: min(100%, 500px);
-  overflow-x: auto;
-  white-space: nowrap;
-  color: var(--accent);
-  background: rgba(122, 162, 247, 0.08);
-  border: 1px solid rgba(122, 162, 247, 0.18);
-  border-radius: 999px;
-  padding: 4px 10px;
-}
-
-.settings-banner {
-  margin: 14px 20px 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  font-size: 12px;
-  border: 1px solid transparent;
-}
-
-.settings-banner.info {
-  background: rgba(122, 162, 247, 0.12);
-  border-color: rgba(122, 162, 247, 0.24);
-  color: var(--text);
-}
-
-.settings-banner.success {
-  background: rgba(158, 206, 106, 0.12);
-  border-color: rgba(158, 206, 106, 0.26);
-  color: var(--green);
-}
-
-.settings-banner.error {
-  background: rgba(247, 118, 142, 0.12);
-  border-color: rgba(247, 118, 142, 0.26);
-  color: var(--red);
-}
-
-.settings-list {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 18px 20px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.settings-item {
-  background: rgba(26, 27, 38, 0.72);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 16px;
-}
-
-.settings-item.is-disabled {
-  border-color: rgba(122, 162, 247, 0.24);
-  background: rgba(26, 27, 38, 0.6);
-}
-
-.settings-item-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 8px;
-}
-
-.settings-item-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 4px;
-}
-
-.settings-item-description {
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.settings-item-badges {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
-}
-
-.settings-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 11px;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-
-.settings-badge.env {
-  color: var(--accent);
-  background: rgba(122, 162, 247, 0.12);
-  border-color: rgba(122, 162, 247, 0.24);
-}
-
-.settings-badge.override {
-  color: var(--yellow);
-  background: rgba(224, 175, 104, 0.14);
-  border-color: rgba(224, 175, 104, 0.24);
-}
-
-.settings-item-meta {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.settings-meta-block {
-  background: var(--bg);
-  border: 1px solid rgba(51, 53, 74, 0.8);
-  border-radius: 8px;
-  padding: 10px;
-  min-width: 0;
-}
-
-.settings-meta-label {
-  display: block;
-  font-size: 10px;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: 4px;
-}
-
-.settings-meta-value {
-  font-size: 12px;
-  color: var(--text);
-  overflow-wrap: anywhere;
-}
-
-.settings-item-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.settings-session-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  margin: 0 0 14px;
-  padding: 12px 14px;
-  border-radius: 10px;
-  border: 1px solid rgba(122, 162, 247, 0.24);
-  background: rgba(122, 162, 247, 0.09);
-}
-
-.settings-session-copy {
-  min-width: 0;
-}
-
-.settings-session-title {
-  font-size: 13px;
-  color: var(--text);
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.settings-session-meta {
-  font-size: 12px;
-  color: var(--text-dim);
-  overflow-wrap: anywhere;
-}
-
-.settings-help {
-  font-size: 11px;
-  color: var(--text-dim);
-}
-
-.settings-help-warning {
-  color: var(--red);
-  font-weight: 600;
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.settings-footnote {
-  font-size: 12px;
-  color: var(--text-dim);
-  max-width: 560px;
-}
-
-.settings-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.settings-provider-shortcuts {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 16px;
-  padding: 14px 16px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: rgba(26, 27, 38, 0.72);
-}
-
-.settings-provider-shortcuts-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.settings-provider-shortcuts-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.openrouter-connect-body {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.openrouter-connect-lead {
-  font-size: 13px;
-  color: var(--text);
-}
-
-.openrouter-connect-note {
-  padding: 12px 14px;
-  border-radius: 10px;
-  border: 1px solid rgba(122, 162, 247, 0.22);
-  background: rgba(122, 162, 247, 0.08);
-}
-
-.openrouter-connect-note strong {
-  display: block;
-  color: var(--text);
-  font-size: 13px;
-  margin-bottom: 4px;
-}
-
-.openrouter-connect-note p,
-.openrouter-connect-help {
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.openrouter-persist-toggle {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 12px 14px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: rgba(26, 27, 38, 0.72);
-  cursor: pointer;
-}
-
-.openrouter-persist-toggle input {
-  margin-top: 2px;
-}
-
-.openrouter-persist-toggle span {
-  font-size: 12px;
-  color: var(--text);
-}
-
-.provider-input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.provider-input-label {
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.provider-input {
-  width: 100%;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  padding: 9px 10px;
-}
-
-.provider-input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-@media (max-width: 760px) {
-  .settings-session-banner {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .settings-provider-shortcuts {
-    flex-direction: column;
-  }
-
-  .settings-provider-shortcuts-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-}
-
-.settings-list::-webkit-scrollbar,
-.settings-path::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.settings-list::-webkit-scrollbar-track,
-.settings-path::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.settings-list::-webkit-scrollbar-thumb,
-.settings-path::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 999px;
-}
-
-/* Scrollbar */
-main::-webkit-scrollbar {
-  width: 6px;
-}
-
-main::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-main::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-/* ── Graph pane ── */
-
-#graph-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  flex-wrap: wrap;
-}
-
-#graph-stage {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  background: var(--bg);
-}
-
-#graph-search {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  padding: 5px 10px;
-  width: 200px;
-}
-
-#graph-search:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-/* Search dropdown */
-.search-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 300px;
-  max-height: 320px;
-  overflow-y: auto;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  z-index: 200;
-  margin-top: 4px;
-}
-
-.search-result {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 6px 10px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: background 0.1s;
-}
-
-.search-result:hover {
-  background: var(--bg-hover);
-}
-
-.search-result-body {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.search-result-name {
-  color: var(--text);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.search-result-subtitle {
-  color: var(--text-dim);
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.search-result-kind {
-  font-size: 11px;
-  opacity: 0.7;
-  flex-shrink: 0;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.search-result-kind.file {
-  opacity: 0.9;
-}
-
-#cy {
-  width: 100%;
-  height: 100%;
-  background: var(--bg);
-  position: relative;
-}
-
-#analysis-panel {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  bottom: 16px;
-  width: min(380px, calc(100% - 32px));
-  background: rgba(17, 19, 29, 0.96);
-  border: 1px solid rgba(122, 162, 247, 0.22);
-  border-radius: 16px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(16px);
-  z-index: 40;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  overflow: hidden;
 }
 
 .analysis-panel-header {
-  padding: 18px 18px 14px;
-  border-bottom: 1px solid rgba(122, 162, 247, 0.14);
+  padding: 16px 18px 14px;
+  border-bottom: 1px solid rgba(86,200,216,0.12);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
 }
-
 .analysis-kicker {
-  font-size: 11px;
+  font-size: 10px;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   color: var(--accent);
   margin-bottom: 6px;
 }
-
-.analysis-title-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.analysis-title-row h2 {
-  margin: 0;
-  font-size: 17px;
-  color: var(--text);
-}
-
+.analysis-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.analysis-title-row h2 { margin: 0; font-size: 16px; color: var(--text); }
 .analysis-pill {
-  border: 1px solid rgba(122, 162, 247, 0.3);
-  border-radius: 999px;
-  padding: 3px 8px;
-  font-size: 11px;
-  color: var(--text-dim);
-}
-
-.analysis-subtitle {
-  margin: 10px 0 0;
-  font-size: 12px;
-  line-height: 1.5;
+  border: 1px solid rgba(86,200,216,0.25);
+  border-radius: 99px;
+  padding: 2px 8px;
+  font-size: 10px;
   color: var(--text-dim);
-  max-width: 48ch;
-}
-
-.analysis-panel-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
 }
+.analysis-subtitle { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); max-width: 48ch; }
+.analysis-panel-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
 
 .analysis-status {
   margin: 12px 18px 0;
   padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid rgba(122, 162, 247, 0.18);
-  background: rgba(122, 162, 247, 0.08);
+  border-radius: var(--r-md);
+  border: 1px solid var(--accent-line);
+  background: var(--accent-soft);
   color: var(--text-dim);
   font-size: 12px;
 }
-
 .analysis-status.error {
-  border-color: rgba(247, 118, 142, 0.28);
-  background: rgba(247, 118, 142, 0.1);
-  color: #f4b1ba;
+  border-color: rgba(224,108,117,0.28);
+  background: rgba(224,108,117,0.08);
+  color: #f0a0aa;
 }
 
 .analysis-summary {
-  padding: 14px 18px 10px;
+  padding: 12px 18px 8px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 8px;
 }
-
 .analysis-summary-card {
-  appearance: none;
-  width: 100%;
-  text-align: left;
-  border: 1px solid rgba(122, 162, 247, 0.14);
-  border-radius: 12px;
-  background: rgba(31, 35, 53, 0.72);
-  padding: 12px;
+  appearance: none; width: 100%; text-align: left;
+  border: 1px solid var(--border); border-radius: var(--r-md);
+  background: var(--bg-2); padding: 12px;
   cursor: pointer;
-  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
+  transition: border-color 0.15s, transform 0.15s, background 0.15s;
 }
-
 .analysis-summary-card:hover {
-  border-color: rgba(122, 162, 247, 0.3);
-  background: rgba(36, 40, 60, 0.82);
+  border-color: var(--accent-line);
+  background: var(--bg-hover);
   transform: translateY(-1px);
 }
-
 .analysis-summary-card.active {
-  border-color: rgba(122, 162, 247, 0.38);
-  background: rgba(34, 41, 67, 0.92);
-  box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.16);
-}
-
-.analysis-summary-value {
-  display: block;
-  font-size: 17px;
-  font-weight: 600;
-  color: var(--text);
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 1px rgba(86,200,216,0.14);
 }
-
+.analysis-summary-value { display: block; font-size: 18px; font-weight: 600; color: var(--text); }
 .analysis-summary-label {
-  display: block;
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  display: block; margin-top: 3px; font-size: 10px;
+  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em;
 }
 
 .analysis-findings {
-  flex: 1;
-  overflow-y: auto;
+  flex: 1; overflow-y: auto;
   padding: 6px 18px 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.analysis-findings::-webkit-scrollbar {
-  width: 6px;
-}
-
-.analysis-findings::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.analysis-findings::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 999px;
+  display: flex; flex-direction: column; gap: 8px;
 }
+.analysis-findings::-webkit-scrollbar { width: 5px; }
+.analysis-findings::-webkit-scrollbar-track { background: transparent; }
+.analysis-findings::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
 
 .analysis-empty {
-  border: 1px dashed rgba(122, 162, 247, 0.2);
-  border-radius: 12px;
+  border: 1px dashed rgba(86,200,216,0.18);
+  border-radius: var(--r-md);
   padding: 16px;
   color: var(--text-dim);
-  font-size: 13px;
+  font-size: 12px;
   line-height: 1.6;
 }
 
 .analysis-finding {
-  border: 1px solid rgba(122, 162, 247, 0.14);
-  border-radius: 14px;
-  background: rgba(31, 35, 53, 0.78);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: var(--bg-2);
   padding: 14px;
   cursor: pointer;
-  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
+  transition: border-color 0.15s, transform 0.15s, background 0.15s;
 }
-
 .analysis-finding:hover {
-  border-color: rgba(122, 162, 247, 0.32);
-  background: rgba(36, 40, 60, 0.86);
+  border-color: var(--border-mid);
+  background: var(--bg-hover);
   transform: translateY(-1px);
 }
-
 .analysis-finding.active {
-  border-color: rgba(247, 118, 142, 0.4);
-  box-shadow: 0 0 0 1px rgba(247, 118, 142, 0.2);
+  border-color: rgba(224,108,117,0.38);
+  box-shadow: 0 0 0 1px rgba(224,108,117,0.18);
 }
 
 .analysis-finding-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.analysis-finding-title {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.4;
-  color: var(--text);
-}
-
-.analysis-finding-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
+  display: flex; align-items: flex-start;
+  justify-content: space-between; gap: 12px; margin-bottom: 8px;
 }
+.analysis-finding-title { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
+.analysis-finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-shrink: 0; }
 
 .analysis-type-badge,
 .analysis-severity-badge,
 .analysis-metric-chip,
 .analysis-file-badge {
-  border-radius: 999px;
+  border-radius: 99px;
   font-size: 11px;
-  padding: 3px 8px;
+  padding: 2px 8px;
 }
-
 .analysis-type-badge {
-  color: var(--accent);
-  background: rgba(122, 162, 247, 0.12);
-  border: 1px solid rgba(122, 162, 247, 0.2);
+  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
 }
+.analysis-severity-badge { border: 1px solid transparent; }
+.analysis-severity-badge.info    { color: #7dcfff; background: rgba(125,207,255,0.10); border-color: rgba(125,207,255,0.18); }
+.analysis-severity-badge.warning { color: var(--yellow); background: rgba(212,168,75,0.10); border-color: rgba(212,168,75,0.2); }
+.analysis-severity-badge.high    { color: var(--red); background: rgba(224,108,117,0.10); border-color: rgba(224,108,117,0.2); }
 
-.analysis-severity-badge {
-  border: 1px solid transparent;
+.analysis-finding-summary { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
+
+.analysis-chip-row,
+.analysis-file-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
+
+.analysis-metric-chip {
+  color: var(--text); background: var(--bg); border: 1px solid var(--border);
+}
+.analysis-file-badge {
+  color: var(--text-dim); background: var(--bg); border: 1px solid var(--border);
 }
 
-.analysis-severity-badge.info {
-  color: #7dcfff;
-  background: rgba(125, 207, 255, 0.12);
-  border-color: rgba(125, 207, 255, 0.18);
+.analysis-rationale { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
+.analysis-rationale li + li { margin-top: 4px; }
+
+.analysis-finding-actions { display: flex; gap: 8px; margin-top: 12px; }
+.analysis-finding-actions .header-btn { flex: 1; text-align: center; }
+
+.analysis-explanation {
+  margin-top: 12px; padding-top: 12px;
+  border-top: 1px solid rgba(86,200,216,0.1);
+}
+.analysis-explanation-label {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--accent); margin-bottom: 4px;
 }
+.analysis-explanation-note { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin-bottom: 10px; }
+.analysis-explanation-content { max-height: 280px; }
 
-.analysis-severity-badge.warning {
-  color: #e0af68;
-  background: rgba(224, 175, 104, 0.12);
-  border-color: rgba(224, 175, 104, 0.2);
+/* ── Messages ────────────────────────────────────────────────────────── */
+main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.analysis-severity-badge.high {
-  color: #f7768e;
-  background: rgba(247, 118, 142, 0.12);
-  border-color: rgba(247, 118, 142, 0.24);
+.message {
+  padding: 10px 14px;
+  border-radius: var(--r-lg);
+  max-width: 100%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  font-size: 13px;
 }
 
-.analysis-finding-summary {
-  margin: 0 0 10px;
-  font-size: 12px;
-  line-height: 1.6;
-  color: var(--text-dim);
+.message.user {
+  background: rgba(86,200,216,0.14);
+  border: 1px solid rgba(86,200,216,0.22);
+  color: var(--text);
+  align-self: flex-end;
+  max-width: 90%;
+  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
 }
 
-.analysis-chip-row,
-.analysis-file-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 8px;
+.message.assistant {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--accent-dim);
+  border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);
+  white-space: normal;
 }
 
-.analysis-metric-chip {
-  color: var(--text);
-  background: rgba(17, 19, 29, 0.75);
-  border: 1px solid rgba(122, 162, 247, 0.12);
+/* Markdown inside assistant messages */
+.message.assistant p, .detail-explain-content p { margin: 0 0 8px; }
+.message.assistant p:last-child, .detail-explain-content p:last-child { margin-bottom: 0; }
+
+.message.assistant pre, .detail-explain-content pre {
+  background: var(--bg) !important;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  padding: 8px 10px !important;
+  margin: 8px 0;
+  overflow-x: auto;
+  font-size: 11px;
+  line-height: 1.5;
+}
+.message.assistant code, .detail-explain-content code {
+  font-family: var(--font-mono); font-size: 0.9em;
+}
+.message.assistant :not(pre) > code,
+.detail-explain-content :not(pre) > code {
+  background: var(--accent-soft);
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: var(--accent);
+}
+.message.assistant ul, .message.assistant ol,
+.detail-explain-content ul, .detail-explain-content ol {
+  margin: 6px 0; padding-left: 20px;
+}
+.message.assistant li, .detail-explain-content li { margin-bottom: 3px; }
+.message.assistant h1, .message.assistant h2, .message.assistant h3,
+.detail-explain-content h1, .detail-explain-content h2, .detail-explain-content h3 {
+  font-size: 13px; font-weight: 600; margin: 10px 0 4px; color: var(--text);
+}
+.message.assistant h1 { font-size: 14px; }
+.message.assistant h2 { font-size: 13px; }
+.message.assistant strong, .detail-explain-content strong { color: var(--text); }
+.message.assistant blockquote, .detail-explain-content blockquote {
+  border-left: 2px solid var(--accent-dim);
+  padding-left: 10px; margin: 6px 0; color: var(--text-dim);
 }
 
-.analysis-file-badge {
-  color: var(--text-dim);
-  background: rgba(17, 19, 29, 0.75);
-  border: 1px solid rgba(86, 95, 137, 0.32);
+.message.error {
+  background: rgba(224,108,117,0.08);
+  border: 1px solid rgba(224,108,117,0.22);
+  color: var(--red);
 }
 
-.analysis-rationale {
-  margin: 0;
-  padding-left: 18px;
+.message.thinking {
   color: var(--text-dim);
+  font-style: italic;
   font-size: 12px;
-  line-height: 1.5;
+  padding: 4px 14px;
 }
 
-.analysis-rationale li + li {
-  margin-top: 4px;
+/* ── Tool calls ──────────────────────────────────────────────────────── */
+.tool-group {
+  display: flex; flex-direction: column; gap: 2px; margin: 2px 0;
 }
 
-.analysis-finding-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
+.tool-call {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: var(--r-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.15s;
+  line-height: 1.4;
+  border-left: 2px solid transparent;
+}
+.tool-call:hover {
+  background: var(--bg-hover);
+  border-left-color: var(--accent-dim);
+}
+.tool-call .tool-header { display: flex; align-items: baseline; gap: 6px; }
+.tool-call .tool-name { color: var(--accent); font-weight: 600; flex-shrink: 0; font-size: 12px; }
+.tool-call .tool-arg { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tool-call .tool-time { color: var(--text-dim); margin-left: auto; flex-shrink: 0; font-size: 11px; opacity: 0.6; }
+.tool-call .tool-result {
+  display: none;
+  margin-top: 6px;
+  padding: 6px 8px;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 11px;
+  color: var(--text-dim);
 }
+.tool-call.expanded .tool-result { display: block; }
 
-.analysis-finding-actions .header-btn {
-  flex: 1;
-  text-align: center;
+/* ── Usage / streaming ───────────────────────────────────────────────── */
+.streaming-cursor::after {
+  content: '\25CC';
+  animation: blink 0.8s step-end infinite;
+  color: var(--accent);
 }
+@keyframes blink { 50% { opacity: 0; } }
 
-.analysis-explanation {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(122, 162, 247, 0.12);
+.usage-info {
+  font-size: 11px; color: var(--text-dim);
+  opacity: 0.5; text-align: right; padding: 2px 4px;
 }
 
-.analysis-explanation-label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #7dcfff;
-  margin-bottom: 4px;
+/* ── Chat footer / input ─────────────────────────────────────────────── */
+footer {
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--bg-surface);
 }
 
-.analysis-explanation-note {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--text-dim);
-  margin-bottom: 10px;
+#chat-form {
+  display: flex; gap: 8px; align-items: flex-end;
 }
 
-.analysis-explanation-content {
-  max-height: 280px;
+#chat-input {
+  flex: 1;
+  background: var(--bg-2);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-md);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 9px 12px;
+  resize: none;
+  max-height: 150px;
+  line-height: 1.5;
+  transition: border-color 0.15s;
 }
+#chat-input:focus { outline: none; border-color: var(--accent-line); }
 
-.graph-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-dim);
-  font-size: 14px;
-  padding: 40px;
-  text-align: center;
+#send-btn, #cancel-btn {
+  padding: 9px 16px;
+  border: none;
+  border-radius: var(--r-md);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
 }
-
-.graph-onboarding {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  pointer-events: none;
-  z-index: 10;
-  color: var(--text-dim);
-  text-align: center;
-  padding: 40px;
+#send-btn {
+  background: var(--accent);
+  color: #0a0e15;
 }
-
-.graph-onboarding-icon {
-  font-size: 28px;
-  opacity: 0.25;
-  letter-spacing: 4px;
-  margin-bottom: 4px;
+#send-btn:hover { opacity: 0.85; }
+#send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+#cancel-btn {
+  background: rgba(224,108,117,0.2);
+  border: 1px solid rgba(224,108,117,0.35);
+  color: var(--red);
 }
 
-.graph-onboarding-title {
-  font-size: 15px;
-  font-weight: 600;
-  opacity: 0.5;
+.auto-allow-row {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 8px;
+  font-size: 11px; color: var(--text-dim);
+  user-select: none;
 }
-
-.graph-onboarding-subtitle {
-  font-size: 13px;
-  opacity: 0.4;
-  line-height: 1.5;
+.auto-allow-row select {
+  background: var(--bg-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  padding: 3px 6px;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
 }
 
-/* Symbol detail panel */
+/* ── Symbol detail panel ─────────────────────────────────────────────── */
 #symbol-detail {
-  position: absolute;
-  top: 0;
-  right: 0;
+  flex-shrink: 0;
   width: 380px;
   min-width: 200px;
   max-width: 80%;
@@ -1896,82 +1153,54 @@ main::-webkit-scrollbar-thumb {
   background: var(--bg-surface);
   border-left: 1px solid var(--border);
   overflow-y: auto;
-  padding: 16px;
-  z-index: 50;
-  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
+  padding: 18px 16px;
+  position: relative;
+  box-shadow: -4px 0 20px rgba(0,0,0,0.35);
 }
 
 #symbol-detail .resize-handle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 5px;
-  height: 100%;
-  cursor: col-resize;
-  background: transparent;
-  z-index: 51;
+  position: absolute; top: 0; left: 0;
+  width: 5px; height: 100%;
+  cursor: col-resize; background: transparent; z-index: 51;
 }
-
 #symbol-detail .resize-handle:hover,
-#symbol-detail .resize-handle.dragging {
-  background: var(--accent-dim);
-}
+#symbol-detail .resize-handle.dragging { background: var(--accent-dim); }
 
 .detail-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.detail-name {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text);
-  word-break: break-all;
+  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
 }
+.detail-name { font-size: 15px; font-weight: 600; color: var(--text); word-break: break-all; }
 
 .detail-kind-badge {
-  font-size: 11px;
+  font-size: 10px;
   padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
+  border-radius: 99px;
+  font-weight: 600;
   flex-shrink: 0;
+  border: 1px solid transparent;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent-line);
 }
 
 .detail-file {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 12px;
+  font-size: 11px; color: var(--text-dim); margin-bottom: 14px;
 }
-
 .detail-file-link {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  text-decoration: underline;
-  text-decoration-color: rgba(124, 92, 255, 0.35);
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.detail-file-link:hover {
-  color: var(--text);
-  text-decoration-color: var(--accent);
+  padding: 0; border: 0; background: none; color: inherit; font: inherit;
+  text-align: left; text-decoration: underline;
+  text-decoration-color: rgba(86,200,216,0.28);
+  text-underline-offset: 2px; cursor: pointer;
 }
+.detail-file-link:hover { color: var(--text); text-decoration-color: var(--accent); }
 
 .detail-signature {
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 8px 10px;
-  font-size: 12px;
-  color: var(--text);
-  overflow-x: auto;
-  white-space: pre-wrap;
+  font-size: 11px; color: var(--text);
+  overflow-x: auto; white-space: pre-wrap;
   margin-bottom: 12px;
   font-family: var(--font-mono);
 }
@@ -1979,251 +1208,309 @@ main::-webkit-scrollbar-thumb {
 .detail-code {
   background: var(--bg) !important;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 10px 12px !important;
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--text);
-  overflow: auto;
-  max-height: 300px;
-  white-space: pre;
-  margin-bottom: 12px;
-  font-family: var(--font-mono);
-  tab-size: 2;
-}
-
-.detail-actions {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.detail-actions .header-btn {
-  flex: 1;
-  text-align: center;
+  font-size: 11px; line-height: 1.5; color: var(--text);
+  overflow: auto; max-height: 280px; white-space: pre;
+  margin-bottom: 12px; font-family: var(--font-mono); tab-size: 2;
 }
 
-.detail-section {
-  margin-bottom: 14px;
-}
+.detail-actions { display: flex; gap: 6px; margin-bottom: 16px; }
+.detail-actions .header-btn { flex: 1; text-align: center; }
 
+.detail-section { margin-bottom: 14px; }
 .detail-section-title {
-  font-size: 11px;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 6px;
-  font-weight: 600;
+  font-size: 10px; color: var(--text-dim);
+  text-transform: uppercase; letter-spacing: 0.08em;
+  margin-bottom: 6px; font-weight: 600;
 }
-
 .detail-section-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 12px;
+  display: flex; flex-direction: column; gap: 2px; font-size: 12px;
 }
 
 .detail-link {
-  color: var(--accent);
-  cursor: pointer;
-  padding: 3px 6px;
-  border-radius: 3px;
+  color: var(--accent); cursor: pointer;
+  padding: 3px 6px; border-radius: var(--r-sm);
   transition: background 0.15s;
 }
+.detail-link:hover { background: var(--bg-hover); }
+.detail-empty { color: var(--text-dim); font-style: italic; font-size: 12px; }
 
-.detail-link:hover {
-  background: var(--bg-hover);
+/* Agent pulse */
+@keyframes agent-pulse {
+  0%, 100% { border-color: rgba(86,200,216,0.5); }
+  50%       { border-color: rgba(86,200,216,0.2); }
 }
 
-.detail-empty {
-  color: var(--text-dim);
-  font-style: italic;
+#symbol-detail::-webkit-scrollbar { width: 5px; }
+#symbol-detail::-webkit-scrollbar-track { background: transparent; }
+#symbol-detail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ── Annotations ─────────────────────────────────────────────────────── */
+.detail-annotation-item {
+  display: flex; align-items: flex-start; gap: 6px;
+  padding: 5px 8px; border-radius: var(--r-sm);
+  font-size: 12px; color: var(--text);
+  background: var(--bg); border: 1px solid var(--border);
+  margin-bottom: 4px;
 }
+.detail-annotation-item .annotation-text { flex: 1; word-break: break-word; }
+.detail-annotation-item .annotation-remove {
+  background: none; border: none; color: var(--text-dim);
+  cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; flex-shrink: 0;
+}
+.detail-annotation-item .annotation-remove:hover { color: var(--red); }
 
-/* Agent pulse animation */
-@keyframes agent-pulse {
-  0%, 100% { border-color: #ff9e64; }
-  50% { border-color: #e0af68; }
+.detail-annotation-input { display: flex; gap: 6px; margin-top: 6px; }
+.detail-annotation-textarea {
+  flex: 1; background: var(--bg);
+  border: 1px solid var(--border); border-radius: var(--r-sm);
+  color: var(--text); font-family: var(--font-mono);
+  font-size: 12px; padding: 5px 8px; resize: none;
+  min-height: 28px; max-height: 80px;
 }
+.detail-annotation-textarea:focus { outline: none; border-color: var(--accent-line); }
+.detail-annotation-input .dropdown-action { align-self: flex-end; }
 
-#symbol-detail::-webkit-scrollbar {
-  width: 5px;
+/* ── Explain output ──────────────────────────────────────────────────── */
+.detail-explain-content {
+  white-space: pre-wrap;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  padding: 10px 12px;
+  font-size: 12px; line-height: 1.5;
+  color: var(--text); max-height: 400px;
+  overflow-y: auto; font-family: var(--font-mono);
 }
+.detail-explain-content::-webkit-scrollbar { width: 5px; }
+.detail-explain-content::-webkit-scrollbar-track { background: transparent; }
+.detail-explain-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
-#symbol-detail::-webkit-scrollbar-track {
-  background: transparent;
+.explain-status {
+  display: flex; align-items: center; gap: 8px;
+  color: var(--text-dim); font-size: 12px;
+}
+.explain-spinner {
+  width: 12px; height: 12px;
+  border: 2px solid var(--border); border-top-color: var(--accent);
+  border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
 }
+@keyframes spin { to { transform: rotate(360deg); } }
 
-#symbol-detail::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
+/* ── Modals ──────────────────────────────────────────────────────────── */
+.hidden { display: none !important; }
+
+.modal {
+  position: fixed; inset: 0; z-index: 500;
+}
+.modal-backdrop {
+  position: absolute; inset: 0;
+  background: rgba(6, 8, 14, 0.78);
+  backdrop-filter: blur(6px);
+}
+.modal-panel {
+  position: absolute;
+  top: 50%; left: 50%;
+  width: min(960px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  transform: translate(-50%, -50%);
+  display: flex; flex-direction: column;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-xl);
+  box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
+  overflow: hidden;
 }
+.modal-panel-compact { width: min(640px, calc(100vw - 32px)); }
+.modal-panel-file-preview { width: min(1200px, 80vw); height: 80vh; max-width: 80vw; max-height: 80vh; }
 
-/* Annotation items */
-.detail-annotation-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 4px 6px;
-  border-radius: 3px;
-  font-size: 12px;
-  color: var(--text);
-  background: var(--bg);
-  margin-bottom: 4px;
+.modal-header, .modal-footer, .settings-toolbar { padding: 18px 20px; }
+.modal-header {
+  display: flex; align-items: flex-start;
+  justify-content: space-between; gap: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h2 { font-size: 15px; color: var(--text); margin-bottom: 4px; }
+.modal-subtitle { font-size: 12px; color: var(--text-dim); }
+
+/* ── Permission modal ────────────────────────────────────────────────── */
+.permission-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
+.permission-tool { display: flex; flex-direction: column; gap: 4px; }
+.permission-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.permission-tool code {
+  font-family: var(--font-mono); font-size: 12px;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: var(--r-sm); padding: 4px 8px; align-self: flex-start;
+  color: var(--accent);
+}
+.permission-tool-input {
+  margin: 0; padding: 10px;
+  border-radius: var(--r-md);
+  background: var(--bg); border: 1px solid var(--border);
+  color: var(--text); font-size: 12px; font-family: var(--font-mono);
+  max-height: 240px; overflow: auto;
+  white-space: pre-wrap; word-break: break-word;
 }
 
-.detail-annotation-item .annotation-text {
-  flex: 1;
-  word-break: break-word;
+/* ── File preview modal ──────────────────────────────────────────────── */
+.file-preview-body {
+  flex: 1; min-height: 0;
+  padding: 0 20px 20px; overflow: auto;
+}
+.file-preview-code {
+  margin: 0; min-height: 100%;
+  padding: 18px; border-radius: var(--r-lg);
+  background: var(--bg); border: 1px solid var(--border);
+  color: var(--text); font-size: 12px;
+  line-height: 1.6; overflow: auto;
+  white-space: pre; font-family: var(--font-mono);
 }
 
-.detail-annotation-item .annotation-remove {
-  background: none;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 2px;
-  line-height: 1;
-  flex-shrink: 0;
+/* ── Settings modal ──────────────────────────────────────────────────── */
+.settings-toolbar {
+  display: flex; align-items: flex-end;
+  justify-content: space-between; gap: 16px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(15, 17, 24, 0.6);
+}
+.settings-path-group { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
+.settings-path-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
+.settings-path {
+  max-width: min(100%, 500px); overflow-x: auto; white-space: nowrap;
+  color: var(--accent); background: var(--accent-soft);
+  border: 1px solid var(--accent-line); border-radius: 99px; padding: 3px 10px;
 }
 
-.detail-annotation-item .annotation-remove:hover {
-  color: var(--red);
+.settings-banner {
+  margin: 12px 20px 0; padding: 10px 12px;
+  border-radius: var(--r-md); font-size: 12px; border: 1px solid transparent;
 }
+.settings-banner.info    { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
+.settings-banner.success { background: rgba(125,206,160,0.10); border-color: rgba(125,206,160,0.22); color: var(--green); }
+.settings-banner.error   { background: rgba(224,108,117,0.10); border-color: rgba(224,108,117,0.2); color: var(--red); }
 
-.detail-annotation-input {
-  display: flex;
-  gap: 6px;
-  margin-top: 6px;
+.settings-list {
+  flex: 1; min-height: 0; overflow-y: auto;
+  padding: 16px 20px 20px;
+  display: flex; flex-direction: column; gap: 12px;
 }
+.settings-list::-webkit-scrollbar { width: 5px; }
+.settings-list::-webkit-scrollbar-track { background: transparent; }
+.settings-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
 
-.detail-annotation-textarea {
-  flex: 1;
-  background: var(--bg);
+.settings-item {
+  background: var(--bg-2);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-lg); padding: 16px;
+}
+.settings-item.is-disabled { border-color: var(--accent-line); }
+.settings-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
+.settings-item-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
+.settings-item-description { font-size: 12px; color: var(--text-dim); }
+.settings-item-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
+
+.settings-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; border: 1px solid transparent; white-space: nowrap; }
+.settings-badge.env      { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
+.settings-badge.override { color: var(--yellow); background: rgba(212,168,75,0.12); border-color: rgba(212,168,75,0.22); }
+
+.settings-item-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
+.settings-meta-block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; min-width: 0; }
+.settings-meta-label { display: block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
+.settings-meta-value { font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
+.settings-item-controls { display: flex; flex-direction: column; gap: 8px; }
+
+.settings-control, .settings-select {
+  width: 100%; background: var(--bg);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--r-sm);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 12px;
-  padding: 5px 8px;
-  resize: none;
-  min-height: 28px;
-  max-height: 80px;
 }
+.settings-control { padding: 9px 11px; }
+.settings-select  { padding: 8px 10px; }
+.settings-control:disabled, .settings-select:disabled { cursor: not-allowed; opacity: 0.55; background: rgba(12,15,22,0.8); }
+.settings-control:focus, .settings-select:focus { outline: none; border-color: var(--accent-line); }
 
-.detail-annotation-textarea:focus {
-  outline: none;
-  border-color: var(--accent-dim);
-}
+.settings-help { font-size: 11px; color: var(--text-dim); }
+.settings-help-warning { color: var(--red); font-weight: 600; }
 
-.detail-annotation-input .dropdown-action {
-  align-self: flex-end;
+.modal-footer {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; border-top: 1px solid var(--border);
 }
+.settings-footnote { font-size: 11px; color: var(--text-dim); max-width: 560px; }
+.settings-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 
-/* Explain output area */
-.detail-explain-content {
-  white-space: pre-wrap;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 10px 12px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--text);
-  max-height: 400px;
-  overflow-y: auto;
-  font-family: var(--font-mono);
+/* ── Session banners ─────────────────────────────────────────────────── */
+.settings-session-banner {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 14px; margin: 0 0 14px; padding: 12px 14px;
+  border-radius: var(--r-lg); border: 1px solid var(--accent-line); background: var(--accent-soft);
 }
+.settings-session-copy { min-width: 0; }
+.settings-session-title { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
+.settings-session-meta { font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
 
-.detail-explain-content::-webkit-scrollbar {
-  width: 5px;
+.settings-provider-shortcuts {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
+  margin-bottom: 14px; padding: 14px 16px;
+  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-2);
 }
+.settings-provider-shortcuts-copy { display: flex; flex-direction: column; gap: 4px; }
+.settings-provider-shortcuts-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
 
-.detail-explain-content::-webkit-scrollbar-track {
-  background: transparent;
+/* ── OpenRouter / OpenAI-compat connect modals ───────────────────────── */
+.openrouter-connect-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.openrouter-connect-lead { font-size: 13px; color: var(--text); }
+.openrouter-connect-note {
+  padding: 12px 14px; border-radius: var(--r-lg);
+  border: 1px solid var(--accent-line); background: var(--accent-soft);
 }
+.openrouter-connect-note strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; }
+.openrouter-connect-note p, .openrouter-connect-help { font-size: 12px; color: var(--text-dim); }
 
-.detail-explain-content::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
+.openrouter-persist-toggle {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 12px 14px; border-radius: var(--r-lg);
+  border: 1px solid var(--border); background: var(--bg-2); cursor: pointer;
 }
+.openrouter-persist-toggle input { margin-top: 2px; accent-color: var(--accent); }
+.openrouter-persist-toggle span { font-size: 12px; color: var(--text); }
 
-.explain-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-dim);
-  font-size: 12px;
+.provider-input-group { display: flex; flex-direction: column; gap: 6px; }
+.provider-input-label { color: var(--text); font-size: 12px; font-weight: 500; }
+.provider-input {
+  width: 100%; background: var(--bg);
+  border: 1px solid var(--border-mid); border-radius: var(--r-sm);
+  color: var(--text); font-family: var(--font-mono);
+  font-size: 12px; padding: 9px 10px;
 }
+.provider-input:focus { outline: none; border-color: var(--accent-line); }
 
-.explain-spinner {
-  width: 12px;
-  height: 12px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  flex-shrink: 0;
-}
+/* ── Scrollbars ──────────────────────────────────────────────────────── */
+main::-webkit-scrollbar, .settings-path::-webkit-scrollbar { width: 5px; height: 5px; }
+main::-webkit-scrollbar-track, .settings-path::-webkit-scrollbar-track { background: transparent; }
+main::-webkit-scrollbar-thumb, .settings-path::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+/* ── Responsive ──────────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .modal-panel { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
+  .settings-toolbar, .modal-footer, .settings-item-header { flex-direction: column; align-items: stretch; }
+  .openrouter-persist-toggle { align-items: flex-start; }
+  .settings-path-group { align-items: flex-start; }
+  .settings-item-badges { justify-content: flex-start; }
+  .settings-item-meta { grid-template-columns: 1fr; }
+  .settings-actions { width: 100%; justify-content: flex-end; }
+  #analysis-panel { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: min(70vh, 560px); }
+  .analysis-panel-header { flex-direction: column; align-items: stretch; }
+  .analysis-panel-actions { justify-content: flex-end; }
+  .analysis-summary { grid-template-columns: 1fr 1fr; }
 }
 
-@media (max-width: 900px) {
-  .modal-panel {
-    width: calc(100vw - 20px);
-    max-height: calc(100vh - 20px);
-  }
-
-  .settings-toolbar,
-  .modal-footer,
-  .settings-item-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .openrouter-persist-toggle {
-    align-items: flex-start;
-  }
-
-  .settings-path-group {
-    align-items: flex-start;
-  }
-
-  .settings-item-badges {
-    justify-content: flex-start;
-  }
-
-  .settings-item-meta {
-    grid-template-columns: 1fr;
-  }
-
-  .settings-actions {
-    width: 100%;
-    justify-content: flex-end;
-  }
-
-  #analysis-panel {
-    top: auto;
-    left: 12px;
-    right: 12px;
-    bottom: 12px;
-    width: auto;
-    max-height: min(70vh, 560px);
-  }
-
-  .analysis-panel-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .analysis-panel-actions {
-    justify-content: flex-end;
-  }
-
-  .analysis-summary {
-    grid-template-columns: 1fr 1fr;
-  }
+@media (max-width: 760px) {
+  .settings-session-banner { flex-direction: column; align-items: flex-start; }
+  .settings-provider-shortcuts { flex-direction: column; }
+  .settings-provider-shortcuts-actions { width: 100%; justify-content: flex-start; }
 }