Update app.py

app.py

@@ -49,7 +49,7 @@ def chatbot(history, query):
     history.append((query, response))
     return history, history
 
-# Custom CSS for a WhatsApp-like mobile view with corrected text display
+# Custom CSS for a WhatsApp-like mobile view with adjusted text size
 custom_css = """
 /* General container styling */
 .gradio-container {
@@ -63,7 +63,7 @@ custom_css = """
 /* Header styling */
 h1 {
     color: #075e54 !important; /* WhatsApp green */
-    font-size: 1.8em !important;
+    font-size: 1.5em !important; /* Reduced header size */
     text-align: center;
     margin: 10px 0;
     text-shadow: none;
@@ -71,7 +71,7 @@ h1 {
 
 p {
     color: #075e54 !important;
-    font-size: 1em !important;
+    font-size: 0.9em !important; /* Reduced subtitle size */
     text-align: center;
     margin-bottom: 10px;
 }
@@ -90,16 +90,15 @@ p {
     flex-direction: column-reverse; /* Bottom-up chat like WhatsApp */
 }
 
-/* Chat bubbles: WhatsApp-style design with corrected text */
+/* Chat bubbles: WhatsApp-style design with reduced text size */
 .chatbot .bubble {
     border-radius: 10px !important;
-    padding: 10px 15px !important;
-    margin: 5px 10px !important;
+    padding: 8px 12px !important; /* Reduced padding */
+    margin: 4px 8px !important; /* Reduced margin */
     max-width: 65% !important;
-    font-size: 0.9em !important;
+    font-size: 0.85em !important; /* Reduced to normal size (approx 14px) */
     word-wrap: break-word !important; /* Ensure text wraps properly */
-    animation: slideIn 0.3s ease-in-out;
-    transition: transform 0.2s ease;
+    line-height: 1.3 !important; /* Adjusted for readability */
     color: #000 !important; /* Ensure text is visible */
 }
 
@@ -124,7 +123,7 @@ p {
     width: 100% !important;
     max-width: 100% !important;
     background: #f0f0f0 !important; /* Light gray for input area */
-    padding: 10px !important;
+    padding: 8px !important; /* Reduced padding */
     box-shadow: 0 -2px 5px rgba(0,0,0,0.1) !important;
     z-index: 1000 !important;
     display: flex !important;
@@ -135,16 +134,17 @@ p {
 input[type="text"] {
     border: 1px solid #ccc !important;
     border-radius: 20px !important;
-    padding: 10px 15px !important;
-    font-size: 0.9em !important;
+    padding: 8px 12px !important; /* Reduced padding */
+    font-size: 0.85em !important; /* Reduced to normal size */
     box-shadow: none !important;
     flex-grow: 1 !important;
-    margin-right: 10px !important;
+    margin-right: 8px !important; /* Reduced margin */
     color: #000 !important; /* Ensure text is visible */
 }
 
 input[type="text"]::placeholder {
     color: #757575 !important; /* Gray placeholder like WhatsApp */
+    font-size: 0.85em !important; /* Match textbox size */
 }
 
 input[type="text"]:focus {
@@ -157,10 +157,10 @@ button {
     border-radius: 20px !important;
     background: #075e54 !important; /* WhatsApp green */
     color: white !important; /* Ensure text is visible */
-    padding: 12px 25px !important; /* Larger size */
-    font-size: 0.9em !important;
+    padding: 10px 20px !important; /* Adjusted for balance */
+    font-size: 0.85em !important; /* Reduced to normal size */
     border: none !important;
-    min-width: 100px !important;
+    min-width: 90px !important; /* Slightly reduced */
     transition: background 0.3s ease !important;
     text-align: center !important; /* Center text */
 }
@@ -172,10 +172,10 @@ button:hover {
 /* Clear button: Reduced size and WhatsApp-like placement */
 button[aria-label="Clear Chat"] {
     background: #e0e0e0 !important;
-    padding: 8px 15px !important;
+    padding: 6px 12px !important; /* Further reduced */
     font-size: 0.8em !important;
-    min-width: 80px !important;
-    margin-top: 10px !important;
+    min-width: 70px !important; /* Further reduced */
+    margin-top: 8px !important;
     align-self: center !important;
     color: #000 !important; /* Ensure text is visible */
 }
@@ -223,10 +223,10 @@ button[aria-label="Clear Chat"]:hover {
         padding: 5px !important;
     }
     input[type="text"] {
-        padding: 8px 12px !important;
+        padding: 6px 10px !important;
     }
     button {
-        padding: 10px 20px !important;
+        padding: 8px 18px !important;
     }
 }
 """