Update app.py

app.py

@@ -102,64 +102,90 @@ def clear_memory():
         os.remove(MEMORY_FILE)
     return [], "🧹 Memory cleared! Start fresh."
 
-# 🎨 Custom CSS for modern look
+# 🎨 Dark theme CSS
 custom_css = """
 body {
-    background: linear-gradient(135deg, #f0e7ff 0%, #e8e0ff 50%, #f3e9ff 100%);
+    background-color: #0f0f12;
+    color: #f0f0f0;
     font-family: 'Inter', sans-serif;
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
 }
+
 .gradio-container {
-    background: transparent !important;
+    background-color: #0f0f12 !important;
 }
-#eduai-main {
+
+#eduai-layout {
     display: flex;
     flex-direction: row;
-    gap: 20px;
-    margin-top: 15px;
+    height: 100vh;
+    overflow: hidden;
 }
+
+/* Sidebar */
 .sidebar {
-    background: #ffffffdd;
-    border-radius: 20px;
-    padding: 18px;
-    box-shadow: 0 4px 20px rgba(100, 0, 200, 0.1);
+    background-color: #18181c;
+    color: #e0e0e0;
     width: 270px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #2c2c2f;
 }
+
+/* Chat Area */
 .chat-area {
-    background: #ffffff;
-    border-radius: 20px;
+    background-color: #111113;
     flex-grow: 1;
-    box-shadow: 0 4px 25px rgba(120, 0, 180, 0.15);
     display: flex;
     flex-direction: column;
-    padding: 15px 20px 20px 20px;
+    justify-content: space-between;
+    padding: 10px 20px 20px 20px;
 }
+
 .chat-header {
     text-align: center;
     font-size: 1.6em;
     font-weight: 700;
-    color: #5b21b6;
-    margin-bottom: 10px;
+    color: #a78bfa;
+    padding: 15px;
+    border-bottom: 1px solid #2c2c2f;
 }
-textarea, input, button {
-    border-radius: 12px !important;
+
+textarea, input {
+    background-color: #1e1e22 !important;
+    color: #f0f0f0 !important;
+    border-radius: 10px !important;
+    border: 1px solid #3a3a3d !important;
 }
+
 button {
     background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
     color: white !important;
+    border-radius: 10px !important;
     border: none !important;
     transition: 0.2s ease-in-out;
 }
+
 button:hover {
     transform: scale(1.05);
+    filter: brightness(1.2);
+}
+
+/* Chatbot bubble style */
+.chatbot > div {
+    background-color: #1a1a1d !important;
+    border-radius: 12px;
 }
 """
 
 # 🚀 Interface
 with gr.Blocks(css=custom_css) as iface:
-    gr.Markdown("<div class='chat-header'>🎓 EduAI — Your Smart Study Companion</div>")
-
-    with gr.Row(elem_id="eduai-main"):
+    with gr.Row(elem_id="eduai-layout"):
         with gr.Column(elem_classes=["sidebar"]):
+            gr.Markdown("## 🎓 EduAI")
             gr.Markdown("### 🧭 Main Menu")
 
             with gr.Accordion("📚 Subject Tutor", open=False):
@@ -185,20 +211,21 @@ with gr.Blocks(css=custom_css) as iface:
 
             gr.Markdown(
                 "👩‍🎓 **About EduAI**  \n"
-                "Created by **Wafa Fazly** — a passionate Sri Lankan student 🇱🇰  \n"
-                "EduAI helps learners explore **Science, ICT, English**, and more 🌟"
+                "Developed by **Wafa Fazly**, a passionate Sri Lankan student 🇱🇰  \n"
+                "EduAI helps students explore **Science, ICT, English**, and more 🌟"
             )
 
         with gr.Column(elem_classes=["chat-area"]):
+            gr.Markdown("<div class='chat-header'>💬 EduAI — Smart Study Assistant</div>")
             context_display = gr.Markdown("📘 **You are in General Mode.** Ask EduAI anything!")
             chatbot = gr.Chatbot(
                 label="",
-                height=450,
-                bubble_full_width=False,
-                render_markdown=True
+                height=460,
+                render_markdown=True,
+                bubble_full_width=False
             )
             msg = gr.Textbox(
-                placeholder="💬 Type your question here...",
+                placeholder="💭 Type your question here...",
                 show_label=False
             )
             send = gr.Button("✨ Send Message")