Update app.py

app.py

@@ -249,74 +249,65 @@ def handle_user_interaction(
         app_tabs_update,
         documentation_update,
     )
+# --- NEW AESTHETIC CSS ---
 custom_css = """
 /* --- Overall Page & Theme --- */
 .gradio-container {
-    background: #F9FAFB; /* Soft off-white/light gray background */
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
-    padding-top: 0 !important; /* Remove top padding to let header be flush */
+    background-color: #F9FAFB; /* Light mode background */
 }
-
-/* --- Hero Header Section --- */
-#app-header-container {
-    background: white;
-    border-bottom: 1px solid #E5E7EB;
-    padding: 1.5rem 2rem !important;
-    margin-bottom: 1.5rem !important;
+.dark .gradio-container {
+    background-color: #111827; /* Dark mode background */
 }
-#app-header h1 {
-    text-align: center;
-    font-size: 2.25rem !important;
-    font-weight: 800 !important;
-    color: #1F2937; /* Very dark gray for high contrast */
-    margin-bottom: 0.5rem !important;
+
+/* --- Collapsible Header Section --- */
+#app-header {
+    color: #374151; /* Light mode text */
 }
-#app-header p {
-    text-align: center;
-    font-size: 1.1rem !important;
-    color: #4B5563; /* Softer gray for subtitle */
-    margin-bottom: 0 !important;
+.dark #app-header {
+    color: #D1D5DB; /* Dark mode text */
 }
 
 /* --- Main Application Tabs --- */
 #app-tabs .tab-nav button {
-    font-size: 1.1rem !important;
-    font-weight: 600 !important;
-    border-radius: 8px 8px 0 0 !important;
-    border-bottom: 3px solid transparent !important;
-    transition: all 0.2s ease-in-out;
-    background: transparent !important;
+    background-color: transparent !important;
+    border-bottom: 2px solid transparent !important;
 }
 #app-tabs .tab-nav button.selected {
-    border-bottom-color: #4F46E5 !important; /* A strong indigo accent color */
-    background: white !important;
+    border-bottom-color: #4F46E5 !important; /* Accent color */
     color: #4F46E5 !important;
 }
-
-/* --- Compact & Styled Buttons --- */
-.sm-button {
-    min-width: 0 !important;
-    padding: 0.2rem 0.6rem !important;
-    height: 34px !important;
-    line-height: 1 !important;
-    align-self: center !important;
-    margin: 0 !important;
-    border-radius: 8px !important;
-    border: 1px solid #D1D5DB !important;
-    background: white !important;
-    color: #4B5563 !important;
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
-    transition: background-color 0.2s ease;
+.dark #app-tabs .tab-nav button {
+    color: #9CA3AF;
+}
+.dark #app-tabs .tab-nav button.selected {
+    background-color: #1F2937 !important; /* Darker tab background */
+    color: #A5B4FC !important;
+    border-bottom-color: #A5B4FC !important;
 }
-.sm-button:hover { background: #F9FAFB !important; }
 
-/* --- Chat Interface Polish --- */
-.chat-input-row { margin-top: 10px; }
+/* --- FIX FOR CHATBOT APPEARANCE AND SPACING --- */
 #chatbot {
-    min-height: 600px;
-    box-shadow: none !important;
+    background-color: white !important; /* Distinct white background for chatbot */
     border: 1px solid #E5E7EB !important;
-    background-color: white !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
+    margin-bottom: 0 !important; /* Remove bottom margin to close the gap */
+}
+.dark #chatbot {
+    background-color: #1F2937 !important; /* Dark but distinct background */
+    border: 1px solid #374151 !important;
+}
+
+/* FIX: Target the input row to remove the top margin, closing the gap */
+.chat-input-container {
+    padding-top: 1rem !important;
+}
+
+/* --- Compact & Styled Buttons (already good, no changes needed) --- */
+.sm-button {
+    min-width: 0 !important;
+    padding: 0.2rem 0.6rem !important;
+    /* ... other styles */
 }
 """
 # --- Gradio UI Definition ---
@@ -365,13 +356,13 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="AI Syllabus Archit
                     chatbot = gr.Chatbot(initial_chat_ui, elem_id="chatbot", type="messages", show_label=False, render_markdown=True, avatar_images=(None, "https://i.imgur.com/3pyR0Vf.png"), latex_delimiters=[{"left": "$$", "right": "$$", "display": True}, {"left": "$", "right": "$", "display": False}])
                     with gr.Row(elem_classes="chat-input-row"):
                         looks_good_btn = gr.Button("looks good", size="sm", visible=False)
-                    with gr.Row():
+                    with gr.Row(elem_classes="chat-input-container"):
                         user_input_textbox = gr.Textbox(scale=4, show_label=False, placeholder="Type your message or upload files and press Enter...", container=False)
                         send_button = gr.Button("Send", variant="primary", scale=1, min_width=150)
                 
                 # --- TOOLS SIDEBAR COLUMN (Correctly nested inside the Chat Tab's Row) ---
                 with gr.Column(scale=3, visible=True) as tools_sidebar:
-                    close_sidebar_btn = gr.Button("Close Sidebar ➡️", elem_classes="sm-button")
+                    close_sidebar_btn = gr.Button("⬅️ Close Sidebar", elem_classes="sm-button")
                     with gr.Accordion("🛠️ Session Content", open=True):
                         gr.Markdown("### 📄 Resources")
                         file_uploader = gr.File(label="Upload Learning Materials (First Turn Only)", file_count="multiple", file_types=[".pdf", ".docx", ".txt"], interactive=True)