Refactor CSS variables and styles for improved theme consistency; enhance user message and assistant message styling for better visual clarity and aesthetics.

style.css

@@ -1,66 +1,73 @@
 /* ============================================
    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%);
-
+   :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);
-}
-
+  --shadow-purple-sm: rgba(124, 58, 237, 0.1);
+  --shadow-purple-md: rgba(124, 58, 237, 0.15);
+  --shadow-purple-lg: rgba(124, 58, 237, 0.25);
+  --shadow-purple-xl: rgba(124, 58, 237, 0.35);
+  --shadow-purple-2xl: rgba(124, 58, 237, 0.4);
+  --shadow-purple-light: rgba(167, 139, 250, 0.2);
+  --shadow-purple-light-lg: rgba(167, 139, 250, 0.5);
+  
+    /* 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;
@@ -74,15 +81,15 @@
 
   /* 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;
+  text-shadow: 0 2px 8px var(--shadow-purple) !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;
+  text-shadow: 0 2px 12px var(--shadow-purple) !important;
 }
-
+  
 /* Description styling - Target markdown div (not paragraphs which are used in chat) */
 /* The description is rendered as: .prose > .md > div */
 .prose .md > div,
@@ -94,76 +101,76 @@
   margin: 0.75rem auto 1.5rem auto !important;
   padding: 1.25rem 1.5rem !important;
   max-width: 700px !important;
-  color: #4B5563 !important;
-  background-color: #F9FAFB !important;
+  color: var(--text-light-secondary) !important;
+  background-color: var(--bg-light-secondary) !important;
   border-radius: 16px !important;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--card-shadow-light) !important;
   display: block !important;
   position: relative !important;
 
   /* Multi-color gradient border */
   border: 2px solid transparent !important;
   background-image: 
-    linear-gradient(#F9FAFB, #F9FAFB),
+    linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
     linear-gradient(
       90deg,
-      #7C3AED 0%,
-      #EC4899 14%,
-      #FF8F8F 28%,
-      #FB923C 42%,
-      #FBBF24 57%,
-      #10B981 71%,
-      #14B8A6 85%,
-      #8B5CF6 100%
+      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,
-.app-description strong {
-  color: var(--primary-purple) !important;
-  font-weight: 600 !important;
-}
-
+  
+  /* Bold text styling within description */
+  .prose .md > div strong,
+  .app-description strong {
+    color: var(--primary-purple) !important;
+    font-weight: 600 !important;
+  }
+  
 /* Dark theme description */
 @media (prefers-color-scheme: dark) {
   .prose .md > div,
   .app-description {
-    color: #E5E7EB !important;
-    background-color: #1E293B !important;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
+    color: var(--text-dark-secondary) !important;
+    background-color: var(--bg-dark-card) !important;
+    box-shadow: var(--card-shadow-dark) !important;
 
     /* Multi-color gradient border for dark theme */
     background-image: 
-      linear-gradient(#1E293B, #1E293B),
+      linear-gradient(var(--bg-dark-card), var(--bg-dark-card)),
       linear-gradient(
         90deg,
-        #7C3AED 0%,
-        #EC4899 14%,
-        #FF8F8F 28%,
-        #FB923C 42%,
-        #FBBF24 57%,
-        #10B981 71%,
-        #14B8A6 85%,
-        #8B5CF6 100%
+        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 */
   .prose .md > div strong,
   .app-description strong {
-    color: #A78BFA !important;
+    color: var(--primary-purple-lighter) !important;
   }
 }
-
+  
 /* Also support .dark class for manual theme switching */
 .dark .prose .md > div,
 .dark .app-description {
-  color: #E5E7EB !important;
-  background-color: #1E293B !important;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
+  color: var(--text-dark-secondary) !important;
+  background-color: var(--bg-dark-card) !important;
+  box-shadow: var(--card-shadow-dark) !important;
 
   /* Multi-color gradient border for dark theme */
   background-image:
@@ -184,244 +191,244 @@
 /* Dark theme bold text in description */
 .dark .prose .md > div strong,
 .dark .app-description 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);
+  color: var(--primary-purple-lighter) !important;
 }
-
-.dark .chatbot::-webkit-scrollbar-thumb:hover,
-.dark [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
-  background: var(--primary-purple-light);
-}
+  
+  /* ============================================
+     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 var(--shadow-purple-lg) !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 var(--shadow-purple-sm) !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 var(--shadow-purple-lg) !important;
+  }
+  
+  button[type="submit"]:hover,
+  .submit-button:hover,
+  button.primary:hover {
+    background: var(--primary-purple-dark) !important;
+    box-shadow: 0 4px 12px var(--shadow-purple-xl) !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 var(--shadow-purple-md) !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 var(--shadow-purple-2xl) !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 var(--shadow-purple-light) !important;
+  }
+  
+  /* Dark theme - Buttons */
+  .dark button[type="submit"],
+  .dark .submit-button,
+  .dark button.primary {
+    background: var(--gradient-purple) !important;
+    box-shadow: 0 2px 8px var(--shadow-purple-2xl) !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 var(--shadow-purple-light-lg) !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 var(--shadow-purple-lg) !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);
+  }