pi-tau-web-server 1.0.8

package/public/style.css

@@ -0,0 +1,3864 @@
+/* ═══════════════════════════════════════════════════════
+   TAU — Dark Glassmorphism
+   ═══════════════════════════════════════════════════════ */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Global focus-visible — accessible keyboard focus ring */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: none; /* handled by their own focus styles */
+}
+
+:root {
+  /* Shape */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 100px;
+
+  /* Sizing */
+  --sidebar-width: 272px;
+
+  /* Motion */
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --duration: 0.2s;
+
+  /* Glass */
+  --blur: 24px;
+  --blur-heavy: 48px;
+
+  /* Semantic */
+  --success: #34d399;
+  --error: #f87171;
+  --warning: #fbbf24;
+}
+
+/* ─── Dusk — clean neutral dark (default) ─── */
+:root,
+:root[data-theme="night"] {
+  color-scheme: dark;
+
+  --bg-solid: #212121;
+  --header-bg: rgba(33, 33, 33, 0.7);
+  --sidebar-bg-mobile: rgba(40, 40, 38, 0.95);
+  --bg-glass: rgba(255, 255, 255, 0.04);
+  --bg-glass-hover: rgba(255, 255, 255, 0.06);
+  --bg-glass-active: rgba(255, 255, 255, 0.08);
+  --bg-glass-strong: rgba(255, 255, 255, 0.05);
+  --bg-frosted: rgba(33, 33, 33, 0.85);
+
+  --text-primary: rgba(255, 255, 255, 0.88);
+  --text-secondary: rgba(255, 255, 255, 0.50);
+  --text-dim: rgba(255, 255, 255, 0.30);
+  --text-ghost: rgba(255, 255, 255, 0.10);
+
+  --accent: #a0a0a0;
+  --accent-glow: rgba(255, 255, 255, 0.06);
+  --accent-subtle: rgba(255, 255, 255, 0.04);
+  --accent-text: #c0c0c0;
+
+  --user-bubble: rgba(255, 255, 255, 0.06);
+  --user-bubble-text: var(--text-primary);
+  --user-bubble-border: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
+
+  --tool-accent: #777;
+  --tool-accent-text: #999;
+  --tool-bg: rgba(255, 255, 255, 0.03);
+
+  --thinking-accent: #666;
+  --thinking-accent-text: #888;
+  --thinking-bg: rgba(255, 255, 255, 0.02);
+
+  --border: rgba(255, 255, 255, 0.06);
+  --border-hover: rgba(255, 255, 255, 0.10);
+  --border-bright: rgba(255, 255, 255, 0.14);
+
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-inset: none;
+
+}
+
+/* ─── Midnight — OLED black ─── */
+:root[data-theme="midnight"] {
+  color-scheme: dark;
+
+  --bg-solid: #000000;
+  --header-bg: rgba(0, 0, 0, 0.65);
+  --sidebar-bg-mobile: rgba(18, 18, 17, 0.95);
+  --bg-glass: rgba(255, 255, 255, 0.03);
+  --bg-glass-hover: rgba(255, 255, 255, 0.05);
+  --bg-glass-active: rgba(255, 255, 255, 0.07);
+  --bg-glass-strong: rgba(255, 255, 255, 0.04);
+  --bg-frosted: rgba(0, 0, 0, 0.90);
+
+  --text-primary: rgba(255, 255, 255, 0.85);
+  --text-secondary: rgba(255, 255, 255, 0.45);
+  --text-dim: rgba(255, 255, 255, 0.32);
+  --text-ghost: rgba(255, 255, 255, 0.08);
+
+  --accent: #6a7a88;
+  --accent-glow: rgba(106, 122, 136, 0.10);
+  --accent-subtle: rgba(106, 122, 136, 0.06);
+  --accent-text: #8a9aa8;
+
+  --user-bubble: rgba(255, 255, 255, 0.08);
+  --user-bubble-text: var(--text-primary);
+  --user-bubble-border: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
+
+  --tool-accent: #4a5565;
+  --tool-accent-text: #8a95a5;
+  --tool-bg: rgba(255, 255, 255, 0.06);
+
+  --thinking-accent: #4a5a72;
+  --thinking-accent-text: #8a9ab8;
+  --thinking-bg: rgba(60, 75, 110, 0.12);
+
+  --border: rgba(255, 255, 255, 0.04);
+  --border-hover: rgba(255, 255, 255, 0.08);
+  --border-bright: rgba(255, 255, 255, 0.12);
+
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-inset: none;
+
+}
+
+/* ─── Dawn — warm blue dark ─── */
+:root[data-theme="dawn"] {
+  color-scheme: dark;
+
+  --bg-solid: #1a1d26;
+  --header-bg: rgba(26, 29, 38, 0.65);
+  --sidebar-bg-mobile: rgba(30, 34, 44, 0.95);
+  --bg-glass: rgba(255, 255, 255, 0.04);
+  --bg-glass-hover: rgba(255, 255, 255, 0.07);
+  --bg-glass-active: rgba(255, 255, 255, 0.09);
+  --bg-glass-strong: rgba(255, 255, 255, 0.06);
+  --bg-frosted: rgba(26, 29, 38, 0.78);
+
+  --text-primary: rgba(255, 255, 255, 0.90);
+  --text-secondary: rgba(255, 255, 255, 0.55);
+  --text-dim: rgba(255, 255, 255, 0.35);
+  --text-ghost: rgba(255, 255, 255, 0.12);
+
+  --accent: #7a8ab0;
+  --accent-glow: rgba(122, 138, 176, 0.2);
+  --accent-subtle: rgba(122, 138, 176, 0.1);
+  --accent-text: #a0b4d8;
+
+  --user-bubble: rgba(122, 138, 176, 0.1);
+  --user-bubble-text: var(--text-primary);
+  --user-bubble-border: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
+
+  --tool-accent: #6a5a80;
+  --tool-accent-text: #a090b8;
+  --tool-bg: rgba(106, 90, 128, 0.07);
+
+  --thinking-accent: #5a7a9a;
+  --thinking-accent-text: #8ab4d8;
+  --thinking-bg: rgba(90, 122, 154, 0.07);
+
+  --border: rgba(255, 255, 255, 0.08);
+  --border-hover: rgba(255, 255, 255, 0.13);
+  --border-bright: rgba(255, 255, 255, 0.19);
+
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-inset: none;
+
+  --success: #34d399;
+
+}
+
+/* ─── Clean — Apple-style light ─── */
+:root[data-theme="clean"] {
+  color-scheme: light;
+
+  --bg-solid: #ffffff;
+  --header-bg: rgba(255, 255, 255, 0.65);
+  --sidebar-bg-mobile: rgba(242, 242, 247, 0.95);
+  --bg-glass: rgba(0, 0, 0, 0.03);
+  --bg-glass-hover: rgba(0, 0, 0, 0.06);
+  --bg-glass-active: rgba(0, 0, 0, 0.09);
+  --bg-glass-strong: rgba(0, 0, 0, 0.04);
+  --bg-frosted: rgba(255, 255, 255, 0.82);
+
+  --text-primary: rgba(0, 0, 0, 0.88);
+  --text-secondary: rgba(0, 0, 0, 0.55);
+  --text-dim: rgba(0, 0, 0, 0.35);
+  --text-ghost: rgba(0, 0, 0, 0.12);
+
+  --accent: #0580c4;
+  --accent-glow: rgba(5, 128, 196, 0.15);
+  --accent-subtle: rgba(5, 128, 196, 0.06);
+  --accent-text: #0470b0;
+  --header-pill-text: rgba(0, 0, 0, 0.55);
+
+  --user-bubble: #2a96d6;
+  --user-bubble-text: white;
+
+  --tool-accent: #007aff;
+  --tool-accent-text: #007aff;
+  --tool-bg: rgba(0, 122, 255, 0.05);
+
+  --thinking-accent: #5ac8fa;
+  --thinking-accent-text: #2a8abf;
+  --thinking-bg: rgba(90, 200, 250, 0.06);
+
+  --border: rgba(0, 0, 0, 0.08);
+  --border-hover: rgba(0, 0, 0, 0.14);
+  --border-bright: rgba(0, 0, 0, 0.2);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-inset: none;
+
+  --success: #34c759;
+
+}
+
+/* ─── Terracotta — warm light ─── */
+:root[data-theme="terracotta"] {
+  color-scheme: light;
+
+  --bg-solid: #f4f1ec;
+  --header-bg: rgba(244, 241, 236, 0.65);
+  --sidebar-bg-mobile: rgba(240, 234, 224, 0.95);
+  --bg-glass: rgba(244, 241, 236, 0.6);
+  --bg-glass-hover: rgba(0, 0, 0, 0.06);
+  --bg-glass-active: rgba(0, 0, 0, 0.10);
+  --bg-glass-strong: rgba(244, 241, 236, 0.7);
+  --bg-frosted: rgba(244, 241, 236, 0.8);
+
+  --text-primary: rgba(0, 0, 0, 0.92);
+  --text-secondary: rgba(0, 0, 0, 0.62);
+  --text-dim: rgba(0, 0, 0, 0.38);
+  --text-ghost: rgba(0, 0, 0, 0.14);
+
+  --accent: #b06a48;
+  --accent-glow: rgba(176, 106, 72, 0.15);
+  --accent-subtle: rgba(176, 106, 72, 0.08);
+  --accent-text: #a05e3e;
+  --header-pill-text: rgba(0, 0, 0, 0.65);
+
+  --user-bubble: #b06a48;
+  --user-bubble-text: white;
+
+  --tool-accent: #5c2860;
+  --tool-accent-text: #6b3570;
+  --tool-bg: rgba(92, 40, 96, 0.06);
+
+  --thinking-accent: #3a6a9b;
+  --thinking-accent-text: #4a80b0;
+  --thinking-bg: rgba(58, 106, 155, 0.06);
+
+  --border: rgba(0, 0, 0, 0.06);
+  --border-hover: rgba(0, 0, 0, 0.1);
+  --border-bright: rgba(0, 0, 0, 0.15);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-inset: none;
+
+  --success: #1a8a5a;
+
+}
+
+/* ─── Sage — cool green light ─── */
+:root[data-theme="sage"] {
+  color-scheme: light;
+
+  --bg-solid: #f0f2ec;
+  --header-bg: rgba(240, 242, 236, 0.65);
+  --sidebar-bg-mobile: rgba(232, 238, 226, 0.95);
+  --bg-glass: rgba(240, 242, 236, 0.6);
+  --bg-glass-hover: rgba(0, 0, 0, 0.06);
+  --bg-glass-active: rgba(0, 0, 0, 0.10);
+  --bg-glass-strong: rgba(240, 242, 236, 0.7);
+  --bg-frosted: rgba(240, 242, 236, 0.8);
+
+  --text-primary: rgba(0, 0, 0, 0.90);
+  --text-secondary: rgba(0, 0, 0, 0.58);
+  --text-dim: rgba(0, 0, 0, 0.35);
+  --text-ghost: rgba(0, 0, 0, 0.12);
+
+  --accent: #6a7d5a;
+  --accent-glow: rgba(106, 125, 90, 0.15);
+  --accent-subtle: rgba(106, 125, 90, 0.08);
+  --accent-text: #5a6d4a;
+  --header-pill-text: rgba(0, 0, 0, 0.65);
+
+  --user-bubble: #6a7d5a;
+  --user-bubble-text: white;
+
+  --tool-accent: #4a3860;
+  --tool-accent-text: #5c4870;
+  --tool-bg: rgba(74, 56, 96, 0.06);
+
+  --thinking-accent: #3a6a7a;
+  --thinking-accent-text: #4a808a;
+  --thinking-bg: rgba(58, 106, 122, 0.06);
+
+  --border: rgba(0, 0, 0, 0.06);
+  --border-hover: rgba(0, 0, 0, 0.1);
+  --border-bright: rgba(0, 0, 0, 0.15);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-inset: none;
+
+  --success: #2a8a52;
+
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
+  background: var(--bg-solid);
+  color: var(--text-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 15px;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Layout — the glass sits on top of the gradient field
+   ═══════════════════════════════════════════════════════ */
+
+.app-layout {
+  display: flex;
+  height: 100vh;
+  height: 100dvh;
+  position: relative;
+}
+
+
+/* ═══════════════════════════════════════════════════════
+   Sidebar — smoked glass panel
+   ═══════════════════════════════════════════════════════ */
+
+.sidebar {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background: var(--sidebar-bg-mobile);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.5);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.5);
+  border-right: none;
+
+  display: flex;
+  flex-direction: column;
+  transition: margin-left 0.3s var(--ease);
+  z-index: 100;
+  position: relative;
+}
+
+.sidebar.collapsed {
+  margin-left: calc(var(--sidebar-width) * -1);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 12px;
+  -webkit-app-region: drag;
+}
+
+/* Mode toggle pills */
+.mode-toggle {
+  display: flex;
+  gap: 2px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 2px;
+  flex-shrink: 0;
+  -webkit-app-region: no-drag;
+}
+
+.mode-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 26px;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  font-size: 13px;
+  color: var(--text-dim);
+  transition: all var(--duration) var(--ease);
+}
+
+.tau-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+}
+
+.tau-icon-welcome {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius);
+}
+
+.mode-link:hover {
+  color: var(--text-secondary);
+  background: var(--bg-glass-hover);
+}
+
+.mode-link:active {
+  opacity: 0.7;
+}
+
+.mode-link.active {
+  color: var(--accent-text);
+  background: var(--accent-subtle);
+  box-shadow: var(--shadow-inset);
+}
+
+/* Sidebar search */
+.sidebar-search-input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  transition: all var(--duration) var(--ease);
+  -webkit-app-region: no-drag;
+}
+
+.sidebar-search-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+  background: var(--bg-glass-hover);
+}
+
+.sidebar-search-input::placeholder { color: var(--text-dim); }
+
+.sidebar-actions {
+  display: flex;
+  gap: 2px;
+  -webkit-app-region: no-drag;
+}
+
+.icon-btn,
+.new-session-btn {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-dim);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--duration) var(--ease);
+}
+
+.icon-btn:hover,
+.new-session-btn:hover {
+  background: var(--bg-glass-hover);
+  color: var(--text-secondary);
+}
+
+.icon-btn:active,
+.new-session-btn:active {
+  opacity: 0.7;
+}
+
+.new-session-btn { color: var(--accent-text); }
+
+.icon-btn.spinning { animation: spin 0.5s ease; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+/* Session list */
+.session-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 8px;
+}
+
+.session-list::-webkit-scrollbar { width: 0; }
+
+.session-loading {
+  padding: 32px 12px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+/* Loading skeletons */
+.session-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 10px;
+}
+
+.session-skeleton-title {
+  height: 12px;
+  width: 75%;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--bg-glass) 25%, var(--bg-glass-hover) 50%, var(--bg-glass) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.session-skeleton-meta {
+  height: 8px;
+  width: 45%;
+  border-radius: var(--radius-xs);
+  background: linear-gradient(90deg, var(--bg-glass) 25%, var(--bg-glass-hover) 50%, var(--bg-glass) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  animation-delay: 0.15s;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Project groups */
+.project-group { margin-bottom: 2px; }
+
+.project-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  margin-top: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent-text);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--duration) var(--ease);
+  border-top: none;
+}
+
+.project-group:first-child .project-header {
+  margin-top: 0;
+}
+
+.project-header:hover { color: var(--accent); }
+
+.project-header .chevron {
+  font-size: 8px;
+  transition: transform var(--duration) var(--ease);
+  opacity: 0.4;
+}
+
+.project-header.collapsed .chevron { transform: rotate(-90deg); }
+
+.project-count {
+  margin-left: auto;
+  font-weight: 600;
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
+.project-sessions {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.project-sessions.collapsed { display: none; }
+
+/* Session items */
+.session-item {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: all var(--duration) var(--ease);
+}
+
+.session-item:hover {
+  background: var(--bg-glass-hover);
+}
+
+.session-item:active {
+  transform: scale(0.99);
+}
+
+.session-item.active {
+  background: var(--bg-glass-hover);
+}
+
+.session-item.hidden { display: none; }
+
+.session-title-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.session-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: var(--radius-pill);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+/* Context menu */
+.session-context-menu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 160px;
+  padding: 4px;
+  background: var(--bg-frosted);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  animation: fadeIn 0.15s var(--ease);
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background var(--duration) var(--ease);
+}
+
+.context-menu-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.context-menu-icon {
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+/* Favourite star in session items */
+.session-fav-icon {
+  color: var(--accent);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+/* Favourites header */
+.favourites-header {
+  color: var(--accent);
+}
+
+.fav-star {
+  font-size: 12px;
+}
+
+.tmux-tag {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent);
+  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
+}
+
+/* Search results */
+.search-results-header {
+  color: var(--accent-text);
+}
+
+.search-snippet {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.4;
+  margin-top: 2px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.search-snippet mark {
+  background: var(--accent-glow);
+  color: var(--accent-text);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.session-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+  flex: 1;
+  min-width: 0;
+}
+
+.session-item.active .session-title { color: var(--accent-text); }
+
+/* Live session indicator */
+.session-item.has-live-session .session-title::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
+  margin-right: 6px;
+  vertical-align: middle;
+  animation: pulse 2s infinite;
+}
+
+/* Live session read-only input */
+.input-area.no-active-live-session {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.session-rename-btn {
+  display: none;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all var(--duration) var(--ease);
+}
+
+.session-item:hover .session-rename-btn {
+  display: flex;
+}
+
+.session-rename-btn:hover {
+  background: var(--bg-glass-hover);
+  color: var(--text-secondary);
+}
+
+.session-rename-input {
+  flex: 1;
+  min-width: 0;
+  padding: 2px 6px;
+  background: var(--bg-glass);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+
+.session-meta {
+  font-size: 10px;
+  color: var(--text-dim);
+  margin-top: 4px;
+}
+
+/* Mobile overlay */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+  backdrop-filter: blur(8px);
+}
+
+.sidebar-overlay.visible { display: block; }
+
+/* ═══════════════════════════════════════════════════════
+   Main Area
+   ═══════════════════════════════════════════════════════ */
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+/* Header — translucent toolbar */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--header-bg);
+  backdrop-filter: blur(40px) saturate(1.5);
+  -webkit-backdrop-filter: blur(40px) saturate(1.5);
+  border-bottom: 1px solid var(--border);
+  min-height: 44px;
+  -webkit-app-region: drag;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.header::before {
+  display: none;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  -webkit-app-region: no-drag;
+}
+
+.sidebar-toggle,
+.settings-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 6px;
+  line-height: 1;
+  border-radius: var(--radius-md);
+  transition: all var(--duration) var(--ease);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-toggle:hover,
+.settings-btn:hover {
+  color: var(--text-secondary);
+  background: var(--bg-glass-hover);
+}
+
+.sidebar-toggle:active,
+.settings-btn:active {
+  opacity: 0.7;
+}
+
+.header h1 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Pill — unified base for header pills */
+.pill {
+  font-size: 10px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  white-space: nowrap;
+  transition: all var(--duration) var(--ease);
+}
+
+/* Anchor for the context pill + its stats-card popover */
+.stats-anchor {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* Context pill — merged context % / session cost pill. It is a real
+   <button> so it is keyboard-focusable; strip the UA button chrome and let
+   the shared .pill styling take over. */
+.context-pill {
+  appearance: none;
+  -webkit-appearance: none;
+  color: var(--header-pill-text, var(--text-dim));
+  display: none;
+  transition: all 0.3s var(--ease);
+  cursor: pointer;
+}
+
+.context-pill:hover {
+  border-color: var(--border-hover);
+  background: var(--bg-glass-hover);
+}
+
+.context-pill.visible { display: block; }
+
+.context-pill.warning {
+  color: var(--warning);
+  border-color: rgba(251, 191, 36, 0.25);
+}
+
+.context-pill.critical {
+  color: var(--error);
+  border-color: rgba(248, 113, 113, 0.25);
+  animation: pulse 2s infinite;
+}
+
+/* Session stats card popover */
+.stats-card {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 236px;
+  max-width: calc(100vw - 24px);
+  z-index: 1001;
+  background: var(--bg-frosted);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  box-shadow: var(--shadow-lg);
+  animation: dropdownIn 0.15s var(--ease);
+}
+
+.stats-card.hidden { display: none; }
+
+@keyframes dropdownIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.stats-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 3px 0;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.stats-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.stats-icon {
+  display: inline-flex;
+  color: var(--text-dim);
+}
+
+.stats-value {
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  color: var(--text-primary);
+  text-align: right;
+}
+
+.stats-context-detail {
+  display: block;
+  font-size: 10px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.stats-sep {
+  height: 1px;
+  background: var(--border);
+  margin: 6px 0;
+}
+
+.stats-empty {
+  padding: 4px 0;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-align: center;
+}
+
+/* Compact button — appears at 80% context */
+.compact-btn {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  background: rgba(248, 113, 113, 0.12);
+  border: 1px solid rgba(248, 113, 113, 0.25);
+  border-radius: var(--radius-pill);
+  color: var(--error);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all var(--duration) var(--ease);
+  animation: fadeIn 0.3s var(--ease);
+  margin-left: 6px;
+}
+
+.compact-btn:hover {
+  background: rgba(248, 113, 113, 0.2);
+  border-color: rgba(248, 113, 113, 0.4);
+}
+
+/* Compaction system messages */
+.compaction-message {
+  text-align: center;
+  padding: 12px;
+  font-size: 13px;
+  color: var(--text-dim);
+  opacity: 0.7;
+}
+
+.compaction-spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+.compaction-done {
+  color: var(--accent);
+  opacity: 0.8;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Model button — prominent in header */
+.model-input {
+  appearance: none;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 4px 10px;
+  font-size: 12px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  color: var(--text-primary);
+  transition: all var(--duration) var(--ease);
+  flex: 1 1 auto;
+  max-width: 360px;
+  min-width: 120px;
+  outline: none;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+}
+
+/* The label span is the text container: ellipsized on desktop, a swipeable
+   scroll container on mobile (buttons themselves are unreliable scrollers). */
+.model-input-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.model-input:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-hover);
+}
+
+.model-input:focus-visible {
+  border-color: var(--accent);
+}
+
+.model-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.model-input.invalid {
+  border-color: var(--error);
+}
+
+/* Status */
+.status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.status-indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  transition: all 0.4s var(--ease);
+}
+
+.status-indicator.connected {
+  background: var(--success);
+  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
+  animation: connectPop 0.4s var(--spring);
+}
+
+@keyframes connectPop {
+  from { transform: scale(0); }
+  50% { transform: scale(1.5); }
+  to { transform: scale(1); }
+}
+
+.status-indicator.disconnected {
+  background: var(--error);
+  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
+}
+
+.status-indicator.error {
+  background: var(--error);
+  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
+  animation: connectPop 0.4s var(--spring);
+}
+
+.status-indicator.streaming {
+  background: var(--accent);
+  animation: pulse 1.5s infinite;
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Settings — glass sheet
+   ═══════════════════════════════════════════════════════ */
+
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.settings-overlay.hidden { display: none; }
+
+.settings-panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--bg-frosted);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  z-index: 1001;
+  width: 300px;
+  max-width: 90vw;
+  box-shadow: var(--shadow-lg), var(--shadow-inset);
+  animation: sheetIn 0.3s var(--ease);
+}
+
+@keyframes sheetIn {
+  from { opacity: 0; transform: translate(-50%, -48%) scale(0.94); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.settings-header h3 {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.settings-close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius-md);
+  transition: all var(--duration) var(--ease);
+}
+
+.settings-close:hover {
+  color: var(--text-primary);
+  background: var(--bg-glass-hover);
+}
+
+.settings-body {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.settings-section-title {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 8px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0;
+}
+
+.settings-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.settings-toggle {
+  width: 40px;
+  height: 22px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: var(--bg-glass-strong);
+  cursor: pointer;
+  position: relative;
+  transition: all var(--duration) var(--ease);
+  padding: 0;
+}
+
+.settings-toggle::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  transition: all 0.25s var(--spring);
+}
+
+.settings-toggle.on {
+  background: var(--accent);
+}
+
+.settings-toggle.on::after {
+  left: 21px;
+  background: white;
+}
+
+.settings-value-btn {
+  padding: 4px 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+}
+
+.settings-value-btn:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-hover);
+}
+
+.settings-input {
+  padding: 5px 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  width: 140px;
+  transition: all var(--duration) var(--ease);
+}
+
+.settings-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+
+.settings-input::placeholder { color: var(--text-dim); }
+
+/* Theme grid */
+.theme-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  margin-bottom: 0;
+}
+
+.theme-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-family: inherit;
+  text-align: center;
+}
+
+.theme-swatch:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-hover);
+  transform: scale(1.02);
+}
+
+.theme-swatch:active {
+  transform: scale(0.97);
+}
+
+.theme-swatch.active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-inset);
+}
+
+
+/* Queued messages */
+/* Message images */
+.message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.message-image {
+  max-width: 240px;
+  max-height: 200px;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: transform 0.15s var(--ease);
+}
+
+.message-image:hover {
+  transform: scale(1.02);
+}
+
+.queued-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 4px;
+}
+
+.queued-messages.hidden { display: none; }
+
+.queued-msg {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  color: var(--text-secondary);
+  animation: msgIn 0.2s var(--ease);
+}
+
+.queued-msg-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queued-msg-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.queued-msg-cancel {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 14px;
+  line-height: 1;
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+  transition: color 0.15s;
+}
+
+.queued-msg-cancel:hover {
+  color: var(--error, #f87171);
+}
+
+.swatch-colors {
+  display: flex;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.swatch-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+}
+
+
+
+/* ═══════════════════════════════════════════════════════
+   Messages Area
+   ═══════════════════════════════════════════════════════ */
+
+.messages {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: 24px 24px 100px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  scroll-behavior: smooth;
+}
+
+.messages::-webkit-scrollbar { width: 6px; }
+.messages::-webkit-scrollbar-track { background: transparent; }
+.messages::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
+.messages::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }
+
+/* Welcome */
+.welcome {
+  text-align: center;
+  padding: 80px 20px 40px;
+  color: var(--text-dim);
+  animation: fadeIn 0.5s var(--ease);
+}
+
+.welcome-icon {
+  font-size: 56px;
+  margin-bottom: 16px;
+  opacity: 0.25;
+  font-weight: 200;
+}
+
+.welcome p {
+  margin-bottom: 4px;
+  font-size: 16px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.welcome .hint {
+  font-size: 13px;
+  color: var(--text-dim);
+  font-weight: 400;
+}
+
+.shortcuts-hint {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 20px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.shortcuts-hint span {
+  padding: 4px 10px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  backdrop-filter: blur(12px);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Message Bubbles
+   ═══════════════════════════════════════════════════════ */
+
+.message {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 4px;
+  max-width: 85%;
+  flex-shrink: 0;
+  animation: msgIn 0.25s var(--ease);
+}
+
+.message.user {
+  flex-direction: row-reverse;
+}
+
+.message .message-content {
+  min-width: 0;
+}
+
+.message.history { animation: none; }
+
+@keyframes msgIn {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.message.user { align-self: flex-end; }
+.message.assistant { align-self: flex-start; }
+.message-header { display: none; }
+
+.message-usage {
+  display: inline-block;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  margin-top: 2px;
+  opacity: 0.5;
+}
+
+.message-content {
+  padding: 8px 16px;
+  border-radius: var(--radius-lg);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+/* User bubble */
+.message.user .message-content {
+  background: var(--user-bubble);
+  color: var(--user-bubble-text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  border-bottom-right-radius: 6px;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-sm);
+  white-space: pre-wrap;
+  font-weight: 500;
+}
+
+/* User bubble markdown */
+.message.user .message-content blockquote {
+  border-left: 2px solid currentColor;
+  padding-left: 10px;
+  margin: 4px 0;
+  opacity: 0.75;
+  font-style: italic;
+}
+
+/* Assistant — clean, no container */
+.message.assistant .message-content {
+  background: none;
+  border: none;
+  padding: 4px 0;
+  color: var(--text-primary);
+}
+
+/* Markdown */
+.message.assistant .message-content p { margin-bottom: 8px; }
+.message.assistant .message-content p:last-child { margin-bottom: 0; }
+.message.assistant .message-content strong { font-weight: 600; }
+.message.assistant .message-content em { font-style: italic; color: var(--text-secondary); }
+.message.assistant .message-content a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-subtle); }
+.message.assistant .message-content a:hover { border-color: var(--accent-text); }
+.message.assistant .message-content ul,
+.message.assistant .message-content ol { margin: 6px 0; padding-left: 20px; }
+.message.assistant .message-content li { margin-bottom: 3px; }
+
+.message.assistant .message-content h1,
+.message.assistant .message-content h2,
+.message.assistant .message-content h3 {
+  margin: 14px 0 6px;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+}
+
+.message.assistant .message-content h1 { font-size: 18px; font-weight: 700; }
+.message.assistant .message-content h2 { font-size: 16px; font-weight: 600; }
+.message.assistant .message-content h3 { font-size: 14px; font-weight: 600; }
+
+.message.assistant .message-content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 12px 0;
+}
+
+.message.assistant .message-content blockquote {
+  border-left: 2px solid var(--accent);
+  padding-left: 12px;
+  margin: 8px 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* LaTeX math (KaTeX) */
+.message-content .math-block {
+  margin: 10px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.message-content .math-block .katex-display {
+  margin: 0;
+}
+
+.message-content .katex {
+  font-size: 1.05em;
+}
+
+.message-content .math-fallback {
+  opacity: 0.85;
+}
+
+/* Tables */
+.message.assistant .message-content .table-wrapper {
+  overflow-x: auto;
+  margin: 8px 0;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+}
+
+.message.assistant .message-content table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.message.assistant .message-content th {
+  background: var(--bg-glass-strong);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-secondary);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-hover);
+  white-space: nowrap;
+}
+
+.message.assistant .message-content td {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-primary);
+}
+
+.message.assistant .message-content tr:last-child td {
+  border-bottom: none;
+}
+
+.message.assistant .message-content tr:hover td {
+  background: var(--bg-glass);
+}
+
+/* Task lists */
+.message.assistant .message-content .task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.message.assistant .message-content .task-list-item {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.message.assistant .message-content .task-list-item input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--border-bright);
+  border-radius: var(--radius-xs);
+  background: var(--bg-glass);
+  flex-shrink: 0;
+  position: relative;
+  top: 2px;
+}
+
+.message.assistant .message-content .task-list-item input[type="checkbox"]:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.message.assistant .message-content .task-list-item input[type="checkbox"]:checked::after {
+  content: '✓';
+  color: white;
+  font-size: 10px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Inline images */
+.message.assistant .message-content .inline-image {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+  margin: 6px 0;
+  border: 1px solid var(--border);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Code Blocks — glass panel with frosted header
+   ═══════════════════════════════════════════════════════ */
+
+.code-block-wrapper {
+  position: relative;
+  margin: 8px 0;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(12px);
+}
+
+:root[data-theme="clean"] .code-block-wrapper,
+:root[data-theme="terracotta"] .code-block-wrapper,
+:root[data-theme="sage"] .code-block-wrapper {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.code-block-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  background: var(--bg-glass);
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+}
+
+.copy-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  transition: all var(--duration) var(--ease);
+  font-family: inherit;
+}
+
+.copy-btn:hover { background: var(--bg-glass-hover); color: var(--text-secondary); }
+.copy-btn.copied { color: var(--success); }
+
+pre {
+  background: transparent;
+  padding: 12px;
+  overflow-x: auto;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+}
+
+.code-block-wrapper pre {
+  border-radius: 0;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: var(--text-primary);
+  border: none;
+}
+
+code {
+  background: var(--bg-glass-strong);
+  border: 1px solid var(--border);
+  padding: 2px 7px;
+  border-radius: var(--radius-sm);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 0.88em;
+  color: var(--accent-text);
+}
+
+/* Streaming cursor */
+.message-content.streaming::after {
+  content: '▋';
+  animation: blink 1s infinite;
+  margin-left: 1px;
+  color: var(--accent);
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Thinking Blocks — subtle glass accordion
+   ═══════════════════════════════════════════════════════ */
+
+.thinking-block {
+  background: var(--thinking-bg);
+  border: 1px solid var(--border);
+  padding: 0;
+  margin: 2px 0;
+  border-radius: var(--radius);
+  font-size: 13px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  align-self: flex-start;
+  width: 100%;
+  flex-shrink: 0;
+  backdrop-filter: blur(12px);
+  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
+}
+
+.thinking-block:hover {
+  border-color: var(--border-hover);
+}
+
+.thinking-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  color: var(--text-dim);
+  transition: background var(--duration) var(--ease);
+}
+
+.thinking-toggle:hover { background: var(--bg-glass-hover); }
+
+.thinking-label {
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+}
+
+.thinking-toggle .chevron {
+  font-size: 8px;
+  transition: transform var(--duration) var(--ease);
+  opacity: 0.3;
+  flex-shrink: 0;
+}
+
+.thinking-toggle.expanded .chevron { transform: rotate(90deg); }
+
+.thinking-content {
+  display: none;
+  padding: 0 12px 12px;
+  white-space: pre-wrap;
+  font-style: italic;
+  border-top: 1px solid var(--border);
+  max-height: 260px;
+  overflow-y: auto;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
+}
+
+.thinking-content.expanded { display: block; }
+
+/* Hide thinking blocks when toggled off */
+body.hide-thinking .thinking-block { display: none !important; }
+
+/* ═══════════════════════════════════════════════════════
+   Tool Cards — glass with coloured left accent
+   ═══════════════════════════════════════════════════════ */
+
+.tool-card {
+  background: var(--tool-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin: 2px 0;
+  font-size: 13px;
+  overflow: hidden;
+  align-self: flex-start;
+  width: 100%;
+  flex-shrink: 0;
+  backdrop-filter: blur(12px);
+  transition: border-color var(--duration) var(--ease);
+}
+
+.tool-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--duration) var(--ease);
+}
+
+.tool-card-header:hover {
+  background: var(--bg-glass-hover);
+}
+
+.tool-card:hover {
+  border-color: var(--border-hover);
+}
+
+.tool-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.tool-card-chevron {
+  font-size: 8px;
+  transition: transform var(--duration) var(--ease);
+  opacity: 0.3;
+  flex-shrink: 0;
+}
+
+.tool-card-chevron.expanded { transform: rotate(90deg); }
+
+.tool-name {
+  font-weight: 600;
+  color: var(--tool-accent-text);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+}
+
+.tool-args-preview {
+  color: var(--text-dim);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 360px;
+}
+
+.tool-header-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.tool-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  border-radius: var(--radius-xs);
+  color: var(--text-dim);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+  padding: 0;
+}
+
+.tool-card-header:hover .tool-action-btn {
+  opacity: 0.6;
+}
+
+.tool-action-btn:hover {
+  opacity: 1 !important;
+  background: var(--bg-glass-hover);
+  color: var(--text-secondary);
+}
+
+.tool-action-btn.copied {
+  opacity: 1 !important;
+  color: var(--success);
+}
+
+.tool-status {
+  font-size: 10px;
+  padding: 2px 7px;
+  border-radius: var(--radius-pill);
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.tool-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tool-status.pending { background: var(--bg-glass-strong); color: var(--text-dim); border: 1px solid var(--border); }
+.tool-status.pending::before { content: '○'; font-size: 8px; }
+.tool-status.streaming { background: var(--tool-accent); color: white; animation: pulse 1.5s infinite; }
+.tool-status.streaming::before { content: '●'; font-size: 7px; animation: pulse 1s infinite; }
+.tool-status.complete { background: rgba(52, 211, 153, 0.1); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.2); }
+.tool-status.complete::before { content: '✓'; font-size: 9px; font-weight: 700; }
+.tool-status.error { background: rgba(248, 113, 113, 0.1); color: var(--error); border: 1px solid rgba(248, 113, 113, 0.2); }
+.tool-status.error::before { content: '!'; font-size: 9px; font-weight: 700; }
+
+.tool-card-body { display: none; border-top: 1px solid var(--border); }
+.tool-card-body.expanded { display: block; }
+
+.tool-args {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 10px 12px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  color: var(--text-secondary);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="clean"] .tool-args,
+:root[data-theme="terracotta"] .tool-args,
+:root[data-theme="sage"] .tool-args { background: rgba(0, 0, 0, 0.03); }
+
+.tool-output-wrapper { position: relative; }
+
+.tool-output-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 12px;
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.tool-output {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 10px 12px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  color: var(--text-secondary);
+  max-height: 260px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+:root[data-theme="clean"] .tool-output,
+:root[data-theme="terracotta"] .tool-output,
+:root[data-theme="sage"] .tool-output { background: rgba(0, 0, 0, 0.02); }
+
+.tool-output::-webkit-scrollbar { width: 4px; height: 4px; }
+.tool-output::-webkit-scrollbar-track { background: transparent; }
+.tool-output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+/* Diff view for Edit tool */
+.tool-diff {
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+  max-height: 300px;
+  overflow-y: auto;
+  border-bottom: 1px solid var(--border);
+}
+
+.diff-line {
+  padding: 1px 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.diff-removed {
+  background: rgba(248, 113, 113, 0.08);
+  color: var(--error);
+}
+
+.diff-added {
+  background: rgba(52, 211, 153, 0.08);
+  color: var(--success);
+}
+
+:root[data-theme="clean"] .diff-removed,
+:root[data-theme="terracotta"] .diff-removed,
+:root[data-theme="sage"] .diff-removed {
+  background: rgba(220, 80, 80, 0.08);
+  color: #b84040;
+}
+
+:root[data-theme="clean"] .diff-added,
+:root[data-theme="terracotta"] .diff-added,
+:root[data-theme="sage"] .diff-added {
+  background: rgba(40, 160, 90, 0.08);
+  color: #1a8a5a;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Typing Indicator
+   ═══════════════════════════════════════════════════════ */
+
+.typing-indicator {
+  padding: 0 24px 8px;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.typing-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0.4;
+  animation: typingBounce 1.4s infinite;
+}
+
+.typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typingBounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
+  30% { transform: translateY(-4px); opacity: 1; }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Input Area — floating glass field
+   ═══════════════════════════════════════════════════════ */
+
+.input-area {
+  padding: 10px 20px 12px;
+  background: var(--header-bg);
+  backdrop-filter: blur(40px) saturate(1.5);
+  -webkit-backdrop-filter: blur(40px) saturate(1.5);
+  border-top: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  overflow-x: hidden;
+}
+
+/* Image previews */
+.image-previews {
+  display: flex;
+  gap: 8px;
+  padding: 0 0 8px;
+  max-width: 800px;
+  overflow-x: auto;
+}
+
+.image-previews.hidden { display: none; }
+
+.image-preview {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+  animation: popIn 0.25s var(--spring);
+  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
+}
+
+.image-preview:hover {
+  transform: scale(1.05);
+}
+
+.image-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-preview-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  border: none;
+  color: white;
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--duration) var(--ease);
+}
+
+.image-preview:hover .image-preview-remove { opacity: 1; }
+
+.file-chip {
+  width: auto;
+  min-width: 64px;
+  max-width: 150px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+}
+
+.file-chip-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.file-chip-name {
+  font-size: 11px;
+  color: var(--text-secondary, rgba(255,255,255,0.5));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+#chat-form {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.input-left-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-self: center;
+}
+
+.input-icon-btn {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--duration) var(--ease);
+  flex-shrink: 0;
+}
+
+.input-icon-btn:hover {
+  color: var(--text-secondary);
+  background: var(--bg-glass-hover);
+}
+
+.input-icon-btn:active {
+  opacity: 0.7;
+}
+
+
+
+.input-bubble {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+#message-input {
+  flex: 1;
+  padding: 12px 44px 12px 18px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-sm), var(--shadow-inset);
+  font-size: 16px;
+  font-family: inherit;
+  outline: none;
+  resize: none;
+  max-height: 160px;
+  line-height: 1.45;
+  overflow-y: auto;
+  backdrop-filter: blur(var(--blur));
+  -webkit-backdrop-filter: blur(var(--blur));
+  transition: all var(--duration) var(--ease);
+}
+
+#message-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm), var(--shadow-inset);
+  background: var(--bg-glass-hover);
+}
+
+.input-mic-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--duration) var(--ease);
+}
+
+.input-mic-btn:hover {
+  color: var(--text-secondary);
+  background: var(--bg-glass-hover);
+}
+
+.input-mic-btn.recording {
+  color: var(--error);
+  animation: pulse 1.5s infinite;
+}
+
+#message-input:disabled { opacity: 0.35; cursor: not-allowed; }
+#message-input::placeholder { color: var(--text-dim); }
+
+:root[data-theme="clean"] #message-input,
+:root[data-theme="terracotta"] #message-input,
+:root[data-theme="sage"] #message-input {
+  border-color: var(--border-hover);
+}
+
+.input-actions { display: flex; gap: 4px; align-self: center; }
+
+#send-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent);
+  border: none;
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+  box-shadow: 3px 3px 10px var(--accent-glow), -2px -2px 6px rgba(255, 255, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+}
+
+#send-btn:hover:not(:disabled) {
+  transform: scale(1.1);
+  filter: brightness(1.15);
+  box-shadow: 0 6px 24px var(--accent-glow);
+}
+
+#send-btn:active:not(:disabled) {
+  transform: scale(0.88);
+  transition: transform 0.1s var(--ease);
+}
+
+.send-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+#abort-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  background: var(--error);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  border: none;
+  cursor: pointer;
+  color: white;
+  transition: all var(--duration) var(--ease);
+  box-shadow: 0 4px 16px rgba(248, 113, 113, 0.3);
+}
+
+#abort-btn:hover:not(:disabled) { transform: scale(1.1); }
+#abort-btn:active:not(:disabled) { transform: scale(0.88); transition: transform 0.1s var(--ease); }
+
+/* Primary button — use .btn-primary or dialog action buttons */
+.btn-primary,
+.dialog-actions button {
+  padding: 8px 18px;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.btn-primary:hover:not(:disabled),
+.dialog-actions button:hover:not(:disabled) { filter: brightness(1.1); }
+.btn-primary:disabled,
+.dialog-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
+
+.hidden { display: none !important; }
+
+/* ═══════════════════════════════════════════════════════
+   Dialogs — glass sheet
+   ═══════════════════════════════════════════════════════ */
+
+#dialog-container {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.15s;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.dialog {
+  background: var(--bg-frosted);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.5);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.5);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  max-width: 420px;
+  width: 90%;
+  box-shadow: var(--shadow-lg), var(--shadow-inset);
+  animation: sheetIn 0.3s var(--ease);
+}
+
+.dialog-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.dialog-message {
+  margin-bottom: 16px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.dialog-input,
+.dialog-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-primary);
+  font-size: 13px;
+  margin-bottom: 16px;
+  outline: none;
+  font-family: inherit;
+  transition: all var(--duration) var(--ease);
+}
+
+.dialog-textarea {
+  min-height: 120px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 12px;
+  resize: vertical;
+}
+
+.dialog-input:focus,
+.dialog-textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.dialog-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.dialog-option {
+  padding: 10px 12px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+  font-size: 13px;
+}
+
+.dialog-option:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.dialog-option:active {
+  transform: scale(0.98);
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.dialog-actions button {
+  flex: 1;
+  max-width: 120px;
+  padding: 8px 16px;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Command Palette
+   ═══════════════════════════════════════════════════════ */
+
+.command-palette-overlay,
+.model-picker-overlay,
+.tree-view-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.25);
+  z-index: 1000;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.command-palette-overlay.hidden,
+.model-picker-overlay.hidden,
+.tree-view-overlay.hidden { display: none; }
+
+.command-palette,
+.model-picker,
+.tree-view {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--bg-frosted);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius-lg);
+  width: 340px;
+  max-width: 90vw;
+  max-height: 400px;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg), var(--shadow-inset);
+  animation: sheetIn 0.2s var(--ease);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+}
+
+.command-palette.hidden,
+.model-picker.hidden,
+.tree-view.hidden { display: none; }
+
+.model-picker {
+  width: min(520px, calc(100vw - 24px));
+  max-height: min(70vh, 620px);
+}
+
+.command-palette-header,
+.model-picker-header,
+.tree-view-header {
+  padding: 12px 16px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--border);
+}
+
+.model-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px 10px 16px;
+}
+
+.model-picker-header h3 {
+  margin: 0;
+  font: inherit;
+}
+
+.model-picker-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.model-picker-close:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border);
+  color: var(--text-primary);
+}
+
+.model-picker-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.model-picker .model-list {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.model-picker-input {
+  margin: 12px 12px 6px;
+  padding: 9px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-glass);
+  color: var(--text-primary);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 13px;
+  outline: none;
+}
+
+.model-picker-input:focus {
+  border-color: var(--accent);
+}
+
+.model-picker-input.invalid {
+  border-color: var(--error);
+}
+
+.model-picker-message {
+  min-height: 18px;
+  padding: 0 14px 6px;
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.model-picker-message.error {
+  color: var(--error);
+}
+
+.model-picker-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--border);
+}
+
+.model-picker-actions button {
+  min-width: 84px;
+  padding: 8px 14px;
+  border-radius: var(--radius-md);
+}
+
+.command-list,
+.model-list {
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.command-item,
+.model-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.command-item:hover,
+.model-item:hover {
+  background: var(--bg-glass-hover);
+}
+
+.command-item:active,
+.model-item:active {
+  background: var(--bg-glass-active);
+  transform: scale(0.98);
+}
+
+.command-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-md);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.command-label {
+  font-weight: 500;
+}
+
+.command-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 1px;
+}
+
+.model-item {
+  justify-content: space-between;
+  border: 0;
+  width: 100%;
+  background: transparent;
+  text-align: left;
+}
+
+.model-item-name {
+  font-weight: 500;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 12px;
+}
+
+.model-item-context {
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+}
+
+.model-item.active {
+  background: var(--accent-subtle);
+  color: var(--accent-text);
+  box-shadow: var(--shadow-inset);
+}
+
+.model-item-provider {
+  font-size: 10px;
+  color: var(--text-dim);
+  margin-left: 6px;
+  padding: 1px 5px;
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  vertical-align: middle;
+}
+
+.model-item.active .model-item-context {
+  color: var(--accent-text);
+  opacity: 0.6;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Session Tree View
+   ═══════════════════════════════════════════════════════ */
+
+.tree-view {
+  width: min(560px, calc(100vw - 24px));
+  max-height: min(72vh, 640px);
+}
+
+.tree-view-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px 10px 16px;
+}
+
+.tree-view-header h3 {
+  margin: 0;
+  margin-right: auto;
+  font: inherit;
+}
+
+.tree-view-filter {
+  font-size: 10px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  text-transform: none;
+  letter-spacing: 0;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--bg-glass);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all var(--duration) var(--ease);
+}
+
+.tree-view-filter:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-hover);
+  color: var(--text-secondary);
+}
+
+.tree-view-filter[aria-pressed="true"] {
+  background: var(--accent-subtle);
+  color: var(--accent-text);
+}
+
+.tree-view-message {
+  min-height: 18px;
+  padding: 8px 16px 6px;
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.tree-view-message.error {
+  color: var(--error);
+}
+
+.tree-view-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.tree-view-empty {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.tree-view-inert .tree-row {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-secondary);
+  transition: background var(--duration) var(--ease);
+}
+
+.tree-row:hover:not(:disabled),
+.tree-row.active {
+  background: var(--bg-glass-hover);
+}
+
+.tree-row.active {
+  background: var(--accent-subtle);
+  box-shadow: var(--shadow-inset);
+}
+
+/* Lightweight branch guide lines — one vertical rule per ancestor level. */
+.tree-guides {
+  display: flex;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+
+.tree-guide {
+  width: 14px;
+  margin-left: 5px;
+  border-left: 1px solid var(--border);
+}
+
+.tree-row-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--text-dim);
+}
+
+.tree-row.on-path .tree-row-icon {
+  color: var(--accent-text);
+}
+
+.tree-row-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-row.on-path {
+  color: var(--text-primary);
+}
+
+.tree-row.on-path .tree-row-text {
+  font-weight: 500;
+}
+
+.tree-row-label {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  background: var(--bg-glass);
+  color: var(--text-dim);
+}
+
+/* Current-leaf marker: accent dot + "current" tag. */
+.tree-row-current {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  font-size: 10px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  color: var(--accent-text);
+}
+
+.tree-row-current::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+/* Very narrow screens: drop the header tree button to save space. */
+@media (max-width: 359px) {
+  #tree-btn { display: none !important; }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Scroll-to-bottom + New message badge
+   ═══════════════════════════════════════════════════════ */
+
+.scroll-bottom-btn {
+  position: absolute;
+  bottom: 90px;
+  right: 24px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--bg-glass-strong);
+  border: 1px solid var(--border-hover);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+  transition: all 0.25s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  animation: popIn 0.25s var(--spring);
+  padding: 0;
+  opacity: 1;
+}
+
+.scroll-bottom-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* Override global .hidden for smooth fade-out */
+.scroll-bottom-btn.hidden {
+  display: flex !important;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.8);
+}
+
+.scroll-bottom-btn:hover {
+  transform: scale(1.12);
+  background: var(--bg-glass-active);
+  color: var(--text-primary);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md);
+}
+
+.scroll-bottom-btn:active { transform: scale(0.92); }
+
+.scroll-bottom-badge {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-weight: 700;
+  color: white;
+  background: var(--accent);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: badgePop 0.3s var(--spring);
+  box-shadow: 0 2px 8px var(--accent-glow);
+}
+
+.scroll-bottom-badge.hidden { display: none; }
+
+@keyframes badgePop {
+  from { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(4px); }
+  to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
+}
+
+@keyframes popIn {
+  from { opacity: 0; transform: scale(0.7); }
+  60% { transform: scale(1.05); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Copy message button (hover)
+   ═══════════════════════════════════════════════════════ */
+
+.message-copy-btn {
+  opacity: 0;
+  align-self: flex-start;
+  margin-top: 4px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 4px 6px;
+  font-size: 10px;
+  font-family: inherit;
+  transition: all 0.15s var(--ease);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.message:hover .message-copy-btn { opacity: 1; }
+
+.message-copy-btn:hover {
+  color: var(--text-primary);
+}
+
+.message-copy-btn:active { transform: scale(0.9); }
+
+.message-copy-btn.copied {
+  color: var(--success);
+}
+
+.message-copy-btn.copied svg {
+  display: none;
+}
+
+.message-copy-btn.copied::after {
+  content: '✓';
+  font-size: 12px;
+}
+
+/* Error / system messages */
+.error-message {
+  background: rgba(248, 113, 113, 0.06);
+  border: 1px solid rgba(248, 113, 113, 0.15);
+  border-radius: var(--radius);
+  padding: 10px 16px;
+  margin: 6px 0;
+  color: var(--error);
+  font-size: 13px;
+  line-height: 1.5;
+  backdrop-filter: blur(8px);
+}
+
+.system-message {
+  text-align: center;
+  padding: 10px 16px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+
+/* ═══════════════════════════════════════════════════════
+   File Browser — right sidebar
+   ═══════════════════════════════════════════════════════ */
+
+.file-sidebar {
+  width: 260px;
+  min-width: 260px;
+  background: var(--bg-frosted);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.5);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.5);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transition: margin-right 0.3s var(--ease), opacity 0.3s var(--ease);
+  z-index: 100;
+  position: relative;
+}
+
+.file-sidebar.collapsed {
+  margin-right: -260px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.file-sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 12px;
+}
+
+.file-sidebar-title {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.file-sidebar-path {
+  padding: 6px 12px;
+  font-size: 10px;
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+
+.file-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.file-list::-webkit-scrollbar { width: 0; }
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--duration) var(--ease);
+  user-select: none;
+  -webkit-user-drag: element;
+}
+
+.file-item:hover {
+  background: var(--bg-glass-hover);
+}
+
+.file-item:active {
+  transform: scale(0.99);
+}
+
+.file-item.dragging {
+  opacity: 0.5;
+}
+
+.file-icon {
+  font-size: 14px;
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.file-name {
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.file-item.directory .file-name {
+  font-weight: 500;
+}
+
+.file-size {
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  flex-shrink: 0;
+}
+
+.file-loading {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+/* Drop zone highlight on input */
+#message-input.file-drop-hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm), var(--shadow-inset);
+  background: var(--bg-glass-hover);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Responsive
+   ═══════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  /* Mobile: sidebar is a slide-over panel like Claude/ChatGPT */
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 80% !important;
+    max-width: 320px;
+    z-index: 200;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
+    margin-left: 0;
+    transform: translateX(0);
+    transition: transform 0.3s var(--ease);
+    border-right: none;
+    background: var(--sidebar-bg-mobile);
+    backdrop-filter: blur(40px) saturate(1.5);
+    -webkit-backdrop-filter: blur(40px) saturate(1.5);
+  }
+
+  .sidebar.collapsed {
+    margin-left: 0;
+    transform: translateX(-100%);
+    box-shadow: none;
+  }
+
+  /* Show overlay behind sidebar */
+  .sidebar-overlay { display: block !important; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); }
+  .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
+
+  /* Always show sidebar toggle on mobile */
+  .sidebar-toggle {
+    display: flex !important;
+  }
+
+  .message.assistant { max-width: 100%; width: 100%; flex-wrap: wrap; }
+  .message.assistant .message-usage { width: 100%; }
+
+  .message-content {
+    font-size: 15px;
+    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
+  }
+
+  .message-copy-btn {
+    opacity: 0.4 !important;
+  }
+
+  /* Context pill stays in the header on mobile — enlarge its hit target */
+  .context-pill.visible {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    padding: 0 12px;
+  }
+
+  /* Stats card: right-anchoring can clip on narrow screens, so pin it
+     centered under the header instead (clamped to the viewport). The mobile
+     header renders ~56-58px tall (44px touch targets + 6px padding — see the
+     .live-tabs margin-top below), so offset 64px to clear it with a gap.
+     Centering uses auto margins rather than translateX so the dropdownIn
+     animation's transform doesn't fight the anchoring. */
+  .stats-card {
+    position: fixed;
+    top: calc(env(safe-area-inset-top, 0px) + 64px);
+    left: 12px;
+    right: 12px;
+    margin-inline: auto;
+    width: min(280px, calc(100vw - 24px));
+  }
+
+  /* Slim down header */
+  .header {
+    padding: 6px 12px;
+    min-height: 40px;
+  }
+
+  .header-left {
+    gap: 6px;
+    flex: 1 1 auto; /* take the leftover width for the model button */
+    min-width: 0; /* allow shrinking below the unbreakable model string */
+  }
+
+  /* Pin the right-side widgets: context pill, status, and settings must
+     never be pushed off-screen by a long model name. */
+  .header-right {
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .header-right .status {
+    white-space: nowrap; /* "Connected • TS" must not wrap once space is tight */
+  }
+
+  /* Let the model input use all remaining header space on small screens
+     so the full provider/model:thinking string stays visible. */
+  .model-input {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+  }
+
+  /* The full model string stays reachable by swiping the label instead of
+     being ellipsized. Same hidden-scrollbar pattern as .live-tabs-list. */
+  .model-input-label {
+    overflow-x: auto;
+    overflow-y: hidden; /* overflow-x:auto alone would compute overflow-y to auto */
+    text-overflow: clip;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .model-input-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .model-picker {
+    width: min(520px, calc(100vw - 24px));
+    max-height: 70vh;
+  }
+
+
+  .tool-card, .thinking-block { width: 100%; }
+  .tool-args-preview { max-width: 140px; }
+  .file-sidebar, #file-sidebar-toggle { display: none !important; }
+
+  /* iOS-style session list */
+  .session-list {
+    padding: 8px 16px;
+  }
+
+  .session-item {
+    padding: 16px 4px;
+    border-radius: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .session-item:last-child {
+    border-bottom: none;
+  }
+
+  .session-item:hover {
+    background: none;
+  }
+
+  .session-item:active {
+    background: var(--bg-glass-hover);
+  }
+
+  .session-title {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.35;
+    white-space: normal;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .session-meta {
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 4px;
+    color: var(--text-dim);
+  }
+
+  .session-tag {
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 7px;
+  }
+
+  .project-header {
+    font-size: 13px;
+    font-weight: 600;
+    padding: 12px 4px;
+    margin-top: 16px;
+  }
+
+  .project-count {
+    font-size: 11px;
+    font-weight: 400;
+  }
+
+  .search-snippet {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .sidebar-header {
+    padding: 16px 16px;
+  }
+
+  .sidebar-search-input {
+    font-size: 16px;
+    padding: 10px 12px;
+    border-radius: var(--radius-md);
+  }
+
+  .icon-btn,
+  .new-session-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Reduced motion / transparency
+   ═══════════════════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sidebar,
+  .header,
+  .settings-panel,
+  .dialog {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--bg-solid);
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: more) {
+  :root,
+  :root[data-theme] {
+    --border: rgba(128, 128, 128, 0.5);
+    --border-hover: rgba(128, 128, 128, 0.7);
+    --text-dim: var(--text-secondary);
+  }
+}
+
+/* Minimum touch targets on mobile */
+@media (max-width: 768px) {
+  .icon-btn,
+  .input-icon-btn,
+  .settings-close,
+  .sidebar-toggle,
+  .settings-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .session-item {
+    padding: 10px 12px;
+    min-height: 44px;
+  }
+
+  /* Tree modal controls: the filter pill, the close button (which reuses
+     .model-picker-close, 28px on desktop), and the rows themselves all meet
+     the same 44px target as the rest of the app. */
+  .tree-view-filter,
+  .tree-view .model-picker-close {
+    min-height: 44px;
+  }
+
+  .tree-view .model-picker-close {
+    min-width: 44px;
+  }
+
+  .tree-row {
+    min-height: 44px;
+  }
+
+  .command-item {
+    padding: 12px 14px;
+    min-height: 44px;
+  }
+}
+
+
+/* ═══════════════════════════════════════════════════════
+   LAUNCHER — Project Directory Picker
+   ═══════════════════════════════════════════════════════ */
+
+.launcher {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-solid);
+  overflow-y: auto;
+  padding: 48px 24px;
+}
+
+.launcher.hidden {
+  display: none;
+}
+
+.launcher-content {
+  max-width: 720px;
+  width: 100%;
+}
+
+.launcher-title {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.launcher-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+}
+
+.launcher-bubble {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: calc(10px * var(--size)) calc(18px * var(--size));
+  border-radius: var(--radius-pill);
+  border: 1px solid color-mix(in srgb, var(--accent) calc(var(--freshness) * 40%), transparent);
+  background: color-mix(in srgb, var(--accent) calc(var(--freshness) * 12%), var(--bg-glass));
+  color: var(--text-primary);
+  font-size: calc(13px * var(--size));
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--duration) var(--ease);
+  opacity: calc(0.45 + var(--freshness) * 0.55);
+  white-space: nowrap;
+}
+
+.launcher-bubble:hover {
+  background: color-mix(in srgb, var(--accent) calc(var(--freshness) * 20% + 8%), var(--bg-glass-hover));
+  border-color: color-mix(in srgb, var(--accent) calc(var(--freshness) * 60% + 10%), transparent);
+  transform: scale(1.05);
+  opacity: 1;
+}
+
+.launcher-bubble:active {
+  transform: scale(0.97);
+}
+
+.launcher-bubble.active {
+  border-color: var(--success);
+  opacity: 1;
+}
+
+.launcher-bubble.active:hover {
+  border-color: var(--success);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--success) 25%, transparent);
+}
+
+.launcher-bubble-name {
+  pointer-events: none;
+}
+
+.launcher-bubble-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  flex-shrink: 0;
+}
+
+.launcher-loading,
+.launcher-empty {
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 14px;
+  padding: 48px 24px;
+}
+
+.launcher-empty .hint {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.launcher-empty code {
+  background: var(--bg-glass);
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  font-size: 11px;
+}
+
+/* Standalone Tau live tabs */
+.live-tabs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 38px;
+  margin-top: 48px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-glass);
+  position: relative;
+  z-index: 9;
+}
+.live-tabs-list {
+  display: flex;
+  align-items: end;
+  gap: 4px;
+  overflow-x: auto;
+  flex: 1;
+  scrollbar-width: none;
+}
+.live-tabs-list::-webkit-scrollbar { display: none; }
+.live-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 240px;
+  min-width: 112px;
+  padding: 7px 8px 6px 10px;
+  border: 1px solid var(--border);
+  border-bottom-color: transparent;
+  border-radius: 10px 10px 0 0;
+  background: var(--bg-glass-strong);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.live-tab.active {
+  background: var(--bg-frosted);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-sm);
+}
+.live-tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+}
+.live-tab-model {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: .62;
+  font-size: 11px;
+}
+.live-tab-streaming-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
+  flex: 0 0 auto;
+}
+.live-tab-ui-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 999px;
+  background: rgba(184, 122, 92, .18);
+  color: var(--accent, #b87a5c);
+  font-size: 10px;
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+.live-tab-close, .live-tab-add {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.live-tab-close {
+  margin-left: auto;
+  border-radius: 6px;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  opacity: .6;
+}
+.live-tab-close:hover { background: var(--bg-glass-active); opacity: 1; }
+.live-tab-add {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  background: var(--bg-glass-strong);
+  border: 1px solid var(--border);
+  font-size: 18px;
+  line-height: 20px;
+}
+.live-tab-add:hover { background: var(--bg-glass-hover); }
+.new-live-session-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  background: rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.new-live-session-modal {
+  position: fixed;
+  z-index: 71;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(520px, calc(100vw - 28px));
+  border-radius: 18px;
+  border: 1px solid var(--border-hover);
+  background: var(--bg-frosted);
+  backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(1.6);
+  box-shadow: var(--shadow-lg), var(--shadow-inset);
+  overflow: hidden;
+}
+.new-live-session-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.new-live-session-header h3 { margin: 0; font-size: 16px; }
+.new-live-session-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
+.new-live-session-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
+.new-live-session-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: var(--bg-glass);
+  color: var(--text-primary);
+  font: inherit;
+  outline: none;
+}
+.new-live-session-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+.new-live-session-input::placeholder { color: var(--text-dim); }
+.new-live-session-help { margin: -2px 0 8px; opacity: .65; font-size: 12px; }
+.project-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow: auto; }
+.project-chip {
+  border: 1px solid var(--border);
+  background: var(--bg-glass);
+  color: var(--text-secondary);
+  border-radius: 999px;
+  padding: 5px 9px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.project-chip:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+.new-live-session-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.primary-btn, .secondary-btn {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font: inherit;
+}
+.primary-btn { background: var(--accent); color: white; }
+.secondary-btn { background: var(--bg-glass); color: var(--text-primary); }
+.secondary-btn:hover { background: var(--bg-glass-hover); border-color: var(--border-hover); }
+.input-area.no-active-live-session { opacity: .62; }
+@media (max-width: 768px) {
+  .live-tabs { margin-top: 58px; padding: 0 8px; min-height: 34px; }
+  .live-tab { min-width: 100px; max-width: 170px; padding: 6px 7px; }
+}