Update app.py

app.py

@@ -393,8 +393,12 @@ custom_css = """
     padding: 20px;
 }
 
-/* Chatbot styling */
-.gradio-chatbot {
+/* Chatbot styling - multiple selectors to ensure it applies */
+.gradio-chatbot,
+.chatbot,
+div[data-testid="chatbot"],
+.gradio-chatbot > div,
+.gradio-chatbot .scroll-hide {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
@@ -402,6 +406,31 @@ custom_css = """
     font-family: "Oswald", sans-serif !important;
 }
 
+/* Force chatbot container background */
+.gradio-chatbot .overflow-y-auto {
+    background-color: #d9d1ce !important;
+}
+
+/* Target the actual chat messages container */
+.gradio-chatbot > div > div {
+    background-color: #d9d1ce !important;
+}
+
+/* Target by element ID */
+#main-chatbot {
+    background-color: #d9d1ce !important;
+}
+
+/* Additional fallback selectors */
+[data-testid="chatbot"] {
+    background-color: #d9d1ce !important;
+}
+
+/* Force all chatbot related elements */
+.gradio-chatbot * {
+    background-color: inherit !important;
+}
+
 /* Message styling - model messages same as send button color */
 .gradio-chatbot .message.bot .markdown {
     background-color: #f09c7d !important;
@@ -617,7 +646,9 @@ def create_interface():
                 show_share_button=False,
                 avatar_images=None,
                 height=880,
-                elem_classes=["chat-container"]
+                elem_classes=["chat-container"],
+                container=True,
+                elem_id="main-chatbot"
             )
         
         # Row 3: Input Section