Migrate to Full Stack Web App

main.py

@@ -9,6 +9,7 @@ import datetime
 from typing import Optional, List, Dict, Any
 from fastapi import FastAPI, UploadFile, File, HTTPException, Form, BackgroundTasks, Depends
 from fastapi.responses import StreamingResponse, JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel, Field, validator
 import io
@@ -65,6 +66,9 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Mount Static Files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
 # =============================================================================
 # PYDANTIC MODELS FOR REQUEST/RESPONSE VALIDATION
 # =============================================================================
@@ -656,28 +660,17 @@ async def get_contract_videos(contract_id: str):
 
 @app.get("/", tags=["System"])
 async def root():
-    """API root endpoint with comprehensive information"""
+    """Serve the Single Page Application"""
+    return FileResponse("static/index.html")
+
+@app.get("/api/info", tags=["System"])
+async def api_info():
+    """API information endpoint"""
     return {
         "message": "Jan-Contract Enhanced API",
         "version": "2.1.0",
         "description": "Comprehensive API for India's informal workforce",
-        "features": [
-            "Contract Generation",
-            "Scheme Discovery", 
-            "Document Analysis",
-            "AI Assistant",
-            "Media Processing"
-        ],
-        "endpoints": {
-            "health": "/health",
-            "contracts": "/api/v1/contracts/generate",
-            "schemes": "/api/v1/schemes/find",
-            "demystify": "/api/v1/demystify/upload",
-            "assistant": "/api/v1/assistant/chat",
-            "media": "/api/v1/media/upload-video"
-        },
-        "docs": "/docs",
-        "redoc": "/redoc"
+        "docs": "/docs"
     }
 
 # =============================================================================

static/app.js

