Update app.py

app.py

@@ -419,413 +419,144 @@ llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
 def create_interface():
-    """Create enhanced ChatGPT-style Gradio interface with glowing effects"""
+    """Create ChatGPT-style Gradio interface"""
     
     with gr.Blocks(
         theme=gr.themes.Base(),
         css="""
-    /* Import Google Fonts for better typography */
-    [cite_start]@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); [cite: 52]
-    /* Dark theme styling with enhanced visuals */
-    .gradio-container {
-        [cite_start]background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important; [cite: 52]
-        color: #ffffff !important; [cite_start]/* Ensure base text color is bright */ [cite: 53]
-        [cite_start]height: 100vh !important; [cite: 53]
-        [cite_start]max-width: none !important; [cite: 54]
-        [cite_start]padding: 0 !important; [cite: 54]
-        [cite_start]font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; [cite: 55]
-    }
-    
-    /* Main container with animated background */
-    .main-container {
-        [cite_start]display: flex; [cite: 56]
-        [cite_start]flex-direction: column; [cite: 56]
-        [cite_start]height: 100vh; [cite: 56]
-        background: 
-            radial-gradient(circle at 20% 50%, rgba(255, 193, 7, 0.05) 0%, transparent 50%),
-            radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
-            radial-gradient(circle at 40% 80%, rgba(255, 87, 34, 0.03) 0%, transparent 50%),
-            [cite_start]linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); [cite: 56]
-        [cite_start]animation: backgroundShift 15s ease-in-out infinite alternate; [cite: 57]
-    }
-    
-    @keyframes backgroundShift {
-        [cite_start]0% { filter: hue-rotate(0deg); [cite: 58] }
-        [cite_start]100% { filter: hue-rotate(10deg); [cite: 59] }
-    }
-    
-    /* Enhanced Header with glow */
-    .header {
-        [cite_start]background: rgba(255, 193, 7, 0.08); [cite: 60]
-        [cite_start]border-bottom: 2px solid transparent; [cite: 60]
-        [cite_start]border-image: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 123, 255, 0.3)) 1; [cite: 60]
-        [cite_start]padding: 1.5rem 2rem; [cite: 60]
-        [cite_start]backdrop-filter: blur(20px); [cite: 61]
-        box-shadow: 
-            0 4px 20px rgba(255, 193, 7, 0.1),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.1); [cite: 61]
-        [cite_start]position: relative; [cite: 62]
-        [cite_start]overflow: hidden; [cite: 62]
-    }
-    
-    .header::before {
-        [cite_start]content: ''; [cite: 63]
-        [cite_start]position: absolute; [cite: 63]
-        [cite_start]top: 0; [cite: 63]
-        [cite_start]left: -100%; [cite: 63]
-        [cite_start]width: 100%; [cite: 63]
-        [cite_start]height: 100%; [cite: 63]
-        [cite_start]background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent); [cite: 63]
-        [cite_start]animation: shimmer 3s ease-in-out infinite; [cite: 64]
-    }
-    
-    @keyframes shimmer {
-        [cite_start]0% { left: -100%; [cite: 65] }
-        [cite_start]100% { left: 100%; [cite: 66] }
-    }
-    
-    .header h1 {
-        [cite_start]color: #ffc107; [cite: 67]
-        [cite_start]margin: 0; [cite: 67]
-        [cite_start]font-size: 2rem; [cite: 67]
-        [cite_start]font-weight: 700; [cite: 67]
-        text-shadow: 
-            0 0 10px rgba(255, 193, 7, 0.3),
-            [cite_start]0 0 20px rgba(255, 193, 7, 0.2); [cite: 67]
-        [cite_start]letter-spacing: -0.02em; [cite: 68]
-    }
-    
-    .header p {
-        color: #ffffff; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 69]
-        [cite_start]margin: 0.5rem 0 0 0; [cite: 69]
-        [cite_start]font-size: 1rem; [cite: 69]
-        [cite_start]font-weight: 400; [cite: 69]
-        [cite_start]opacity: 0.9; [cite: 70]
-    }
-    
-    /* Enhanced Chat container */
-    .chat-container {
-        [cite_start]flex: 1; [cite: 71]
-        [cite_start]display: flex; [cite: 71]
-        [cite_start]flex-direction: column; [cite: 71]
-        [cite_start]max-width: 1200px; [cite: 71]
-        [cite_start]margin: 0 auto; [cite: 71]
-        [cite_start]width: 100%; [cite: 71]
-        [cite_start]padding: 2rem; [cite: 71]
-        [cite_start]height: calc(100vh - 200px) !important; [cite: 71]
-        [cite_start]gap: 1.5rem; [cite: 72]
-    }
-    
-    /* Enhanced Chatbot with glow effect */
-    .gradio-chatbot {
-        [cite_start]height: 400px !important; [cite: 73]
-        [cite_start]max-height: 400px !important; [cite: 73]
-        [cite_start]background: rgba(45, 45, 45, 0.4) !important; [cite: 73]
-        [cite_start]border: 2px solid rgba(255, 193, 7, 0.2) !important; [cite: 73]
-        [cite_start]border-radius: 20px !important; [cite: 74]
-        [cite_start]margin-bottom: 1rem; [cite: 74]
-        [cite_start]overflow-y: auto !important; [cite: 74]
-        box-shadow: 
-            0 0 30px rgba(255, 193, 7, 0.15),
-            0 8px 32px rgba(0, 0, 0, 0.3),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 74]
-        [cite_start]backdrop-filter: blur(20px) !important; [cite: 75]
-        [cite_start]position: relative; [cite: 75]
-        [cite_start]animation: chatGlow 4s ease-in-out infinite alternate; [cite: 76]
-    }
-    
-    @keyframes chatGlow {
-        0% { 
-            box-shadow: 
-                0 0 30px rgba(255, 193, 7, 0.15),
-                0 8px 32px rgba(0, 0, 0, 0.3),
-                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05); [cite: 77]
+        /* Dark theme styling */
+        .gradio-container {
+            background-color: #1a1a1a !important;
+            color: #ffffff !important;
+            height: 100vh !important;
+            max-width: none !important;
+            padding: 0 !important;
         }
-        100% { 
-            box-shadow: 
-                0 0 40px rgba(255, 193, 7, 0.25),
-                0 12px 40px rgba(0, 0, 0, 0.4),
-                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.08); [cite: 78]
+        
+        /* Main container */
+        .main-container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
         }
-    }
-    
-    /* Enhanced chat messages */
-    .message {
-        [cite_start]background: rgba(255, 255, 255, 0.05) !important; [cite: 79]
-        [cite_start]border-radius: 16px !important; [cite: 79]
-        [cite_start]padding: 1rem 1.5rem !important; [cite: 79]
-        [cite_start]margin: 0.75rem 0 !important; [cite: 79]
-        [cite_start]border: 1px solid rgba(255, 255, 255, 0.1) !important; [cite: 80]
-        [cite_start]backdrop-filter: blur(10px) !important; [cite: 80]
-        [cite_start]font-size: 0.95rem !important; [cite: 80]
-        [cite_start]line-height: 1.6 !important; [cite: 80]
-        [cite_start]box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; [cite: 81]
-        [cite_start]transition: all 0.3s ease !important; [cite: 81]
-        color: #ffffff !important; [cite_start]/* Made brighter for all messages */ [cite: 81]
-    }
-    
-    .message:hover {
-        [cite_start]transform: translateY(-1px) !important; [cite: 82]
-        [cite_start]box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; [cite: 82]
-    }
-    
-    /* User message styling */
-    .message.user {
-        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)) !important; [cite: 83]
-        [cite_start]border-color: rgba(255, 193, 7, 0.2) !important; [cite: 83]
-        [cite_start]margin-left: 15% !important; [cite: 83]
-        box-shadow: 
-            0 2px 10px rgba(255, 193, 7, 0.1),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 84]
-    }
-    
-    /* Assistant message styling - important for streaming text */
-    .message.assistant {
-        [cite_start]background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.04)) !important; [cite: 85]
-        [cite_start]border-color: rgba(0, 123, 255, 0.2) !important; [cite: 85]
-        [cite_start]margin-right: 15% !important; [cite: 85]
-        box-shadow: 
-            0 2px 10px rgba(0, 123, 255, 0.1),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 86]
-        color: #ffffff !important; [cite_start]/* Ensures generated text is bright white */ [cite: 86]
-    }
-    
-    /* Enhanced Input area with glow */
-    .input-area {
-        [cite_start]background: rgba(45, 45, 45, 0.6); [cite: 87]
-        [cite_start]border-radius: 20px; [cite: 87]
-        [cite_start]padding: 1.5rem; [cite: 87]
-        [cite_start]border: 2px solid rgba(255, 193, 7, 0.2); [cite: 87]
-        [cite_start]backdrop-filter: blur(20px); [cite: 87]
-        [cite_start]position: sticky; [cite: 87]
-        [cite_start]bottom: 0; [cite: 88]
-        box-shadow: 
-            0 0 25px rgba(255, 193, 7, 0.1),
-            0 8px 32px rgba(0, 0, 0, 0.2),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05); [cite: 89]
-        [cite_start]animation: inputGlow 3s ease-in-out infinite alternate; [cite: 89]
-    }
-    
-    @keyframes inputGlow {
-        0% { 
-            box-shadow: 
-                0 0 25px rgba(255, 193, 7, 0.1),
-                0 8px 32px rgba(0, 0, 0, 0.2),
-                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05); [cite: 90]
+        
+        /* Header */
+        .header {
+            background: rgba(255, 193, 7, 0.1);
+            border-bottom: 1px solid rgba(255, 193, 7, 0.2);
+            padding: 1rem 2rem;
+            backdrop-filter: blur(10px);
         }
-        100% { 
-            box-shadow: 
-                0 0 35px rgba(255, 193, 7, 0.2),
-                0 12px 40px rgba(0, 0, 0, 0.3),
-                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.08); [cite: 91]
+        
+        .header h1 {
+            color: #ffc107;
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
         }
-    }
-    
-    /* Enhanced File upload area */
-    .upload-area {
-        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.04)) !important; [cite: 92]
-        [cite_start]border: 2px dashed rgba(255, 193, 7, 0.4) !important; [cite: 92]
-        [cite_start]border-radius: 16px !important; [cite: 92]
-        [cite_start]padding: 1.5rem !important; [cite: 92]
-        [cite_start]margin-bottom: 1.5rem !important; [cite: 93]
-        [cite_start]transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 93]
-        [cite_start]backdrop-filter: blur(10px) !important; [cite: 94]
-        box-shadow: 
-            0 0 20px rgba(255, 193, 7, 0.05),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 95]
-    }
-    
-    .upload-area:hover {
-        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.06)) !important; [cite: 96]
-        [cite_start]border-color: rgba(255, 193, 7, 0.6) !important; [cite: 96]
-        box-shadow: 
-            0 0 30px rgba(255, 193, 7, 0.15),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; [cite: 97]
-        [cite_start]transform: translateY(-2px) !important; [cite: 97]
-    }
-    
-    /* Sidebar styling */
-    .sidebar {
-        [cite_start]background: rgba(30, 30, 30, 0.6) !important; [cite: 98]
-        [cite_start]border-right: 2px solid rgba(255, 193, 7, 0.1) !important; [cite: 98]
-        [cite_start]backdrop-filter: blur(15px) !important; [cite: 99]
-        box-shadow: 
-            inset -1px 0 0 rgba(255, 255, 255, 0.05),
-            [cite_start]4px 0 20px rgba(0, 0, 0, 0.1) !important; [cite: 100]
-    }
-    
-    /* Enhanced buttons with glow effects */
-    .send-btn {
-        [cite_start]background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important; [cite: 101]
-        [cite_start]color: #000000 !important; [cite: 101]
-        [cite_start]border: none !important; [cite: 101]
-        [cite_start]border-radius: 12px !important; [cite: 101]
-        [cite_start]font-weight: 600 !important; [cite: 101]
-        [cite_start]min-height: 48px !important; [cite: 101]
-        [cite_start]font-size: 0.95rem !important; [cite: 102]
-        [cite_start]transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 102]
-        box-shadow: 
-            0 4px 15px rgba(255, 193, 7, 0.3),
-            [cite_start]0 0 20px rgba(255, 193, 7, 0.2) !important; [cite: 103]
-        [cite_start]position: relative; [cite: 103]
-        [cite_start]overflow: hidden; [cite: 103]
-    }
-    
-    .send-btn::before {
-        [cite_start]content: ''; [cite: 104]
-        [cite_start]position: absolute; [cite: 104]
-        [cite_start]top: 0; [cite: 104]
-        [cite_start]left: -100%; [cite: 104]
-        [cite_start]width: 100%; [cite: 104]
-        [cite_start]height: 100%; [cite: 104]
-        [cite_start]background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); [cite: 105]
-        [cite_start]transition: left 0.5s; [cite: 105]
-    }
-    
-    .send-btn:hover::before {
-        [cite_start]left: 100%; [cite: 106]
-    }
-    
-    .send-btn:hover {
-        [cite_start]transform: translateY(-2px) !important; [cite: 107]
-        box-shadow: 
-            0 8px 25px rgba(255, 193, 7, 0.4),
-            [cite_start]0 0 30px rgba(255, 193, 7, 0.3) !important; [cite: 108]
-    }
-    
-    .primary-btn {
-        [cite_start]background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important; [cite: 109]
-        [cite_start]color: #000000 !important; [cite: 109]
-        [cite_start]border: none !important; [cite: 109]
-        [cite_start]border-radius: 12px !important; [cite: 109]
-        [cite_start]font-weight: 600 !important; [cite: 109]
-        [cite_start]padding: 0.75rem 1.5rem !important; [cite: 109]
-        [cite_start]font-size: 0.95rem !important; [cite: 110]
-        [cite_start]transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 110]
-        box-shadow: 
-            0 4px 15px rgba(255, 193, 7, 0.3),
-            [cite_start]0 0 20px rgba(255, 193, 7, 0.2) !important; [cite: 111]
-    }
-    
-    .primary-btn:hover {
-        [cite_start]transform: translateY(-2px) !important; [cite: 112]
-        box-shadow: 
-            0 8px 25px rgba(255, 193, 7, 0.4),
-            [cite_start]0 0 30px rgba(255, 193, 7, 0.3) !important; [cite: 113]
-    }
-    
-    /* Enhanced Text inputs with glow */
-    .gradio-textbox input, .gradio-textbox textarea {
-        [cite_start]background: rgba(45, 45, 45, 0.8) !important; [cite: 114]
-        [cite_start]color: #ffffff !important; [cite: 114]
-        [cite_start]border: 2px solid rgba(255, 193, 7, 0.2) !important; [cite: 114]
-        [cite_start]border-radius: 12px !important; [cite: 114]
-        [cite_start]font-size: 0.95rem !important; [cite: 115]
-        [cite_start]padding: 0.75rem 1rem !important; [cite: 115]
-        [cite_start]transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 115]
-        [cite_start]backdrop-filter: blur(10px) !important; [cite: 116]
-        [cite_start]box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important; [cite: 117]
-    }
-    
-    .gradio-textbox input:focus, .gradio-textbox textarea:focus {
-        [cite_start]border-color: rgba(255, 193, 7, 0.5) !important; [cite: 118]
-        box-shadow: 
-            0 0 20px rgba(255, 193, 7, 0.2),
-            [cite_start]inset 0 2px 4px rgba(0, 0, 0, 0.1) !important; [cite: 119]
-        [cite_start]outline: none !important; [cite: 119]
-    }
-    
-    /* Enhanced Processing indicator */
-    .processing-indicator {
-        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08)); [cite: 120]
-        [cite_start]border: 2px solid rgba(255, 193, 7, 0.3); [cite: 120]
-        [cite_start]border-radius: 12px; [cite: 120]
-        [cite_start]padding: 1rem 1.5rem; [cite: 120]
-        [cite_start]margin: 1rem 0; [cite: 120]
-        [cite_start]color: #ffc107; [cite: 120]
-        [cite_start]text-align: center; [cite: 121]
-        [cite_start]font-weight: 500; [cite: 121]
-        [cite_start]backdrop-filter: blur(10px); [cite: 121]
-        box-shadow: 
-            0 0 25px rgba(255, 193, 7, 0.1),
-            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.1); [cite: 122]
-        [cite_start]animation: processingPulse 2s ease-in-out infinite; [cite: 122]
-    }
-    
-    @keyframes processingPulse {
-        [cite_start]0%, 100% { opacity: 1; [cite: 123] }
-        [cite_start]50% { opacity: 0.8; [cite: 124] }
-    }
-    
-    /* Enhanced Input row styling */
-    .input-row {
-        [cite_start]display: flex !important; [cite: 125]
-        [cite_start]gap: 12px !important; [cite: 125]
-        [cite_start]align-items: end !important; [cite: 125]
-    }
-    
-    /* Message input */
-    .message-input {
-        [cite_start]flex: 1 !important; [cite: 126]
-        [cite_start]min-height: 48px !important; [cite: 126]
-    }
-    
-    /* Markdown content styling - applies to text within gr.Markdown components */
-    .markdown-content {
-        color: #ffffff !important; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 127]
-        [cite_start]line-height: 1.6 !important; [cite: 128]
-        [cite_start]font-size: 0.95rem !important; [cite: 128]
-    }
-    
-    .markdown-content h1, .markdown-content h2, .markdown-content h3 {
-        [cite_start]color: #ffc107 !important; [cite: 129]
-        [cite_start]margin-top: 1.5rem !important; [cite: 129]
-        [cite_start]margin-bottom: 0.5rem !important; [cite: 129]
-    }
-    
-    .markdown-content code {
-        [cite_start]background: rgba(255, 193, 7, 0.1) !important; [cite: 130]
-        [cite_start]color: #ffc107 !important; [cite: 130]
-        [cite_start]padding: 0.2rem 0.4rem !important; [cite: 130]
-        [cite_start]border-radius: 4px !important; [cite: 131]
-    }
-    
-    .markdown-content pre {
-        [cite_start]background: rgba(0, 0, 0, 0.3) !important; [cite: 132]
-        [cite_start]border: 1px solid rgba(255, 193, 7, 0.2) !important; [cite: 132]
-        [cite_start]border-radius: 8px !important; [cite: 132]
-        [cite_start]padding: 1rem !important; [cite: 132]
-        [cite_start]margin: 1rem 0 !important; [cite: 133]
-    }
-    
-    /* Examples styling */
-    .examples {
-        [cite_start]background: rgba(45, 45, 45, 0.3) !important; [cite: 134]
-        [cite_start]border-radius: 12px !important; [cite: 134]
-        [cite_start]padding: 1rem !important; [cite: 134]
-        [cite_start]border: 1px solid rgba(255, 193, 7, 0.1) !important; [cite: 134]
-        [cite_start]backdrop-filter: blur(10px) !important; [cite: 134]
-        color: #ffffff !important; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 135]
-    }
-
-    /* General paragraph text and Gradio HTML components (for architecture text) */
-    .gradio-container p,
-    .gradio-container .gr-html {
-        color: #ffffff !important; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 136]
-    }
-    
-    /* Loading animation */
-    @keyframes loading {
-        [cite_start]0% { transform: rotate(0deg); [cite: 137] }
-        [cite_start]100% { transform: rotate(360deg); [cite: 138] }
-    }
-    
-    .loading {
-        [cite_start]animation: loading 2s linear infinite; [cite: 139]
-    }
-    
-    /* Responsive design */
-""",
+        
+        .header p {
+            color: #cccccc;
+            margin: 0.25rem 0 0 0;
+            font-size: 0.9rem;
+        }
+        
+        /* Chat area - REDUCED HEIGHT */
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 1000px;
+            margin: 0 auto;
+            width: 100%;
+            padding: 1rem;
+            height: calc(100vh - 200px) !important; /* Reduced height */
+        }
+        
+        /* Chatbot styling - SMALLER */
+        .gradio-chatbot {
+            height: 300px !important; /* Reduced from 500px */
+            max-height: 300px !important;
+            background: transparent !important;
+            border: none !important;
+            margin-bottom: 1rem;
+            overflow-y: auto !important;
+            box-shadow: 0 0 12px rgba(255, 193, 7, 0.1);
+            
+        }
+        
+        /* Input area */
+        .input-area {
+            background: rgba(45, 45, 45, 0.6);
+            border-radius: 16px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 193, 7, 0.2);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            bottom: 0;
+        }
+        
+        /* File upload */
+        .upload-area {
+            background: rgba(255, 193, 7, 0.05);
+            border: 2px dashed rgba(255, 193, 7, 0.3);
+            border-radius: 12px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            transition: all 0.3s ease;
+        }
+        
+        /* Buttons - YELLOW SEND BUTTON */
+        .send-btn {
+            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
+            color: #000000 !important;
+            border: none !important;
+            border-radius: 8px !important;
+            font-weight: 600 !important;
+            min-height: 40px !important;
+        }
+        
+        .primary-btn {
+            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
+            color: #000000 !important;
+            border: none !important;
+            border-radius: 8px !important;
+            font-weight: 600 !important;
+        }
+        
+        /* Text inputs */
+        .gradio-textbox input, .gradio-textbox textarea {
+            background: rgba(45, 45, 45, 0.8) !important;
+            color: #ffffff !important;
+            border: 1px solid rgba(255, 193, 7, 0.2) !important;
+            border-radius: 8px !important;
+        }
+        
+        /* Processing indicator */
+        .processing-indicator {
+            background: rgba(255, 193, 7, 0.1);
+            border: 1px solid rgba(255, 193, 7, 0.3);
+            border-radius: 8px;
+            padding: 0.75rem;
+            margin: 0.5rem 0;
+            color: #ffc107;
+            text-align: center;
+        }
+        
+        /* Input row styling */
+        .input-row {
+            display: flex !important;
+            gap: 10px !important;
+            align-items: end !important;
+        }
+        
+        /* Message input */
+        .message-input {
+            flex: 1 !important;
+            min-height: 40px !important;
+        }
+        """,
         title="Agentic RAG Assistant"
     ) as iface:
 
@@ -834,88 +565,100 @@ def create_interface():
             with gr.Column():
                 gr.HTML("""
                 <div class="header">
