Update app.py

app.py

@@ -313,8 +313,86 @@ custom_css = """
     margin-bottom: 10px !important;
 }
 
-.gradio-container-5-4
+.gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
+    background-color: #a69189 !important;
+    color: #120f0e !important;
+    border-radius: 8px !important;
+    padding: 12px 16px !important;
+    border: 1pt solid #59524f !important;
+    max-width: 70%;
+    margin-left: auto;
+    margin-right: 0;
+    word-wrap: break-word;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+}
+
+/* Input controls styling */
+.input-controls {
+    padding: 15px 20px !important;
+    background-color: rgb(240, 236, 230) !important;
+    border-top: 1pt solid #59524f;
+    flex-shrink: 0 !important;
+}
+
+.input-textbox textarea {
+    background-color: #f0ece6 !important;
+    border: 1pt solid #59524f !important;
+    border-radius: 6px !important;
+    color: #120f0e !important;
+    font-family: "Oswald", sans-serif !important;
+    padding: 10px !important;
+    resize: none !important;
+}
+
+.input-textbox textarea:focus {
+    border-color: #f09c7d !important;
+    box-shadow: 0 0 0 2px rgba(240, 156, 125, 0.2) !important;
+}
+
+.button-column {
+    margin-left: 10px !important;
+    min-width: 80px !important;
+}
+
+.send-button, .clear-button {
+    background-color: #f09c7d !important;
+    color: #120f0e !important;
+    border: 1pt solid #59524f !important;
+    border-radius: 6px !important;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 500 !important;
+    padding: 8px 16px !important;
+    margin-bottom: 5px !important;
+    width: 100% !important;
+}
 
+.send-button:hover, .clear-button:hover {
+    background-color: #e8895a !important;
+    border-color: #4a3f3c !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown,
+    .gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
+        max-width: 85%;
+    }
+    
+    .input-controls {
+        padding: 10px !important;
+    }
+    
+    .title-header {
+        padding: 8px 15px !important;
+        height: 50px !important;
+    }
+    
+    .title-header h1 {
+        font-size: 1.3rem !important;
+    }
+}
+"""
 
 # --- UI: HTML Head Content ---
 html_head_content = '''