@@ -0,0 +1,257 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Navigation Logic
+    const navLinks = document.querySelectorAll('.nav-links li');
+    const sections = document.querySelectorAll('main section');
+
+    navLinks.forEach(link => {
+        link.addEventListener('click', () => {
+            // Remove active class from all
+            navLinks.forEach(l => l.classList.remove('active'));
+            sections.forEach(s => {
+                s.classList.add('hidden-section');
+                s.classList.remove('active-section');
+            });
+
+            // Add active to clicked
+            link.classList.add('active');
+            const targetId = link.getAttribute('data-tab');
+            const targetSection = document.getElementById(targetId);
+            targetSection.classList.remove('hidden-section');
+            setTimeout(() => targetSection.classList.add('active-section'), 10);
+        });
+    });
+
+    // --- CONTRACT GENERATOR ---
+    const btnGenerate = document.getElementById('btn-generate-contract');
+    const contractInput = document.getElementById('contract-input');
+    const contractResult = document.getElementById('contract-result');
+    const contractText = document.getElementById('contract-text');
+    const contractTrivia = document.getElementById('contract-trivia');
+    const triviaContent = document.getElementById('trivia-content');
+
+    btnGenerate.addEventListener('click', async () => {
+        const text = contractInput.value.trim();
+        if (!text) return showToast('Please describe the agreement first.', 'error');
+
+        setLoading(btnGenerate, true);
+        try {
+            const resp = await fetch('/api/v1/contracts/generate', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ user_request: text })
+            });
+            const data = await resp.json();
+            
+            if (data.success) {
+                contractResult.classList.remove('hidden');
+                contractText.innerHTML = marked.parse(data.data.contract);
+                
+                // Render Trivia
+                if (data.data.legal_trivia && data.data.legal_trivia.trivia) {
+                    contractTrivia.classList.remove('hidden');
+                    triviaContent.innerHTML = data.data.legal_trivia.trivia.map(t => `
+                        <div class="trivia-item">
+                            <h5>${t.point}</h5>
+                            <p>${t.explanation}</p>
+                            <a href="${t.source_url}" target="_blank">Source <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
+                        </div>
+                    `).join('');
+                } else {
+                    contractTrivia.classList.add('hidden');
+                }
+                showToast('Contract generated successfully!');
+            } else {
+                showToast(data.message || 'Error generating contract', 'error');
+            }
+        } catch (e) {
+            showToast('Connection failed', 'error');
+        } finally {
+            setLoading(btnGenerate, false);
+        }
+    });
+
+    // --- SCHEME FINDER ---
+    const btnFindSchemes = document.getElementById('btn-find-schemes');
+    const schemeInput = document.getElementById('scheme-input');
+    const schemesList = document.getElementById('schemes-list');
+    const schemesLoader = document.getElementById('schemes-loader');
+
+    btnFindSchemes.addEventListener('click', async () => {
+        const profile = schemeInput.value.trim();
+        if (!profile) return showToast('Please enter a profile.', 'error');
+
+        schemesList.innerHTML = '';
+        schemesLoader.classList.remove('hidden');
+        
+        try {
+            const resp = await fetch('/api/v1/schemes/find', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ user_profile: profile })
+            });
+            const data = await resp.json();
+
+            if (data.success && data.data.schemes) {
+                schemesList.innerHTML = data.data.schemes.map(s => `
+                    <div class="scheme-card">
+                        <h4>${s.scheme_name}</h4>
+                        <p>${s.description}</p>
+                        <br>
+                        <small><strong>Target:</strong> ${s.target_audience}</small>
+                        <br>
+                        <a href="${s.official_link}" target="_blank">Visit Official Site &rarr;</a>
+                    </div>
+                `).join('');
+            } else {
+                schemesList.innerHTML = '<p class="text-dim">No schemes found. Try a different description.</p>';
+            }
+        } catch (e) {
+            showToast('Search failed', 'error');
+        } finally {
+            schemesLoader.classList.add('hidden');
+        }
+    });
+
+    // --- DEMYSTIFIER ---
+    const dropZone = document.getElementById('drop-zone');
+    const fileInput = document.getElementById('pdf-upload');
+    const analysisView = document.getElementById('analysis-view');
+    let currentSessionId = null;
+
+    dropZone.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', handleFileUpload);
+    
+    // Drag and Drop
+    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.style.borderColor = 'var(--primary)'; });
+    dropZone.addEventListener('dragleave', (e) => { e.preventDefault(); dropZone.style.borderColor = 'var(--border)'; });
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.style.borderColor = 'var(--border)';
+        if (e.dataTransfer.files.length) {
+            handleFileUpload({ target: { files: e.dataTransfer.files } });
+        }
+    });
+
+    async function handleFileUpload(e) {
+        const file = e.target.files[0];
+        if (!file || file.type !== 'application/pdf') return showToast('Please upload a PDF', 'error');
+
+        // Show simplified loading
+        dropZone.innerHTML = '<div class="loader"></div><p>Analyzing Document...</p>';
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            const resp = await fetch('/api/v1/demystify/upload', {
+                method: 'POST',
+                body: formData
+            });
+            const data = await resp.json();
+
+            if (data.success) {
+                currentSessionId = data.data.session_id;
+                dropZone.classList.add('hidden');
+                analysisView.classList.remove('hidden');
+
+                document.getElementById('doc-summary').innerHTML = `<p>${data.data.report.summary}</p>`;
+                document.getElementById('doc-terms').innerHTML = data.data.report.key_terms.map(t => `
+                    <div class="term-item" style="margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,0.05)">
+                        <strong style="color:var(--secondary)">${t.term}:</strong> ${t.explanation}
+                    </div>
+                `).join('');
+            } else {
+                showToast('Analysis failed', 'error');
+                resetUpload();
+            }
+        } catch (e) {
+            showToast('Upload error', 'error');
+            resetUpload();
+        }
+    }
+
+    // Doc Chat
+    const btnDocChat = document.getElementById('btn-doc-chat');
+    const docChatInput = document.getElementById('doc-chat-input');
+    const docChatMessages = document.getElementById('doc-chat-messages');
+
+    btnDocChat.addEventListener('click', () => sendChat(docChatInput, docChatMessages, '/api/v1/demystify/chat', { session_id: currentSessionId }));
+
+    // --- GENERAL ASSISTANT ---
+    const btnGeneralChat = document.getElementById('btn-general-chat');
+    const generalChatInput = document.getElementById('general-chat-input');
+    const generalChatMessages = document.getElementById('general-chat-messages');
+
+    btnGeneralChat.addEventListener('click', () => sendChat(generalChatInput, generalChatMessages, '/api/v1/assistant/chat', {}));
+
+    // Chat Helper
+    async function sendChat(inputEl, containerEl, endpoint, extraPayload) {
+        const question = inputEl.value.trim();
+        if (!question) return;
+
+        // Add User Message
+        addMessage(containerEl, question, 'user');
+        inputEl.value = '';
+
+        // Add Loading Bubble
+        const loadingId = addMessage(containerEl, '<i class="fa-solid fa-ellipsis fa-fade"></i>', 'ai');
+
+        try {
+            const resp = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ question, ...extraPayload })
+            });
+            const data = await resp.json();
+            
+            // Remove Loader and Add Response
+            document.getElementById(loadingId).remove();
+            
+            const answer = data.data.answer || data.data.response || "I couldn't understand that.";
+            addMessage(containerEl, marked.parse(answer), 'ai');
+
+        } catch (e) {
+            document.getElementById(loadingId).remove();
+            addMessage(containerEl, "Sorry, something went wrong.", 'ai');
+        }
+    }
+
+    function addMessage(container, html, type) {
+        const id = 'msg-' + Date.now();
+        const div = document.createElement('div');
+        div.className = `message ${type}`;
+        div.id = id;
+        div.innerHTML = `
+            <div class="avatar"><i class="fa-solid ${type === 'ai' ? 'fa-robot' : 'fa-user'}"></i></div>
+            <div class="bubble">${html}</div>
+        `;
+        container.appendChild(div);
+        container.scrollTop = container.scrollHeight;
+        return id;
+    }
+
+    // Utilities
+    function showToast(msg, type = 'success') {
+        const toast = document.getElementById('toast');
+        toast.textContent = msg;
+        toast.style.background = type === 'error' ? '#ef4444' : '#10b981';
+        toast.classList.remove('hidden');
+        setTimeout(() => toast.classList.add('hidden'), 3000);
+    }
+
+    function setLoading(btn, isLoading) {
+        if (isLoading) {
+            btn.dataset.original = btn.innerHTML;
+            btn.innerHTML = '<div class="loader" style="width:20px; height:20px; margin:0; border-width:2px;"></div>';
+            btn.disabled = true;
+        } else {
+            btn.innerHTML = btn.dataset.original;
+            btn.disabled = false;
+        }
+    }
+
+    function resetUpload() {
+        dropZone.innerHTML = '<i class="fa-solid fa-cloud-arrow-up"></i><h3>Drag & Drop PDF here</h3><p>or click to browse</p><input type="file" id="pdf-upload" accept="application/pdf" hidden>';
+        dropZone.classList.remove('hidden');
+    }
+});

