Update UI for full-width display on big screens with responsive design

gradio_app.py

@@ -148,26 +148,42 @@ model_thread.start()
 # Custom CSS for ChatGPT-like appearance
 css = """
 .gradio-container {
-    max-width: 1200px !important;
-    margin: auto !important;
+    max-width: 100%; width: 100% !important;
+    margin: 0; padding: 20px !important;
 }
 #chatbot {
-    height: 600px !important;
+    height: 70vh; min-height: 600px !important;
     overflow-y: auto !important;
 }
 .message {
-    padding: 10px !important;
+    padding: 12px 16px !important;
     margin: 5px 0 !important;
-    border-radius: 10px !important;
+    border-radius: 12px; max-width: 85%; word-wrap: break-word !important;
 }
 .user {
     background-color: #dcf8c6 !important;
-    margin-left: 20% !important;
+    margin-left: auto; margin-right: 0 !important;
 }
 .bot {
     background-color: #f1f1f1 !important;
-    margin-right: 20% !important;
+    margin-left: 0; margin-right: auto !important;
+}/* Responsive design for larger screens */
+@media (min-width: 1400px) {
+    .gradio-container {
+        padding: 40px !important;
+    }
+    #chatbot {
+        height: 75vh !important;
+    }
 }
+@media (min-width: 1800px) {
+    .gradio-container {
+        padding: 60px !important;
+    }
+    #chatbot {
+        height: 80vh !important;
+    }
+}}
 """
 
 # Create Gradio interface