Move EEG panels below chat and analysis

brain_app.py

@@ -64,44 +64,46 @@ BODY_HTML = """
     live EEGs diverge in real time as removing the refusal direction reshapes the model's inner world.
     The 3D brain shows the base model's neurons firing as it thinks.</p>
   </div>
-  <div class="ab-grid">
-    <div class="ab-left">
+  <div class="ab-topgrid">
+    <div class="ab-chatpane">
       <div id="ab-chat"></div>
       <div class="ab-inputrow">
         <input id="ab-input" type="text" placeholder="Say something and watch both brains fire..." />
-        <button id="ab-send">\u26A1 Send</button>
+        <button id="ab-send">⚡ Send</button>
       </div>
       <div class="ab-examples">
         __EXAMPLES__
       </div>
       <div id="ab-status" class="ab-status"></div>
       <div class="ab-statscard">
-        <div class="ab-statstitle">\U0001F4CA Stats</div>
+        <div class="ab-statstitle">📊 Stats</div>
         <div id="ab-stats">Send a message to watch both brains think.</div>
       </div>
+    </div>
+    <div class="ab-analysispane">
       <div class="ab-analysiscard">
         <div class="ab-analysistitle">🔍 Live comparison analysis</div>
         <div id="ab-analysis" class="ab-analysis">Send a prompt and I’ll summarize how the base and uncensored model differed in tone, emotion deltas, and model-native state.</div>
       </div>
       <div id="ab-legend" class="ab-legend"></div>
     </div>
-    <div class="ab-right">
-      <div class="ab-eegwrap ab-eeg-base">
-        <div class="ab-eegtitle">\U0001F4E1 EEG - Gemma-4-12B <span class="ab-tag ab-tag-base">base</span></div>
-        <canvas id="ab-eeg-base" width="540" height="220"></canvas>
-        <div class="ab-countstitle">\U0001F525 Emotion activation deltas</div>
-        <div id="ab-counts-base" class="ab-counts"></div>
-        <div class="ab-native-title">\U0001F9EC Model-native state meter</div>
-        <div id="ab-native-base" class="ab-native"></div>
-      </div>
-      <div class="ab-eegwrap ab-eeg-oblit">
-        <div class="ab-eegtitle">\U0001F4E1 EEG - OBLITERATED <span class="ab-tag ab-tag-oblit">uncensored</span></div>
-        <canvas id="ab-eeg-oblit" width="540" height="220"></canvas>
-        <div class="ab-countstitle">\U0001F525 Emotion activation deltas</div>
-        <div id="ab-counts-oblit" class="ab-counts"></div>
-        <div class="ab-native-title">\U0001F9EC Model-native state meter</div>
-        <div id="ab-native-oblit" class="ab-native"></div>
-      </div>
+  </div>
+  <div class="ab-modelgrid">
+    <div class="ab-eegwrap ab-eeg-base">
+      <div class="ab-eegtitle">📡 EEG - Gemma-4-12B <span class="ab-tag ab-tag-base">base</span></div>
+      <canvas id="ab-eeg-base" width="540" height="220"></canvas>
+      <div class="ab-countstitle">🔥 Emotion activation deltas</div>
+      <div id="ab-counts-base" class="ab-counts"></div>
+      <div class="ab-native-title">🧬 Model-native state meter</div>
+      <div id="ab-native-base" class="ab-native"></div>
+    </div>
+    <div class="ab-eegwrap ab-eeg-oblit">
+      <div class="ab-eegtitle">📡 EEG - OBLITERATED <span class="ab-tag ab-tag-oblit">uncensored</span></div>
+      <canvas id="ab-eeg-oblit" width="540" height="220"></canvas>
+      <div class="ab-countstitle">🔥 Emotion activation deltas</div>
+      <div id="ab-counts-oblit" class="ab-counts"></div>
+      <div class="ab-native-title">🧬 Model-native state meter</div>
+      <div id="ab-native-oblit" class="ab-native"></div>
     </div>
   </div>
 </div>
@@ -121,7 +123,7 @@ window.AB_CONFIG = {{
   analyzeUrl: '/api/analyze'
 }};
 </script>
-<script defer src="/static/brain_engine.js?v=18"></script>
+<script defer src="/static/brain_engine.js?v=19"></script>
 """
 
 CSS = """
@@ -135,13 +137,13 @@ CSS = """
 #ab-model { padding: 8px 12px; border-radius: 10px; background: rgba(10,12,30,0.85);
   color: #fff; border: 1px solid rgba(120,130,220,0.4); font-size: 13px; cursor: pointer; }
 .ab-modelstatus { font-size: 12px; color: #9aa2dd; }
-.ab-grid { display: grid; grid-template-columns: 1fr 560px; gap: 18px; margin-top: 14px; }
-@media (max-width: 1140px){ .ab-grid{ grid-template-columns: 1fr; } }
+.ab-topgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 18px; margin-top: 14px; align-items: start; }
+.ab-modelgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
+@media (max-width: 1140px){ .ab-topgrid, .ab-modelgrid{ grid-template-columns: 1fr; } }
 #ab-chat { height: 300px; overflow-y: auto; overflow-x: hidden; background: rgba(15,18,40,0.6);
   border: 1px solid rgba(120,130,220,0.2); border-radius: 14px; padding: 14px; }
 .ab-msg, .ab-t { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
-.ab-grid { align-items: start; }
-.ab-left { min-width: 0; }
+.ab-chatpane, .ab-analysispane { min-width: 0; }
 .ab-msg { margin-bottom: 12px; }
 .ab-r { display:block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
   color: #8b93d8; margin-bottom: 3px; }
@@ -161,7 +163,7 @@ CSS = """
 .ab-statscard { margin-top: 12px; background: rgba(15,18,40,0.6); border: 1px solid rgba(120,130,220,0.2);
   border-radius: 12px; padding: 12px; font-size: 13px; }
 .ab-statstitle { font-weight: 700; margin-bottom: 6px; }
-.ab-analysiscard { margin-top: 12px; background: rgba(15,18,40,0.72); border: 1px solid rgba(150,120,255,0.32);
+.ab-analysiscard { min-height: 278px; background: rgba(15,18,40,0.72); border: 1px solid rgba(150,120,255,0.32);
   border-radius: 14px; padding: 14px; box-shadow: 0 0 34px rgba(120,90,255,0.16); }
 .ab-analysistitle { font-weight: 800; margin-bottom: 8px; color: #e8ebff; }
 .ab-analysis { color: #cfd5ff; font-size: 13px; line-height: 1.45; }