static/index.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jan-Contract | AI Legal Assistant</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar Navigation -->
+        <nav class="sidebar">
+            <div class="logo">
+                <i class="fa-solid fa-scale-balanced"></i>
+                <span>Jan-Contract</span>
+            </div>
+            
+            <ul class="nav-links">
+                <li class="active" data-tab="contract">
+                    <i class="fa-solid fa-file-signature"></i>
+                    <span>Contract Generator</span>
+                </li>
+                <li data-tab="schemes">
+                    <i class="fa-solid fa-hand-holding-dollar"></i>
+                    <span>Scheme Finder</span>
+                </li>
+                <li data-tab="demystifier">
+                    <i class="fa-solid fa-magnifying-glass-chart"></i>
+                    <span>Document Analyzer</span>
+                </li>
+                <li data-tab="assistant">
+                    <i class="fa-solid fa-robot"></i>
+                    <span>AI Assistant</span>
+                </li>
+            </ul>
+
+            <div class="footer">
+                <p>Powered by Gemini AI</p>
+                <div class="status-indicator">
+                    <div class="dot"></div> System Online
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main Content Area -->
+        <main class="main-content">
+            
+            <!-- Contract Generator Section -->
+            <section id="contract" class="active-section">
+                <div class="header-hero">
+                    <h1>Create Digital Agreements</h1>
+                    <p>Draft professional contracts instantly with AI. Just describe what you need.</p>
+                </div>
+
+                <div class="split-view">
+                    <div class="input-card glass-panel">
+                        <h3><i class="fa-regular fa-comment-dots"></i> Describe Agreement</h3>
+                        <textarea id="contract-input" placeholder="E.g., I, Rajesh, agree to hire Suresh as a driver for 6 months at Rs. 15,000 per month..."></textarea>
+                        <button id="btn-generate-contract" class="primary-btn">
+                            <i class="fa-solid fa-wand-magic-sparkles"></i> Generate Contract
+                        </button>
+                    </div>
+
+                    <div class="output-card glass-panel hidden" id="contract-result">
+                        <div class="card-header">
+                            <h3><i class="fa-solid fa-file-contract"></i> Drafted Contract</h3>
+                            <button id="btn-download-pdf" class="icon-btn" title="Download PDF"><i class="fa-solid fa-download"></i></button>
+                        </div>
+                        <div class="markdown-preview" id="contract-text"></div>
+                        
+                        <div class="trivia-box hidden" id="contract-trivia">
+                            <h4><i class="fa-solid fa-lightbulb"></i> Legal Insights</h4>
+                            <div id="trivia-content"></div>
+                        </div>
+
+                        <!-- Video Consent Placeholder -->
+                        <div class="video-consent-area">
+                            <h4><i class="fa-solid fa-video"></i> Video Consent</h4>
+                            <p>Record a video stating your name and agreement to the terms.</p>
+                            <button class="secondary-btn"><i class="fa-solid fa-camera"></i> Record Video (Coming Soon)</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Scheme Finder Section -->
+            <section id="schemes" class="hidden-section">
+                <div class="header-hero">
+                    <h1>Government Schemes</h1>
+                    <p>Find financial aid and benefits tailored to your profile.</p>
+                </div>
+
+                <div class="center-view">
+                    <div class="search-bar glass-panel">
+                        <input type="text" id="scheme-input" placeholder="Describe your profile (e.g., A 40-year-old female farmer in Punjab with 2 acres of land)">
+                        <button id="btn-find-schemes" class="search-btn"><i class="fa-solid fa-search"></i></button>
+                    </div>
+
+                    <div id="schemes-loader" class="loader hidden"></div>
+
+                    <div id="schemes-list" class="cards-grid">
+                        <!-- Schemes will be injected here -->
+                    </div>
+                </div>
+            </section>
+
+            <!-- Demystifier Section -->
+            <section id="demystifier" class="hidden-section">
+                <div class="header-hero">
+                    <h1>Document Demystifier</h1>
+                    <p>Upload confusing legal documents and let AI explain them simply.</p>
+                </div>
+
+                <div class="upload-area glass-panel" id="drop-zone">
+                    <i class="fa-solid fa-cloud-arrow-up"></i>
+                    <h3>Drag & Drop PDF here</h3>
+                    <p>or click to browse</p>
+                    <input type="file" id="pdf-upload" accept="application/pdf" hidden>
+                </div>
+
+                <div id="analysis-view" class="hidden">
+                    <div class="analysis-grid">
+                        <div class="summary-card glass-panel">
+                            <h3><i class="fa-solid fa-list-check"></i> Summary</h3>
+                            <div id="doc-summary"></div>
+                        </div>
+                        
+                        <div class="terms-card glass-panel">
+                            <h3><i class="fa-solid fa-book-open"></i> Key Terms</h3>
+                            <div id="doc-terms"></div>
+                        </div>
+                    </div>
+
+                    <div class="chat-card glass-panel">
+                        <div class="chat-header">
+                            <h3><i class="fa-regular fa-comments"></i> Ask Questions</h3>
+                        </div>
+                        <div class="chat-messages" id="doc-chat-messages">
+                            <div class="message ai">
+                                <div class="avatar"><i class="fa-solid fa-robot"></i></div>
+                                <div class="bubble">I've analyzed your document. What would you like to know?</div>
+                            </div>
+                        </div>
+                        <div class="chat-input-area">
+                            <input type="text" id="doc-chat-input" placeholder="Ask a question about this file...">
+                            <button id="btn-doc-chat" class="send-btn"><i class="fa-solid fa-paper-plane"></i></button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- AI Assistant Section -->
+            <section id="assistant" class="hidden-section">
+                <div class="header-hero">
+                    <h1>General Legal Assistant</h1>
+                    <p>Ask anything about Indian law, rights, or procedures.</p>
+                </div>
+
+                <div class="chat-container glass-panel">
+                    <div class="chat-messages" id="general-chat-messages">
+                        <div class="message ai">
+                            <div class="avatar"><i class="fa-solid fa-robot"></i></div>
+                            <div class="bubble">Namaste! I am your AI legal assistant. How can I help you today?</div>
+                        </div>
+                    </div>
+                    <div class="chat-input-area">
+                        <input type="text" id="general-chat-input" placeholder="Type your question here...">
+                        <button id="btn-general-chat" class="send-btn"><i class="fa-solid fa-paper-plane"></i></button>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+    </div>
+
+    <!-- Toast Notification -->
+    <div id="toast" class="toast hidden">Request Successful</div>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>

