Fixed the styles

app.py

@@ -598,53 +598,53 @@ def create_gradio_interface():
     
     chatbot = GradioEmotionChatbot(emotion_model_id, response_model_id)
     
-    # Create the Gradio interface with dark mode styling
+    # Create the Gradio interface with theme-agnostic styling
     custom_css = """
-    /* Dark mode styling */
+    /* Neutral styling for light/dark mode compatibility */
     body {
-        background-color: #1a1a1a !important;
-        color: #e0e0e0 !important;
+        color: #333333; /* Dark gray for text, works in both modes */
     }
     
     .gradio-container {
-        max-width: 1200px !important; /* Increased width for horizontal expansion */
+        max-width: 1200px !important; /* Wide container for horizontal layout */
         margin: auto !important;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
         border-radius: 12px !important;
-        background: #2d2d2d !important;
+        background: #f5f5f5; /* Light gray background, neutral */
         padding: 20px !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
     }
 
     /* Chatbot header styling */
     .gradio-container h1, #header {
-        color: #a29bfe !important;
+        color: #6b46c1 !important; /* Vibrant purple, good contrast */
         text-align: center !important;
-        font-size: 2.2rem !important; /* Larger font for better visibility */
+        font-size: 2.2rem !important;
         margin-bottom: 8px !important;
         font-weight: 700 !important;
-        text-shadow: 0 0 2px rgba(0,0,0,0.5) !important; /* Subtle shadow for clarity */
+        text-shadow: 0 0 2px rgba(0,0,0,0.2) !important; /* Subtle shadow */
     }
 
     .gradio-container p, #subheader {
         text-align: center !important;
-        color: #d0d0d0 !important; /* Lighter color for better contrast */
+        color: #666666 !important; /* Medium gray for subtitle */
         margin-bottom: 20px !important;
-        font-size: 1.1rem !important; /* Slightly larger font */
+        font-size: 1.1rem !important;
         font-weight: 400 !important;
     }
 
     /* Chatbot window styling */
     #chatbot {
-        height: 450px !important; /* Slightly taller for better content display */
+        height: 450px !important;
         overflow: auto !important;
         border-radius: 10px !important;
-        background-color: #1a1a1a !important;
-        border: 1px solid #3d3d3d !important;
+        background-color: #ffffff !important; /* White background for chat */
+        border: 1px solid #d0d0d0 !important; /* Light border */
         padding: 15px !important;
         margin-bottom: 20px !important;
     }
     
-    /* Force horizontal text orientation for ALL elements */
+    /* Force horizontal text orientation */
     * {
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
@@ -655,34 +655,34 @@ def create_gradio_interface():
     .message {
         border-radius: 12px !important;
         padding: 10px 15px !important;
-        margin: 8px 0 !important;
-        max-width: 70% !important; /* Adjusted for horizontal expansion */
-        width: auto !important; /* Allow messages to expand */
+        margin: 8px 10px !important; /* Added margin for spacing */
+        max-width: 75% !important; /* Same width for both user and bot */
+        width: auto !important;
         word-break: break-word !important;
-        font-size: 1rem !important; /* Clearer font size */
-        line-height: 1.4 !important; /* Improved readability */
-        text-shadow: 0 0 1px rgba(0,0,0,0.3) !important; /* Subtle shadow for text clarity */
+        font-size: 1rem !important;
+        line-height: 1.4 !important;
+        text-shadow: 0 0 1px rgba(0,0,0,0.2) !important; /* Subtle shadow */
     }
     
     .user-message {
-        background-color: #4a5568 !important;
-        color: #f0f4f8 !important; /* Lighter text for contrast */
-        margin-left: auto !important; /* Align user messages to the right */
+        background-color: #e6e6fa !important; /* Light lavender for user */
+        color: #333333 !important; /* Dark text for contrast */
+        margin-left: auto !important; /* Align right */
     }
     
     .bot-message {
-        background-color: #553c9a !important;
-        color: #ffffff !important; /* Pure white for maximum clarity */
-        margin-right: auto !important; /* Align bot messages to the left */
+        background-color: #6b46c1 !important; /* Purple for bot */
+        color: #ffffff !important; /* White text for contrast */
+        margin-right: auto !important; /* Align left */
     }
 
     /* User input styling */
     #user-input, .gradio-container textarea, .gradio-container input[type="text"] {
-        background-color: #2d2d2d !important;
-        color: #e0e0e0 !important;
+        background-color: #ffffff !important;
+        color: #333333 !important;
         border-radius: 20px !important;
         padding: 12px 18px !important;
-        border: 1px solid #4a4a4a !important;
+        border: 1px solid #d0d0d0 !important;
         margin-bottom: 15px !important;
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
@@ -691,10 +691,10 @@ def create_gradio_interface():
         min-height: 50px !important;
         height: auto !important;
         resize: none !important;
-        font-size: 1rem !important; /* Clearer font size */
+        font-size: 1rem !important;
     }
     
-    /* Force text orientation for any text inputs */
+    /* Force text orientation for inputs */
     .cm-editor, .cm-scroller, .cm-content, .cm-line {
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
@@ -703,7 +703,7 @@ def create_gradio_interface():
     /* Ensure row is horizontal */
     .gradio-row {
         flex-direction: row !important;
-        gap: 10px !important; /* Add spacing between elements */
+        gap: 10px !important;
     }
 
     /* Fix for chat bubbles */
@@ -712,28 +712,28 @@ def create_gradio_interface():
         text-orientation: mixed !important;
     }
 
-    /* Apply horizontal text to all text elements in chatbot */
+    /* Apply horizontal text to all text elements */
     .prose, .prose p, .prose span, .text-input-with-enter {
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
         direction: ltr !important;
     }
     
-    /* Target the specific user bubble on the right side */
+    /* Target user bubble */
     .gradio-chatbot > div > div {
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
         direction: ltr !important;
     }
 
-    /* Target any text inside chatbot bubbles */
+    /* Target text inside chatbot bubbles */
     .gradio-chatbot * {
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
         direction: ltr !important;
     }
 
-    /* AVATAR AND USERNAME FIXES */
+    /* Avatar fixes */
     .avatar, .avatar-container, .avatar-image, .user-avatar, .bot-avatar {
         writing-mode: horizontal-tb !important;
         text-orientation: mixed !important;
@@ -749,7 +749,7 @@ def create_gradio_interface():
 
     /* Button styling */
     .send-btn, .clear-btn {
-        background-color: #6c5ce7 !important;
+        background-color: #6b46c1 !important; /* Purple button */
         color: #ffffff !important;
         border: none !important;
         border-radius: 20px !important;
@@ -761,16 +761,16 @@ def create_gradio_interface():
     }
 
     .send-btn:hover, .clear-btn:hover {
-        background-color: #5649c1 !important;
+        background-color: #553c9a !important; /* Darker purple on hover */
         transform: translateY(-1px) !important;
     }
 
     .clear-btn {
-        background-color: #e74c3c !important;
+        background-color: #e53e3e !important; /* Red for clear button */
     }
 
     .clear-btn:hover {
-        background-color: #c0392b !important;
+        background-color: #c53030 !important; /* Darker red on hover */
     }
 
     /* Hide footer */
@@ -778,14 +778,14 @@ def create_gradio_interface():
         display: none !important;
     }
     
-    /* Fix scrollbar */
+    /* Scrollbar styling */
     ::-webkit-scrollbar {
         width: 8px;
-        background-color: #1a1a1a;
+        background-color: #f5f5f5;
     }
     
     ::-webkit-scrollbar-thumb {
-        background-color: #4a4a4a;
+        background-color: #b0b0b0;
         border-radius: 4px;
     }
     """
