Update app.py

app.py

@@ -103,17 +103,17 @@ body {
 button {
     background: linear-gradient(90deg, #6a11cb, #2575fc);
     color: white;
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
+    padding: 0.5rem 1rem; /* Smaller button padding */
+    font-size: 0.9rem; /* Smaller button text */
     font-weight: bold;
-    border-radius: 20px;
+    border-radius: 15px; /* Slightly smaller border radius */
     border: none;
     cursor: pointer;
     transition: transform 0.2s ease, background 0.2s ease;
 }
 button:hover {
     background: linear-gradient(90deg, #2575fc, #6a11cb);
-    transform: scale(1.1);
+    transform: scale(1.05); /* Smaller hover effect */
 }
 header {
     text-align: center;
@@ -126,18 +126,31 @@ header {
 }
 .chat-container {
     border: 2px solid #ff7eb3;
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.9); /* Slightly higher contrast for readability */
     border-radius: 15px;
-    padding: 15px;
+    padding: 20px; /* Slightly larger padding for better spacing */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    max-height: 300px;
+    max-height: 400px; /* Increased height to show more history */
     overflow-y: auto;
-    width: 80%; /* Adjusted width to make it wider */
+    width: 80%; /* Wider container */
     margin: 0 auto; /* Center the container */
+    font-size: 1rem; /* Larger font for readability */
+    line-height: 1.5; /* Improved line spacing for easier reading */
+}
+.chat-container p {
+    margin: 0 0 10px; /* Spacing between messages */
+}
+.chat-container .user-message {
+    color: #2575fc; /* Highlight user messages in blue */
+    font-weight: bold;
+}
+.chat-container .bot-response {
+    color: #6a11cb; /* Highlight bot responses in purple */
 }
 """)
 
 
+
 with chat_interface:
     with gr.Row():
         gr.Markdown("<h1 style='text-align:center;'>🌟 Vibrant Personal Assistant Chatbot 🌈</h1>")