Update app.py

app.py

@@ -64,28 +64,27 @@ def display_saved_chats():
 chat_interface = gr.Blocks(css="""
 body {
     font-family: 'Poppins', sans-serif;
-    background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd, #c2e9fb);
-    background-size: 400% 400%;
-    animation: gradientBG 10s ease infinite;
+    background: linear-gradient(120deg, #000000, #1c1c1c);
+    color: #ffffff;
     margin: 0;
     padding: 0;
-    color: #333;
+    animation: gradientBG 12s ease infinite;
 }
 
 @keyframes gradientBG {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+    0% { background-color: #1c1c1c; }
+    50% { background-color: #000000; }
+    100% { background-color: #1c1c1c; }
 }
 
 header, footer {
     text-align: center;
-    background: linear-gradient(90deg, #ff758c, #ff7eb3);
+    background: linear-gradient(90deg, #6a11cb, #2575fc);
     color: white;
     padding: 1rem;
     border-radius: 15px;
     margin-bottom: 1rem;
-    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
 }
 
 .chatbot-container {
@@ -93,11 +92,11 @@ header, footer {
     flex-direction: column;
     justify-content: space-between;
     border-radius: 15px;
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(50, 50, 50, 0.8);
     padding: 1rem;
     height: 400px;
     overflow-y: auto;
-    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
 }
 
 input, button {
@@ -109,13 +108,13 @@ input, button {
 }
 
 input {
-    background: #fff;
-    color: #ffffff;
+    background: #222;
+    color: #fff;
     font-size: 1rem;
 }
 
 button {
-    background: linear-gradient(90deg, #6a11cb, #2575fc);
+    background: linear-gradient(90deg, #ff6a95, #ff4b81);
     color: white;
     font-weight: bold;
     cursor: pointer;
@@ -124,27 +123,36 @@ button {
 
 button:hover {
     transform: scale(1.05);
-    background: linear-gradient(90deg, #2575fc, #6a11cb);
+    background: linear-gradient(90deg, #ff4b81, #ff6a95);
 }
 
 .chat-category {
-    background: rgba(0, 0, 0, 0.05);
-    border: 2px solid #ff7eb3;
+    background: rgba(40, 40, 40, 0.8);
+    border: 2px solid #6a11cb;
     margin: 1rem 0;
     padding: 1rem;
     border-radius: 10px;
     transition: transform 0.2s, box-shadow 0.2s;
+    color: #fff;
 }
 
 .chat-category:hover {
     transform: translateY(-3px);
-    box-shadow: 0px 4px 15px rgba(255, 127, 179, 0.5);
+    box-shadow: 0px 4px 15px rgba(106, 17, 203, 0.8);
+}
+
+h1, h3 {
+    color: #ffffff;
+}
+
+p {
+    color: #b3b3b3;
 }
 """)
 
 with chat_interface:
     with gr.Row():
-        gr.Markdown("<h1 style='text-align:center;'>🌈 Vibrant Motivational Chatbot</h1>")
+        gr.Markdown("<h1 style='text-align:center;'>🌌 Dark-Themed Motivational Chatbot</h1>")
     with gr.Row():
         gr.Markdown("**Feeling stressed or unmotivated? Share your thoughts and let me help!**")
     with gr.Row():