From edf302b302080a45ef1e8cd979c3a9bc981343b7 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 9 Apr 2026 12:17:22 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20dark=20mode=20chat=20=E2=80=94=20lighter?=
 =?UTF-8?q?=20panel=20to=20distinguish=20from=20CV=20background?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/04-interactive/_chat.css | 77 +++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index c0a8df1..1189206 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -701,6 +701,83 @@
     color: var(--text-light, #999999);
 }
 
+/* ==========================================================================
+   Dark Mode — lighter panel to distinguish from CV background
+   ========================================================================== */
+
+[data-color-theme="dark"] .chat-panel {
+    background: #2c2c2c;
+    border-color: #444;
+}
+
+[data-color-theme="dark"] .chat-row-bot .chat-msg {
+    background: #383838;
+    color: #e0e0e0;
+}
+
+[data-color-theme="dark"] .chat-input {
+    background: #333;
+    border-color: #555;
+    color: #e0e0e0;
+}
+
+[data-color-theme="dark"] .chat-input-area {
+    background: #2c2c2c;
+    border-top-color: #444;
+}
+
+[data-color-theme="dark"] .chat-suggestions {
+    border-top-color: #444;
+}
+
+[data-color-theme="dark"] .chat-chip {
+    border-color: #555;
+    color: #bbb;
+}
+
+[data-color-theme="dark"] .chat-nav-link {
+    color: #4eca81;
+    border-bottom-color: #4eca81;
+}
+
+/* Auto dark (system preference) */
+@media (prefers-color-scheme: dark) {
+    [data-color-theme="auto"] .chat-panel {
+        background: #2c2c2c;
+        border-color: #444;
+    }
+
+    [data-color-theme="auto"] .chat-row-bot .chat-msg {
+        background: #383838;
+        color: #e0e0e0;
+    }
+
+    [data-color-theme="auto"] .chat-input {
+        background: #333;
+        border-color: #555;
+        color: #e0e0e0;
+    }
+
+    [data-color-theme="auto"] .chat-input-area {
+        background: #2c2c2c;
+        border-top-color: #444;
+    }
+
+    [data-color-theme="auto"] .chat-suggestions {
+        border-top-color: #444;
+    }
+
+    [data-color-theme="auto"] .chat-chip {
+        border-color: #555;
+        color: #bbb;
+    }
+
+    [data-color-theme="auto"] .chat-nav-link {
+        color: #4eca81;
+        border-bottom-color: #4eca81;
+    }
+}
+
 /* ==========================================================================
    Responsive
    ========================================================================== */