feat: Add EEGWave component and refine UI aesthetics

frontend/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.vite/

frontend/src/App.css

@@ -1,288 +1,309 @@
-/* ═══════════════════════════════════════════════
-   SOMA — Three-Column Brain Layout
-   Chat | Cognitive Process | Neural Mesh
-   ═══════════════════════════════════════════════ */
+/* ═══════════════════════════════════════════════════════════════
+   SOMA — App Shell
+   ═══════════════════════════════════════════════════════════════ */
 
-.app-container {
+.app-root {
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
+  background: var(--bg-0);
 }
 
-/* ── Header ── */
+/* ══════════════════════════════════════
+   Header
+   ══════════════════════════════════════ */
 .app-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 20px;
-  height: 52px;
-  min-height: 52px;
-  background: rgba(7, 3, 15, 0.92);
-  backdrop-filter: blur(14px);
-  border-bottom: 1px solid rgba(167, 139, 250, 0.12);
-  z-index: 10;
+  justify-content: space-between;
+  height: 56px;
+  min-height: 56px;
+  padding: 0 24px;
+  background: var(--bg-1);
+  border-bottom: 1px solid var(--border-0);
   flex-shrink: 0;
+  z-index: 20;
+  gap: 20px;
 }
 
-/* Logo */
-.logo-section {
+/* ── Logo ── */
+.header-logo {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+  flex-shrink: 0;
 }
 
-.brain-pulse-icon {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--accent-synapse), var(--accent-impulse));
-  box-shadow: 0 0 12px rgba(192, 132, 252, 0.6);
-  animation: brain-pulse 3s ease-in-out infinite;
+/* 3D Rotating Orb */
+.logo-orb {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  transform-style: preserve-3d;
+  animation: orb-spin 10s linear infinite;
   flex-shrink: 0;
 }
 
