Update app.py

app.py

@@ -419,455 +419,520 @@ llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
 def create_interface():
-    """Create enhanced Gradio interface with improved UI"""
+    """Create enhanced ChatGPT-style Gradio interface with glowing effects"""
     
     with gr.Blocks(
-        theme=gr.themes.Soft(),
+        theme=gr.themes.Base(),
         css="""
-        /* Global styling */
+        /* Import Google Fonts for better typography */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        /* Dark theme styling with enhanced visuals */
         .gradio-container {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
+            color: #ffffff !important;
+            height: 100vh !important;
+            max-width: none !important;
+            padding: 0 !important;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        }
+        
+        /* Main container with animated background */
+        .main-container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            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%),
+                linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+            animation: backgroundShift 15s ease-in-out infinite alternate;
+        }
+        
+        @keyframes backgroundShift {
+            0% { filter: hue-rotate(0deg); }
+            100% { filter: hue-rotate(10deg); }
         }
         
-        /* Main container */
-        .main-wrapper {
-            background: rgba(255, 255, 255, 0.05);
+        /* Enhanced Header with glow */
+        .header {
+            background: rgba(255, 193, 7, 0.08);
+            border-bottom: 2px solid transparent;
+            border-image: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 123, 255, 0.3)) 1;
+            padding: 1.5rem 2rem;
             backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 24px;
-            margin: 20px;
-            padding: 0;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            box-shadow: 
+                0 4px 20px rgba(255, 193, 7, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            position: relative;
             overflow: hidden;
         }
         
-        /* Header section */
-        .app-header {
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
-            padding: 24px 32px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            text-align: center;
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
+            animation: shimmer 3s ease-in-out infinite;
+        }
+        
+        @keyframes shimmer {
+            0% { left: -100%; }
+            100% { left: 100%; }
         }
         
-        .app-title {
-            font-size: 32px;
+        .header h1 {
+            color: #ffc107;
+            margin: 0;
+            font-size: 2rem;
             font-weight: 700;
-            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin: 0 0 8px 0;
+            text-shadow: 
+                0 0 10px rgba(255, 193, 7, 0.3),
+                0 0 20px rgba(255, 193, 7, 0.2);
             letter-spacing: -0.02em;
         }
         
-        .app-subtitle {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 16px;
+        .header p {
+            color: #e0e0e0;
+            margin: 0.5rem 0 0 0;
+            font-size: 1rem;
             font-weight: 400;
-            margin: 0;
-            line-height: 1.5;
+            opacity: 0.9;
         }
         
-        /* Content area */
-        .content-area {
-            padding: 32px;
+        /* Enhanced Chat container */
+        .chat-container {
+            flex: 1;
             display: flex;
-            gap: 32px;
-            min-height: 600px;
+            flex-direction: column;
+            max-width: 1200px;
+            margin: 0 auto;
+            width: 100%;
+            padding: 2rem;
+            height: calc(100vh - 200px) !important;
+            gap: 1.5rem;
         }
         
-        /* Sidebar */
-        .sidebar {
-            flex: 0 0 320px;
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 16px;
-            padding: 24px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            height: fit-content;
-        }
-        
-        .sidebar-title {
-            color: white;
-            font-size: 18px;
-            font-weight: 600;
-            margin: 0 0 20px 0;
-            padding-bottom: 12px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        /* File upload area */
-        .upload-container {
-            background: rgba(255, 255, 255, 0.05);
-            border: 2px dashed rgba(255, 255, 255, 0.2);
-            border-radius: 12px;
-            padding: 24px;
-            text-align: center;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            margin-bottom: 20px;
-            cursor: pointer;
+        /* Enhanced Chatbot with glow effect */
+        .gradio-chatbot {
+            height: 400px !important;
+            max-height: 400px !important;
+            background: rgba(45, 45, 45, 0.4) !important;
+            border: 2px solid rgba(255, 193, 7, 0.2) !important;
+            border-radius: 20px !important;
+            margin-bottom: 1rem;
+            overflow-y: auto !important;
+            box-shadow: 
+                0 0 30px rgba(255, 193, 7, 0.15),
+                0 8px 32px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+            backdrop-filter: blur(20px) !important;
+            position: relative;
+            animation: chatGlow 4s ease-in-out infinite alternate;
         }
         
-        .upload-container:hover {
-            background: rgba(255, 255, 255, 0.08);
-            border-color: rgba(255, 255, 255, 0.3);
-            transform: translateY(-2px);
+        @keyframes chatGlow {
+            0% { 
+                box-shadow: 
+                    0 0 30px rgba(255, 193, 7, 0.15),
+                    0 8px 32px rgba(0, 0, 0, 0.3),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            }
+            100% { 
+                box-shadow: 
+                    0 0 40px rgba(255, 193, 7, 0.25),
+                    0 12px 40px rgba(0, 0, 0, 0.4),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+            }
         }
         
-        .upload-text {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 14px;
-            margin: 8px 0;
+        /* Enhanced chat messages */
+        .message {
+            background: rgba(255, 255, 255, 0.05) !important;
+            border-radius: 16px !important;
+            padding: 1rem 1.5rem !important;
+            margin: 0.75rem 0 !important;
+            border: 1px solid rgba(255, 255, 255, 0.1) !important;
+            backdrop-filter: blur(10px) !important;
+            font-size: 0.95rem !important;
+            line-height: 1.6 !important;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
+            transition: all 0.3s ease !important;
         }
         
-        /* Buttons */
-        .primary-button {
-            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-            color: white;
-            border: none;
-            border-radius: 12px;
-            padding: 12px 24px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.25);
-            width: 100%;
+        .message:hover {
+            transform: translateY(-1px) !important;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
         }
         
-        .primary-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px 0 rgba(59, 130, 246, 0.35);
+        /* User message styling */
+        .message.user {
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)) !important;
+            border-color: rgba(255, 193, 7, 0.2) !important;
+            margin-left: 15% !important;
+            box-shadow: 
+                0 2px 10px rgba(255, 193, 7, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
         }
         
-        .send-button {
-            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            padding: 10px 20px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 2px 8px 0 rgba(16, 185, 129, 0.25);
-            min-width: 80px;
+        /* Assistant message styling */
+        .message.assistant {
+            background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.04)) !important;
+            border-color: rgba(0, 123, 255, 0.2) !important;
+            margin-right: 15% !important;
+            box-shadow: 
+                0 2px 10px rgba(0, 123, 255, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
         }
         
-        .send-button:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px 0 rgba(16, 185, 129, 0.35);
+        /* Enhanced Input area with glow */
+        .input-area {
+            background: rgba(45, 45, 45, 0.6);
+            border-radius: 20px;
+            padding: 1.5rem;
+            border: 2px solid rgba(255, 193, 7, 0.2);
+            backdrop-filter: blur(20px);
+            position: sticky;
+            bottom: 0;
+            box-shadow: 
+                0 0 25px rgba(255, 193, 7, 0.1),
+                0 8px 32px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            animation: inputGlow 3s ease-in-out infinite alternate;
         }
         
-        /* Chat area */
-        .chat-section {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 16px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            overflow: hidden;
+        @keyframes inputGlow {
+            0% { 
+                box-shadow: 
+                    0 0 25px rgba(255, 193, 7, 0.1),
+                    0 8px 32px rgba(0, 0, 0, 0.2),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            }
+            100% { 
+                box-shadow: 
+                    0 0 35px rgba(255, 193, 7, 0.2),
+                    0 12px 40px rgba(0, 0, 0, 0.3),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+            }
         }
         
-        .chat-header {
-            padding: 20px 24px;
-            background: rgba(255, 255, 255, 0.05);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        /* Enhanced File upload area */
+        .upload-area {
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.04)) !important;
+            border: 2px dashed rgba(255, 193, 7, 0.4) !important;
+            border-radius: 16px !important;
+            padding: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            backdrop-filter: blur(10px) !important;
+            box-shadow: 
+                0 0 20px rgba(255, 193, 7, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
         }
         
-        .chat-title {
-            color: white;
-            font-size: 18px;
-            font-weight: 600;
-            margin: 0;
+        .upload-area:hover {
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.06)) !important;
+            border-color: rgba(255, 193, 7, 0.6) !important;
+            box-shadow: 
+                0 0 30px rgba(255, 193, 7, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+            transform: translateY(-2px) !important;
         }
         
-        /* Chatbot styling */
-        .gradio-chatbot {
-            background: transparent !important;
+        /* Sidebar styling */
+        .sidebar {
+            background: rgba(30, 30, 30, 0.6) !important;
+            border-right: 2px solid rgba(255, 193, 7, 0.1) !important;
+            backdrop-filter: blur(15px) !important;
+            box-shadow: 
+                inset -1px 0 0 rgba(255, 255, 255, 0.05),
+                4px 0 20px rgba(0, 0, 0, 0.1) !important;
+        }
+        
+        /* Enhanced buttons with glow effects */
+        .send-btn {
+            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
+            color: #000000 !important;
             border: none !important;
-            height: 400px !important;
-            max-height: 400px !important;
-            padding: 20px 24px !important;
-            overflow-y: auto !important;
+            border-radius: 12px !important;
+            font-weight: 600 !important;
+            min-height: 48px !important;
+            font-size: 0.95rem !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            box-shadow: 
+                0 4px 15px rgba(255, 193, 7, 0.3),
+                0 0 20px rgba(255, 193, 7, 0.2) !important;
+            position: relative;
+            overflow: hidden;
         }
         
-        /* Message bubbles */
-        .message.user {
-            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-            color: white;
-            border-radius: 18px 18px 4px 18px;
-            margin: 8px 0 8px 48px;
-            padding: 12px 16px;
-            max-width: 80%;
-            margin-left: auto;
-            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
-        }
-        
-        .message.bot {
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 18px 18px 18px 4px;
-            margin: 8px 48px 8px 0;
-            padding: 12px 16px;
-            max-width: 80%;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        }
-        
-        /* Input area */
-        .input-section {
-            padding: 20px 24px;
-            background: rgba(255, 255, 255, 0.05);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        .send-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
         }
         
-        .input-row {
-            display: flex !important;
-            gap: 12px !important;
-            align-items: end !important;
+        .send-btn:hover::before {
+            left: 100%;
         }
         
-        .message-input {
-            flex: 1 !important;
-            background: rgba(255, 255, 255, 0.1) !important;
-            border: 1px solid rgba(255, 255, 255, 0.2) !important;
+        .send-btn:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 
+                0 8px 25px rgba(255, 193, 7, 0.4),
+                0 0 30px rgba(255, 193, 7, 0.3) !important;
+        }
+        
+        .primary-btn {
+            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
+            color: #000000 !important;
+            border: none !important;
+            border-radius: 12px !important;
+            font-weight: 600 !important;
+            padding: 0.75rem 1.5rem !important;
+            font-size: 0.95rem !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            box-shadow: 
+                0 4px 15px rgba(255, 193, 7, 0.3),
+                0 0 20px rgba(255, 193, 7, 0.2) !important;
+        }
+        
+        .primary-btn:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 
+                0 8px 25px rgba(255, 193, 7, 0.4),
+                0 0 30px rgba(255, 193, 7, 0.3) !important;
+        }
+        
+        /* Enhanced Text inputs with glow */
+        .gradio-textbox input, .gradio-textbox textarea {
+            background: rgba(45, 45, 45, 0.8) !important;
+            color: #ffffff !important;
+            border: 2px solid rgba(255, 193, 7, 0.2) !important;
             border-radius: 12px !important;
-            padding: 12px 16px !important;
-            color: white !important;
-            font-size: 14px !important;
+            font-size: 0.95rem !important;
+            padding: 0.75rem 1rem !important;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            backdrop-filter: blur(10px) !important;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
         }
         
-        .message-input:focus {
-            background: rgba(255, 255, 255, 0.15) !important;
-            border-color: rgba(255, 255, 255, 0.4) !important;
-            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
+        .gradio-textbox input:focus, .gradio-textbox textarea:focus {
+            border-color: rgba(255, 193, 7, 0.5) !important;
+            box-shadow: 
+                0 0 20px rgba(255, 193, 7, 0.2),
+                inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
             outline: none !important;
         }
         
-        /* Status indicators */
-        .status-indicator {
+        /* Enhanced Processing indicator */
+        .processing-indicator {
+            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
+            border: 2px solid rgba(255, 193, 7, 0.3);
             border-radius: 12px;
-            padding: 16px;
-            margin: 16px 0;
-            font-size: 14px;
-            font-weight: 500;
+            padding: 1rem 1.5rem;
+            margin: 1rem 0;
+            color: #ffc107;
             text-align: center;
+            font-weight: 500;
             backdrop-filter: blur(10px);
+            box-shadow: 
+                0 0 25px rgba(255, 193, 7, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            animation: processingPulse 2s ease-in-out infinite;
         }
         
-        .status-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: #10b981;
-            border: 1px solid rgba(16, 185, 129, 0.3);
-        }
-        
-        .status-error {
-            background: rgba(239, 68, 68, 0.15);
-            color: #ef4444;
-            border: 1px solid rgba(239, 68, 68, 0.3);
+        @keyframes processingPulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
         }
         
-        .status-processing {
-            background: rgba(59, 130, 246, 0.15);
-            color: #3b82f6;
-            border: 1px solid rgba(59, 130, 246, 0.3);
+        /* Enhanced Input row styling */
+        .input-row {
+            display: flex !important;
+            gap: 12px !important;
+            align-items: end !important;
         }
         
-        /* Examples section */
-        .examples-container {
-            margin-top: 16px;
+        /* Message input */
+        .message-input {
+            flex: 1 !important;
+            min-height: 48px !important;
         }
         
-        .examples-title {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 14px;
-            font-weight: 500;
-            margin-bottom: 12px;
+        /* Markdown content styling */
+        .markdown-content {
+            color: #e0e0e0 !important;
+            line-height: 1.6 !important;
+            font-size: 0.95rem !important;
         }
         
-        .example-item {
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            padding: 8px 12px;
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 13px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            margin-bottom: 6px;
+        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+            color: #ffc107 !important;
+            margin-top: 1.5rem !important;
+            margin-bottom: 0.5rem !important;
         }
         
-        .example-item:hover {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: rgba(255, 255, 255, 0.2);
-            color: white;
+        .markdown-content code {
+            background: rgba(255, 193, 7, 0.1) !important;
+            color: #ffc107 !important;
+            padding: 0.2rem 0.4rem !important;
+            border-radius: 4px !important;
         }
         
-        /* Scrollbar styling */
-        ::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
+        .markdown-content pre {
+            background: rgba(0, 0, 0, 0.3) !important;
+            border: 1px solid rgba(255, 193, 7, 0.2) !important;
+            border-radius: 8px !important;
+            padding: 1rem !important;
+            margin: 1rem 0 !important;
         }
         
-        ::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
+        /* Examples styling */
+        .examples {
+            background: rgba(45, 45, 45, 0.3) !important;
+            border-radius: 12px !important;
+            padding: 1rem !important;
+            border: 1px solid rgba(255, 193, 7, 0.1) !important;
+            backdrop-filter: blur(10px) !important;
         }
         
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 3px;
+        /* Loading animation */
+        @keyframes loading {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
         
-        ::-webkit-scrollbar-thumb:hover {
-            background: rgba(255, 255, 255, 0.5);
+        .loading {
+            animation: loading 2s linear infinite;
         }
         
         /* Responsive design */
         @media (max-width: 768px) {
-            .content-area {
-                flex-direction: column;
-                padding: 16px;
-                gap: 16px;
+            .chat-container {
+                padding: 1rem;
             }
             
-            .sidebar {
-                flex: none;
+            .header h1 {
+                font-size: 1.5rem;
             }
             
-            .main-wrapper {
-                margin: 10px;
+            .gradio-chatbot {
+                height: 300px !important;
             }
             
-            .app-title {
-                font-size: 24px;
+            .input-row {
+                flex-direction: column !important;
+                gap: 8px !important;
             }
         }
-        
-        /* Form elements */
-        .gradio-textbox input, .gradio-textbox textarea {
-            background: rgba(255, 255, 255, 0.1) !important;
-            color: white !important;
-            border: 1px solid rgba(255, 255, 255, 0.2) !important;
-            border-radius: 8px !important;
-        }
-        
-        .gradio-textbox input:focus, .gradio-textbox textarea:focus {
-            border-color: rgba(255, 255, 255, 0.4) !important;
-            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
-        }
-        
-        /* File upload specific styling */
-        .gradio-file {
-            background: transparent !important;
-            border: none !important;
-        }
-        
-        .gradio-file .file-preview {
-            background: rgba(255, 255, 255, 0.05) !important;
-            border: 1px solid rgba(255, 255, 255, 0.1) !important;
-            border-radius: 8px !important;
-            color: white !important;
-        }
         """,
         title="Agentic RAG Assistant"
     ) as iface:
 
