Update app.py

app.py

@@ -49,21 +49,21 @@ def chatbot(history, query):
     history.append((query, response))
     return history, history
 
-# Custom CSS for a normal chatbot visual design
+# Custom CSS for a normal chatbot visual design with adjusted bubbles
 custom_css = """
 /* General container styling */
 .gradio-container {
     font-family: 'Arial', sans-serif;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Neutral gradient */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     min-height: 100vh;
     padding: 0;
     margin: 0;
-    font-size: 14px; /* Base font size */
+    font-size: 14px;
 }
 
 /* Header styling */
 h1 {
-    color: #2c3e50 !important; /* Dark blue for professionalism */
+    color: #2c3e50 !important;
     font-size: 24px !important;
     text-align: center;
     margin: 15px 0;
@@ -71,7 +71,7 @@ h1 {
 }
 
 p {
-    color: #34495e !important; /* Slightly lighter blue */
+    color: #34495e !important;
     font-size: 14px !important;
     text-align: center;
     margin-bottom: 15px;
@@ -85,36 +85,39 @@ p {
     padding: 10px !important;
     max-width: 800px !important;
     margin: 0 auto !important;
-    height: 70vh !important; /* Adjusted for normal view */
+    height: 70vh !important;
     overflow-y: auto !important;
-    display: block; /* Reset to default flow */
+    display: block;
+    box-sizing: border-box !important; /* Ensure consistent sizing */
 }
 
-/* Chat bubbles: Normal design */
+/* Chat bubbles: Normal design without border */
 .chatbot .bubble {
+    border: none !important; /* Explicitly remove border */
     border-radius: 8px !important;
-    padding: 8px 12px !important;
+    padding: 6px 10px !important; /* Reduced padding */
     margin: 5px 0 !important;
     max-width: 70% !important;
-    font-size: 14px !important; /* Normal text size */
-    min-height: 30px !important; /* Controlled minimum height */
-    min-width: 60px !important; /* Controlled minimum width */
+    font-size: 14px !important;
+    min-height: 20px !important; /* Reduced minimum height */
+    min-width: 50px !important; /* Reduced minimum width */
     word-wrap: break-word !important;
-    line-height: 1.4 !important; /* Readable line spacing */
-    color: #2c3e50 !important; /* Consistent text color */
+    line-height: 1.4 !important;
+    color: #2c3e50 !important;
+    box-sizing: border-box !important; /* Include padding in size */
 }
 
 /* User bubble: Right-aligned, light blue */
 .chatbot .bubble:nth-child(odd) {
-    background: #3498db !important; /* Light blue for user */
-    color: #ffffff !important; /* White text for contrast */
+    background: #3498db !important;
+    color: #ffffff !important;
     margin-left: auto !important;
     align-self: flex-end !important;
 }
 
 /* Bot bubble: Left-aligned, light gray */
 .chatbot .bubble:nth-child(even) {
-    background: #ecf0f1 !important; /* Light gray for bot */
+    background: #ecf0f1 !important;
     margin-right: auto !important;
     align-self: flex-start !important;
 }
@@ -128,6 +131,7 @@ p {
     display: flex !important;
     align-items: center !important;
     background: transparent !important;
+    box-sizing: border-box !important;
 }
 
 /* Textbox styling */
@@ -140,10 +144,11 @@ input[type="text"] {
     flex-grow: 1 !important;
     margin-right: 10px !important;
     color: #2c3e50 !important;
+    box-sizing: border-box !important;
 }
 
 input[type="text"]::placeholder {
-    color: #7f8c8d !important; /* Gray placeholder */
+    color: #7f8c8d !important;
     font-size: 14px !important;
 }
 
@@ -155,7 +160,7 @@ input[type="text"]:focus {
 /* Send button */
 button {
     border-radius: 4px !important;
-    background: #3498db !important; /* Matching user bubble */
+    background: #3498db !important;
     color: white !important;
     padding: 8px 20px !important;
     font-size: 14px !important;
@@ -163,6 +168,7 @@ button {
     min-width: 80px !important;
     transition: background 0.3s ease !important;
     text-align: center !important;
+    box-sizing: border-box !important;
 }
 
 button:hover {
@@ -171,13 +177,14 @@ button:hover {
 
 /* Clear button */
 button[aria-label="Clear Chat"] {
-    background: #bdc3c7 !important; /* Silver gray */
+    background: #bdc3c7 !important;
     padding: 6px 15px !important;
     font-size: 14px !important;
     min-width: 90px !important;
     margin-top: 10px !important;
     align-self: center !important;
     color: #ffffff !important;
+    box-sizing: border-box !important;
 }
 
 button[aria-label="Clear Chat"]:hover {
@@ -206,7 +213,7 @@ button[aria-label="Clear Chat"]:hover {
 @media (max-width: 768px) {
     .chatbot {
         max-width: 100% !important;
-        height: 65vh !important; /* Adjusted for mobile */
+        height: 65vh !important;
         margin: 0 !important;
     }
     .gradio-row:last-child {