Update UI

app.py

@@ -72,11 +72,20 @@ def handle_conversation_turn(user_input: str, user_image: Image.Image, history:
         print(f"An exception occurred during conversation turn: {type(e).__name__}: {e}")
         yield history, history
 
-# --- UI MODIFICATION: Final CSS for a white background and professional look ---
+# --- UI MODIFICATION: Final CSS for a clean, white background ---
 css = """
-/* Main App Styling */
-gradio-app { background-color: #ffffff !important; }
-#chat-container { background: transparent; flex-grow: 1; overflow-y: auto; padding-bottom: 200px !important; }
+/* Set a base background for the overall app if needed */
+.gradio-container { background-color: #f9fafb !important; }
+/* THIS IS THE KEY FIX: Target the chat container directly for a white background */
+#chat-container {
+    background-color: #ffffff !important;
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    margin-bottom: 120px !important; /* Space for the sticky footer */
+}
 /* Chat Bubble Styling */
 .user > .message-bubble-row .message-bubble { background-color: #dbeafe !important; color: #1f2937 !important; border-top-right-radius: 5px !important; }
 .bot > .message-bubble-row .message-bubble  { background-color: #f3f4f6 !important; color: #1f2937 !important; border-top-left-radius: 5px !important; }
@@ -89,10 +98,10 @@ gradio-app { background-color: #ffffff !important; }
 }
 /* Text Input Box Styling */
 #user-textbox textarea {
-    background-color: #ffffff !important;
+    background-color: #f9fafb !important;
     border: 1px solid #d1d5db !important;
     border-radius: 10px !important;
-    color: #111827 !important; /* Darker input text */
+    color: #111827 !important;
 }
 /* Icon Button General Styling */
 .icon-btn {
@@ -105,12 +114,15 @@ gradio-app { background-color: #ffffff !important; }
 #upload-btn, #send-btn { background-color: #3b82f6 !important; color: white !important; }
 """
 
-with gr.Blocks(theme=gr.themes.Base(), title="AI Doctor Consultation", css=css) as demo:
+# Reverting to gr.themes.Soft() for a reliable light theme foundation
+with gr.Blocks(theme=gr.themes.Soft(), title="AI Doctor Consultation", css=css) as demo:
     conversation_history = gr.State([])
 
+    # The main content area now has the specific ID for styling.
     with gr.Column(elem_id="chat-container"):
-        chatbot_display = gr.Chatbot(label="Consultation", show_copy_button=True, bubble_full_width=False, avatar_images=("./images/user.png", "./images/bot.png"))
+        chatbot_display = gr.Chatbot(elem_id="chatbot", label="Consultation", show_copy_button=True, bubble_full_width=False, avatar_images=("./images/user.png", "./images/bot.png"))
 
+    # The sticky footer for inputs
     with gr.Column(elem_id="footer-container"):
         with gr.Row():
             image_preview = gr.Image(type="pil", height=60, width=60, visible=False, show_label=False, container=False, scale=1)