working on ui

src/ui/modern_interface.py

@@ -0,0 +1,310 @@
+"""
+Modern UI with all features - Compact & High Quality
+"""
+import gradio as gr
+from src.core.reasoner import AdvancedReasoner
+from src.config.constants import ReasoningMode, ModelConfig
+from src.config.settings import AppConfig
+from src.ui.handlers import EventHandlers
+from src.ui.components import UIComponents
+
+# Compact Modern CSS
+MODERN_CSS = """
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+:root{--primary:#6366f1;--bg:#0f172a;--surface:rgba(255,255,255,0.05);--border:rgba(255,255,255,0.1);--text:#f1f5f9;--glow:0 0 20px rgba(99,102,241,0.3)}
+*{font-family:'Inter',sans-serif}
+body{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:var(--text)}
+.hero-header{background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(139,92,246,0.2));backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;padding:2rem;margin-bottom:1.5rem;box-shadow:var(--glow);animation:slideIn 0.5s ease}
+.hero-header h1{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#f1f5f9,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0 0 0.5rem}
+.badges{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}
+.badge{padding:0.4rem 0.8rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:0.8rem;transition:all 0.3s}
+.badge:hover{background:rgba(99,102,241,0.1);border-color:var(--primary);transform:translateY(-2px)}
+.metrics-card{background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(6,182,212,0.1));backdrop-filter:blur(20px);border:1px solid rgba(16,185,129,0.2);border-radius:12px;padding:1.2rem;margin-top:1rem}
+.metric-row{display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border)}
+.metric-row:last-child{border-bottom:none}
+.metric-label{color:#cbd5e1;font-size:0.85rem}
+.metric-value{font-weight:700;font-family:monospace}
+.status-active{color:#10b981}
+.status-idle{color:#f59e0b}
+@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
+.gradio-button{border-radius:8px;font-weight:600;transition:all 0.3s}
+.gradio-button:hover{transform:translateY(-2px)}
+</style>
+"""
+
+# Compact Header
+HEADER = f"""
+<div class="hero-header">
+<h1>🧠 AI Reasoning System Pro</h1>
+<p style="color:#cbd5e1;margin:0">Advanced reasoning with Tree of Thoughts, Constitutional AI & Real-time Analytics</p>
+<div class="badges">
+<div class="badge">🌳 Tree of Thoughts</div>
+<div class="badge">🛡️ Constitutional AI</div>
+<div class="badge">🔬 {len(ReasoningMode)} Modes</div>
+<div class="badge">⚡ Real-Time</div>
+<div class="badge">💾 Smart Cache</div>
+<div class="badge">📊 Analytics</div>
+</div>
+</div>
+"""
+
+def create_metrics_html(reasoner):
+    """Compact metrics display"""
+    m = reasoner.metrics
+    cache = reasoner.cache.get_stats()
+    status = "status-active" if m.tokens_used > 0 else "status-idle"
+    return f"""
+    <div class="metrics-card">
+    <div class="metric-row"><span class="metric-label">⚡ Inference</span><span class="metric-value">{m.inference_time:.2f}s</span></div>
+    <div class="metric-row"><span class="metric-label">🚀 Speed</span><span class="metric-value">{m.tokens_per_second:.1f} tok/s</span></div>
+    <div class="metric-row"><span class="metric-label">🧠 Depth</span><span class="metric-value">{m.reasoning_depth} steps</span></div>
+    <div class="metric-row"><span class="metric-label">💬 Total</span><span class="metric-value">{m.total_conversations}</span></div>
+    <div class="metric-row"><span class="metric-label">📊 Tokens</span><span class="metric-value">{m.tokens_used:,}</span></div>
+    <div class="metric-row"><span class="metric-label">💾 Cache</span><span class="metric-value">{cache['hit_rate']}%</span></div>
+    <div class="metric-row"><span class="metric-label">📡 Status</span><span class="metric-value {status}">{"Active" if m.tokens_used > 0 else "Ready"}</span></div>
+    </div>
+    """
+
+def create_modern_ui():
+    """Create modern UI with all features"""
+    reasoner = AdvancedReasoner()
+    components = UIComponents()
+    handlers = EventHandlers(reasoner)
+    
+    with gr.Blocks(
+        theme=gr.themes.Soft(
+            primary_hue=AppConfig.THEME_PRIMARY,
+            secondary_hue=AppConfig.THEME_SECONDARY,
+            font=gr.themes.GoogleFont("Inter")
+        ),
+        css=MODERN_CSS,
+        title="🧠 AI Reasoning System Pro"
+    ) as demo:
+        
+        gr.HTML(HEADER)
+        
+        # Main Tabs
+        with gr.Tabs() as tabs:
+            
+            # TAB 1: Reasoning Workspace
+            with gr.Tab("💬 Reasoning Workspace"):
+                with gr.Row():
+                    with gr.Column(scale=4):
+                        chatbot = gr.Chatbot(
+                            label="💬 Reasoning Workspace",
+                            height=600,
+                            show_copy_button=True,
+                            type="messages",
+                            bubble_full_width=False,
+                            avatar_images=(
+                                "https://api.dicebear.com/7.x/avataaars/svg?seed=User&backgroundColor=6366f1",
+                                "https://api.dicebear.com/7.x/bottts/svg?seed=AI&backgroundColor=8b5cf6"
+                            )
+                        )
+                        
+                        msg = gr.Textbox(
+                            placeholder="💭 Ask me anything... I'll use advanced reasoning to solve complex problems.",
+                            label="Query Input",
+                            lines=3,
+                            max_lines=10,
+                            show_label=False
+                        )
+                        
+                        with gr.Row():
+                            submit_btn = gr.Button("🚀 Process", variant="primary", scale=2, size="lg")
+                            clear_btn = gr.Button("🗑️ Clear", scale=1, size="lg")
+                            pdf_btn = gr.Button("📄 PDF", scale=1, size="lg", variant="secondary")
+                            toggle_sidebar_btn = gr.Button("⚙️ Settings", scale=1, size="lg", variant="secondary")
+                    
+                    # Collapsible Sidebar
+                    with gr.Column(scale=1, visible=True) as sidebar:
+                        gr.Markdown("### ⚙️ Configuration")
+                        
+                        reasoning_mode = gr.Radio(
+                            choices=components.get_reasoning_mode_choices(),
+                            value=ReasoningMode.TREE_OF_THOUGHTS.value,
+                            label="🧠 Reasoning Method",
+                            info="Select reasoning strategy"
+                        )
+                        
+                        prompt_template = gr.Dropdown(
+                            choices=components.get_prompt_template_choices(),
+                            value="Custom",
+                            label="📝 Prompt Template",
+                            info="Pre-built templates"
+                        )
+                        
+                        enable_critique = gr.Checkbox(
+                            label="🔍 Enable Self-Critique",
+                            value=True,
+                            info="Auto validation"
+                        )
+                        
+                        use_cache = gr.Checkbox(
+                            label="💾 Use Cache",
+                            value=True,
+                            info="Faster responses"
+                        )
+                        
+                        model = gr.Dropdown(
+                            choices=components.get_model_choices(),
+                            value=ModelConfig.LLAMA_70B.model_id,
+                            label="🤖 AI Model"
+                        )
+                        
+                        with gr.Accordion("🎛️ Advanced", open=False):
+                            temperature = gr.Slider(
+                                AppConfig.MIN_TEMPERATURE,
+                                AppConfig.MAX_TEMPERATURE,
+                                value=AppConfig.DEFAULT_TEMPERATURE,
+                                step=0.1,
+                                label="🌡️ Temperature"
+                            )
+                            
+                            max_tokens = gr.Slider(
+                                AppConfig.MIN_TOKENS,
+                                8000,
+                                value=AppConfig.DEFAULT_MAX_TOKENS,
+                                step=500,
+                                label="📊 Max Tokens"
+                            )
+                        
+                        gr.Markdown("### 📊 Live Metrics")
+                        metrics_display = gr.HTML(value=create_metrics_html(reasoner))
+                        
+                        with gr.Accordion("ℹ️ System Info", open=False):
+                            gr.HTML(components.get_system_info_html(reasoner))
+                
+                pdf_file_output = gr.File(label="📥 Download PDF", visible=True, file_types=[".pdf"])
+                sidebar_visible_state = gr.State(value=True)
+            
+            # TAB 2: Export & History
+            with gr.Tab("📤 Export & History"):
+                gr.Markdown("### 📤 Export Conversations")
+                gr.Markdown("Export your conversations in multiple formats with optional metadata.")
+                
+                with gr.Row():
+                    export_format = gr.Radio(
+                        choices=["json", "markdown", "txt", "pdf"],
+                        value="markdown",
+                        label="Export Format"
+                    )
+                    include_meta = gr.Checkbox(
+                        label="Include Metadata",
+                        value=True,
+                        info="Timestamps, models, metrics"
+                    )
+                
+                export_btn = gr.Button("📥 Export Now", variant="primary", size="lg")
+                export_output = gr.Code(label="Preview", language="markdown", lines=15)
+                download_file = gr.File(label="📥 Download File", file_types=[".json", ".md", ".txt", ".pdf"])
+                
+                gr.Markdown("---")
+                gr.Markdown("### 🔍 Search Conversations")
+                
+                with gr.Row():
+                    search_input = gr.Textbox(
+                        placeholder="Enter keyword to search...",
+                        scale=3,
+                        label="Search Query",
+                        show_label=False
+                    )
+                    search_btn = gr.Button("🔍 Search", scale=1, size="lg")
+                
+                search_results = gr.Markdown("💡 **Tip:** Enter a keyword and click Search.")
+                
+                gr.Markdown("---")
+                gr.Markdown("### 📊 Conversation History")
+                history_stats = gr.Markdown("Loading statistics...")
+            
+            # TAB 3: Analytics
+            with gr.Tab("📊 Analytics & Insights"):
+                gr.Markdown("### 📊 Performance Analytics Dashboard")
+                refresh_btn = gr.Button("🔄 Refresh Analytics", variant="primary", size="lg")
+                
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("#### ⚡ Performance Metrics")
+                        analytics_display = gr.HTML(components.get_empty_analytics_html())
+                    
+                    with gr.Column():
+                        gr.Markdown("#### 💾 Cache Statistics")
+                        cache_display = gr.Markdown("No cache data yet. Start a conversation to see cache performance.")
+                
+                gr.Markdown("---")
+                gr.Markdown("### 📈 Usage Distribution")
+                
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("#### 🤖 Model Usage")
+                        model_dist = gr.Markdown("No data yet. Models will be tracked as you use them.")
+                    
+                    with gr.Column():
+                        gr.Markdown("#### 🧠 Reasoning Mode Usage")
+                        mode_dist = gr.Markdown("No data yet. Reasoning modes will be tracked as you use them.")
+            
+            # TAB 4: Settings
+            with gr.Tab("⚙️ Settings"):
+                gr.Markdown("### ⚙️ Application Settings")
+                gr.Markdown("Current configuration and system controls.")
+                gr.HTML(components.get_settings_table_html())
+                
+                gr.Markdown("---")
+                gr.Markdown("### 🔧 System Actions")
+                
+                with gr.Row():
+                    clear_cache_btn = gr.Button("🗑️ Clear Cache", variant="stop", size="lg")
+                    reset_metrics_btn = gr.Button("🔄 Reset Metrics", variant="secondary", size="lg")
+                
+                cache_status = gr.Markdown("")
+        
+        # Event Handlers
+        def toggle_sidebar(visible):
+            return gr.update(visible=not visible), not visible
+        
+        # Reasoning workspace handlers
+        submit_btn.click(
+            handlers.process_message,
+            [msg, chatbot, reasoning_mode, enable_critique, model, temperature, max_tokens, prompt_template, use_cache],
+            [chatbot, metrics_display]
+        ).then(lambda: "", None, msg)
+        
+        msg.submit(
+            handlers.process_message,
+            [msg, chatbot, reasoning_mode, enable_critique, model, temperature, max_tokens, prompt_template, use_cache],
+            [chatbot, metrics_display]
+        ).then(lambda: "", None, msg)
+        
+        clear_btn.click(handlers.reset_chat, None, [chatbot, metrics_display])
+        pdf_btn.click(handlers.download_chat_pdf, None, pdf_file_output)
+        toggle_sidebar_btn.click(toggle_sidebar, sidebar_visible_state, [sidebar, sidebar_visible_state])
+        
+        # Export handlers (corrected method name)
+        export_btn.click(
+            handlers.export_conversation,
+            [export_format, include_meta],
+            [export_output, download_file]
+        )
+        
+        search_btn.click(
+            handlers.search_conversations,
+            search_input,
+            search_results
+        )
+        
+        # Analytics handlers
+        refresh_btn.click(
+            handlers.refresh_analytics,
+            None,
+            [analytics_display, cache_display, model_dist, mode_dist]
+        )
+        
+        # Settings handlers
+        clear_cache_btn.click(handlers.clear_cache_action, None, cache_status)
+        reset_metrics_btn.click(handlers.reset_metrics_action, None, cache_status)
+        
+        # Load initial data
+        demo.load(handlers.update_history_stats, None, history_stats)
+    
+    return demo

