Update app.py

app.py

@@ -250,69 +250,51 @@ def handle_user_interaction(
         documentation_update,
     )
 # --- NEW AESTHETIC CSS ---
+# --- NEW, LAYOUT-FOCUSED CSS ---
+# --- FINAL, CORRECTED CSS ---
 custom_css = """
 /* --- Overall Page & Theme --- */
-.gradio-container {
-    background-color: #F9FAFB; /* Light mode background */
-}
-.dark .gradio-container {
-    background-color: #111827; /* Dark mode background */
-}
-
-/* --- Collapsible Header Section --- */
-#app-header {
-    color: #374151; /* Light mode text */
-}
-.dark #app-header {
-    color: #D1D5DB; /* Dark mode text */
-}
+.gradio-container { background-color: #F9FAFB; }
+.dark .gradio-container { background-color: #111827; }
 
-/* --- Main Application Tabs --- */
-#app-tabs .tab-nav button {
-    background-color: transparent !important;
-    border-bottom: 2px solid transparent !important;
-}
-#app-tabs .tab-nav button.selected {
-    border-bottom-color: #4F46E5 !important; /* Accent color */
-    color: #4F46E5 !important;
-}
-.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;
-}
-
-/* --- FIX FOR CHATBOT APPEARANCE AND SPACING --- */
+/* --- THE KEY FIX: Make the chatbot tall and scrollable --- */
 #chatbot {
-    background-color: white !important; /* Distinct white background for chatbot */
+    /* Use vh (viewport height) to make the chatbot take up most of the screen */
+    min-height: 70vh !important;
+    background-color: white !important; /* Distinct white background */
     border: 1px solid #E5E7EB !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;
+    background-color: #1F2937 !important; /* Distinct dark background for chatbot */
+    border-color: #374151 !important;
 }
 
-/* FIX: Target the input row to remove the top margin, closing the gap */
-.chat-input-container {
-    padding-top: 1rem !important;
-}
+/* --- Input Bar Styling --- */
+/* Add a top margin to the input row to create visual space from the chatbot */
+.chat-input-row { margin-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 */
+/* Style the textbox itself for a clean look */
+#user_input_textbox textarea {
+    background-color: #FFFFFF !important;
+    border: 1px solid #D1D5DB !important;
+    border-radius: 8px !important;
 }
+.dark #user_input_textbox textarea {
+    background-color: #374151 !important;
+    color: #F3F4F6 !important;
+    border-color: #4B5563 !important;
+}
+
+/* --- General styling from before (tabs, small buttons) --- */
+/* (This part remains the same as the version you liked) */
+#app-header { text-align: center; color: #4A5568; margin-bottom: 0.5rem !important; }
+.dark #app-header { color: #D1D5DB; }
+.sm-button { min-width: 0 !important; padding: 0.2rem 0.6rem !important; /* ...etc... */ }
+#app-tabs .tab-nav button.selected { border-bottom-color: #4F46E5 !important; color: #4F46E5 !important; }
+.dark #app-tabs .tab-nav button.selected { border-bottom-color: #A5B4FC !important; color: #A5B4FC !important; }
 """
 # --- Gradio UI Definition ---
-# --- Gradio UI Definition ---
-# --- Gradio UI Definition ---
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="AI Syllabus Architect") as demo:
     
     # --- State Management ---
@@ -347,19 +329,35 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="AI Syllabus Archit
     with gr.Tabs(elem_id="app-tabs", visible=(APP_MODE == 'admin')) as app_tabs:
         
         # --- TAB 1: The Main Chat Interface ---
+                # --- TAB 1: The Main Chat Interface ---
+                # --- TAB 1: The Main Chat Interface ---
         with gr.Tab("Chat Interface", id="chat_tab"):
             with gr.Row(equal_height=False):
+                
                 # --- MAIN CHAT COLUMN ---
                 with gr.Column(scale=7) as chat_column:
                     open_sidebar_btn = gr.Button("Show Resources & Persona ➡️", elem_classes="sm-button", visible=False)
+                    
                     initial_chat_ui = [{"role": "assistant", "content": "Hello! I'm ready to help build a personalized syllabus. What topic are you interested in learning about?"}]
-                    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}])
+                    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")
+                    )
+                    
+                    # This row contains the suggested replies
+                    with gr.Row():
+                       looks_good_btn = gr.Button("looks good", size="sm", visible=False)
+                    
+                    # This row contains the main input textbox and send button
                     with gr.Row(elem_classes="chat-input-row"):
-                        looks_good_btn = gr.Button("looks good", size="sm", visible=False)
-                    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)
-                
+                        user_input_textbox = gr.Textbox(
+                            elem_id="user_input_textbox", # ID for specific styling
+                            scale=4, show_label=False,
+                            placeholder="Type your message here...", container=False
+                        )
+                        send_button = gr.Button("Send", variant="primary", scale=1, min_width=120)
+             
                 # --- 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")