Update app.py

app.py

@@ -424,418 +424,409 @@ def create_interface():
     with gr.Blocks(
         theme=gr.themes.Base(),
         css="""
-        /* 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, #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); }
-        }
-        
-        /* 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);
-            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::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%; }
-        }
-        
-        .header h1 {
-            color: #ffc107;
-            margin: 0;
-            font-size: 2rem;
-            font-weight: 700;
-            text-shadow: 
-                0 0 10px rgba(255, 193, 7, 0.3),
-                0 0 20px rgba(255, 193, 7, 0.2);
-            letter-spacing: -0.02em;
-        }
-        
-        .header p {
-            color: #e0e0e0;
-            margin: 0.5rem 0 0 0;
-            font-size: 1rem;
-            font-weight: 400;
-            opacity: 0.9;
-        }
-        
-        /* Enhanced Chat container */
-        .chat-container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            max-width: 1200px;
-            margin: 0 auto;
-            width: 100%;
-            padding: 2rem;
-            height: calc(100vh - 200px) !important;
-            gap: 1.5rem;
-        }
-        
-        /* 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;
+    /* 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, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
+        color: #ffffff !important; /* Ensure base text color is bright */
+        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); }
+    }
+    
+    /* 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);
+        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::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%; }
+    }
+    
+    .header h1 {
+        color: #ffc107;
+        margin: 0;
+        font-size: 2rem;
+        font-weight: 700;
+        text-shadow: 
+            0 0 10px rgba(255, 193, 7, 0.3),
+            0 0 20px rgba(255, 193, 7, 0.2);
+        letter-spacing: -0.02em;
+    }
+    
+    .header p {
+        color: #e0e0e0;
+        margin: 0.5rem 0 0 0;
+        font-size: 1rem;
+        font-weight: 400;
+        opacity: 0.9;
+    }
+    
+    /* Enhanced Chat container */
+    .chat-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        max-width: 1200px;
+        margin: 0 auto;
+        width: 100%;
+        padding: 2rem;
+        height: calc(100vh - 200px) !important;
+        gap: 1.5rem;
+    }
+    
+    /* 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;
+    }
+    
+    @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) !important;
-            backdrop-filter: blur(20px) !important;
-            position: relative;
-            animation: chatGlow 4s ease-in-out infinite alternate;
-        }
-        
-        @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);
-            }
-        }
-        
-        /* 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;
-        }
-        
-        .message:hover {
-            transform: translateY(-1px) !important;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
-        }
-        
-        /* 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;
+                inset 0 1px 0 rgba(255, 255, 255, 0.05);
         }
-        
-        /* 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;
+        100% { 
             box-shadow: 
-                0 2px 10px rgba(0, 123, 255, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+                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);
         }
-        
-        /* 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;
+    }
+    
+    /* 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;
+        color: #ffffff !important; /* Made brighter for all messages */
+    }
+    
+    .message:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
+    }
+    
+    /* 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;
+    }
+    
+    /* Assistant message styling - important for streaming text */
+    .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;
+        color: #ffffff !important; /* Ensures generated text is bright white */
+    }
+    
+    /* 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;
+    }
+    
+    @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);
-            animation: inputGlow 3s ease-in-out infinite alternate;
         }
-        
-        @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);
-            }
-        }
-        
-        /* 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;
-        }
-        
-        .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;
-        }
-        
-        /* 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;
+        100% { 
             box-shadow: 
-                inset -1px 0 0 rgba(255, 255, 255, 0.05),
-                4px 0 20px rgba(0, 0, 0, 0.1) !important;
+                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);
         }
-        
-        /* Enhanced buttons with glow effects */
-        .send-btn {
-            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
-            color: #000000 !important;
-            border: none !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;
-        }
-        
-        .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;
-        }
-        
-        .send-btn:hover::before {
-            left: 100%;
-        }
-        
-        .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;
-            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;
-        }
-        
-        .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;
-        }
-        
-        /* 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: 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;
-        }
-        
-        @keyframes processingPulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
-        }
-        
-        /* Enhanced Input row styling */
-        .input-row {
-            display: flex !important;
-            gap: 12px !important;
-            align-items: end !important;
-        }
-        
-        /* Message input */
-        .message-input {
-            flex: 1 !important;
-            min-height: 48px !important;
-        }
-        
-        /* Markdown content styling */
-        .markdown-content {
-            color: #e0e0e0 !important;
-            line-height: 1.6 !important;
-            font-size: 0.95rem !important;
-        }
-        
-        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
-            color: #ffc107 !important;
-            margin-top: 1.5rem !important;
-            margin-bottom: 0.5rem !important;
-        }
-        
-        .markdown-content code {
-            background: rgba(255, 193, 7, 0.1) !important;
-            color: #ffc107 !important;
-            padding: 0.2rem 0.4rem !important;
-            border-radius: 4px !important;
-        }
-        
-        .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;
-        }
-        
-        /* 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;
-        }
-        
-        /* Loading animation */
-        @keyframes loading {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        .loading {
-            animation: loading 2s linear infinite;
-        }
-        
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .chat-container {
-                padding: 1rem;
-            }
-            
-            .header h1 {
-                font-size: 1.5rem;
-            }
-            
-            .gradio-chatbot {
-                height: 300px !important;
-            }
-            
-            .input-row {
-                flex-direction: column !important;
-                gap: 8px !important;
-            }
-        }
-        """,
+    }
+    
+    /* 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;
+    }
+    
+    .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;
+    }
+    
+    /* 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;
+        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;
+    }
+    
+    .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;
+    }
+    
+    .send-btn:hover::before {
+        left: 100%;
+    }
+    
+    .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;
+        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;
+    }
+    
+    .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;
+    }
+    
+    /* 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: 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;
+    }
+    
+    @keyframes processingPulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.8; }
+    }
+    
+    /* Enhanced Input row styling */
+    .input-row {
+        display: flex !important;
+        gap: 12px !important;
+        align-items: end !important;
+    }
+    
+    /* Message input */
+    .message-input {
+        flex: 1 !important;
+        min-height: 48px !important;
+    }
+    
+    /* Markdown content styling - applies to text within gr.Markdown components */
+    .markdown-content {
+        color: #e0e0e0 !important; /* Made brighter for general markdown text */
+        line-height: 1.6 !important;
+        font-size: 0.95rem !important;
+    }
+    
+    .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+        color: #ffc107 !important;
+        margin-top: 1.5rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+    
+    .markdown-content code {
+        background: rgba(255, 193, 7, 0.1) !important;
+        color: #ffc107 !important;
+        padding: 0.2rem 0.4rem !important;
+        border-radius: 4px !important;
+    }
+    
+    .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;
+    }
+    
+    /* 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;
+        color: #e0e0e0 !important; /* Explicitly set for examples text */
+    }
+
+    /* General paragraph text and Gradio HTML components (for architecture text) */
+    .gradio-container p,
+    .gradio-container .gr-html {
+        color: #e0e0e0 !important; /* Ensures general text is visible */
+    }
+    
+    /* Loading animation */
+    @keyframes loading {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+    .loading {
+        animation: loading 2s linear infinite;
+    }
+    
+    /* Responsive design */
+""",
         title="Agentic RAG Assistant"
     ) as iface:
 
@@ -879,7 +870,7 @@ def create_interface():
                 -  **LLMAgent**: Response generation
                 -  **CoordinatorAgent**: Workflow orchestration
                 
-                **✨ Features:**
+                **Features:**
                 -  Streaming responses
                 -  Multi-format support
                 -  Context-aware answers
@@ -896,14 +887,14 @@ def create_interface():
                     elem_classes=["gradio-chatbot"],
                     show_copy_button=True,
                     type="messages",
-                    placeholder="🚀 Upload documents first, then start chatting! Ask me anything about your documents.",
+                    placeholder="Upload documents , 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...",
+                        placeholder="Ask about your documents...",
                         label="Message",
                         scale=4,
                         elem_classes=["message-input"],