src/ui/styles.py

@@ -4,263 +4,495 @@ CSS styles for the Gradio interface
 
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
-
 :root {
-    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
-    --border-radius: 16px;
-    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --bg-primary: #0f0f0f;
+    --bg-secondary: #1a1a1a;
+    --bg-tertiary: #2d2d2d;
+    --bg-card: #1e1e1e;
+    --text-primary: #ffffff;
+    --text-secondary: #b0b0b0;
+    --text-tertiary: #888888;
+    --accent-primary: #3b82f6;
+    --accent-secondary: #60a5fa;
+    --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    --success: #10b981;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    --border-color: #333333;
+    --border-light: #404040;
+    --shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
+    --shadow-light: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --border-radius: 12px;
+    --border-radius-lg: 16px;
+    --transition: all 0.3s ease;
+}
+
+/* ==================== GLOBAL STYLES ==================== */
+
+.gradio-container {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding: 20px !important;
+}
+
+* {
+    color: var(--text-primary) !important;
 }
 
-/* ==================== HEADER ==================== */
+/* ==================== ENHANCED HEADER ==================== */
 
 .research-header {
-    background: var(--primary-gradient);
-    padding: 3rem 2.5rem;
-    border-radius: var(--border-radius);
-    color: white;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow-lg);
-    animation: slideDown 0.6s ease-out;
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 2.5rem 2rem !important;
+    border-radius: var(--border-radius-lg) !important;
+    margin-bottom: 2rem !important;
+    box-shadow: var(--shadow-dark) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.research-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--accent-gradient);
+}
+
+.research-header h1 {
+    font-size: 2.5rem !important;
+    font-weight: 700 !important;
+    margin-bottom: 1rem !important;
+    color: var(--text-primary) !important;
+    background: none !important;
+    -webkit-text-fill-color: var(--text-primary) !important;
 }
 