-@keyframes brain-pulse {
-  0%, 100% { transform: scale(1);   box-shadow: 0 0 10px rgba(192, 132, 252, 0.5); }
-  50%       { transform: scale(1.3); box-shadow: 0 0 20px rgba(240, 171, 252, 0.7); }
+@keyframes orb-spin {
+  from { transform: perspective(80px) rotateY(0deg) rotateX(15deg); }
+  to   { transform: perspective(80px) rotateY(360deg) rotateX(15deg); }
 }
 
-.app-header h1 {
-  margin: 0;
-  font-size: 1.05rem;
-  font-weight: 700;
-  background: linear-gradient(90deg, var(--accent-synapse), var(--accent-impulse));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: 0.45em;
+.orb-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 1.5px solid var(--pulse);
+  opacity: 0.55;
 }
 
-.logo-tagline {
+.orb-ring.r1 { inset: 2px; transform: rotateX(0deg);   }
+.orb-ring.r2 { inset: 2px; transform: rotateX(60deg);  }
+.orb-ring.r3 { inset: 2px; transform: rotateX(-60deg); }
+
+.orb-core {
+  position: absolute;
+  inset: 9px;
+  background: var(--pulse);
+  border-radius: 50%;
+  opacity: 0.7;
+  filter: blur(1px);
+  box-shadow: 0 0 8px var(--pulse);
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.logo-name {
   font-family: var(--font-mono);
-  font-size: 0.48rem;
-  color: #5a4f80;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  margin-top: 2px;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.4em;
+  color: var(--text-0);
+  line-height: 1;
+}
+
+.logo-sub {
+  font-size: 0.46rem;
+  letter-spacing: 0.22em;
+  color: var(--text-2);
 }
 
-/* Center tabs */
+/* ── Center: EEG ── */
 .header-center {
   display: flex;
-  gap: 4px;
-  background: rgba(10, 5, 20, 0.7);
-  border-radius: 8px;
-  padding: 3px;
-  border: 1px solid rgba(167, 139, 250, 0.1);
+  align-items: center;
+  gap: 14px;
+  flex: 1;
+  justify-content: center;
 }
 
-.tab-btn {
-  font-family: var(--font-mono);
-  font-size: 0.58rem;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  padding: 6px 18px;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  background: transparent;
-  color: #6b5fa0;
-  cursor: pointer;
-  transition: all 0.2s ease;
+.state-label {
+  font-size: 0.52rem;
+  letter-spacing: 0.2em;
+  color: var(--text-2);
+  white-space: nowrap;
+  transition: color 0.3s ease;
 }
 
-.tab-btn:hover {
-  color: var(--text-secondary);
-  background: rgba(192, 132, 252, 0.07);
-  transform: none;
-  box-shadow: none;
+.state-label.firing {
+  color: var(--fire);
+  animation: label-blink 1s infinite alternate;
 }
 
-.tab-btn.active {
-  background: rgba(192, 132, 252, 0.16);
-  color: var(--accent-synapse);
-  border-color: rgba(192, 132, 252, 0.3);
+@keyframes label-blink {
+  from { opacity: 1; }
+  to   { opacity: 0.45; }
 }
 
-/* Status / right side */
-.status-indicator {
+/* ── Right Controls ── */
+.header-controls {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  flex-shrink: 0;
 }
 
-.state-pill {
+/* View tabs */
+.view-tabs {
   display: flex;
-  align-items: center;
-  gap: 6px;
+  gap: 2px;
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
+  border-radius: 7px;
+  padding: 3px;
+}
+
+.view-tab {
   font-family: var(--font-mono);
-  font-size: 0.55rem;
+  font-size: 0.56rem;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  letter-spacing: 0.12em;
-  padding: 4px 10px;
-  border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.07);
-  background: rgba(14, 8, 28, 0.7);
-  color: #8a7ab8;
+  padding: 5px 14px;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.state-pill.thinking {
-  color: #10b981;
-  border-color: rgba(16, 185, 129, 0.3);
-  background: rgba(16, 185, 129, 0.06);
+.view-tab:hover {
+  color: var(--text-1);
+  background: var(--border-0);
+  transform: none;
+  box-shadow: none;
 }
 
-.state-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
+.view-tab.active {
+  background: var(--bg-3);
+  color: var(--pulse);
+  border-color: var(--border-1);
+  box-shadow: var(--glow-pulse);
 }
 
-.state-pill.thinking .state-dot {
-  animation: dot-blink 1s infinite alternate;
+/* Sleep btn */
+.sleep-btn {
+  font-family: var(--font-mono);
+  font-size: 0.56rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 6px 14px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid var(--border-1);
+  color: var(--text-2);
+  transition: all 0.2s ease;
 }
 
-@keyframes dot-blink {
-  from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0.3; transform: scale(0.6); }
+.sleep-btn:hover {
+  background: var(--border-0);
+  color: var(--pulse);
+  border-color: var(--pulse);
+  box-shadow: var(--glow-pulse);
+  transform: none;
 }
 
-.sleep-btn-header {
-  font-family: var(--font-mono);
-  font-size: 0.52rem;
-  padding: 5px 12px;
+/* Persona */
+.persona-select {
+  font-family: var(--font-mono) !important;
+  font-size: 0.56rem !important;
+  letter-spacing: 0.1em;
+  background: var(--bg-2) !important;
+  color: var(--text-1) !important;
+  border: 1px solid var(--border-0) !important;
   border-radius: 6px;
-  background: rgba(124, 58, 237, 0.12);
-  border: 1px solid rgba(192, 132, 252, 0.2);
-  color: #9a8ac0;
+  padding: 5px 8px !important;
+  outline: none;
   cursor: pointer;
-  letter-spacing: 0.08em;
-  transition: all 0.2s ease;
+  transition: border-color 0.2s ease;
 }
 
-.sleep-btn-header:hover {
-  background: rgba(192, 132, 252, 0.2);
-  border-color: var(--accent-synapse);
-  color: var(--accent-synapse);
-  box-shadow: 0 0 10px rgba(192, 132, 252, 0.2);
-  transform: none;
-}
+.persona-select:hover { border-color: var(--border-1) !important; }
 
-.sleep-btn-header:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-  transform: none;
+.persona-select option {
+  background: var(--bg-2);
+  color: var(--text-0);
 }
 
-.help-btn {
-  width: 20px;
-  height: 20px;
+/* Theme toggle */
+.theme-toggle {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   border-radius: 50%;
-  border: 1px solid rgba(192, 132, 252, 0.3);
   background: transparent;
-  color: #8a7ab8;
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
+  border: 1px solid var(--border-1);
+  color: var(--text-1);
+  transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+  background: var(--border-0);
+  color: var(--pulse);
+  border-color: var(--pulse);
+  transform: rotate(20deg);
+  box-shadow: var(--glow-pulse);
+}
+
+/* Help */
+.help-btn {
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  cursor: pointer;
+  border-radius: 50%;
+  font-size: 0.65rem;
+  background: transparent;
+  border: 1px solid var(--border-1);
+  color: var(--text-2);
   transition: all 0.2s ease;
 }
 
 .help-btn:hover {
-  background: rgba(192, 132, 252, 0.12);
-  color: var(--accent-synapse);
-  box-shadow: 0 0 8px rgba(192, 132, 252, 0.25);
+  color: var(--pulse);
+  border-color: var(--pulse);
   transform: none;
+  box-shadow: none;
+  background: var(--border-0);
 }
 
-.persona-select {
-  background: rgba(10, 5, 20, 0.8) !important;
-  color: var(--accent-synapse) !important;
-  border: 1px solid rgba(192, 132, 252, 0.25) !important;
-  padding: 4px 8px !important;
-  border-radius: 5px;
-  outline: none;
-  cursor: pointer;
-  font-family: var(--font-mono) !important;
-  font-size: 0.58rem !important;
-  letter-spacing: 0.08em;
-}
-
-.persona-select option {
-  background: #0a0510;
-  color: var(--accent-synapse);
-}
-
-/* ═══ Three-Column Layout ═══ */
+/* ══════════════════════════════════════
+   Three-Column Layout
+   ══════════════════════════════════════ */
 .tri-layout {
   flex: 1;
   display: grid;
-  grid-template-columns: 32% 30% 1fr;
+  grid-template-columns: 30% 32% 1fr;
   overflow: hidden;
   min-height: 0;
 }
 
-/* Chat column */
 .col-chat {
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
-  border-right: 1px solid rgba(167, 139, 250, 0.1);
-  background: rgba(8, 4, 18, 0.4);
+  border-right: 1px solid var(--border-0);
+  background: var(--bg-0);
 }
 
-/* Brain process column */
 .col-brain {
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
+  border-right: 1px solid var(--border-0);
+  background: var(--bg-1);
 }
 
-/* Graph / dreams column */
 .col-graph {
   position: relative;
   overflow: hidden;
-  background: transparent;
-}
-
-/* ── Cognitive State Themes ── */
-.state-focused {
-  --accent-primary: #34d399;
-  --accent-glow: rgba(52, 211, 153, 0.2);
+  background: var(--bg-0);
 }
 
+/* ── Cognitive state background shifts ── */
 .state-sleeping {
-  --bg-base: #030208;
-  --accent-primary: #818cf8;
-  --accent-glow: rgba(129, 140, 248, 0.15);
+  --bg-0: #04040a;
 }
 
-.state-overloaded {
-  --accent-primary: var(--accent-error);
-  --accent-glow: rgba(251, 113, 133, 0.3);
+[data-theme="light"] .state-sleeping {
+  --bg-0: #eee8f5;
 }
 
 /* ── Responsive ── */
 @media (max-width: 1100px) {
-  .tri-layout {
-    grid-template-columns: 40% 1fr;
-    grid-template-rows: 1fr;
-  }
+  .tri-layout { grid-template-columns: 42% 1fr; }
   .col-brain { display: none; }
 }
 
-@media (max-width: 768px) {
-  .tri-layout {
-    grid-template-columns: 1fr;
-    grid-template-rows: 55% 45%;
-  }
+@media (max-width: 680px) {
+  .tri-layout { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
   .col-brain { display: none; }
   .col-graph { grid-row: 2; }
   .header-center { display: none; }
-  .logo-tagline { display: none; }
 }

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import BrainProcess from './components/BrainProcess'
 import KnowledgeGraph from './components/KnowledgeGraph'
 import DreamSequence from './components/DreamSequence'
 import Onboarding from './components/Onboarding'
+import EEGWave from './components/EEGWave'
 import './App.css'
 
 function App() {
@@ -23,6 +24,17 @@ function App() {
   const [rightPanel, setRightPanel] = useState('graph')
   const [currentPersona, setCurrentPersona] = useState('User_Alpha')
   const [showOnboarding, setShowOnboarding] = useState(false)
+  const [theme, setTheme] = useState(() =>
+    localStorage.getItem('soma_theme') || 'dark'
+  )
+
+  // Apply theme to root
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('soma_theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark')
 
   useEffect(() => {
     const hasVisited = localStorage.getItem('soma_visited')
@@ -44,9 +56,7 @@ function App() {
           workingMemory: data.working,
           cognitiveState: data.state || 'IDLE'
         }))
-      } catch (err) {
-        console.error('Failed to fetch brain vitals:', err)
-      }
+      } catch {/* backend offline in dev */ }
     }
 
     const fetchSparks = async () => {
@@ -54,90 +64,89 @@ function App() {
         const res = await fetch(`/api/v1/brain/sparks?user_id=${currentPersona}`)
         const data = await res.json()
         setBrainState(prev => ({ ...prev, sparks: data }))
-      } catch (err) {
-        console.error('Failed to fetch neural sparks:', err)
-      }
+      } catch {/* silent */ }
     }
 
     fetchVitals()
     fetchSparks()
-    const interval = setInterval(() => { fetchVitals(); fetchSparks() }, 20000)
-    return () => clearInterval(interval)
+    const id = setInterval(() => { fetchVitals(); fetchSparks() }, 20000)
+    return () => clearInterval(id)
   }, [currentPersona])
 
   useEffect(() => {
-    const fetchHistory = async () => {
+    const load = async () => {
       try {
         const res = await fetch(`/api/v1/history?user_id=${currentPersona}`)
         const data = await res.json()
         setMessages(data.messages || [])
-      } catch (err) {
-        console.error('Failed to fetch chat history:', err)
-      }
+      } catch {/* silent */ }
     }
-    fetchHistory()
+    load()
   }, [currentPersona])
 
+  const handleSleep = async () => {
+    setBrainState(prev => ({ ...prev, isLoading: true, cognitiveState: 'SLEEPING' }))
+    try {
+      const res = await fetch('/api/v1/sleep', { method: 'POST' })
+      const data = await res.json()
+      setBrainState(prev => ({
+        ...prev, isLoading: false, cognitiveState: 'IDLE',
+        statusMessage: `Consolidated. ${data.graph_relations_extracted} relations extracted.`
+      }))
+    } catch {
+      setBrainState(prev => ({ ...prev, isLoading: false, cognitiveState: 'IDLE' }))
+    }
+  }
+
   return (
-    <div className={`app-container state-${brainState.cognitiveState.toLowerCase()}`}>
+    <div className={`app-root state-${brainState.cognitiveState.toLowerCase()}`}>
 
       {showOnboarding && <Onboarding onClose={() => setShowOnboarding(false)} />}
 
       {/* ── Header ── */}
       <header className="app-header">
-        <div className="logo-section">
-          <div className="brain-pulse-icon" />
-          <h1>SOMA</h1>
-          <span className="logo-tagline">Cognitive AI</span>
+
+        {/* Left: Logo */}
+        <div className="header-logo">
+          <div className="logo-orb">
+            <div className="orb-ring r1" />
+            <div className="orb-ring r2" />
+            <div className="orb-ring r3" />
+            <div className="orb-core" />
+          </div>
+          <div className="logo-text">
+            <span className="logo-name">SOMA</span>
+            <span className="logo-sub t-label">Cognitive AI</span>
+          </div>
         </div>
 
+        {/* Center: EEG + state */}
         <div className="header-center">
-          <button
-            className={`tab-btn ${rightPanel === 'graph' ? 'active' : ''}`}
-            onClick={() => setRightPanel('graph')}
-          >Neural Mesh</button>
-          <button
-            className={`tab-btn ${rightPanel === 'dreams' ? 'active' : ''}`}
-            onClick={() => setRightPanel('dreams')}
-          >Dreams</button>
+          <EEGWave cognitiveState={brainState.cognitiveState} isActive={brainState.isLoading} />
+          <span className={`state-label t-label ${brainState.isLoading ? 'firing' : ''}`}>
+            {brainState.cognitiveState}
+          </span>
         </div>
 
-        <div className="status-indicator">
-          <button
-            className="help-btn"
-            onClick={() => setShowOnboarding(true)}
-            title="System Overview"
-          >?</button>
-
-          <div className={`state-pill ${brainState.isLoading ? 'thinking' : 'idle'}`}>
-            <span className="state-dot" />
-            <span>{brainState.cognitiveState}</span>
+        {/* Right: Controls */}
+        <div className="header-controls">
+          <div className="view-tabs">
+            <button
+              className={`view-tab ${rightPanel === 'graph' ? 'active' : ''}`}
+              onClick={() => setRightPanel('graph')}
+            >Mesh</button>
+            <button
+              className={`view-tab ${rightPanel === 'dreams' ? 'active' : ''}`}
+              onClick={() => setRightPanel('dreams')}
+            >Dreams</button>
           </div>
 
-          <button
-            className="sleep-btn-header"
-            onClick={async () => {
-              setBrainState(prev => ({ ...prev, isLoading: true, statusMessage: 'Sleeping...', cognitiveState: 'SLEEPING' }))
-              try {
-                const res = await fetch('/api/v1/sleep', { method: 'POST' })
-                const data = await res.json()
-                setBrainState(prev => ({
-                  ...prev,
-                  isLoading: false,
-                  statusMessage: `Sleep done. ${data.graph_relations_extracted} relations extracted.`,
-                  cognitiveState: 'IDLE'
-                }))
-              } catch {
-                setBrainState(prev => ({ ...prev, isLoading: false, statusMessage: 'Sleep failed.', cognitiveState: 'IDLE' }))
-              }
-            }}
-            disabled={brainState.isLoading}
-          >
-            💤 Sleep
+          <button className="sleep-btn" onClick={handleSleep} disabled={brainState.isLoading} title="Consolidate memories">
+            Sleep
           </button>
 
           <select
-            className="persona-select label-mono"
+            className="persona-select t-label"
             value={currentPersona}
             onChange={e => setCurrentPersona(e.target.value)}
           >
@@ -145,13 +154,34 @@ function App() {
             <option value="User_Beta">Beta</option>
             <option value="System_Admin">Admin</option>
           </select>
+
+          <button className="theme-toggle" onClick={toggleTheme} title="Toggle theme" aria-label="Toggle theme">
+            {theme === 'dark' ? (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="12" cy="12" r="5"/>
+                <line x1="12" y1="1" x2="12" y2="3"/>
+                <line x1="12" y1="21" x2="12" y2="23"/>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+                <line x1="1" y1="12" x2="3" y2="12"/>
+                <line x1="21" y1="12" x2="23" y2="12"/>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+              </svg>
+            ) : (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+              </svg>
+            )}
+          </button>
+
+          <button className="help-btn t-label" onClick={() => setShowOnboarding(true)} title="About">?</button>
         </div>
       </header>
 
       {/* ── Three-Column Layout ── */}
       <div className="tri-layout">
 
-        {/* LEFT — Chat */}
         <div className="col-chat">
           <ChatPanel
             messages={messages}
@@ -163,25 +193,18 @@ function App() {
           />
         </div>
 
-        {/* CENTER — Cognitive Architecture */}
         <div className="col-brain">
           <BrainProcess
             brainState={brainState}
-            setBrainState={setBrainState}
             currentPersona={currentPersona}
           />
         </div>
 
-        {/* RIGHT — Knowledge Mesh or Dreams */}
         <div className="col-graph">
-          {rightPanel === 'graph' ? (
-            <KnowledgeGraph
-              highlightedNodes={brainState.highlightedNodes}
-              currentPersona={currentPersona}
-            />
-          ) : (
-            <DreamSequence sparks={brainState.sparks} />
-          )}
+          {rightPanel === 'graph'
+            ? <KnowledgeGraph highlightedNodes={brainState.highlightedNodes} currentPersona={currentPersona} />
+            : <DreamSequence sparks={brainState.sparks} />
+          }
         </div>
 
       </div>

frontend/src/components/BrainProcess.css

@@ -1,433 +1,385 @@
-/* ═══════════════════════════════════════════
+/* ═══════════════════════════════════════════════
    BrainProcess — Cognitive Architecture Panel
-   ═══════════════════════════════════════════ */
+   ═══════════════════════════════════════════════ */
 
-.bp-panel {
-  display: flex;
-  flex-direction: column;
+.bp {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 16px 14px;
-  gap: 18px;
-  background: rgba(10, 5, 22, 0.5);
-  border-left: 1px solid rgba(167, 139, 250, 0.12);
-  border-right: 1px solid rgba(167, 139, 250, 0.12);
-}
-
-.bp-panel::-webkit-scrollbar { width: 3px; }
-.bp-panel::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.35); border-radius: 2px; }
-
-/* ── Header ── */
-.bp-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(167, 139, 250, 0.15);
-  flex-shrink: 0;
-}
-
-.bp-title {
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  font-weight: 700;
-  letter-spacing: 0.22em;
-  color: var(--accent-synapse);
-  text-transform: uppercase;
-}
-
-.bp-status-badge {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-mono);
-  font-size: 0.52rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  padding: 3px 8px;
-  border-radius: 20px;
-  border: 1px solid rgba(255,255,255,0.06);
-}
-
-.bp-status-badge.idle {
-  color: #6b5fa0;
-  background: rgba(15, 8, 30, 0.6);
-}
-
-.bp-status-badge.active {
-  color: #10b981;
-  background: rgba(16, 185, 129, 0.08);
-  border-color: rgba(16, 185, 129, 0.25);
-}
-
-.bp-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.bp-status-badge.active .bp-status-dot {
-  animation: dot-pulse 1s infinite alternate;
+  flex-direction: column;
+  gap: 28px;
+  padding: 22px 20px 28px;
 }
 
-@keyframes dot-pulse {
-  from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0.4; transform: scale(0.7); }
-}
+.bp::-webkit-scrollbar { width: 3px; }
+.bp::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 2px; }
 
-/* ── Sections ── */
+/* ── Section ── */
 .bp-section { flex-shrink: 0; }
 
-.bp-section-label {
-  font-family: var(--font-mono);
-  font-size: 0.5rem;
-  color: #6b5fa0;
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  margin-bottom: 10px;
-  padding-left: 6px;
-  border-left: 2px solid rgba(192, 132, 252, 0.35);
-}
-
-/* ── Pipeline ── */
+/* Italic serif section heading — the key typographic choice */
+.bp-sh {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.82rem;
+  font-weight: 400;
+  color: var(--text-1);
+  letter-spacing: 0.01em;
+  margin-bottom: 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-0);
+}
+
+/* ══════════════════════════════════════
+   Pipeline — 3D depth stack
+   ══════════════════════════════════════ */
 .bp-pipeline {
   display: flex;
   flex-direction: column;
   gap: 0;
+  perspective: 900px;
+  perspective-origin: 50% 0%;
 }
 
-.bp-pipeline-row {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
+.bp-stage-wrap { display: flex; flex-direction: column; }
 
 .bp-stage {
   position: relative;
-  background: rgba(14, 8, 28, 0.85);
-  border: 1px solid rgba(167, 139, 250, 0.15);
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
+  border-left: 3px solid var(--clr, var(--border-1));
   border-radius: 10px;
-  padding: 12px 14px;
+  padding: 14px 16px;
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  transition: all 0.35s ease;
+  gap: 14px;
+  transition: transform 0.35s ease, box-shadow 0.35s ease,
+              border-color 0.35s ease, background 0.35s ease;
   overflow: hidden;
+  transform: translateZ(0);
 }
 
-.bp-stage::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 10px;
-  background: transparent;
-  transition: background 0.35s ease;
-}
-
+/* Active: lift toward viewer */
 .bp-stage.active {
-  border-color: var(--stage-color);
-  box-shadow: 0 0 22px rgba(192, 132, 252, 0.22), inset 0 0 18px rgba(124, 58, 237, 0.08);
+  background: var(--bg-3);
+  border-color: var(--clr);
+  transform: perspective(600px) translateZ(12px) scale(1.01);
+  box-shadow: var(--glow-pulse),
+              0 8px 24px rgba(0,0,0,0.25);
+  z-index: 2;
 }
 
-/* Per-stage active glow colours */
-.bp-stage[style*="--stage-color: #f59e0b"].active {
-  box-shadow: 0 0 22px rgba(245, 158, 11, 0.25), inset 0 0 18px rgba(245, 158, 11, 0.06);
-}
-.bp-stage[style*="--stage-color: #06b6d4"].active {
-  box-shadow: 0 0 22px rgba(6, 182, 212, 0.25), inset 0 0 18px rgba(6, 182, 212, 0.06);
-}
-.bp-stage[style*="--stage-color: #10b981"].active {
-  box-shadow: 0 0 22px rgba(16, 185, 129, 0.25), inset 0 0 18px rgba(16, 185, 129, 0.06);
-}
-
-.bp-stage.active::before {
-  background: rgba(124, 58, 237, 0.06);
-}
-
-.bp-stage.waiting { opacity: 0.45; }
+.bp-stage.dim { opacity: 0.42; }
 
 .bp-stage.done {
-  border-color: rgba(16, 185, 129, 0.3);
-  opacity: 0.75;
+  opacity: 0.7;
+  border-left-color: var(--calm);
 }
 
-.bp-stage-pulse-ring {
+/* Pulsing aura ring */
+.bp-stage-aura {
   position: absolute;
   inset: -2px;
   border-radius: 11px;
-  border: 2px solid var(--stage-color);
-  animation: pulse-ring 1.6s infinite;
+  border: 1.5px solid var(--clr);
+  animation: aura-pulse 1.8s infinite;
   pointer-events: none;
 }
 
-@keyframes pulse-ring {
-  0%   { transform: scale(1); opacity: 0.7; }
-  100% { transform: scale(1.03); opacity: 0; }
+@keyframes aura-pulse {
+  0%   { transform: scale(1);    opacity: 0.7; }
+  100% { transform: scale(1.04); opacity: 0; }
 }
 
-.bp-stage-icon {
-  font-size: 1.3rem;
+/* Stage number badge */
+.bp-stage-badge {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 0.58rem;
+  font-weight: 700;
+  color: var(--bg-0);
   flex-shrink: 0;
-  margin-top: 1px;
-  transition: filter 0.3s;
+  letter-spacing: 0.04em;
+  transition: filter 0.3s ease;
 }
 
-.bp-stage.active .bp-stage-icon {
-  filter: drop-shadow(0 0 8px var(--stage-color));
+.bp-stage.active .bp-stage-badge {
+  filter: drop-shadow(0 0 6px var(--clr));
 }
 
 .bp-stage-body { flex: 1; min-width: 0; }
 
-.bp-stage-label-text {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  color: #b8a8e8;
+.bp-stage-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-0);
+  letter-spacing: 0.01em;
   margin-bottom: 2px;
+  transition: color 0.3s;
 }
 
-.bp-stage.active .bp-stage-label-text {
-  color: var(--stage-color);
-  text-shadow: 0 0 10px var(--stage-color);
-}
+.bp-stage.active .bp-stage-name { color: var(--clr); }
 
 .bp-stage-region {
-  font-family: var(--font-mono);
-  font-size: 0.52rem;
-  color: #5a4f80;
-  letter-spacing: 0.1em;
-  margin-bottom: 5px;
-  text-transform: uppercase;
+  font-size: 0.48rem;
+  color: var(--text-2);
+  letter-spacing: 0.18em;
+  margin-bottom: 6px;
 }
 
-.bp-stage.active .bp-stage-region { color: #8a7ab0; }
-
 .bp-stage-desc {
-  font-size: 0.65rem;
-  color: #7a6fa0;
-  line-height: 1.5;
+  font-size: 0.7rem;
+  color: var(--text-2);
+  line-height: 1.55;
+  transition: color 0.3s;
 }
 
-.bp-stage.active .bp-stage-desc { color: #a898d0; }
+.bp-stage.active .bp-stage-desc { color: var(--text-1); }
 
-.bp-stage-check {
-  font-size: 0.8rem;
-  color: #10b981;
+.bp-stage-done {
+  font-size: 0.75rem;
+  color: var(--calm);
   font-weight: 700;
   flex-shrink: 0;
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
-/* ── Connector between stages ── */
-.bp-connector {
+/* Arrow connector */
+.bp-arrow {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 4px 0;
+  padding: 3px 0 3px 14px; /* align with badge center */
   gap: 0;
+  pointer-events: none;
 }
 
-.bp-connector-line {
+.bp-arrow-line {
   width: 1px;
-  height: 12px;
-  background: rgba(167, 139, 250, 0.2);
-  transition: background 0.3s;
+  height: 14px;
+  background: var(--border-0);
+  transition: background 0.5s ease;
 }
 
-.bp-connector.flowing .bp-connector-line {
-  background: linear-gradient(to bottom, rgba(192, 132, 252, 0.6), rgba(192, 132, 252, 0.1));
-  animation: line-flow 1.5s infinite;
+.bp-arrow.pulse .bp-arrow-line {
+  animation: line-drip 1.2s ease infinite;
 }
 
-@keyframes line-flow {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
+@keyframes line-drip {
+  0%, 100% { opacity: 0.3; }
+  50%       { opacity: 0.9; }
 }
 
-.bp-connector-arrow {
-  font-size: 0.7rem;
-  color: rgba(167, 139, 250, 0.35);
-  line-height: 1;
-}
-
-.bp-connector.flowing .bp-connector-arrow {
-  color: var(--accent-synapse);
-  animation: line-flow 1.5s infinite;
+.bp-arrow-head {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--border-1);
 }
 
-/* ── Memory Grid ── */
+/* ══════════════════════════════════════
+   Memory Cards — 3D tilt
+   ══════════════════════════════════════ */
 .bp-mem-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 10px;
 }
 
 .bp-mem-card {
   position: relative;
-  background: rgba(14, 8, 28, 0.85);
-  border: 1px solid rgba(255,255,255,0.07);
-  border-radius: 10px;
-  padding: 10px 10px 14px 10px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
+  border-radius: 12px;
+  padding: 14px 14px 18px;
   overflow: hidden;
-  transition: border-color 0.3s;
+  cursor: default;
+  /* 3D tilt */
+  transform: perspective(600px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
+  transform-style: preserve-3d;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  will-change: transform;
 }
 
-.bp-mem-card[data-layer="sensory"] { border-left: 3px solid #06b6d4; }
-.bp-mem-card[data-layer="semantic"] { border-left: 3px solid #a78bfa; }
-.bp-mem-card[data-layer="episodic"] { border-left: 3px solid #f59e0b; }
-.bp-mem-card[data-layer="working"]  { border-left: 3px solid #10b981; }
-
-.bp-mem-card[data-layer="sensory"]  { background: rgba(6, 182, 212, 0.04); }
-.bp-mem-card[data-layer="semantic"] { background: rgba(167, 139, 250, 0.04); }
-.bp-mem-card[data-layer="episodic"] { background: rgba(245, 158, 11, 0.04); }
-.bp-mem-card[data-layer="working"]  { background: rgba(16, 185, 129, 0.04); }
+.bp-mem-card:hover {
+  box-shadow: var(--glow-pulse), 0 10px 28px rgba(0,0,0,0.3);
+  border-color: var(--clr);
+  z-index: 1;
+}
 
-.bp-mem-icon-wrap { flex-shrink: 0; }
+/* Specular sheen that moves with tilt */
+.bp-mem-shine {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    circle at calc(50% + var(--ty, 0deg) * 3) calc(50% - var(--tx, 0deg) * 3),
+    rgba(255,255,255,0.07) 0%,
+    transparent 60%
+  );
+  pointer-events: none;
+  border-radius: inherit;
+}
 
-.bp-mem-icon {
-  font-size: 1.1rem;
-  filter: drop-shadow(0 0 6px currentColor);
+[data-theme="light"] .bp-mem-shine {
+  background: radial-gradient(
+    circle at 50% 30%,
+    rgba(255,255,255,0.4) 0%,
+    transparent 60%
+  );
 }
 
-.bp-mem-info { flex: 1; min-width: 0; }
+/* Per-layer left accent */
+.bp-mem-card[data-layer="sensory"]  { border-left: 3px solid #4ecdc4; }
+.bp-mem-card[data-layer="semantic"] { border-left: 3px solid #a87ecf; }
+.bp-mem-card[data-layer="episodic"] { border-left: 3px solid #d4a853; }
+.bp-mem-card[data-layer="working"]  { border-left: 3px solid #e07a38; }
+
+.bp-mem-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
 
 .bp-mem-name {
-  font-family: var(--font-mono);
-  font-size: 0.62rem;
-  font-weight: 700;
-  color: #d4c8f8;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-0);
+  letter-spacing: 0.01em;
 }
 
-.bp-mem-sub {
+.bp-mem-count {
   font-family: var(--font-mono);
-  font-size: 0.5rem;
-  color: #6b5fa0;
-  letter-spacing: 0.08em;
-  margin-top: 2px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  filter: drop-shadow(0 0 6px currentColor);
 }
 
-.bp-mem-sub2 {
-  font-size: 0.48rem;
-  color: #4a4060;
-  margin-top: 1px;
+.bp-mem-tech {
+  font-size: 0.46rem;
+  letter-spacing: 0.2em;
+  color: var(--clr);
+  margin-bottom: 3px;
 }
 
-.bp-mem-count {
-  font-family: var(--font-mono);
-  font-size: 1.4rem;
-  font-weight: 700;
-  flex-shrink: 0;
-  filter: drop-shadow(0 0 8px currentColor);
+.bp-mem-detail {
+  font-size: 0.65rem;
+  color: var(--text-2);
   line-height: 1;
 }
 
-/* thin bottom accent bar */
 .bp-mem-bar {
   position: absolute;
   bottom: 0;
-  left: 0; right: 0;
+  left: 0;
+  right: 0;
   height: 2px;
-  opacity: 0.25;
-  border-radius: 0 0 10px 10px;
+  opacity: 0.22;
+  border-radius: 0 0 12px 12px;
 }
 
-/* ── Internal Reflection ── */
+/* ══════════════════════════════════════
+   Reflection
+   ══════════════════════════════════════ */
 .bp-reflection {
-  background: rgba(124, 58, 237, 0.08);
-  border: 1px solid rgba(167, 139, 250, 0.2);
-  border-radius: 10px;
-  padding: 12px 14px;
+  background: var(--bg-2);
+  border: 1px solid var(--border-1);
+  border-radius: 12px;
+  padding: 16px 18px;
   display: flex;
   gap: 10px;
   align-items: flex-start;
-  animation: slide-in 0.4s ease;
+  animation: soma-rise 0.4s ease both;
 }
 
-@keyframes slide-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.bp-reflection-bubble {
-  font-size: 1.1rem;
+.bp-ref-mark {
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  color: var(--pulse);
+  opacity: 0.5;
+  line-height: 0.7;
   flex-shrink: 0;
-  margin-top: 1px;
+  margin-top: 6px;
+  font-style: italic;
 }
 
-.bp-reflection-text {
-  font-size: 0.75rem;
-  color: #c8b8f0;
-  line-height: 1.65;
+.bp-reflection p {
+  font-size: 0.8rem;
+  color: var(--text-0);
+  line-height: 1.7;
   font-style: italic;
 }
 
-/* ── Traces ── */
+/* ══════════════════════════════════════
+   Traces
+   ══════════════════════════════════════ */
 .bp-traces {
   display: flex;
   flex-direction: column;
   gap: 5px;
 }
 
-.bp-trace-row {
+.bp-trace {
   display: flex;
   gap: 8px;
   align-items: flex-start;
-  padding: 6px 10px;
+  padding: 7px 10px;
+  background: var(--bg-2);
   border-radius: 7px;
-  background: rgba(14, 8, 28, 0.6);
-  animation: trace-in 0.25s ease both;
-}
-
-@keyframes trace-in {
-  from { opacity: 0; transform: translateX(-6px); }
-  to   { opacity: 1; transform: translateX(0); }
+  animation: soma-rise 0.25s ease both;
 }
 
-.bp-trace-phase {
-  font-family: var(--font-mono);
-  font-size: 0.46rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+.bp-trace-ph {
+  font-size: 0.44rem;
+  letter-spacing: 0.12em;
   padding: 2px 6px;
   border-radius: 3px;
   flex-shrink: 0;
   margin-top: 2px;
+  font-weight: 700;
 }
 
-.bp-trace-row.perception  .bp-trace-phase { background: rgba(245, 158, 11, 0.2);  color: #f59e0b; }
-.bp-trace-row.recall      .bp-trace-phase { background: rgba(6, 182, 212, 0.2);   color: #06b6d4; }
-.bp-trace-row.association .bp-trace-phase { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
-.bp-trace-row.synthesis   .bp-trace-phase,
-.bp-trace-row.reasoning   .bp-trace-phase { background: rgba(16, 185, 129, 0.2);  color: #10b981; }
+.bp-trace.perception  .bp-trace-ph { background: rgba(212,168,83,0.15);  color: #d4a853; }
+.bp-trace.recall      .bp-trace-ph { background: rgba(78,205,196,0.15);  color: #4ecdc4; }
+.bp-trace.association .bp-trace-ph { background: rgba(168,126,207,0.15); color: #a87ecf; }
+.bp-trace.synthesis   .bp-trace-ph,
+.bp-trace.reasoning   .bp-trace-ph { background: rgba(224,122,56,0.15);  color: #e07a38; }
 
 .bp-trace-msg {
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  color: #a898cc;
+  font-size: 0.65rem;
+  color: var(--text-1);
   line-height: 1.55;
+  font-family: var(--font-mono);
 }
 
-/* ── Sparks ── */
-.bp-sparks {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+/* ══════════════════════════════════════
+   Sparks
+   ══════════════════════════════════════ */
+.bp-spark-sub {
+  font-size: 0.46rem;
+  letter-spacing: 0.15em;
+  color: var(--text-2);
+  margin-bottom: 10px;
+  margin-top: -8px;
 }
 
-.bp-spark-card {
-  background: rgba(192, 132, 252, 0.05);
-  border: 1px solid rgba(192, 132, 252, 0.14);
-  border-radius: 8px;
-  padding: 10px 12px;
-  animation: slide-in 0.4s ease;
+.bp-sparks { display: flex; flex-direction: column; gap: 8px; }
+
+.bp-spark {
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
+  border-radius: 10px;
+  padding: 12px 14px;
+  animation: soma-flip-in 0.4s ease both;
 }
 
 .bp-spark-tags {
@@ -438,92 +390,107 @@
 }
 
 .bp-spark-tag {
-  font-family: var(--font-mono);
-  font-size: 0.48rem;
-  background: rgba(240, 171, 252, 0.1);
-  color: #e879f9;
+  font-size: 0.44rem;
+  letter-spacing: 0.1em;
+  color: var(--pulse);
+  background: var(--border-0);
+  border: 1px solid var(--border-1);
   padding: 2px 7px;
   border-radius: 3px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
 }
 
-.bp-spark-text {
-  font-size: 0.7rem;
-  color: #c0b0e0;
+.bp-spark p {
+  font-size: 0.72rem;
+  color: var(--text-1);
   line-height: 1.55;
 }
 
-/* ── Idle state ── */
+/* ══════════════════════════════════════
+   Idle
+   ══════════════════════════════════════ */
 .bp-idle {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 18px;
-  padding: 30px 10px;
+  gap: 22px;
+  padding: 20px 10px;
   text-align: center;
 }
 
-.bp-idle-orb {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  border: 1px solid rgba(192, 132, 252, 0.2);
-  background: rgba(124, 58, 237, 0.06);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Nested 3D rings as idle indicator */
+.bp-idle-fig {
+  width: 72px;
+  height: 72px;
+  position: relative;
+  transform-style: preserve-3d;
+  animation: idle-fig-spin 14s linear infinite;
+}
+
+@keyframes idle-fig-spin {
+  from { transform: perspective(80px) rotateY(0deg)   rotateX(20deg); }
+  to   { transform: perspective(80px) rotateY(360deg) rotateX(20deg); }
 }
 
-.bp-idle-core {
-  width: 22px;
-  height: 22px;
+.bp-idle-r1, .bp-idle-r2, .bp-idle-r3 {
+  position: absolute;
+  inset: 0;
   border-radius: 50%;
-  background: rgba(192, 132, 252, 0.35);
-  animation: idle-breathe 3.5s infinite ease-in-out;
+  border: 1px solid var(--pulse);
+  opacity: 0.35;
 }
+.bp-idle-r1 { inset: 6px; transform: rotateX(0deg); }
+.bp-idle-r2 { inset: 6px; transform: rotateX(60deg); }
+.bp-idle-r3 { inset: 6px; transform: rotateX(-60deg); }
 
-@keyframes idle-breathe {
-  0%, 100% { transform: scale(1);   opacity: 0.35; box-shadow: none; }
-  50%       { transform: scale(1.4); opacity: 0.75; box-shadow: 0 0 20px rgba(192, 132, 252, 0.4); }
+.bp-idle-dot {
+  position: absolute;
+  inset: 26px;
+  background: var(--pulse);
+  border-radius: 50%;
+  opacity: 0.55;
+  animation: soma-pulse 4s infinite ease-in-out;
+  filter: blur(1px);
+  box-shadow: 0 0 12px var(--pulse);
 }
 
-.bp-idle-hint {
-  font-family: var(--font-mono);
-  font-size: 0.58rem;
-  color: #6b5fa0;
+.bp-idle-text {
+  font-size: 0.72rem;
+  color: var(--text-2);
   line-height: 1.8;
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
   letter-spacing: 0.06em;
-  text-transform: uppercase;
 }
 
-.bp-idle-legend {
+.bp-idle-key {
+  align-self: stretch;
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
+  border-radius: 10px;
+  padding: 14px 16px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  align-self: stretch;
-  background: rgba(14, 8, 28, 0.5);
-  border: 1px solid rgba(167, 139, 250, 0.1);
-  border-radius: 8px;
-  padding: 12px 14px;
+  gap: 10px;
 }
 
-.bp-legend-row {
+.bp-idle-row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-family: var(--font-mono);
-  font-size: 0.56rem;
-  color: #8a7ab8;
-  letter-spacing: 0.05em;
+  gap: 10px;
 }
 
-.bp-legend-dot {
+.bp-idle-pip {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
   filter: drop-shadow(0 0 4px currentColor);
 }
+
+.bp-idle-lbl {
+  font-size: 0.52rem;
+  color: var(--text-1);
+  letter-spacing: 0.12em;
+}

frontend/src/components/BrainProcess.jsx

@@ -1,127 +1,101 @@
 import './BrainProcess.css';
 
-const PIPELINE_STAGES = [
+const STAGES = [
   {
     id: 'reflect',
-    label: 'REFLECT',
+    label: 'Reflect',
     region: 'Prefrontal Cortex',
-    desc: 'Analyses intent & sets cognitive direction',
-    icon: '◈',
+    desc: 'Sets cognitive direction, interprets intent',
     phases: ['perception'],
-    color: '#f59e0b',
+    color: '#d4a853',  /* amber */
   },
   {
     id: 'retrieve',
-    label: 'RETRIEVE',
+    label: 'Retrieve',
     region: 'Hippocampus',
-    desc: 'Searches sensory, semantic & episodic memory',
-    icon: '◎',
+    desc: 'Searches sensory, semantic & episodic stores',
     phases: ['recall', 'association'],
-    color: '#06b6d4',
+    color: '#4ecdc4',  /* teal */
   },
   {
     id: 'synthesize',
-    label: 'SYNTHESIZE',
+    label: 'Synthesize',
     region: 'Neocortex',
-    desc: 'Integrates memories → generates response',
-    icon: '◉',
+    desc: 'Weaves memories into language & response',
     phases: ['synthesis', 'reasoning'],
-    color: '#10b981',
+    color: '#e07a38',  /* fire */
   },
 ];
 
 const MEMORY_LAYERS = [
-  {
-    id: 'sensory',
-    label: 'Sensory',
-    sublabel: 'ChromaDB',
-    sublabel2: 'Vector embeddings',
-    key: 'sensoryDocuments',
-    color: '#06b6d4',
-    icon: '◈',
-  },
-  {
-    id: 'semantic',
-    label: 'Semantic',
-    sublabel: 'Neo4j Graph',
-    sublabel2: 'Knowledge graph',
-    key: 'graphRelations',
-    color: '#a78bfa',
-    icon: '⬡',
-  },
-  {
-    id: 'episodic',
-    label: 'Episodic',
-    sublabel: 'SQLite',
-    sublabel2: 'Temporal log',
-    key: 'workingMemory',
-    color: '#f59e0b',
-    icon: '◇',
-  },
-  {
-    id: 'working',
-    label: 'Working',
-    sublabel: 'Active Context',
-    sublabel2: 'Short-term buffer',
-    key: 'workingMemory',
-    color: '#10b981',
-    icon: '◉',
-  },
+  { id: 'sensory',   label: 'Sensory',   tech: 'ChromaDB',     detail: 'Vector embeddings',  key: 'sensoryDocuments', color: '#4ecdc4' },
+  { id: 'semantic',  label: 'Semantic',  tech: 'Neo4j',        detail: 'Knowledge graph',    key: 'graphRelations',   color: '#a87ecf' },
+  { id: 'episodic',  label: 'Episodic',  tech: 'SQLite',       detail: 'Temporal log',       key: null,               color: '#d4a853' },
+  { id: 'working',   label: 'Working',   tech: 'Context',      detail: 'Active buffer',      key: 'workingMemory',    color: '#e07a38' },
 ];
 
 function getActiveStage(traces, isLoading) {
   if (!isLoading || !traces?.length) return null;
   const last = traces[traces.length - 1];
-  if (!last) return null;
-  for (const stage of PIPELINE_STAGES) {
-    if (stage.phases.includes(last.phase)) return stage.id;
+  for (const s of STAGES) {
+    if (s.phases.includes(last?.phase)) return s.id;
   }
   return null;
 }
 
+// 3D card tilt on mouse move
+function tiltCard(e) {
+  const el = e.currentTarget;
+  const r  = el.getBoundingClientRect();
+  const dx = (e.clientX - (r.left + r.width  / 2)) / (r.width  / 2);
+  const dy = (e.clientY - (r.top  + r.height / 2)) / (r.height / 2);
+  el.style.setProperty('--tx', `${dy * -7}deg`);
+  el.style.setProperty('--ty', `${dx *  7}deg`);
+}
+
+function resetTilt(e) {
+  e.currentTarget.style.setProperty('--tx', '0deg');
+  e.currentTarget.style.setProperty('--ty', '0deg');
+}
+
 function BrainProcess({ brainState }) {
-  const isActive = brainState.isLoading;
-  const currentStage = getActiveStage(brainState.traces, isActive);
-  const recentTraces = (brainState.traces || []).slice(-6);
+  const isActive   = brainState.isLoading;
+  const activeId   = getActiveStage(brainState.traces, isActive);
+  const traces     = (brainState.traces || []).slice(-6);
+  const hasSparks  = brainState.sparks?.length > 0;
+  const showIdle   = !isActive && traces.length === 0 && !brainState.reflection && !hasSparks;
 
   return (
-    <div className="bp-panel">
+    <div className="bp">
 
-      {/* ── Header ── */}
-      <div className="bp-header">
-        <span className="bp-title">Cognitive Architecture</span>
-        <span className={`bp-status-badge ${isActive ? 'active' : 'idle'}`}>
-          <span className="bp-status-dot" />
-          {isActive ? 'Processing' : 'Idle'}
-        </span>
-      </div>
-
-      {/* ── Pipeline ── */}
+      {/* ── Section: Pipeline ── */}
       <section className="bp-section">
-        <div className="bp-section-label">Neural Pipeline</div>
-        <div className="bp-pipeline">
-          {PIPELINE_STAGES.map((stage, idx) => {
-            const isThis = currentStage === stage.id;
-            const isPast = currentStage && PIPELINE_STAGES.findIndex(s => s.id === currentStage) > idx && isActive;
+        <h3 className="bp-sh t-display">Neural Pipeline</h3>
+        <div className={`bp-pipeline ${isActive ? 'running' : ''}`}>
+          {STAGES.map((stage, i) => {
+            const isThis = activeId === stage.id;
+            const isDone = activeId && STAGES.findIndex(s => s.id === activeId) > i && isActive;
             return (
-              <div key={stage.id} className="bp-pipeline-row">
+              <div key={stage.id} className="bp-stage-wrap">
                 <div
-                  className={`bp-stage ${isThis ? 'active' : ''} ${isPast ? 'done' : ''} ${isActive && !isThis && !isPast ? 'waiting' : ''}`}
-                  style={{ '--stage-color': stage.color }}
+                  className={`bp-stage ${isThis ? 'active' : ''} ${isDone ? 'done' : ''} ${isActive && !isThis ? 'dim' : ''}`}
+                  style={{ '--clr': stage.color }}
                 >
-                  {isThis && <div className="bp-stage-pulse-ring" />}
-                  <div className="bp-stage-icon" style={{ color: stage.color }}>{stage.icon}</div>
+                  {isThis && <div className="bp-stage-aura" />}
+                  <div className="bp-stage-badge" style={{ background: stage.color }}>
+                    {String(i + 1).padStart(2, '0')}
+                  </div>
                   <div className="bp-stage-body">
-                    <div className="bp-stage-label-text">{stage.label}</div>
-                    <div className="bp-stage-region">{stage.region}</div>
-                    <div className="bp-stage-desc">{stage.desc}</div>
+                    <div className="bp-stage-name">{stage.label}</div>
+                    <div className="bp-stage-region t-label">{stage.region}</div>
+                    <p className="bp-stage-desc">{stage.desc}</p>
                   </div>
-                  {isPast && <div className="bp-stage-check">✓</div>}
+                  {isDone && <div className="bp-stage-done">✓</div>}
                 </div>
-                {idx < PIPELINE_STAGES.length - 1 && (
-                  <div className={`bp-connector ${isActive ? 'flowing' : ''}`}>
-                    <div className="bp-connector-line" />
-                    <div className="bp-connector-arrow">↓</div>
+                {i < STAGES.length - 1 && (
+                  <div className={`bp-arrow ${isActive ? 'pulse' : ''}`}>
+                    <div className="bp-arrow-line" style={{ background: isActive ? STAGES[i].color : undefined }} />
+                    <div className="bp-arrow-head" />
                   </div>
                 )}
               </div>
@@ -130,93 +104,98 @@ function BrainProcess({ brainState }) {
         </div>
       </section>
 
-      {/* ── Memory Layers ── */}
+      {/* ── Section: Memory Architecture ── */}
       <section className="bp-section">
-        <div className="bp-section-label">Memory Architecture</div>
-        <div className="bp-mem-grid">
+        <h3 className="bp-sh t-display">Memory Architecture</h3>
+        <div className="bp-mem-grid scene-3d">
           {MEMORY_LAYERS.map(layer => (
             <div
               key={layer.id}
-              className="bp-mem-card"
-              style={{ '--mem-color': layer.color }}
+              className="bp-mem-card noisy"
               data-layer={layer.id}
+              style={{ '--clr': layer.color }}
+              onMouseMove={tiltCard}
+              onMouseLeave={resetTilt}
             >
-              <div className="bp-mem-icon-wrap">
-                <span className="bp-mem-icon" style={{ color: layer.color }}>{layer.icon}</span>
-              </div>
-              <div className="bp-mem-info">
-                <div className="bp-mem-name">{layer.label}</div>
-                <div className="bp-mem-sub">{layer.sublabel}</div>
-                <div className="bp-mem-sub2">{layer.sublabel2}</div>
-              </div>
-              <div className="bp-mem-count" style={{ color: layer.color }}>
-                {layer.key ? (brainState[layer.key] ?? 0) : '—'}
+              <div className="bp-mem-shine" />
+              <div className="bp-mem-top">
+                <span className="bp-mem-name">{layer.label}</span>
+                <span className="bp-mem-count" style={{ color: layer.color }}>
+                  {layer.key ? (brainState[layer.key] ?? 0) : '—'}
+                </span>
               </div>
+              <div className="bp-mem-tech t-label">{layer.tech}</div>
+              <div className="bp-mem-detail">{layer.detail}</div>
               <div className="bp-mem-bar" style={{ background: layer.color }} />
             </div>
           ))}
         </div>
       </section>
 
-      {/* ── Internal Reflection ── */}
+      {/* ── Section: Internal monologue ── */}
       {brainState.reflection && (
         <section className="bp-section">
-          <div className="bp-section-label">Internal Monologue</div>
+          <h3 className="bp-sh t-display">Internal Monologue</h3>
           <div className="bp-reflection">
-            <span className="bp-reflection-bubble">💭</span>
-            <p className="bp-reflection-text">{brainState.reflection}</p>
+            <span className="bp-ref-mark">"</span>
+            <p>{brainState.reflection}</p>
           </div>
         </section>
       )}
 
-      {/* ── Cognitive Trace ── */}
-      {recentTraces.length > 0 && (
+      {/* ── Section: Live Trace ── */}
+      {traces.length > 0 && (
         <section className="bp-section">
-          <div className="bp-section-label">Live Cognitive Trace</div>
+          <h3 className="bp-sh t-display">Cognitive Trace</h3>
           <div className="bp-traces">
-            {recentTraces.map((trace, idx) => (
-              <div key={idx} className={`bp-trace-row ${trace.phase || ''}`}>
-                <span className="bp-trace-phase">{(trace.phase || 'info').toUpperCase()}</span>
-                <span className="bp-trace-msg">{trace.message}</span>
+            {traces.map((tr, i) => (
+              <div key={i} className={`bp-trace ${tr.phase || ''}`}>
+                <span className="bp-trace-ph t-label">{tr.phase || 'info'}</span>
+                <span className="bp-trace-msg">{tr.message}</span>
               </div>
             ))}
           </div>
         </section>
       )}
 
-      {/* ── Neural Sparks ── */}
-      {brainState.sparks?.length > 0 && (
+      {/* ── Section: Neural Sparks ── */}
+      {hasSparks && (
         <section className="bp-section">
-          <div className="bp-section-label">Neural Sparks — Background Dreaming</div>
+          <h3 className="bp-sh t-display">Neural Sparks</h3>
+          <p className="bp-spark-sub t-label">Background dreaming — spontaneous associations</p>
           <div className="bp-sparks">
-            {brainState.sparks.slice(0, 3).map((spark, idx) => (
-              <div key={idx} className="bp-spark-card">
+            {brainState.sparks.slice(0, 3).map((s, i) => (
+              <div key={i} className="bp-spark">
                 <div className="bp-spark-tags">
-                  {spark.entities?.map(e => (
-                    <span key={e} className="bp-spark-tag">#{e}</span>
-                  ))}
+                  {s.entities?.map(e => <span key={e} className="bp-spark-tag t-label">#{e}</span>)}
                 </div>
-                <p className="bp-spark-text">{spark.content}</p>
+                <p>{s.content}</p>
               </div>
             ))}
           </div>
         </section>
       )}
 
-      {/* ── Idle placeholder ── */}
-      {!isActive && recentTraces.length === 0 && !brainState.reflection && !brainState.sparks?.length && (
+      {/* ── Idle state ── */}
+      {showIdle && (
         <div className="bp-idle">
-          <div className="bp-idle-orb">
-            <div className="bp-idle-core" />
+          <div className="bp-idle-fig">
+            <div className="bp-idle-r1" />
+            <div className="bp-idle-r2" />
+            <div className="bp-idle-r3" />
+            <div className="bp-idle-dot" />
           </div>
-          <p className="bp-idle-hint">
-            Send a message to watch the<br />
-            cognitive process unfold live.
+          <p className="bp-idle-text">
+            Send a message to watch <br />
+            the cognitive process unfold live.
           </p>
-          <div className="bp-idle-legend">
-            <div className="bp-legend-row"><span className="bp-legend-dot" style={{ background: '#f59e0b' }} />Reflect — set intent</div>
-            <div className="bp-legend-row"><span className="bp-legend-dot" style={{ background: '#06b6d4' }} />Retrieve — search memory</div>
-            <div className="bp-legend-row"><span className="bp-legend-dot" style={{ background: '#10b981' }} />Synthesize — form response</div>
+          <div className="bp-idle-key">
+            {STAGES.map(s => (
+              <div key={s.id} className="bp-idle-row">
+                <span className="bp-idle-pip" style={{ background: s.color }} />
+                <span className="bp-idle-lbl t-label">{s.label} — {s.region}</span>
+              </div>
+            ))}
           </div>
         </div>
       )}

frontend/src/components/ChatPanel.css

@@ -1,224 +1,213 @@
-/* ═══ Chat Panel ═══ */
+/* ═══════════════════════════════════════════════
+   ChatPanel
+   ═══════════════════════════════════════════════ */
+
 .chat-panel {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  height: 100%;
   overflow: hidden;
-  background: transparent;
-  padding: 18px 20px;
+  padding: 0;
 }
 
-/* ── Chat Header ── */
-.chat-header-scifi {
+/* ── Header ── */
+.chat-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(167, 139, 250, 0.12);
+  padding: 16px 22px 14px;
+  border-bottom: 1px solid var(--border-0);
   flex-shrink: 0;
 }
 
-.chat-header-scifi h2 {
-  font-size: 0.62rem;
-  color: var(--accent-synapse);
-  letter-spacing: 0.22em;
-  font-weight: 600;
+.chat-header-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.82rem;
+  color: var(--text-1);
+  font-weight: 400;
+}
+
+.chat-header-session {
+  font-family: var(--font-mono);
+  font-size: 0.48rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-2);
 }
 
-/* ── Message list ── */
+/* ── Messages ── */
 .messages-container {
   flex: 1;
   overflow-y: auto;
-  padding: 6px 2px;
+  padding: 18px 22px;
   display: flex;
   flex-direction: column;
-  gap: 18px;
-  mask-image: linear-gradient(transparent 0%, black 4%, black 96%, transparent 100%);
-  -webkit-mask-image: linear-gradient(transparent 0%, black 4%, black 96%, transparent 100%);
+  gap: 20px;
+  mask-image: linear-gradient(transparent 0%, black 5%, black 94%, transparent 100%);
+  -webkit-mask-image: linear-gradient(transparent 0%, black 5%, black 94%, transparent 100%);
 }
 
 .messages-container::-webkit-scrollbar { width: 3px; }
-.messages-container::-webkit-scrollbar-thumb {
-  background: rgba(124, 58, 237, 0.35);
-  border-radius: 2px;
-}
+.messages-container::-webkit-scrollbar-thumb { background: var(--border-1); }
 
-.message-wrapper {
+/* Message wrapper */
+.msg {
   display: flex;
   flex-direction: column;
   max-width: 88%;
-  animation: msg-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
-}
-
-@keyframes msg-in {
-  from { opacity: 0; transform: translateY(10px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
+  animation: soma-flip-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-.message-wrapper.user {
-  align-self: flex-end;
-  align-items: flex-end;
-}
+.msg.user  { align-self: flex-end; align-items: flex-end; }
+.msg.soma  { align-self: flex-start; align-items: flex-start; }
 
-.message-wrapper.soma {
-  align-self: flex-start;
-}
-
-/* ── Message label ── */
-.message-wrapper .label-mono {
-  font-size: 0.5rem;
+/* Role label */
+.msg-role {
+  font-family: var(--font-mono);
+  font-size: 0.46rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-2);
   margin-bottom: 5px;
-  color: var(--text-dim);
-  letter-spacing: 0.14em;
 }
 
-/* ── Bubbles ── */
-.message-bubble {
+/* Bubbles */
+.msg-bubble {
   padding: 12px 16px;
   font-size: 0.88rem;
-  line-height: 1.7;
-  border-radius: 10px;
+  line-height: 1.72;
   word-break: break-word;
-  backdrop-filter: blur(10px);
-  color: var(--text-primary);
+  color: var(--text-0);
+  border-radius: 12px;
 }
 
-.user .message-bubble {
-  background: rgba(124, 58, 237, 0.18);
-  border: 1px solid rgba(167, 139, 250, 0.35);
+.msg.user .msg-bubble {
+  background: var(--bg-3);
+  border: 1px solid var(--border-1);
   border-bottom-right-radius: 3px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
+}
+
+[data-theme="light"] .msg.user .msg-bubble {
+  background: rgba(107,63,160,0.06);
+  border-color: rgba(107,63,160,0.18);
 }
 
-.soma .message-bubble {
-  background: rgba(14, 8, 28, 0.75);
-  border: 1px solid rgba(167, 139, 250, 0.18);
-  border-left: 2px solid rgba(192, 132, 252, 0.5);
+.msg.soma .msg-bubble {
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
+  border-left: 2px solid var(--pulse);
   border-bottom-left-radius: 3px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
 }
 
 /* ── Empty state ── */
-.empty-state {
+.chat-empty {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: 14px;
+  padding: 40px 24px;
   text-align: center;
-  padding: 40px 20px;
 }
 
-.empty-state-icon {
-  font-size: 2.2rem;
-  opacity: 0.35;
+.chat-empty-brain {
+  font-size: 2rem;
+  opacity: 0.25;
+  animation: soma-pulse 5s infinite ease-in-out;
 }
 
-.empty-state-text {
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  color: var(--text-dim);
+.chat-empty-text {
+  font-size: 0.7rem;
+  color: var(--text-2);
   line-height: 1.9;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  opacity: 0.7;
+  max-width: 220px;
 }
 
-/* ── Input area ── */
-.chat-input-area {
-  margin-top: auto;
-  padding-top: 12px;
+/* ── Input ── */
+.chat-input-wrap {
   flex-shrink: 0;
+  padding: 14px 22px 18px;
+  border-top: 1px solid var(--border-0);
 }
 
-.chat-input-form {
+.chat-form {
   display: flex;
   align-items: center;
-  background: rgba(10, 5, 22, 0.8);
-  border: 1px solid rgba(167, 139, 250, 0.2);
+  background: var(--bg-2);
+  border: 1px solid var(--border-0);
   border-radius: 12px;
-  padding: 4px;
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
-  backdrop-filter: blur(16px);
-}
-
-.chat-input-form:focus-within {
-  border-color: rgba(192, 132, 252, 0.5);
-  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.12);
+  padding: 4px 4px 4px 14px;
+  gap: 8px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.chat-input-prefix {
-  padding: 0 10px;
-  color: var(--accent-synapse);
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  flex-shrink: 0;
-  opacity: 0.8;
+.chat-form:focus-within {
+  border-color: var(--border-1);
+  box-shadow: 0 0 0 2px var(--border-0);
 }
 
 .chat-input {
   flex: 1;
   background: transparent;
   border: none;
-  color: var(--text-primary);
-  padding: 11px 10px;
-  font-family: var(--font-mono);
-  font-size: 0.82rem;
   outline: none;
+  color: var(--text-0);
+  font-family: var(--font-body);
+  font-size: 0.88rem;
+  padding: 10px 0;
   min-width: 0;
 }
 
 .chat-input::placeholder {
-  color: var(--text-dim);
-  opacity: 0.6;
+  color: var(--text-2);
+  font-style: italic;
 }
 
-/* Submit button */
-.chat-input-form button[type="submit"] {
-  background: linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(192, 132, 252, 0.4));
-  color: #f0ebff;
-  border: 1px solid rgba(192, 132, 252, 0.4);
+.chat-submit {
+  padding: 9px 18px;
   border-radius: 9px;
+  background: var(--bg-3);
+  border: 1px solid var(--border-1);
+  color: var(--text-1);
   font-family: var(--font-mono);
   font-size: 0.6rem;
   font-weight: 700;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  letter-spacing: 0.12em;
-  padding: 10px 18px;
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: all 0.2s ease;
   flex-shrink: 0;
 }
 
-.chat-input-form button[type="submit"]:hover {
-  background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(192, 132, 252, 0.6));
-  box-shadow: 0 0 16px rgba(192, 132, 252, 0.3);
-  border-color: var(--accent-synapse);
+.chat-submit:hover:not(:disabled) {
+  background: var(--pulse);
+  color: var(--bg-0);
+  border-color: var(--pulse);
+  box-shadow: var(--glow-pulse);
   transform: none;
 }
 
-.chat-input-form button[type="submit"]:disabled {
-  background: rgba(10, 5, 20, 0.6);
-  color: var(--text-dim);
-  border-color: rgba(255,255,255,0.04);
+.chat-submit:disabled {
+  opacity: 0.35;
   cursor: not-allowed;
-  box-shadow: none;
   transform: none;
+  box-shadow: none;
 }
 
-/* Status text */
-.chat-status-line {
+/* Status line */
+.chat-status {
+  margin-top: 7px;
   font-family: var(--font-mono);
-  font-size: 0.52rem;
-  color: var(--accent-synapse);
+  font-size: 0.5rem;
+  color: var(--pulse);
   letter-spacing: 0.1em;
-  text-transform: uppercase;
-  opacity: 0.7;
-  padding: 6px 4px 0;
-  min-height: 18px;
+  min-height: 16px;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.75;
 }

frontend/src/components/ChatPanel.jsx

@@ -13,10 +13,9 @@ function ChatPanel({ messages, setMessages, setBrainState, brainState, isLoading
     e.preventDefault();
     if (!inputText.trim() || isLoading) return;
 
-    const userMessage = { role: 'user', content: inputText };
-    setMessages(prev => [...prev, userMessage]);
     const query = inputText;
     setInputText('');
+    setMessages(prev => [...prev, { role: 'user', content: query }]);
 
     setBrainState(prev => ({
       ...prev,
@@ -28,107 +27,101 @@ function ChatPanel({ messages, setMessages, setBrainState, brainState, isLoading
     }));
 
     try {
-      const response = await fetch('/api/v1/query/stream', {
+      const res = await fetch('/api/v1/query/stream', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ text: query, user_id: currentPersona }),
       });
 
-      const reader = response.body.getReader();
+      const reader = res.body.getReader();
       const decoder = new TextDecoder();
-      let buffer = '';
+      let buf = '';
 
       while (true) {
         const { value, done } = await reader.read();
         if (done) break;
-
-        buffer += decoder.decode(value, { stream: true });
-        const parts = buffer.split('\n\n');
-        buffer = parts.pop();
+        buf += decoder.decode(value, { stream: true });
+        const parts = buf.split('\n\n');
+        buf = parts.pop();
 
         for (const part of parts) {
           if (!part.trim()) continue;
-          const match = part.match(/event: (.*)\ndata: (.*)/);
-          if (!match) continue;
-          const [, eventType, rawData] = match;
-          const data = JSON.parse(rawData);
+          const m = part.match(/event: (.*)\ndata: (.*)/);
+          if (!m) continue;
+          const [, evType, raw] = m;
+          const data = JSON.parse(raw);
 
-          if (eventType === 'trace') {
+          if (evType === 'trace') {
             setBrainState(prev => ({
               ...prev,
               statusMessage: data.message,
               traces: [...prev.traces, data],
               highlightedNodes: data.touched || prev.highlightedNodes,
             }));
-          } else if (eventType === 'reflection') {
+          } else if (evType === 'reflection') {
             setBrainState(prev => ({ ...prev, reflection: data.message }));
-          } else if (eventType === 'final_result') {
+          } else if (evType === 'final_result') {
             setMessages(prev => [...prev, { role: 'soma', content: data.response }]);
-          } else if (eventType === 'error') {
+          } else if (evType === 'error') {
             throw new Error(data.detail);
           }
         }
       }
 
       setBrainState(prev => ({ ...prev, isLoading: false, statusMessage: 'Cognitive cycle complete.' }));
-    } catch (error) {
-      console.error('Stream error:', error);
-      setMessages(prev => [...prev, { role: 'soma', content: `Neural Error: ${error.message}` }]);
+    } catch (err) {
+      setMessages(prev => [...prev, { role: 'soma', content: `Neural Error: ${err.message}` }]);
       setBrainState(prev => ({ ...prev, isLoading: false, statusMessage: 'Process interrupted.' }));
     }
   };
 
   return (
     <div className="chat-panel">
-      <div className="chat-header-scifi">
-        <h2>Neural Feedback Interface</h2>
-        <span className="label-mono" style={{ fontSize: '0.52rem', color: 'var(--text-dim)' }}>
-          {currentPersona}
-        </span>
+
+      <div className="chat-header">
+        <span className="chat-header-title">Neural Feedback</span>
+        <span className="chat-header-session">{currentPersona}</span>
       </div>
 
       <div className="messages-container">
         {messages.length === 0 ? (
-          <div className="empty-state">
-            <div className="empty-state-icon">🧠</div>
-            <div className="empty-state-text">
-              Awaiting neural input.<br />
-              Ask anything — watch the brain think.
-            </div>
+          <div className="chat-empty">
+            <div className="chat-empty-brain">🧠</div>
+            <p className="chat-empty-text">
+              Send a message — watch Soma reflect, retrieve memory, and synthesize a response in real-time.
+            </p>
           </div>
         ) : (
-          messages.map((msg, idx) => (
-            <div key={idx} className={`message-wrapper ${msg.role}`}>
-              <div className="label-mono" style={{ fontSize: '0.5rem', marginBottom: '5px' }}>
+          messages.map((msg, i) => (
+            <div key={i} className={`msg ${msg.role}`}>
+              <div className="msg-role">
                 {msg.role === 'user' ? currentPersona : 'SOMA'}
               </div>
-              <div className="message-bubble">{msg.content}</div>
+              <div className="msg-bubble">{msg.content}</div>
             </div>
           ))
         )}
         <div ref={endRef} />
       </div>
 
-      <div className="chat-input-area">
-        <form className="chat-input-form" onSubmit={handleSend}>
-          <span className="chat-input-prefix">⚡</span>
+      <div className="chat-input-wrap">
+        <form className="chat-form" onSubmit={handleSend}>
           <input
-            type="text"
             className="chat-input"
+            type="text"
             value={inputText}
             onChange={e => setInputText(e.target.value)}
-            placeholder="Ask something..."
+            placeholder="Ask anything…"
             disabled={isLoading}
             autoFocus
           />
-          <button type="submit" disabled={isLoading || !inputText.trim()}>
-            {isLoading ? '...' : 'Send'}
+          <button className="chat-submit" type="submit" disabled={isLoading || !inputText.trim()}>
+            {isLoading ? '…' : 'Send'}
           </button>
         </form>
-        <div className="chat-status-line">
-          {brainState.statusMessage}
-        </div>
+        <div className="chat-status">{brainState.statusMessage}</div>
       </div>
+
     </div>
   );
 }

frontend/src/components/EEGWave.css

@@ -0,0 +1,53 @@
+.eeg-container {
+  width: 120px;
+  height: 36px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.eeg-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Glow layer — blurred duplicate */
+.eeg-glow {
+  fill: none;
+  stroke: var(--pulse);
+  stroke-width: 3;
+  filter: blur(3px);
+  opacity: 0.35;
+}
+
+/* Sharp trace */
+.eeg-trace {
+  fill: none;
+  stroke: var(--pulse);
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Leading dot */
+.eeg-lead {
+  fill: var(--fire);
+  filter: drop-shadow(0 0 4px var(--fire));
+  opacity: 0.9;
+}
+
+/* Active: brighter and faster implied by animation dur already */
+.eeg-container.active .eeg-trace {
+  stroke: var(--fire);
+}
+
+.eeg-container.active .eeg-glow {
+  stroke: var(--fire);
+  opacity: 0.4;
+}
+
+[data-theme="light"] .eeg-glow,
+[data-theme="light"] .eeg-trace {
+  opacity: 0.7;
+}

frontend/src/components/EEGWave.jsx

@@ -0,0 +1,45 @@
+import './EEGWave.css';
+
+// Each wave pattern is a realistic EEG signal shape for that brain state
+const WAVES = {
+  idle:      'M0,20 L12,20 L14,19 L16,10 L18,30 L20,12 L22,20 L120,20',
+  thinking:  'M0,20 L6,20 L7,19 L8,8  L9,32  L10,6 L11,34 L12,10 L13,20 L18,20 L19,18 L20,9 L21,31 L22,8 L23,32 L24,20 L120,20',
+  sleeping:  'M0,20 L20,20 L40,18 L60,22 L80,16 L100,24 L120,20',
+  default:   'M0,20 L12,20 L14,18 L16,12 L18,28 L20,14 L22,20 L120,20',
+};
+
+function getWaveKey(state) {
+  if (!state) return 'default';
+  const s = state.toLowerCase();
+  if (s.includes('sleep')) return 'sleeping';
+  if (s === 'idle') return 'idle';
+  return 'thinking';
+}
+
+export default function EEGWave({ cognitiveState, isActive }) {
+  const key = isActive ? 'thinking' : getWaveKey(cognitiveState);
+
+  return (
+    <div className={`eeg-container ${isActive ? 'active' : 'calm'}`} aria-hidden>
+      <svg
+        className={`eeg-svg wave-${key}`}
+        viewBox="0 0 120 40"
+        preserveAspectRatio="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {/* Glow copy */}
+        <path d={WAVES[key]} className="eeg-glow" />
+        {/* Sharp trace */}
+        <path d={WAVES[key]} className="eeg-trace" />
+        {/* Animated leading dot */}
+        <circle className="eeg-lead" r="2" cy="20">
+          <animateMotion
+            dur={isActive ? '1.2s' : '2.5s'}
+            repeatCount="indefinite"
+            path={WAVES[key]}
+          />
+        </circle>
+      </svg>
+    </div>
+  );
+}

frontend/src/components/KnowledgeGraph.jsx

@@ -121,20 +121,22 @@ function KnowledgeGraph({ highlightedNodes = [], currentPersona }) {
 
   const getNodeColor = node => {
     if (highlightedNodes.includes(node.id) || highlightedNodes.includes(node.label)) {
-      return 'rgba(240, 171, 252, 1)';
+      return 'rgba(224, 122, 56, 1)';   // fire — active node
     }
     if (node.isDemo) {
-      // Gradient from violet → cyan for demo anatomy nodes
       const hash = node.id.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
-      const hue = (hash * 37) % 60; // 0–60 → violet to indigo range
-      return `hsla(${260 + hue}, 80%, 72%, 0.9)`;
+      const hue = (hash * 41) % 80;
+      // Demo nodes span amber → teal (warm, not purple)
+      return hue < 40
+        ? `hsla(${38 + hue * 0.4}, 75%, 60%, 0.9)`   // amber range
+        : `hsla(${175 + hue * 0.3}, 60%, 55%, 0.9)`;  // teal range
     }
-    return 'rgba(192, 132, 252, 0.9)';
+    return 'rgba(212, 168, 83, 0.85)';  // amber
   };
 
   const getLinkColor = () => isDemo
-    ? 'rgba(130, 100, 220, 0.25)'
-    : 'rgba(167, 139, 250, 0.2)';
+    ? 'rgba(212, 168, 83, 0.18)'
+    : 'rgba(212, 168, 83, 0.22)';
 
   return (
     <div className="graph-container" ref={containerRef}>
@@ -187,8 +189,8 @@ function KnowledgeGraph({ highlightedNodes = [], currentPersona }) {
             linkDirectionalParticleSpeed={0.006}
             linkDirectionalParticleWidth={isDemo ? 1.5 : 2}
             linkDirectionalParticleColor={() => isDemo
-              ? 'rgba(167, 139, 250, 0.7)'
-              : 'rgba(240, 171, 252, 0.85)'}
+              ? 'rgba(212, 168, 83, 0.8)'
+              : 'rgba(224, 122, 56, 0.9)'}
 
             linkColor={getLinkColor}
             linkOpacity={isDemo ? 0.45 : 0.5}

frontend/src/index.css

@@ -1,274 +1,201 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');
 
-:root {
-  /* ── Brain-Organic Palette (brightened) ── */
-  --bg-base:   #07030e;
-  --bg-panel:  rgba(14, 8, 26, 0.82);
-
-  --accent-synapse:  #c084fc;   /* Soft violet */
-  --accent-dendrite: #a78bfa;   /* Lighter violet */
-  --accent-axon:     #7c3aed;   /* Deep violet */
-  --accent-impulse:  #f0abfc;   /* Warm pink */
-  --accent-cortex:   #818cf8;   /* Indigo */
-  --accent-error:    #fb7185;
-
-  --accent-primary:   var(--accent-synapse);
-  --accent-secondary: var(--accent-impulse);
-  --accent-glow:      rgba(192, 132, 252, 0.3);
-  --accent-glow-pink: rgba(240, 171, 252, 0.3);
-
-  /* Brighter text */
-  --text-primary:   #f0ebff;
-  --text-secondary: #cfc0f8;
-  --text-dim:       #9d8fcc;
-
-  --border-subtle:  rgba(167, 139, 250, 0.14);
-  --border-active:  rgba(192, 132, 252, 0.4);
-
-  --panel-shadow:   0 8px 32px rgba(0, 0, 0, 0.55);
-
-  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;
-}
+/* ═══════════════════════════════════════════════════════════════
+   SOMA — Theme System
+   Dark: Calcium imaging / two-photon microscopy aesthetic
+   Light: Histology lab / brain slice slide aesthetic
+   ═══════════════════════════════════════════════════════════════ */
 
-* {
+:root {
+  /* ── Dark theme (default) ── */
+  --bg-0:    #070504;
+  --bg-1:    #0d0a07;
+  --bg-2:    #161210;
+  --bg-3:    #1f1a16;
+
+  --fire:    #e07a38;   /* Neuron firing — burnt orange */
+  --pulse:   #d4a853;   /* Calcium indicator — amber */
+  --calm:    #4ecdc4;   /* Inhibitory signal — teal */
+  --synapse: #a87ecf;   /* Synaptic vesicle — muted violet (used sparingly) */
+  --error:   #e05555;
+
+  --text-0:  #f2ece3;
+  --text-1:  #b8a990;
+  --text-2:  #6b5e4a;
+
+  --border-0: rgba(212, 168, 83, 0.07);
+  --border-1: rgba(212, 168, 83, 0.16);
+  --border-2: rgba(224, 122, 56, 0.35);
+
+  --glow-pulse: 0 0 20px rgba(212, 168, 83, 0.22);
+  --glow-fire:  0 0 20px rgba(224, 122, 56, 0.28);
+  --glow-calm:  0 0 14px rgba(78, 205, 196, 0.2);
+
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
+}
+
+[data-theme="light"] {
+  --bg-0:    #f5f0e8;   /* Histology glass slide */
+  --bg-1:    #ede7db;
+  --bg-2:    #e6dfd4;
+  --bg-3:    #ffffff;
+
+  --fire:    #c4424e;   /* Nissl stain — red */
+  --pulse:   #6b3fa0;   /* Brain tissue — deep violet */
+  --calm:    #2d7d9a;   /* CSF — steel blue */
+  --synapse: #6b3fa0;
+  --error:   #c4424e;
+
+  --text-0:  #1c1209;
+  --text-1:  #4a3d30;
+  --text-2:  #8a7565;
+
+  --border-0: rgba(107, 63, 160, 0.07);
+  --border-1: rgba(107, 63, 160, 0.18);
+  --border-2: rgba(196, 66, 78, 0.32);
+
+  --glow-pulse: 0 0 16px rgba(107, 63, 160, 0.14);
+  --glow-fire:  0 0 14px rgba(196, 66, 78, 0.18);
+  --glow-calm:  0 0 12px rgba(45, 125, 154, 0.14);
+}
+
+/* ── Reset ── */
+*, *::before, *::after {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
 }
 
 body {
-  font-family: var(--font-main);
-  background-color: var(--bg-base);
-  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 15px;
+  background: var(--bg-0);
+  color: var(--text-0);
   height: 100vh;
   overflow: hidden;
-  background-image:
-    radial-gradient(ellipse at 15% 50%, rgba(124, 58, 237, 0.1), transparent 50%),
-    radial-gradient(ellipse at 85% 25%, rgba(192, 132, 252, 0.07), transparent 40%),
-    radial-gradient(ellipse at 50% 95%, rgba(240, 171, 252, 0.05), transparent 40%);
+  transition: background 0.45s ease, color 0.45s ease;
+  -webkit-font-smoothing: antialiased;
+}
+
+[data-theme="light"] body,
+[data-theme="light"] {
+  background: var(--bg-0);
+  color: var(--text-0);
 }
 
 #root { height: 100%; }
 
-/* ── Glassmorphism ── */
-.glass-panel {
-  background: var(--bg-panel);
-  border: 1px solid var(--border-subtle);
-  backdrop-filter: blur(16px);
-  box-shadow: var(--panel-shadow);
-  border-radius: 12px;
-  position: relative;
-  overflow: hidden;
+/* ── Typography helpers ── */
+.t-display {
+  font-family: var(--font-display);
+  font-style: italic;
 }
 
-.glass-panel::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.2), transparent);
+.t-mono {
+  font-family: var(--font-mono);
 }
 
-h1, h2, h3 {
+.t-label {
+  font-family: var(--font-mono);
+  font-size: 0.58rem;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  letter-spacing: 0.15em;
-  font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-2);
 }
 
-.label-mono {
-  font-family: var(--font-mono);
-  font-size: 0.68rem;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  letter-spacing: 0.1em;
+.t-section {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.82rem;
+  color: var(--text-1);
+  letter-spacing: 0.02em;
 }
 
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 3px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.35); border-radius: 2px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(192, 132, 252, 0.55); }
+::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: var(--pulse); opacity: 0.5; }
 
-/* ── Base Button ── */
+/* ── Base button ── */
 button {
-  background: rgba(124, 58, 237, 0.15);
-  color: var(--text-primary);
-  border: 1px solid var(--border-active);
-  border-radius: 8px;
-  padding: 8px 16px;
-  font-family: var(--font-main);
-  font-weight: 500;
+  font-family: var(--font-body);
+  background: transparent;
+  color: var(--text-1);
+  border: 1px solid var(--border-1);
+  border-radius: 7px;
+  padding: 7px 14px;
+  font-size: 0.82rem;
   cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: background 0.2s ease, color 0.2s ease,
+              border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 button:hover {
-  background: rgba(192, 132, 252, 0.22);
-  box-shadow: 0 0 16px var(--accent-glow);
-  border-color: var(--accent-primary);
-  transform: translateY(-1px);
+  background: var(--border-0);
+  color: var(--text-0);
+  border-color: var(--border-2);
 }
 
-button:active { transform: translateY(1px); }
+button:active { opacity: 0.8; }
 
 button:disabled {
-  background: rgba(10, 5, 20, 0.7);
-  color: var(--text-dim);
-  border-color: var(--border-subtle);
+  opacity: 0.35;
   cursor: not-allowed;
-  transform: none;
   box-shadow: none;
 }
 
-/* ── Brain Vitals HUD ── */
-.vitals-hud {
-  background: rgba(14, 8, 26, 0.6);
+/* ── Glass panel ── */
+.glass {
+  background: var(--bg-1);
+  border: 1px solid var(--border-0);
   border-radius: 12px;
-  padding: 16px;
-  border-left: 3px solid var(--accent-impulse);
-  box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
-  position: relative;
-  overflow: hidden;
-}
-
-.vitals-hud::after {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(192, 132, 252, 0.015) 0px,
-    transparent 1px,
-    transparent 3px
-  );
-  pointer-events: none;
-}
-
-.vitals-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  margin-top: 12px;
-}
-
-.vital-item { display: flex; flex-direction: column; }
-
-.vital-label {
-  font-family: var(--font-mono);
-  font-size: 0.55rem;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
-}
-
-.vital-value {
-  font-family: var(--font-mono);
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--accent-primary);
-  text-shadow: 0 0 10px var(--accent-glow);
-}
-
-.vital-value.purple {
-  color: var(--accent-impulse);
-  text-shadow: 0 0 10px var(--accent-glow-pink);
-}
-
-.vital-value.warning {
-  color: var(--accent-error);
-  animation: text-pulse 1s infinite alternate;
-}
-
-.warning-text { color: var(--accent-error); opacity: 0.9; }
-
-.internal-monologue {
-  background: rgba(124, 58, 237, 0.1);
-  border-left: 2px solid var(--accent-dendrite);
-  padding: 14px;
-  margin: 15px 0 20px 0;
-  font-size: 0.77rem;
-  line-height: 1.65;
-  color: var(--text-primary);
-  font-style: italic;
-  border-radius: 6px;
-  animation: monologue-fade 0.8s ease;
-}
-
-@keyframes monologue-fade {
-  from { opacity: 0; filter: blur(4px); transform: translateX(-8px); }
-  to   { opacity: 1; filter: blur(0);   transform: translateX(0); }
-}
-
-.sparks-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 220px;
-  overflow-y: auto;
-  padding-right: 8px;
+  backdrop-filter: blur(12px);
 }
 
-.spark-item {
-  background: rgba(192, 132, 252, 0.06);
-  border: 1px solid rgba(192, 132, 252, 0.15);
-  border-radius: 6px;
-  padding: 10px;
-  font-size: 0.65rem;
-  animation: spark-in 0.4s ease;
-  border-left: 2px solid var(--accent-dendrite);
+/* ── Theme-aware transitions ── */
+.app-container,
+.app-container * {
+  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
 }
 
-.spark-time {
-  opacity: 0.55;
-  margin-right: 8px;
-  font-family: var(--font-mono);
-  font-size: 0.52rem;
-}
-
-.spark-content { margin: 6px 0; color: var(--text-primary); line-height: 1.45; }
-
-.spark-tag {
-  display: inline-block;
-  background: rgba(240, 171, 252, 0.12);
-  color: var(--accent-impulse);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 0.52rem;
-  margin-right: 6px;
-  text-transform: uppercase;
-  font-family: var(--font-mono);
+/* ── 3D perspective base ── */
+.scene-3d {
+  perspective: 1000px;
+  perspective-origin: 50% 50%;
 }
 
-@keyframes spark-in {
-  from { opacity: 0; transform: scale(0.96); }
-  to   { opacity: 1; transform: scale(1); }
+/* ── Organic noise texture ── */
+.noisy::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.025;
+  pointer-events: none;
+  mix-blend-mode: overlay;
 }
 
-/* ── Neural Pulse Animations ── */
-.pulse-active { animation: box-glow 2.5s infinite alternate ease-in-out; }
-
-@keyframes box-glow {
-  0%   { border-color: var(--border-subtle); box-shadow: 0 0 5px rgba(192, 132, 252, 0.05); }
-  100% { border-color: var(--accent-primary); box-shadow: 0 0 22px var(--accent-glow); }
+/* ── Shared animations ── */
+@keyframes soma-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.6; transform: scale(0.92); }
 }
 
-@keyframes text-pulse {
-  from { opacity: 0.5; text-shadow: none; }
-  to   { opacity: 1;   text-shadow: 0 0 10px var(--accent-error); }
+@keyframes soma-glow-on {
+  from { box-shadow: none; }
+  to   { box-shadow: var(--glow-pulse); }
 }
 
-.neural-scan-line {
-  position: absolute;
-  top: 0; left: 0; width: 100%; height: 1.5px;
-  background: linear-gradient(90deg, transparent, var(--accent-synapse), transparent);
-  animation: scan-move 2.5s linear infinite;
-  z-index: 10;
-  opacity: 0.6;
+@keyframes soma-rise {
+  from { opacity: 0; transform: translateY(10px) translateZ(-20px); }
+  to   { opacity: 1; transform: translateY(0)   translateZ(0); }
 }
 
-@keyframes scan-move {
-  from { top: -5%; }
-  to   { top: 105%; }
+@keyframes soma-flip-in {
+  from { opacity: 0; transform: perspective(600px) rotateY(-18deg) translateZ(-30px); }
+  to   { opacity: 1; transform: perspective(600px) rotateY(0deg)   translateZ(0); }
 }