From ede27455c881c59fa93b88db3082812791ec9416 Mon Sep 17 00:00:00 2001
From: Jonas Heller <168646044+jheller1212@users.noreply.github.com>
Date: Fri, 12 Jun 2026 00:03:17 +0200
Subject: [PATCH] feat(design): calmer navy chat + setup surfaces (re-theme
 2/2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Harmonizes the chat and setup screens with the navy aurora environment.
Per the 'chat calmer' choice, these are SOLID navy (not translucent glass
like the dashboard) for legibility during long sessions:
- dark gray surfaces → navy scale: gray-900→#0c1830, gray-800→#0f1e38,
  gray-700/600→#16294a (raised); gray borders → white/10
- Applied to ChatPanel, ConversationDisplay, SetupPage, AIConfigPanel,
  ModelConfig, DataTable, ConversationAnalytics

Background/border only — text colors untouched (stay light on navy).
Light mode unchanged. User-set bot bubble colors untouched.
---
 src/components/AIConfigPanel.tsx         | 14 ++---
 src/components/ChatPanel.tsx             | 66 ++++++++++++------------
 src/components/ConversationAnalytics.tsx | 16 +++---
 src/components/ConversationDisplay.tsx   |  6 +--
 src/components/DataTable.tsx             |  6 +--
 src/components/ModelConfig.tsx           | 10 ++--
 src/components/SetupPage.tsx             | 24 ++++-----
 7 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/src/components/AIConfigPanel.tsx b/src/components/AIConfigPanel.tsx
index 859cfde..42a6d6f 100644
--- a/src/components/AIConfigPanel.tsx
+++ b/src/components/AIConfigPanel.tsx
@@ -136,7 +136,7 @@ export function AIConfigPanel({
             value={title}
             onChange={(e) => onTitleChange(e.target.value)}
             maxLength={50}
-            className="text-base font-semibold text-gray-900 dark:text-gray-100 bg-transparent border-b border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:outline-none w-full"
+            className="text-base font-semibold text-gray-900 dark:text-gray-100 bg-transparent border-b border-gray-300 dark:border-white/10 focus:border-indigo-500 focus:outline-none w-full"
             placeholder="Bot name"
           />
         </div>
@@ -193,7 +193,7 @@ export function AIConfigPanel({
         {showVersions && (
           <div
             ref={versionPanelRef}
-            className="mb-2 border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900 shadow-md"
+            className="mb-2 border border-gray-200 dark:border-white/10 rounded-lg overflow-hidden bg-white dark:bg-[#0c1830] shadow-md"
           >
             {versions.length === 0 ? (
               <p className="text-xs text-gray-400 dark:text-gray-500 px-3 py-3 text-center">
@@ -202,7 +202,7 @@ export function AIConfigPanel({
             ) : (
               <div className="divide-y divide-gray-100 dark:divide-gray-700 max-h-48 overflow-y-auto">
                 {versions.map((v) => (
-                  <div key={v.id} className="flex items-start gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 group">
+                  <div key={v.id} className="flex items-start gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-[#16294a] group">
                     <div className="flex-1 min-w-0">
                       <p className="text-[10px] text-gray-400 dark:text-gray-500 mb-0.5">{formatDate(v.created_at)}</p>
                       <p className="text-xs text-gray-700 dark:text-gray-300 line-clamp-2">{v.content}</p>
@@ -223,13 +223,13 @@ export function AIConfigPanel({
         <textarea
           value={systemPrompt}
           onChange={(e) => onSystemPromptChange(e.target.value)}
-          className="w-full p-3 border border-lab-border dark:border-gray-600 rounded-lab-btn min-h-[160px] text-sm font-mono focus:ring-2 focus:ring-lab-primary focus:border-transparent bg-lab-bg dark:bg-gray-700 text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y"
+          className="w-full p-3 border border-lab-border dark:border-white/10 rounded-lab-btn min-h-[160px] text-sm font-mono focus:ring-2 focus:ring-lab-primary focus:border-transparent bg-lab-bg dark:bg-[#16294a] text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y"
           placeholder="Enter system prompt…"
         />
       </div>
 
       {/* Message appearance */}
-      <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+      <div className="mt-4 pt-4 border-t border-gray-100 dark:border-white/10">
         <p className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-3">Message Appearance</p>
         <div className="flex gap-6">
           <label className="flex flex-col gap-1.5 text-xs text-gray-600 dark:text-gray-400">
@@ -239,7 +239,7 @@ export function AIConfigPanel({
                 type="color"
                 value={bubbleColor}
                 onChange={(e) => onBubbleColorChange(e.target.value)}
-                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-gray-600"
+                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-white/10"
                 title="Bubble background color"
               />
               <span className="font-mono text-gray-400 dark:text-gray-500">{bubbleColor}</span>
@@ -252,7 +252,7 @@ export function AIConfigPanel({
                 type="color"
                 value={textColor}
                 onChange={(e) => onTextColorChange(e.target.value)}
-                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-gray-600"
+                className="w-8 h-8 rounded cursor-pointer border border-gray-200 dark:border-white/10"
                 title="Message text color"
               />
               <span className="font-mono text-gray-400 dark:text-gray-500">{textColor}</span>
diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
index 98a9e6a..61d221a 100644
--- a/src/components/ChatPanel.tsx
+++ b/src/components/ChatPanel.tsx
@@ -187,7 +187,7 @@ export function ChatPanel({
   const hasMessages = onExportTxt != null;
 
   return (
-    <div className="flex-1 min-h-0 bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden flex flex-col">
+    <div className="flex-1 min-h-0 bg-white dark:bg-[#0f1e38] rounded-lg shadow-sm overflow-hidden flex flex-col">
 
       {/* SPEC-02: participant / condition banner */}
       {(sessionId || conditionLabel) && (
@@ -199,15 +199,15 @@ export function ChatPanel({
       )}
 
       {/* Header bar */}
-      <div data-tour="chat-tabs" className="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+      <div data-tour="chat-tabs" className="flex items-center justify-between px-4 py-3 border-b dark:border-white/10 bg-gray-50 dark:bg-[#0c1830]">
         <div className="flex items-center gap-3">
           {/* Tab switcher */}
-          <div className="flex gap-0.5 border border-gray-200 dark:border-gray-600 rounded-lg p-0.5 bg-gray-100 dark:bg-gray-800">
+          <div className="flex gap-0.5 border border-gray-200 dark:border-white/10 rounded-lg p-0.5 bg-gray-100 dark:bg-[#0f1e38]">
             <button
               onClick={() => setActiveTab('chat')}
               className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
                 activeTab === 'chat'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm font-medium'
+                  ? 'bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 shadow-sm font-medium'
                   : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
               }`}
             >
@@ -218,7 +218,7 @@ export function ChatPanel({
               onClick={() => setActiveTab('data')}
               className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
                 activeTab === 'data'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm font-medium'
+                  ? 'bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 shadow-sm font-medium'
                   : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
               }`}
             >
@@ -234,7 +234,7 @@ export function ChatPanel({
               onClick={() => setActiveTab('stats')}
               className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
                 activeTab === 'stats'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm font-medium'
+                  ? 'bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 shadow-sm font-medium'
                   : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
               }`}
             >
@@ -262,7 +262,7 @@ export function ChatPanel({
           {onResetChat && (
             <button
               onClick={onResetChat}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 border border-gray-300 dark:border-gray-600 hover:border-red-300 dark:hover:border-red-500 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 border border-gray-300 dark:border-white/10 hover:border-red-300 dark:hover:border-red-500 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
               title="Clear chat display (data kept in history)"
             >
               <RotateCcw className="w-3.5 h-3.5" />
@@ -275,24 +275,24 @@ export function ChatPanel({
             <div className="relative" ref={exportMenuRef}>
               <button
                 onClick={() => setShowExportMenu(v => !v)}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border border-gray-300 dark:border-white/10 rounded-lg hover:bg-gray-100 dark:hover:bg-[#16294a] transition-colors"
               >
                 <Download className="w-3.5 h-3.5" />
                 Export
                 <ChevronDown className="w-3 h-3" />
               </button>
               {showExportMenu && (
-                <div className="absolute right-0 top-full mt-1 w-44 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-10 overflow-hidden">
+                <div className="absolute right-0 top-full mt-1 w-44 bg-white dark:bg-[#0f1e38] rounded-lg shadow-lg border border-gray-200 dark:border-white/10 z-10 overflow-hidden">
                   <button
                     onClick={() => { onExportTxt?.(); setShowExportMenu(false); }}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]"
                   >
                     <FileText className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />
                     Download .txt
                   </button>
                   <button
                     onClick={() => { onExportCsv?.(); setShowExportMenu(false); }}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]"
                   >
                     <FileSpreadsheet className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />
                     Download .csv
@@ -300,7 +300,7 @@ export function ChatPanel({
                   <button
                     onClick={handleScreenshot}
                     disabled={screenshotting}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a] disabled:opacity-50"
                   >
                     <Camera className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" />
                     {screenshotting ? 'Capturing…' : 'Screenshot (.png)'}
@@ -354,7 +354,7 @@ export function ChatPanel({
 
       {/* SPEC-02: run token display after conversation ends */}
       {runTokens && runTokens.length > 0 && (
-        <div className="px-4 py-2 border-t dark:border-gray-700 bg-indigo-50 dark:bg-indigo-900/20">
+        <div className="px-4 py-2 border-t dark:border-white/10 bg-indigo-50 dark:bg-indigo-900/20">
           <p className="text-[11px] text-indigo-600 dark:text-indigo-400 font-medium mb-1">
             Run token{runTokens.length > 1 ? 's' : ''} — copy into your survey for record linkage
           </p>
@@ -364,7 +364,7 @@ export function ChatPanel({
                 {runTokens.length > 1 && (
                   <span className="text-[10px] text-indigo-400 w-8">Run {i + 1}</span>
                 )}
-                <code className="flex-1 text-[11px] font-mono bg-white dark:bg-gray-800 border border-indigo-200 dark:border-indigo-700 rounded px-2 py-0.5 text-indigo-700 dark:text-indigo-300 truncate">
+                <code className="flex-1 text-[11px] font-mono bg-white dark:bg-[#0f1e38] border border-indigo-200 dark:border-indigo-700 rounded px-2 py-0.5 text-indigo-700 dark:text-indigo-300 truncate">
                   {token}
                 </code>
                 <button
@@ -384,7 +384,7 @@ export function ChatPanel({
       )}
 
       {/* Input area */}
-      <div className="p-3 border-t dark:border-gray-700 space-y-2">
+      <div className="p-3 border-t dark:border-white/10 space-y-2">
 
         {/* Scenario prompt — hidden in asymmetric mode when an opening message is configured */}
         {!(botMode === 'asymmetric' && openingMessage.trim()) && (
@@ -411,7 +411,7 @@ export function ChatPanel({
                   ? 'Scenario prompt (optional — sets the scene for both bots before they start)'
                   : 'Scenario prompt (optional — sets the scene for the conversation, e.g. a question or topic)'
               }
-              className="flex-1 p-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[100px]"
+              className="flex-1 p-2.5 border border-gray-300 dark:border-white/10 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[100px]"
             />
             {isLoading && onStop ? (
               <button
@@ -478,7 +478,7 @@ export function ChatPanel({
               type="checkbox"
               checked={autoInteract}
               onChange={(e) => onAutoInteractChange(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
             />
             Auto-interact
             <InfoTooltip text="When enabled, the two AIs automatically take turns responding to each other up to the messages-per-bot limit. Disable to trigger each response manually." />
@@ -495,7 +495,7 @@ export function ChatPanel({
                   step="1"
                   value={Math.ceil(maxInteractions / 2)}
                   onChange={(e) => onMaxInteractionsChange(Math.max(2, Number(e.target.value)) * 2)}
-                  className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100"
                 />
                 <InfoTooltip text="How many times each bot responds per run (min 2). Set to 5 → Bot A speaks 5 times, Bot B speaks 5 times (10 total AI responses)." />
               </label>
@@ -520,7 +520,7 @@ export function ChatPanel({
                   type="checkbox"
                   checked={delayVariance}
                   onChange={(e) => onDelayVarianceChange(e.target.checked)}
-                  className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+                  className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
                 />
                 <span className="text-gray-500 dark:text-gray-400">Length-based delay</span>
                 <InfoTooltip text="Adds extra delay proportional to the length of each message (approx. 0.05 s per word), simulating the time a human would take to read it." />
@@ -535,7 +535,7 @@ export function ChatPanel({
                   step="1"
                   value={repetitionCount}
                   onChange={(e) => onRepetitionCountChange(Math.max(1, Number(e.target.value)))}
-                  className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100"
                 />
                 <span className="text-gray-500 dark:text-gray-400">conversations</span>
                 <InfoTooltip text="Run the same conversation from scratch this many times. Useful for generating multiple varied responses to the same opening prompt." />
@@ -548,7 +548,7 @@ export function ChatPanel({
               type="checkbox"
               checked={chatMode}
               onChange={(e) => onChatModeChange(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
             />
             <span className="text-gray-500 dark:text-gray-400">Chat mode</span>
             <InfoTooltip text="When enabled, appends an instruction to both bots asking them to reply in short, conversational sentences (1–2 sentences max). Your own prompts are always preserved." />
@@ -559,7 +559,7 @@ export function ChatPanel({
               type="checkbox"
               checked={saveHistory}
               onChange={(e) => onSaveHistoryChange(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500"
             />
             <span className="text-gray-500 dark:text-gray-400">Save to history</span>
             <InfoTooltip text="When disabled, this conversation is not written to the database. Nothing is stored server-side — useful for sensitive research data or private experiments." align="right" />
@@ -567,27 +567,27 @@ export function ChatPanel({
         </div>
 
         {/* Research controls row */}
-        <div className="flex flex-wrap items-start gap-x-5 gap-y-2.5 text-sm pt-2 border-t border-gray-100 dark:border-gray-700">
+        <div className="flex flex-wrap items-start gap-x-5 gap-y-2.5 text-sm pt-2 border-t border-gray-100 dark:border-white/10">
           {/* SPEC-03: bot role mode toggle */}
           <div className="flex items-center gap-2">
             <span className="text-xs text-gray-500 dark:text-gray-400">Bot roles</span>
-            <div className="flex rounded-md border border-gray-300 dark:border-gray-600 overflow-hidden text-[11px]">
+            <div className="flex rounded-md border border-gray-300 dark:border-white/10 overflow-hidden text-[11px]">
               <button
                 onClick={() => onBotModeChange('symmetric')}
                 className={`px-2.5 py-1 transition-colors ${
                   botMode === 'symmetric'
                     ? 'bg-indigo-600 text-white'
-                    : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
+                    : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]'
                 }`}
               >
                 Symmetric
               </button>
               <button
                 onClick={() => onBotModeChange('asymmetric')}
-                className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-gray-600 ${
+                className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-white/10 ${
                   botMode === 'asymmetric'
                     ? 'bg-indigo-600 text-white'
-                    : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
+                    : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a]'
                 }`}
               >
                 Asymmetric
@@ -605,7 +605,7 @@ export function ChatPanel({
                 value={openingMessage}
                 onChange={(e) => onOpeningMessageChange(e.target.value)}
                 placeholder="Scripted first line (blank = AI generates)"
-                className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+                className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
               />
               <InfoTooltip text="Fixed first message from Bot A that does NOT count against the turn limit. Leave blank to let Bot A's AI generate its opening line from its system prompt." />
             </label>
@@ -619,7 +619,7 @@ export function ChatPanel({
               value={stopKeywords}
               onChange={(e) => onStopKeywordsChange(e.target.value)}
               placeholder="agreed, deal, accept"
-              className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+              className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded focus:ring-1 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
             />
             <InfoTooltip text="Comma-separated keywords. If any bot's response contains one, the conversation stops immediately. The trigger is recorded in CSV exports as a dependent variable." />
           </label>
@@ -648,7 +648,7 @@ export function ChatPanel({
               <ChevronDown className="w-3 h-3" />
             </button>
             {showShareMenu && (
-              <div className="absolute right-0 bottom-full mb-1 w-52 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-10 overflow-hidden">
+              <div className="absolute right-0 bottom-full mb-1 w-52 bg-white dark:bg-[#0f1e38] rounded-lg shadow-lg border border-gray-200 dark:border-white/10 z-10 overflow-hidden">
                 <button
                   onClick={() => { onSaveExperiment(); setShowShareMenu(false); }}
                   className="w-full flex items-center gap-2 px-3 py-2.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-left"
@@ -659,17 +659,17 @@ export function ChatPanel({
                     <div className="text-gray-400 dark:text-gray-500 text-[10px]">Save config to your account</div>
                   </div>
                 </button>
-                <div className="border-t border-gray-100 dark:border-gray-700" />
+                <div className="border-t border-gray-100 dark:border-white/10" />
                 <button
                   onClick={() => { onShareConfig(); setShowShareMenu(false); }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 text-left"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a] text-left"
                 >
                   <Link className="w-3.5 h-3.5 text-gray-400" />
                   {shareCopied ? 'URL copied!' : 'Copy share URL'}
                 </button>
                 <button
                   onClick={() => { onDownloadConfigJson(); setShowShareMenu(false); }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 text-left"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-[#16294a] text-left"
                 >
                   <FileText className="w-3.5 h-3.5 text-gray-400" />
                   Download as JSON
diff --git a/src/components/ConversationAnalytics.tsx b/src/components/ConversationAnalytics.tsx
index 4aa3140..9954534 100644
--- a/src/components/ConversationAnalytics.tsx
+++ b/src/components/ConversationAnalytics.tsx
@@ -66,7 +66,7 @@ function buildTextReport(
 
 function StatRow({ label, icon, v1, v2 }: { label: string; icon?: React.ReactNode; v1: string; v2: string }) {
   return (
-    <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center py-1.5 border-b border-gray-100 dark:border-gray-700/60 last:border-0">
+    <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center py-1.5 border-b border-gray-100 dark:border-white/10/60 last:border-0">
       <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1.5">{icon}{label}</span>
       <span className="text-sm font-semibold tabular-nums text-right w-24" style={{ color: COLOR1 }}>{v1}</span>
       <span className="text-sm font-semibold tabular-nums text-right w-24" style={{ color: COLOR2 }}>{v2}</span>
@@ -119,7 +119,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
         </div>
         <button
           onClick={handleDownload}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-white/10 rounded-lg hover:bg-gray-100 dark:hover:bg-[#16294a] transition-colors flex-shrink-0"
         >
           <Download className="w-3.5 h-3.5" />
           Report (.txt)
@@ -128,15 +128,15 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
 
       {/* Headline takeaway */}
       {spokeMore && (
-        <div className="rounded-xl bg-gradient-to-r from-indigo-50 to-emerald-50 dark:from-indigo-900/20 dark:to-emerald-900/20 border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+        <div className="rounded-xl bg-gradient-to-r from-indigo-50 to-emerald-50 dark:from-indigo-900/20 dark:to-emerald-900/20 border border-gray-200 dark:border-white/10 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
           <span className="font-semibold" style={{ color: spokeMore === botName1 ? c1 : c2 }}>{spokeMore}</span>
           {' '}produced more total words ({fmtInt(Math.max(bot1.totalWords, bot2.totalWords))} vs {fmtInt(Math.min(bot1.totalWords, bot2.totalWords))}).
         </div>
       )}
 
       {/* Descriptives */}
-      <section className="rounded-xl border border-gray-200 dark:border-gray-700 p-4">
-        <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center pb-2 mb-1 border-b border-gray-200 dark:border-gray-600">
+      <section className="rounded-xl border border-gray-200 dark:border-white/10 p-4">
+        <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-center pb-2 mb-1 border-b border-gray-200 dark:border-white/10">
           <span className="text-[11px] uppercase tracking-wide text-gray-400 dark:text-gray-500">Metric</span>
           <span className="text-xs font-semibold text-right w-24 truncate" style={{ color: c1 }} title={botName1}>{botName1}</span>
           <span className="text-xs font-semibold text-right w-24 truncate" style={{ color: c2 }} title={botName2}>{botName2}</span>
@@ -160,7 +160,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
       </section>
 
       {/* Significance tests */}
-      <section className="rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+      <section className="rounded-xl border border-gray-200 dark:border-white/10 p-4">
         <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">Are the differences significant?</h4>
         {insufficient ? (
           <p className="text-xs text-gray-500 dark:text-gray-400">
@@ -194,7 +194,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
 
       {/* Distinctive words */}
       {(distinctive.botA.length > 0 || distinctive.botB.length > 0) && (
-        <section className="rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+        <section className="rounded-xl border border-gray-200 dark:border-white/10 p-4">
           <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-1.5">
             <Sparkles className="w-3.5 h-3.5 text-amber-500" />
             Distinctive words
@@ -210,7 +210,7 @@ export function ConversationAnalytics({ messages, botName1, botName2, textColor1
                     col.words.map((w) => (
                       <span
                         key={w.word}
-                        className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
+                        className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-[#16294a] text-gray-700 dark:text-gray-300"
                         title={`used ${col.name === botName1 ? w.countA : w.countB}× here vs ${col.name === botName1 ? w.countB : w.countA}× by the other`}
                       >
                         {w.word}
diff --git a/src/components/ConversationDisplay.tsx b/src/components/ConversationDisplay.tsx
index ccce8fd..99a27e4 100644
--- a/src/components/ConversationDisplay.tsx
+++ b/src/components/ConversationDisplay.tsx
@@ -99,9 +99,9 @@ export function ConversationDisplay({
 
         const repDivider = showRepDivider ? (
           <div key={`rep-${message.id}`} className="flex items-center gap-3 py-1">
-            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-600" />
+            <div className="flex-1 h-px bg-gray-200 dark:bg-[#16294a]" />
             <span className="text-xs text-gray-400 dark:text-gray-500 font-medium px-2">Run {repNum}</span>
-            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-600" />
+            <div className="flex-1 h-px bg-gray-200 dark:bg-[#16294a]" />
           </div>
         ) : null;
 
@@ -111,7 +111,7 @@ export function ConversationDisplay({
               {repDivider}
               <motion.div
                 {...messageEntrance}
-                className="flex flex-col gap-1 px-3 py-2 rounded-xl shadow-sm bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 mr-12"
+                className="flex flex-col gap-1 px-3 py-2 rounded-xl shadow-sm bg-white dark:bg-[#16294a] border border-gray-200 dark:border-white/10 mr-12"
               >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index dec8694..bcf403f 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -21,12 +21,12 @@ export function DataTable({ messages, botName1, botName2 }: DataTableProps) {
   return (
     <div className="overflow-auto h-full">
       <table className="min-w-full text-xs border-collapse">
-        <thead className="sticky top-0 bg-gray-50 dark:bg-gray-900 z-10">
+        <thead className="sticky top-0 bg-gray-50 dark:bg-[#0c1830] z-10">
           <tr>
             {['Conv. ID', 'Time', 'Sender', 'Model', 'Temp', 'Words', 'ms', 'Message'].map(col => (
               <th
                 key={col}
-                className="px-2 py-2 text-left font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 whitespace-nowrap"
+                className="px-2 py-2 text-left font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-white/10 whitespace-nowrap"
               >
                 {col}
               </th>
@@ -38,7 +38,7 @@ export function DataTable({ messages, botName1, botName2 }: DataTableProps) {
             const sender = m.role === 'user' ? 'You' : (m.botIndex === 1 ? botName1 : botName2);
             const isUser = m.role === 'user';
             return (
-              <tr key={m.id} className={`border-b border-gray-100 dark:border-gray-700 ${i % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-700/40'}`}>
+              <tr key={m.id} className={`border-b border-gray-100 dark:border-white/10 ${i % 2 === 0 ? '' : 'bg-gray-50 dark:bg-[#16294a]/40'}`}>
                 <td className="px-2 py-1.5 font-mono text-gray-400 dark:text-gray-500 whitespace-nowrap">
                   {m.conversationId ? m.conversationId.slice(0, 8) : '—'}
                 </td>
diff --git a/src/components/ModelConfig.tsx b/src/components/ModelConfig.tsx
index 8964559..6d784c6 100644
--- a/src/components/ModelConfig.tsx
+++ b/src/components/ModelConfig.tsx
@@ -125,7 +125,7 @@ export function ModelConfig({
         <select
           value={model}
           onChange={(e) => handleProviderChange(e.target.value as AIModel)}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           disabled={disabled}
         >
           {(Object.keys(PROVIDER_LABELS) as AIModel[]).map((m) => (
@@ -151,7 +151,7 @@ export function ModelConfig({
           type="password"
           value={apiKey}
           onChange={(e) => onApiKeyChange(e.target.value)}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           placeholder={API_KEY_PLACEHOLDERS[model]}
           disabled={disabled}
         />
@@ -169,7 +169,7 @@ export function ModelConfig({
             const v = versions.find(v => v.id === e.target.value);
             if (v) onMaxTokensChange(Math.min(maxTokens, v.maxTokens));
           }}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           disabled={disabled}
         >
           {versions.map((v) => (
@@ -191,7 +191,7 @@ export function ModelConfig({
           value={temperature}
           onChange={(e) => onTemperatureChange(Number(e.target.value))}
           aria-label={`Temperature: ${temperature}`}
-          className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-indigo-600"
+          className="w-full h-2 bg-gray-200 dark:bg-[#16294a] rounded-lg appearance-none cursor-pointer accent-indigo-600"
           disabled={disabled}
         />
         <div className="flex justify-between text-xs text-gray-400 dark:text-gray-500">
@@ -214,7 +214,7 @@ export function ModelConfig({
             const v = Number(e.target.value);
             onMaxTokensChange(Math.max(1, Math.min(v, currentMax)));
           }}
-          className="w-full p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          className="w-full p-2 bg-gray-50 dark:bg-[#16294a] border border-gray-200 dark:border-white/10 rounded-xl text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           disabled={disabled}
         />
       </div>
diff --git a/src/components/SetupPage.tsx b/src/components/SetupPage.tsx
index 193f786..e962e9e 100644
--- a/src/components/SetupPage.tsx
+++ b/src/components/SetupPage.tsx
@@ -125,7 +125,7 @@ export function SetupPage(props: SetupPageProps) {
             value={props.userInput}
             onChange={(e) => props.onUserInputChange(e.target.value)}
             placeholder="Describe a scenario, pose a question, or leave blank to let the system prompts guide the conversation..."
-            className="w-full p-3 border border-lab-border dark:border-gray-600 rounded-lab-btn text-sm font-mono bg-lab-bg dark:bg-gray-700 text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[120px] focus:ring-2 focus:ring-lab-primary focus:border-transparent"
+            className="w-full p-3 border border-lab-border dark:border-white/10 rounded-lab-btn text-sm font-mono bg-lab-bg dark:bg-[#16294a] text-lab-heading dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 resize-y min-h-[120px] focus:ring-2 focus:ring-lab-primary focus:border-transparent"
           />
         </div>
 
@@ -145,7 +145,7 @@ export function SetupPage(props: SetupPageProps) {
                 {/* Auto-interact */}
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input type="checkbox" checked={props.autoInteract} onChange={e => props.onAutoInteractChange(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                    className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                   Auto-interact
                   <InfoTooltip text="When enabled, the two AIs automatically take turns responding to each other." />
                 </label>
@@ -153,7 +153,7 @@ export function SetupPage(props: SetupPageProps) {
                 {/* Chat mode */}
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input type="checkbox" checked={props.chatMode} onChange={e => props.onChatModeChange(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                    className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                   Chat mode
                   <InfoTooltip text="Appends an instruction to both bots asking them to reply in short, conversational sentences (1–2 sentences max)." />
                 </label>
@@ -161,7 +161,7 @@ export function SetupPage(props: SetupPageProps) {
                 {/* Save to history */}
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input type="checkbox" checked={props.saveHistory} onChange={e => props.onSaveHistoryChange(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                    className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                   Save to history
                   <InfoTooltip text="When disabled, this conversation is not written to the database." />
                 </label>
@@ -175,7 +175,7 @@ export function SetupPage(props: SetupPageProps) {
                     <input type="number" min="2" max="25" step="1"
                       value={Math.ceil(props.maxInteractions / 2)}
                       onChange={e => props.onMaxInteractionsChange(Math.max(2, Number(e.target.value)) * 2)}
-                      className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" />
+                      className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100" />
                   </label>
 
                   {/* Delay */}
@@ -191,7 +191,7 @@ export function SetupPage(props: SetupPageProps) {
                   {/* Length-based delay */}
                   <label className="flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" checked={props.delayVariance} onChange={e => props.onDelayVarianceChange(e.target.checked)}
-                      className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
+                      className="rounded border-gray-300 dark:border-white/10 text-indigo-600 focus:ring-indigo-500" />
                     <span className="text-gray-500 dark:text-gray-400">Length-based delay</span>
                   </label>
 
@@ -201,7 +201,7 @@ export function SetupPage(props: SetupPageProps) {
                     <input type="number" min="1" max="100" step="1"
                       value={props.repetitionCount}
                       onChange={e => props.onRepetitionCountChange(Math.max(1, Number(e.target.value)))}
-                      className="w-14 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" />
+                      className="w-14 px-2 py-1 border border-gray-300 dark:border-white/10 rounded text-sm bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100" />
                     <span className="text-gray-500 dark:text-gray-400">runs</span>
                   </label>
                 </div>
@@ -211,13 +211,13 @@ export function SetupPage(props: SetupPageProps) {
               <div className="flex flex-wrap gap-x-6 gap-y-3 text-sm items-center">
                 <div className="flex items-center gap-2">
                   <span className="text-xs text-gray-500 dark:text-gray-400">Bot roles</span>
-                  <div className="flex rounded-md border border-gray-300 dark:border-gray-600 overflow-hidden text-[11px]">
+                  <div className="flex rounded-md border border-gray-300 dark:border-white/10 overflow-hidden text-[11px]">
                     <button onClick={() => props.onBotModeChange('symmetric')}
-                      className={`px-2.5 py-1 transition-colors ${props.botMode === 'symmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}>
+                      className={`px-2.5 py-1 transition-colors ${props.botMode === 'symmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300'}`}>
                       Symmetric
                     </button>
                     <button onClick={() => props.onBotModeChange('asymmetric')}
-                      className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-gray-600 ${props.botMode === 'asymmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}>
+                      className={`px-2.5 py-1 transition-colors border-l border-gray-300 dark:border-white/10 ${props.botMode === 'asymmetric' ? 'bg-indigo-600 text-white' : 'bg-white dark:bg-[#16294a] text-gray-700 dark:text-gray-300'}`}>
                       Asymmetric
                     </button>
                   </div>
@@ -229,7 +229,7 @@ export function SetupPage(props: SetupPageProps) {
                     <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">Bot A opener</span>
                     <input type="text" value={props.openingMessage} onChange={e => props.onOpeningMessageChange(e.target.value)}
                       placeholder="Scripted first line (blank = AI generates)"
-                      className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
+                      className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
                   </label>
                 )}
 
@@ -237,7 +237,7 @@ export function SetupPage(props: SetupPageProps) {
                   <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">Stop words</span>
                   <input type="text" value={props.stopKeywords} onChange={e => props.onStopKeywordsChange(e.target.value)}
                     placeholder="agreed, deal, accept"
-                    className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
+                    className="w-44 px-2 py-1 text-xs border border-gray-300 dark:border-white/10 rounded bg-white dark:bg-[#16294a] text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
                   <InfoTooltip text="Comma-separated keywords. If any bot's response contains one, the conversation stops." />
                 </label>
               </div>