-                    [cite_start]<h1> Agentic RAG Assistant</h1> [cite: 140]
-                    <p>Upload documents and ask questions - powered by Multi-Agent Architecture with streaming responses</p>
+                    <h1>Agentic RAG Assistant</h1>
+                    <p>Upload documents and ask questions - powered by Multi-Agent Architecture</p>
                 </div>
                 """)
 
         # Main layout with sidebar and chat
-        [cite_start]with gr.Row(): [cite: 141]
+        with gr.Row():
             # Left sidebar for file upload
-            with gr.Column(scale=1, elem_classes=["sidebar"]):
-                gr.Markdown("### 刀 Document Upload", elem_classes=["markdown-content"])
+            with gr.Column(scale=1):
+                gr.Markdown("### 📁 Document Upload")
                 
                 file_upload = gr.File(
-                    [cite_start]file_count="multiple", [cite: 142]
-                    [cite_start]file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"], [cite: 142]
-                    [cite_start]label="塘 Upload Documents", [cite: 142]
-                    [cite_start]elem_classes=["upload-area"] [cite: 142]
+                    file_count="multiple",
+                    file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
+                    label="Upload Documents",
+                    elem_classes=["upload-area"]
                 )
                 
-                [cite_start]processing_status = gr.HTML(visible=False) [cite: 143]
+                processing_status = gr.HTML(visible=False)
                 
                 process_btn = gr.Button(
-                    " Process Documents",
+                    "Process Documents",
                     variant="primary",
-                    [cite_start]elem_classes=["primary-btn"] [cite: 144]
+                    elem_classes=["primary-btn"]
                 )
                 
-                # REMOVED the Architecture Markdown block
+                # gr.Markdown("### ℹ️ Architecture")
+                # gr.Markdown("""
+                # **Multi-Agent System:**
+                # - 📄 **IngestionAgent**: Document parsing
+                # - 🔍 **RetrievalAgent**: Semantic search  
+                # - 🤖 **LLMAgent**: Response generation
+                # - 🎯 **CoordinatorAgent**: Workflow orchestration
+                
+                # **Features:**
+                # - Streaming responses
+                # - Multi-format support
+                # - Context-aware answers
+                # """)
 
             # Right side - Chat interface
             with gr.Column(scale=2):
