Upload folder using huggingface_hub

.gitattributes

@@ -0,0 +1,17 @@
+# Git LFS tracking for binary files
+# HuggingFace Spaces rejects binary files unless tracked via LFS
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.tar.gz filter=lfs diff=lfs merge=lfs -text
+*.woff filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+*.ttf filter=lfs diff=lfs merge=lfs -text
+*.eot filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -20,7 +20,7 @@ RUN pip install --no-cache-dir --timeout 300 --upgrade pip && \
 # This path is inside WORKDIR and persists into the running container
 ENV HF_HOME=/app/model_cache
 ENV SENTENCE_TRANSFORMERS_HOME=/app/model_cache/sentence_transformers
-RUN python -c "from sentence_transformers import SentenceTransformer; print('Downloading model...'); SentenceTransformer('BAAI/bge-large-en-v1.5', device='cpu'); print('Model cached.')"
+RUN python -c "from sentence_transformers import SentenceTransformer; print('Downloading model...'); SentenceTransformer('BAAI/bge-base-en-v1.5', device='cpu'); print('Model cached.')"
 
 # Copy entire project
 COPY . .

api/main.py

@@ -2,15 +2,20 @@
 
 import sys
 import io
-sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8', errors='replace')
-sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8', errors='replace')
+
+# Force UTF-8 encoding for stdout and stderr on Windows to prevent logging crashes
+if sys.platform == "win32":
+    try:
+        sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
+        sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
+    except Exception:
+        pass # Fallback if buffer is not available
 
 from contextlib import asynccontextmanager
 import logging
 
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
 import uvicorn
 
 from api.routes.query import router as query_router
@@ -30,7 +35,8 @@ async def lifespan(app: FastAPI):
 
     app.state.query_service = QueryService()
     logger.info("QueryService loaded and ready")
-    yield
+    yield  # app is running
+    # shutdown cleanup (nothing required for now)
 
 
 # ------------------------------------------------------------------ #
@@ -43,7 +49,7 @@ app = FastAPI(
     lifespan=lifespan,
 )
 
-# CORS — wide open for development
+# CORS — wide open for development; backend team will restrict in prod
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -52,15 +58,6 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-
-# ------------------------------------------------------------------ #
-#  Root endpoint — required for HF Space health check
-# ------------------------------------------------------------------ #
-@app.get("/")
-async def root():
-    return JSONResponse({"status": "ok", "message": "PolicyLens RAG API is running"})
-
-
 # ------------------------------------------------------------------ #
 #  Routers
 # ------------------------------------------------------------------ #
@@ -68,7 +65,6 @@ app.include_router(query_router)
 app.include_router(ingest_router)
 app.include_router(health_router)
 
-
 # ------------------------------------------------------------------ #
 #  Dev entry point
 # ------------------------------------------------------------------ #

backend/src/routes/ingest.js

