Añade estilos modernos y limpios para el chatbot, incluyendo soporte para temas claro y oscuro. Se mejoran los estilos de mensajes, botones y áreas de entrada, optimizando la experiencia del usuario.

app.py

@@ -238,37 +238,221 @@ style = """
   color: var(--primary-purple-light) !important;
 }
 
-/* Dark theme styles - only apply when .dark class is present */
+/* ============================================
+   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;
+}
+
+/* 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); }
 
-/* Chat bubbles */
-.dark .message.user {
-  background: var(--bg-dark-card);
-  border-radius: var(--card-radius);
+/* 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 .message.assistant {
-  background: var(--bg-dark-secondary);
-  border-radius: var(--card-radius);
+
+/* 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;
 }
 
-/* Input */
-.dark textarea, .dark .gr-textbox textarea {
+/* 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;
 }
 
-/* Buttons */
-.dark button {
-  background: var(--bg-dark-tertiary) !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: 1px solid var(--border-dark) !important;
+  border-color: var(--border-dark) !important;
 }
-.dark button:hover {
-  background: var(--primary-purple) !important;
-  border-color: var(--primary-purple-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);
 }
 """