Carga el CSS desde un archivo externo para mejorar la organización del código y facilitar la gestión de estilos.

app.py

@@ -4,6 +4,7 @@ import asyncio
 import inspect
 import base64
 import mimetypes
+from pathlib import Path
 import gradio as gr
 from openai import OpenAI
 from dotenv import load_dotenv
@@ -84,399 +85,12 @@ Comienza preguntando si ya tiene cuenta y acceso al portal adecuado:
 - Para OneDrive: cuenta de Microsoft y acceso a Microsoft Entra ID (Azure AD) en Azure Portal.
 """
 
-style = """
-/* ============================================
-   COLOR PALETTE FOR LIGHT AND DARK THEMES
-   ============================================ */
-:root {
-  /* Primary Purple Colors */
-  --primary-purple: #7C3AED;
-  --primary-purple-light: #8B5CF6;
-  --primary-purple-lighter: #A78BFA;
-  --primary-purple-dark: #6D28D9;
-
-  /* Secondary Purple/Pink Colors */
-  --secondary-purple: #9333EA;
-  --secondary-pink: #EC4899;
-  --secondary-pink-light: #F472B6;
-
-  /* Accent Colors */
-  --accent-coral: #FF7B7B;
-  --accent-salmon: #FF8F8F;
-  --accent-green: #10B981;
-  --accent-teal: #14B8A6;
-  --accent-yellow: #FBBF24;
-  --accent-orange: #FB923C;
-
-  /* Background Colors - Light Theme */
-  --bg-light-primary: #FFFFFF;
-  --bg-light-secondary: #F9FAFB;
-  --bg-light-tertiary: #F3F4F6;
-  --bg-light-card: #FFFFFF;
-
-  /* Background Colors - Dark Theme */
-  --bg-dark-primary: #0F172A;
-  --bg-dark-secondary: #1E293B;
-  --bg-dark-tertiary: #334155;
-  --bg-dark-card: #1E293B;
-
-  /* Text Colors - Light Theme */
-  --text-light-primary: #111827;
-  --text-light-secondary: #4B5563;
-  --text-light-tertiary: #9CA3AF;
-
-  /* Text Colors - Dark Theme */
-  --text-dark-primary: #F9FAFB;
-  --text-dark-secondary: #E5E7EB;
-  --text-dark-tertiary: #9CA3AF;
-
-  /* Gradient Backgrounds */
-  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
-  --gradient-purple-pink: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
-  --gradient-blue-purple: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
-  --gradient-coral: linear-gradient(135deg, #FF8F8F 0%, #FF7B7B 100%);
-
-  /* Border & Shadow Colors */
-  --border-light: #E5E7EB;
-  --border-dark: #374151;
-  --shadow-light: rgba(0, 0, 0, 0.1);
-  --shadow-purple: rgba(124, 58, 237, 0.3);
-
-  /* Card & Surface */
-  --card-radius: 20px;
-  --card-shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --card-shadow-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-}
-
-/* Modern title styling - Purple with subtle shadow */
-.prose h1 {
-  font-size: 2.5rem !important;
-  font-weight: 800 !important;
-  text-align: center !important;
-  margin: 1.5rem 0 0.5rem 0 !important;
-  padding: 0 !important;
-  letter-spacing: -0.04em !important;
-  text-transform: none !important;
-  line-height: 1.2 !important;
-
-  /* Deep purple with subtle shadow for depth */
-  color: var(--primary-purple-dark) !important;
-  text-shadow: 0 2px 8px rgba(109, 40, 217, 0.15) !important;
-}
-
-/* Dark theme title - Lighter purple with glow */
-.dark .prose h1 {
-  color: var(--primary-purple-lighter) !important;
-  text-shadow: 0 2px 12px rgba(167, 139, 250, 0.25) !important;
-}
-
-/* Description styling - Target markdown div (not paragraphs which are used in chat) */
-/* The description is rendered as: .prose > .md > div */
-.prose .md > div {
-  font-size: 1rem !important;
-  font-weight: 400 !important;
-  line-height: 1.6 !important;
-  text-align: center !important;
-  margin: 0.75rem auto 1.5rem auto !important;
-  padding: 1.25rem 1.5rem !important;
-  max-width: 700px !important;
-  color: var(--text-light-secondary) !important;
-  background: var(--bg-light-secondary) !important;
-  border-radius: 16px !important;
-  box-shadow: var(--card-shadow-light) !important;
-  display: block !important;
-  position: relative !important;
-
-  /* Multi-color gradient border */
-  border: 1px solid transparent !important;
-  background-image:
-    linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
-    linear-gradient(
-      90deg,
-      var(--primary-purple) 0%,
-      var(--secondary-pink) 14%,
-      var(--accent-salmon) 28%,
-      var(--accent-orange) 42%,
-      var(--accent-yellow) 57%,
-      var(--accent-green) 71%,
-      var(--accent-teal) 85%,
-      var(--primary-purple-light) 100%
-    ) !important;
-  background-origin: border-box !important;
-  background-clip: padding-box, border-box !important;
-}
-
-/* Bold text styling within description */
-.prose .md > div strong {
-  color: var(--primary-purple) !important;
-  font-weight: 600 !important;
-}
-
-/* Dark theme description */
-.dark .prose .md > div {
-  color: var(--text-dark-secondary) !important;
-  box-shadow: var(--card-shadow-dark) !important;
-
-  /* Multi-color gradient border for dark theme */
-  background-image:
-    linear-gradient(var(--bg-dark-card), var(--bg-dark-card)),
-    linear-gradient(
-      90deg,
-      var(--primary-purple) 0%,
-      var(--secondary-pink) 14%,
-      var(--accent-salmon) 28%,
-      var(--accent-orange) 42%,
-      var(--accent-yellow) 57%,
-      var(--accent-green) 71%,
-      var(--accent-teal) 85%,
-      var(--primary-purple-light) 100%
-    ) !important;
-}
-
-/* Dark theme bold text in description */
-.dark .prose .md > div strong {
-  color: var(--primary-purple-light) !important;
-}
-
-/* ============================================
-   CHATBOT STYLING - Modern and Clean
-   ============================================ */
-
-/* Chat container */
-.chatbot, [data-testid="chatbot"] {
-  border-radius: var(--card-radius) !important;
-  box-shadow: var(--card-shadow-light) !important;
-}
-
-/* User messages - Purple accent */
-.message.user,
-.user-message,
-[data-testid="user-message"] {
-  background: linear-gradient(135deg, var(--primary-purple-light) 0%, var(--primary-purple) 100%) !important;
-  color: white !important;
-  border-radius: 18px 18px 4px 18px !important;
-  padding: 0.875rem 1.125rem !important;
-  margin: 0.5rem 0 !important;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
-  margin-left: auto !important;
-}
-
-/* Force white text for all content inside user messages */
-.message.user *,
-.user-message *,
-[data-testid="user-message"] *,
-.user-row *,
-.message.user p,
-.message.user span,
-.message.user div {
-  color: white !important;
-}
-
-/* Assistant messages - Light background */
-.message.bot,
-.bot-message,
-[data-testid="bot-message"] {
-  background: var(--bg-light-card) !important;
-  color: var(--text-light-primary) !important;
-  border-radius: 18px 18px 18px 4px !important;
-  padding: 0.875rem 1.125rem !important;
-  margin: 0.5rem 0 !important;
-  border: 1px solid var(--border-light) !important;
-  box-shadow: var(--card-shadow-light) !important;
-  max-width: 80% !important;
-  margin-right: auto !important;
-}
-
-/* Input textarea */
-textarea,
-.gr-textbox textarea,
-[data-testid="textbox"] {
-  background: var(--bg-light-card) !important;
-  color: var(--text-light-primary) !important;
-  border: 2px solid var(--border-light) !important;
-  border-radius: 12px !important;
-  padding: 0.75rem 1rem !important;
-  font-size: 1rem !important;
-  transition: all 0.2s ease !important;
-}
-
-textarea:focus,
-.gr-textbox textarea:focus {
-  border-color: var(--primary-purple) !important;
-  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
-  outline: none !important;
-}
-
-/* Submit button and action buttons */
-button[type="submit"],
-.submit-button,
-button.primary {
-  background: var(--gradient-purple) !important;
-  color: white !important;
-  border: none !important;
-  border-radius: 12px !important;
-  padding: 0.625rem 1.5rem !important;
-  font-weight: 600 !important;
-  transition: all 0.2s ease !important;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
-}
-
-button[type="submit"]:hover,
-.submit-button:hover,
-button.primary:hover {
-  background: var(--primary-purple-dark) !important;
-  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
-  transform: translateY(-1px) !important;
-}
-
-/* Example buttons */
-.example,
-button.example {
-  background: var(--bg-light-secondary) !important;
-  color: var(--text-light-primary) !important;
-  border: 1px solid var(--border-light) !important;
-  border-radius: 12px !important;
-  padding: 0.75rem 1rem !important;
-  transition: all 0.2s ease !important;
-}
-
-.example:hover,
-button.example:hover {
-  background: var(--bg-light-tertiary) !important;
-  border-color: var(--primary-purple-light) !important;
-  transform: translateY(-2px) !important;
-  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
-}
-
-/* Scrollbar styling */
-.chatbot::-webkit-scrollbar,
-[data-testid="chatbot"]::-webkit-scrollbar {
-  width: 8px;
-}
-
-.chatbot::-webkit-scrollbar-track,
-[data-testid="chatbot"]::-webkit-scrollbar-track {
-  background: var(--bg-light-secondary);
-  border-radius: 10px;
-}
-
-.chatbot::-webkit-scrollbar-thumb,
-[data-testid="chatbot"]::-webkit-scrollbar-thumb {
-  background: var(--primary-purple-light);
-  border-radius: 10px;
-}
-
-.chatbot::-webkit-scrollbar-thumb:hover,
-[data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
-  background: var(--primary-purple);
-}
-
-/* ============================================
-   DARK THEME STYLES
-   ============================================ */
-
-.dark :root, .dark .gradio-container { color-scheme: dark; }
-.dark body, .dark .gradio-container { background: var(--bg-dark-primary); }
-.dark .prose, .dark .gr-text, .dark .gr-form { color: var(--text-dark-secondary); }
-
-/* Dark theme - Chat container */
-.dark .chatbot,
-.dark [data-testid="chatbot"] {
-  border-color: var(--border-dark) !important;
-  box-shadow: var(--card-shadow-dark) !important;
-}
-
-/* Dark theme - User messages */
-.dark .message.user,
-.dark .user-message,
-.dark [data-testid="user-message"] {
-  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
-  color: white !important;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
-}
-
-/* Dark theme - Force white text in user messages */
-.dark .message.user *,
-.dark .user-message *,
-.dark [data-testid="user-message"] *,
-.dark .user-row *,
-.dark .message.user p,
-.dark .message.user span,
-.dark .message.user div {
-  color: white !important;
-}
-
-/* Dark theme - Assistant messages */
-.dark .message.bot,
-.dark .bot-message,
-.dark [data-testid="bot-message"] {
-  background: var(--bg-dark-card) !important;
-  color: var(--text-dark-primary) !important;
-  border-color: var(--border-dark) !important;
-  box-shadow: var(--card-shadow-dark) !important;
-}
-
-/* Dark theme - Input */
-.dark textarea,
-.dark .gr-textbox textarea,
-.dark [data-testid="textbox"] {
-  background: var(--bg-dark-secondary) !important;
-  color: var(--text-dark-primary) !important;
-  border-color: var(--border-dark) !important;
-}
-
-.dark textarea:focus,
-.dark .gr-textbox textarea:focus {
-  border-color: var(--primary-purple-light) !important;
-  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2) !important;
-}
-
-/* Dark theme - Buttons */
-.dark button[type="submit"],
-.dark .submit-button,
-.dark button.primary {
-  background: var(--gradient-purple) !important;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
-}
-
-.dark button[type="submit"]:hover,
-.dark .submit-button:hover,
-.dark button.primary:hover {
-  background: var(--primary-purple-light) !important;
-  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.5) !important;
-}
-
-/* Dark theme - Example buttons */
-.dark .example,
-.dark button.example {
-  background: var(--bg-dark-card) !important;
-  color: var(--text-dark-primary) !important;
-  border-color: var(--border-dark) !important;
-}
-
-.dark .example:hover,
-.dark button.example:hover {
-  background: var(--bg-dark-secondary) !important;
-  border-color: var(--primary-purple-light) !important;
-  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
-}
-
-/* Dark theme - Scrollbar */
-.dark .chatbot::-webkit-scrollbar-track,
-.dark [data-testid="chatbot"]::-webkit-scrollbar-track {
-  background: var(--bg-dark-secondary);
-}
-
-.dark .chatbot::-webkit-scrollbar-thumb,
-.dark [data-testid="chatbot"]::-webkit-scrollbar-thumb {
-  background: var(--primary-purple);
-}
-
-.dark .chatbot::-webkit-scrollbar-thumb:hover,
-.dark [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
-  background: var(--primary-purple-light);
-}
-"""
+# Load CSS from external file
+css_file = Path(__file__).parent / "style.css"
+with open(css_file, "r") as f:
+    style = f.read()
+
+# CSS is now loaded from style.css file
 
 
 def _extract_text_and_files(message):

style.css

@@ -0,0 +1,395 @@
+/* ============================================
+   COLOR PALETTE FOR LIGHT AND DARK THEMES
+   ============================================ */
+:root {
+  /* Primary Purple Colors */
+  --primary-purple: #7C3AED;
+  --primary-purple-light: #8B5CF6;
+  --primary-purple-lighter: #A78BFA;
+  --primary-purple-dark: #6D28D9;
+
+  /* Secondary Purple/Pink Colors */
+  --secondary-purple: #9333EA;
+  --secondary-pink: #EC4899;
+  --secondary-pink-light: #F472B6;
+
+  /* Accent Colors */
+  --accent-coral: #FF7B7B;
+  --accent-salmon: #FF8F8F;
+  --accent-green: #10B981;
+  --accent-teal: #14B8A6;
+  --accent-yellow: #FBBF24;
+  --accent-orange: #FB923C;
+
+  /* Background Colors - Light Theme */
+  --bg-light-primary: #FFFFFF;
+  --bg-light-secondary: #F9FAFB;
+  --bg-light-tertiary: #F3F4F6;
+  --bg-light-card: #FFFFFF;
+
+  /* Background Colors - Dark Theme */
+  --bg-dark-primary: #0F172A;
+  --bg-dark-secondary: #1E293B;
+  --bg-dark-tertiary: #334155;
+  --bg-dark-card: #1E293B;
+
+  /* Text Colors - Light Theme */
+  --text-light-primary: #111827;
+  --text-light-secondary: #4B5563;
+  --text-light-tertiary: #9CA3AF;
+
+  /* Text Colors - Dark Theme */
+  --text-dark-primary: #F9FAFB;
+  --text-dark-secondary: #E5E7EB;
+  --text-dark-tertiary: #9CA3AF;
+
+  /* Gradient Backgrounds */
+  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
+  --gradient-purple-pink: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  --gradient-blue-purple: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  --gradient-coral: linear-gradient(135deg, #FF8F8F 0%, #FF7B7B 100%);
+
+  /* Border & Shadow Colors */
+  --border-light: #E5E7EB;
+  --border-dark: #374151;
+  --shadow-light: rgba(0, 0, 0, 0.1);
+  --shadow-purple: rgba(124, 58, 237, 0.3);
+
+  /* Card & Surface */
+  --card-radius: 20px;
+  --card-shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --card-shadow-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+/* Modern title styling - Purple with subtle shadow */
+.prose h1 {
+  font-size: 2.5rem !important;
+  font-weight: 800 !important;
+  text-align: center !important;
+  margin: 1.5rem 0 0.5rem 0 !important;
+  padding: 0 !important;
+  letter-spacing: -0.04em !important;
+  text-transform: none !important;
+  line-height: 1.2 !important;
+
+  /* Deep purple with subtle shadow for depth */
+  color: var(--primary-purple-dark) !important;
+  text-shadow: 0 2px 8px rgba(109, 40, 217, 0.15) !important;
+}
+
+/* Dark theme title - Lighter purple with glow */
+.dark .prose h1 {
+  color: var(--primary-purple-lighter) !important;
+  text-shadow: 0 2px 12px rgba(167, 139, 250, 0.25) !important;
+}
+
+/* Description styling - Target markdown div (not paragraphs which are used in chat) */
+/* The description is rendered as: .prose > .md > div */
+.prose .md > div {
+  font-size: 1rem !important;
+  font-weight: 400 !important;
+  line-height: 1.6 !important;
+  text-align: center !important;
+  margin: 0.75rem auto 1.5rem auto !important;
+  padding: 1.25rem 1.5rem !important;
+  max-width: 700px !important;
+  color: var(--text-light-secondary) !important;
+  background: var(--bg-light-secondary) !important;
+  border-radius: 16px !important;
+  box-shadow: var(--card-shadow-light) !important;
+  display: block !important;
+  position: relative !important;
+
+  /* Multi-color gradient border */
+  border: 3px solid transparent !important;
+  background-image:
+    linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
+    linear-gradient(
+      90deg,
+      var(--primary-purple) 0%,
+      var(--secondary-pink) 14%,
+      var(--accent-salmon) 28%,
+      var(--accent-orange) 42%,
+      var(--accent-yellow) 57%,
+      var(--accent-green) 71%,
+      var(--accent-teal) 85%,
+      var(--primary-purple-light) 100%
+    ) !important;
+  background-origin: border-box !important;
+  background-clip: padding-box, border-box !important;
+}
+
+/* Bold text styling within description */
+.prose .md > div strong {
+  color: var(--primary-purple) !important;
+  font-weight: 600 !important;
+}
+
+/* Dark theme description */
+.dark .prose .md > div {
+  color: var(--text-dark-secondary) !important;
+  box-shadow: var(--card-shadow-dark) !important;
+
+  /* Multi-color gradient border for dark theme */
+  background-image:
+    linear-gradient(var(--bg-dark-card), var(--bg-dark-card)),
+    linear-gradient(
+      90deg,
+      var(--primary-purple) 0%,
+      var(--secondary-pink) 14%,
+      var(--accent-salmon) 28%,
+      var(--accent-orange) 42%,
+      var(--accent-yellow) 57%,
+      var(--accent-green) 71%,
+      var(--accent-teal) 85%,
+      var(--primary-purple-light) 100%
+    ) !important;
+}
+
+/* Dark theme bold text in description */
+.dark .prose .md > div strong {
+  color: var(--primary-purple-light) !important;
+}
+
+/* ============================================
+   CHATBOT STYLING - Modern and Clean
+   ============================================ */
+
+/* Chat container */
+.chatbot, [data-testid="chatbot"] {
+  border-radius: var(--card-radius) !important;
+  border: 1px solid var(--border-light) !important;
+  box-shadow: var(--card-shadow-light) !important;
+}
+
+/* User messages - Purple accent */
+.message.user,
+.user-message,
+[data-testid="user-message"],
+.user-row {
+  background: linear-gradient(135deg, var(--primary-purple-light) 0%, var(--primary-purple) 100%) !important;
+  color: white !important;
+  border-radius: 18px 18px 4px 18px !important;
+  padding: 0.875rem 1.125rem !important;
+  margin: 0.5rem 0 !important;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
+  max-width: 80% !important;
+  margin-left: auto !important;
+}
+
+/* Force white text for all content inside user messages */
+.message.user *,
+.user-message *,
+[data-testid="user-message"] *,
+.user-row *,
+.message.user p,
+.message.user span,
+.message.user div {
+  color: white !important;
+}
+
+/* Assistant messages - Light background */
+.message.bot,
+.bot-message,
+[data-testid="bot-message"] {
+  background: var(--bg-light-card) !important;
+  color: var(--text-light-primary) !important;
+  border-radius: 18px 18px 18px 4px !important;
+  padding: 0.875rem 1.125rem !important;
+  margin: 0.5rem 0 !important;
+  border: 1px solid var(--border-light) !important;
+  box-shadow: var(--card-shadow-light) !important;
+  max-width: 80% !important;
+  margin-right: auto !important;
+}
+
+/* Input textarea */
+textarea,
+.gr-textbox textarea,
+[data-testid="textbox"] {
+  background: var(--bg-light-card) !important;
+  color: var(--text-light-primary) !important;
+  border: 2px solid var(--border-light) !important;
+  border-radius: 12px !important;
+  padding: 0.75rem 1rem !important;
+  font-size: 1rem !important;
+  transition: all 0.2s ease !important;
+}
+
+textarea:focus,
+.gr-textbox textarea:focus {
+  border-color: var(--primary-purple) !important;
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
+  outline: none !important;
+}
+
+/* Submit button and action buttons */
+button[type="submit"],
+.submit-button,
+button.primary {
+  background: var(--gradient-purple) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 12px !important;
+  padding: 0.625rem 1.5rem !important;
+  font-weight: 600 !important;
+  transition: all 0.2s ease !important;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
+}
+
+button[type="submit"]:hover,
+.submit-button:hover,
+button.primary:hover {
+  background: var(--primary-purple-dark) !important;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Example buttons */
+.example,
+button.example {
+  background: var(--bg-light-secondary) !important;
+  color: var(--text-light-primary) !important;
+  border: 1px solid var(--border-light) !important;
+  border-radius: 12px !important;
+  padding: 0.75rem 1rem !important;
+  transition: all 0.2s ease !important;
+}
+
+.example:hover,
+button.example:hover {
+  background: var(--bg-light-tertiary) !important;
+  border-color: var(--primary-purple-light) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
+}
+
+/* Scrollbar styling */
+.chatbot::-webkit-scrollbar,
+[data-testid="chatbot"]::-webkit-scrollbar {
+  width: 8px;
+}
+
+.chatbot::-webkit-scrollbar-track,
+[data-testid="chatbot"]::-webkit-scrollbar-track {
+  background: var(--bg-light-secondary);
+  border-radius: 10px;
+}
+
+.chatbot::-webkit-scrollbar-thumb,
+[data-testid="chatbot"]::-webkit-scrollbar-thumb {
+  background: var(--primary-purple-light);
+  border-radius: 10px;
+}
+
+.chatbot::-webkit-scrollbar-thumb:hover,
+[data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-purple);
+}
+
+/* ============================================
+   DARK THEME STYLES
+   ============================================ */
+
+.dark :root, .dark .gradio-container { color-scheme: dark; }
+.dark body, .dark .gradio-container { background: var(--bg-dark-primary); }
+.dark .prose, .dark .gr-text, .dark .gr-form { color: var(--text-dark-secondary); }
+
+/* Dark theme - Chat container */
+.dark .chatbot,
+.dark [data-testid="chatbot"] {
+  border-color: var(--border-dark) !important;
+  box-shadow: var(--card-shadow-dark) !important;
+}
+
+/* Dark theme - User messages */
+.dark .message.user,
+.dark .user-message,
+.dark [data-testid="user-message"],
+.dark .user-row {
+  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
+  color: white !important;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
+}
+
+/* Dark theme - Force white text in user messages */
+.dark .message.user *,
+.dark .user-message *,
+.dark [data-testid="user-message"] *,
+.dark .user-row *,
+.dark .message.user p,
+.dark .message.user span,
+.dark .message.user div {
+  color: white !important;
+}
+
+/* Dark theme - Assistant messages */
+.dark .message.bot,
+.dark .bot-message,
+.dark [data-testid="bot-message"] {
+  background: var(--bg-dark-card) !important;
+  color: var(--text-dark-primary) !important;
+  border-color: var(--border-dark) !important;
+  box-shadow: var(--card-shadow-dark) !important;
+}
+
+/* Dark theme - Input */
+.dark textarea,
+.dark .gr-textbox textarea,
+.dark [data-testid="textbox"] {
+  background: var(--bg-dark-secondary) !important;
+  color: var(--text-dark-primary) !important;
+  border-color: var(--border-dark) !important;
+}
+
+.dark textarea:focus,
+.dark .gr-textbox textarea:focus {
+  border-color: var(--primary-purple-light) !important;
+  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2) !important;
+}
+
+/* Dark theme - Buttons */
+.dark button[type="submit"],
+.dark .submit-button,
+.dark button.primary {
+  background: var(--gradient-purple) !important;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
+}
+
+.dark button[type="submit"]:hover,
+.dark .submit-button:hover,
+.dark button.primary:hover {
+  background: var(--primary-purple-light) !important;
+  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.5) !important;
+}
+
+/* Dark theme - Example buttons */
+.dark .example,
+.dark button.example {
+  background: var(--bg-dark-card) !important;
+  color: var(--text-dark-primary) !important;
+  border-color: var(--border-dark) !important;
+}
+
+.dark .example:hover,
+.dark button.example:hover {
+  background: var(--bg-dark-secondary) !important;
+  border-color: var(--primary-purple-light) !important;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
+}
+
+/* Dark theme - Scrollbar */
+.dark .chatbot::-webkit-scrollbar-track,
+.dark [data-testid="chatbot"]::-webkit-scrollbar-track {
+  background: var(--bg-dark-secondary);
+}
+
+.dark .chatbot::-webkit-scrollbar-thumb,
+.dark [data-testid="chatbot"]::-webkit-scrollbar-thumb {
+  background: var(--primary-purple);
+}
+
+.dark .chatbot::-webkit-scrollbar-thumb:hover,
+.dark [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-purple-light);
+}