Update app.py

app.py

@@ -92,7 +92,7 @@
 import gradio as gr
 
 
-css = r"""
+css1 = r"""
 #chatbot .user {
   background: linear-gradient(to bottom right, #93c5fd, #60a5fa);
   color: white;
@@ -125,6 +125,60 @@ css = r"""
 }
 
 """
+
+css = """
+#chatbot {
+  background-color: #f7f9fc;
+  border-radius: 10px;
+  padding: 15px;
+  overflow-y: auto;
+}
+
+#chatbot .message {
+  display: flex;
+  margin: 10px 0;
+}
+
+#chatbot .message.user {
+  justify-content: flex-end;
+}
+
+#chatbot .message.bot {
+  justify-content: flex-start;
+}
+
+/* User bubble */
+#chatbot .message.user .bubble {
+  background: linear-gradient(135deg, #4CAF50, #81C784);
+  color: white;
+  border-radius: 16px 16px 0 16px;
+  padding: 10px 15px;
+  max-width: 70%;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+}
+
+/* Bot bubble */
+#chatbot .message.bot .bubble {
+  background: linear-gradient(135deg, #2196F3, #64B5F6);
+  color: white;
+  border-radius: 16px 16px 16px 0;
+  padding: 10px 15px;
+  max-width: 70%;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+}
+
+/* Optional: add smooth fade-in animation */
+@keyframes bubblePop {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+#chatbot .bubble {
+  animation: bubblePop 0.2s ease-out;
+}
+"""
+
+
 def respond(message, history):
     return f"BubbleBot says: {message}"