Update app.py

app.py

@@ -270,8 +270,8 @@ h1 {
 }
 
 textarea, input {
-    background: white; /* Input background */
-    color: black;
+    background: #3c6487; /* Darker background for input boxes */
+    color: white; /* White text for better contrast */
     border: 2px solid #3c6487; /* Matching border color */
     padding: 10px;
     font-size: 1rem;
@@ -280,9 +280,13 @@ textarea, input {
 }
 
 .gr-button {
-    background-color: #ae1c93; /* Set the button color */
+    background-color: #ae1c93; /* Button color */
     color: white;
     border-radius: 8px;
+    padding: 10px 20px; /* Improved padding */
+    font-size: 16px; /* Larger font size for buttons */
+    border: none; /* No border */
+    cursor: pointer; /* Pointer on hover */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
 }
 
@@ -295,28 +299,53 @@ textarea, input {
 }
 
 .df-container {
-    background: white;
-    color: black;
-    border: 2px solid #3c6487; /* Matching border color for data frames */
+    background: white; /* Background for data frames */
+    color: black; /* Text color */
+    border: 2px solid #3c6487; /* Matching border color */
     border-radius: 10px;
     padding: 10px;
     font-size: 14px;
-    max-height: 400px;
-    height: auto;
-    overflow-y: auto;
+    max-height: 400px; /* Maximum height for scrolling */
+    overflow-y: auto; /* Enable scrolling */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for data frame */
 }
+
+/* Suggestions Markdown Formatting */
+.markdown {
+    padding: 15px; /* Padding for Markdown sections */
+    border-radius: 10px; /* Round corners for better appearance */
+    background-color: #eaeff1; /* Light background for suggestions */
+    border: 1px solid #3c6487; /* Border to distinguish */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
+}
+
+@media (max-width: 768px) {
+    h1 {
+        font-size: 1.5rem; /* Adjusted font size for smaller screens */
+        padding: 10px;
+    }
+
+    .gr-button {
+        font-size: 0.9rem; /* Slightly smaller button font */
+        padding: 8px 16px; /* Adjust padding for mobile */
+    }
+
+    textarea, input {
+        width: 100%; /* Full width for inputs */
+        margin-bottom: 10px; /* Spacing between inputs */
+    }
+}
 """
 
 # Gradio Application Interface
 with gr.Blocks(css=custom_css) as app:
     gr.HTML("<h1>🌟 Well-Being Companion</h1>")
     
-    with gr.Tab("Well-Being Chatbot"):
+    with gr.Tab("Mental Health Chatbot"):
         with gr.Row():
             user_input = gr.Textbox(label="Please Enter Your Message Here", placeholder="Type your message here...", max_lines=3)
-            location = gr.Textbox(label="Please Enter Your Current Location Here", placeholder="E.g., Honolulu", max_lines=1)
-            query = gr.Textbox(label="Please Enter Which Health Professional You Want To Search Nearby", placeholder="E.g., Health Professionals", max_lines=1)
+            location = gr.Textbox(label="Please Enter Your Current Location Here", placeholder="E.g., Karachi", max_lines=1)
+            query = gr.Textbox(label="Please Enter Which Health Professional You Want To Search Nearby", placeholder="E.g., Doctors", max_lines=1)
         
         submit_chatbot = gr.Button(value="Submit Your Message", variant="primary", elem_id="submit-chatbot", icon="fa-paper-plane")