@xenosystem/agent-interface-ui 0.1.3

package/src/agent.css

@@ -0,0 +1,1156 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root,
+:root[data-theme='dark'] {
+  /* ─── Surface tokens (canonical) ─── */
+  --xeno-page-bg: #08080a;
+  --xeno-canvas-bg: #111111;
+  --xeno-panel-body: #161618;
+  --xeno-panel-header: #1a1a1a;
+  --xeno-tab-bar: #272727;
+  --xeno-input-bg: #2b2b2b;
+  --xeno-dialog-bg: #111115;
+  --xeno-dropdown-bg: #101011;
+
+  /* Legacy aliases */
+  --xeno-bg-app: #08080a;
+  --xeno-bg-chrome: #111111;
+  --xeno-bg-panel: #161618;
+  --xeno-bg-elevated: #1a1a1a;
+  --xeno-bg-subtle: rgba(255, 255, 255, 0.05);
+
+  /* ─── Borders ─── */
+  --xeno-border-subtle: rgba(255, 255, 255, 0.05);
+  --xeno-border-default: rgba(255, 255, 255, 0.08);
+  --xeno-border-medium: rgba(255, 255, 255, 0.10);
+  --xeno-border-strong: rgba(255, 255, 255, 0.15);
+
+  /* ─── Text ─── */
+  --xeno-ink-primary: #FFFFFF;
+  --xeno-ink-secondary: #E0E0E0;
+  --xeno-ink-muted: #9ca3af;
+  --xeno-ink-faint: #6b7280;
+
+  /* ─── Interactive text ─── */
+  --xeno-text-idle: #7f7f86;
+  --xeno-text-hover: #d8d8de;
+  --xeno-text-active: #acacb4;
+  --xeno-hover-bg: rgba(169, 169, 177, 0.08);
+
+  /* ─── Brand accent (monochromatic) ─── */
+  --xeno-accent: rgba(255, 255, 255, 0.15);
+  --xeno-accent-hover: rgba(255, 255, 255, 0.25);
+  --xeno-accent-soft: rgba(255, 255, 255, 0.10);
+  --xeno-accent-border: rgba(255, 255, 255, 0.15);
+  --xeno-marker-solid: #57575f;
+  --xeno-marker-accent-solid: #8a8a92;
+
+  /* ─── Status ─── */
+  --xeno-diff-added: #22c55e;
+  --xeno-diff-added-bg: rgba(34, 197, 94, 0.08);
+  --xeno-diff-removed: #ef4444;
+  --xeno-diff-removed-bg: rgba(239, 68, 68, 0.08);
+
+  /* ─── Scrollbar ─── */
+  --xeno-scrollbar: #3a3a3d;
+  --xeno-scrollbar-hover: #555555;
+
+  /* ─── Tool panels ─── */
+  --xeno-tool-expanded-bg: #090a0c;
+  --xeno-tool-expanded-border: rgba(255, 255, 255, 0.06);
+  --xeno-tool-expanded-active: #131416;
+}
+
+/*
+ * XENO Light Mode
+ *
+ * Surface reasoning (inverted depth model):
+ *
+ *   Dark mode: deeper = darker. Page #08080a → panel #161618 → header #1a1a1a
+ *   Light mode: the page (deepest) is a cool gray. Panels float above it in white.
+ *   Headers/toolbars within panels are slightly tinted to separate from content.
+ *
+ *   Layer 0 — Page/gaps:     #ececee   Cool gray void, visible between panels
+ *   Layer 1 — Canvas:        #f8f8f9   Near-white content viewport
+ *   Layer 2 — Panel body:    #ffffff   White panels float on gray page
+ *   Layer 3 — Panel header:  #f4f4f5   Subtle tint distinguishes from white panel
+ *   Layer 4 — Tab bar:       #ececee   Same tone as page — creates visual "rail"
+ *   Layer 5 — Input:         #ffffff   White input fields, distinguished by border
+ *
+ *   Elevated:  #f4f4f5       Popovers, dropdowns — slightly off-white
+ *   Hover:     #eaeaec       Interactive hover fills
+ *
+ * Text reasoning (same hierarchy, inverted polarity):
+ *   Dark mode white → light mode near-black #18181b
+ *   Each step down uses zinc scale: #27272a → #3f3f46 → #52525b → #71717a → #a1a1aa
+ *
+ * Border reasoning:
+ *   Dark mode uses white-alpha (light lines on dark bg).
+ *   Light mode uses black-alpha (dark lines on light bg).
+ *   Ratios are lower because black-on-white has higher perceived contrast.
+ *
+ * Accent reasoning:
+ *   Still monochromatic. Dark mode = white at low opacity. Light mode = black at low opacity.
+ *   Both feel neutral and precise — no color, just density.
+ */
+:root[data-theme='light'] {
+  /* ─── Surfaces ─── */
+  --xeno-page-bg: #ececee;
+  --xeno-canvas-bg: #f8f8f9;
+  --xeno-panel-body: #ffffff;
+  --xeno-panel-header: #f4f4f5;
+  --xeno-tab-bar: #ececee;
+  --xeno-input-bg: #ffffff;
+  --xeno-dialog-bg: #ffffff;
+  --xeno-dropdown-bg: #ffffff;
+
+  /* Legacy aliases */
+  --xeno-bg-app: #ececee;
+  --xeno-bg-chrome: #f8f8f9;
+  --xeno-bg-panel: #ffffff;
+  --xeno-bg-elevated: #f4f4f5;
+  --xeno-bg-subtle: rgba(0, 0, 0, 0.025);
+
+  /* ─── Borders (black-alpha — lower ratios than dark mode) ─── */
+  --xeno-border-subtle: rgba(0, 0, 0, 0.04);
+  --xeno-border-default: rgba(0, 0, 0, 0.08);
+  --xeno-border-medium: rgba(0, 0, 0, 0.12);
+  --xeno-border-strong: rgba(0, 0, 0, 0.16);
+
+  /* ─── Text (zinc scale, darkest to lightest) ─── */
+  --xeno-ink-primary: #18181b;
+  --xeno-ink-secondary: #3f3f46;
+  --xeno-ink-muted: #52525b;
+  --xeno-ink-faint: #71717a;
+
+  /* ─── Interactive text ─── */
+  --xeno-text-idle: #71717a;
+  --xeno-text-hover: #18181b;
+  --xeno-text-active: #3f3f46;
+  --xeno-hover-bg: rgba(0, 0, 0, 0.04);
+
+  /* ─── Brand accent (monochromatic — black at low opacity) ─── */
+  --xeno-accent: rgba(0, 0, 0, 0.07);
+  --xeno-accent-hover: rgba(0, 0, 0, 0.12);
+  --xeno-accent-soft: rgba(0, 0, 0, 0.04);
+  --xeno-accent-border: rgba(0, 0, 0, 0.10);
+  --xeno-marker-solid: #8b8b95;
+  --xeno-marker-accent-solid: #64646d;
+
+  /* ─── Status (one step darker than dark mode — readability on white) ─── */
+  --xeno-diff-added: #16a34a;
+  --xeno-diff-added-bg: rgba(22, 163, 74, 0.06);
+  --xeno-diff-removed: #dc2626;
+  --xeno-diff-removed-bg: rgba(220, 38, 38, 0.06);
+
+  /* ─── Scrollbar (visible but unobtrusive on white) ─── */
+  --xeno-scrollbar: #d4d4d8;
+  --xeno-scrollbar-hover: #a1a1aa;
+
+  /* ─── Tool panels ─── */
+  --xeno-tool-expanded-bg: #ffffff;
+  --xeno-tool-expanded-border: rgba(0, 0, 0, 0.06);
+  --xeno-tool-expanded-active: #f4f4f5;
+}
+
+/* Base styles */
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  background-color: var(--xeno-bg-app);
+  color: var(--xeno-ink-primary);
+}
+
+body, #root, #app {
+  width: 100%;
+  height: 100%;
+  background-color: var(--xeno-bg-app);
+  color: var(--xeno-ink-primary);
+}
+
+/* Custom scrollbar - minimal */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--xeno-scrollbar);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--xeno-scrollbar-hover);
+}
+
+/* Agent interface scrollbars — slimmer, rounded, and inset from panel edge */
+.agent-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+}
+
+.agent-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.agent-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 8px 4px 8px 0;
+}
+
+.agent-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 2px;
+}
+
+.agent-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+/* Hide scrollbar utility */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Disable text selection for UI elements */
+.no-select {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Focus styles */
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--xeno-accent-border);
+  outline-offset: 2px;
+}
+
+/* Draggable regions for frameless window */
+.drag-region {
+  -webkit-app-region: drag;
+}
+
+.no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Glass effect */
+.glass {
+  background: var(--xeno-bg-subtle);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--xeno-border-subtle);
+}
+
+/* Vignette background effect */
+.bg-vignette {
+  background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 0%, var(--xeno-bg-app) 100%);
+}
+
+/* Gradient orbs */
+.gradient-orb {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(60px);
+  pointer-events: none;
+}
+
+.gradient-orb-1 {
+  width: 24rem;
+  height: 24rem;
+  background: var(--xeno-bg-subtle);
+  top: 25%;
+  left: 25%;
+}
+
+.gradient-orb-2 {
+  width: 24rem;
+  height: 24rem;
+  background: var(--xeno-bg-subtle);
+  bottom: 25%;
+  right: 25%;
+}
+
+.xeno-app-shell {
+  background-color: var(--xeno-bg-app);
+  color: var(--xeno-ink-primary);
+}
+
+.xeno-chrome-shell {
+  background-color: var(--xeno-bg-chrome);
+  color: var(--xeno-ink-primary);
+}
+
+.xeno-panel-shell {
+  background-color: var(--xeno-bg-panel);
+  color: var(--xeno-ink-primary);
+}
+
+.xeno-elevated-shell {
+  background-color: var(--xeno-bg-elevated);
+  color: var(--xeno-ink-primary);
+}
+
+.xeno-agent-footer-dock {
+  background-color: var(--xeno-bg-app);
+  background-image: none;
+  border-top: 0;
+  box-shadow: none;
+  filter: none;
+}
+
+.xeno-agent-composer-shell {
+  background-color: var(--xeno-bg-app);
+  background-image: none;
+  box-shadow: none;
+  filter: none;
+}
+
+.xeno-agent-footer-dock *,
+.xeno-agent-composer-shell * {
+  box-shadow: none !important;
+  filter: none !important;
+}
+
+.xeno-border-subtle {
+  border-color: var(--xeno-border-subtle);
+}
+
+.xeno-text-primary {
+  color: var(--xeno-ink-primary);
+}
+
+.xeno-text-secondary {
+  color: var(--xeno-ink-secondary);
+}
+
+.xeno-text-muted {
+  color: var(--xeno-ink-muted);
+}
+
+.xeno-text-faint {
+  color: var(--xeno-ink-faint);
+}
+
+.xeno-titlebar-toggle {
+  background-color: var(--xeno-bg-panel);
+  border: 1px solid var(--xeno-border-subtle);
+}
+
+.xeno-titlebar-toggle-button {
+  color: var(--xeno-ink-muted);
+}
+
+.xeno-titlebar-toggle-button:hover {
+  color: var(--xeno-ink-secondary);
+}
+
+.xeno-titlebar-toggle-button[data-active='true'] {
+  background-color: var(--xeno-accent-soft);
+  color: var(--xeno-ink-primary);
+}
+
+/*
+ * Light-mode compatibility layer
+ *
+ * Maps hardcoded dark Tailwind classes → light equivalents.
+ * Each mapping is reasoned from the surface hierarchy above.
+ *
+ * Dark hex → Light hex reasoning:
+ *   #08080a (page void)      → #ececee  (cool gray void between panels)
+ *   #111111 (canvas)         → #f8f8f9  (near-white content viewport)
+ *   #111115 (dialog)         → #ffffff  (white modal floating on gray backdrop)
+ *   #131416 (between layers) → #f4f4f5  (between white and off-white)
+ *   #161618 (panel body)     → #ffffff  (white panels — primary container)
+ *   #18181b (cards/surface1) → #ffffff  (white cards on gray page)
+ *   #1a1a1a (panel header)   → #f4f4f5  (subtle off-white, separates from white panel)
+ *   #1E1E1E (surface2)       → #f0f0f2  (slightly darker than panel, grouping)
+ *   #222224 (surface3)       → #eaeaec  (elevated surface, popovers)
+ *   #252525 (surface3 alt)   → #e8e8ea  (hover on elevated surfaces)
+ *   #2a2a2d (surface4)       → #e4e4e7  (hover fills)
+ *   #2b2b2b (input)          → #ffffff  (white input, distinguished by border)
+ *   #101011 (dropdown)       → #ffffff  (white dropdown, floating with shadow)
+ *
+ * White-alpha → Black-alpha reasoning:
+ *   Black on white has ~1.6x higher perceived contrast than white on black.
+ *   So we scale down: white/0.08 in dark → black/0.05 in light gives equal weight.
+ *
+ * Text reasoning:
+ *   text-white (100%) → #18181b (zinc-900 — not pure black, matches XENO restraint)
+ *   Each opacity step maps to a zinc-scale equivalent that maintains readability.
+ */
+
+/* ─── Surface hex overrides ─── */
+:root[data-theme='light'] [class~="bg-[#08080a]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#0a0a0b]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#0a0a0c]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#101011]"]  { background-color: #ffffff !important; }
+:root[data-theme='light'] [class~="bg-[#111111]"]  { background-color: #f8f8f9 !important; }
+:root[data-theme='light'] [class~="bg-[#111113]"]  { background-color: #f8f8f9 !important; }
+:root[data-theme='light'] [class~="bg-[#111115]"]  { background-color: #ffffff !important; }
+:root[data-theme='light'] [class~="bg-[#131416]"]  { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="bg-[#161618]"]  { background-color: #ffffff !important; }
+:root[data-theme='light'] [class~="bg-[#18181b]"]  { background-color: #ffffff !important; }
+:root[data-theme='light'] [class~="bg-[#1a1a1a]"]  { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="bg-[#1a1a1c]"]  { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="bg-[#1E1E1E]"]  { background-color: #f0f0f2 !important; }
+:root[data-theme='light'] [class~="bg-[#222224]"]  { background-color: #eaeaec !important; }
+:root[data-theme='light'] [class~="bg-[#252525]"]  { background-color: #e8e8ea !important; }
+:root[data-theme='light'] [class~="bg-[#272727]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#2a2a2d]"]  { background-color: #e4e4e7 !important; }
+:root[data-theme='light'] [class~="bg-[#2b2b2b]"]  { background-color: #ffffff !important; }
+:root[data-theme='light'] [class~="bg-[#333336]"]  { background-color: #e0e0e3 !important; }
+:root[data-theme='light'] [class~="bg-black"]       { background-color: #ececee !important; }
+
+/* ─── White-alpha backgrounds → black-alpha (scaled ×0.65 for perceptual parity) ─── */
+:root[data-theme='light'] [class~="bg-white/[0.02]"]  { background-color: rgba(0,0,0,0.013) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.03]"]  { background-color: rgba(0,0,0,0.02) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.04]"]  { background-color: rgba(0,0,0,0.025) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.05]"]  { background-color: rgba(0,0,0,0.03) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.06]"]  { background-color: rgba(0,0,0,0.04) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.08]"]  { background-color: rgba(0,0,0,0.05) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.1]"]   { background-color: rgba(0,0,0,0.065) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.12]"]  { background-color: rgba(0,0,0,0.08) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.15]"]  { background-color: rgba(0,0,0,0.10) !important; }
+:root[data-theme='light'] [class~="bg-white/[0.25]"]  { background-color: rgba(0,0,0,0.15) !important; }
+:root[data-theme='light'] [class~="bg-white/10"]       { background-color: rgba(0,0,0,0.065) !important; }
+:root[data-theme='light'] [class~="bg-white/20"]       { background-color: rgba(0,0,0,0.12) !important; }
+:root[data-theme='light'] [class~="bg-white/50"]       { background-color: rgba(0,0,0,0.30) !important; }
+
+/* Black-alpha bgs on light → lighter (already dark bg, reduce intensity) */
+:root[data-theme='light'] [class~="bg-black/30"]  { background-color: rgba(0,0,0,0.04) !important; }
+:root[data-theme='light'] [class~="bg-black/60"]  { background-color: rgba(0,0,0,0.06) !important; }
+
+/* ─── Border overrides ─── */
+/* Opaque dark borders → opaque light borders (zinc scale) */
+:root[data-theme='light'] [class~="border-[#27272a]"]  { border-color: #d4d4d8 !important; }
+:root[data-theme='light'] [class~="border-[#3a3a3d]"]  { border-color: #c4c4c8 !important; }
+:root[data-theme='light'] [class~="border-[#3f3f46]"]  { border-color: #a1a1aa !important; }
+/* White-alpha borders → black-alpha (scaled ×0.8 — borders need more presence) */
+:root[data-theme='light'] [class~="border-white/[0.04]"]  { border-color: rgba(0,0,0,0.04) !important; }
+:root[data-theme='light'] [class~="border-white/[0.05]"]  { border-color: rgba(0,0,0,0.05) !important; }
+:root[data-theme='light'] [class~="border-white/[0.06]"]  { border-color: rgba(0,0,0,0.06) !important; }
+:root[data-theme='light'] [class~="border-white/[0.08]"]  { border-color: rgba(0,0,0,0.08) !important; }
+:root[data-theme='light'] [class~="border-white/[0.1]"]   { border-color: rgba(0,0,0,0.10) !important; }
+:root[data-theme='light'] [class~="border-white/[0.12]"]  { border-color: rgba(0,0,0,0.12) !important; }
+:root[data-theme='light'] [class~="border-white/[0.15]"]  { border-color: rgba(0,0,0,0.14) !important; }
+:root[data-theme='light'] [class~="border-white/10"]       { border-color: rgba(0,0,0,0.08) !important; }
+:root[data-theme='light'] [class~="border-white/40"]       { border-color: rgba(0,0,0,0.22) !important; }
+:root[data-theme='light'] [class~="border-transparent"]    { border-color: transparent !important; }
+
+/*
+ * ─── Text weight mapping — white opacity → zinc scale ───
+ *
+ *   Tier 1 — Ghostly (/10-/15):     #d4d4d8  zinc-300   Faintest hints, decorative
+ *   Tier 2 — Dim (/18-/30):         #a1a1aa  zinc-400   Timestamps, tertiary info
+ *   Tier 3 — Muted (/32-/42):       #71717a  zinc-500   Muted labels, metadata
+ *   Tier 4 — Secondary (/45-/55):   #52525b  zinc-600   Labels, supporting info
+ *   Tier 5 — Body (/58-/72):        #3f3f46  zinc-700   Body text, descriptions
+ *   Tier 6 — Strong (/74-/86):      #27272a  zinc-800   Active values, important labels
+ *   Tier 7 — Primary (/88-100):     #18181b  zinc-900   Headings, primary content
+ */
+
+/* Tier 7 — Primary */
+:root[data-theme='light'] [class~="text-white"]      { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-white/95"]   { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-white/92"]   { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-white/90"]   { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-white/88"]   { color: #18181b !important; }
+/* Tier 6 — Strong */
+:root[data-theme='light'] [class~="text-white/86"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/85"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/84"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/82"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/80"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/78"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/76"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/75"]   { color: #27272a !important; }
+:root[data-theme='light'] [class~="text-white/74"]   { color: #27272a !important; }
+/* Tier 5 — Body */
+:root[data-theme='light'] [class~="text-white/72"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/70"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/68"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/65"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/64"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/62"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/60"]   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-white/58"]   { color: #3f3f46 !important; }
+/* Tier 4 — Secondary */
+:root[data-theme='light'] [class~="text-white/55"]   { color: #52525b !important; }
+:root[data-theme='light'] [class~="text-white/54"]   { color: #52525b !important; }
+:root[data-theme='light'] [class~="text-white/52"]   { color: #52525b !important; }
+:root[data-theme='light'] [class~="text-white/50"]   { color: #52525b !important; }
+:root[data-theme='light'] [class~="text-white/48"]   { color: #52525b !important; }
+:root[data-theme='light'] [class~="text-white/45"]   { color: #52525b !important; }
+/* Tier 3 — Muted */
+:root[data-theme='light'] [class~="text-white/42"]   { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-white/40"]   { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-white/38"]   { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-white/36"]   { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-white/35"]   { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-white/34"]   { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-white/32"]   { color: #71717a !important; }
+/* Tier 2 — Dim */
+:root[data-theme='light'] [class~="text-white/30"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/28"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/26"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/25"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/24"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/22"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/20"]   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-white/18"]   { color: #a1a1aa !important; }
+/* Tier 1 — Ghostly */
+:root[data-theme='light'] [class~="text-white/15"]   { color: #d4d4d8 !important; }
+:root[data-theme='light'] [class~="text-white/10"]   { color: #d4d4d8 !important; }
+:root[data-theme='light'] [class~="text-white/0"]    { color: transparent !important; }
+
+/* ─── Design system text tokens ─── */
+:root[data-theme='light'] [class~="text-[#ffffff]"]  { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-[#E0E0E0]"] { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-[#d1d5db]"] { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-[#9ca3af]"] { color: #52525b !important; }
+:root[data-theme='light'] [class~="text-[#6b7280]"] { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-[#4b5563]"] { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="text-[#7f7f86]"] { color: #71717a !important; }
+:root[data-theme='light'] [class~="text-[#d8d8de]"] { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-[#acacb4]"] { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="text-[#111418]"] { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-[#08080a]"] { color: #18181b !important; }
+:root[data-theme='light'] [class~="text-[#09090b]"] { color: #18181b !important; }
+
+/* ─── Placeholder overrides ─── */
+:root[data-theme='light'] [class~="placeholder:text-[#4b5563]"]::placeholder  { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="placeholder:text-[#6b7280]"]::placeholder  { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="placeholder:text-white/30"]::placeholder   { color: #a1a1aa !important; }
+
+/* ─── Hover text overrides ─── */
+:root[data-theme='light'] [class~="hover:text-white"]:hover      { color: #18181b !important; }
+:root[data-theme='light'] [class~="hover:text-white/70"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/80"]:hover   { color: #27272a !important; }
+:root[data-theme='light'] [class~="hover:text-white/90"]:hover   { color: #18181b !important; }
+:root[data-theme='light'] [class~="hover:text-[#9ca3af]"]:hover  { color: #3f3f46 !important; }
+
+/* ─── Additional surface hex overrides ─── */
+:root[data-theme='light'] [class~="bg-[#09090b]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#0b0b0d]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#0c0c0e]"]  { background-color: #f0f0f2 !important; }
+:root[data-theme='light'] [class~="bg-[#0e0e11]"]  { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="bg-[#111114]"]  { background-color: #f8f8f9 !important; }
+:root[data-theme='light'] [class~="bg-[#18181a]"]  { background-color: #ffffff !important; }
+:root[data-theme='light'] [class~="bg-[#1a1b1e]"]  { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="bg-[#3a3a3d]"]  { background-color: #e0e0e3 !important; }
+:root[data-theme='light'] [class~="bg-[#27272a]"]  { background-color: #ececee !important; }
+:root[data-theme='light'] [class~="bg-[#f4f7fb]"]  { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="bg-[#1a0f12]"]  { background-color: #fef2f2 !important; } /* error tint */
+:root[data-theme='light'] [class~="bg-transparent"] { background-color: transparent !important; }
+
+/* ─── Hover surface overrides (all hex + alpha values found in codebase) ─── */
+:root[data-theme='light'] [class~="hover:bg-[#1E1E1E]"]:hover     { background-color: #f0f0f2 !important; }
+:root[data-theme='light'] [class~="hover:bg-[#252525]"]:hover     { background-color: #e8e8ea !important; }
+:root[data-theme='light'] [class~="hover:bg-[#2a2a2d]"]:hover     { background-color: #e4e4e7 !important; }
+:root[data-theme='light'] [class~="hover:bg-[#333336]"]:hover     { background-color: #e0e0e3 !important; }
+:root[data-theme='light'] [class~="hover:bg-[#3a3a3d]"]:hover     { background-color: #dcdce0 !important; }
+:root[data-theme='light'] [class~="hover:bg-[#1a1b1e]"]:hover     { background-color: #eaeaec !important; }
+:root[data-theme='light'] [class~="hover:bg-[#f4f7fb]"]:hover     { background-color: #f4f4f5 !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.02]"]:hover  { background-color: rgba(0,0,0,0.013) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.03]"]:hover  { background-color: rgba(0,0,0,0.02) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.04]"]:hover  { background-color: rgba(0,0,0,0.025) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.05]"]:hover  { background-color: rgba(0,0,0,0.03) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.06]"]:hover  { background-color: rgba(0,0,0,0.04) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.08]"]:hover  { background-color: rgba(0,0,0,0.05) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.1]"]:hover   { background-color: rgba(0,0,0,0.065) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.10]"]:hover  { background-color: rgba(0,0,0,0.065) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.12]"]:hover  { background-color: rgba(0,0,0,0.08) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.14]"]:hover  { background-color: rgba(0,0,0,0.09) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.15]"]:hover  { background-color: rgba(0,0,0,0.10) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.16]"]:hover  { background-color: rgba(0,0,0,0.105) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/[0.25]"]:hover  { background-color: rgba(0,0,0,0.15) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/5"]:hover       { background-color: rgba(0,0,0,0.03) !important; }
+:root[data-theme='light'] [class~="hover:bg-white/20"]:hover      { background-color: rgba(0,0,0,0.12) !important; }
+
+/* ─── Border overrides (all opaque + alpha) ─── */
+:root[data-theme='light'] [class~="border-[#333336]"]  { border-color: #c4c4c8 !important; }
+:root[data-theme='light'] [class~="border-[#2a2a2d]"]  { border-color: #d4d4d8 !important; }
+:root[data-theme='light'] [class~="border-[#52525b]"]  { border-color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="border-[#08080a]"]  { border-color: #ececee !important; }
+:root[data-theme='light'] [class~="border-[#4b1f24]"]  { border-color: #fecaca !important; }
+:root[data-theme='light'] [class~="border-black/10"]    { border-color: rgba(0,0,0,0.08) !important; }
+
+/* ─── Hover border overrides (all values found) ─── */
+:root[data-theme='light'] [class~="hover:border-[#52525b]"]:hover      { border-color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="hover:border-[#3a3a3d]"]:hover      { border-color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.1]"]:hover    { border-color: rgba(0,0,0,0.10) !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.10]"]:hover   { border-color: rgba(0,0,0,0.10) !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.12]"]:hover   { border-color: rgba(0,0,0,0.12) !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.14]"]:hover   { border-color: rgba(0,0,0,0.14) !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.15]"]:hover   { border-color: rgba(0,0,0,0.14) !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.25]"]:hover   { border-color: rgba(0,0,0,0.18) !important; }
+:root[data-theme='light'] [class~="hover:border-white/[0.4]"]:hover    { border-color: rgba(0,0,0,0.25) !important; }
+:root[data-theme='light'] [class~="hover:border-white/30"]:hover       { border-color: rgba(0,0,0,0.18) !important; }
+:root[data-theme='light'] [class~="hover:border-white/50"]:hover       { border-color: rgba(0,0,0,0.30) !important; }
+:root[data-theme='light'] [class~="hover:border-transparent"]:hover    { border-color: transparent !important; }
+
+/* ─── Hover text overrides (all opacity values found in codebase) ─── */
+:root[data-theme='light'] [class~="hover:text-white"]:hover      { color: #18181b !important; }
+:root[data-theme='light'] [class~="hover:text-white/30"]:hover   { color: #a1a1aa !important; }
+:root[data-theme='light'] [class~="hover:text-white/40"]:hover   { color: #71717a !important; }
+:root[data-theme='light'] [class~="hover:text-white/45"]:hover   { color: #52525b !important; }
+:root[data-theme='light'] [class~="hover:text-white/50"]:hover   { color: #52525b !important; }
+:root[data-theme='light'] [class~="hover:text-white/55"]:hover   { color: #52525b !important; }
+:root[data-theme='light'] [class~="hover:text-white/58"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/60"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/62"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/65"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/70"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/72"]:hover   { color: #3f3f46 !important; }
+:root[data-theme='light'] [class~="hover:text-white/75"]:hover   { color: #27272a !important; }
+:root[data-theme='light'] [class~="hover:text-white/78"]:hover   { color: #27272a !important; }
+:root[data-theme='light'] [class~="hover:text-white/80"]:hover   { color: #27272a !important; }
+:root[data-theme='light'] [class~="hover:text-white/82"]:hover   { color: #27272a !important; }
+:root[data-theme='light'] [class~="hover:text-white/86"]:hover   { color: #27272a !important; }
+:root[data-theme='light'] [class~="hover:text-white/88"]:hover   { color: #18181b !important; }
+:root[data-theme='light'] [class~="hover:text-white/90"]:hover   { color: #18181b !important; }
+:root[data-theme='light'] [class~="hover:text-[#9ca3af]"]:hover  { color: #3f3f46 !important; }
+
+/* ─── Ring/shadow overrides ─── */
+:root[data-theme='light'] [class~="shadow-[0_8px_20px_rgba(0,0,0,0.22)]"] { box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; }
+:root[data-theme='light'] [class~="shadow-lg"] { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04) !important; }
+
+/* ─── SVG/icon overrides ─── */
+:root[data-theme='light'] [class~="fill-white"]      { fill: #18181b !important; }
+:root[data-theme='light'] [class~="fill-current"]    { fill: currentColor !important; }
+:root[data-theme='light'] [class~="stroke-white"]    { stroke: #18181b !important; }
+:root[data-theme='light'] [class~="stroke-current"]  { stroke: currentColor !important; }
+
+/* ─── Backdrop/overlay ─── */
+:root[data-theme='light'] [class~="bg-black/60"]     { background-color: rgba(0,0,0,0.30) !important; }
+:root[data-theme='light'] [class~="backdrop-blur-sm"] { backdrop-filter: blur(4px) !important; }
+:root[data-theme='light'] [class~="backdrop-blur-md"] { backdrop-filter: blur(12px) !important; }
+
+/* Button styles */
+.btn-primary {
+  @apply w-full font-medium py-4 rounded-xl transition-all;
+  background: var(--xeno-accent);
+  color: var(--xeno-ink-primary);
+}
+
+.btn-secondary {
+  @apply px-4 py-2 rounded-xl transition-all;
+  border: 1px solid var(--xeno-border-subtle);
+  background: var(--xeno-bg-elevated);
+  color: var(--xeno-ink-secondary);
+}
+
+/* Input styles */
+.input-field {
+  @apply w-full rounded-xl px-4 py-4 outline-none transition-all;
+  background: var(--xeno-bg-elevated);
+  border: 1px solid var(--xeno-border-subtle);
+  color: var(--xeno-ink-primary);
+}
+
+/* Card styles */
+.card {
+  @apply rounded-xl transition-all;
+  background: var(--xeno-bg-panel);
+  border: 1px solid var(--xeno-border-subtle);
+}
+
+/* Badge styles */
+.badge {
+  @apply inline-flex items-center gap-2 px-4 py-2 rounded-[6px];
+  background: var(--xeno-bg-elevated);
+  border: 1px solid var(--xeno-border-subtle);
+}
+
+/* Loading spinner */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Pulse ring for running apps */
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.9);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+
+.pulse-ring {
+  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}
+
+/* Tooltip fade-out animation */
+@keyframes tooltip-fade-out {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+
+.tooltip-exit {
+  animation: tooltip-fade-out 150ms ease-out forwards;
+}
+
+/* Tooltip scale animation */
+@keyframes tooltip-scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.85) translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Modal slide-in animation */
+@keyframes modal-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.modal-animate {
+  animation: modal-slide-in 150ms ease-out forwards;
+}
+
+.tooltip-animate {
+  transform-origin: bottom left;
+  opacity: 0;
+  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+}
+
+.group:hover .tooltip-animate {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.tooltip-animate:not(.group:hover .tooltip-animate) {
+  transform: scale(0.9) translateY(2px);
+}
+
+/* Showcase hover animation - movement on enter, fade only on exit */
+.showcase-hover-item {
+  opacity: 0;
+  transition: opacity 300ms ease-out, transform 0ms ease-out 300ms;
+}
+
+.showcase-hover-item.from-top {
+  transform: translateY(-8px);
+}
+
+.showcase-hover-item.from-bottom {
+  transform: translateY(8px);
+}
+
+/* On hover - animate in with movement */
+.group:hover .showcase-hover-item {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 400ms ease-out, transform 400ms ease-out;
+}
+
+/* News item arrow animation - enters from behind date (left), exits through border (right) */
+@keyframes arrow-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes arrow-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+}
+
+.news-arrow-enter {
+  animation: arrow-enter 300ms ease-out forwards;
+}
+
+.news-arrow-exit {
+  animation: arrow-exit 200ms ease-out forwards;
+}
+
+/* Agent onboarding — stage entrance animations */
+@keyframes stage-fade-drop {
+  0% {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes stage-fade-rise {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes stage-fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.stage-enter-header {
+  animation: stage-fade-drop 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.stage-enter-item {
+  animation: stage-fade-rise 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.stage-enter-fade {
+  animation: stage-fade-in 500ms ease-out both;
+}
+
+/* Agent chat — markdown rendering for assistant messages */
+.agent-markdown p {
+  margin-bottom: 0.75em;
+}
+
+.agent-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.agent-markdown strong {
+  color: var(--xeno-ink-primary);
+  font-weight: 600;
+}
+
+.agent-markdown em {
+  font-style: italic;
+  color: var(--xeno-ink-secondary);
+}
+
+.agent-markdown h1,
+.agent-markdown h2,
+.agent-markdown h3,
+.agent-markdown h4 {
+  color: var(--xeno-ink-primary);
+  font-weight: 600;
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+}
+
+.agent-markdown h1:first-child,
+.agent-markdown h2:first-child,
+.agent-markdown h3:first-child {
+  margin-top: 0;
+}
+
+.agent-markdown h1 { font-size: 1.15em; }
+.agent-markdown h2 { font-size: 1.05em; }
+.agent-markdown h3 { font-size: 1em; }
+
+.agent-markdown ul,
+.agent-markdown ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.agent-markdown ul {
+  list-style: none;
+  padding-left: 0;
+}
+.agent-markdown ol { list-style-type: decimal; }
+
+.agent-markdown li {
+  margin-bottom: 0.3em;
+}
+
+.agent-markdown ul > li {
+  position: relative;
+  padding-left: 1em;
+}
+
+.agent-markdown ul > li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.72em;
+  width: 0.38em;
+  height: 0.38em;
+  border-radius: 2px;
+  background: var(--xeno-ink-muted);
+  transform: translateY(-50%);
+}
+
+.agent-markdown ol > li::marker {
+  color: var(--xeno-ink-muted);
+}
+
+.agent-markdown code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.9em;
+  background: var(--xeno-bg-subtle);
+  border: 1px solid var(--xeno-border-subtle);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+  color: var(--xeno-ink-secondary);
+}
+
+.agent-markdown pre {
+  margin: 0.75em 0;
+  border-radius: 8px;
+  background: var(--xeno-bg-elevated);
+  border: 1px solid var(--xeno-border-subtle);
+  overflow-x: auto;
+  padding: 0;
+}
+
+.agent-markdown pre code {
+  display: block;
+  padding: 0.85em 1em;
+  background: none;
+  border: none;
+  border-radius: 0;
+  font-size: 0.85em;
+  line-height: 1.6;
+  color: var(--xeno-ink-secondary);
+  white-space: pre;
+}
+
+/* Code block with header — remove double border-radius */
+.agent-markdown pre .group\/code {
+  margin: 0;
+}
+
+.agent-markdown pre .group\/code > code {
+  border-radius: 0 0 8px 8px;
+}
+
+.agent-markdown blockquote {
+  border-left: 2px solid var(--xeno-border-strong);
+  padding-left: 0.85em;
+  margin: 0.75em 0;
+  color: var(--xeno-ink-muted);
+}
+
+.agent-markdown a {
+  color: var(--xeno-ink-secondary);
+  text-decoration: underline;
+  text-decoration-color: var(--xeno-ink-muted);
+  text-underline-offset: 2px;
+  transition: color 150ms, text-decoration-color 150ms;
+}
+
+.agent-markdown a:hover,
+.agent-markdown a:focus-visible {
+  color: var(--xeno-ink-primary);
+  text-decoration-color: currentColor;
+}
+
+.agent-markdown a:focus-visible {
+  border-radius: 2px;
+  outline: 1px solid var(--xeno-border-strong);
+  outline-offset: 2px;
+}
+
+.agent-markdown hr {
+  border: none;
+  border-top: 1px solid var(--xeno-border-subtle);
+  margin: 1em 0;
+}
+
+.agent-markdown table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0.75em 0;
+  font-size: 0.9em;
+  border: 1px solid var(--xeno-border-subtle);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.agent-markdown th,
+.agent-markdown td {
+  padding: 0.4em 0.75em;
+  border-bottom: 1px solid var(--xeno-border-subtle);
+  border-right: 1px solid var(--xeno-border-subtle);
+  text-align: left;
+}
+
+.agent-markdown th:last-child,
+.agent-markdown td:last-child {
+  border-right: none;
+}
+
+.agent-markdown tr:last-child td {
+  border-bottom: none;
+}
+
+.agent-markdown th {
+  color: var(--xeno-ink-secondary);
+  font-weight: 600;
+  background: var(--xeno-bg-subtle);
+}
+
+/* Agent chat — image preview in markdown */
+.agent-markdown img {
+  border-radius: 6px;
+  max-height: 300px;
+}
+
+/* Agent chat — markdown rendering for assistant thinking panel */
+.agent-thinking-markdown {
+  color: var(--xeno-ink-faint);
+}
+
+.agent-thinking-markdown strong {
+  color: var(--xeno-ink-muted);
+}
+
+.agent-thinking-markdown em {
+  color: var(--xeno-ink-muted);
+}
+
+.agent-thinking-markdown ul > li::before {
+  background: var(--xeno-ink-faint);
+}
+
+.agent-thinking-markdown ol > li::marker {
+  color: var(--xeno-ink-faint);
+}
+
+/* Sidebar tooltip — appears to the right of hovered button */
+.sidebar-tooltip {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 12px);
+  transform: translateY(-50%) scale(0.65);
+  transform-origin: left center;
+  opacity: 0;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  background: var(--xeno-bg-panel);
+  color: var(--xeno-ink-primary);
+  border: 1px solid var(--xeno-border-subtle);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.18);
+  z-index: 60;
+  will-change: opacity, transform;
+}
+
+.sidebar-tooltip[data-state='visible'] {
+  animation: sidebar-tooltip-in 180ms ease-out forwards;
+}
+
+.sidebar-tooltip[data-state='hidden'] {
+  animation: sidebar-tooltip-out 140ms ease-out forwards;
+}
+
+@keyframes sidebar-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.65);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+@keyframes sidebar-tooltip-out {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.65);
+  }
+}
+
+.acp-form-input {
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(0, 0, 0, 0.22);
+  padding: 0.45rem 0.6rem;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 12px;
+  line-height: 1.35;
+  outline: none;
+  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
+}
+
+.acp-form-input::placeholder {
+  color: rgba(255, 255, 255, 0.18);
+}
+
+.acp-form-input:focus {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.acp-form-input:disabled {
+  opacity: 0.45;
+}
+
+.xeno-agent-session-tabs-scroll {
+  scrollbar-width: none;
+}
+
+.xeno-agent-session-tabs-scroll::-webkit-scrollbar {
+  display: none;
+}