Update app.py

app.py

@@ -157,6 +157,7 @@ css = """
 .gradio-container {
     max-width: 800px !important;
     margin: auto !important;
+    background-color: #1a1a2e !important; /* Dark background for contrast */
 }
 .message.user {
     background-color: #e3f2fd !important;
@@ -165,19 +166,29 @@ css = """
     color: #1e1e1e !important; /* Dark text for user messages */
 }
 .message.bot {
-    background-color: #f5f5f5 !important;
+    background-color: #d1d1d1 !important; /* Slightly darker gray for bot messages */
     border-radius: 15px !important;
     padding: 10px !important;
     color: #1e1e1e !important; /* Dark text for bot messages */
 }
+.chatbot .message {
+    color: #1e1e1e !important; /* Ensure all messages use dark text */
+}
 .input-container {
     background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
     border-radius: 25px !important;
 }
+.input-container input {
+    color: #ffffff !important; /* White text for input field */
+    background: transparent !important;
+}
+.gradio-chatbot {
+    background-color: #16213e !important; /* Darker chat area background */
+}
 """
 
 # Create the Gradio interface
-with gr.Blocks(css=css, title="Simple Nepali Chatbot", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=css, title="Simple Nepali Chatbot", theme=gr.themes.Default()) as demo:
     
     gr.HTML("""
     <div style="text-align: center; padding: 20px;">
@@ -191,7 +202,7 @@ with gr.Blocks(css=css, title="Simple Nepali Chatbot", theme=gr.themes.Soft()) a
     """)
     
     chatbot_ui = gr.Chatbot(
-        value=[["नमस्ते! Hello!", "नमस्ते! तपाईंलाई स्वागत छ! Hello and welcome! How can I help you today? तपाईंलाई कसरी मद्दत गर्न सक्छु?"]],
+        value=None,  # Removed initial message to avoid pre-rendered style issues
         height=400,
         show_label=False,
         container=True,
@@ -246,7 +257,7 @@ with gr.Blocks(css=css, title="Simple Nepali Chatbot", theme=gr.themes.Soft()) a
     )
     
     gr.HTML("""
-    <div style="text-align: center; margin-top: 20px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
+    <div style="text-align: center; margin-top: 20px; padding: 20px; background: #16213e; border-radius: 10px; color: #ffffff;">
         <h3>📝 About this Chatbot</h3>
         <p>This is a simple rule-based chatbot that responds in both Nepali and English.</p>
         <p><strong>यो एक सरल नियम-आधारित च्याटबोट हो जसले नेपाली र अंग्रेजी दुवैमा जवाफ दिन्छ।</strong></p>