static/styles.css

@@ -0,0 +1,468 @@
+:root {
+    --primary: #4f46e5;
+    --primary-dark: #4338ca;
+    --secondary: #ec4899;
+    --bg-dark: #0f172a;
+    --bg-panel: rgba(30, 41, 59, 0.7);
+    --text-light: #f8fafc;
+    --text-dim: #94a3b8;
+    --border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Outfit', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    height: 100vh;
+    overflow: hidden;
+    background-image: 
+        radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.15) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 20%);
+}
+
+/* Layout */
+.app-container {
+    display: flex;
+    height: 100%;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 260px;
+    background: var(--bg-panel);
+    backdrop-filter: blur(12px);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 3rem;
+    color: var(--text-light);
+}
+
+.logo i {
+    color: var(--primary);
+    font-size: 1.8rem;
+}
+
+.nav-links {
+    list-style: none;
+    flex: 1;
+}
+
+.nav-links li {
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-dim);
+    transition: all 0.3s ease;
+}
+
+.nav-links li:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-light);
+    transform: translateX(4px);
+}
+
+.nav-links li.active {
+    background: var(--gradient);
+    color: white;
+    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
+}
+
+.footer .status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    margin-top: 5px;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    background-color: #10b981;
+    border-radius: 50%;
+    box-shadow: 0 0 8px #10b981;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem 3rem;
+    position: relative;
+}
+
+section {
+    max-width: 1200px;
+    margin: 0 auto;
+    opacity: 1;
+    transition: opacity 0.4s ease;
+}
+
+.hidden-section {
+    display: none;
+    opacity: 0;
+}
+
+.header-hero {
+    margin-bottom: 2.5rem;
+}
+
+.header-hero h1 {
+    font-size: 2.5rem;
+    background: var(--gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+.header-hero p {
+    color: var(--text-dim);
+    font-size: 1.1rem;
+}
+
+/* Glass Panels */
+.glass-panel {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 2rem;
+    backdrop-filter: blur(10px);
+    box-shadow: var(--glass-shadow);
+}
+
+/* Contract Section */
+.split-view {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    height: calc(100vh - 200px);
+}
+
+.input-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.input-card h3, .output-card h3 {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+textarea {
+    flex: 1;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1rem;
+    color: var(--text-light);
+    font-family: 'Outfit', sans-serif;
+    font-size: 1rem;
+    resize: none;
+    margin-bottom: 1.5rem;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+textarea:focus {
+    border-color: var(--primary);
+}
+
+.primary-btn {
+    background: var(--gradient);
+    border: none;
+    padding: 1rem;
+    border-radius: 12px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);
+}
+
+.hidden {
+    display: none !important;
+}
+
+.markdown-preview {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    padding: 1rem;
+    height: 400px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.icon-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    color: var(--text-light);
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.icon-btn:hover {
+    background: var(--primary);
+}
+
+/* Schemes Section */
+.center-view {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.search-bar {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+
+.search-bar input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-light);
+    font-size: 1.1rem;
+    outline: none;
+}
+
+.search-btn {
+    background: var(--primary);
+    border: none;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+}
+
+.cards-grid {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.scheme-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 1.5rem;
+    transition: all 0.3s;
+}
+
+.scheme-card:hover {
+    background: rgba(255, 255, 255, 0.06);
+    transform: translateY(-3px);
+    border-color: var(--primary);
+}
+
+.scheme-card h4 {
+    color: var(--secondary);
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.scheme-card a {
+    display: inline-block;
+    margin-top: 1rem;
+    color: var(--primary);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+/* Chat Interface */
+.chat-container {
+    height: calc(100vh - 250px);
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.message {
+    display: flex;
+    gap: 1rem;
+    max-width: 80%;
+}
+
+.message.user {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+}
+
+.message.user .avatar {
+    background: var(--secondary);
+}
+
+.bubble {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1rem;
+    border-radius: 16px;
+    border-top-left-radius: 0;
+    line-height: 1.5;
+}
+
+.message.user .bubble {
+    background: var(--primary);
+    border-radius: 16px;
+    border-top-right-radius: 0;
+}
+
+.chat-input-area {
+    margin-top: 1rem;
+    display: flex;
+    gap: 10px;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 10px;
+    border-radius: 16px;
+}
+
+.chat-input-area input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    padding: 0.5rem;
+    outline: none;
+}
+
+.send-btn {
+    background: transparent;
+    border: none;
+    color: var(--primary);
+    width: 40px;
+    cursor: pointer;
+    font-size: 1.2rem;
+}
+
+.send-btn:hover {
+    color: var(--text-light);
+}
+
+/* Drag and Drop */
+.upload-area {
+    border: 2px dashed var(--border);
+    text-align: center;
+    padding: 4rem;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.upload-area:hover {
+    border-color: var(--primary);
+    background: rgba(79, 70, 229, 0.05);
+}
+
+.upload-area i {
+    font-size: 3rem;
+    color: var(--text-dim);
+    margin-bottom: 1rem;
+}
+
+/* Loader */
+.loader {
+    border: 3px solid rgba(255,255,255,0.1);
+    border-top: 3px solid var(--primary);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 2rem auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Toast */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: #10b981;
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from { transform: translateY(100px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .app-container { flex-direction: column; }
+    .sidebar { width: 100%; height: auto; flex-direction: row; padding: 1rem; align-items: center; justify-content: space-between; }
+    .nav-links { display: flex; gap: 1rem; margin-bottom: 0; }
+    .nav-links li span { display: none; }
+    .logo, .footer { margin: 0; }
+    .split-view { grid-template-columns: 1fr; height: auto; }
+}