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
+# Custom CSS for a WhatsApp-like mobile view with corrected text display
 custom_css = """
 /* General container styling */
 .gradio-container {
@@ -90,25 +90,22 @@ p {
     flex-direction: column-reverse; /* Bottom-up chat like WhatsApp */
 }
 
-/* Chat bubbles: WhatsApp-style design */
+/* Chat bubbles: WhatsApp-style design with corrected text */
 .chatbot .bubble {
     border-radius: 10px !important;
     padding: 10px 15px !important;
     margin: 5px 10px !important;
     max-width: 65% !important;
     font-size: 0.9em !important;
+    word-wrap: break-word !important; /* Ensure text wraps properly */
     animation: slideIn 0.3s ease-in-out;
     transition: transform 0.2s ease;
-}
-
-.chatbot .bubble:hover {
-    transform: scale(1.01);
+    color: #000 !important; /* Ensure text is visible */
 }
 
 /* User bubble: Right-aligned, green like WhatsApp sender */
 .chatbot .bubble:nth-child(odd) {
     background: #dcf8c6 !important; /* WhatsApp sender bubble color */
-    color: #000 !important;
     margin-left: auto !important;
     align-self: flex-end !important;
 }
@@ -116,7 +113,6 @@ p {
 /* Bot bubble: Left-aligned, light gray like WhatsApp receiver */
 .chatbot .bubble:nth-child(even) {
     background: #fff !important; /* WhatsApp receiver bubble color */
-    color: #000 !important;
     margin-right: auto !important;
     align-self: flex-start !important;
 }
@@ -135,7 +131,7 @@ p {
     align-items: center !important;
 }
 
-/* Textbox styling: Compact and WhatsApp-like */
+/* Textbox styling: Compact and WhatsApp-like with correct placeholder */
 input[type="text"] {
     border: 1px solid #ccc !important;
     border-radius: 20px !important;
@@ -144,6 +140,11 @@ input[type="text"] {
     box-shadow: none !important;
     flex-grow: 1 !important;
     margin-right: 10px !important;
+    color: #000 !important; /* Ensure text is visible */
+}
+
+input[type="text"]::placeholder {
+    color: #757575 !important; /* Gray placeholder like WhatsApp */
 }
 
 input[type="text"]:focus {
@@ -155,12 +156,13 @@ input[type="text"]:focus {
 button {
     border-radius: 20px !important;
     background: #075e54 !important; /* WhatsApp green */
-    color: white !important;
+    color: white !important; /* Ensure text is visible */
     padding: 12px 25px !important; /* Larger size */
     font-size: 0.9em !important;
     border: none !important;
     min-width: 100px !important;
     transition: background 0.3s ease !important;
+    text-align: center !important; /* Center text */
 }
 
 button:hover {
@@ -175,6 +177,7 @@ button[aria-label="Clear Chat"] {
     min-width: 80px !important;
     margin-top: 10px !important;
     align-self: center !important;
+    color: #000 !important; /* Ensure text is visible */
 }
 
 button[aria-label="Clear Chat"]:hover {
@@ -211,7 +214,7 @@ button[aria-label="Clear Chat"]:hover {
     background: #054d44;
 }
 
-/* Mobile-specific adjustments (already optimized, but ensuring consistency) */
+/* Mobile-specific adjustments */
 @media (max-width: 768px) {
     .chatbot {
         height: 80vh !important;