@@ -61,12 +61,27 @@ router.post('/ingest/upload', authMiddleware, upload.single('file'), async (req,
     form.append('policy_id', policy_id);
     form.append('overwrite', 'false');
 
-    // fire and forget — Python runs ingestion in background
-    axios.post(`${process.env.PYTHON_API_URL}/ingest/upload`, form, {
-      headers: form.getHeaders(),
-    }).catch(err => console.error('Python ingest error:', err.message));
+    // Forward to Python — wait for response to surface errors
+    console.log(`[ingest] Forwarding to Python: ${process.env.PYTHON_API_URL}/ingest/upload | policy_id=${policy_id}`);
+    
+    try {
+      const pythonResp = await axios.post(`${process.env.PYTHON_API_URL}/ingest/upload`, form, {
+        headers: form.getHeaders(),
+        maxBodyLength: Infinity,
+        maxContentLength: Infinity,
+      });
+      console.log('[ingest] Python accepted upload:', pythonResp.data);
+    } catch (err) {
+      console.error('[ingest] Python ingest error:', err.message);
+      if (err.response) {
+        console.error('[ingest] Python response status:', err.response.status);
+        console.error('[ingest] Python response body:', JSON.stringify(err.response.data));
+        throw new Error(`Python API Error: ${err.response.status} - ${JSON.stringify(err.response.data)}`);
+      }
+      throw new Error(`Failed to reach Python API: ${err.message}`);
+    }
 
-    // 6. Return immediately
+    // 6. Return response
     res.json({
       status: 'processing',
       policy_id,
@@ -76,6 +91,7 @@ router.post('/ingest/upload', authMiddleware, upload.single('file'), async (req,
     });
 
   } catch (err) {
+    console.error('[ingest] Fatal error:', err.message);
     res.status(500).json({ error: err.message });
   }
 });

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>landingpage</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "landingpage",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.jsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import Navbar from "./components/Navbar/Navbar";
+import Hero from "./components/Hero/Hero";
+import Footer from "./components/Footer/Footer";
+import Login from "./components/Auth/Login";
+import UploadModal from "./components/Dashboard/UploadModal";
+import Dboard from "./components/Dashboard/Dboard"; // This is the new dashboard
+import Chatbot from "./components/Dashboard/Chatbot"; // This is the AI chat
+
+export default function App() {
+  const [isDark, setIsDark] = useState(false);
+  const [appState, setAppState] = useState('home');
+  const [uploadedFile, setUploadedFile] = useState(null);
+
+  // Debugging: Watch state changes in your browser console
+  useEffect(() => {
+    console.log("Current App State:", appState);
+  }, [appState]);
+
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDark]);
+
+  const navigateTo = (newState) => {
+    window.history.pushState({ appState: newState }, '', `#${newState}`);
+    setAppState(newState);
+  };
+
+  useEffect(() => {
+    window.history.replaceState({ appState: 'home' }, '', '#home');
+    const handlePopState = (e) => {
+      const state = e.state?.appState || 'home';
+      setAppState(state);
+    };
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  const toggleTheme = () => setIsDark(!isDark);
+
+  const handleUploadComplete = (file) => {
+    console.log("Upload finished! Routing to Dboard...");
+    setUploadedFile(file);
+    // Force the state to 'dboard'
+    navigateTo('dboard'); 
+  };
+
+  // 1. DASHBOARD ROUTE (The new UI)
+  if (appState === 'dboard' || appState === 'dashboard') {
+    return (
+      <Dboard
+        file={uploadedFile}
+        isDark={isDark}
+        toggleTheme={toggleTheme}
+        onLogout={() => {
+          setUploadedFile(null);
+          navigateTo('home');
+        }}
+        onTriggerUpload={() => navigateTo('upload')}
+        onOpenIris={() => navigateTo('chatbot')}
+      />
+    );
+  }
+
+  // 2. CHATBOT ROUTE (The IRIS chat)
+  if (appState === 'chatbot') {
+    return (
+      <div className="relative min-h-screen">
+        <button 
+          onClick={() => navigateTo('dboard')}
+          style={{
+            position: 'absolute', top: '24px', left: '24px', zIndex: 50,
+            padding: '10px 20px', borderRadius: '12px', fontWeight: 500, cursor: 'pointer',
+            background: isDark ? '#1D1D24' : '#ffffff',
+            color: isDark ? '#f0f9ff' : '#111827',
+            border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}`,
+            fontFamily: "'Outfit', sans-serif"
+          }}
+        >
+          ← Back to Dashboard
+        </button>
+        <Chatbot file={uploadedFile} isDark={isDark} />
+      </div>
+    );
+  }
+
+  // 3. LOGIN ROUTE
+  if (appState === 'login') {
+    return (
+      <Login
+        onLoginSuccess={() => navigateTo('upload')}
+        onNavigateSignup={() => {}}
+        onBack={() => navigateTo('home')}
+      />
+    );
+  }
+
+  // 4. HOME & UPLOAD ROUTES
+  return (
+    <div className="min-h-screen flex flex-col font-sans bg-gray-50 dark:bg-[#0c0908] transition-colors duration-300">
+      <Navbar
+        isDark={isDark}
+        toggleTheme={toggleTheme}
+        hideNavLinks={appState !== 'home'}
+        onHome={() => navigateTo('home')}
+      />
+
+      <main className="flex-grow flex flex-col relative pt-20">
+        {appState === 'home' && (
+          <Hero onGetStarted={() => navigateTo('login')} />
+        )}
+        {appState === 'upload' && (
+          <UploadModal
+            onUploadComplete={handleUploadComplete}
+            onCancel={() => navigateTo('home')}
+          />
+        )}
+      </main>
+
+      {appState === 'home' && <Footer />}
+    </div>
+  );
+}

frontend/src/components/About/About.jsx

@@ -0,0 +1,79 @@
+const cards = [
+  {
+    icon: '🧠',
+    title: 'Intelligent Parsing',
+    desc: 'Understands dense legal and policy language across formats — PDFs, DOCX, and scanned documents.',
+  },
+  {
+    icon: '⚡',
+    title: 'Instant Summaries',
+    desc: 'Receive concise, structured breakdowns the moment a document is uploaded. Zero waiting.',
+  },
+  {
+    icon: '🔍',
+    title: 'Clause Extraction',
+    desc: 'Pinpoints key clauses, obligations, deadlines, and risk terms automatically.',
+  },
+  {
+    icon: '🛡️',
+    title: 'Compliance Guard',
+    desc: 'Flags potential regulatory conflicts and compliance gaps before they become liabilities.',
+  },
+]
+
+export default function About() {
+  return (
+    <section id="about" className="py-28 bg-black relative overflow-hidden">
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-0 right-0 w-150 h-100 bg-purple-950/40 rounded-full blur-[140px]" />
+      </div>
+
+      <div className="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12 relative z-10">
+        <div className="text-center mb-16">
+          <span className="inline-block bg-purple-950/70 border border-purple-700/40 text-purple-400 text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-widest mb-5">
+            What We Do
+          </span>
+          <h2 className="text-4xl sm:text-5xl font-black text-white mb-5 leading-tight">
+            Built for People Who{' '}
+            <span className="text-purple-400">Can't Afford</span>
+            <br />to Miss the Fine Print
+          </h2>
+          <p className="text-gray-500 text-base sm:text-lg max-w-xl mx-auto leading-relaxed">
+            PolicyLens AI is purpose-built for professionals who work with high-stakes documents every day.
+          </p>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
+          {cards.map(({ icon, title, desc }) => (
+            <div
+              key={title}
+              className="group bg-gray-950 border border-purple-900/30 hover:border-purple-600/60 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-900/30 cursor-default"
+            >
+              <div className="w-12 h-12 bg-purple-950 rounded-xl flex items-center justify-center text-2xl mb-5 border border-purple-800/40 group-hover:border-purple-600/60 transition-colors duration-300">
+                {icon}
+              </div>
+              <h3 className="text-white font-bold text-base mb-2">{title}</h3>
+              <p className="text-gray-500 text-sm leading-relaxed">{desc}</p>
+              <div className="mt-5 h-px bg-linear-to-r from-purple-600/0 via-purple-600/60 to-purple-600/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            </div>
+          ))}
+        </div>
+
+        {/* Audience strip */}
+        <div className="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {[
+            ['🎓', 'Students'],
+            ['🔬', 'Researchers'],
+            ['⚖️', 'Legal Teams'],
+            ['🏛️', 'Policymakers'],
+          ].map(([icon, label]) => (
+            <div key={label} className="flex items-center gap-3 bg-gray-950/80 border border-purple-900/30 rounded-xl px-4 py-3">
+              <span className="text-xl">{icon}</span>
+              <span className="text-gray-300 font-semibold text-sm">{label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

frontend/src/components/Auth/Login.jsx

@@ -0,0 +1,501 @@
+import { useState, useEffect } from 'react';
+import { Eye, EyeOff, ArrowRight, Sun, Moon, Cpu, Shield, Zap, Lock } from 'lucide-react';
+
+const FONT_LINK =
+  'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap';
+
+const KEYFRAMES = `
+  @keyframes lp-up    { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
+  @keyframes lp-left  { from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:none} }
+  @keyframes lp-glow  { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.7;transform:scale(1.06)} }
+  @keyframes lp-sway  { 0%,100%{transform:rotate(-3deg) scale(1)} 50%{transform:rotate(3deg) scale(1.02)} }
+  @keyframes lp-twinkle{ 0%,100%{opacity:.1;transform:scale(.7)} 50%{opacity:.85;transform:scale(1.3)} }
+  @keyframes lp-orbit { from{transform:rotate(0deg) translateX(160px) rotate(0deg)} to{transform:rotate(360deg) translateX(160px) rotate(-360deg)} }
+  @keyframes lp-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
+  @keyframes lp-spin  { to{transform:rotate(360deg)} }
+  @keyframes lp-pulse { 0%,100%{box-shadow:0 0 0 0 currentColor} 50%{box-shadow:0 0 0 4px transparent} }
+
+  .lp-form   { animation: lp-up   .5s cubic-bezier(.16,1,.3,1) forwards }
+  .lp-panel  { animation: lp-left .5s cubic-bezier(.16,1,.3,1) forwards }
+  .lp-shake  { animation: lp-shake .4s ease }
+  .lp-spin   { animation: lp-spin 1s linear infinite }
+`;
+
+const STARS = Array.from({ length: 70 }, (_, i) => ({
+  x:  ((i * 137.508) % 100).toFixed(2),
+  y:  ((i * 97.3)    % 100).toFixed(2),
+  r:  (0.5 + (i % 4) * 0.45).toFixed(1),
+  d:  ((i * 0.22)    %  3  ).toFixed(2),
+  t:  (2   + (i % 5) * 0.7 ).toFixed(1),
+}));
+
+/* ── THEMES — matched to Hero.jsx palette ──────────────────── */
+const LIGHT = {
+  pageBg:      '#ffffff',
+  panelBg:     '#111827',           /* dark panel for contrast, gray-900 matches hero light text */
+  panelText:   '#f9fafb',
+  panelSub:    'rgba(249,250,251,.5)',
+  panelAccent: '#0d9488',           /* brand-teal */
+  panelGrad:   'linear-gradient(135deg,#0d9488,#14b8a6)',
+
+  cardBg:      '#ffffff',
+  cardBorder:  'rgba(209,213,219,.6)',
+  cardShadow:  '0 20px 60px rgba(0,0,0,.07)',
+
+  t1:          '#111827',           /* gray-900 */
+  t2:          '#6b7280',           /* gray-500 */
+  t3:          '#9ca3af',           /* gray-400 */
+  t4:          'rgba(209,213,219,.4)',
+
+  acc:         '#0d9488',
+  acc2:        '#14b8a6',
+  accGrad:     'linear-gradient(135deg,#0d9488,#14b8a6)',
+  pillBg:      'rgba(204,251,241,.5)',
+  pillBorder:  'rgba(153,246,228,.8)',
+  pillText:    '#0f766e',
+
+  inputBg:     '#f9fafb',
+  inputBorder: '#e5e7eb',           /* gray-200 */
+  inputFocus:  '#0d9488',
+  inputText:   '#111827',
+  inputPH:     '#9ca3af',
+  inputIcon:   '#9ca3af',
+
+  labelColor:  '#6b7280',
+  linkColor:   '#0d9488',
+
+  btnBg:       'linear-gradient(135deg,#0d9488,#14b8a6)',
+  btnShadow:   '0 6px 24px rgba(13,148,136,.3)',
+  btnText:     '#ffffff',
+
+  dividerBg:   'rgba(209,213,219,.6)',
+  dividerText: '#9ca3af',
+
+  socialBg:    '#f9fafb',
+  socialBorder:'#e5e7eb',
+  socialText:  '#6b7280',
+
+  footerText:  '#d1d5db',
+  toggleBg:    '#f3f4f6',
+  toggleBorder:'#e5e7eb',
+
+  errorBg:     '#fff5f5',
+  errorBorder: '#fecaca',
+  errorText:   '#dc2626',
+};
+
+const DARK = {
+  pageBg:      '#0c0908',           /* hero dark navbar bg */
+  panelBg:     '#080605',           /* hero dark footer bg */
+  panelText:   '#ecfeff',           /* cyan-50 */
+  panelSub:    'rgba(207,250,254,.45)',
+  panelAccent: '#22d3ee',           /* cyan-400 */
+  panelGrad:   'linear-gradient(135deg,#0e7490,#22d3ee)',
+
+  cardBg:      '#15100d',           /* hero dark card/modal bg */
+  cardBorder:  'rgba(21,94,117,.3)', /* cyan-900 */
+  cardShadow:  '0 20px 60px rgba(0,0,0,.7)',
+
+  t1:          '#ecfeff',           /* cyan-50 */
+  t2:          'rgba(207,250,254,.6)',
+  t3:          'rgba(207,250,254,.35)',
+  t4:          'rgba(21,94,117,.2)',
+
+  acc:         '#22d3ee',           /* cyan-400 */
+  acc2:        '#a5f3fc',           /* cyan-200 */
+  accGrad:     'linear-gradient(135deg,#0e7490,#22d3ee)',
+  pillBg:      'rgba(21,94,117,.18)',
+  pillBorder:  'rgba(21,94,117,.4)',
+  pillText:    '#a5f3fc',
+
+  inputBg:     '#080605',
+  inputBorder: 'rgba(35,26,21,.8)',  /* hero dark border #231a15 */
+  inputFocus:  '#22d3ee',
+  inputText:   '#ecfeff',
+  inputPH:     'rgba(207,250,254,.25)',
+  inputIcon:   'rgba(34,211,238,.4)',
+
+  labelColor:  '#a5f3fc',           /* cyan-200 */
+  linkColor:   '#67e8f9',           /* cyan-300 */
+
+  btnBg:       '#e0f2fe',           /* hero dark button bg */
+  btnShadow:   '0 6px 24px rgba(34,211,238,.2)',
+  btnText:     '#0c0908',           /* hero dark button text */
+
+  dividerBg:   'rgba(35,26,21,.8)',
+  dividerText: 'rgba(207,250,254,.35)',
+
+  socialBg:    'rgba(21,94,117,.08)',
+  socialBorder:'rgba(35,26,21,.8)',
+  socialText:  '#a5f3fc',
+
+  footerText:  'rgba(21,94,117,.5)',
+  toggleBg:    '#1a1310',           /* hero dark button bg */
+  toggleBorder:'#2a1f1a',           /* hero dark border */
+
+  errorBg:     'rgba(239,68,68,.08)',
+  errorBorder: 'rgba(239,68,68,.25)',
+  errorText:   '#fca5a5',
+};
+
+const GoogleIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24">
+    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
+    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+  </svg>
+);
+
+export default function LoginPage({ onLoginSuccess, onNavigateSignup, onBack }) {
+  const [dark,     setDark]     = useState(false);
+  const [email,    setEmail]    = useState('');
+  const [password, setPassword] = useState('');
+  const [showPw,   setShowPw]   = useState(false);
+  const [loading,  setLoading]  = useState(false);
+  const [error,    setError]    = useState('');
+  const [shake,    setShake]    = useState(false);
+  const T = dark ? DARK : LIGHT;
+
+  useEffect(() => {
+    const a = Object.assign(document.createElement('link'),  { rel:'stylesheet', href:FONT_LINK });
+    const b = Object.assign(document.createElement('style'), { textContent:KEYFRAMES });
+    document.head.append(a, b);
+    return () => { a.remove(); b.remove(); };
+  }, []);
+
+  const triggerError = (msg) => {
+    setError(msg);
+    setShake(true);
+    setTimeout(() => setShake(false), 450);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email.trim())    return triggerError('Please enter your email.');
+    if (!password.trim()) return triggerError('Please enter your password.');
+    setError('');
+    setLoading(true);
+    try {
+      /* ── connect your backend here ──────────────────────────
+         const res = await fetch('/api/auth/login', {
+           method: 'POST',
+           headers: { 'Content-Type': 'application/json' },
+           body: JSON.stringify({ email, password }),
+         });
+         if (!res.ok) throw new Error((await res.json()).message || 'Login failed');
+         const { token } = await res.json();
+         localStorage.setItem('token', token);
+      ─────────────────────────────────────────────────────── */
+      await new Promise(r => setTimeout(r, 1400));
+      onLoginSuccess?.({ email });
+    } catch (err) {
+      triggerError(err.message || 'Invalid credentials. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const f     = { fontFamily:"'DM Sans',sans-serif" };
+  const mono  = { fontFamily:"'JetBrains Mono',monospace" };
+  const bebas = { fontFamily:"'Bebas Neue',cursive" };
+  const syne  = { fontFamily:"'Syne',sans-serif" };
+
+  return (
+    <div style={{ ...f, minHeight:'100vh', background:T.pageBg, transition:'background .4s', display:'flex', alignItems:'center', justifyContent:'center', padding:16 }}>
+
+      {/* ── theme toggle (top right) ── */}
+      <button onClick={() => setDark(v => !v)} style={{
+        position:'fixed', top:20, right:20, zIndex:99,
+        width:38, height:38, borderRadius:11, cursor:'pointer',
+        display:'flex', alignItems:'center', justifyContent:'center',
+        background:T.toggleBg, border:`1px solid ${T.toggleBorder}`,
+        transition:'all .2s',
+      }}
+        onMouseEnter={e => { e.currentTarget.style.transform='rotate(14deg) scale(1.1)'; }}
+        onMouseLeave={e => { e.currentTarget.style.transform='none'; }}>
+        {dark
+          ? <Sun  size={15} style={{ color:'#22d3ee' }}/>
+          : <Moon size={15} style={{ color:T.acc }}/>
+        }
+      </button>
+
+      {/* ══ CARD ════════════════════════════════════════════════ */}
+      <div style={{
+        display:'flex', overflow:'hidden',
+        width:'min(920px, 100%)', minHeight:580,
+        borderRadius:28,
+        background:T.cardBg, border:`1px solid ${T.cardBorder}`,
+        boxShadow:T.cardShadow,
+        transition:'background .4s, border-color .4s, box-shadow .4s',
+      }}>
+
+        {/* ── LEFT DECORATIVE PANEL ────────────────────────────── */}
+        <div className="lp-panel" style={{
+          width:380, flexShrink:0, position:'relative', overflow:'hidden',
+          background: T.panelBg,
+          display:'flex', flexDirection:'column', justifyContent:'space-between',
+          padding:40,
+        }}>
+
+          {dark ? (
+            /* DARK: Hero-style starfield + cyan glow */
+            <div style={{ position:'absolute', inset:0, pointerEvents:'none' }}>
+              <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
+                {STARS.map((s,i) => (
+                  <circle key={i} cx={`${s.x}%`} cy={`${s.y}%`} r={s.r} fill="#a5f3fc"
+                    style={{ animation:`lp-twinkle ${s.t}s ease-in-out infinite`, animationDelay:`${s.d}s`, opacity:.12 }}/>
+                ))}
+              </svg>
+              {/* top cyan glow — matches hero dark atmosphere */}
+              <div style={{ position:'absolute', width:480, height:480, borderRadius:'50%',
+                top:'30%', left:'50%', transform:'translate(-50%,-50%)', filter:'blur(90px)',
+                background:'radial-gradient(circle,rgba(34,211,238,.12) 0%,transparent 65%)',
+                animation:'lp-glow 6s ease-in-out infinite' }}/>
+              {/* orbiting dot */}
+              <div style={{ position:'absolute', top:'50%', left:'50%', width:0, height:0 }}>
+                <div style={{ position:'absolute', width:4, height:4, borderRadius:'50%',
+                  background:'#22d3ee', boxShadow:'0 0 8px #22d3ee',
+                  marginLeft:-2, marginTop:-2,
+                  animation:'lp-orbit 14s linear infinite', opacity:.5 }}/>
+              </div>
+              {/* subtle grid */}
+              <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.03 }}>
+                <defs><pattern id="lpg" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
+                  <path d="M50 0L0 0 0 50" fill="none" stroke="#22d3ee" strokeWidth=".6"/>
+                </pattern></defs>
+                <rect width="100%" height="100%" fill="url(#lpg)"/>
+              </svg>
+            </div>
+          ) : (
+            /* LIGHT: Hero-style teal glow + dot grid */
+            <div style={{ position:'absolute', inset:0, pointerEvents:'none' }}>
+              {/* teal leaf shapes */}
+              <svg style={{ position:'absolute', top:'-8%', right:'-10%', width:280, height:280,
+                animation:'lp-sway 8s ease-in-out infinite', opacity:.07 }}>
+                <ellipse cx="140" cy="140" rx="120" ry="55" fill="#14b8a6" transform="rotate(-28 140 140)"/>
+                <ellipse cx="140" cy="140" rx="90"  ry="38" fill="#0d9488" transform="rotate(12 140 140)"/>
+              </svg>
+              <svg style={{ position:'absolute', bottom:'-10%', left:'-8%', width:220, height:220,
+                animation:'lp-sway 11s ease-in-out infinite', animationDelay:'2s', opacity:.06 }}>
+                <ellipse cx="110" cy="110" rx="95" ry="42" fill="#14b8a6" transform="rotate(22 110 110)"/>
+              </svg>
+              {/* teal glow */}
+              <div style={{ position:'absolute', width:400, height:400, borderRadius:'50%',
+                top:'50%', left:'50%', transform:'translate(-50%,-50%)', filter:'blur(80px)',
+                background:'radial-gradient(circle,rgba(13,148,136,.12) 0%,transparent 65%)',
+                animation:'lp-glow 7s ease-in-out infinite' }}/>
+              {/* dot grid */}
+              <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.06 }}>
+                <defs><pattern id="lpd" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
+                  <circle cx="1" cy="1" r=".9" fill="#0d9488"/>
+                </pattern></defs>
+                <rect width="100%" height="100%" fill="url(#lpd)"/>
+              </svg>
+            </div>
+          )}
+
+          {/* brand */}
+          <div style={{ position:'relative', zIndex:2 }}>
+            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:40 }}>
+              <div style={{ width:40, height:40, borderRadius:12,
+                background:T.panelGrad, display:'flex', alignItems:'center', justifyContent:'center',
+                boxShadow:`0 4px 16px ${T.panelAccent}55` }}>
+                <Cpu size={18} color="#fff"/>
+              </div>
+              <span style={{ ...bebas, fontSize:22, letterSpacing:3, color:T.panelText }}>PolicyLens</span>
+            </div>
+
+            <h2 style={{ ...bebas, fontSize:44, letterSpacing:2, lineHeight:1.05,
+              color:T.panelText, margin:'0 0 16px' }}>
+              Your Legal<br/>Intelligence<br/>Platform
+            </h2>
+            <p style={{ fontSize:13, lineHeight:1.7, color:T.panelSub, maxWidth:260 }}>
+              Upload contracts and policies. Our AI scans every clause, flags every risk, and answers every question.
+            </p>
+          </div>
+
+          {/* feature bullets */}
+          <div style={{ position:'relative', zIndex:2, display:'flex', flexDirection:'column', gap:12 }}>
+            {[
+              { icon: Shield, text:'End-to-end encrypted analysis' },
+              { icon: Zap,    text:'Risk detection in under 30 seconds' },
+              { icon: Lock,   text:'Zero data retention policy' },
+            ].map(({ icon: Icon, text }) => (
+              <div key={text} style={{ display:'flex', alignItems:'center', gap:10 }}>
+                <div style={{ width:28, height:28, borderRadius:8, flexShrink:0,
+                  display:'flex', alignItems:'center', justifyContent:'center',
+                  background: dark ? 'rgba(34,211,238,.1)' : 'rgba(13,148,136,.15)',
+                  border:`1px solid ${dark ? 'rgba(34,211,238,.2)' : 'rgba(13,148,136,.25)'}` }}>
+                  <Icon size={13} style={{ color:T.panelAccent }}/>
+                </div>
+                <span style={{ fontSize:12, color:T.panelSub }}>{text}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* ── RIGHT: LOGIN FORM ─────────────────────────────────── */}
+        <div style={{ flex:1, display:'flex', flexDirection:'column',
+          justifyContent:'center', padding:'48px 52px', position:'relative' }}>
+
+          <div className="lp-form">
+
+            {/* header */}
+            <div style={{ marginBottom:36 }}>
+              <span style={{
+                ...mono, display:'inline-block', marginBottom:12,
+                fontSize:9, letterSpacing:'3.5px', padding:'3px 12px', borderRadius:99,
+                background:T.pillBg, border:`1px solid ${T.pillBorder}`, color:T.pillText,
+              }}>SECURE LOGIN</span>
+              <h1 style={{ ...bebas, fontSize:40, letterSpacing:2, lineHeight:1,
+                color:T.t1, margin:'0 0 8px', transition:'color .4s' }}>
+                Welcome Back
+              </h1>
+              <p style={{ fontSize:13, color:T.t2, margin:0 }}>
+                Sign in to continue to your dashboard.
+              </p>
+            </div>
+
+            {/* error */}
+            {error && (
+              <div className={shake ? 'lp-shake' : ''} style={{
+                marginBottom:20, padding:'10px 14px', borderRadius:10, fontSize:12,
+                background:T.errorBg, border:`1px solid ${T.errorBorder}`, color:T.errorText,
+                display:'flex', alignItems:'center', gap:8,
+              }}>
+                <span style={{ fontSize:15 }}>⚠</span> {error}
+              </div>
+            )}
+
+            {/* form */}
+            <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap:16 }}>
+
+              {/* email */}
+              <div>
+                <label style={{ ...f, display:'block', fontSize:11, fontWeight:500,
+                  letterSpacing:1, marginBottom:6, color:T.labelColor, ...mono }}>
+                  EMAIL ADDRESS
+                </label>
+                <div style={{ position:'relative' }}>
+                  <input
+                    type="email" value={email} onChange={e => setEmail(e.target.value)}
+                    placeholder="you@company.com" autoComplete="email"
+                    style={{
+                      ...f, width:'100%', fontSize:13, padding:'11px 14px',
+                      borderRadius:12, outline:'none', boxSizing:'border-box',
+                      background:T.inputBg, border:`1px solid ${T.inputBorder}`,
+                      color:T.inputText, transition:'border-color .2s, background .4s',
+                    }}
+                    onFocus={e => e.target.style.borderColor=T.inputFocus}
+                    onBlur={e  => e.target.style.borderColor=T.inputBorder}
+                  />
+                </div>
+              </div>
+
+              {/* password */}
+              <div>
+                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6 }}>
+                  <label style={{ ...f, display:'block', fontSize:11, fontWeight:500,
+                    letterSpacing:1, color:T.labelColor, ...mono }}>
+                    PASSWORD
+                  </label>
+                  <button type="button"
+                    style={{ ...f, fontSize:11, color:T.linkColor, background:'none',
+                      border:'none', cursor:'pointer', padding:0, transition:'opacity .15s' }}
+                    onMouseEnter={e => e.currentTarget.style.opacity='.7'}
+                    onMouseLeave={e => e.currentTarget.style.opacity='1'}>
+                    Forgot password?
+                  </button>
+                </div>
+                <div style={{ position:'relative' }}>
+                  <input
+                    type={showPw ? 'text' : 'password'} value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    placeholder="••••••••••" autoComplete="current-password"
+                    style={{
+                      ...f, width:'100%', fontSize:13, padding:'11px 44px 11px 14px',
+                      borderRadius:12, outline:'none', boxSizing:'border-box',
+                      background:T.inputBg, border:`1px solid ${T.inputBorder}`,
+                      color:T.inputText, transition:'border-color .2s, background .4s',
+                    }}
+                    onFocus={e => e.target.style.borderColor=T.inputFocus}
+                    onBlur={e  => e.target.style.borderColor=T.inputBorder}
+                  />
+                  <button type="button" onClick={() => setShowPw(v => !v)}
+                    style={{ position:'absolute', right:12, top:'50%', transform:'translateY(-50%)',
+                      background:'none', border:'none', cursor:'pointer', padding:0,
+                      color:T.inputIcon, display:'flex', alignItems:'center' }}>
+                    {showPw ? <EyeOff size={15}/> : <Eye size={15}/>}
+                  </button>
+                </div>
+              </div>
+
+              {/* remember me */}
+              <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', marginTop:-4 }}>
+                <input type="checkbox" style={{ accentColor:T.acc, width:14, height:14 }}/>
+                <span style={{ fontSize:12, color:T.t2 }}>Remember me for 30 days</span>
+              </label>
+
+              {/* submit */}
+              <button type="submit" disabled={loading}
+                style={{
+                  ...syne, width:'100%', padding:'13px', borderRadius:13, border:'none',
+                  fontSize:14, fontWeight:600, cursor: loading ? 'not-allowed' : 'pointer',
+                  background: loading ? T.t4 : T.btnBg,
+                  color: T.btnText,
+                  boxShadow: loading ? 'none' : T.btnShadow,
+                  display:'flex', alignItems:'center', justifyContent:'center', gap:8,
+                  transition:'all .2s', opacity: loading ? .7 : 1, marginTop:4,
+                }}
+                onMouseEnter={e => { if (!loading) e.currentTarget.style.transform='translateY(-1px)'; }}
+                onMouseLeave={e => e.currentTarget.style.transform='none'}>
+                {loading
+                  ? <><span className="lp-spin" style={{ display:'inline-block', width:16, height:16,
+                      border:`2px solid rgba(255,255,255,.3)`, borderTopColor:'#fff', borderRadius:'50%' }}/> Signing in…</>
+                  : <>Sign In <ArrowRight size={15}/></>
+                }
+              </button>
+            </form>
+
+            {/* divider */}
+            <div style={{ display:'flex', alignItems:'center', gap:12, margin:'22px 0' }}>
+              <div style={{ flex:1, height:1, background:T.dividerBg }}/>
+              <span style={{ ...mono, fontSize:10, letterSpacing:2, color:T.dividerText }}>OR</span>
+              <div style={{ flex:1, height:1, background:T.dividerBg }}/>
+            </div>
+
+            {/* Google SSO */}
+            <button type="button" style={{
+              ...f, width:'100%', padding:'12px', borderRadius:13, cursor:'pointer',
+              display:'flex', alignItems:'center', justifyContent:'center', gap:10,
+              background:T.socialBg, border:`1px solid ${T.socialBorder}`, color:T.socialText,
+              fontSize:13, fontWeight:500, transition:'all .15s',
+            }}
+              onMouseEnter={e => { e.currentTarget.style.borderColor=T.acc; e.currentTarget.style.transform='translateY(-1px)'; }}
+              onMouseLeave={e => { e.currentTarget.style.borderColor=T.socialBorder; e.currentTarget.style.transform='none'; }}>
+              <GoogleIcon/> Continue with Google
+            </button>
+
+            {/* signup link */}
+            <p style={{ marginTop:24, textAlign:'center', fontSize:12, color:T.t2 }}>
+              Don't have an account?{' '}
+              <button type="button" onClick={onNavigateSignup}
+                style={{ ...f, fontSize:12, fontWeight:600, color:T.linkColor,
+                  background:'none', border:'none', cursor:'pointer', padding:0 }}>
+                Create one free →
+              </button>
+            </p>
+
+            {/* footer */}
+            <p style={{ ...mono, marginTop:20, textAlign:'center', fontSize:10,
+              letterSpacing:.5, color:T.footerText }}>
+              Secured by PolicyLens · v2.4.1 · SOC 2 Compliant
+            </p>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Dashboard/Chatbot.jsx

@@ -0,0 +1,343 @@
+import {
+  MessageSquare, Send, Download, User, Loader2,
+  Sparkles, ShieldCheck, Sun, Moon, Aperture
+} from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+
+const FONT_LINK =
+  'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap';
+
+const KEYFRAMES = `
+  @keyframes cb-slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+  @keyframes cb-db { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }
+  @keyframes cb-pulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
+  .cb-db1{animation:cb-db 1.2s infinite 0ms}
+  .cb-db2{animation:cb-db 1.2s infinite 150ms}
+  .cb-db3{animation:cb-db 1.2s infinite 300ms}
+  .cb-msg{animation:cb-slideUp .25s cubic-bezier(0.16, 1, 0.3, 1)}
+  .cb-scrollbar::-webkit-scrollbar{width:5px}
+  .cb-scrollbar::-webkit-scrollbar-thumb{border-radius:5px}
+  .cb-noscroll::-webkit-scrollbar{display:none}
+`;
+
+const LIGHT = {
+  pageBg:         '#ffffff',
+  cardBg:         '#ffffff',
+  cardBorder:     '#e5e7eb',
+  cardShadow:     '0 12px 32px -4px rgba(0,0,0,.07)',
+  t1:             '#111827',
+  t2:             '#374151',
+  t3:             '#6b7280',
+  acc:            '#0d9488',
+  accHover:       '#0f766e',
+  accGrad:        'linear-gradient(135deg,#0d9488,#14b8a6)',
+  headerBg:       '#f9fafb',
+  headerBorder:   '#e5e7eb',
+  msgAreaBg:      '#ffffff',
+  msgUserBg:      'linear-gradient(135deg,#0d9488,#14b8a6)',
+  msgUserShadow:  '0 4px 14px rgba(13,148,136,.25)',
+  msgUserText:    '#ffffff',
+  msgAiBg:        '#f3f4f6',
+  msgAiBorder:    'transparent',
+  msgAiText:      '#111827',
+  inputBg:        '#f9fafb',
+  inputBorder:    '#e5e7eb',
+  inputFocus:     '#0d9488',
+  inputText:      '#111827',
+  sendActive:     'linear-gradient(135deg,#0d9488,#14b8a6)',
+  sendDisabled:   '#e5e7eb',
+  statusDot:      '#10b981',
+  statusGlow:     '0 0 6px #10b981',
+  onlineText:     '#6b7280',
+  scrollThumb:    '#d1d5db',
+};
+
+const DARK = {
+  pageBg:         '#0c0908',
+  cardBg:         '#15100d',
+  cardBorder:     '#2a1f1a',
+  cardShadow:     '0 12px 40px -4px rgba(0,0,0,.6)',
+  t1:             '#ecfeff',
+  t2:             'rgba(207,250,254,.7)',
+  t3:             'rgba(207,250,254,.4)',
+  acc:            '#22d3ee',
+  accHover:       '#67e8f9',
+  accGrad:        'linear-gradient(135deg,#0e7490,#22d3ee)',
+  headerBg:       '#080605',
+  headerBorder:   '#231a15',
+  msgAreaBg:      '#15100d',
+  msgUserBg:      '#e0f2fe',
+  msgUserShadow:  '0 4px 14px rgba(34,211,238,.15)',
+  msgUserText:    '#0c0908',
+  msgAiBg:        '#1a1310',
+  msgAiBorder:    'transparent',
+  msgAiText:      '#ecfeff',
+  inputBg:        '#080605',
+  inputBorder:    '#231a15',
+  inputFocus:     '#22d3ee',
+  inputText:      '#ecfeff',
+  sendActive:     '#e0f2fe',
+  sendDisabled:   '#1a1310',
+  statusDot:      '#10b981',
+  statusGlow:     '0 0 6px rgba(16,185,129,.4)',
+  onlineText:     'rgba(207,250,254,.4)',
+  scrollThumb:    '#2a1f1a',
+};
+
+function MessageBubble({ msg, T }) {
+  const isUser = msg.sender === 'user';
+  return (
+    <div className="cb-msg" style={{ display:'flex', gap:12, width:'100%', justifyContent: isUser ? 'flex-end' : 'flex-start' }}>
+      {!isUser && (
+        <div style={{ width:36, height:36, borderRadius:12, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.msgAiBg, border:`1px solid ${T.cardBorder}` }}>
+          <Aperture size={18} style={{ color:T.acc }}/>
+        </div>
+      )}
+      <div style={{ maxWidth:'75%', padding:'14px 20px', fontSize:15, lineHeight:1.6, borderRadius: isUser ? '20px 4px 20px 20px' : '4px 20px 20px 20px', background: isUser ? T.msgUserBg : T.msgAiBg, color: isUser ? T.msgUserText : T.msgAiText, boxShadow: isUser ? T.msgUserShadow : 'none', fontFamily:"'DM Sans', sans-serif", fontWeight:400, transition:'background .4s, color .4s' }}>
+        {msg.text}
+      </div>
+      {isUser && (
+        <div style={{ width:36, height:36, borderRadius:12, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.msgAiBg, border:`1px solid ${T.cardBorder}` }}>
+          <User size={18} style={{ color:T.t2 }}/>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function Chatbot({ file, isDark: initDark }) {
+  const [chatMessage, setChatMessage] = useState('');
+  const [isTyping,    setIsTyping]    = useState(false);
+  const [dark,        setDark]        = useState(false);
+
+  const [messages, setMessages] = useState([
+    { id:1, sender:'ai', text: file
+        ? `Hello, I'm IRIS. I've processed "${file.name}". I am ready to answer any questions regarding its clauses, liabilities, or summaries.`
+        : "Hello, I'm IRIS. The document is processed, and I am ready to answer any questions regarding its clauses, liabilities, or summaries." },
+  ]);
+
+  const messagesEndRef = useRef(null);
+  const T = dark ? DARK : LIGHT;
+
+  useEffect(() => {
+    const link  = Object.assign(document.createElement('link'),  { rel:'stylesheet', href:FONT_LINK });
+    const style = Object.assign(document.createElement('style'), { textContent:KEYFRAMES });
+    document.head.append(link, style);
+    return () => { link.remove(); style.remove(); };
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior:'smooth' });
+  }, [messages, isTyping]);
+
+  const handleSend = (e) => {
+    if (e?.preventDefault) e.preventDefault();
+    const text = typeof e === 'string' ? e : chatMessage;
+    if (!text.trim()) return;
+    setMessages(p => [...p, { id:Date.now(), sender:'user', text }]);
+    setChatMessage('');
+    setIsTyping(true);
+    setTimeout(() => {
+      setMessages(p => [...p, { id:Date.now()+1, sender:'ai',
+        text:'Analyzing clause context… This is a simulated response. Connect the backend model to retrieve clause-specific analysis from your document.' }]);
+      setIsTyping(false);
+    }, 1600);
+  };
+
+  /* ── Export chat log as .pdf ── */
+  const handleExport = async () => {
+    // Dynamically load jsPDF
+    if (!window.jspdf) {
+      await new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
+        s.onload = resolve; s.onerror = reject;
+        document.head.appendChild(s);
+      });
+    }
+    const { jsPDF } = window.jspdf;
+    const doc = new jsPDF({ unit:'pt', format:'a4' });
+
+    const pageW   = doc.internal.pageSize.getWidth();
+    const pageH   = doc.internal.pageSize.getHeight();
+    const margin  = 48;
+    const maxW    = pageW - margin * 2;
+    let   y       = margin;
+
+    const addPage = () => { doc.addPage(); y = margin; };
+    const checkY  = (h) => { if (y + h > pageH - margin) addPage(); };
+
+    // Header
+    doc.setFillColor(13, 148, 136);
+    doc.rect(0, 0, pageW, 6, 'F');
+
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(28);
+    doc.setTextColor(17, 24, 39);
+    doc.text('IRIS', margin, y + 28); y += 44;
+
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(10);
+    doc.setTextColor(107, 114, 128);
+    doc.text(`Document: ${file?.name || 'Unknown'}`, margin, y);
+    doc.text(`Exported: ${new Date().toLocaleString()}`, margin, y + 14);
+    y += 36;
+
+    // Divider
+    doc.setDrawColor(229, 231, 235);
+    doc.setLineWidth(0.5);
+    doc.line(margin, y, pageW - margin, y);
+    y += 24;
+
+    // Messages
+    messages.forEach((m) => {
+      const isUser = m.sender === 'user';
+      const label  = isUser ? 'You' : 'IRIS';
+      const lines  = doc.splitTextToSize(m.text, maxW - 16);
+      const bubbleH = lines.length * 14 + 28;
+
+      checkY(bubbleH + 20);
+
+      // Bubble background
+      if (isUser) {
+        doc.setFillColor(13, 148, 136);
+        doc.roundedRect(margin, y, maxW, bubbleH, 8, 8, 'F');
+      } else {
+        doc.setFillColor(243, 244, 246);
+        doc.roundedRect(margin, y, maxW, bubbleH, 8, 8, 'F');
+      }
+
+      // Label
+      doc.setFont('helvetica', 'bold');
+      doc.setFontSize(9);
+      doc.setTextColor(isUser ? 255 : 107, isUser ? 255 : 114, isUser ? 255 : 128);
+      doc.text(label, margin + 12, y + 16);
+
+      // Message text
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(11);
+      doc.setTextColor(isUser ? 255 : 17, isUser ? 255 : 24, isUser ? 255 : 39);
+      doc.text(lines, margin + 12, y + 28);
+
+      y += bubbleH + 12;
+    });
+
+    // Footer
+    checkY(32);
+    doc.setDrawColor(229, 231, 235);
+    doc.line(margin, y, pageW - margin, y);
+    y += 16;
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(9);
+    doc.setTextColor(156, 163, 175);
+    doc.text('IRIS insights are for guidance only • Not legal advice', margin, y);
+
+    doc.save(`IRIS_log_${Date.now()}.pdf`);
+  };
+
+  const canSend = chatMessage.trim() && !isTyping;
+  const f     = { fontFamily:"'DM Sans', sans-serif" };
+  const syne  = { fontFamily:"'Syne', sans-serif" };
+  const bebas = { fontFamily:"'Bebas Neue', cursive" };
+  const mono  = { fontFamily:"'JetBrains Mono', monospace" };
+
+  return (
+    <div style={{ minHeight:'100vh', display:'flex', flexDirection:'column', alignItems:'center', padding:'40px 16px', background:T.pageBg, color:T.t1, fontFamily:"'DM Sans', sans-serif", transition:'background .4s, color .4s' }}>
+
+      {/* HEADER */}
+      <div style={{ width:'100%', maxWidth:900, display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:28 }}>
+        <div>
+          <span style={{ display:'inline-flex', alignItems:'center', gap:6, marginBottom:12, padding:'6px 14px', borderRadius:8, fontSize:11, letterSpacing:1.5, ...mono, fontWeight:500, textTransform:'uppercase', background:T.msgAiBg, border:`1px solid ${T.cardBorder}`, color:T.acc, transition:'all .4s' }}>
+            <ShieldCheck size={14} /> IRIS Secure Session
+          </span>
+          <h1 style={{ fontSize:56, lineHeight:1, margin:0, color:T.t1, ...bebas, letterSpacing:3, transition:'color .4s' }}>
+            IRIS
+          </h1>
+          <p style={{ ...f, marginTop:8, fontSize:14, color:T.t3, display:'flex', alignItems:'center', gap:8 }}>
+            <Sparkles size={16} style={{ color:T.acc }}/>
+            {file ? `Currently analyzing: ${file.name}` : 'Document context fully loaded and verified.'}
+          </p>
+        </div>
+
+        <div style={{ display:'flex', alignItems:'center', gap:12 }}>
+          <button onClick={() => setDark(v => !v)} style={{ width:44, height:44, borderRadius:12, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow, transition:'all .2s' }}
+            onMouseEnter={e => { e.currentTarget.style.transform='rotate(14deg) scale(1.1)'; }}
+            onMouseLeave={e => { e.currentTarget.style.transform='none'; }}>
+            {dark ? <Sun size={18} style={{ color:'#22d3ee' }}/> : <Moon size={18} style={{ color:T.acc }}/>}
+          </button>
+          <button onClick={handleExport} style={{ display:'flex', alignItems:'center', gap:8, padding:'0 20px', height:44, fontSize:14, fontWeight:500, borderRadius:12, cursor:'pointer', ...f, background:T.cardBg, border:`1px solid ${T.cardBorder}`, color:T.t1, boxShadow:T.cardShadow, transition:'all .2s' }}
+            onMouseEnter={e => { e.currentTarget.style.borderColor=T.acc; e.currentTarget.style.color=T.acc; e.currentTarget.style.transform='scale(1.02)'; }}
+            onMouseLeave={e => { e.currentTarget.style.borderColor=T.cardBorder; e.currentTarget.style.color=T.t1; e.currentTarget.style.transform='none'; }}>
+            <Download size={16}/> Export Log
+          </button>
+        </div>
+      </div>
+
+      {/* CHAT CARD */}
+      <div style={{ width:'100%', maxWidth:900, flex:1, display:'flex', flexDirection:'column', borderRadius:24, overflow:'hidden', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow, transition:'background .4s, border-color .4s, box-shadow .4s' }}>
+
+        {/* chat header */}
+        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 28px', background:T.headerBg, borderBottom:`1px solid ${T.headerBorder}`, transition:'background .4s, border-color .4s' }}>
+          <div style={{ display:'flex', alignItems:'center', gap:16 }}>
+            <div style={{ width:44, height:44, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center', background:T.accGrad, boxShadow:T.msgUserShadow }}>
+              <Aperture size={20} color={dark ? '#0c0908' : '#ffffff'} />
+            </div>
+            <div>
+              <p style={{ margin:0, fontSize:16, fontWeight:600, color:T.t1, ...syne }}>IRIS</p>
+              <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:4 }}>
+                <span style={{ width:8, height:8, borderRadius:'50%', display:'inline-block', background:T.statusDot, boxShadow:T.statusGlow, animation:'cb-pulse 2s ease-in-out infinite' }}/>
+                <span style={{ ...mono, fontSize:11, color:T.onlineText, fontWeight:500 }}>System Online</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* messages */}
+        <div className="cb-scrollbar" style={{ flex:1, overflowY:'auto', padding:'32px', display:'flex', flexDirection:'column', gap:24, background:T.msgAreaBg, transition:'background .4s' }}>
+          {messages.map(m => <MessageBubble key={m.id} msg={m} T={T}/>)}
+          {isTyping && (
+            <div className="cb-msg" style={{ display:'flex', gap:12, alignItems:'center' }}>
+              <div style={{ width:36, height:36, borderRadius:12, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.msgAiBg, border:`1px solid ${T.cardBorder}` }}>
+                <Loader2 size={16} style={{ color:T.acc, animation:'spin 1s linear infinite' }}/>
+              </div>
+              <div style={{ padding:'16px 20px', display:'flex', gap:6, alignItems:'center', borderRadius:'4px 20px 20px 20px', background:T.msgAiBg }}>
+                <span className="cb-db1" style={{ width:6, height:6, borderRadius:'50%', background:T.acc, display:'inline-block' }}/>
+                <span className="cb-db2" style={{ width:6, height:6, borderRadius:'50%', background:T.acc, display:'inline-block' }}/>
+                <span className="cb-db3" style={{ width:6, height:6, borderRadius:'50%', background:T.acc, display:'inline-block' }}/>
+              </div>
+            </div>
+          )}
+          <div ref={messagesEndRef}/>
+        </div>
+
+        {/* input area */}
+        <div style={{ padding:'20px 28px 24px', background:T.headerBg, borderTop:`1px solid ${T.headerBorder}`, transition:'background .4s, border-color .4s' }}>
+          <div style={{ display:'flex', alignItems:'center', gap:14 }}>
+            <input
+              type="text" value={chatMessage}
+              onChange={e => setChatMessage(e.target.value)}
+              onKeyDown={e => { if (e.key==='Enter' && !e.shiftKey) handleSend(chatMessage); }}
+              placeholder="Ask IRIS anything about the document..."
+              style={{ flex:1, fontSize:15, padding:'16px 20px', borderRadius:16, outline:'none', background:T.inputBg, border:`1px solid ${T.inputBorder}`, color:T.inputText, ...f, transition:'border-color .2s, background .4s' }}
+              onFocus={e => e.target.style.borderColor=T.inputFocus}
+              onBlur={e  => e.target.style.borderColor=T.inputBorder}
+            />
+            <button onClick={() => handleSend(chatMessage)} disabled={!canSend} style={{ flexShrink:0, width:52, height:52, borderRadius:16, display:'flex', alignItems:'center', justifyContent:'center', border:'none', cursor: canSend ? 'pointer' : 'not-allowed', background: canSend ? T.sendActive : T.sendDisabled, color: dark ? '#0c0908' : '#ffffff', opacity: canSend ? 1 : 0.5, boxShadow: canSend ? T.msgUserShadow : 'none', transition:'all .2s ease' }}
+              onMouseEnter={e => { if (canSend) e.currentTarget.style.transform='scale(1.05)'; }}
+              onMouseLeave={e => e.currentTarget.style.transform='none'}>
+              <Send size={20} />
+            </button>
+          </div>
+          <p style={{ ...mono, marginTop:18, textAlign:'center', fontSize:11, letterSpacing:1, color:T.t3, fontWeight:500 }}>
+            IRIS insights are for guidance • Not legal advice
+          </p>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .cb-scrollbar::-webkit-scrollbar-thumb { background: ${T.scrollThumb}; }
+      `}</style>
+    </div>
+  );
+}

frontend/src/components/Dashboard/Dboard.jsx

@@ -0,0 +1,752 @@
+// src/components/Dashboard/Dboard.jsx
+import { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  Upload, Clock, X, FileText, AlertTriangle, CheckCircle2,
+  Shield, DollarSign, Calendar, Info, Trash2, Eye, FilePlus,
+  Home, Aperture, Sun, Moon, Menu, BadgeCheck, Banknote,
+  RefreshCw, Send, Loader2
+} from 'lucide-react';
+
+const FONT_LINK =
+  'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap';
+
+const KEYFRAMES = `
+  @keyframes cb-slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
+  @keyframes cb-db { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }
+  @keyframes cb-pulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @keyframes fadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
+  .cb-db1{animation:cb-db 1.2s infinite 0ms}
+  .cb-db2{animation:cb-db 1.2s infinite 150ms}
+  .cb-db3{animation:cb-db 1.2s infinite 300ms}
+  .cb-msg{animation:cb-slideUp .25s cubic-bezier(0.16,1,0.3,1)}
+  .spin-anim{animation:spin 1s linear infinite}
+  .fade-in{animation:fadeIn .3s cubic-bezier(0.16,1,0.3,1)}
+  .cb-scrollbar::-webkit-scrollbar{width:5px}
+  .cb-scrollbar::-webkit-scrollbar-thumb{border-radius:5px}
+`;
+
+const LIGHT = {
+  pageBg:'#ffffff', cardBg:'#ffffff', cardBorder:'#e5e7eb',
+  cardShadow:'0 12px 32px -4px rgba(0,0,0,.07)',
+  t1:'#111827', t2:'#374151', t3:'#6b7280',
+  acc:'#0d9488', accHover:'#0f766e',
+  accGrad:'linear-gradient(135deg,#0d9488,#14b8a6)',
+  headerBg:'#f9fafb', headerBorder:'#e5e7eb',
+  msgAreaBg:'#ffffff',
+  msgUserBg:'linear-gradient(135deg,#0d9488,#14b8a6)',
+  msgUserShadow:'0 4px 14px rgba(13,148,136,.25)',
+  msgUserText:'#ffffff', msgAiBg:'#f3f4f6', msgAiText:'#111827',
+  inputBg:'#f9fafb', inputBorder:'#e5e7eb', inputFocus:'#0d9488', inputText:'#111827',
+  sendActive:'linear-gradient(135deg,#0d9488,#14b8a6)', sendDisabled:'#e5e7eb',
+  statusDot:'#10b981', statusGlow:'0 0 6px #10b981', onlineText:'#6b7280',
+  scrollThumb:'#d1d5db',
+  sidebarBg:'#f9fafb',
+  navActiveBg:'rgba(13,148,136,0.1)', navActiveClr:'#0d9488', navActiveBrd:'rgba(13,148,136,0.2)',
+  navHoverBg:'#f3f4f6', accBg:'rgba(13,148,136,0.07)',
+  redBg:'rgba(239,68,68,0.07)',   redClr:'#dc2626', redBrd:'rgba(239,68,68,0.18)',
+  greenBg:'rgba(16,185,129,0.07)', greenClr:'#059669', greenBrd:'rgba(16,185,129,0.18)',
+  amberBg:'rgba(245,158,11,0.07)', amberClr:'#d97706', amberBrd:'rgba(245,158,11,0.18)',
+  badgeBg:'rgba(13,148,136,0.09)', badgeClr:'#0d9488',
+  divider:'#f3f4f6',
+};
+
+const DARK = {
+  pageBg:'#0c0908', cardBg:'#15100d', cardBorder:'#2a1f1a',
+  cardShadow:'0 12px 40px -4px rgba(0,0,0,.6)',
+  t1:'#ecfeff', t2:'rgba(207,250,254,.7)', t3:'rgba(207,250,254,.4)',
+  acc:'#22d3ee', accHover:'#67e8f9',
+  accGrad:'linear-gradient(135deg,#0e7490,#22d3ee)',
+  headerBg:'#080605', headerBorder:'#231a15',
+  msgAreaBg:'#15100d',
+  msgUserBg:'#e0f2fe',
+  msgUserShadow:'0 4px 14px rgba(34,211,238,.15)',
+  msgUserText:'#0c0908', msgAiBg:'#1a1310', msgAiText:'#ecfeff',
+  inputBg:'#080605', inputBorder:'#231a15', inputFocus:'#22d3ee', inputText:'#ecfeff',
+  sendActive:'#e0f2fe', sendDisabled:'#1a1310',
+  statusDot:'#10b981', statusGlow:'0 0 6px rgba(16,185,129,.4)', onlineText:'rgba(207,250,254,.4)',
+  scrollThumb:'#2a1f1a',
+  sidebarBg:'#080605',
+  navActiveBg:'rgba(34,211,238,0.08)', navActiveClr:'#22d3ee', navActiveBrd:'rgba(34,211,238,0.2)',
+  navHoverBg:'rgba(255,255,255,0.03)', accBg:'rgba(34,211,238,0.07)',
+  redBg:'rgba(239,68,68,0.07)',   redClr:'#f87171', redBrd:'rgba(239,68,68,0.18)',
+  greenBg:'rgba(16,185,129,0.07)', greenClr:'#34d399', greenBrd:'rgba(16,185,129,0.18)',
+  amberBg:'rgba(245,158,11,0.07)', amberClr:'#fbbf24', amberBrd:'rgba(245,158,11,0.18)',
+  badgeBg:'rgba(34,211,238,0.08)', badgeClr:'#22d3ee',
+  divider:'#1a1310',
+};
+
+const SAMPLE_HISTORY = [
+  {
+    id:1, filename:'HDFC_Life_ClickProtect.pdf', date:'Mar 15, 2026',
+    policy_type:'Term Life', insurer:'HDFC Life',
+    analysis:{
+      policy_name:'HDFC Life Click 2 Protect Super',
+      policy_type:'Term Life', insurer:'HDFC Life Insurance Co. Ltd.', uin:'101N145V02',
+      key_benefits:[
+        'Life cover up to age 85','Critical illness benefit rider',
+        'Premium waiver on disability','Return of premium option',
+        'Increasing cover option','Accidental death benefit',
+      ],
+      exclusions:[
+        'Suicide within 12 months of issuance','Pre-existing conditions (first 2 years)',
+        'Hazardous activities or adventure sports','War, riot or civil commotion',
+        'Self-inflicted injuries','Substance or alcohol abuse',
+      ],
+      death_benefit:'Sum assured paid as lump sum or monthly income to nominee. Minimum sum assured is ₹50 Lakhs.',
+      survival_benefit:'No survival benefit under base plan. Return of Premium variant returns total premiums paid on maturity.',
+      surrender_value:'Policy acquires surrender value after 3 consecutive premium years. Value depends on premiums paid and remaining term.',
+      loan_facility:null,
+      free_look_period:'30 days',
+      tax_benefit:'Premiums qualify for deduction under Section 80C up to ₹1.5L. Death benefit is fully tax-free under Section 10(10D).',
+      important_conditions:[
+        'Medical examination mandatory for sum assured above ₹1 Crore',
+        'Grace period of 30 days for annual/semi-annual mode',
+        'Policy lapses if premium unpaid beyond grace period',
+        'Revival allowed within 5 years of lapse with applicable interest',
+      ],
+    },
+  },
+  { id:2, filename:'LIC_JeevanAnand.pdf', date:'Mar 12, 2026', policy_type:'Endowment', insurer:'LIC of India', analysis:null },
+  { id:3, filename:'StarHealth_Comprehensive.pdf', date:'Mar 10, 2026', policy_type:'Health', insurer:'Star Health', analysis:null },
+];
+
+export default function Dboard({ file, isDark: initDark = true }) {
+  const [dark,           setDark]           = useState(initDark);
+  const [sidebarOpen,    setSidebarOpen]    = useState(true);
+  const [activeTab,      setActiveTab]      = useState('home');
+  const [history,        setHistory]        = useState(SAMPLE_HISTORY);
+  const [activeAnalysis, setActiveAnalysis] = useState(null);
+  const [isDragging,     setIsDragging]     = useState(false);
+  const [uploading,      setUploading]      = useState(false);
+  const [uploadPct,      setUploadPct]      = useState(0);
+  const [chatOpen,       setChatOpen]       = useState(false);
+  const [chatInput,      setChatInput]      = useState('');
+  const [isTyping,       setIsTyping]       = useState(false);
+  const [chatMessages,   setChatMessages]   = useState([
+    {
+      id:1, sender:'ai',
+      text: file
+        ? `Hello, I'm IRIS. I've processed "${file.name}". Ask me anything about its clauses, benefits, or exclusions.`
+        : "Hello, I'm IRIS. Upload an insurance policy and I'll analyze every clause, benefit, and exclusion for you.",
+    },
+  ]);
+
+  const fileRef = useRef(null);
+  const hdrRef  = useRef(null);
+  const chatEnd = useRef(null);
+
+  const T    = dark ? DARK : LIGHT;
+  const f    = { fontFamily:"'DM Sans', sans-serif" };
+  const syne = { fontFamily:"'Syne', sans-serif" };
+  const bbs  = { fontFamily:"'Bebas Neue', cursive" };
+  const mono = { fontFamily:"'JetBrains Mono', monospace" };
+
+  useEffect(() => {
+    const link  = Object.assign(document.createElement('link'),  { rel:'stylesheet', href:FONT_LINK });
+    const style = Object.assign(document.createElement('style'), { textContent:KEYFRAMES });
+    document.head.append(link, style);
+    return () => { link.remove(); style.remove(); };
+  }, []);
+
+  useEffect(() => {
+    chatEnd.current?.scrollIntoView({ behavior:'smooth' });
+  }, [chatMessages, isTyping]);
+
+  useEffect(() => {
+    if (file) processFile(file);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const processFile = useCallback((f) => {
+    setUploading(true); setUploadPct(0);
+    const iv = setInterval(() => {
+      setUploadPct(p => {
+        if (p >= 100) {
+          clearInterval(iv);
+          setUploading(false);
+          setActiveAnalysis(SAMPLE_HISTORY[0].analysis);
+          setHistory(prev => [{
+            id: Date.now(),
+            filename: f.name,
+            date: new Date().toLocaleDateString('en-IN', { day:'2-digit', month:'short', year:'numeric' }),
+            policy_type:'Term Life', insurer:'Detected',
+            analysis: SAMPLE_HISTORY[0].analysis,
+          }, ...prev]);
+          setActiveTab('home');
+          return 100;
+        }
+        return p + 4;
+      });
+    }, 80);
+  }, []);
+
+  const handleDrop = useCallback((e) => {
+    e.preventDefault(); setIsDragging(false);
+    const picked = e.dataTransfer.files[0];
+    if (picked) processFile(picked);
+  }, [processFile]);
+
+  const sendChat = () => {
+    if (!chatInput.trim() || isTyping) return;
+    const text = chatInput;
+    setChatMessages(p => [...p, { id:Date.now(), sender:'user', text }]);
+    setChatInput(''); setIsTyping(true);
+    setTimeout(() => {
+      setChatMessages(p => [...p, {
+        id:Date.now()+1, sender:'ai',
+        text:'Analyzing clause context… Connect the backend model to retrieve clause-specific analysis from your document.',
+      }]);
+      setIsTyping(false);
+    }, 1600);
+  };
+
+  // ── Sub-components ────────────────────────────────────────────────────────
+
+  const IrisAvatar = ({ size=40 }) => (
+    <div style={{
+      width:size, height:size, borderRadius:Math.round(size*0.28),
+      flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center',
+      background:T.accGrad, boxShadow:T.msgUserShadow,
+    }}>
+      <Aperture size={Math.round(size*0.48)} color={dark ? '#0c0908' : '#ffffff'} />
+    </div>
+  );
+
+  const NavBtn = ({ id, icon:Icon, label }) => {
+    const active = activeTab === id;
+    return (
+      <button
+        onClick={() => setActiveTab(id)}
+        style={{
+          width:'100%', display:'flex', alignItems:'center',
+          gap:12, padding: sidebarOpen ? '10px 14px' : '10px',
+          justifyContent: sidebarOpen ? 'flex-start' : 'center',
+          borderRadius:12, cursor:'pointer',
+          border:`1px solid ${active ? T.navActiveBrd : 'transparent'}`,
+          background: active ? T.navActiveBg : 'transparent',
+          color: active ? T.navActiveClr : T.t3,
+          ...f, fontSize:14, fontWeight:500, transition:'all .2s',
+        }}
+        onMouseEnter={e => { if (!active) e.currentTarget.style.background = T.navHoverBg; }}
+        onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}
+      >
+        <Icon size={16} style={{ flexShrink:0 }} />
+        {sidebarOpen && <span>{label}</span>}
+      </button>
+    );
+  };
+
+  const Badge = ({ label, variant='acc' }) => {
+    const map = {
+      acc:   [T.badgeBg,  T.badgeClr],
+      green: [T.greenBg,  T.greenClr],
+      red:   [T.redBg,    T.redClr  ],
+      amber: [T.amberBg,  T.amberClr],
+    };
+    const [bg, clr] = map[variant] || map.acc;
+    return (
+      <span style={{
+        display:'inline-flex', alignItems:'center',
+        padding:'2px 10px', borderRadius:20,
+        ...mono, fontSize:10, fontWeight:600, background:bg, color:clr,
+      }}>{label}</span>
+    );
+  };
+
+  const InfoCard = ({ icon:Icon, label, value, variant='acc' }) => {
+    const map = {
+      acc:   [T.accBg,   T.acc     ],
+      green: [T.greenBg, T.greenClr],
+      amber: [T.amberBg, T.amberClr],
+    };
+    const [ibg, iclr] = map[variant] || map.acc;
+    return (
+      <div style={{ borderRadius:16, padding:'18px 20px', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow }}>
+        <div style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
+          <div style={{ width:36, height:36, borderRadius:10, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:ibg }}>
+            <Icon size={16} style={{ color:iclr }} />
+          </div>
+          <div style={{ minWidth:0 }}>
+            <p style={{ ...mono, fontSize:10, fontWeight:600, letterSpacing:1.2, textTransform:'uppercase', color:T.t3, margin:'0 0 6px 0' }}>{label}</p>
+            <p style={{ ...f, fontSize:13, lineHeight:1.65, color: value ? T.t2 : T.t3, margin:0, fontStyle: value ? 'normal' : 'italic' }}>
+              {value || 'Not applicable'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ── Upload Zone ───────────────────────────────────────────────────────────
+  const UploadZone = () => (
+    <div
+      onDragOver={e => { e.preventDefault(); setIsDragging(true); }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => fileRef.current?.click()}
+      style={{
+        borderRadius:20, padding:'52px 24px',
+        border:`2px dashed ${isDragging ? T.acc : T.cardBorder}`,
+        background: isDragging ? T.accBg : T.headerBg,
+        cursor:'pointer', transition:'all .3s',
+        display:'flex', flexDirection:'column',
+        alignItems:'center', justifyContent:'center',
+        gap:20, textAlign:'center',
+      }}
+    >
+      <input ref={fileRef} type="file" accept=".pdf,.doc,.docx"
+        style={{ display:'none' }}
+        onChange={e => { if (e.target.files[0]) processFile(e.target.files[0]); }}
+      />
+      {uploading ? (
+        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:14, width:'100%' }}>
+          <div className="spin-anim" style={{ width:40, height:40, borderRadius:'50%', border:`3px solid ${T.cardBorder}`, borderTopColor:T.acc }} />
+          <p style={{ ...syne, fontSize:15, fontWeight:600, color:T.t1, margin:0 }}>Analyzing policy with IRIS…</p>
+          <div style={{ width:'100%', maxWidth:320, height:4, borderRadius:4, background:T.cardBorder }}>
+            <div style={{ height:'100%', borderRadius:4, background:T.accGrad, width:`${uploadPct}%`, transition:'width .15s' }} />
+          </div>
+          <p style={{ ...mono, fontSize:11, color:T.t3, margin:0 }}>{uploadPct}% — Running ML pipeline</p>
+        </div>
+      ) : (
+        <>
+          <div style={{ width:64, height:64, borderRadius:18, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.accBg, border:`1px solid ${T.cardBorder}` }}>
+            <Upload size={28} style={{ color:T.acc }} />
+          </div>
+          <div>
+            <p style={{ ...syne, fontSize:16, fontWeight:600, color:T.t1, margin:'0 0 4px 0' }}>Upload your insurance policy</p>
+            <p style={{ ...f, fontSize:13, color:T.t3, margin:0 }}>Drag & drop or click to browse · PDF, DOC up to 20MB</p>
+          </div>
+          <button style={{
+            display:'flex', alignItems:'center', gap:8, padding:'10px 26px',
+            borderRadius:12, border:'none', background:T.accGrad, cursor:'pointer',
+            color: dark ? '#0c0908' : '#ffffff',
+            ...syne, fontSize:14, fontWeight:600, boxShadow:T.msgUserShadow, marginTop:4,
+          }}>
+            <FilePlus size={16} /> Choose File
+          </button>
+        </>
+      )}
+    </div>
+  );
+
+  // ── Analysis renderer ─────────────────────────────────────────────────────
+  const renderAnalysis = (a) => (
+    <div className="fade-in" style={{ display:'flex', flexDirection:'column', gap:20 }}>
+
+      {/* Policy header */}
+      <div style={{ borderRadius:20, padding:'26px 30px', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow }}>
+        <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', flexWrap:'wrap', gap:16 }}>
+          <div>
+            <h2 style={{ ...bbs, fontSize:42, letterSpacing:2, color:T.t1, margin:'0 0 6px 0', lineHeight:1 }}>{a.policy_name}</h2>
+            <p style={{ ...syne, fontSize:15, fontWeight:500, color:T.t2, margin:'0 0 4px 0' }}>{a.insurer}</p>
+            {a.uin && <p style={{ ...mono, fontSize:11, color:T.t3, margin:0 }}>UIN: {a.uin}</p>}
+          </div>
+          <div style={{ display:'flex', gap:8, flexWrap:'wrap', alignItems:'center' }}>
+            <Badge label={a.policy_type} variant="acc" />
+            <Badge label="✓ Analyzed" variant="green" />
+          </div>
+        </div>
+      </div>
+
+      {/* Benefits + Exclusions */}
+      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
+        <div style={{ borderRadius:20, padding:'22px 24px', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow }}>
+          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
+            <div style={{ width:30, height:30, borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center', background:T.greenBg }}>
+              <CheckCircle2 size={15} style={{ color:T.greenClr }} />
+            </div>
+            <p style={{ ...mono, fontSize:10, fontWeight:600, letterSpacing:1.2, textTransform:'uppercase', color:T.t3, margin:0 }}>Key Benefits</p>
+          </div>
+          <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
+            {a.key_benefits.map((b,i) => (
+              <li key={i} style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
+                <span style={{ width:6, height:6, borderRadius:'50%', flexShrink:0, marginTop:6, background:T.greenClr, boxShadow:`0 0 6px ${T.greenClr}55` }} />
+                <span style={{ ...f, fontSize:13, color:T.t2, lineHeight:1.5 }}>{b}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div style={{ borderRadius:20, padding:'22px 24px', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow }}>
+          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
+            <div style={{ width:30, height:30, borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center', background:T.redBg }}>
+              <AlertTriangle size={15} style={{ color:T.redClr }} />
+            </div>
+            <p style={{ ...mono, fontSize:10, fontWeight:600, letterSpacing:1.2, textTransform:'uppercase', color:T.t3, margin:0 }}>Exclusions</p>
+          </div>
+          <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
+            {a.exclusions.map((e,i) => (
+              <li key={i} style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
+                <span style={{ width:6, height:6, borderRadius:'50%', flexShrink:0, marginTop:6, background:T.redClr, boxShadow:`0 0 6px ${T.redClr}55` }} />
+                <span style={{ ...f, fontSize:13, color:T.t2, lineHeight:1.5 }}>{e}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {/* Info grid */}
+      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
+        <InfoCard icon={Shield}     label="Death Benefit"       value={a.death_benefit}    variant="acc"   />
+        <InfoCard icon={BadgeCheck} label="Survival / Maturity" value={a.survival_benefit} variant="green" />
+        <InfoCard icon={RefreshCw}  label="Surrender Value"     value={a.surrender_value}  variant="amber" />
+        <InfoCard icon={Banknote}   label="Loan Facility"       value={a.loan_facility}    variant="acc"   />
+        <InfoCard icon={Calendar}   label="Free Look Period"    value={a.free_look_period} variant="green" />
+        <InfoCard icon={DollarSign} label="Tax Benefits"        value={a.tax_benefit}      variant="amber" />
+      </div>
+
+      {/* Important conditions */}
+      <div style={{ borderRadius:20, padding:'22px 24px', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow }}>
+        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:18 }}>
+          <div style={{ width:30, height:30, borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center', background:T.amberBg }}>
+            <Info size={15} style={{ color:T.amberClr }} />
+          </div>
+          <p style={{ ...mono, fontSize:10, fontWeight:600, letterSpacing:1.2, textTransform:'uppercase', color:T.t3, margin:0 }}>Important Conditions</p>
+        </div>
+        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
+          {a.important_conditions.map((c,i) => (
+            <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:12, padding:'14px 16px', borderRadius:12, background:T.amberBg, border:`1px solid ${T.amberBrd}` }}>
+              <span style={{ ...mono, fontSize:11, fontWeight:700, color:T.amberClr, flexShrink:0, marginTop:1 }}>{String(i+1).padStart(2,'0')}</span>
+              <span style={{ ...f, fontSize:13, color:T.t2, lineHeight:1.55 }}>{c}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ── History renderer ──────────────────────────────────────────────────────
+  const renderHistory = () => (
+    <div className="fade-in" style={{ display:'flex', flexDirection:'column', gap:12 }}>
+      {history.length === 0 && (
+        <div style={{ textAlign:'center', padding:'60px 0', color:T.t3, ...f }}>No documents analyzed yet.</div>
+      )}
+      {history.map(item => (
+        <div key={item.id} style={{ display:'flex', alignItems:'center', gap:16, padding:'18px 22px', borderRadius:18, background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow }}>
+          <div style={{ width:44, height:44, borderRadius:12, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.accBg, border:`1px solid ${T.cardBorder}` }}>
+            <FileText size={20} style={{ color:T.acc }} />
+          </div>
+          <div style={{ flex:1, minWidth:0 }}>
+            <p style={{ ...syne, fontSize:14, fontWeight:600, color:T.t1, margin:'0 0 4px 0', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{item.filename}</p>
+            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+              <span style={{ ...mono, fontSize:11, color:T.t3 }}>{item.date}</span>
+              <span style={{ color:T.cardBorder }}>·</span>
+              <Badge label={item.policy_type} variant="acc" />
+              <span style={{ color:T.cardBorder }}>·</span>
+              <span style={{ ...f, fontSize:12, color:T.t3 }}>{item.insurer}</span>
+            </div>
+          </div>
+          <div style={{ display:'flex', gap:8 }}>
+            {item.analysis && (
+              <button
+                onClick={() => { setActiveAnalysis(item.analysis); setActiveTab('home'); }}
+                style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 14px', borderRadius:10, cursor:'pointer', border:`1px solid ${T.navActiveBrd}`, background:T.navActiveBg, color:T.navActiveClr, ...f, fontSize:12, fontWeight:500, transition:'all .2s' }}
+              >
+                <Eye size={13} /> View
+              </button>
+            )}
+            <button
+              onClick={() => setHistory(h => h.filter(x => x.id !== item.id))}
+              style={{ width:34, height:34, borderRadius:10, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', background:'transparent', border:`1px solid ${T.cardBorder}`, color:T.t3, transition:'all .2s' }}
+              onMouseEnter={e => { e.currentTarget.style.borderColor=T.redClr; e.currentTarget.style.color=T.redClr; e.currentTarget.style.background=T.redBg; }}
+              onMouseLeave={e => { e.currentTarget.style.borderColor=T.cardBorder; e.currentTarget.style.color=T.t3; e.currentTarget.style.background='transparent'; }}
+            >
+              <Trash2 size={14} />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  // ════════════════════════ MAIN RENDER ═════════════════════════════════════
+  return (
+    <div style={{ display:'flex', height:'100vh', overflow:'hidden', background:T.pageBg, color:T.t1, ...f, transition:'background .4s, color .4s' }}>
+
+      {/* ── SIDEBAR ── */}
+      <aside style={{
+        flexShrink:0, display:'flex', flexDirection:'column',
+        width: sidebarOpen ? 240 : 66,
+        background:T.sidebarBg, borderRight:`1px solid ${T.headerBorder}`,
+        transition:'width .3s cubic-bezier(0.16,1,0.3,1)', overflow:'hidden',
+      }}>
+
+        {/* Logo row — FIX 1: minWidth:240 REMOVED */}
+        <div style={{
+          display:'flex', alignItems:'center', gap:12,
+          padding:'20px 16px', borderBottom:`1px solid ${T.headerBorder}`,
+          // ✅ minWidth:240 removed — menu button now stays visible when collapsed
+        }}>
+          <IrisAvatar size={38} />
+          {sidebarOpen && (
+            <div>
+              <p style={{ ...bbs, fontSize:28, letterSpacing:2, color:T.t1, margin:0, lineHeight:1 }}>IRIS</p>
+              <p style={{ ...mono, fontSize:9, color:T.t3, margin:'2px 0 0 0', letterSpacing:1 }}>POLICY INTELLIGENCE</p>
+            </div>
+          )}
+          <button
+            onClick={() => setSidebarOpen(v => !v)}
+            style={{
+              marginLeft:'auto', width:30, height:30, borderRadius:8, cursor:'pointer',
+              display:'flex', alignItems:'center', justifyContent:'center',
+              background:'transparent', border:`1px solid ${T.cardBorder}`, color:T.t3,
+              transition:'all .2s', flexShrink:0,
+            }}
+            onMouseEnter={e => { e.currentTarget.style.borderColor=T.acc; e.currentTarget.style.color=T.acc; }}
+            onMouseLeave={e => { e.currentTarget.style.borderColor=T.cardBorder; e.currentTarget.style.color=T.t3; }}
+          >
+            <Menu size={14} />
+          </button>
+        </div>
+
+        {/* Nav */}
+        <nav style={{ flex:1, overflowY:'auto', overflowX:'hidden', padding:'12px 8px', display:'flex', flexDirection:'column', gap:4 }}>
+          <NavBtn id="home"    icon={Home}  label="Dashboard" />
+          <NavBtn id="history" icon={Clock} label="History"   />
+
+          {sidebarOpen && activeTab === 'history' && (
+            <div style={{ marginTop:8, display:'flex', flexDirection:'column', gap:2 }}>
+              {history.map(item => (
+                <button
+                  key={item.id}
+                  onClick={() => { if (item.analysis) { setActiveAnalysis(item.analysis); setActiveTab('home'); } }}
+                  style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'10px 12px', borderRadius:10, cursor:'pointer', background:'transparent', border:'1px solid transparent', textAlign:'left', transition:'all .2s', width:'100%' }}
+                  onMouseEnter={e => e.currentTarget.style.background = T.navHoverBg}
+                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                >
+                  <FileText size={13} style={{ color:T.t3, flexShrink:0, marginTop:2 }} />
+                  <div style={{ minWidth:0 }}>
+                    <p style={{ ...f, fontSize:12, fontWeight:500, color:T.t2, margin:'0 0 3px 0', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:150 }}>{item.filename}</p>
+                    <p style={{ ...mono, fontSize:10, color:T.t3, margin:0 }}>{item.date}</p>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </nav>
+
+        {/* Dark mode toggle */}
+        <div style={{ padding:'12px 8px', borderTop:`1px solid ${T.headerBorder}` }}>
+          <button
+            onClick={() => setDark(v => !v)}
+            style={{
+              width:'100%', display:'flex', alignItems:'center',
+              gap:12, padding: sidebarOpen ? '10px 14px' : '10px',
+              justifyContent: sidebarOpen ? 'flex-start' : 'center',
+              borderRadius:12, cursor:'pointer',
+              background:T.cardBg, border:`1px solid ${T.cardBorder}`,
+              color:T.t3, ...f, fontSize:13, fontWeight:500,
+              boxShadow:T.cardShadow, transition:'all .2s',
+            }}
+            onMouseEnter={e => { e.currentTarget.style.borderColor=T.acc; e.currentTarget.style.color=T.acc; e.currentTarget.style.transform='scale(1.02)'; }}
+            onMouseLeave={e => { e.currentTarget.style.borderColor=T.cardBorder; e.currentTarget.style.color=T.t3; e.currentTarget.style.transform='none'; }}
+          >
+            {dark
+              ? <Sun  size={15} style={{ color:'#22d3ee', flexShrink:0 }} />
+              : <Moon size={15} style={{ color:T.acc,    flexShrink:0 }} />
+            }
+            {sidebarOpen && <span>{dark ? 'Light Mode' : 'Dark Mode'}</span>}
+          </button>
+        </div>
+      </aside>
+
+      {/* ── MAIN AREA ── */}
+      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
+
+        {/* Top bar */}
+        <header style={{ flexShrink:0, display:'flex', alignItems:'center', gap:16, padding:'16px 28px', background:T.headerBg, borderBottom:`1px solid ${T.headerBorder}`, transition:'background .4s, border-color .4s' }}>
+          <div style={{ flex:1 }}>
+            <h1 style={{ ...syne, fontSize:18, fontWeight:700, color:T.t1, margin:0 }}>
+              {activeTab === 'home' ? 'Policy Analysis' : 'Analysis History'}
+            </h1>
+            <p style={{ ...mono, fontSize:11, color:T.t3, margin:'3px 0 0 0' }}>
+              {activeTab === 'home'
+                ? activeAnalysis ? `Viewing: ${activeAnalysis.policy_name}` : 'Upload a policy document to begin'
+                : `${history.length} document${history.length !== 1 ? 's' : ''} analyzed`}
+            </p>
+          </div>
+
+          {/* Header upload button — always visible */}
+          <label htmlFor="hdr-upload" style={{
+            display:'flex', alignItems:'center', gap:8, padding:'10px 20px', borderRadius:12, cursor:'pointer',
+            background:T.accGrad, border:'none', color: dark ? '#0c0908' : '#ffffff',
+            ...syne, fontSize:13, fontWeight:600, boxShadow:T.msgUserShadow, transition:'all .2s',
+          }}
+            onMouseEnter={e => e.currentTarget.style.transform='scale(1.03)'}
+            onMouseLeave={e => e.currentTarget.style.transform='none'}
+          >
+            <FilePlus size={15} /> Upload Policy
+          </label>
+          <input id="hdr-upload" ref={hdrRef} type="file" accept=".pdf,.doc,.docx"
+            style={{ display:'none' }}
+            onChange={e => { if (e.target.files[0]) processFile(e.target.files[0]); }}
+          />
+        </header>
+
+        {/* Scrollable content */}
+        <div className="cb-scrollbar" style={{ flex:1, overflowY:'auto', padding:28, display:'flex', flexDirection:'column', gap:24, background:T.pageBg, transition:'background .4s' }}>
+
+          {/* FIX 2: Only show full upload zone when no analysis is loaded */}
+          {!activeAnalysis && <UploadZone />}
+
+          {/* Home tab */}
+          {activeTab === 'home' && (
+            activeAnalysis
+              ? renderAnalysis(activeAnalysis)
+              : (
+                <div className="fade-in" style={{ borderRadius:24, padding:'72px 24px', textAlign:'center', background:T.cardBg, border:`1px solid ${T.cardBorder}`, boxShadow:T.cardShadow, display:'flex', flexDirection:'column', alignItems:'center', gap:20 }}>
+                  <div style={{ width:80, height:80, borderRadius:24, display:'flex', alignItems:'center', justifyContent:'center', background:T.accGrad, boxShadow:`0 0 40px ${dark ? 'rgba(34,211,238,.2)' : 'rgba(13,148,136,.2)'}` }}>
+                    <Aperture size={38} color={dark ? '#0c0908' : '#ffffff'} />
+                  </div>
+                  <div>
+                    <h2 style={{ ...bbs, fontSize:48, letterSpacing:2, color:T.t1, margin:'0 0 8px 0', lineHeight:1 }}>READY TO ANALYZE</h2>
+                    <p style={{ ...f, fontSize:14, color:T.t3, margin:0, maxWidth:420 }}>
+                      Upload an insurance policy document above. IRIS will extract and structure every clause, benefit, exclusion, and condition for you.
+                    </p>
+                  </div>
+                  <div style={{ display:'flex', gap:10, flexWrap:'wrap', justifyContent:'center', marginTop:8 }}>
+                    {['Policy Details','Key Benefits','Exclusions','Death Benefit','Tax & Loans','Important Conditions'].map(tag => (
+                      <span key={tag} style={{ padding:'6px 14px', borderRadius:20, background:T.accBg, border:`1px solid ${T.cardBorder}`, ...mono, fontSize:11, color:T.acc, fontWeight:500 }}>{tag}</span>
+                    ))}
+                  </div>
+                </div>
+              )
+          )}
+
+          {/* History tab */}
+          {activeTab === 'history' && renderHistory()}
+        </div>
+      </div>
+
+      {/* ── IRIS CHAT FAB ── */}
+      {!chatOpen && (
+        <button
+          onClick={() => setChatOpen(true)}
+          style={{
+            position:'fixed', bottom:28, right:28, zIndex:100,
+            width:58, height:58, borderRadius:18, border:'none', cursor:'pointer',
+            display:'flex', alignItems:'center', justifyContent:'center',
+            background:T.accGrad,
+            boxShadow:`${T.msgUserShadow}, 0 0 30px ${dark ? 'rgba(34,211,238,.3)' : 'rgba(13,148,136,.25)'}`,
+            transition:'transform .2s',
+          }}
+          onMouseEnter={e => e.currentTarget.style.transform='scale(1.08)'}
+          onMouseLeave={e => e.currentTarget.style.transform='none'}
+        >
+          <Aperture size={26} color={dark ? '#0c0908' : '#ffffff'} />
+        </button>
+      )}
+
+      {/* ── IRIS CHAT PANEL ── */}
+      {chatOpen && (
+        <div className="fade-in" style={{
+          position:'fixed', bottom:28, right:28, zIndex:100,
+          width:360, height:500, display:'flex', flexDirection:'column',
+          borderRadius:24, overflow:'hidden',
+          background:T.cardBg, border:`1px solid ${T.cardBorder}`,
+          boxShadow:`${T.cardShadow}, 0 0 40px ${dark ? 'rgba(34,211,238,.15)' : 'rgba(13,148,136,.15)'}`,
+        }}>
+
+          {/* Chat header */}
+          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 20px', background:T.headerBg, borderBottom:`1px solid ${T.headerBorder}` }}>
+            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
+              <IrisAvatar size={40} />
+              <div>
+                <p style={{ ...syne, margin:0, fontSize:15, fontWeight:600, color:T.t1 }}>IRIS</p>
+                <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:3 }}>
+                  <span style={{ width:7, height:7, borderRadius:'50%', display:'inline-block', background:T.statusDot, boxShadow:T.statusGlow, animation:'cb-pulse 2s ease-in-out infinite' }} />
+                  <span style={{ ...mono, fontSize:10, color:T.onlineText, fontWeight:500 }}>System Online</span>
+                </div>
+              </div>
+            </div>
+            <button
+              onClick={() => setChatOpen(false)}
+              style={{ width:30, height:30, borderRadius:8, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', background:'transparent', border:`1px solid ${T.cardBorder}`, color:T.t3, transition:'all .2s' }}
+              onMouseEnter={e => { e.currentTarget.style.borderColor=T.redClr; e.currentTarget.style.color=T.redClr; }}
+              onMouseLeave={e => { e.currentTarget.style.borderColor=T.cardBorder; e.currentTarget.style.color=T.t3; }}
+            >
+              <X size={14} />
+            </button>
+          </div>
+
+          {/* Messages */}
+          <div className="cb-scrollbar" style={{ flex:1, overflowY:'auto', padding:'20px 16px', display:'flex', flexDirection:'column', gap:16, background:T.msgAreaBg }}>
+            {chatMessages.map(msg => {
+              const isUser = msg.sender === 'user';
+              return (
+                <div key={msg.id} className="cb-msg" style={{ display:'flex', gap:10, width:'100%', justifyContent: isUser ? 'flex-end' : 'flex-start', alignItems:'flex-end' }}>
+                  {!isUser && (
+                    <div style={{ width:32, height:32, borderRadius:10, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.msgAiBg, border:`1px solid ${T.cardBorder}` }}>
+                      <Aperture size={15} style={{ color:T.acc }} />
+                    </div>
+                  )}
+                  <div style={{
+                    maxWidth:'80%', padding:'12px 16px', fontSize:13, lineHeight:1.6,
+                    borderRadius: isUser ? '18px 4px 18px 18px' : '4px 18px 18px 18px',
+                    background: isUser ? T.msgUserBg : T.msgAiBg,
+                    color: isUser ? T.msgUserText : T.msgAiText,
+                    boxShadow: isUser ? T.msgUserShadow : 'none',
+                    ...f, transition:'background .4s, color .4s',
+                  }}>
+                    {msg.text}
+                  </div>
+                </div>
+              );
+            })}
+            {isTyping && (
+              <div className="cb-msg" style={{ display:'flex', gap:10, alignItems:'center' }}>
+                <div style={{ width:32, height:32, borderRadius:10, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.msgAiBg, border:`1px solid ${T.cardBorder}` }}>
+                  <Loader2 size={14} style={{ color:T.acc, animation:'spin 1s linear infinite' }} />
+                </div>
+                <div style={{ padding:'14px 18px', display:'flex', gap:5, alignItems:'center', borderRadius:'4px 18px 18px 18px', background:T.msgAiBg }}>
+                  <span className="cb-db1" style={{ width:6, height:6, borderRadius:'50%', background:T.acc, display:'inline-block' }} />
+                  <span className="cb-db2" style={{ width:6, height:6, borderRadius:'50%', background:T.acc, display:'inline-block' }} />
+                  <span className="cb-db3" style={{ width:6, height:6, borderRadius:'50%', background:T.acc, display:'inline-block' }} />
+                </div>
+              </div>
+            )}
+            <div ref={chatEnd} />
+          </div>
+
+          {/* Input */}
+          <div style={{ padding:'14px 16px 18px', background:T.headerBg, borderTop:`1px solid ${T.headerBorder}` }}>
+            <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px', borderRadius:14, background:T.inputBg, border:`1px solid ${T.inputBorder}`, transition:'border-color .2s' }}>
+              <input
+                type="text" value={chatInput}
+                onChange={e => setChatInput(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) sendChat(); }}
+                placeholder="Ask IRIS about this policy…"
+                style={{ flex:1, background:'transparent', border:'none', outline:'none', fontSize:13, color:T.inputText, ...f }}
+                onFocus={e  => e.target.parentNode.style.borderColor = T.inputFocus}
+                onBlur={e   => e.target.parentNode.style.borderColor = T.inputBorder}
+              />
+              <button
+                onClick={sendChat}
+                disabled={!chatInput.trim() || isTyping}
+                style={{
+                  flexShrink:0, width:34, height:34, borderRadius:10, border:'none', cursor:'pointer',
+                  display:'flex', alignItems:'center', justifyContent:'center',
+                  background: chatInput.trim() && !isTyping ? T.sendActive : T.sendDisabled,
+                  color: dark ? '#0c0908' : '#ffffff',
+                  opacity: chatInput.trim() && !isTyping ? 1 : 0.4,
+                  boxShadow: chatInput.trim() && !isTyping ? T.msgUserShadow : 'none',
+                  transition:'all .2s',
+                }}
+                onMouseEnter={e => { if (chatInput.trim() && !isTyping) e.currentTarget.style.transform='scale(1.08)'; }}
+                onMouseLeave={e => e.currentTarget.style.transform='none'}
+              >
+                <Send size={15} />
+              </button>
+            </div>
+            <p style={{ ...mono, marginTop:10, textAlign:'center', fontSize:10, letterSpacing:1, color:T.t3 }}>
+              IRIS insights are for guidance · Not legal advice
+            </p>
+          </div>
+        </div>
+      )}
+
+      <style>{`.cb-scrollbar::-webkit-scrollbar-thumb { background: ${T.scrollThumb}; }`}</style>
+    </div>
+  );
+}

frontend/src/components/Dashboard/UploadModal.jsx

@@ -0,0 +1,655 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  UploadCloud, FileText, X, ShieldCheck, HelpCircle,
+  CheckCircle2, Loader, Cpu, Zap, Lock, Eye, Sun, Moon, AlertTriangle
+} from 'lucide-react';
+
+/* ── fonts + keyframes ──────────────────────────────────── */
+const FONT_LINK =
+  'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap';
+
+const KEYFRAMES = `
+  @keyframes um-up    { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
+  @keyframes um-scan  { 0%{top:-2px;opacity:0} 4%{opacity:1} 96%{opacity:1} 100%{top:100%;opacity:0} }
+  @keyframes um-spin  { to{transform:rotate(360deg)} }
+  @keyframes um-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
+  @keyframes um-fadeR { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:none} }
+  @keyframes um-shim  { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }
+  @keyframes um-twinkle{ 0%,100%{opacity:.1;transform:scale(.7)} 50%{opacity:.9;transform:scale(1.3)} }
+  @keyframes um-orbit { from{transform:rotate(0deg) translateX(180px) rotate(0deg)}   to{transform:rotate(360deg) translateX(180px) rotate(-360deg)} }
+  @keyframes um-orbit2{ from{transform:rotate(120deg) translateX(240px) rotate(-120deg)} to{transform:rotate(480deg) translateX(240px) rotate(-480deg)} }
+  @keyframes um-pulse { 0%,100%{opacity:.12;transform:scale(1)} 50%{opacity:.26;transform:scale(1.07)} }
+  @keyframes um-sway  { 0%,100%{transform:rotate(-4deg) scale(1)} 50%{transform:rotate(4deg) scale(1.03)} }
+  @keyframes um-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }
+
+  .um-card  { animation: um-up   .44s cubic-bezier(.16,1,.3,1) forwards }
+  .um-scan  { animation: um-scan 2.6s linear infinite }
+  .um-spin  { animation: um-spin 1s  linear infinite }
+  .um-float { animation: um-float 4s  ease-in-out infinite }
+  .um-fadeR { animation: um-fadeR .3s ease forwards }
+  .um-shake { animation: um-shake .4s ease forwards }
+  .um-body::-webkit-scrollbar{display:none}
+  .um-shim::after {
+    content:'';position:absolute;inset:0;
+    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
+    animation: um-shim 1.8s ease infinite;
+  }
+`;
+
+/* ── waveform bar heights (deterministic) ─────────────────── */
+const BARS = Array.from({ length: 44 }, (_, i) =>
+  Math.max(5, Math.min(52,
+    10 + Math.abs(Math.sin(i * 0.38 + 1.2) * 28) + Math.abs(Math.cos(i * 0.7) * 14)
+  ))
+);
+
+/* ── star positions (deterministic) ──────────────────────── */
+const STARS = Array.from({ length: 88 }, (_, i) => ({
+  x:     ((i * 137.508) % 100).toFixed(2),
+  y:     ((i * 97.3)    % 100).toFixed(2),
+  r:     (0.5 + (i % 4) * 0.45).toFixed(1),
+  delay: ((i * 0.22)    %  3).toFixed(2),
+  dur:   (2   + (i % 5) * 0.7).toFixed(1),
+}));
+
+/* ── THEME OBJECTS — matched to LoginPage / Hero palette ─── */
+const LIGHT = {
+  pageBg:             '#ffffff',
+  cardBg:             '#ffffff',
+  leftPanelBg:        '#f9fafb',
+  leftBorder:         '#e5e7eb',
+  headerBorder:       '#e5e7eb',
+  footerBg:           '#f9fafb',
+  footerBorder:       '#e5e7eb',
+  dropZoneBg:         '#f9fafb',
+  dropZoneBorder:     '#d1fae5',
+  dropZoneDrag:       '#ccfbf1',
+  dropZoneDragBorder: '#0d9488',
+  chipBg:             '#ffffff',
+  chipBorder:         '#e5e7eb',
+  stageBg:            '#f9fafb',
+  stageBorder:        '#e5e7eb',
+  stageActiveBg:      '#f0fdfa',
+  stageActiveBorder:  '#99f6e4',
+  cardShadow:         '0 0 0 1px rgba(0,0,0,.05), 0 32px 80px rgba(0,0,0,.08)',
+  topStrip:           'linear-gradient(90deg,#0d9488,#14b8a6,#0d9488)',
+  t1:                 '#111827',
+  t2:                 '#6b7280',
+  t3:                 '#9ca3af',
+  t4:                 'rgba(209,213,219,.8)',
+  acc:                '#0d9488',
+  acc2:               '#14b8a6',
+  accGrad:            'linear-gradient(135deg,#0d9488,#14b8a6)',
+  brandGrad:          'linear-gradient(135deg,#0d9488,#14b8a6)',
+  scanBeam:           'linear-gradient(90deg,transparent,#0d9488,#5eead4,transparent)',
+  scanGlow:           '0 0 12px #0d9488',
+  progressBg:         '#ccfbf1',
+  progressFill:       'linear-gradient(90deg,#0d9488,#14b8a6)',
+  pillBg:             'rgba(204,251,241,.5)',
+  pillBorder:         'rgba(153,246,228,.8)',
+  pillText:           '#0f766e',
+  pdfBg:              '#fee2e2',
+  pdfBorder:          '#fecaca',
+  pdfText:            '#dc2626',
+  toggleBg:           '#f3f4f6',
+  toggleBorder:       '#e5e7eb',
+  toggleColor:        '#0d9488',
+  clearBg:            '#f9fafb',
+  clearBorder:        '#e5e7eb',
+  clearText:          '#6b7280',
+  clearHover:         '#f3f4f6',
+  analyseGrad:        'linear-gradient(135deg,#0d9488,#14b8a6)',
+  analyseShadow:      '0 6px 20px rgba(13,148,136,.3)',
+  analyseText:        '#ffffff',
+  disabledBg:         '#f3f4f6',
+  disabledText:       '#9ca3af',
+  iconBg:             '#f0fdfa',
+  iconBorder:         '#99f6e4',
+  iconColor:          '#0d9488',
+  waveInactive:       '#e5e7eb',
+  waveGrad:           'linear-gradient(to top,#0d9488,#5eead4)',
+  fileText:           '#111827',
+  fileSub:            '#9ca3af',
+  doneBg:             '#f0fdfa',
+  doneBorder:         '#99f6e4',
+  doneText:           '#0d9488',
+  errorText:          '#dc2626',
+  errorBg:            '#fee2e2',
+};
+
+const DARK = {
+  pageBg:             '#0c0908',
+  cardBg:             '#15100d',
+  leftPanelBg:        '#080605',
+  leftBorder:         'rgba(42,31,26,.9)',
+  headerBorder:       'rgba(42,31,26,.9)',
+  footerBg:           'rgba(8,6,5,.9)',
+  footerBorder:       'rgba(42,31,26,.9)',
+  dropZoneBg:         'rgba(34,211,238,.03)',
+  dropZoneBorder:     'rgba(34,211,238,.2)',
+  dropZoneDrag:       'rgba(34,211,238,.08)',
+  dropZoneDragBorder: '#22d3ee',
+  chipBg:             'rgba(34,211,238,.06)',
+  chipBorder:         'rgba(42,31,26,.9)',
+  stageBg:            'rgba(34,211,238,.03)',
+  stageBorder:        'rgba(42,31,26,.9)',
+  stageActiveBg:      'rgba(34,211,238,.08)',
+  stageActiveBorder:  'rgba(34,211,238,.25)',
+  cardShadow:         '0 0 0 1px rgba(42,31,26,.9), 0 40px 120px rgba(0,0,0,.7)',
+  topStrip:           'linear-gradient(90deg,#0e7490,#22d3ee,#0e7490)',
+  t1:                 '#ecfeff',
+  t2:                 'rgba(207,250,254,.6)',
+  t3:                 'rgba(207,250,254,.35)',
+  t4:                 'rgba(34,211,238,.2)',
+  acc:                '#22d3ee',
+  acc2:               '#67e8f9',
+  accGrad:            'linear-gradient(135deg,#0e7490,#22d3ee)',
+  brandGrad:          'linear-gradient(135deg,#0e7490,#22d3ee)',
+  scanBeam:           'linear-gradient(90deg,transparent,#22d3ee,#67e8f9,transparent)',
+  scanGlow:           '0 0 14px #22d3ee',
+  progressBg:         'rgba(34,211,238,.1)',
+  progressFill:       'linear-gradient(90deg,#22d3ee,#0ea5e9)',
+  pillBg:             'rgba(21,94,117,.18)',
+  pillBorder:         'rgba(21,94,117,.4)',
+  pillText:           '#a5f3fc',
+  pdfBg:              'rgba(239,68,68,.1)',
+  pdfBorder:          'rgba(239,68,68,.25)',
+  pdfText:            '#fca5a5',
+  toggleBg:           '#1a1310',
+  toggleBorder:       '#2a1f1a',
+  toggleColor:        '#22d3ee',
+  clearBg:            'rgba(34,211,238,.07)',
+  clearBorder:        'rgba(42,31,26,.9)',
+  clearText:          'rgba(207,250,254,.6)',
+  clearHover:         'rgba(34,211,238,.14)',
+  analyseGrad:        '#e0f2fe',
+  analyseShadow:      '0 6px 24px rgba(34,211,238,.2)',
+  analyseText:        '#0c0908',
+  disabledBg:         'rgba(34,211,238,.06)',
+  disabledText:       'rgba(34,211,238,.25)',
+  iconBg:             'rgba(34,211,238,.08)',
+  iconBorder:         'rgba(42,31,26,.9)',
+  iconColor:          '#22d3ee',
+  waveInactive:       'rgba(34,211,238,.12)',
+  waveGrad:           'linear-gradient(to top,#22d3ee,#a5f3fc)',
+  fileText:           '#ecfeff',
+  fileSub:            'rgba(34,211,238,.45)',
+  doneBg:             'rgba(34,211,238,.1)',
+  doneBorder:         'rgba(34,211,238,.25)',
+  doneText:           '#22d3ee',
+  errorText:          '#fca5a5',
+  errorBg:            'rgba(239,68,68,.15)',
+};
+
+/* ── Corner Bracket ─────────────────────────── */
+function Bracket({ corner, active, T }) {
+  const t = corner.includes('top'), l = corner.includes('left');
+  const s   = active ? 28 : 14;
+  const col = active ? T.acc : T.t4;
+  return (
+    <div style={{
+      position: 'absolute', width: s, height: s,
+      transition: 'all .35s cubic-bezier(.16,1,.3,1)',
+      [t ? 'top' : 'bottom']: 10, [l ? 'left' : 'right']: 10,
+      borderTop:    t  ? `2px solid ${col}` : 'none',
+      borderBottom: !t ? `2px solid ${col}` : 'none',
+      borderLeft:   l  ? `2px solid ${col}` : 'none',
+      borderRight:  !l ? `2px solid ${col}` : 'none',
+    }} />
+  );
+}
+
+const STAGES = [
+  { icon: Cpu,  label: 'Parse'   },
+  { icon: Eye,  label: 'Extract' },
+  { icon: Zap,  label: 'Index'   },
+  { icon: Lock, label: 'Secure'  },
+];
+
+/* ══════════════════════ MAIN COMPONENT ═══════════════════════ */
+export default function UploadModal({ onUploadComplete, onCancel }) {
+  const [drag,   setDrag]   = useState(false);
+  const [file,   setFile]   = useState(null);
+  const [status, setStatus] = useState('idle');
+  const [error,  setError]  = useState('');
+  const [pct,    setPct]    = useState(0);
+  const [stage,  setStage]  = useState(-1);
+  const [dark,   setDark]   = useState(false);
+
+  const fileRef = useRef(null);
+  const dragCounter = useRef(0);
+  const T = dark ? DARK : LIGHT;
+
+  useEffect(() => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet'; link.href = FONT_LINK;
+    const style = document.createElement('style');
+    style.textContent = KEYFRAMES;
+    document.head.append(link, style);
+    return () => { link.remove(); style.remove(); };
+  }, []);
+
+  const stageRef = useRef(-1);
+  useEffect(() => {
+    if (status !== 'uploading') return;
+    setPct(0); setStage(0); stageRef.current = 0;
+    const id = setInterval(() => {
+      setPct(p => {
+        const n = p + (p < 50 ? 2.8 : p < 78 ? 1.5 : 0.5);
+        if (n >= 25 && stageRef.current < 1) { stageRef.current = 1; setStage(1); }
+        if (n >= 55 && stageRef.current < 2) { stageRef.current = 2; setStage(2); }
+        if (n >= 80 && stageRef.current < 3) { stageRef.current = 3; setStage(3); }
+        if (n >= 100) { clearInterval(id); return 100; }
+        return n;
+      });
+    }, 60);
+    return () => clearInterval(id);
+  }, [status]);
+
+  useEffect(() => {
+    if (pct >= 100 && status === 'uploading')
+      setTimeout(() => { setStatus('done'); setTimeout(() => onUploadComplete(file), 800); }, 250);
+  }, [pct, status, file, onUploadComplete]);
+
+  const validateAndPick = useCallback((f) => {
+    setError('');
+    if (f.type !== 'application/pdf') {
+      setError('Invalid file type. Please upload a PDF document.');
+      return;
+    }
+    if (f.size > 50 * 1024 * 1024) {
+      setError('File is too large. Maximum size is 50 MB.');
+      return;
+    }
+    setFile(f); setStatus('idle'); setPct(0); setStage(-1);
+  }, []);
+
+  const handleDragEnter = (e) => {
+    e.preventDefault(); e.stopPropagation();
+    dragCounter.current += 1;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault(); e.stopPropagation();
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) setDrag(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault(); e.stopPropagation();
+    setDrag(false); dragCounter.current = 0;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      validateAndPick(e.dataTransfer.files[0]);
+    }
+  };
+
+  const reset     = () => { setFile(null); setStatus('idle'); setPct(0); setStage(-1); setError(''); };
+  const uploading = status === 'uploading';
+  const done      = status === 'done';
+  const hasFile   = !!file;
+
+  /* ── Font style objects — matched to LoginPage ── */
+  const f     = { fontFamily: "'DM Sans', sans-serif" };
+  const syne  = { fontFamily: "'Syne', sans-serif" };
+  const bebas = { fontFamily: "'Bebas Neue', cursive" };
+  const mono  = { fontFamily: "'JetBrains Mono', monospace" };
+
+  const getProgressText = () => {
+    if (pct < 25) return "Parsing contract structure...";
+    if (pct < 55) return "Extracting key entities & dates...";
+    if (pct < 85) return "Running risk analysis models...";
+    return "Finalizing encryption...";
+  };
+
+  return (
+    <div style={f}>
+      {/* ══ FULL-SCREEN OVERLAY ══════════════════════════════ */}
+      <div style={{
+        position:'fixed', inset:0, zIndex:50,
+        display:'flex', alignItems:'center', justifyContent:'center',
+        overflow:'hidden', background: T.pageBg, transition:'background .5s ease',
+      }}>
+
+        {/* ── DARK BG: Hero-style starfield + black-brown atmosphere ── */}
+        {dark && (
+          <div style={{ position:'absolute', inset:0, pointerEvents:'none' }}>
+            <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
+              {STARS.map((s, i) => (
+                <circle key={i} cx={`${s.x}%`} cy={`${s.y}%`} r={s.r} fill="#a5f3fc"
+                  style={{ animation:`um-twinkle ${s.dur}s ease-in-out infinite`,
+                    animationDelay:`${s.delay}s`, opacity:.12 }}/>
+              ))}
+            </svg>
+            {/* top cyan glow — matches Hero dark atmosphere */}
+            <div style={{ position:'absolute', width:700, height:700, borderRadius:'50%',
+              top:'30%', left:'50%', transform:'translate(-50%,-50%)', filter:'blur(80px)',
+              background:'radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 65%)',
+              animation:'um-pulse 6s ease-in-out infinite' }}/>
+            <div style={{ position:'absolute', width:500, height:500, borderRadius:'50%',
+              top:'-15%', left:'-10%', filter:'blur(90px)',
+              background:'radial-gradient(circle,rgba(14,116,144,.12) 0%,transparent 65%)',
+              animation:'um-pulse 8s ease-in-out infinite', animationDelay:'.8s' }}/>
+            <div style={{ position:'absolute', width:420, height:420, borderRadius:'50%',
+              bottom:'-12%', right:'-8%', filter:'blur(80px)',
+              background:'radial-gradient(circle,rgba(34,211,238,.07) 0%,transparent 65%)',
+              animation:'um-pulse 7s ease-in-out infinite', animationDelay:'2s' }}/>
+            {/* orbiting dots */}
+            <div style={{ position:'absolute', top:'50%', left:'50%', width:0, height:0 }}>
+              <div style={{ position:'absolute', width:5, height:5, borderRadius:'50%',
+                background:'#22d3ee', boxShadow:'0 0 8px #22d3ee', marginLeft:-2.5, marginTop:-2.5,
+                animation:'um-orbit 14s linear infinite', opacity:.6 }}/>
+              <div style={{ position:'absolute', width:3, height:3, borderRadius:'50%',
+                background:'#a5f3fc', boxShadow:'0 0 5px #a5f3fc', marginLeft:-1.5, marginTop:-1.5,
+                animation:'um-orbit2 20s linear infinite', opacity:.4 }}/>
+            </div>
+            {/* subtle grid */}
+            <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.03 }}>
+              <defs><pattern id="cg" x="0" y="0" width="56" height="56" patternUnits="userSpaceOnUse">
+                <path d="M56 0L0 0 0 56" fill="none" stroke="#22d3ee" strokeWidth=".6"/>
+              </pattern></defs>
+              <rect width="100%" height="100%" fill="url(#cg)"/>
+            </svg>
+          </div>
+        )}
+
+        {/* ── LIGHT BG: teal botanical (matches LoginPage light panel) ── */}
+        {!dark && (
+          <div style={{ position:'absolute', inset:0, pointerEvents:'none', overflow:'hidden' }}>
+            <svg style={{ position:'absolute', top:'-5%', right:'-8%', width:380, height:380,
+              animation:'um-sway 8s ease-in-out infinite', opacity:.1 }}>
+              <ellipse cx="190" cy="190" rx="160" ry="72" fill="#14b8a6" transform="rotate(-28 190 190)"/>
+              <ellipse cx="190" cy="190" rx="140" ry="56" fill="#0d9488" transform="rotate(14 190 190)"/>
+              <ellipse cx="190" cy="190" rx="90"  ry="32" fill="#5eead4" transform="rotate(-5 190 190)"/>
+            </svg>
+            <svg style={{ position:'absolute', bottom:'-8%', left:'-5%', width:320, height:320,
+              animation:'um-sway 10s ease-in-out infinite', animationDelay:'1.5s', opacity:.08 }}>
+              <ellipse cx="160" cy="160" rx="130" ry="60" fill="#0d9488" transform="rotate(22 160 160)"/>
+              <ellipse cx="160" cy="160" rx="80"  ry="35" fill="#14b8a6" transform="rotate(-10 160 160)"/>
+            </svg>
+            <svg style={{ position:'absolute', top:'30%', left:'-3%', width:200, height:200,
+              animation:'um-sway 12s ease-in-out infinite', animationDelay:'3s', opacity:.06 }}>
+              <ellipse cx="100" cy="100" rx="80" ry="38" fill="#14b8a6" transform="rotate(35 100 100)"/>
+            </svg>
+            {/* teal glow */}
+            <div style={{ position:'absolute', width:600, height:600, borderRadius:'50%',
+              top:'-20%', left:'-10%', filter:'blur(80px)',
+              background:'radial-gradient(circle,rgba(94,234,212,.3) 0%,transparent 65%)',
+              animation:'um-pulse 7s ease-in-out infinite' }}/>
+            <div style={{ position:'absolute', width:500, height:500, borderRadius:'50%',
+              bottom:'-18%', right:'-8%', filter:'blur(80px)',
+              background:'radial-gradient(circle,rgba(20,184,166,.25) 0%,transparent 65%)',
+              animation:'um-pulse 9s ease-in-out infinite', animationDelay:'1.2s' }}/>
+            {/* dot grid */}
+            <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.05 }}>
+              <defs><pattern id="gg" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
+                <circle cx="1" cy="1" r="1" fill="#0d9488"/>
+              </pattern></defs>
+              <rect width="100%" height="100%" fill="url(#gg)"/>
+            </svg>
+          </div>
+        )}
+
+        {/* ══ CARD ═══════════════════════════════════════════ */}
+        <div className="um-card" style={{
+          position:'relative', zIndex:10, display:'flex', overflow:'hidden',
+          width:'min(880px, calc(100vw - 20px))', maxHeight:'calc(100vh - 40px)', borderRadius:26,
+          background: T.cardBg, border:`1px solid ${T.leftBorder}`,
+          boxShadow: T.cardShadow, transition:'background .4s, border-color .4s, box-shadow .4s',
+        }}>
+
+          {/* ── LEFT PANEL ─────────────────────────────────── */}
+          <div style={{
+            width:272, flexShrink:0, display:'flex', flexDirection:'column', justifyContent:'space-between',
+            padding:32, position:'relative', overflow:'hidden',
+            background: T.leftPanelBg, borderRight:`1px solid ${T.leftBorder}`, transition:'background .4s, border-color .4s',
+          }}>
+            <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none', opacity:.06 }}>
+              <defs><pattern id="lp" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                <circle cx="1" cy="1" r=".8" fill={T.acc}/>
+              </pattern></defs>
+              <rect width="100%" height="100%" fill="url(#lp)"/>
+            </svg>
+
+            <div style={{ position:'relative', zIndex:1 }}>
+              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:36 }}>
+                <div style={{ width:36, height:36, borderRadius:10, background:T.brandGrad, display:'flex', alignItems:'center', justifyContent:'center', boxShadow:`0 4px 14px ${T.acc}44` }}>
+                  <Cpu size={16} color="#fff"/>
+                </div>
+                <span style={{ ...syne, fontWeight: 700, fontSize:19, letterSpacing: 0.5, color:T.t1 }}>
+                  PolicyLens
+                </span>
+              </div>
+
+              {[
+                { icon: ShieldCheck, label:'End-to-end encrypted' },
+                { icon: Zap,         label:'AI clause extraction' },
+                { icon: Lock,        label:'Zero data retention'  },
+                { icon: Eye,         label:'Risk score in seconds'},
+              ].map(({ icon: Icon, label }) => (
+                <div key={label} style={{ display:'flex', alignItems:'center', gap:12, marginBottom:18 }}>
+                  <div style={{ width:30, height:30, borderRadius:8, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:T.iconBg, border:`1px solid ${T.iconBorder}`, transition:'background .4s' }}>
+                    <Icon size={13} style={{ color:T.iconColor }}/>
+                  </div>
+                  <span style={{ ...f, fontSize:12, color:T.t2 }}>{label}</span>
+                </div>
+              ))}
+            </div>
+
+            <div style={{ position:'relative', zIndex:1 }}>
+              <p style={{ ...mono, fontSize:9, letterSpacing:3, color:T.t3, marginBottom:10 }}>DOC SIGNATURE</p>
+              <div style={{ display:'flex', alignItems:'flex-end', gap:2, height:56 }}>
+                {BARS.map((h, i) => (
+                  <div key={i} style={{ width:3, borderRadius:2, height:`${hasFile ? h : 5}px`, background: hasFile ? T.waveGrad : T.waveInactive, transition:`height ${0.28 + i * 0.008}s cubic-bezier(.16,1,.3,1)` }}/>
+                ))}
+              </div>
+              {hasFile && (
+                <p className="um-fadeR" style={{ ...mono, marginTop:8, fontSize:10, color:T.acc, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
+                  {file.name.slice(0,24)}{file.name.length > 24 ? '…' : ''}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* ── RIGHT PANEL ────────────────────────────────── */}
+          <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
+
+            <div style={{ height:3, background:T.topStrip, transition:'background .5s' }}/>
+
+            <div style={{ padding:'28px 32px 20px', display:'flex', justifyContent:'space-between', alignItems:'flex-start', borderBottom:`1px solid ${T.headerBorder}`, transition:'border-color .4s' }}>
+              <div>
+                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:12 }}>
+                  <span style={{ ...syne, fontWeight: 700, fontSize:10, letterSpacing:'1px', textTransform:'uppercase', padding:'4px 12px', borderRadius:99, background:T.pillBg, border:`1px solid ${T.pillBorder}`, color:T.pillText, transition:'all .4s' }}>
+                    PolicyLens AI
+                  </span>
+                  <span style={{ ...mono, fontSize:10, letterSpacing:'1px', padding:'4px 10px', borderRadius:99, background:T.pdfBg, border:`1px solid ${T.pdfBorder}`, color:T.pdfText, transition:'all .4s' }}>
+                    .PDF
+                  </span>
+                </div>
+                <h2 style={{ ...bebas, fontSize:44, letterSpacing:2, color:T.t1, lineHeight:1, margin:0, transition:'color .4s' }}>
+                  Upload Document
+                </h2>
+                <p style={{ ...f, marginTop:8, fontSize:14, color:T.t2, transition:'color .4s' }}>
+                  Drop a contract or policy — AI extracts every clause in seconds.
+                </p>
+              </div>
+
+              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+                <button onClick={() => setDark(v => !v)} style={{ width:36, height:36, borderRadius:10, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', background:T.toggleBg, border:`1px solid ${T.toggleBorder}`, transition:'all .2s' }}
+                  onMouseEnter={e => e.currentTarget.style.transform='rotate(14deg) scale(1.1)'}
+                  onMouseLeave={e => e.currentTarget.style.transform='none'}>
+                  {dark ? <Sun size={14} style={{ color:'#22d3ee' }}/> : <Moon size={14} style={{ color:T.acc }}/>}
+                </button>
+                <button onClick={onCancel} style={{ width:36, height:36, borderRadius:10, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', background:T.clearBg, border:`1px solid ${T.clearBorder}`, color:T.t2, transition:'all .15s' }}
+                  onMouseEnter={e => { e.currentTarget.style.background='rgba(239,68,68,.12)'; e.currentTarget.style.borderColor='rgba(239,68,68,.4)'; e.currentTarget.style.color='#f87171'; }}
+                  onMouseLeave={e => { e.currentTarget.style.background=T.clearBg; e.currentTarget.style.borderColor=T.clearBorder; e.currentTarget.style.color=T.t2; }}>
+                  <X size={15}/>
+                </button>
+              </div>
+            </div>
+
+            <div className="um-body" style={{ flex:1, overflowY:'auto', scrollbarWidth:'none', msOverflowStyle:'none', padding:'24px 32px', display:'flex', flexDirection:'column', gap:14 }}>
+
+              {/* ── DROP ZONE ── */}
+              <div
+                onDragEnter={handleDragEnter}
+                onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                onClick={() => !file && fileRef.current?.click()}
+                style={{
+                  position:'relative', height:210, borderRadius:20, overflow:'hidden',
+                  cursor: file ? 'default' : 'pointer', transition:'all .3s',
+                  background: drag ? T.dropZoneDrag : error ? T.errorBg : T.dropZoneBg,
+                  border: drag ? `2px solid ${T.dropZoneDragBorder}` : error ? `2px solid ${T.errorText}` : file ? `1px solid ${T.dropZoneBorder}` : `2px dashed ${T.t4}`,
+                }}
+              >
+                <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none', opacity: drag || hasFile ? .2 : .07, transition:'opacity .4s' }}>
+                  <defs><pattern id="dz" x="0" y="0" width="18" height="18" patternUnits="userSpaceOnUse">
+                    <circle cx="1" cy="1" r="1" fill={error ? T.errorText : T.acc}/>
+                  </pattern></defs>
+                  <rect width="100%" height="100%" fill="url(#dz)"/>
+                </svg>
+
+                {['top-left','top-right','bottom-left','bottom-right'].map(c => (
+                  <Bracket key={c} corner={c} active={drag || hasFile} T={T}/>
+                ))}
+
+                {uploading && (
+                  <div className="um-scan" style={{ position:'absolute', left:0, right:0, height:2, zIndex:20, pointerEvents:'none', background:T.scanBeam, boxShadow:T.scanGlow }}/>
+                )}
+
+                {/* ── empty / error ── */}
+                {!file && (
+                  <div className={error ? "um-shake" : "um-float"} style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14, zIndex:10, pointerEvents: 'none' }}>
+                    <div style={{
+                      width:56, height:56, borderRadius:18, display:'flex', alignItems:'center', justifyContent:'center',
+                      background: error ? 'rgba(239,68,68,.1)' : drag ? T.brandGrad : T.iconBg,
+                      border: drag ? 'none' : `1px solid ${error ? 'transparent' : T.iconBorder}`,
+                      transform: drag ? 'scale(1.12)' : 'scale(1)',
+                      boxShadow: drag ? `0 0 28px ${T.acc}55` : 'none', transition:'all .3s',
+                    }}>
+                      {error
+                        ? <AlertTriangle size={26} style={{ color: T.errorText }} />
+                        : <UploadCloud size={26} style={{ color: drag ? '#fff' : T.acc }}/>
+                      }
+                    </div>
+                    <div style={{ textAlign:'center' }}>
+                      <p style={{ ...syne, fontSize:16, fontWeight:600, color: error ? T.errorText : T.t1, margin:0, transition: 'color .3s' }}>
+                        {error ? 'Upload Failed' : drag ? 'Release to drop file' : 'Drag & drop your PDF here'}
+                      </p>
+                      <p style={{ ...f, fontSize:14, color: error ? T.errorText : T.t2, marginTop:4, opacity: error ? 0.8 : 1 }}>
+                        {error ? error : (
+                          <>or <span style={{ color:T.acc, textDecoration:'underline', textDecorationColor:`${T.acc}55`, cursor:'pointer', pointerEvents: 'auto' }}>browse files</span> · max 50 MB</>
+                        )}
+                      </p>
+                    </div>
+                    {!error && (
+                      <div style={{ display:'flex', gap:6 }}>
+                        {['PDF/A','Scanned','Multi-page','Encrypted'].map(tag => (
+                          <span key={tag} style={{ ...mono, fontSize:10, padding:'3px 10px', borderRadius:99, background:T.chipBg, border:`1px solid ${T.chipBorder}`, color:T.t2, transition:'all .4s' }}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* ── file loaded ── */}
+                {file && (
+                  <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:16, zIndex:10, padding:'0 32px' }}>
+                    <div style={{ display:'flex', alignItems:'center', gap:14, width:'100%', maxWidth:440 }}>
+                      <div style={{ width:44, height:44, borderRadius:12, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background: done ? T.doneBg : 'rgba(239,68,68,.1)', border: done ? `1px solid ${T.doneBorder}` : '1px solid rgba(239,68,68,.25)', transition:'all .3s' }}>
+                        {done ? <CheckCircle2 size={20} style={{ color:T.doneText }}/> : <FileText size={20} style={{ color:'#f87171' }}/>}
+                      </div>
+                      <div style={{ flex:1, overflow:'hidden' }}>
+                        <p style={{ ...syne, fontSize:14, fontWeight:600, color:T.fileText, margin:0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
+                          {file.name}
+                        </p>
+                        <p style={{ ...mono, fontSize:11, color:T.fileSub, marginTop:3 }}>
+                          {(file.size/1048576).toFixed(2)} MB · PDF
+                        </p>
+                      </div>
+                      {status === 'idle' && (
+                        <button onClick={e => { e.stopPropagation(); reset(); }} style={{ width:28, height:28, borderRadius:8, flexShrink:0, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', background:T.clearBg, border:`1px solid ${T.clearBorder}`, color:T.t2, transition:'all .15s' }}
+                          onMouseEnter={e => { e.currentTarget.style.background='rgba(239,68,68,.1)'; e.currentTarget.style.color='#f87171'; }}
+                          onMouseLeave={e => { e.currentTarget.style.background=T.clearBg; e.currentTarget.style.color=T.t2; }}>
+                          <X size={12}/>
+                        </button>
+                      )}
+                    </div>
+
+                    {uploading && (
+                      <div style={{ width:'100%', maxWidth:440 }}>
+                        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
+                          <span style={{ ...f, fontSize:12, color:T.t2, display:'flex', alignItems:'center', gap:6 }}>
+                            <Loader size={12} className="um-spin" style={{ color:T.acc }}/>
+                            {getProgressText()}
+                          </span>
+                          <span style={{ ...mono, fontSize:11, color:T.acc }}>
+                            {Math.min(100,Math.round(pct))}%
+                          </span>
+                        </div>
+                        <div style={{ position:'relative', height:4, borderRadius:99, background:T.progressBg, overflow:'hidden' }}>
+                          <div className="um-shim" style={{ position:'absolute', left:0, top:0, height:'100%', borderRadius:99, background:T.progressFill, width:`${pct}%`, transition:'width .08s linear' }}/>
+                        </div>
+                      </div>
+                    )}
+
+                    {done && (
+                      <p className="um-fadeR" style={{ ...f, fontSize:13, fontWeight:500, color:T.doneText, display:'flex', alignItems:'center', gap:6 }}>
+                        <CheckCircle2 size={14}/> Analysis complete — redirecting…
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                <input type="file" ref={fileRef} onChange={e => e.target.files[0] && validateAndPick(e.target.files[0])} accept="application/pdf" style={{ display:'none' }}/>
+              </div>
+
+              <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
+                {STAGES.map(({ icon: Icon, label }, i) => {
+                  const active  = stage >= i;
+                  const current = stage === i && uploading;
+                  return (
+                    <div key={label} style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'center', gap:6, padding:'12px 8px', borderRadius:14, overflow:'hidden', transition:'all .35s', background: active ? T.stageActiveBg : T.stageBg, border:`1px solid ${active ? T.stageActiveBorder : T.stageBorder}` }}>
+                      {current && (
+                        <div style={{ position:'absolute', inset:0, borderRadius:14, background:`radial-gradient(circle at 50% 50%, ${T.acc}22 0%, transparent 70%)` }}/>
+                      )}
+                      <Icon size={14} style={{ color: active ? T.acc : T.t4, transition:'color .35s', zIndex:1 }}/>
+                      <span style={{ ...mono, fontSize:10, fontWeight: 500, letterSpacing:'1px', textTransform:'uppercase', color: active ? T.acc : T.t4, transition:'color .35s', zIndex:1 }}>{label}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 32px 24px', background:T.footerBg, borderTop:`1px solid ${T.footerBorder}`, transition:'background .4s, border-color .4s' }}>
+              <div style={{ display:'flex', gap:20 }}>
+                <span style={{ ...f, display:'flex', alignItems:'center', gap:6, fontSize:13, color:T.t2 }}>
+                  <ShieldCheck size={14} style={{ color:T.acc }}/> Encrypted
+                </span>
+                <span style={{ ...f, display:'flex', alignItems:'center', gap:6, fontSize:13, color:T.t2, cursor:'pointer', transition:'color .15s' }}>
+                  <HelpCircle size={14}/> Help
+                </span>
+              </div>
+
+              <div style={{ display:'flex', gap:10 }}>
+                <button onClick={reset} style={{ ...f, padding:'10px 20px', borderRadius:12, fontSize:14, fontWeight:500, cursor:'pointer', transition:'all .15s', background:T.clearBg, border:`1px solid ${T.clearBorder}`, color:T.clearText }}
+                  onMouseEnter={e => e.currentTarget.style.background=T.clearHover} onMouseLeave={e => e.currentTarget.style.background=T.clearBg}>
+                  Clear
+                </button>
+                <button onClick={() => file && status === 'idle' && setStatus('uploading')} disabled={!file || status !== 'idle'}
+                  style={{ ...f, padding:'10px 28px', borderRadius:12, fontSize:14, fontWeight:600, border:'none', transition:'all .2s', cursor: file && status === 'idle' ? 'pointer' : 'not-allowed', background: file && status === 'idle' ? T.analyseGrad : T.disabledBg, color: file && status === 'idle' ? T.analyseText : T.disabledText, boxShadow: file && status === 'idle' ? T.analyseShadow : 'none' }}
+                  onMouseEnter={e => { if (file && status==='idle') e.currentTarget.style.transform='translateY(-1px)'; }}
+                  onMouseLeave={e => e.currentTarget.style.transform='none'}>
+                  {uploading ? 'Scanning…' : done ? 'Done ✓' : 'Analyse →'}
+                </button>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Footer/Footer.jsx

@@ -0,0 +1,43 @@
+export default function Footer() {
+  const guidelines = [
+    {
+      title: "Data Security",
+      desc: "All uploaded documents are encrypted and purged post-analysis."
+    },
+    {
+      title: "Acceptable Use",
+      desc: "Users must possess legal rights to the documents they analyze."
+    },
+    {
+      title: "AI Limitations",
+      desc: "Insights are AI-assisted and do not constitute formal legal advice."
+    }
+  ];
+
+  return (
+    <footer id="contact" className="font-footer bg-gray-50 dark:bg-[#080605] border-t border-gray-200 dark:border-cyan-900/20 pt-16 pb-8 transition-colors duration-400 relative z-20">
+      <div className="max-w-7xl mx-auto px-6">
+        
+        <div className="grid md:grid-cols-3 gap-8 mb-12">
+          {guidelines.map((item, index) => (
+            <div key={index} className="bg-white dark:bg-[#120e0c] p-6 rounded-2xl border border-gray-200 dark:border-cyan-900/20 transition-colors duration-400 shadow-sm dark:shadow-none">
+              <h4 className="text-gray-900 dark:text-cyan-50 font-bold mb-2">{item.title}</h4>
+              <p className="text-gray-600 dark:text-cyan-100/60 text-sm leading-relaxed">{item.desc}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-gray-200 dark:border-cyan-900/20">
+          <div className="flex items-center gap-2 mb-4 md:mb-0">
+            <span className="text-gray-900 dark:text-cyan-50 font-bold tracking-tight text-sm uppercase">PolicyLens</span>
+          </div>
+          
+          <p className="text-gray-500 dark:text-cyan-100/40 text-sm font-medium">
+            © 2026 PolicyLens AI. All rights reserved.
+          </p>
+        </div>
+
+      </div>
+    </footer>
+  );
+}

frontend/src/components/Hero/Hero.jsx

@@ -0,0 +1,235 @@
+import { ArrowRight, FileText, Loader, CheckCircle2, AlertCircle } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const StarField = () => {
+  const [stars, setStars] = useState([]);
+
+  useEffect(() => {
+    const newStars = Array.from({ length: 40 }).map((_, i) => ({
+      id: i,
+      left: `${Math.random() * 100}%`,
+      top: `${Math.random() * 100}%`,
+      size: `${Math.random() * 3 + 1}px`,
+      animationDelay: `${Math.random() * 4}s`,
+      opacity: Math.random() * 0.5 + 0.1
+    }));
+    setStars(newStars);
+  }, []);
+
+  return (
+    <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none hidden dark:block transition-opacity duration-1000">
+      {stars.map((star) => (
+        <div
+          key={star.id}
+          className="absolute rounded-full bg-cyan-100 animate-twinkle"
+          style={{
+            left: star.left,
+            top: star.top,
+            width: star.size,
+            height: star.size,
+            animationDelay: star.animationDelay,
+            opacity: star.opacity,
+            boxShadow: `0 0 ${Math.random() * 4 + 2}px rgba(34, 211, 238, 0.8)`
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default function Hero({ onGetStarted }) {
+  return (
+    <section id="hero" className="relative min-h-screen flex items-center pt-24 pb-12 overflow-hidden">
+      
+      {/* --- BACKGROUND ATMOSPHERE --- */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-teal/5 dark:bg-transparent rounded-full blur-[120px] pointer-events-none transition-colors duration-700 z-0" />
+      <StarField />
+      <div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[1000px] h-[800px] bg-cyan-500/0 dark:bg-cyan-500/10 rounded-[100%] blur-[150px] pointer-events-none transition-colors duration-1000 z-0" />
+      <div className="absolute top-1/4 right-[-10%] w-[800px] h-[800px] bg-white/0 dark:bg-[#e0f2fe]/5 rounded-[100%] blur-[120px] pointer-events-none transition-colors duration-1000 z-0" />
+      <div className="absolute bottom-0 left-0 right-0 h-64 bg-gradient-to-t from-transparent dark:from-[#1a1210]/40 to-transparent pointer-events-none z-0" />
+
+      {/* --- CONTENT --- */}
+      <div className="max-w-7xl mx-auto px-6 w-full grid lg:grid-cols-2 gap-16 items-center relative z-10">
+        
+        {/* LEFT SIDE: Copy */}
+        <div className="max-w-xl text-center lg:text-left z-20">
+          <h1 className="text-6xl sm:text-7xl lg:text-[80px] font-bold leading-[1.05] tracking-tight mb-6 text-gray-900 dark:text-[#f0f9ff] transition-colors duration-400">
+            One-click <br />
+            for <span className="text-gray-400 dark:text-cyan-200/80">Policy</span> <br />
+            Defense.
+          </h1>
+          
+          <p className="font-nav text-lg font-light text-gray-600 dark:text-cyan-100/60 leading-relaxed mb-10 transition-colors duration-400 mx-auto lg:mx-0 max-w-md">
+            Dive into automated document analysis, where innovative AI technology meets legal expertise. Get answers instantly.
+          </p>
+
+          <button 
+            onClick={onGetStarted}
+            className="bg-brand-teal hover:bg-brand-teal-hover dark:bg-[#e0f2fe] dark:hover:bg-white text-white dark:text-[#0c0908] font-bold px-8 py-3.5 rounded-full transition-all flex items-center justify-center gap-2.5 mx-auto lg:mx-0 shadow-lg shadow-brand-teal/20 dark:shadow-cyan-500/20"
+          >
+            Get Started 
+            <ArrowRight size={18} strokeWidth={2.5} />
+          </button>
+        </div>
+
+        {/* RIGHT SIDE: Animated UI & FLOATING PDF DOCUMENTS */}
+        <div className="relative h-[650px] flex items-center justify-center w-full">
+          
+          {/* Main Back Card */}
+          <div className="absolute right-16 top-28 z-10 w-72 bg-white dark:bg-[#15100e]/80 backdrop-blur-md border border-gray-200 dark:border-cyan-900/30 rounded-3xl p-6 shadow-2xl animate-float-delayed transition-colors duration-400">
+            <div className="flex items-center gap-3 mb-6">
+               <div className="w-8 h-8 rounded bg-brand-teal dark:bg-cyan-950 flex items-center justify-center text-white dark:text-cyan-400 text-xs font-bold">P</div>
+               <div>
+                 <div className="text-sm font-bold text-gray-900 dark:text-cyan-50">Compliance Check</div>
+                 <div className="text-xs text-gray-500 dark:text-cyan-200/50">policy_v2.pdf</div>
+               </div>
+            </div>
+            <div className="text-xs text-gray-500 dark:text-cyan-200/50 mb-1">Total Risks Found</div>
+            <div className="text-3xl font-bold tracking-tight text-gray-900 dark:text-cyan-100 mb-4">3 Warnings</div>
+          </div>
+
+          {/* Main Front Card */}
+          <div className="absolute right-40 top-44 z-30 w-64 bg-brand-teal dark:bg-[#0c0908]/90 backdrop-blur-xl border border-transparent dark:border-cyan-800/40 rounded-3xl p-6 shadow-2xl dark:shadow-cyan-900/20 animate-float-smooth transition-colors duration-400">
+             <div className="text-white/80 dark:text-cyan-200/60 text-xs mb-1">Status</div>
+             <div className="text-white dark:text-cyan-50 text-xl font-bold mb-6">Scan Complete</div>
+             
+             <div className="space-y-3 mb-6">
+                <div className="bg-white/10 dark:bg-cyan-900/30 p-2.5 rounded-lg border border-white/5 dark:border-cyan-800/50">
+                  <div className="flex items-center gap-2 mb-1">
+                    <div className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                    <span className="text-white dark:text-cyan-100 text-xs font-semibold">Key Finding</span>
+                  </div>
+                  <p className="text-white/80 dark:text-cyan-100/70 text-[10px] leading-relaxed">
+                    Termination clause extends to 90 days. standard is 30 days.
+                  </p>
+                </div>
+                
+                <div className="bg-white/10 dark:bg-cyan-900/30 p-2.5 rounded-lg border border-white/5 dark:border-cyan-800/50">
+                  <div className="flex items-center gap-2 mb-1">
+                    <div className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+                    <span className="text-white dark:text-cyan-100 text-xs font-semibold">Obligation</span>
+                  </div>
+                  <p className="text-white/80 dark:text-cyan-100/70 text-[10px] leading-relaxed">
+                    Quarterly audits required starting Q3 2026.
+                  </p>
+                </div>
+             </div>
+
+             <div className="flex justify-between items-center border-t border-white/10 dark:border-cyan-900/40 pt-4 mt-2">
+               <div className="text-white/90 dark:text-cyan-100/80 text-[11px] font-medium">Auto-Sync Insights</div>
+               <div className="w-8 h-4 bg-white/30 dark:bg-cyan-700/50 rounded-full relative">
+                 <div className="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full shadow" />
+               </div>
+             </div>
+          </div>
+
+          {/* PDF 1: Top Left */}
+          <div className="absolute left-0 top-10 z-20 w-44 bg-white/95 dark:bg-[#15100e]/95 backdrop-blur-md border border-gray-100 dark:border-cyan-900/30 p-4 rounded-2xl shadow-xl animate-float-fast transition-colors duration-400 transform -rotate-3">
+             <div className="flex items-center justify-between mb-3">
+               <div className="flex items-center gap-2">
+                  <FileText className="text-blue-500 dark:text-blue-400" size={16} />
+                  <span className="text-[10px] font-bold text-gray-800 dark:text-gray-200">Legal_v1.pdf</span>
+               </div>
+               <span className="text-[9px] font-medium text-blue-500 flex items-center gap-1">
+                 <Loader size={10} className="animate-spin" />
+                 Parsing...
+               </span>
+             </div>
+             <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <div className="h-1 w-full bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
+                    <div className="h-full w-[45%] bg-blue-500 dark:bg-blue-400 rounded-full" />
+                  </div>
+                  <span className="text-[8px] text-gray-500">45%</span>
+                </div>
+                <div className="h-1 w-4/6 bg-gray-100 dark:bg-slate-800 rounded-full" />
+             </div>
+          </div>
+
+          {/* PDF 2: Far Right Edge */}
+          <div className="absolute right-[-10px] top-1/4 z-0 w-36 bg-white/90 dark:bg-[#111111]/90 backdrop-blur-md border border-gray-100 dark:border-cyan-900/20 p-3 rounded-xl shadow-lg animate-float-slow transition-colors duration-400 transform rotate-6">
+             <div className="flex justify-between items-center mb-2">
+               <span className="text-[9px] font-bold text-gray-700 dark:text-cyan-100">Summary.pdf</span>
+               <span className="text-[8px] text-brand-teal dark:text-cyan-500">Extracting...</span>
+             </div>
+             <div className="space-y-1.5 mt-2">
+                <div className="text-[7px] text-gray-400 dark:text-gray-500">Locating key clauses</div>
+                <div className="h-1 w-full bg-brand-teal/20 dark:bg-cyan-900/50 rounded-full relative overflow-hidden">
+                  <div className="absolute top-0 left-0 h-full w-[70%] bg-brand-teal dark:bg-cyan-600 rounded-full" />
+                </div>
+             </div>
+          </div>
+
+          {/* PDF 3: Middle Left */}
+          <div className="absolute left-[-90px] top-1/2 -translate-y-1/2 z-40 w-48 bg-white/95 dark:bg-[#15100e]/95 backdrop-blur-md border border-green-100 dark:border-green-900/30 p-4 rounded-2xl shadow-2xl animate-float-delayed transition-colors duration-400">
+             <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-1.5">
+                  <CheckCircle2 className="text-green-500 dark:text-green-400" size={14} />
+                  <span className="text-xs font-bold text-gray-900 dark:text-cyan-50">Contract_Final</span>
+                </div>
+                <span className="text-[9px] font-bold text-green-600 bg-green-50 dark:bg-green-900/30 px-1.5 py-0.5 rounded">Safe</span>
+             </div>
+             <div className="mt-3">
+                <div className="text-[9px] text-gray-500 dark:text-gray-400 mb-1.5">No liabilities detected.</div>
+                <div className="flex gap-1">
+                  <div className="h-6 w-1/3 bg-green-50 dark:bg-green-900/20 rounded border border-green-100 dark:border-green-900/30 flex items-center justify-center text-[8px] text-green-600 dark:text-green-400 font-medium">Clear</div>
+                  <div className="h-6 w-1/3 bg-green-50 dark:bg-green-900/20 rounded border border-green-100 dark:border-green-900/30 flex items-center justify-center text-[8px] text-green-600 dark:text-green-400 font-medium">Valid</div>
+                  <div className="h-6 w-1/3 bg-green-50 dark:bg-green-900/20 rounded border border-green-100 dark:border-green-900/30 flex items-center justify-center text-[8px] text-green-600 dark:text-green-400 font-medium">Signed</div>
+                </div>
+             </div>
+          </div>
+
+          {/* PDF 4: Bottom Right */}
+          <div className="absolute right-0 bottom-24 z-40 w-40 bg-white/95 dark:bg-[#120e0c]/95 backdrop-blur-md border border-red-100 dark:border-red-900/30 p-4 rounded-2xl shadow-xl animate-float-smooth transition-colors duration-400 transform -rotate-6">
+             <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-100 dark:border-slate-800">
+                <div className="flex items-center gap-1.5">
+                  <AlertCircle className="text-red-500" size={14} />
+                  <span className="text-[10px] font-bold text-gray-800 dark:text-gray-200">Risk_Report</span>
+                </div>
+             </div>
+             <div className="mt-2 space-y-1">
+                <div className="text-[9px] text-red-500 font-medium">! Missing signatures</div>
+                <div className="text-[9px] text-red-500 font-medium">! Clause 3.1 conflict</div>
+             </div>
+          </div>
+
+          {/* PDF 5: Bottom Center/Left */}
+          <div className="absolute left-1/4 bottom-10 z-20 w-40 bg-white/90 dark:bg-[#15100e]/90 backdrop-blur-md border border-gray-100 dark:border-cyan-900/30 p-3.5 rounded-xl shadow-lg animate-float-fast transition-colors duration-400 transform rotate-3">
+            <div className="absolute inset-0 bg-white/50 dark:bg-[#15100e]/50 border border-gray-100 dark:border-cyan-900/30 rounded-xl transform -rotate-6 -z-10 translate-y-1 translate-x-1" />
+             <div className="flex items-center justify-between mb-2">
+               <div className="flex items-center gap-1.5">
+                 <FileText className="text-purple-500 dark:text-purple-400" size={12} />
+                 <span className="text-[10px] font-bold text-gray-700 dark:text-cyan-100">NDA_Template</span>
+               </div>
+               <span className="text-[8px] text-purple-500 dark:text-purple-400 font-medium">Reviewing</span>
+             </div>
+             <div className="space-y-1.5">
+               <div className="text-[8px] text-gray-600 dark:text-gray-400">Confidentiality terms</div>
+               <div className="flex items-center gap-1.5">
+                 <div className="h-1 flex-1 bg-purple-100 dark:bg-purple-900/30 rounded-full overflow-hidden">
+                   <div className="h-full w-[60%] bg-purple-500 dark:bg-purple-400 rounded-full" />
+                 </div>
+                 <span className="text-[8px] text-gray-500">60%</span>
+               </div>
+             </div>
+          </div>
+
+          {/* PDF 6: Top Center */}
+          <div className="absolute left-1/3 top-16 z-0 w-32 bg-white/60 dark:bg-[#15100e]/60 backdrop-blur-sm border border-gray-100 dark:border-cyan-900/20 p-3 rounded-lg shadow animate-float-smooth transition-colors duration-400 opacity-70">
+             <div className="flex items-center justify-between mb-2">
+               <span className="text-[9px] font-bold text-gray-600 dark:text-gray-300">Index.pdf</span>
+               <span className="text-[7px] text-gray-400">Draft</span>
+             </div>
+             <div className="space-y-1">
+               <div className="text-[7px] text-gray-500 dark:text-gray-400">Table of Contents</div>
+               <div className="h-0.5 w-full bg-gray-300 dark:bg-slate-600 rounded-full" />
+               <div className="h-0.5 w-3/4 bg-gray-300 dark:bg-slate-600 rounded-full" />
+               <div className="h-0.5 w-2/3 bg-gray-300 dark:bg-slate-600 rounded-full" />
+             </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/components/Navbar/Navbar.jsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { Moon, Sun, X, Info, Mail } from 'lucide-react';
+import logo from '../../assets/pla.png';
+// Adding our custom fonts specifically for the modals
+const FONT_LINK = 'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap';
+
+export default function Navbar({ isDark, toggleTheme, hideNavLinks }) {
+  const [activeModal, setActiveModal] = useState(null);
+
+  useEffect(() => {
+    const link = Object.assign(document.createElement('link'), { rel: 'stylesheet', href: FONT_LINK });
+    document.head.appendChild(link);
+    return () => link.remove();
+  }, []);
+
+  // Scrolls to the hero section; falls back to top if #hero not found
+  const handleHomeClick = (e) => {
+    e.preventDefault();
+    const hero = document.getElementById('hero');
+    if (hero) {
+      hero.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    setActiveModal(null);
+  };
+
+  const closeModal = () => setActiveModal(null);
+
+  return (
+    <>
+      <nav className="w-full h-20 px-6 md:px-10 flex items-center justify-between bg-white dark:bg-[#0c0908] border-b border-gray-100 dark:border-[#231a15] transition-colors duration-300 z-40 relative">
+        
+        {/* LEFT: Logo */}
+<div className="flex items-center gap-3 cursor-pointer z-10" onClick={handleHomeClick}>
+  <img
+    src={logo}
+    alt="PolicyLens"
+    className="h-8 w-auto object-contain rounded-lg"
+  />
+  <span className="text-xl font-bold tracking-tight text-gray-900 dark:text-cyan-50">
+    PolicyLens
+  </span>
+</div>
+
+
+        {/* CENTER: Nav Links - Conditionally Rendered */}
+        {!hideNavLinks && (
+          <div className="absolute left-1/2 -translate-x-1/2 hidden md:flex items-center gap-10 font-nav">
+            <button 
+              onClick={handleHomeClick}
+              className="text-gray-500 dark:text-cyan-100/50 hover:text-brand-teal dark:hover:text-cyan-200 font-semibold text-[13px] tracking-[0.2em] uppercase transition-colors"
+            >
+              Home
+            </button>
+            <button 
+              onClick={() => setActiveModal('about')}
+              className="text-gray-500 dark:text-cyan-100/50 hover:text-brand-teal dark:hover:text-cyan-200 font-semibold text-[13px] tracking-[0.2em] uppercase transition-colors"
+            >
+              About
+            </button>
+            <button 
+              onClick={() => setActiveModal('contact')}
+              className="text-gray-500 dark:text-cyan-100/50 hover:text-brand-teal dark:hover:text-cyan-200 font-semibold text-[13px] tracking-[0.2em] uppercase transition-colors"
+            >
+              Contact
+            </button>
+          </div>
+        )}
+
+        {/* RIGHT: Theme Toggle Button */}
+        <div className="flex items-center gap-4 z-10">
+          <button 
+            onClick={toggleTheme}
+            className="p-2.5 rounded-xl bg-gray-50 dark:bg-[#1a1310] border border-gray-200 dark:border-[#2a1f1a] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            aria-label="Toggle Theme"
+          >
+            {isDark ? <Sun size={18} /> : <Moon size={18} />}
+          </button>
+        </div>
+
+      </nav>
+
+      {/* ── MODALS OVERLAY ── */}
+      {activeModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity" onClick={closeModal}>
+          
+          {/* ABOUT MODAL */}
+          {activeModal === 'about' && (
+            <div 
+              className="relative w-full max-w-md p-8 rounded-3xl border shadow-2xl bg-white dark:bg-[#15100d] border-gray-200 dark:border-[#2a1f1a] animate-[slideUp_0.3s_ease-out]"
+              onClick={e => e.stopPropagation()}
+            >
+              <button onClick={closeModal} className="absolute top-5 right-5 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-white/5 transition-colors text-gray-500 dark:text-gray-400">
+                <X size={20} />
+              </button>
+              
+              <div className="flex items-center gap-4 mb-6">
+                <div className="p-3 rounded-2xl bg-cyan-50 dark:bg-cyan-900/20 text-cyan-600 dark:text-cyan-400">
+                  <Info size={24} />
+                </div>
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
+                  About PolicyLens AI
+                </h2>
+              </div>
+              
+              <p className="leading-relaxed text-gray-600 dark:text-gray-300" style={{ fontFamily: "'Outfit', sans-serif", fontSize: '15px' }}>
+                PolicyLens is an advanced AI-powered legal document analyzer. Powered by IRIS, our proprietary engine, it scans complex contracts, NDAs, and policy documents to instantly identify high-risk clauses, indemnification liabilities, and unusual termination terms.
+              </p>
+            </div>
+          )}
+
+          {/* CONTACT MODAL */}
+          {activeModal === 'contact' && (
+            <div 
+              className="relative w-full max-w-md p-8 rounded-3xl border shadow-2xl bg-white dark:bg-[#15100d] border-gray-200 dark:border-[#2a1f1a] animate-[slideUp_0.3s_ease-out]"
+              onClick={e => e.stopPropagation()}
+            >
+              <button onClick={closeModal} className="absolute top-5 right-5 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-white/5 transition-colors text-gray-500 dark:text-gray-400">
+                <X size={20} />
+              </button>
+              
+              <div className="flex items-center gap-4 mb-6">
+                <div className="p-3 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400">
+                  <Mail size={24} />
+                </div>
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
+                  Contact Us
+                </h2>
+              </div>
+              
+              <div className="flex flex-col gap-3">
+                {[
+                  { dept: 'General Inquiries', email: 'hello@policylens.ai' },
+                  { dept: 'Enterprise Sales', email: 'sales@policylens.ai' },
+                  { dept: 'Technical Support', email: 'support@policylens.ai' },
+                  { dept: 'Legal Team', email: 'legal@policylens.ai' }
+                ].map((contact, index) => (
+                  <div key={index} className="flex flex-col p-3.5 rounded-xl border bg-gray-50 border-gray-100 dark:bg-[#1a1310] dark:border-[#2a1f1a]">
+                    <span className="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-500 mb-1" style={{ fontFamily: "'Outfit', sans-serif", fontWeight: 600 }}>
+                      {contact.dept}
+                    </span>
+                    <a href={`mailto:${contact.email}`} className="font-medium text-brand-teal dark:text-cyan-400 hover:underline transition-all" style={{ fontFamily: "'Outfit', sans-serif" }}>
+                      {contact.email}
+                    </a>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+        </div>
+      )}
+
+      {/* Animation class for the modals */}
+      <style>{`
+        @keyframes slideUp {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;700&family=Space+Grotesk:wght@400;600&display=swap');
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+  --font-nav: 'Outfit', sans-serif;
+  --font-footer: 'Space Grotesk', sans-serif;
+  
+  --color-brand-teal: #2A7C76;
+  --color-brand-teal-hover: #236560;
+
+  --animate-float-smooth: floatSmooth 8s ease-in-out infinite;
+  --animate-float-delayed: floatSmooth 8s ease-in-out infinite 4s;
+  --animate-float-fast: floatSmooth 5s ease-in-out infinite 1s;
+  --animate-float-slow: floatSmooth 10s ease-in-out infinite 2s;
+  --animate-twinkle: twinkle 4s ease-in-out infinite alternate;
+
+  @keyframes floatSmooth {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-16px); }
+  }
+  
+  @keyframes twinkle {
+    0% { opacity: 0.2; transform: scale(0.8); }
+    100% { opacity: 0.8; transform: scale(1.2); }
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  /* Light mode stays exactly as it was */
+  background-color: #FAFAFA;
+  color: #111827;
+  transition: background-color 0.6s ease, color 0.6s ease;
+}
+
+/* 
+  DARK MODE BASE
+  A very deep, rich black-brown/espresso base.
+*/
+.dark body {
+  background-color: #0c0908; 
+  color: #f8fafc;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})

rag_engine/main.py

@@ -4,7 +4,10 @@ Usage:
     python rag_engine/main.py --dry-run
     python rag_engine/main.py --pdf path/to/policy.pdf --policy-id POL-001
 """
-
+import sys
+import io
+sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8', errors='replace')
+sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8', errors='replace')
 from __future__ import annotations
 
 import argparse

rag_engine/services/ingestion_service.py

@@ -68,8 +68,7 @@ class IngestionService:
         # Step 4 — embed all chunks
         texts = [text for text, _ in chunks]
         metadatas = [
-            meta.__dict__ if hasattr(meta, "__dict__") and not hasattr(meta, "model_dump")
-            else meta.model_dump()
+            meta.to_supabase_dict() if hasattr(meta, "to_supabase_dict") else meta.model_dump()
             for _, meta in chunks
         ]
         logger.info("Embedding %d chunks...", len(texts))

rag_engine/vector_store/supabase_store.py

@@ -35,9 +35,14 @@ class SupabaseVectorStore(BaseVectorStore):
         for i in range(0, len(rows), _BATCH_SIZE):
             batch = rows[i : i + _BATCH_SIZE]
             batch_num = i // _BATCH_SIZE + 1
-            logger.info("Inserting batch %d/%d (%d rows)", batch_num, total, len(batch))
-            self._client.table(self._table).insert(batch).execute()
-        logger.info("Stored %d chunks", len(chunks))
+            logger.info("Inserting batch %d/%d (%d rows) to Supabase...", batch_num, total, len(batch))
+            try:
+                res = self._client.table(self._table).insert(batch).execute()
+                logger.info("Batch %d stored successfully", batch_num)
+            except Exception as e:
+                logger.error("FAILED to store batch %d: %s", batch_num, str(e))
+                raise e
+        logger.info("Successfully stored %d chunks in Supabase", len(chunks))
 
     # ------------------------------------------------------------------ #
     #  read