@@ -794,7 +794,7 @@ def create_gradio_interface():
         gr.Markdown("# EmotionChat", elem_id="header")
         gr.Markdown("A supportive chatbot that understands how you feel", elem_id="subheader")
         
-        # Chat interface with improved styling
+        # Chat interface
         chatbot_interface = gr.Chatbot(
             elem_id="chatbot",
             show_label=False,
@@ -803,7 +803,7 @@ def create_gradio_interface():
                            "https://em-content.zobj.net/source/microsoft-teams/363/robot_1f916.png"],
         )
         
-        # Input and button row with better styling
+        # Input and button row
         with gr.Row():
             user_input = gr.Textbox(
                 placeholder="Type your message here...",
@@ -820,13 +820,13 @@ def create_gradio_interface():
         # New conversation button
         clear_btn = gr.Button("New Conversation", elem_classes="clear-btn")
         
-        # Set up the event handlers
+        # Event handlers
         submit_btn.click(
             chatbot.process_message,
             inputs=[user_input, chatbot_interface],
             outputs=[chatbot_interface],
         ).then(
-            lambda: "",  # Clear the input box after sending
+            lambda: "",  # Clear input box
             None,
             [user_input],
         )
@@ -836,7 +836,7 @@ def create_gradio_interface():
             inputs=[user_input, chatbot_interface],
             outputs=[chatbot_interface],
         ).then(
-            lambda: "",  # Clear the input box after sending
+            lambda: "",  # Clear input box
             None,
             [user_input],
         )