-        # Main wrapper
-        with gr.Column(elem_classes=["main-wrapper"]):
-            
-            # Header
-            gr.HTML("""
-            <div class="app-header">
-                <h1 class="app-title">Agentic RAG Assistant</h1>
-                <p class="app-subtitle">Upload documents and ask questions - powered by Multi-Agent Architecture</p>
-            </div>
-            """)
+        # Header
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("""
+                <div class="header">
+                    <h1>✨ Agentic RAG Assistant</h1>
+                    <p>🤖 Upload documents and ask questions - powered by Multi-Agent Architecture with streaming responses</p>
+                </div>
+                """)
 
-            # Content area
-            with gr.Row(elem_classes=["content-area"]):
+        # Main layout with sidebar and chat
+        with gr.Row():
+            # Left sidebar for file upload
+            with gr.Column(scale=1, elem_classes=["sidebar"]):
+                gr.Markdown("### 📁 Document Upload", elem_classes=["markdown-content"])
                 
-                # Sidebar
-                with gr.Column(elem_classes=["sidebar"]):
-                    gr.HTML('<h3 class="sidebar-title">Document Management</h3>')
-                    
-                    gr.HTML("""
-                    <div class="upload-container">
-                        <div class="upload-text">Drag and drop files here or click to browse</div>
-                        <div style="color: rgba(255, 255, 255, 0.6); font-size: 12px; margin-top: 8px;">
-                            Supported: PDF, PPTX, CSV, DOCX, TXT, MD
-                        </div>
-                    </div>
-                    """)
-                    
-                    file_upload = gr.File(
-                        file_count="multiple",
-                        file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
-                        label="",
+                file_upload = gr.File(
+                    file_count="multiple",
+                    file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
+                    label="📄 Upload Documents",
+                    elem_classes=["upload-area"]
+                )
+                
+                processing_status = gr.HTML(visible=False)
+                
+                process_btn = gr.Button(
+                    "🚀 Process Documents",
+                    variant="primary",
+                    elem_classes=["primary-btn"]
+                )
+                
+                gr.Markdown("""
+                ### ⚡ Architecture
+                
+                **Multi-Agent System:**
+                - 📄 **IngestionAgent**: Document parsing
+                - 🔍 **RetrievalAgent**: Semantic search  
+                - 🤖 **LLMAgent**: Response generation
+                - 🎯 **CoordinatorAgent**: Workflow orchestration
+                
+                **✨ Features:**
+                - 🌊 Streaming responses
+                - 📚 Multi-format support
+                - 🧠 Context-aware answers
+                - 🔥 Real-time processing
+                """, elem_classes=["markdown-content"])
+
+            # Right side - Chat interface
+            with gr.Column(scale=2):
+                gr.Markdown("### 💬 Chat Interface", elem_classes=["markdown-content"])
+                
+                # Chatbot with enhanced styling
+                chatbot = gr.Chatbot(
+                    height=400,
+                    elem_classes=["gradio-chatbot"],
+                    show_copy_button=True,
+                    type="messages",
+                    placeholder="🚀 Upload documents first, then start chatting! Ask me anything about your documents.",
+                    avatar_images=("👤", "🤖")
+                )
+                
+                # Input area with improved layout
+                with gr.Row(elem_classes=["input-row"]):
+                    msg_input = gr.Textbox(
+                        placeholder="💭 Ask about your documents...",
+                        label="Message",
+                        scale=4,
+                        elem_classes=["message-input"],
                         show_label=False,
-                        container=False
+                        autofocus=True
                     )
-                    
-                    processing_status = gr.HTML(visible=False)
-                    
-                    process_btn = gr.Button(
-                        "Process Documents",
-                        elem_classes=["primary-button"],
-                        size="lg"
+                    send_btn = gr.Button(
+                        "🚀 Send", 
+                        scale=1, 
+                        elem_classes=["send-btn"],
+                        size="sm"
                     )
 
-                # Chat section
-                with gr.Column(elem_classes=["chat-section"]):
-                    
-                    # Chat header
-                    gr.HTML('<div class="chat-header"><h3 class="chat-title">Conversation</h3></div>')
-                    
-                    # Chatbot
-                    chatbot = gr.Chatbot(
-                        height=400,
-                        elem_classes=["gradio-chatbot"],
-                        show_copy_button=True,
-                        type="messages",
-                        placeholder="Upload and process documents to start chatting..."
-                    )
-                    
-                    # Input section
-                    with gr.Column(elem_classes=["input-section"]):
-                        with gr.Row(elem_classes=["input-row"]):
-                            msg_input = gr.Textbox(
-                                placeholder="Type your question about the uploaded documents...",
-                                label="",
-                                show_label=False,
-                                scale=4,
-                                elem_classes=["message-input"],
-                                autofocus=True,
-                                container=False
-                            )
-                            send_btn = gr.Button(
-                                "Send", 
-                                scale=1, 
-                                elem_classes=["send-button"],
-                                size="sm"
-                            )
-
-                        # Examples
-                        with gr.Column(elem_classes=["examples-container"]):
-                            gr.HTML('<div class="examples-title">Example Questions</div>')
-                            gr.Examples(
-                                examples=[
-                                    "What are the main topics discussed?",
-                                    "Summarize the key findings",
-                                    "What metrics are mentioned?",
-                                    "What are the recommendations?"
-                                ],
-                                inputs=msg_input
-                            )
+                # Enhanced Examples
+                gr.Examples(
+                    examples=[
+                        "📖 What are the main topics discussed?",
+                        "📊 Summarize the key findings",
+                        "📈 What metrics are mentioned?",
+                        "💡 What are the recommendations?",
+                        "🔍 Find specific information about...",
+                        "📋 Create a summary of the content"
+                    ],
+                    inputs=msg_input,
+                    label="💡 Example Questions",
+                    elem_classes=["examples"]
+                )
 
-        # State management
+        # State to track document processing
         doc_processed = gr.State(False)
         
         # Event handlers
@@ -877,8 +942,8 @@ def create_interface():
             
             # Show processing indicator
             processing_html = f"""
-            <div class="status-indicator status-processing">
-                Processing {len(files)} documents... Please wait.
+            <div class="processing-indicator">
+                🔄 Processing {len(files)} documents... Please wait while we analyze your content.
             </div>
             """
             
@@ -886,29 +951,36 @@ def create_interface():
             try:
                 result = coordinator_agent.process_files(files)
                 
-                # Wait for processing
+                # Wait a moment for processing to complete
                 import time
                 time.sleep(3)
                 
                 success_html = """
-                <div class="status-indicator status-success">
-                    Documents processed successfully! You can now ask questions.
+                <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>
                 """
                 return gr.update(value=success_html, visible=True), True
                 
             except Exception as e:
                 error_html = f"""
-                <div class="status-indicator status-error">
-                    Error processing documents: {str(e)}
+                <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>
                 """
                 return gr.update(value=error_html, visible=True), False
 
         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."})
+                history.append({"role": "assistant", "content": "⚠️ Please upload and process documents first before asking questions."})
                 return history, ""
             
             if not message.strip():
@@ -924,7 +996,7 @@ def create_interface():
                     history[-1]["content"] += token
                     yield history, ""
             except Exception as e:
-                history[-1]["content"] = f"Error: {str(e)}"
+                history[-1]["content"] = f"❌ Error generating response: {str(e)}"
                 yield history, ""
 
         # Event bindings