-.research-header h1 { 
-    font-size: 2.5rem; 
-    font-weight: 800; 
-    margin-bottom: 1rem;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+.research-header .subtitle {
+    font-size: 1.1rem !important;
+    color: var(--text-secondary) !important;
+    margin-bottom: 1.5rem !important;
+    line-height: 1.6 !important;
 }
 
+/* ==================== CLEAN BADGES ==================== */
+
 .badge {
-    background: rgba(255,255,255,0.25);
-    backdrop-filter: blur(10px);
-    color: white;
-    padding: 0.5rem 1.2rem;
-    border-radius: 25px;
-    font-size: 0.9rem;
-    margin: 0.3rem;
-    display: inline-block;
-    transition: var(--transition);
-    border: 1px solid rgba(255,255,255,0.2);
+    background: var(--bg-tertiary) !important;
+    color: var(--text-secondary) !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: 20px !important;
+    font-size: 0.85rem !important;
+    font-weight: 500 !important;
+    margin: 0.3rem !important;
+    border: 1px solid var(--border-light) !important;
+    transition: var(--transition) !important;
+    backdrop-filter: none !important;
 }
 
 .badge:hover {
-    transform: translateY(-2px);
-    background: rgba(255,255,255,0.35);
+    background: var(--accent-primary) !important;
+    color: white !important;
+    transform: translateY(-2px) !important;
+    box-shadow: var(--shadow-medium) !important;
 }
 
-/* ==================== METRICS CARD ==================== */
+/* ==================== HIGH CONTRAST CARDS ==================== */
 
 .metrics-card {
-    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-    border-left: 5px solid #667eea;
-    padding: 1.8rem;
-    border-radius: var(--border-radius);
-    margin: 1rem 0;
-    font-family: 'JetBrains Mono', monospace;
-    transition: var(--transition);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    color: #2c3e50 !important;
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 1.5rem !important;
+    border-radius: var(--border-radius) !important;
+    margin: 1rem 0 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    transition: var(--transition) !important;
+    box-shadow: var(--shadow-medium) !important;
+    position: relative;
+}
+
+.metrics-card:hover {
+    border-color: var(--accent-primary) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: var(--shadow-dark) !important;
 }
 
 .metrics-card * {
-    color: #2c3e50 !important;
+    color: var(--text-primary) !important;
+    font-weight: 400 !important;
 }
 
 .metrics-card strong {
-    color: #1a202c !important;
-    font-weight: 700 !important;
+    color: var(--accent-secondary) !important;
+    font-weight: 600 !important;
 }
 
-.metrics-card:hover {
-    transform: translateX(5px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+.metrics-card p {
+    margin: 0.5rem 0 !important;
+    line-height: 1.5 !important;
+    color: var(--text-primary) !important;
 }
 
 /* ==================== ANALYTICS PANEL ==================== */
 
 .analytics-panel {
-    background: var(--success-gradient);
-    color: white;
-    padding: 2rem;
-    border-radius: var(--border-radius);
-    animation: fadeIn 0.5s ease-out;
-    box-shadow: var(--shadow-lg);
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-primary) !important;
+    padding: 2rem !important;
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--shadow-dark) !important;
+    margin: 1rem 0 !important;
 }
 
 .analytics-panel * {
-    color: white !important;
+    color: var(--text-primary) !important;
 }
 
 .analytics-panel h3 {
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
+    margin-bottom: 1.5rem !important;
+    font-size: 1.4rem !important;
+    font-weight: 600 !important;
+    color: var(--text-primary) !important;
 }
 
 .analytics-panel p {
-    line-height: 1.6;
+    line-height: 1.6 !important;
+    color: var(--text-secondary) !important;
+    margin-bottom: 1rem !important;
 }
 
 .analytics-panel strong {
-    font-weight: 600;
+    color: var(--text-primary) !important;
+    font-weight: 600 !important;
 }
 
 /* ==================== STATUS INDICATORS ==================== */
 
-.status-active { 
-    color: #10b981 !important; 
-    font-weight: bold; 
-    animation: pulse 2s infinite;
-    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+.status-active {
+    color: var(--success) !important;
+    font-weight: 600 !important;
+    padding: 0.2rem 0.5rem !important;
+    background: rgba(16, 185, 129, 0.1) !important;
+    border-radius: 4px !important;
+    border: 1px solid rgba(16, 185, 129, 0.3) !important;
 }
 
-/* ==================== ANIMATIONS ==================== */
+/* ==================== BUTTON ENHANCEMENTS ==================== */
 
-@keyframes slideDown {
-    from { opacity: 0; transform: translateY(-30px); }
-    to { opacity: 1; transform: translateY(0); }
+.gr-button {
+    background: var(--accent-primary) !important;
+    color: white !important;
+    border: none !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    transition: var(--transition) !important;
+    box-shadow: var(--shadow-medium) !important;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: scale(0.95); }
-    to { opacity: 1; transform: scale(1); }
+.gr-button:hover {
+    background: var(--accent-secondary) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: var(--shadow-dark) !important;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
+.gr-button:active {
+    transform: translateY(0) !important;
 }
 
-/* ==================== GLOBAL STYLES ==================== */
+/* ==================== INPUT ENHANCEMENTS ==================== */
 
-.gradio-container { 
-    font-family: 'Inter', sans-serif !important;
-    max-width: 1600px !important;
+.gr-input, .gr-textbox, .gr-dropdown {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-primary) !important;
+    border-radius: 8px !important;
+    padding: 0.75rem 1rem !important;
+    transition: var(--transition) !important;
 }
 
-.gr-button { 
-    transition: var(--transition) !important; 
+.gr-input:focus, .gr-textbox:focus, .gr-dropdown:focus {
+    border-color: var(--accent-primary) !important;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+    outline: none !important;
 }
 
-.gr-button:hover { 
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
+.gr-input::placeholder, .gr-textbox::placeholder {
+    color: var(--text-tertiary) !important;
+}
+
+/* ==================== MARKDOWN TEXT FIXES ==================== */
+
+.gr-markdown {
+    color: var(--text-primary) !important;
+}
+
+.gr-markdown p {
+    color: var(--text-primary) !important;
+    line-height: 1.6 !important;
 }
 
-/* ==================== MARKDOWN TEXT FIX ==================== */
+.gr-markdown strong {
+    color: var(--text-primary) !important;
+    font-weight: 600 !important;
+}
 
 .gr-markdown .metrics-card {
-    color: #2c3e50 !important;
+    color: var(--text-primary) !important;
 }
 
 .gr-markdown .metrics-card p {
-    color: #2c3e50 !important;
-    margin: 0.25rem 0 !important;
+    color: var(--text-primary) !important;
 }
 
 .gr-markdown .metrics-card span {
-    color: #2c3e50 !important;
+    color: var(--text-primary) !important;
 }
 
-/* ==================== SIDEBAR TOGGLE ==================== */
+/* ==================== SIDEBAR & LAYOUT ==================== */
 
 .sidebar-hidden {
     display: none !important;
 }
 
 .toggle-btn {
-    position: fixed;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1000;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-    transition: all 0.3s ease;
-    font-size: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background: var(--accent-primary) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 0.75rem !important;
+    cursor: pointer !important;
+    transition: var(--transition) !important;
+    box-shadow: var(--shadow-medium) !important;
 }
 
 .toggle-btn:hover {
-    transform: translateY(-50%) scale(1.1);
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+    background: var(--accent-secondary) !important;
+    transform: scale(1.05) !important;
 }
 
 .settings-column {
-    transition: all 0.3s ease-in-out;
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    padding: 1.5rem !important;
+}
+
+/* ==================== TABLE STYLES ==================== */
+
+.gr-table {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    overflow: hidden !important;
+}
+
+.gr-table th {
+    background: var(--bg-tertiary) !important;
+    color: var(--text-primary) !important;
+    font-weight: 600 !important;
+    padding: 1rem !important;
+    border-bottom: 1px solid var(--border-color) !important;
+}
+
+.gr-table td {
+    padding: 1rem !important;
+    border-bottom: 1px solid var(--border-light) !important;
+    color: var(--text-primary) !important;
 }
 
-.fullscreen-chat .gradio-container {
-    max-width: 98% !important;
+.gr-table tr:hover {
+    background: var(--bg-tertiary) !important;
+}
+
+/* ==================== SCROLLBAR STYLING ==================== */
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-primary);
+}
+
+/* ==================== LOADING STATES ==================== */
+
+.loading-spinner {
+    border: 3px solid var(--bg-tertiary);
+    border-top: 3px solid var(--accent-primary);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 20px auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* ==================== PROGRESS BARS ==================== */
+
+.gr-progress {
+    background: var(--bg-tertiary) !important;
+    border-radius: 10px !important;
+    overflow: hidden !important;
+}
+
+.gr-progress .inner {
+    background: var(--accent-gradient) !important;
+}
+
+/* ==================== ALERT STYLES ==================== */
+
+.gr-alert {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    padding: 1rem 1.5rem !important;
+    margin: 1rem 0 !important;
+}
+
+.gr-alert.success {
+    border-left: 4px solid var(--success) !important;
+}
+
+.gr-alert.warning {
+    border-left: 4px solid var(--warning) !important;
+}
+
+.gr-alert.error {
+    border-left: 4px solid var(--error) !important;
 }
 
 /* ==================== RESPONSIVE DESIGN ==================== */
 
 @media (max-width: 768px) {
+    .gradio-container {
+        padding: 1rem !important;
+    }
+    
+    .research-header {
+        padding: 2rem 1.5rem !important;
+    }
+    
     .research-header h1 {
-        font-size: 1.8rem;
+        font-size: 2rem !important;
     }
     
     .badge {
-        font-size: 0.75rem;
-        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem !important;
+        padding: 0.4rem 0.8rem !important;
     }
     
-    .toggle-btn {
-        width: 40px;
-        height: 40px;
-        font-size: 16px;
-        right: 10px;
+    .metrics-card {
+        padding: 1.25rem !important;
+    }
+    
+    .analytics-panel {
+        padding: 1.5rem !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .research-header h1 {
+        font-size: 1.75rem !important;
+    }
+    
+    .research-header .subtitle {
+        font-size: 1rem !important;
     }
     
     .metrics-card {
-        padding: 1.2rem;
-        font-size: 0.9rem;
+        padding: 1rem !important;
+        font-size: 0.9rem !important;
     }
 }
 
-/* ==================== DARK MODE SUPPORT ==================== */
+/* ==================== ACCESSIBILITY ENHANCEMENTS ==================== */
 
-@media (prefers-color-scheme: dark) {
-    .metrics-card {
-        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-        color: #e2e8f0 !important;
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition: none !important;
+        animation: none !important;
     }
-    
-    .metrics-card * {
-        color: #e2e8f0 !important;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    :root {
+        --bg-primary: #000000;
+        --bg-secondary: #0a0a0a;
+        --bg-card: #111111;
+        --text-primary: #ffffff;
+        --text-secondary: #e0e0e0;
+        --border-color: #555555;
     }
     
-    .metrics-card strong {
-        color: #f1f5f9 !important;
+    .badge {
+        border: 2px solid var(--border-color) !important;
     }
 }
 
-/* ==================== LOADING SPINNER ==================== */
+/* ==================== FOCUS INDICATORS ==================== */
 
-.loading-spinner {
-    border: 3px solid #f3f3f3;
-    border-top: 3px solid #667eea;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-    margin: 20px auto;
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid var(--accent-primary) !important;
+    outline-offset: 2px !important;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+/* ==================== UTILITY CLASSES ==================== */
+
+.text-primary { color: var(--text-primary) !important; }
+.text-secondary { color: var(--text-secondary) !important; }
+.text-accent { color: var(--accent-primary) !important; }
+.bg-card { background: var(--bg-card) !important; }
+.bg-secondary { background: var(--bg-secondary) !important; }
+
+.border-light { border-color: var(--border-light) !important; }
+.border-medium { border-color: var(--border-color) !important; }
+
+.shadow-medium { box-shadow: var(--shadow-medium) !important; }
+.shadow-dark { box-shadow: var(--shadow-dark) !important; }
+
+/* ==================== CODE BLOCKS ==================== */
+
+.gr-code {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    color: var(--text-primary) !important;
 }
+
+.gr-code .token.keyword { color: var(--accent-secondary) !important; }
+.gr-code .token.string { color: var(--success) !important; }
+.gr-code .token.comment { color: var(--text-tertiary) !important; }
+.gr-code .token.function { color: var(--accent-primary) !important; }
 """
 
-SIDEBAR_CSS = CUSTOM_CSS
+SIDEBAR_CSS = CUSTOM_CSS