-                gr.Markdown("### 町 Chat Interface", elem_classes=["markdown-content"])
+                gr.Markdown("### 💬 Chat Interface")
                 
-                # Chatbot with enhanced styling
-                [cite_start]chatbot = gr.Chatbot( [cite: 148]
-                    [cite_start]height=400, [cite: 148]
-                    [cite_start]elem_classes=["gradio-chatbot"], [cite: 148]
-                    [cite_start]show_copy_button=True, [cite: 148]
-                    [cite_start]type="messages", [cite: 149]
-                    [cite_start]placeholder="Upload documents , then start chatting! Ask me anything about your documents.", [cite: 149, 150]
-                    avatar_images=("側", "､")
+                # Chatbot with reduced height
+                chatbot = gr.Chatbot(
+                    height=300,  # Reduced height
+                    elem_classes=["gradio-chatbot"],
+                    show_copy_button=True,
+                    type="messages",
+                    placeholder="Upload documents first, then start chatting!"
                 )
                 
                 # Input area with improved layout
                 with gr.Row(elem_classes=["input-row"]):
-                    [cite_start]msg_input = gr.Textbox( [cite: 151]
-                        [cite_start]placeholder="Ask about your documents...", [cite: 151]
-                        [cite_start]label="Message", [cite: 151]
-                        [cite_start]scale=4, [cite: 151]
-                        [cite_start]elem_classes=["message-input"], [cite: 152]
-                        [cite_start]show_label=False, [cite: 152]
-                        [cite_start]autofocus=True [cite: 152]
+                    msg_input = gr.Textbox(
+                        placeholder="Ask about your documents...",
+                        label="Message",
+                        scale=4,
+                        elem_classes=["message-input"],
+                        show_label=False,
+                        autofocus=True
                     )
-                    [cite_start]send_btn = gr.Button( [cite: 153]
-                        " Send", 
+                    send_btn = gr.Button(
+                        "Send", 
                         scale=1, 
-                        [cite_start]elem_classes=["send-btn"], [cite: 153]
-                        [cite_start]size="sm" [cite: 154]
+                        elem_classes=["send-btn"],
+                        size="sm"
                     )
 
-                # Enhanced Examples - UPDATED with fewer examples
+                # Examples
                 gr.Examples(
                     examples=[
-                        [cite_start]"Summarize the key findings", [cite: 155]
-                        [cite_start]"What are the main topics discussed?", [cite: 155]
+                        "What are the main topics discussed?",
+                        "Summarize the key findings",
+                        "What metrics are mentioned?",
+                        "What are the recommendations?"
                     ],
-                    [cite_start]inputs=msg_input, [cite: 156]
-                    [cite_start]label=" Example Questions", [cite: 157]
-                    elem_classes=["examples"]
+                    inputs=msg_input,
+                    label="Example Questions"
                 )
 
         # State to track document processing
         doc_processed = gr.State(False)
         
         # Event handlers
-        [cite_start]def handle_file_upload_and_process(files): [cite: 158]
+        def handle_file_upload_and_process(files):
             if not files:
                 return gr.update(visible=False), False
             
             # Show processing indicator
             processing_html = f"""
             <div class="processing-indicator">
-                [cite_start]Processing {len(files)} documents... Please wait while we analyze your content. [cite: 159]
+                📄 Processing {len(files)} documents... Please wait.
             </div>
             """
             
@@ -924,58 +667,54 @@ def create_interface():
                 result = coordinator_agent.process_files(files)
                 
                 # Wait a moment for processing to complete
-                [cite_start]import time [cite: 161]
-                [cite_start]time.sleep(3) [cite: 161]
+                import time
+                time.sleep(3)
                 
                 success_html = """
-                <div style="background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08)); 
-                           border: 2px solid rgba(76, 175, 80, 0.3); border-radius: 12px; padding: 1rem 1.5rem; 
-                           color: #4caf50; text-align: center; backdrop-filter: blur(10px);
-                           box-shadow: 0 0 20px rgba(76, 175, 80, 0.1);">
-                     Documents processed successfully! You can now ask questions about your content.
+                <div style="background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.3); 
+                           border-radius: 8px; padding: 0.75rem; color: #4caf50; text-align: center;">
+                    Documents processed successfully! You can now ask questions.
                 </div>
-                [cite_start]""" [cite: 162, 163, 164]
+                """
                 return gr.update(value=success_html, visible=True), True
                 
             except Exception as e:
                 error_html = f"""
-                <div style="background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.08)); 
-                           border: 2px solid rgba(244, 67, 54, 0.3); border-radius: 12px; padding: 1rem 1.5rem; 
-                           color: #f44336; text-align: center; backdrop-filter: blur(10px);
-                           box-shadow: 0 0 20px rgba(244, 67, 54, 0.1);">
-                     Error processing documents: {str(e)}
+                <div style="background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.3); 
+                           border-radius: 8px; padding: 0.75rem; color: #f44336; text-align: center;">
+                    ❌ Error processing documents: {str(e)}
                 </div>
-                [cite_start]""" [cite: 165, 166]
+                """
                 return gr.update(value=error_html, visible=True), False
 
-        [cite_start]def respond(message, history, doc_ready): [cite: 167]
+        def respond(message, history, doc_ready):
             if not doc_ready:
                 # Show error message
                 history.append({"role": "user", "content": message})
-                history.append({"role": "assistant", "content": " Please upload and process documents first before asking questions."})
-                [cite_start]return history, "" [cite: 168]
+                history.append({"role": "assistant", "content": " Please upload and process documents first."})
+                return history, ""
             
             if not message.strip():
                 return history, message
             
             # Add user message
             history.append({"role": "user", "content": message})
-            [cite_start]history.append({"role": "assistant", "content": ""}) [cite: 169]
+            history.append({"role": "assistant", "content": ""})
             
             # Stream response
             try:
                 for token in coordinator_agent.handle_query(message, history):
                     history[-1]["content"] += token
-                    [cite_start]yield history, "" [cite: 170]
+                    yield history, ""
             except Exception as e:
-                history[-1]["content"] = f" Error generating response: {str(e)}"
+                history[-1]["content"] = f"❌ Error: {str(e)}"
                 yield history, ""
 
         # Event bindings
         process_btn.click(
             handle_file_upload_and_process,
-            [cite_start]inputs=[file_upload], [cite: 171]
-            [cite_start]outputs=[processing_status, doc_processed] [cite: 171]
+            inputs=[file_upload],
+            outputs=[processing_status, doc_processed]
         )
 
         send_btn.click(
@@ -985,7 +724,7 @@ def create_interface():
             show_progress=True
         )
 
-        [cite_start]msg_input.submit( [cite: 172]
+        msg_input.submit(
             respond,
             inputs=[msg_input, chatbot, doc_processed],
             outputs=[chatbot, msg_input],
@@ -993,7 +732,7 @@ def create_interface():
         )
 
     return iface
-                                      
+
 # Launch the application
 if __name__ == "__main__":
     demo = create_interface()