Update app.py

app.py

@@ -121,8 +121,9 @@ custom_css = """
         font-size: 1.1rem;
         cursor: pointer;
         transition: all 0.3s ease;
-        margin-left: 80px !important;
-        margin-top: -180px;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
     }
     #submit-btn:hover {
         background-color: #0099cc; /* Slightly darker blue */
@@ -130,7 +131,6 @@ custom_css = """
     #submit-btn:active {
         transform: scale(0.95);
     }
-
     /* Clear History Button: Light Red */
     #clear-history {
         background-color: #f04e4e; /* Slightly Darker red */
@@ -141,7 +141,7 @@ custom_css = """
         font-size: 1.1rem;
         cursor: pointer;
         transition: all 0.3s ease;
-        margin-top: -180px;
+        margin-top: 10px;
     }
     #clear-history:hover {
         background-color: #f5a4a4; /* Light red */
@@ -149,7 +149,6 @@ custom_css = """
     #clear-history:active {
         transform: scale(0.95);
     }
-
     /* Chat history styles */
     .gradio-chatbot .message {
         margin-bottom: 10px;
@@ -171,7 +170,6 @@ custom_css = """
         margin-left: auto;
         animation: slideInAssistant 0.5s ease-out;
     }
-
     /* Animation keyframes */
     @keyframes fadeIn {
         0% { opacity: 0; }
@@ -185,6 +183,25 @@ custom_css = """
         0% { transform: translateX(100%); }
         100% { transform: translateX(0); }
     }
+    /* Mobile responsiveness */
+    @media (max-width: 768px) {
+        .gradio-header h1 {
+            font-size: 1.8rem;
+        }
+        .gradio-header h3 {
+            font-size: 1rem;
+        }
+        .gradio-chatbot {
+            max-height: 400px;
+        }
+        .gradio-textbox, .gradio-dropdown, .gradio-image {
+            width: 100%;
+        }
+        #submit-btn, #clear-history {
+            width: 100%;
+            margin-left: 0;
+        }
+    }
 """
 
 # Gradio interface setup