Deploy MedOS Global from b5eca093

.env.example

@@ -0,0 +1,19 @@
+# ============================================================
+# MedOS HuggingFace Space — full backend configuration
+# ============================================================
+
+# --- LLM providers ---
+OLLABRIDGE_URL=https://ruslanmv-ollabridge.hf.space
+OLLABRIDGE_API_KEY=sk-ollabridge-your-key-here
+HF_TOKEN=hf_your-token-here
+DEFAULT_MODEL=free-best
+
+# --- Database (SQLite, persistent on HF Spaces /data/) ---
+DB_PATH=/data/medos.db
+
+# --- CORS (comma-separated Vercel frontend origins) ---
+ALLOWED_ORIGINS=https://your-vercel-app.vercel.app,http://localhost:3000
+
+# --- Application ---
+NODE_ENV=production
+PORT=7860

Dockerfile

@@ -0,0 +1,60 @@
+# Multi-stage production Dockerfile for MedOS Global on HF Spaces
+# Optimized for Next.js 14 standalone output
+
+# Stage 1: Install ALL dependencies (including devDeps for build)
+# better-sqlite3 needs python3 + make + g++ to compile the native addon.
+FROM node:18-alpine AS deps
+WORKDIR /app
+RUN apk add --no-cache python3 make g++
+COPY package.json ./
+RUN npm install --legacy-peer-deps && npm cache clean --force
+
+# Stage 2: Build the application
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+RUN npm run build
+
+# Stage 3: Production runner (lean image)
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+# HF Spaces REQUIRES port 7860
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy public assets
+COPY --from=builder /app/public ./public
+
+# Copy standalone build (includes server + minimal node_modules)
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Copy data files (health topics, medical KB)
+COPY --from=builder --chown=nextjs:nodejs /app/data ./data
+
+# Persistent storage directory for SQLite DB.
+# HF Spaces mounts /data as persistent volume — the DB survives restarts.
+# Ensure the directory exists and is writable by the nextjs user.
+RUN mkdir -p /data && chown nextjs:nodejs /data
+
+ENV DB_PATH=/data/medos.db
+
+USER nextjs
+
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=90s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:7860/api/health || exit 1
+
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,95 @@
+---
+title: "MediBot: Free AI Medical Assistant · 20 languages"
+emoji: "\U0001F3E5"
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: true
+license: apache-2.0
+short_description: "Free AI medical chatbot. 20 languages. No sign-up."
+tags:
+  - medical
+  - healthcare
+  - chatbot
+  - medical-ai
+  - health-assistant
+  - symptom-checker
+  - telemedicine
+  - who-guidelines
+  - cdc
+  - multilingual
+  - i18n
+  - rag
+  - llama-3.3
+  - llama-3.3-70b
+  - mixtral
+  - groq
+  - huggingface-inference
+  - pwa
+  - offline-first
+  - free
+  - no-signup
+  - privacy-first
+  - worldwide
+  - nextjs
+  - docker
+models:
+  - meta-llama/Llama-3.3-70B-Instruct
+  - meta-llama/Meta-Llama-3-8B-Instruct
+  - mistralai/Mixtral-8x7B-Instruct-v0.1
+  - Qwen/Qwen2.5-72B-Instruct
+  - deepseek-ai/DeepSeek-V3
+  - ruslanmv/Medical-Llama3-8B
+  - google/gemma-2-9b-it
+datasets:
+  - ruslanmv/ai-medical-chatbot
+---
+
+# MediBot — free AI medical assistant, worldwide
+
+> **Tell MediBot what's bothering you. In your language. Instantly. For free.**
+> No sign-up. No paywall. No data retention. Aligned with WHO · CDC · NHS guidelines.
+
+[![Try MediBot](https://img.shields.io/badge/Try_MediBot-Free_on_HuggingFace-blue?style=for-the-badge&logo=huggingface)](https://huggingface.co/spaces/ruslanmv/MediBot)
+[![Languages](https://img.shields.io/badge/languages-20-14B8A6?style=for-the-badge)](#)
+[![Free](https://img.shields.io/badge/price-free_forever-22C55E?style=for-the-badge)](#)
+[![No sign-up](https://img.shields.io/badge/account-not_required-3B82F6?style=for-the-badge)](#)
+
+## Why MediBot
+
+- **Free forever.** No API key, no sign-up, no paywall, no ads.
+- **20 languages, auto-detected.** English, Español, Français, Português, Deutsch, Italiano, العربية, हिन्दी, Kiswahili, 中文, 日本語, 한국어, Русский, Türkçe, Tiếng Việt, ไทย, বাংলা, اردو, Polski, Nederlands.
+- **Worldwide.** IP-based country detection picks your local emergency number (190+ countries) and adapts the answer to your region (°C/°F, metric/imperial, local guidance).
+- **Best free LLM on HuggingFace.** Powered by **Llama 3.3 70B via HF Inference Providers (Groq)** — fastest high-quality free tier available — with an automatic fallback chain across Cerebras, SambaNova, Together, and Mixtral.
+- **Grounded on WHO, CDC, NHS, NIH, ICD-11, BNF, EMA.** A structured system prompt aligns every answer with authoritative guidance.
+- **Red-flag triage.** Built-in symptom patterns detect cardiac, neurological, respiratory, obstetric, pediatric, and mental-health emergencies in every supported language — and immediately escalate to the local emergency number.
+- **Installable PWA.** Add to your phone's home screen and use it like a native app. Offline-capable with a cached FAQ fallback.
+- **Shareable.** Every AI answer gets a Share button that generates a clean deep link with a branded OG card preview — perfect for WhatsApp, Twitter, and Telegram.
+- **Private & anonymous.** Zero accounts. Zero server-side conversation storage. No IPs logged. Anonymous session counter only.
+- **Open source.** Fully transparent. [github.com/ruslanmv/ai-medical-chatbot](https://github.com/ruslanmv/ai-medical-chatbot)
+
+## How it works
+
+1. You type (or speak) a health question
+2. MedOS checks for emergency red flags first
+3. It searches a medical knowledge base for relevant context
+4. Your question + context go to **Llama 3.3 70B** (via Groq, free)
+5. You get a structured answer: Summary, Possible causes, Self-care, When to see a doctor
+
+If the main model is busy, MedOS automatically tries other free models until one responds.
+
+## Built with
+
+| Layer | Technology |
+|---|---|
+| Frontend | Next.js 14, React, Tailwind CSS |
+| AI Model | Llama 3.3 70B Instruct (via HuggingFace Inference + Groq) |
+| Fallbacks | Mixtral 8x7B, OllaBridge, cached FAQ |
+| Knowledge | Medical RAG from [ruslanmv/ai-medical-chatbot](https://github.com/ruslanmv/ai-medical-chatbot) dataset |
+| Gateway | [OllaBridge-Cloud](https://github.com/ruslanmv/ollabridge) |
+| Hosting | HuggingFace Spaces (Docker) |
+
+## License
+
+Apache 2.0 — free to use, modify, and distribute.

app/admin/page.tsx

@@ -0,0 +1,327 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import {
+  Users,
+  Activity,
+  Database,
+  MessageCircle,
+  Shield,
+  Search,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  LogIn,
+  Lock,
+} from 'lucide-react';
+
+interface Stats {
+  totalUsers: number;
+  verifiedUsers: number;
+  adminUsers: number;
+  totalHealthData: number;
+  totalChats: number;
+  activeSessions: number;
+  healthBreakdown: Array<{ type: string; count: number }>;
+  registrations: Array<{ day: string; count: number }>;
+}
+
+interface UserRow {
+  id: string;
+  email: string;
+  displayName: string | null;
+  emailVerified: boolean;
+  isAdmin: boolean;
+  createdAt: string;
+  healthDataCount: number;
+  chatHistoryCount: number;
+}
+
+/**
+ * Admin dashboard — accessible ONLY at /admin on the HuggingFace Space.
+ * Not linked from the public UI. Requires admin login.
+ */
+export default function AdminPage() {
+  const [token, setToken] = useState('');
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [users, setUsers] = useState<UserRow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const headers = useCallback(
+    () => ({ Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' }),
+    [token],
+  );
+
+  const fetchStats = useCallback(async () => {
+    const res = await fetch('/api/admin/stats', { headers: headers() });
+    if (res.ok) setStats(await res.json());
+    else if (res.status === 403) { setLoggedIn(false); setToken(''); }
+  }, [headers]);
+
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    const qs = new URLSearchParams({ page: String(page), limit: '20' });
+    if (search) qs.set('search', search);
+    const res = await fetch(`/api/admin/users?${qs}`, { headers: headers() });
+    if (res.ok) {
+      const data = await res.json();
+      setUsers(data.users);
+      setTotal(data.total);
+    }
+    setLoading(false);
+  }, [headers, page, search]);
+
+  useEffect(() => {
+    if (!loggedIn) return;
+    fetchStats();
+    fetchUsers();
+  }, [loggedIn, fetchStats, fetchUsers]);
+
+  const handleLogin = async () => {
+    setLoginError('');
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    });
+    const data = await res.json();
+    if (!res.ok) { setLoginError(data.error || 'Login failed'); return; }
+    // Verify this user is actually an admin.
+    const meRes = await fetch('/api/auth/me', {
+      headers: { Authorization: `Bearer ${data.token}` },
+    });
+    const me = await meRes.json();
+    if (!me.user) { setLoginError('Auth failed'); return; }
+    // Check admin flag by trying the admin API.
+    const adminCheck = await fetch('/api/admin/stats', {
+      headers: { Authorization: `Bearer ${data.token}` },
+    });
+    if (adminCheck.status === 403) { setLoginError('Not an admin account'); return; }
+    setToken(data.token);
+    setLoggedIn(true);
+  };
+
+  const handleDeleteUser = async (userId: string, userEmail: string) => {
+    if (!confirm(`Delete user ${userEmail} and ALL their data?`)) return;
+    await fetch(`/api/admin/users?id=${userId}`, { method: 'DELETE', headers: headers() });
+    fetchUsers();
+    fetchStats();
+  };
+
+  // Login screen
+  if (!loggedIn) {
+    return (
+      <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
+        <div className="w-full max-w-sm">
+          <div className="text-center mb-8">
+            <div className="w-14 h-14 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center">
+              <Lock size={24} className="text-white" />
+            </div>
+            <h1 className="text-2xl font-bold text-slate-100">Admin Panel</h1>
+            <p className="text-sm text-slate-400 mt-1">MedOS server administration</p>
+          </div>
+          {loginError && (
+            <div className="mb-4 p-3 rounded-xl bg-red-950/50 border border-red-700/50 text-sm text-red-300">
+              {loginError}
+            </div>
+          )}
+          <div className="space-y-3">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Admin email"
+              className="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-red-500/50"
+            />
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Password"
+              className="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-red-500/50"
+              onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
+            />
+            <button
+              onClick={handleLogin}
+              className="w-full py-3 bg-gradient-to-br from-red-500 to-orange-500 text-white rounded-xl font-bold text-sm hover:brightness-110 transition-all flex items-center justify-center gap-2"
+            >
+              <LogIn size={16} />
+              Sign in as Admin
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const totalPages = Math.ceil(total / 20);
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center">
+            <Shield size={16} className="text-white" />
+          </div>
+          <h1 className="font-bold text-lg">MedOS Admin</h1>
+        </div>
+        <button
+          onClick={() => { fetchStats(); fetchUsers(); }}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300 text-xs font-semibold hover:bg-slate-700"
+        >
+          <RefreshCw size={12} /> Refresh
+        </button>
+      </header>
+
+      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        {/* Stats grid */}
+        {stats && (
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-8">
+            <Stat icon={Users} label="Total users" value={stats.totalUsers} />
+            <Stat icon={Shield} label="Verified" value={stats.verifiedUsers} />
+            <Stat icon={Shield} label="Admins" value={stats.adminUsers} color="text-red-400" />
+            <Stat icon={Database} label="Health records" value={stats.totalHealthData} />
+            <Stat icon={MessageCircle} label="Conversations" value={stats.totalChats} />
+            <Stat icon={Activity} label="Active sessions" value={stats.activeSessions} />
+          </div>
+        )}
+
+        {/* Health data breakdown */}
+        {stats && stats.healthBreakdown.length > 0 && (
+          <div className="mb-8 p-4 rounded-2xl bg-slate-900 border border-slate-800">
+            <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Health data by type</h3>
+            <div className="flex flex-wrap gap-2">
+              {stats.healthBreakdown.map((b) => (
+                <span key={b.type} className="px-3 py-1.5 rounded-full bg-slate-800 text-sm font-medium text-slate-200">
+                  {b.type}: <strong>{b.count}</strong>
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* User management */}
+        <div className="rounded-2xl bg-slate-900 border border-slate-800 overflow-hidden">
+          <div className="p-4 border-b border-slate-800 flex items-center gap-3">
+            <h2 className="font-bold">Users ({total})</h2>
+            <div className="flex-1 relative ml-4">
+              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="Search by email or name..."
+                className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-9 pr-4 py-2 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-red-500/50"
+              />
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-xs text-slate-400 uppercase tracking-wider border-b border-slate-800">
+                  <th className="text-left px-4 py-3">User</th>
+                  <th className="text-center px-4 py-3">Verified</th>
+                  <th className="text-center px-4 py-3">Role</th>
+                  <th className="text-center px-4 py-3">Health</th>
+                  <th className="text-center px-4 py-3">Chats</th>
+                  <th className="text-left px-4 py-3">Joined</th>
+                  <th className="text-right px-4 py-3">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {users.map((u) => (
+                  <tr key={u.id} className="border-b border-slate-800/50 hover:bg-slate-800/30">
+                    <td className="px-4 py-3">
+                      <div className="font-medium text-slate-100">{u.displayName || '—'}</div>
+                      <div className="text-xs text-slate-400">{u.email}</div>
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      <span className={`text-xs font-bold ${u.emailVerified ? 'text-emerald-400' : 'text-slate-500'}`}>
+                        {u.emailVerified ? 'Yes' : 'No'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      {u.isAdmin ? (
+                        <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-500/20 text-red-300 border border-red-500/30">
+                          ADMIN
+                        </span>
+                      ) : (
+                        <span className="text-xs text-slate-500">User</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-center text-slate-300">{u.healthDataCount}</td>
+                    <td className="px-4 py-3 text-center text-slate-300">{u.chatHistoryCount}</td>
+                    <td className="px-4 py-3 text-slate-400 text-xs">
+                      {new Date(u.createdAt).toLocaleDateString()}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      {!u.isAdmin && (
+                        <button
+                          onClick={() => handleDeleteUser(u.id, u.email)}
+                          className="p-1.5 rounded-lg text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                          title="Delete user"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+                {users.length === 0 && (
+                  <tr>
+                    <td colSpan={7} className="px-4 py-8 text-center text-slate-500">
+                      {loading ? 'Loading...' : 'No users found'}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between px-4 py-3 border-t border-slate-800">
+              <span className="text-xs text-slate-400">
+                Page {page} of {totalPages}
+              </span>
+              <div className="flex gap-1">
+                <button
+                  onClick={() => setPage(Math.max(1, page - 1))}
+                  disabled={page <= 1}
+                  className="p-1.5 rounded-lg bg-slate-800 text-slate-300 disabled:opacity-30"
+                >
+                  <ChevronLeft size={14} />
+                </button>
+                <button
+                  onClick={() => setPage(Math.min(totalPages, page + 1))}
+                  disabled={page >= totalPages}
+                  className="p-1.5 rounded-lg bg-slate-800 text-slate-300 disabled:opacity-30"
+                >
+                  <ChevronRight size={14} />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function Stat({ icon: Icon, label, value, color }: { icon: any; label: string; value: number; color?: string }) {
+  return (
+    <div className="p-4 rounded-xl bg-slate-900 border border-slate-800">
+      <Icon size={16} className={color || 'text-slate-400'} />
+      <div className="text-2xl font-black mt-2">{value.toLocaleString()}</div>
+      <div className="text-[11px] text-slate-500 font-semibold">{label}</div>
+    </div>
+  );
+}

app/api/admin/stats/route.ts

@@ -0,0 +1,46 @@
+import { NextResponse } from 'next/server';
+import { getDb } from '@/lib/db';
+import { requireAdmin } from '@/lib/auth-middleware';
+
+/**
+ * GET /api/admin/stats — aggregate platform statistics (admin only).
+ */
+export async function GET(req: Request) {
+  const admin = requireAdmin(req);
+  if (!admin) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+
+  const db = getDb();
+
+  const totalUsers = (db.prepare('SELECT COUNT(*) as c FROM users').get() as any).c;
+  const verifiedUsers = (db.prepare('SELECT COUNT(*) as c FROM users WHERE email_verified = 1').get() as any).c;
+  const adminUsers = (db.prepare('SELECT COUNT(*) as c FROM users WHERE is_admin = 1').get() as any).c;
+  const totalHealthData = (db.prepare('SELECT COUNT(*) as c FROM health_data').get() as any).c;
+  const totalChats = (db.prepare('SELECT COUNT(*) as c FROM chat_history').get() as any).c;
+  const activeSessions = (db.prepare("SELECT COUNT(*) as c FROM sessions WHERE expires_at > datetime('now')").get() as any).c;
+
+  // Health data breakdown by type.
+  const healthBreakdown = db
+    .prepare('SELECT type, COUNT(*) as count FROM health_data GROUP BY type ORDER BY count DESC')
+    .all() as any[];
+
+  // Registrations over time (last 30 days).
+  const registrations = db
+    .prepare(
+      `SELECT date(created_at) as day, COUNT(*) as count
+       FROM users
+       WHERE created_at > datetime('now', '-30 days')
+       GROUP BY day ORDER BY day`,
+    )
+    .all() as any[];
+
+  return NextResponse.json({
+    totalUsers,
+    verifiedUsers,
+    adminUsers,
+    totalHealthData,
+    totalChats,
+    activeSessions,
+    healthBreakdown,
+    registrations,
+  });
+}

app/api/admin/users/route.ts

@@ -0,0 +1,78 @@
+import { NextResponse } from 'next/server';
+import { getDb } from '@/lib/db';
+import { requireAdmin } from '@/lib/auth-middleware';
+
+/**
+ * GET /api/admin/users — list all registered users (admin only).
+ * Query params: ?page=1&limit=50&search=term
+ */
+export async function GET(req: Request) {
+  const admin = requireAdmin(req);
+  if (!admin) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+
+  const url = new URL(req.url);
+  const page = Math.max(1, parseInt(url.searchParams.get('page') || '1', 10));
+  const limit = Math.min(100, Math.max(1, parseInt(url.searchParams.get('limit') || '50', 10)));
+  const search = url.searchParams.get('search')?.trim();
+  const offset = (page - 1) * limit;
+
+  const db = getDb();
+
+  const where = search ? "WHERE email LIKE ? OR display_name LIKE ?" : "";
+  const params = search ? [`%${search}%`, `%${search}%`] : [];
+
+  const total = (db.prepare(`SELECT COUNT(*) as c FROM users ${where}`).get(...params) as any).c;
+
+  const rows = db
+    .prepare(
+      `SELECT id, email, display_name, email_verified, is_admin, created_at
+       FROM users ${where}
+       ORDER BY created_at DESC LIMIT ? OFFSET ?`,
+    )
+    .all(...params, limit, offset) as any[];
+
+  // Health data count per user.
+  const users = rows.map((r) => {
+    const healthCount = (
+      db.prepare('SELECT COUNT(*) as c FROM health_data WHERE user_id = ?').get(r.id) as any
+    ).c;
+    const chatCount = (
+      db.prepare('SELECT COUNT(*) as c FROM chat_history WHERE user_id = ?').get(r.id) as any
+    ).c;
+    return {
+      id: r.id,
+      email: r.email,
+      displayName: r.display_name,
+      emailVerified: !!r.email_verified,
+      isAdmin: !!r.is_admin,
+      createdAt: r.created_at,
+      healthDataCount: healthCount,
+      chatHistoryCount: chatCount,
+    };
+  });
+
+  return NextResponse.json({ users, total, page, limit });
+}
+
+/**
+ * DELETE /api/admin/users?id=<userId> — delete a user (admin only).
+ * CASCADE deletes all their health data, chat history, and sessions.
+ */
+export async function DELETE(req: Request) {
+  const admin = requireAdmin(req);
+  if (!admin) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+
+  const url = new URL(req.url);
+  const userId = url.searchParams.get('id');
+  if (!userId) return NextResponse.json({ error: 'Missing user id' }, { status: 400 });
+
+  // Prevent deleting yourself.
+  if (userId === admin.id) {
+    return NextResponse.json({ error: 'Cannot delete your own admin account' }, { status: 400 });
+  }
+
+  const db = getDb();
+  db.prepare('DELETE FROM users WHERE id = ?').run(userId);
+
+  return NextResponse.json({ success: true });
+}

app/api/auth/forgot-password/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { getDb, genVerificationCode, resetExpiry } from '@/lib/db';
+import { sendPasswordResetEmail } from '@/lib/email';
+
+const Schema = z.object({
+  email: z.string().email(),
+});
+
+/**
+ * POST /api/auth/forgot-password — sends a reset code to the user's email.
+ *
+ * Always returns 200 even if the email doesn't exist (prevents email enumeration).
+ */
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const { email } = Schema.parse(body);
+
+    const db = getDb();
+    const user = db.prepare('SELECT id, email FROM users WHERE email = ?').get(email.toLowerCase()) as any;
+
+    if (user) {
+      const code = genVerificationCode();
+      db.prepare(
+        `UPDATE users SET reset_token = ?, reset_expires = ?, updated_at = datetime('now')
+         WHERE id = ?`,
+      ).run(code, resetExpiry(), user.id);
+
+      await sendPasswordResetEmail(user.email, code);
+    }
+
+    // Always return success to prevent email enumeration.
+    return NextResponse.json({
+      message: 'If that email is registered, a reset code has been sent.',
+    });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid email' }, { status: 400 });
+    }
+    console.error('[Auth ForgotPassword]', error?.message);
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 });
+  }
+}

app/api/auth/login/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import bcrypt from 'bcryptjs';
+import { getDb, genToken, sessionExpiry, pruneExpiredSessions } from '@/lib/db';
+
+const Schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(1),
+});
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const { email, password } = Schema.parse(body);
+
+    const db = getDb();
+    pruneExpiredSessions();
+
+    const user = db
+      .prepare('SELECT id, email, password, display_name, email_verified, is_admin FROM users WHERE email = ?')
+      .get(email.toLowerCase()) as any;
+
+    if (!user || !bcrypt.compareSync(password, user.password)) {
+      return NextResponse.json({ error: 'Invalid email or password' }, { status: 401 });
+    }
+
+    const token = genToken();
+    db.prepare('INSERT INTO sessions (token, user_id, expires_at) VALUES (?, ?, ?)').run(
+      token,
+      user.id,
+      sessionExpiry(),
+    );
+
+    return NextResponse.json({
+      user: {
+        id: user.id,
+        email: user.email,
+        displayName: user.display_name,
+        emailVerified: !!user.email_verified,
+        isAdmin: !!user.is_admin,
+      },
+      token,
+    });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid input' }, { status: 400 });
+    }
+    console.error('[Auth Login]', error?.message);
+    return NextResponse.json({ error: 'Login failed' }, { status: 500 });
+  }
+}

app/api/auth/logout/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+import { getDb } from '@/lib/db';
+
+export async function POST(req: Request) {
+  const h = req.headers.get('authorization');
+  const token = h && h.startsWith('Bearer ') ? h.slice(7).trim() : null;
+
+  if (token) {
+    const db = getDb();
+    db.prepare('DELETE FROM sessions WHERE token = ?').run(token);
+  }
+
+  return NextResponse.json({ success: true });
+}

app/api/auth/me/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+import { getDb, pruneExpiredSessions } from '@/lib/db';
+
+export async function GET(req: Request) {
+  const h = req.headers.get('authorization');
+  const token = h && h.startsWith('Bearer ') ? h.slice(7).trim() : null;
+  if (!token) return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+
+  const db = getDb();
+  pruneExpiredSessions();
+
+  const row = db
+    .prepare(
+      `SELECT u.id, u.email, u.display_name, u.email_verified, u.created_at
+       FROM sessions s JOIN users u ON u.id = s.user_id
+       WHERE s.token = ? AND s.expires_at > datetime('now')`,
+    )
+    .get(token) as any;
+
+  if (!row) return NextResponse.json({ error: 'Session expired' }, { status: 401 });
+
+  return NextResponse.json({
+    user: {
+      id: row.id,
+      email: row.email,
+      displayName: row.display_name,
+      emailVerified: !!row.email_verified,
+      createdAt: row.created_at,
+    },
+  });
+}

app/api/auth/register/route.ts

@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import bcrypt from 'bcryptjs';
+import { getDb, genId, genToken, genVerificationCode, codeExpiry, sessionExpiry } from '@/lib/db';
+import { sendVerificationEmail } from '@/lib/email';
+
+const Schema = z.object({
+  email: z.string().email().max(255),
+  password: z.string().min(6).max(128),
+  displayName: z.string().max(50).optional(),
+});
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const { email, password, displayName } = Schema.parse(body);
+
+    const db = getDb();
+
+    const existing = db.prepare('SELECT id FROM users WHERE email = ?').get(email);
+    if (existing) {
+      return NextResponse.json({ error: 'An account with this email already exists' }, { status: 409 });
+    }
+
+    const id = genId();
+    const hash = bcrypt.hashSync(password, 10);
+    const code = genVerificationCode();
+    const expires = codeExpiry();
+
+    db.prepare(
+      `INSERT INTO users (id, email, password, display_name, verification_code, verification_expires)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+    ).run(id, email.toLowerCase(), hash, displayName || null, code, expires);
+
+    // Auto-login
+    const token = genToken();
+    db.prepare('INSERT INTO sessions (token, user_id, expires_at) VALUES (?, ?, ?)').run(token, id, sessionExpiry());
+
+    // Send verification email (best-effort, don't block registration)
+    sendVerificationEmail(email, code).catch(() => {});
+
+    return NextResponse.json(
+      {
+        user: { id, email: email.toLowerCase(), displayName, emailVerified: false },
+        token,
+        message: 'Account created. Check your email for a verification code.',
+      },
+      { status: 201 },
+    );
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid input', details: error.errors }, { status: 400 });
+    }
+    console.error('[Auth Register]', error?.message);
+    return NextResponse.json({ error: 'Registration failed' }, { status: 500 });
+  }
+}

app/api/auth/resend-verification/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { getDb, genVerificationCode, codeExpiry } from '@/lib/db';
+import { authenticateRequest } from '@/lib/auth-middleware';
+import { sendVerificationEmail } from '@/lib/email';
+
+/**
+ * POST /api/auth/resend-verification — resend the 6-digit verification code.
+ */
+export async function POST(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+
+  const db = getDb();
+  const row = db.prepare('SELECT email, email_verified FROM users WHERE id = ?').get(user.id) as any;
+
+  if (!row) return NextResponse.json({ error: 'User not found' }, { status: 404 });
+  if (row.email_verified) return NextResponse.json({ message: 'Email already verified' });
+
+  const code = genVerificationCode();
+  db.prepare(
+    `UPDATE users SET verification_code = ?, verification_expires = ?, updated_at = datetime('now')
+     WHERE id = ?`,
+  ).run(code, codeExpiry(), user.id);
+
+  await sendVerificationEmail(row.email, code);
+
+  return NextResponse.json({ message: 'Verification code sent' });
+}

app/api/auth/reset-password/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import bcrypt from 'bcryptjs';
+import { getDb, genToken, sessionExpiry } from '@/lib/db';
+
+const Schema = z.object({
+  email: z.string().email(),
+  code: z.string().length(6),
+  newPassword: z.string().min(6).max(128),
+});
+
+/**
+ * POST /api/auth/reset-password — reset password with the 6-digit code.
+ * On success, auto-logs the user in and returns a session token.
+ */
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const { email, code, newPassword } = Schema.parse(body);
+
+    const db = getDb();
+    const user = db
+      .prepare('SELECT id, reset_token, reset_expires FROM users WHERE email = ?')
+      .get(email.toLowerCase()) as any;
+
+    if (
+      !user ||
+      user.reset_token !== code ||
+      !user.reset_expires ||
+      new Date(user.reset_expires) < new Date()
+    ) {
+      return NextResponse.json({ error: 'Invalid or expired reset code' }, { status: 400 });
+    }
+
+    const hash = bcrypt.hashSync(newPassword, 10);
+    db.prepare(
+      `UPDATE users SET password = ?, reset_token = NULL, reset_expires = NULL, updated_at = datetime('now')
+       WHERE id = ?`,
+    ).run(hash, user.id);
+
+    // Invalidate all existing sessions for this user (security best practice).
+    db.prepare('DELETE FROM sessions WHERE user_id = ?').run(user.id);
+
+    // Auto-login with new session.
+    const token = genToken();
+    db.prepare('INSERT INTO sessions (token, user_id, expires_at) VALUES (?, ?, ?)').run(
+      token,
+      user.id,
+      sessionExpiry(),
+    );
+
+    return NextResponse.json({
+      message: 'Password reset successfully',
+      token,
+    });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid input', details: error.errors }, { status: 400 });
+    }
+    console.error('[Auth ResetPassword]', error?.message);
+    return NextResponse.json({ error: 'Reset failed' }, { status: 500 });
+  }
+}

app/api/auth/verify-email/route.ts

@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { getDb } from '@/lib/db';
+import { authenticateRequest } from '@/lib/auth-middleware';
+import { sendWelcomeEmail } from '@/lib/email';
+
+const Schema = z.object({
+  code: z.string().length(6),
+});
+
+/**
+ * POST /api/auth/verify-email — verify email with 6-digit code.
+ * Requires auth (the user must be logged in to verify their own email).
+ */
+export async function POST(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+
+  try {
+    const body = await req.json();
+    const { code } = Schema.parse(body);
+
+    const db = getDb();
+    const row = db
+      .prepare(
+        `SELECT verification_code, verification_expires, email, email_verified
+         FROM users WHERE id = ?`,
+      )
+      .get(user.id) as any;
+
+    if (!row) return NextResponse.json({ error: 'User not found' }, { status: 404 });
+    if (row.email_verified) return NextResponse.json({ message: 'Email already verified' });
+
+    if (
+      row.verification_code !== code ||
+      !row.verification_expires ||
+      new Date(row.verification_expires) < new Date()
+    ) {
+      return NextResponse.json({ error: 'Invalid or expired code' }, { status: 400 });
+    }
+
+    db.prepare(
+      `UPDATE users SET email_verified = 1, verification_code = NULL, verification_expires = NULL, updated_at = datetime('now')
+       WHERE id = ?`,
+    ).run(user.id);
+
+    // Send welcome email
+    sendWelcomeEmail(row.email).catch(() => {});
+
+    return NextResponse.json({ message: 'Email verified successfully', emailVerified: true });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid code format' }, { status: 400 });
+    }
+    console.error('[Auth Verify]', error?.message);
+    return NextResponse.json({ error: 'Verification failed' }, { status: 500 });
+  }
+}

app/api/chat-history/route.ts

@@ -0,0 +1,95 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { getDb, genId } from '@/lib/db';
+import { authenticateRequest } from '@/lib/auth-middleware';
+
+/**
+ * GET  /api/chat-history           → list conversations (newest first, max 100)
+ * POST /api/chat-history           → save a conversation
+ * DELETE /api/chat-history?id=<id> → delete one conversation
+ */
+
+export async function GET(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  const db = getDb();
+  const rows = db
+    .prepare(
+      'SELECT id, preview, topic, created_at FROM chat_history WHERE user_id = ? ORDER BY created_at DESC LIMIT 100',
+    )
+    .all(user.id) as any[];
+
+  return NextResponse.json({
+    conversations: rows.map((r) => ({
+      id: r.id,
+      preview: r.preview,
+      topic: r.topic,
+      createdAt: r.created_at,
+    })),
+  });
+}
+
+const SaveSchema = z.object({
+  preview: z.string().max(200),
+  messages: z.array(
+    z.object({
+      role: z.enum(['user', 'assistant', 'system']),
+      content: z.string(),
+    }),
+  ),
+  topic: z.string().max(50).optional(),
+});
+
+export async function POST(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  try {
+    const body = await req.json();
+    const { preview, messages, topic } = SaveSchema.parse(body);
+
+    const db = getDb();
+    const id = genId();
+
+    db.prepare(
+      'INSERT INTO chat_history (id, user_id, preview, messages, topic) VALUES (?, ?, ?, ?, ?)',
+    ).run(id, user.id, preview, JSON.stringify(messages), topic || null);
+
+    return NextResponse.json({ id }, { status: 201 });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid input', details: error.errors },
+        { status: 400 },
+      );
+    }
+    console.error('[Chat History POST]', error?.message);
+    return NextResponse.json({ error: 'Save failed' }, { status: 500 });
+  }
+}
+
+export async function DELETE(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  const url = new URL(req.url);
+  const id = url.searchParams.get('id');
+  if (!id) {
+    return NextResponse.json({ error: 'Missing id' }, { status: 400 });
+  }
+
+  const db = getDb();
+  db.prepare('DELETE FROM chat_history WHERE id = ? AND user_id = ?').run(
+    id,
+    user.id,
+  );
+
+  return NextResponse.json({ success: true });
+}

app/api/chat/route.ts

@@ -0,0 +1,129 @@
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
+import { streamWithFallback, type ChatMessage } from '@/lib/providers';
+import { triageMessage } from '@/lib/safety/triage';
+import { getEmergencyInfo } from '@/lib/safety/emergency-numbers';
+import { buildRAGContext } from '@/lib/rag/medical-kb';
+import { buildMedicalSystemPrompt } from '@/lib/medical-knowledge';
+
+const RequestSchema = z.object({
+  messages: z.array(
+    z.object({
+      role: z.enum(['system', 'user', 'assistant']),
+      content: z.string(),
+    })
+  ),
+  model: z.string().optional().default('qwen2.5:1.5b'),
+  language: z.string().optional().default('en'),
+  countryCode: z.string().optional().default('US'),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { messages, model, language, countryCode } = RequestSchema.parse(body);
+
+    // Step 1: Emergency triage on the latest user message
+    const lastUserMessage = messages.filter((m) => m.role === 'user').pop();
+    if (lastUserMessage) {
+      const triage = triageMessage(lastUserMessage.content);
+
+      if (triage.isEmergency) {
+        const emergencyInfo = getEmergencyInfo(countryCode);
+        const emergencyResponse = [
+          `**EMERGENCY DETECTED**\n\n`,
+          `${triage.guidance}\n\n`,
+          `**Call emergency services NOW:**\n`,
+          `- Emergency: **${emergencyInfo.emergency}** (${emergencyInfo.country})\n`,
+          `- Ambulance: **${emergencyInfo.ambulance}**\n`,
+          emergencyInfo.crisisHotline
+            ? `- Crisis Hotline: **${emergencyInfo.crisisHotline}**\n`
+            : '',
+          `\nDo not delay. Every minute matters.`,
+        ].join('');
+
+        const encoder = new TextEncoder();
+        const stream = new ReadableStream({
+          start(controller) {
+            const data = JSON.stringify({
+              choices: [{ delta: { content: emergencyResponse } }],
+              provider: 'triage',
+              model: 'emergency-detection',
+              isEmergency: true,
+            });
+            controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+            controller.enqueue(encoder.encode('data: [DONE]\n\n'));
+            controller.close();
+          },
+        });
+
+        return new Response(stream, {
+          headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+          },
+        });
+      }
+    }
+
+    // Step 2: Build RAG context from the medical knowledge base.
+    const ragContext = lastUserMessage
+      ? buildRAGContext(lastUserMessage.content)
+      : '';
+
+    // Step 3: Build a structured, locale-aware system prompt that grounds
+    // the model in WHO/CDC/NHS guidance and pins the response language,
+    // country, emergency number, and measurement system. This replaces
+    // the old inline "respond in X language" instruction.
+    const emergencyInfo = getEmergencyInfo(countryCode);
+    const systemPrompt = buildMedicalSystemPrompt({
+      country: countryCode,
+      language,
+      emergencyNumber: emergencyInfo.emergency,
+    });
+
+    // Step 4: Assemble the final message list: system prompt first, then
+    // the conversation history, with the last user turn augmented by the
+    // retrieved RAG context (kept inline so the model treats it as recent
+    // reference material rather than a background instruction).
+    const priorMessages = messages.slice(0, -1);
+    const finalUserContent = [
+      lastUserMessage?.content || '',
+      ragContext
+        ? `\n\n[Reference material retrieved from the medical knowledge base — use if relevant]\n${ragContext}`
+        : '',
+    ].join('');
+
+    const augmentedMessages: ChatMessage[] = [
+      { role: 'system' as const, content: systemPrompt },
+      ...priorMessages,
+      { role: 'user' as const, content: finalUserContent },
+    ];
+
+    // Step 4: Stream response from OllaBridge-Cloud (with fallback chain)
+    const stream = await streamWithFallback(augmentedMessages, model);
+
+    return new Response(stream, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    });
+  } catch (error) {
+    console.error('[Chat API Error]:', error);
+
+    if (error instanceof z.ZodError) {
+      return new Response(
+        JSON.stringify({ error: 'Invalid request', details: error.errors }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    return new Response(
+      JSON.stringify({ error: 'Internal server error' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+}

app/api/geo/route.ts

@@ -0,0 +1,142 @@
+import { NextResponse } from 'next/server';
+import { getEmergencyInfo } from '@/lib/safety/emergency-numbers';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+/**
+ * IP-based country + language + emergency number detection.
+ *
+ * Privacy posture:
+ *  - Platform geo headers are read first (zero external calls, zero PII).
+ *  - If nothing is present we fall back to ipapi.co (free, no key), but
+ *    ONLY for public IPs — RFC1918, loopback, and link-local are never
+ *    sent outbound.
+ *  - The client IP is never logged or returned.
+ */
+
+const GEO_HEADERS = [
+  'x-vercel-ip-country',
+  'cf-ipcountry',
+  'x-nf-country',
+  'cloudfront-viewer-country',
+  'x-appengine-country',
+  'fly-client-ip-country',
+  'x-forwarded-country',
+] as const;
+
+// Country → best-effort primary language out of the ones MedOS ships.
+// Kept local to this file so we don't bloat lib/i18n for a single use.
+const COUNTRY_TO_LANGUAGE: Record<string, string> = {
+  US: 'en', GB: 'en', CA: 'en', AU: 'en', NZ: 'en', IE: 'en', ZA: 'en',
+  NG: 'en', KE: 'en', GH: 'en', UG: 'en', SG: 'en', MY: 'en', IN: 'en',
+  PK: 'en', BD: 'en', LK: 'en', PH: 'en',
+  ES: 'es', MX: 'es', AR: 'es', CO: 'es', CL: 'es', PE: 'es', VE: 'es',
+  EC: 'es', GT: 'es', CU: 'es', BO: 'es', DO: 'es', HN: 'es', PY: 'es',
+  SV: 'es', NI: 'es', CR: 'es', PA: 'es', UY: 'es', PR: 'es',
+  BR: 'pt', PT: 'pt', AO: 'pt', MZ: 'pt',
+  FR: 'fr', BE: 'fr', LU: 'fr', MC: 'fr', SN: 'fr', CI: 'fr', CM: 'fr',
+  CD: 'fr', HT: 'fr', DZ: 'fr', TN: 'fr', MA: 'ar',
+  DE: 'de', AT: 'de', CH: 'de', LI: 'de',
+  IT: 'it', SM: 'it', VA: 'it',
+  NL: 'nl', SR: 'nl',
+  PL: 'pl',
+  RU: 'ru', BY: 'ru', KZ: 'ru', KG: 'ru',
+  TR: 'tr',
+  SA: 'ar', AE: 'ar', EG: 'ar', JO: 'ar', IQ: 'ar', SY: 'ar', LB: 'ar',
+  YE: 'ar', LY: 'ar', OM: 'ar', QA: 'ar', KW: 'ar', BH: 'ar', SD: 'ar',
+  PS: 'ar',
+  CN: 'zh', TW: 'zh', HK: 'zh',
+  JP: 'ja',
+  KR: 'ko',
+  TH: 'th',
+  VN: 'vi',
+  TZ: 'sw',
+};
+
+function pickHeaderCountry(req: Request): string | null {
+  for (const h of GEO_HEADERS) {
+    const v = req.headers.get(h);
+    if (v && v.length >= 2 && v.toUpperCase() !== 'XX') {
+      return v.toUpperCase().slice(0, 2);
+    }
+  }
+  return null;
+}
+
+function extractClientIp(req: Request): string | null {
+  const xff = req.headers.get('x-forwarded-for');
+  if (xff) {
+    const first = xff.split(',')[0]?.trim();
+    if (first) return first;
+  }
+  return req.headers.get('x-real-ip');
+}
+
+function isPrivateIp(ip: string): boolean {
+  if (!ip) return true;
+  if (ip === '::1' || ip === '127.0.0.1' || ip.startsWith('fe80:')) return true;
+  const m = ip.match(/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/);
+  if (!m) return false;
+  const a = parseInt(m[1], 10);
+  const b = parseInt(m[2], 10);
+  if (a === 10) return true;
+  if (a === 127) return true;
+  if (a === 169 && b === 254) return true;
+  if (a === 172 && b >= 16 && b <= 31) return true;
+  if (a === 192 && b === 168) return true;
+  return false;
+}
+
+async function lookupIpapi(ip: string): Promise<string | null> {
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 1500);
+    const res = await fetch(`https://ipapi.co/${encodeURIComponent(ip)}/country/`, {
+      signal: controller.signal,
+      headers: { 'User-Agent': 'MedOS-Geo/1.0' },
+    });
+    clearTimeout(timeout);
+    if (!res.ok) return null;
+    const text = (await res.text()).trim().toUpperCase();
+    if (/^[A-Z]{2}$/.test(text)) return text;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export async function GET(req: Request): Promise<Response> {
+  let country = pickHeaderCountry(req);
+  let source: 'header' | 'ipapi' | 'default' = country ? 'header' : 'default';
+
+  if (!country) {
+    const ip = extractClientIp(req);
+    if (ip && !isPrivateIp(ip)) {
+      const looked = await lookupIpapi(ip);
+      if (looked) {
+        country = looked;
+        source = 'ipapi';
+      }
+    }
+  }
+
+  const finalCountry = country || 'US';
+  const info = getEmergencyInfo(finalCountry);
+  const language = COUNTRY_TO_LANGUAGE[finalCountry] ?? 'en';
+
+  return NextResponse.json(
+    {
+      country: finalCountry,
+      language,
+      emergencyNumber: info.emergency,
+      source,
+    },
+    {
+      headers: {
+        'Cache-Control': 'private, max-age=3600',
+        'X-Robots-Tag': 'noindex',
+      },
+    },
+  );
+}

app/api/health-data/route.ts

@@ -0,0 +1,113 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { getDb, genId } from '@/lib/db';
+import { authenticateRequest } from '@/lib/auth-middleware';
+
+/**
+ * GET  /api/health-data          → fetch all health data for the user
+ * GET  /api/health-data?type=vital → filter by type
+ * POST /api/health-data/sync     → bulk sync from client localStorage
+ */
+export async function GET(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  const db = getDb();
+  const url = new URL(req.url);
+  const type = url.searchParams.get('type');
+
+  const rows = type
+    ? db
+        .prepare('SELECT * FROM health_data WHERE user_id = ? AND type = ? ORDER BY updated_at DESC')
+        .all(user.id, type)
+    : db
+        .prepare('SELECT * FROM health_data WHERE user_id = ? ORDER BY updated_at DESC')
+        .all(user.id);
+
+  // Parse the JSON `data` field back into objects.
+  const items = (rows as any[]).map((r) => ({
+    id: r.id,
+    type: r.type,
+    data: JSON.parse(r.data),
+    createdAt: r.created_at,
+    updatedAt: r.updated_at,
+  }));
+
+  return NextResponse.json({ items });
+}
+
+/**
+ * POST /api/health-data — upsert a single health-data record.
+ */
+const UpsertSchema = z.object({
+  id: z.string().optional(),
+  type: z.enum([
+    'medication',
+    'medication_log',
+    'appointment',
+    'vital',
+    'record',
+    'conversation',
+  ]),
+  data: z.record(z.any()),
+});
+
+export async function POST(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  try {
+    const body = await req.json();
+    const { id, type, data } = UpsertSchema.parse(body);
+
+    const db = getDb();
+    const itemId = id || genId();
+    const json = JSON.stringify(data);
+
+    // Upsert: insert or replace. SQLite's ON CONFLICT handles this cleanly.
+    db.prepare(
+      `INSERT INTO health_data (id, user_id, type, data, updated_at)
+       VALUES (?, ?, ?, ?, datetime('now'))
+       ON CONFLICT(id) DO UPDATE SET data = excluded.data, updated_at = datetime('now')`,
+    ).run(itemId, user.id, type, json);
+
+    return NextResponse.json({ id: itemId, type }, { status: 201 });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid input', details: error.errors },
+        { status: 400 },
+      );
+    }
+    console.error('[Health Data POST]', error?.message);
+    return NextResponse.json({ error: 'Save failed' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/health-data?id=<id> — delete one record.
+ */
+export async function DELETE(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  const url = new URL(req.url);
+  const id = url.searchParams.get('id');
+  if (!id) {
+    return NextResponse.json({ error: 'Missing id' }, { status: 400 });
+  }
+
+  const db = getDb();
+  db.prepare('DELETE FROM health_data WHERE id = ? AND user_id = ?').run(
+    id,
+    user.id,
+  );
+
+  return NextResponse.json({ success: true });
+}

app/api/health-data/sync/route.ts

@@ -0,0 +1,75 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { getDb, genId } from '@/lib/db';
+import { authenticateRequest } from '@/lib/auth-middleware';
+
+/**
+ * POST /api/health-data/sync — bulk sync from client localStorage.
+ *
+ * The client sends its entire localStorage health dataset (medications,
+ * appointments, vitals, records, medication_logs, conversations). The
+ * server upserts each item. This runs on:
+ *   - First login (migrates existing guest data to the account)
+ *   - Periodic background sync while logged in
+ *
+ * Idempotent: calling it twice with the same data is safe.
+ */
+
+const ItemSchema = z.object({
+  id: z.string(),
+  type: z.enum([
+    'medication',
+    'medication_log',
+    'appointment',
+    'vital',
+    'record',
+    'conversation',
+  ]),
+  data: z.record(z.any()),
+});
+
+const SyncSchema = z.object({
+  items: z.array(ItemSchema).max(5000),
+});
+
+export async function POST(req: Request) {
+  const user = authenticateRequest(req);
+  if (!user) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+
+  try {
+    const body = await req.json();
+    const { items } = SyncSchema.parse(body);
+
+    const db = getDb();
+
+    const upsert = db.prepare(
+      `INSERT INTO health_data (id, user_id, type, data, updated_at)
+       VALUES (?, ?, ?, ?, datetime('now'))
+       ON CONFLICT(id) DO UPDATE SET data = excluded.data, updated_at = datetime('now')`,
+    );
+
+    // Run as a single transaction for speed (1000+ items in <50ms).
+    const tx = db.transaction(() => {
+      for (const item of items) {
+        upsert.run(item.id, user.id, item.type, JSON.stringify(item.data));
+      }
+    });
+    tx();
+
+    return NextResponse.json({
+      synced: items.length,
+      message: `${items.length} items synced`,
+    });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid input', details: error.errors },
+        { status: 400 },
+      );
+    }
+    console.error('[Health Data Sync]', error?.message);
+    return NextResponse.json({ error: 'Sync failed' }, { status: 500 });
+  }
+}

app/api/health/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({
+    status: 'healthy',
+    service: 'medos-global',
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+  });
+}

app/api/models/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+import { fetchAvailableModels } from '@/lib/providers/ollabridge-models';
+
+export async function GET() {
+  try {
+    const models = await fetchAvailableModels();
+    return NextResponse.json({ models });
+  } catch {
+    return NextResponse.json(
+      { models: [], error: 'Failed to fetch models' },
+      { status: 200 } // Return 200 with empty array — non-critical endpoint
+    );
+  }
+}

app/api/og/route.tsx

@@ -0,0 +1,207 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+/**
+ * Dynamic Open Graph image endpoint.
+ *
+ * Every share on Twitter / WhatsApp / LinkedIn / Telegram / iMessage
+ * renders a branded 1200x630 card. The query becomes the card title so
+ * a link like `https://ruslanmv-medibot.hf.space/?q=chest+pain` previews
+ * as a premium, unique image instead of the default favicon blob.
+ *
+ * Usage from the client: `/api/og?q=<question>&lang=<code>`
+ * The endpoint also handles missing parameters gracefully (returns a
+ * default brand card).
+ */
+export async function GET(req: Request): Promise<Response> {
+  try {
+    const { searchParams } = new URL(req.url);
+    const rawQuery = (searchParams.get('q') || '').trim();
+    const lang = (searchParams.get('lang') || 'en').slice(0, 5);
+
+    // Hard-limit title length so long queries don't overflow.
+    const title =
+      rawQuery.length > 120 ? rawQuery.slice(0, 117) + '…' : rawQuery;
+
+    const subtitle = title
+      ? 'Ask MedOS — free, private, in your language'
+      : 'Free AI medical assistant — 20 languages, no sign-up';
+
+    const headline = title || 'Tell me what\'s bothering you.';
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '72px',
+            background:
+              'radial-gradient(1200px 800px at 10% -10%, rgba(59,130,246,0.35), transparent 60%),' +
+              'radial-gradient(1000px 600px at 110% 10%, rgba(20,184,166,0.30), transparent 60%),' +
+              'linear-gradient(180deg, #0B1220 0%, #0E1627 100%)',
+            color: '#F8FAFC',
+            fontFamily: 'sans-serif',
+            position: 'relative',
+          }}
+        >
+          {/* Top bar: brand mark + language chip */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: '48px',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '18px' }}>
+              <div
+                style={{
+                  width: '72px',
+                  height: '72px',
+                  borderRadius: '22px',
+                  background: 'linear-gradient(135deg, #3B82F6 0%, #14B8A6 100%)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '44px',
+                  boxShadow: '0 20px 60px -10px rgba(59,130,246,0.65)',
+                }}
+              >
+                ♥
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div
+                  style={{
+                    fontSize: '40px',
+                    fontWeight: 800,
+                    letterSpacing: '-0.02em',
+                    lineHeight: 1,
+                  }}
+                >
+                  MedOS
+                </div>
+                <div
+                  style={{
+                    fontSize: '16px',
+                    color: '#14B8A6',
+                    fontWeight: 700,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.18em',
+                    marginTop: '6px',
+                  }}
+                >
+                  Worldwide medical AI
+                </div>
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                padding: '10px 18px',
+                borderRadius: '9999px',
+                background: 'rgba(255,255,255,0.08)',
+                border: '1px solid rgba(255,255,255,0.18)',
+                fontSize: '18px',
+                color: '#CBD5E1',
+                fontWeight: 600,
+              }}
+            >
+              <span
+                style={{
+                  width: '8px',
+                  height: '8px',
+                  borderRadius: '9999px',
+                  background: '#22C55E',
+                }}
+              />
+              {lang.toUpperCase()} · FREE · NO SIGN-UP
+            </div>
+          </div>
+
+          {/* Main content */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1,
+              justifyContent: 'center',
+            }}
+          >
+            {title && (
+              <div
+                style={{
+                  fontSize: '22px',
+                  fontWeight: 700,
+                  color: '#14B8A6',
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.18em',
+                  marginBottom: '22px',
+                }}
+              >
+                Ask MedOS
+              </div>
+            )}
+            <div
+              style={{
+                fontSize: title ? '68px' : '84px',
+                fontWeight: 800,
+                lineHeight: 1.1,
+                letterSpacing: '-0.025em',
+                color: '#F8FAFC',
+                maxWidth: '1000px',
+              }}
+            >
+              {title ? `"${headline}"` : headline}
+            </div>
+            <div
+              style={{
+                fontSize: '26px',
+                color: '#94A3B8',
+                marginTop: '28px',
+                fontWeight: 500,
+              }}
+            >
+              {subtitle}
+            </div>
+          </div>
+
+          {/* Footer: trust strip */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '28px',
+              fontSize: '18px',
+              color: '#94A3B8',
+              fontWeight: 600,
+              borderTop: '1px solid rgba(255,255,255,0.1)',
+              paddingTop: '28px',
+            }}
+          >
+            <span style={{ color: '#14B8A6', fontWeight: 700 }}>
+              ✓ Aligned with WHO · CDC · NHS
+            </span>
+            <span>·</span>
+            <span>Private &amp; anonymous</span>
+            <span>·</span>
+            <span>24/7</span>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      },
+    );
+  } catch {
+    // Never 500 an OG endpoint — social crawlers will blacklist the domain.
+    return new Response('OG image generation failed', { status: 500 });
+  }
+}

app/api/rag/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { searchMedicalKB } from '@/lib/rag/medical-kb';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { query, topN = 3 } = await request.json();
+
+    if (!query || typeof query !== 'string') {
+      return NextResponse.json(
+        { error: 'Query is required' },
+        { status: 400 }
+      );
+    }
+
+    const results = searchMedicalKB(query, topN);
+
+    return NextResponse.json({
+      results: results.map((r) => ({
+        topic: r.topic,
+        context: r.context,
+      })),
+      count: results.length,
+    });
+  } catch {
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

app/api/sessions/route.ts

@@ -0,0 +1,70 @@
+import { NextResponse } from 'next/server';
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Server-side session counter.
+ * Stores count in /tmp/medos-data/sessions.json (persists across requests, resets on container restart).
+ * On HF Spaces with persistent storage, use /data/ instead of /tmp/.
+ *
+ * GET  /api/sessions → returns { count: number }
+ * POST /api/sessions → increments and returns { count: number }
+ */
+
+const DATA_DIR = process.env.PERSISTENT_DIR || '/tmp/medos-data';
+const COUNTER_FILE = join(DATA_DIR, 'sessions.json');
+const BASE_COUNT = 423000; // Historical base from before server-side tracking
+
+interface CounterData {
+  count: number;
+  lastUpdated: string;
+}
+
+function ensureDir(): void {
+  if (!existsSync(DATA_DIR)) {
+    mkdirSync(DATA_DIR, { recursive: true });
+  }
+}
+
+function readCounter(): number {
+  ensureDir();
+  try {
+    if (existsSync(COUNTER_FILE)) {
+      const data: CounterData = JSON.parse(readFileSync(COUNTER_FILE, 'utf8'));
+      return data.count;
+    }
+  } catch {
+    // corrupted file, reset
+  }
+  return 0;
+}
+
+function incrementCounter(): number {
+  ensureDir();
+  const current = readCounter();
+  const next = current + 1;
+  const data: CounterData = {
+    count: next,
+    lastUpdated: new Date().toISOString(),
+  };
+  writeFileSync(COUNTER_FILE, JSON.stringify(data), 'utf8');
+  return next;
+}
+
+export async function GET() {
+  const sessionCount = readCounter();
+  return NextResponse.json({
+    count: BASE_COUNT + sessionCount,
+    sessions: sessionCount,
+    base: BASE_COUNT,
+  });
+}
+
+export async function POST() {
+  const sessionCount = incrementCounter();
+  return NextResponse.json({
+    count: BASE_COUNT + sessionCount,
+    sessions: sessionCount,
+    base: BASE_COUNT,
+  });
+}

app/api/triage/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { triageMessage } from '@/lib/safety/triage';
+import { getEmergencyInfo } from '@/lib/safety/emergency-numbers';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { message, countryCode = 'US' } = await request.json();
+
+    if (!message || typeof message !== 'string') {
+      return NextResponse.json(
+        { error: 'Message is required' },
+        { status: 400 }
+      );
+    }
+
+    const triage = triageMessage(message);
+    const emergencyInfo = getEmergencyInfo(countryCode);
+
+    return NextResponse.json({
+      ...triage,
+      emergencyInfo: triage.isEmergency ? emergencyInfo : null,
+    });
+  } catch {
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -0,0 +1,397 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===== CSS Custom Properties ===== */
+:root {
+  --vh: 1vh;
+  --color-bg-primary: #f7f9fb;
+  --color-bg-secondary: #f1f5f9;
+  --color-bg-tertiary: #e2e8f0;
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-accent: #3b82f6;
+  --color-accent-secondary: #10b981;
+  --color-danger: #ef4444;
+  --color-warning: #f59e0b;
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  color-scheme: light;
+}
+
+.dark {
+  --color-bg-primary: #0f172a;
+  --color-bg-secondary: #1e293b;
+  --color-bg-tertiary: #334155;
+  --color-text-primary: #f8fafc;
+  --color-text-secondary: #94a3b8;
+  color-scheme: dark;
+}
+
+/* ============================================================
+ * Light-mode compatibility layer.
+ *
+ * Most components were originally built dark-only with hardcoded
+ * slate-700/800/900 classes. Rather than adding dark: prefixes to
+ * every single class in every file (15+ views), we remap the most
+ * common dark-palette utilities to their light equivalents at the
+ * CSS level. In .dark mode these rules don't apply, so the
+ * original dark colors remain.
+ *
+ * This is intentionally !important so it overrides Tailwind's
+ * generated utilities (which have equal specificity).
+ * ============================================================ */
+
+/* --- Backgrounds --- */
+:root:not(.dark) .bg-slate-900     { background-color: #ffffff !important; }
+:root:not(.dark) .bg-slate-900\/95 { background-color: rgba(255,255,255,0.95) !important; }
+:root:not(.dark) .bg-slate-900\/85 { background-color: rgba(255,255,255,0.90) !important; }
+:root:not(.dark) .bg-slate-800     { background-color: #f8fafc !important; }
+:root:not(.dark) .bg-slate-800\/50 { background-color: rgba(241,245,249,0.7) !important; }
+:root:not(.dark) .bg-slate-800\/30 { background-color: rgba(241,245,249,0.5) !important; }
+:root:not(.dark) .bg-slate-800\/80 { background-color: rgba(241,245,249,0.85) !important; }
+:root:not(.dark) .bg-slate-700     { background-color: #e2e8f0 !important; }
+:root:not(.dark) .bg-slate-700\/60 { background-color: rgba(226,232,240,0.7) !important; }
+
+/* Tinted surfaces */
+:root:not(.dark) .bg-red-950\/50   { background-color: rgba(254,226,226,0.6) !important; }
+
+/* --- Text --- */
+:root:not(.dark) .text-slate-50    { color: #0f172a !important; }
+:root:not(.dark) .text-slate-100   { color: #1e293b !important; }
+:root:not(.dark) .text-slate-200   { color: #334155 !important; }
+:root:not(.dark) .text-slate-300   { color: #475569 !important; }
+:root:not(.dark) .text-slate-400   { color: #64748b !important; }
+:root:not(.dark) .text-red-300     { color: #dc2626 !important; }
+:root:not(.dark) .text-red-400     { color: #ef4444 !important; }
+:root:not(.dark) .text-blue-200    { color: #3b82f6 !important; }
+:root:not(.dark) .text-teal-300    { color: #0d9488 !important; }
+:root:not(.dark) .text-teal-400    { color: #14b8a6 !important; }
+
+/* --- Borders --- */
+:root:not(.dark) .border-slate-700\/50 { border-color: rgba(226,232,240,0.8) !important; }
+:root:not(.dark) .border-slate-700\/30 { border-color: rgba(226,232,240,0.6) !important; }
+:root:not(.dark) .border-slate-700\/60 { border-color: rgba(226,232,240,0.7) !important; }
+:root:not(.dark) .border-slate-700     { border-color: #e2e8f0 !important; }
+:root:not(.dark) .border-red-700\/50   { border-color: rgba(252,165,165,0.6) !important; }
+:root:not(.dark) .border-red-700\/30   { border-color: rgba(252,165,165,0.4) !important; }
+
+/* --- Placeholder text --- */
+:root:not(.dark) .placeholder-slate-500::placeholder { color: #94a3b8 !important; }
+
+/* --- Hover states --- */
+:root:not(.dark) .hover\:bg-slate-800:hover  { background-color: #f1f5f9 !important; }
+:root:not(.dark) .hover\:bg-slate-700:hover  { background-color: #e2e8f0 !important; }
+:root:not(.dark) .hover\:bg-slate-600:hover  { background-color: #cbd5e1 !important; }
+:root:not(.dark) .hover\:text-slate-200:hover { color: #1e293b !important; }
+:root:not(.dark) .hover\:text-slate-300:hover { color: #334155 !important; }
+:root:not(.dark) .hover\:text-teal-200:hover  { color: #0d9488 !important; }
+
+/* --- Focus rings stay the same (blue) --- */
+
+/* --- Right panel, sidebar, bottom nav overlays --- */
+:root:not(.dark) .bg-slate-800\/95 { background-color: rgba(255,255,255,0.95) !important; }
+
+/* ===== Base Styles ===== */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  overscroll-behavior: none;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+/* ===== Mobile Viewport Height Fix (iOS Safari) ===== */
+.h-screen-safe {
+  height: calc(var(--vh, 1vh) * 100);
+}
+
+/* ===== Safe Area Padding ===== */
+.pt-safe {
+  padding-top: var(--safe-area-top);
+}
+.pb-safe {
+  padding-bottom: var(--safe-area-bottom);
+}
+.pl-safe {
+  padding-left: var(--safe-area-left);
+}
+.pr-safe {
+  padding-right: var(--safe-area-right);
+}
+
+/* ===== Prevent Zoom on Input Focus (iOS) ===== */
+input,
+textarea,
+select {
+  font-size: 16px !important;
+}
+
+/* ===== Touch Targets (Apple HIG: 44x44px minimum) ===== */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ===== Smooth Scrolling ===== */
+.scroll-smooth {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+
+/* ===== Custom Scrollbar ===== */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #475569;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+
+/* ===== Selection Style ===== */
+::selection {
+  background-color: rgba(59, 130, 246, 0.3);
+  color: #f8fafc;
+}
+
+/* ===== RTL Support ===== */
+[dir='rtl'] .sidebar-nav {
+  right: 0;
+  left: auto;
+}
+
+[dir='rtl'] .message-user {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+[dir='rtl'] .message-bot {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+[dir='rtl'] .chat-input-area {
+  flex-direction: row-reverse;
+}
+
+/* ===== Sidebar Menu Popup ===== */
+.desktop-sidebar {
+  overflow: visible !important;
+}
+
+/* ===== Animation Utilities ===== */
+.animate-delay-100 {
+  animation-delay: 100ms;
+}
+
+.animate-delay-200 {
+  animation-delay: 200ms;
+}
+
+.animate-delay-300 {
+  animation-delay: 300ms;
+}
+
+/* ===== Typing Indicator ===== */
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #64748b;
+  animation: pulseDot 1.4s infinite ease-in-out both;
+}
+
+.typing-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+/* ===== Message Markdown Rendering ===== */
+.message-content p {
+  margin-bottom: 0.5rem;
+}
+
+.message-content p:last-child {
+  margin-bottom: 0;
+}
+
+.message-content ul,
+.message-content ol {
+  padding-left: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.message-content li {
+  margin-bottom: 0.25rem;
+}
+
+.message-content code {
+  background-color: rgba(71, 85, 105, 0.5);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.message-content pre {
+  background-color: rgba(15, 23, 42, 0.8);
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin-bottom: 0.5rem;
+}
+
+.message-content pre code {
+  background: none;
+  padding: 0;
+}
+
+.message-content strong {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.dark .message-content strong {
+  color: #f1f5f9;
+}
+
+.message-content h3,
+.message-content h4 {
+  font-weight: 600;
+  margin-top: 0.75rem;
+  margin-bottom: 0.375rem;
+}
+
+/* ===== Swipe Sheet ===== */
+.swipe-sheet {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  will-change: transform;
+}
+
+/* ===== Bottom Navigation ===== */
+.bottom-nav {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background-color: rgba(255, 255, 255, 0.90);
+}
+
+.dark .bottom-nav {
+  background-color: rgba(15, 23, 42, 0.85);
+}
+
+/* ===== PWA Standalone Mode ===== */
+@media all and (display-mode: standalone) {
+  body {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .pwa-only {
+    display: block;
+  }
+
+  .browser-only {
+    display: none;
+  }
+}
+
+@media not all and (display-mode: standalone) {
+  .pwa-only {
+    display: none;
+  }
+}
+
+/* ===== Responsive Breakpoints ===== */
+@media (max-width: 768px) {
+  .desktop-sidebar {
+    display: none;
+  }
+
+  .desktop-right-panel {
+    display: none;
+  }
+
+  .mobile-bottom-nav {
+    display: flex;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-bottom-nav {
+    display: none;
+  }
+
+  .mobile-header-compact {
+    display: none;
+  }
+}
+
+/* ===== Emergency Pulse Animation ===== */
+@keyframes emergencyPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
+  }
+}
+
+.emergency-pulse {
+  animation: emergencyPulse 2s infinite;
+}
+
+/* ===== Voice Recording Indicator ===== */
+@keyframes voicePulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+}
+
+.voice-recording {
+  animation: voicePulse 1s infinite;
+}

app/layout.tsx

@@ -0,0 +1,257 @@
+import type { Metadata, Viewport } from 'next';
+import './globals.css';
+
+const SITE_URL = 'https://ruslanmv-medibot.hf.space';
+const TITLE = 'MedOS — free AI medical assistant, 20 languages, no sign-up';
+const DESCRIPTION =
+  'Ask any health question in your own language. Free, private, instant guidance aligned with WHO · CDC · NHS. No account, no paywall, no data retention.';
+
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: TITLE,
+  description: DESCRIPTION,
+  keywords: [
+    'medical chatbot',
+    'AI doctor',
+    'free medical AI',
+    'symptom checker',
+    'multilingual health assistant',
+    'WHO guidelines',
+    'CDC',
+    'NHS',
+    'Llama 3.3',
+    'HuggingFace',
+    'OllaBridge',
+    'telemedicine',
+    'health chatbot worldwide',
+    'no signup medical AI',
+  ],
+  manifest: '/manifest.json',
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'black-translucent',
+    title: 'MedOS',
+  },
+  openGraph: {
+    title: TITLE,
+    description: DESCRIPTION,
+    type: 'website',
+    siteName: 'MedOS',
+    url: SITE_URL,
+    images: [
+      {
+        url: '/api/og',
+        width: 1200,
+        height: 630,
+        alt: 'MedOS — free AI medical assistant',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: TITLE,
+    description: DESCRIPTION,
+    images: ['/api/og'],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-snippet': -1,
+      'max-image-preview': 'large',
+    },
+  },
+  alternates: { canonical: SITE_URL },
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#0B1220' },
+    { media: '(prefers-color-scheme: light)', color: '#F7F9FB' },
+  ],
+};
+
+/**
+ * Structured data (JSON-LD) — unlocks Google rich results for the medical
+ * domain and establishes trust signals for crawlers. Three blocks:
+ *   1. MedicalWebPage — declares the page type + audience
+ *   2. SoftwareApplication — lets Google treat MedOS as an app
+ *   3. Organization — basic org info for knowledge-panel eligibility
+ */
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@graph': [
+    {
+      '@type': 'MedicalWebPage',
+      '@id': `${SITE_URL}#webpage`,
+      url: SITE_URL,
+      name: TITLE,
+      description: DESCRIPTION,
+      inLanguage: [
+        'en', 'es', 'fr', 'pt', 'it', 'de', 'ar', 'hi', 'sw', 'zh',
+        'ja', 'ko', 'ru', 'tr', 'vi', 'th', 'bn', 'ur', 'pl', 'nl',
+      ],
+      audience: {
+        '@type': 'PeopleAudience',
+        healthCondition: 'General health information',
+      },
+      about: {
+        '@type': 'MedicalCondition',
+        name: 'General health guidance',
+      },
+      lastReviewed: new Date().toISOString().slice(0, 10),
+      reviewedBy: {
+        '@type': 'Organization',
+        name: 'Aligned with WHO, CDC, and NHS public guidance',
+      },
+    },
+    {
+      '@type': 'SoftwareApplication',
+      '@id': `${SITE_URL}#software`,
+      name: 'MedOS',
+      applicationCategory: 'HealthApplication',
+      operatingSystem: 'Web, iOS, Android (PWA)',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+      featureList: [
+        'Symptom triage',
+        'Medication information',
+        'Pregnancy and child health',
+        'Mental health first aid',
+        'Emergency red-flag detection',
+        '20-language support',
+        'Private and anonymous',
+        'No sign-up required',
+        'Offline-capable PWA',
+      ],
+      aggregateRating: undefined, // Omitted until real ratings exist.
+      url: SITE_URL,
+    },
+    {
+      '@type': 'Organization',
+      '@id': `${SITE_URL}#org`,
+      name: 'MedOS',
+      url: SITE_URL,
+      logo: `${SITE_URL}/icons/icon-512x512.png`,
+      sameAs: [
+        'https://huggingface.co/spaces/ruslanmv/MediBot',
+        'https://github.com/ruslanmv/ai-medical-chatbot',
+      ],
+    },
+    /**
+     * FAQPage — seeds Google with the most-common questions MedOS
+     * answers so they can appear as rich snippets directly in search
+     * results. The answers are intentionally short and authoritative;
+     * the actual conversation in-app is more detailed.
+     */
+    {
+      '@type': 'FAQPage',
+      '@id': `${SITE_URL}#faq`,
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Is MedOS really free to use?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Yes. MedOS is 100% free, with no sign-up, no API keys, no paywall, and no ads. It runs on the HuggingFace free tier using Llama 3.3 70B via Groq.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Does MedOS store my conversations or my IP address?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'No. MedOS does not store conversations server-side, does not log IP addresses, and does not require an account. An anonymous session counter is the only telemetry.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Can MedOS replace a real doctor?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'No. MedOS provides general health information and triage guidance aligned with WHO, CDC, and NHS materials, but it is not a diagnosis and does not replace a licensed clinician. If symptoms are severe or worsening, contact a healthcare provider.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'What languages does MedOS support?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'MedOS supports 20 languages including English, Spanish, French, Portuguese, German, Italian, Arabic, Hindi, Swahili, Chinese, Japanese, Korean, Russian, Turkish, Vietnamese, Thai, Bengali, Urdu, Polish, and Dutch. The language is auto-detected from your browser and IP, and you can change it anytime.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'What should I do if MedOS detects a medical emergency?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'If MedOS detects red-flag symptoms, it will interrupt the normal conversation and display your local emergency number directly (190+ countries supported). Call that number immediately. Do not wait for a longer explanation.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Which AI model powers MedOS?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'MedOS runs Meta Llama 3.3 70B Instruct routed through HuggingFace Inference Providers with Groq as the primary backend for sub-second latency. Mixtral 8x7B and other free-tier models are used as automatic fallbacks.',
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning>
+      <head>
+        <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        {/* Pre-hydration: read stored theme before first paint to avoid flash */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('medos-theme');var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark');document.documentElement.style.colorScheme=d?'dark':'light'}catch(e){}})();`,
+          }}
+        />
+        {/* JSON-LD structured data for Google rich results + SEO */}
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </head>
+      <body className="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-50 antialiased">
+        {children}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              // iOS Safari viewport height fix
+              function setVH() {
+                document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');
+              }
+              setVH();
+              window.addEventListener('resize', setVH);
+
+              // Register service worker
+              if ('serviceWorker' in navigator) {
+                window.addEventListener('load', function() {
+                  navigator.serviceWorker.register('/sw.js').catch(function() {});
+                });
+              }
+            `,
+          }}
+        />
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import MedOSGlobalApp from '@/components/MedOSGlobalApp';
+
+export default function HomePage() {
+  return <MedOSGlobalApp />;
+}

app/robots.ts

@@ -0,0 +1,23 @@
+import type { MetadataRoute } from 'next';
+
+const SITE_URL = 'https://ruslanmv-medibot.hf.space';
+
+/**
+ * Permissive robots.txt — we want every crawler to index the public
+ * pages (home, /symptoms, /stats). API routes are disallowed because
+ * they return dynamic or privacy-sensitive data (geo lookup, chat
+ * stream, session counter).
+ */
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: ['/', '/symptoms', '/stats'],
+        disallow: ['/api/'],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}

app/sitemap.ts

@@ -0,0 +1,27 @@
+import type { MetadataRoute } from 'next';
+import { getAllSymptomSlugs } from '@/lib/symptoms';
+
+const SITE_URL = 'https://ruslanmv-medibot.hf.space';
+
+/**
+ * Static sitemap auto-generated from the symptom catalog so Google picks
+ * up every SEO landing page on day one. Served at `/sitemap.xml` by Next.
+ */
+export default function sitemap(): MetadataRoute.Sitemap {
+  const now = new Date();
+
+  const staticPages: MetadataRoute.Sitemap = [
+    { url: SITE_URL,                  lastModified: now, changeFrequency: 'daily',  priority: 1.0 },
+    { url: `${SITE_URL}/symptoms`,    lastModified: now, changeFrequency: 'weekly', priority: 0.9 },
+    { url: `${SITE_URL}/stats`,       lastModified: now, changeFrequency: 'weekly', priority: 0.7 },
+  ];
+
+  const symptomPages: MetadataRoute.Sitemap = getAllSymptomSlugs().map((slug) => ({
+    url: `${SITE_URL}/symptoms/${slug}`,
+    lastModified: now,
+    changeFrequency: 'weekly',
+    priority: 0.8,
+  }));
+
+  return [...staticPages, ...symptomPages];
+}

app/stats/page.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import {
+  Activity,
+  Globe2,
+  ShieldCheck,
+  Clock4,
+  ArrowRight,
+  Languages,
+} from 'lucide-react';
+import TrustBar from '@/components/chat/TrustBar';
+
+interface SessionsResponse {
+  count: number;
+  sessions: number;
+  base: number;
+}
+
+const LANGUAGES = [
+  'English',
+  'Español',
+  'Français',
+  'Português',
+  'Italiano',
+  'Deutsch',
+  'العربية',
+  'हिन्दी',
+  'Kiswahili',
+  '中文',
+  '日本語',
+  '한국어',
+  'Русский',
+  'Türkçe',
+  'Tiếng Việt',
+  'ไทย',
+  'বাংলা',
+  'اردو',
+  'Polski',
+  'Nederlands',
+];
+
+/**
+ * Public transparency page. Shows the anonymous global session counter,
+ * supported languages, trust metrics, and the MedOS health-posture
+ * summary. Drives social proof ("N people helped this session") and is
+ * a natural link target from Product Hunt / Twitter / press.
+ *
+ * Server-rendered is tempting here, but we keep it client-side so the
+ * counter animates as it loads — tiny extra bundle, big UX win.
+ */
+export default function StatsPage() {
+  const [data, setData] = useState<SessionsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [displayCount, setDisplayCount] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/sessions', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d: SessionsResponse | null) => {
+        if (!cancelled && d) {
+          setData(d);
+          animateTo(d.count, setDisplayCount);
+        }
+      })
+      .catch(() => {})
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <main className="min-h-screen bg-slate-900 text-slate-100">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-10 pb-32">
+        <header className="mb-8 text-center">
+          <p className="text-xs font-bold uppercase tracking-[0.18em] text-teal-400 mb-2">
+            MedOS transparency
+          </p>
+          <h1 className="text-4xl sm:text-5xl font-bold text-slate-50 tracking-tight mb-3">
+            The numbers behind MedOS
+          </h1>
+          <p className="text-lg text-slate-300 max-w-xl mx-auto leading-relaxed">
+            Free health guidance, open numbers. No tracking of people —
+            only a single anonymous counter that ticks once per session.
+          </p>
+        </header>
+
+        {/* Hero counter */}
+        <section className="mb-10 rounded-3xl border border-teal-500/30 bg-gradient-to-br from-blue-900/30 to-teal-900/20 p-8 text-center">
+          <div className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-teal-300 bg-teal-500/10 border border-teal-500/30 px-3 py-1 rounded-full mb-4">
+            <Activity size={12} className="animate-pulse" />
+            Live session counter
+          </div>
+          <div className="text-6xl sm:text-7xl font-black text-slate-50 tracking-tight tabular-nums">
+            {loading ? (
+              <span className="text-slate-600">…</span>
+            ) : (
+              formatNumber(displayCount)
+            )}
+          </div>
+          <p className="text-sm text-slate-400 mt-3">
+            conversations MedOS has helped with, anonymously, since launch
+          </p>
+        </section>
+
+        {/* Cards grid */}
+        <section className="grid sm:grid-cols-2 gap-4 mb-10">
+          <StatCard
+            Icon={Globe2}
+            label="Countries supported"
+            value="190+"
+            description="Emergency numbers localized per region"
+          />
+          <StatCard
+            Icon={Languages}
+            label="Languages"
+            value="20"
+            description="Auto-detected from browser and IP"
+          />
+          <StatCard
+            Icon={ShieldCheck}
+            label="Privacy"
+            value="Zero PII"
+            description="No accounts, no IP logging, no conversation storage"
+          />
+          <StatCard
+            Icon={Clock4}
+            label="Availability"
+            value="24/7"
+            description="Free forever on HuggingFace Spaces"
+          />
+        </section>
+
+        {/* Languages strip */}
+        <section className="mb-10 rounded-2xl border border-slate-700/60 bg-slate-800/50 p-6">
+          <h2 className="text-sm font-bold uppercase tracking-wider text-slate-400 mb-4 inline-flex items-center gap-2">
+            <Languages size={14} />
+            Supported languages
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {LANGUAGES.map((l) => (
+              <span
+                key={l}
+                className="px-3 py-1.5 rounded-full text-sm font-medium text-slate-200 bg-slate-700/60 border border-slate-600/50"
+              >
+                {l}
+              </span>
+            ))}
+          </div>
+        </section>
+
+        {/* Trust bar */}
+        <section className="mb-10">
+          <TrustBar />
+        </section>
+
+        {/* CTA */}
+        <div className="rounded-2xl border border-teal-500/30 bg-gradient-to-br from-blue-900/40 to-teal-900/30 p-6 text-center">
+          <h2 className="text-2xl font-bold text-slate-50 mb-2 tracking-tight">
+            Ready to ask your own question?
+          </h2>
+          <p className="text-slate-300 mb-4">
+            Free. Private. In your language. No sign-up.
+          </p>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-br from-blue-500 to-teal-500 text-white font-bold hover:brightness-110 transition-all shadow-lg shadow-blue-500/30"
+          >
+            Open MedOS
+            <ArrowRight size={18} />
+          </Link>
+        </div>
+
+        {data && (
+          <p className="mt-6 text-center text-xs text-slate-500">
+            Counter is a single integer stored server-side at{' '}
+            <code className="text-slate-400">/api/sessions</code>. No
+            request is ever correlated to an individual.
+          </p>
+        )}
+      </div>
+    </main>
+  );
+}
+
+function StatCard({
+  Icon,
+  label,
+  value,
+  description,
+}: {
+  Icon: any;
+  label: string;
+  value: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-slate-700/60 bg-slate-800/50 p-5">
+      <div className="flex items-center gap-2 text-teal-400 mb-3">
+        <Icon size={16} />
+        <span className="text-xs font-bold uppercase tracking-wider">
+          {label}
+        </span>
+      </div>
+      <div className="text-3xl font-black text-slate-50 tracking-tight mb-1">
+        {value}
+      </div>
+      <p className="text-sm text-slate-400 leading-snug">{description}</p>
+    </div>
+  );
+}
+
+/** Format a number with locale-aware thousands separators. */
+function formatNumber(n: number): string {
+  try {
+    return new Intl.NumberFormat(undefined).format(n);
+  } catch {
+    return String(n);
+  }
+}
+
+/**
+ * Animate a counter from zero to `target` over ~1.2s using an ease-out
+ * curve. Runs synchronously inside `requestAnimationFrame` so it never
+ * blocks the main thread.
+ */
+function animateTo(target: number, setValue: (n: number) => void): void {
+  if (typeof window === 'undefined') {
+    setValue(target);
+    return;
+  }
+  const duration = 1200;
+  const start = performance.now();
+  const step = (t: number) => {
+    const elapsed = t - start;
+    const progress = Math.min(1, elapsed / duration);
+    const eased = 1 - Math.pow(1 - progress, 3); // cubic ease-out
+    setValue(Math.round(target * eased));
+    if (progress < 1) requestAnimationFrame(step);
+  };
+  requestAnimationFrame(step);
+}

app/symptoms/[slug]/page.tsx

@@ -0,0 +1,237 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { AlertTriangle, ShieldCheck, ChevronLeft, ArrowRight } from 'lucide-react';
+import {
+  getSymptomBySlug,
+  getAllSymptomSlugs,
+  type Symptom,
+} from '@/lib/symptoms';
+
+const SITE_URL = 'https://ruslanmv-medibot.hf.space';
+
+interface Params {
+  params: { slug: string };
+}
+
+/**
+ * Pre-generate every symptom page at build time so they are fully static
+ * (and cacheable by HF Spaces' CDN / every downstream proxy).
+ */
+export function generateStaticParams() {
+  return getAllSymptomSlugs().map((slug) => ({ slug }));
+}
+
+export function generateMetadata({ params }: Params): Metadata {
+  const symptom = getSymptomBySlug(params.slug);
+  if (!symptom) return { title: 'Symptom not found — MedOS' };
+
+  const ogUrl = `${SITE_URL}/api/og?q=${encodeURIComponent(symptom.headline)}`;
+  const canonical = `${SITE_URL}/symptoms/${symptom.slug}`;
+
+  return {
+    title: symptom.title,
+    description: symptom.metaDescription,
+    alternates: { canonical },
+    openGraph: {
+      title: symptom.title,
+      description: symptom.metaDescription,
+      url: canonical,
+      siteName: 'MedOS',
+      type: 'article',
+      images: [{ url: ogUrl, width: 1200, height: 630, alt: symptom.headline }],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: symptom.title,
+      description: symptom.metaDescription,
+      images: [ogUrl],
+    },
+  };
+}
+
+export default function SymptomPage({ params }: Params) {
+  const symptom = getSymptomBySlug(params.slug);
+  if (!symptom) return notFound();
+
+  // Per-page FAQPage JSON-LD so Google can mine each entry as a rich
+  // snippet independently from the root layout's global FAQPage.
+  const faqJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: symptom.faqs.map((f) => ({
+      '@type': 'Question',
+      name: f.q,
+      acceptedAnswer: { '@type': 'Answer', text: f.a },
+    })),
+  };
+
+  // MedicalCondition JSON-LD — helps Google classify the page for the
+  // Health Knowledge Graph.
+  const medicalConditionJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'MedicalCondition',
+    name: symptom.headline,
+    description: symptom.summary,
+    signOrSymptom: symptom.redFlags.map((r) => ({
+      '@type': 'MedicalSymptom',
+      name: r,
+    })),
+    possibleTreatment: symptom.selfCare.map((s) => ({
+      '@type': 'MedicalTherapy',
+      name: s,
+    })),
+  };
+
+  const chatDeepLink = `/?q=${encodeURIComponent(
+    `I want to ask about ${symptom.headline.toLowerCase()}`,
+  )}`;
+
+  return (
+    <main className="min-h-screen bg-slate-900 text-slate-100">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(medicalConditionJsonLd) }}
+      />
+
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-10 pb-32">
+        {/* Back link */}
+        <Link
+          href="/symptoms"
+          className="inline-flex items-center gap-1 text-sm text-slate-400 hover:text-teal-300 transition-colors mb-6"
+        >
+          <ChevronLeft size={16} />
+          All symptoms
+        </Link>
+
+        {/* Hero */}
+        <header className="mb-8">
+          <p className="text-xs font-bold uppercase tracking-[0.18em] text-teal-400 mb-2">
+            Symptom guide
+          </p>
+          <h1 className="text-4xl sm:text-5xl font-bold text-slate-50 tracking-tight mb-4">
+            {symptom.headline}
+          </h1>
+          <p className="text-lg text-slate-300 leading-relaxed">
+            {symptom.summary}
+          </p>
+          <div className="mt-6 inline-flex items-center gap-1.5 text-xs text-teal-300 bg-teal-500/10 border border-teal-500/30 px-3 py-1.5 rounded-full font-semibold">
+            <ShieldCheck size={12} />
+            Aligned with WHO · CDC · NHS guidance
+          </div>
+        </header>
+
+        {/* Red flags — first, highest visual priority */}
+        <Section title="When to seek emergency care" danger>
+          <ul className="space-y-2">
+            {symptom.redFlags.map((r) => (
+              <li key={r} className="flex items-start gap-2 text-slate-200">
+                <AlertTriangle
+                  size={16}
+                  className="flex-shrink-0 text-red-400 mt-0.5"
+                />
+                <span>{r}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        <Section title="Safe self-care at home">
+          <ul className="space-y-2">
+            {symptom.selfCare.map((s) => (
+              <li key={s} className="flex items-start gap-2 text-slate-200">
+                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-teal-400 flex-shrink-0" />
+                <span>{s}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        <Section title="When to see a clinician">
+          <ul className="space-y-2">
+            {symptom.whenToSeekCare.map((w) => (
+              <li key={w} className="flex items-start gap-2 text-slate-200">
+                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />
+                <span>{w}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        {/* FAQ — also rendered for humans, not just search engines */}
+        <Section title="Frequently asked questions">
+          <div className="space-y-5">
+            {symptom.faqs.map((f) => (
+              <div key={f.q}>
+                <h3 className="font-bold text-slate-100 mb-1">{f.q}</h3>
+                <p className="text-slate-300 leading-relaxed">{f.a}</p>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        {/* Primary CTA into the live chatbot */}
+        <div className="mt-10 rounded-2xl border border-teal-500/30 bg-gradient-to-br from-blue-900/40 to-teal-900/30 p-6">
+          <p className="text-xs font-bold uppercase tracking-wider text-teal-400 mb-2">
+            Ask the live assistant
+          </p>
+          <h2 className="text-2xl font-bold text-slate-50 mb-2 tracking-tight">
+            Get a personalized answer in your language.
+          </h2>
+          <p className="text-slate-300 mb-4 leading-relaxed">
+            MedOS is free, private, and takes no account. Describe your
+            situation and get step-by-step guidance.
+          </p>
+          <Link
+            href={chatDeepLink}
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-br from-blue-500 to-teal-500 text-white font-bold hover:brightness-110 transition-all shadow-lg shadow-blue-500/30"
+          >
+            Ask about {symptom.headline.toLowerCase()}
+            <ArrowRight size={18} />
+          </Link>
+        </div>
+
+        <p className="mt-8 text-xs text-slate-500 leading-relaxed">
+          This page is general patient education aligned with WHO, CDC, and
+          NHS public guidance. It is not a diagnosis, prescription, or
+          substitute for care from a licensed clinician. If symptoms are
+          severe, worsening, or you are in doubt, contact a healthcare
+          provider or your local emergency number immediately.
+        </p>
+      </div>
+    </main>
+  );
+}
+
+function Section({
+  title,
+  danger,
+  children,
+}: {
+  title: string;
+  danger?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <section
+      className={`mt-8 rounded-2xl border p-5 ${
+        danger
+          ? 'border-red-500/40 bg-red-950/30'
+          : 'border-slate-700/60 bg-slate-800/40'
+      }`}
+    >
+      <h2
+        className={`text-lg font-bold mb-3 tracking-tight ${
+          danger ? 'text-red-300' : 'text-slate-100'
+        }`}
+      >
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}

app/symptoms/page.tsx

@@ -0,0 +1,86 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { ChevronRight, ShieldCheck } from 'lucide-react';
+import { SYMPTOMS } from '@/lib/symptoms';
+
+const SITE_URL = 'https://ruslanmv-medibot.hf.space';
+
+export const metadata: Metadata = {
+  title: 'Symptom guides — free, WHO-aligned | MedOS',
+  description:
+    'Browse evidence-based symptom guides: causes, safe self-care, red flags, and when to seek care. Free, multilingual, and aligned with WHO, CDC, and NHS.',
+  alternates: { canonical: `${SITE_URL}/symptoms` },
+  openGraph: {
+    title: 'Symptom guides — free, WHO-aligned | MedOS',
+    description:
+      'Browse evidence-based symptom guides: causes, safe self-care, red flags, and when to seek care.',
+    url: `${SITE_URL}/symptoms`,
+    images: [`${SITE_URL}/api/og?q=${encodeURIComponent('Symptom guides')}`],
+  },
+};
+
+/**
+ * Symptom catalog index. Static, cacheable, zero JS-on-load cost.
+ * Works as a landing hub from organic search queries like
+ * "medos symptoms" or "symptom checker".
+ */
+export default function SymptomsIndexPage() {
+  return (
+    <main className="min-h-screen bg-slate-900 text-slate-100">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-10 pb-32">
+        <header className="mb-8 text-center">
+          <p className="text-xs font-bold uppercase tracking-[0.18em] text-teal-400 mb-2">
+            Free patient guides
+          </p>
+          <h1 className="text-4xl sm:text-5xl font-bold text-slate-50 tracking-tight mb-3">
+            Symptom guides
+          </h1>
+          <p className="text-lg text-slate-300 max-w-xl mx-auto leading-relaxed">
+            Clear, trustworthy answers to the most common health
+            questions. Free, multilingual, and aligned with WHO, CDC,
+            and NHS guidance.
+          </p>
+          <div className="mt-5 inline-flex items-center gap-1.5 text-xs text-teal-300 bg-teal-500/10 border border-teal-500/30 px-3 py-1.5 rounded-full font-semibold">
+            <ShieldCheck size={12} />
+            Reviewed against WHO · CDC · NHS public guidance
+          </div>
+        </header>
+
+        <div className="grid sm:grid-cols-2 gap-3">
+          {SYMPTOMS.map((s) => (
+            <Link
+              key={s.slug}
+              href={`/symptoms/${s.slug}`}
+              className="group p-5 rounded-2xl border border-slate-700/60 bg-slate-800/60 hover:border-teal-500/50 hover:bg-teal-500/5 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  <h2 className="font-bold text-slate-100 text-lg mb-1 tracking-tight">
+                    {s.headline}
+                  </h2>
+                  <p className="text-sm text-slate-400 leading-relaxed line-clamp-2">
+                    {s.summary}
+                  </p>
+                </div>
+                <ChevronRight
+                  size={18}
+                  className="flex-shrink-0 text-slate-500 group-hover:text-teal-400 transition-colors mt-1"
+                />
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <div className="mt-10 text-center">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-br from-blue-500 to-teal-500 text-white font-bold hover:brightness-110 transition-all shadow-lg shadow-blue-500/30"
+          >
+            Open the live MedOS assistant
+            <ChevronRight size={18} />
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

components/MedOSGlobalApp.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { detectLanguage, getLanguageDirection, type SupportedLanguage } from '@/lib/i18n';
+import { initViewport } from '@/lib/mobile/viewport';
+import { initPWA } from '@/lib/mobile/pwa';
+import { onConnectivityChange, isOnline } from '@/lib/mobile/offline-cache';
+import { detectCountryFromTimezone } from '@/lib/safety/emergency-numbers';
+import { useGeoDetect } from '@/lib/hooks/useGeoDetect';
+import { useTheme } from '@/lib/hooks/useTheme';
+import ThemeToggle from './ui/ThemeToggle';
+import Sidebar from './chat/Sidebar';
+import RightPanel from './chat/RightPanel';
+import BottomNav from './mobile/BottomNav';
+import ChatView from './views/ChatView';
+import TopicsView from './views/TopicsView';
+import EmergencyView from './views/EmergencyView';
+import LanguageView from './views/LanguageView';
+import ShareView from './views/ShareView';
+import SettingsView, { type AppSettings, DEFAULT_SETTINGS } from './views/SettingsView';
+import AboutView from './views/AboutView';
+import DisclaimerBanner from './ui/DisclaimerBanner';
+import OfflineBanner from './ui/OfflineBanner';
+import InstallPrompt from './ui/InstallPrompt';
+
+export type ViewType = 'chat' | 'topics' | 'emergency' | 'language' | 'share' | 'settings' | 'about';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  isEmergency?: boolean;
+}
+
+const SETTINGS_STORAGE_KEY = 'medos-settings';
+
+function loadSettings(): AppSettings {
+  if (typeof localStorage === 'undefined') return DEFAULT_SETTINGS;
+  try {
+    const raw = localStorage.getItem(SETTINGS_STORAGE_KEY);
+    if (!raw) return DEFAULT_SETTINGS;
+    return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
+  } catch {
+    return DEFAULT_SETTINGS;
+  }
+}
+
+function saveSettings(settings: AppSettings): void {
+  if (typeof localStorage === 'undefined') return;
+  try {
+    localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+    // silently fail
+  }
+}
+
+export default function MedOSGlobalApp() {
+  const [currentView, setCurrentView] = useState<ViewType>('chat');
+  const [language, setLanguage] = useState<SupportedLanguage>('en');
+  const [countryCode, setCountryCode] = useState('US');
+  // When the user manually picks a language (via LanguageView or Settings)
+  // we flip this flag so subsequent IP-based auto-detection never
+  // overrides their explicit choice.
+  const [explicitLocale, setExplicitLocale] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [online, setOnline] = useState(true);
+  const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
+  const { theme, setTheme } = useTheme();
+
+  // Initialize on mount
+  useEffect(() => {
+    const detectedLang = detectLanguage();
+    setLanguage(detectedLang);
+
+    const country = detectCountryFromTimezone();
+    setCountryCode(country);
+
+    const dir = getLanguageDirection(detectedLang);
+    document.documentElement.setAttribute('dir', dir);
+    document.documentElement.setAttribute('lang', detectedLang);
+
+    setSettings(loadSettings());
+    initPWA();
+    const cleanupViewport = initViewport();
+    setOnline(isOnline());
+    const cleanupConnectivity = onConnectivityChange(setOnline);
+
+    return () => {
+      cleanupViewport?.();
+      cleanupConnectivity();
+    };
+  }, []);
+
+  // Server-authoritative IP-based geo detection. Runs once on mount,
+  // silently, and only applies its result if the user hasn't made an
+  // explicit locale choice yet — manual picks win forever.
+  const applyGeo = useCallback(
+    (g: { country: string; language: SupportedLanguage }) => {
+      if (explicitLocale) return;
+      setCountryCode(g.country);
+      setLanguage(g.language);
+      const dir = getLanguageDirection(g.language);
+      document.documentElement.setAttribute('dir', dir);
+      document.documentElement.setAttribute('lang', g.language);
+    },
+    [explicitLocale],
+  );
+  useGeoDetect({ skip: explicitLocale, onResult: applyGeo });
+
+  const handleLanguageChange = useCallback((lang: SupportedLanguage) => {
+    setExplicitLocale(true);
+    setLanguage(lang);
+    const dir = getLanguageDirection(lang);
+    document.documentElement.setAttribute('dir', dir);
+    document.documentElement.setAttribute('lang', lang);
+  }, []);
+
+  const handleUpdateSettings = useCallback((newSettings: AppSettings) => {
+    setSettings(newSettings);
+    saveSettings(newSettings);
+    setCurrentView('chat');
+  }, []);
+
+  const sendMessage = useCallback(
+    async (content: string) => {
+      if (!content.trim() || isLoading) return;
+
+      const userMessage: ChatMessage = {
+        id: Date.now().toString(),
+        role: 'user',
+        content: content.trim(),
+        timestamp: new Date(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+      setIsLoading(true);
+
+      const assistantMessage: ChatMessage = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      try {
+        const allMessages = [
+          ...messages.map((m) => ({ role: m.role, content: m.content })),
+          { role: 'user' as const, content: content.trim() },
+        ];
+
+        const response = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            messages: allMessages,
+            model: settings.model || 'qwen2.5:1.5b',
+            language,
+            countryCode,
+            ollabridge_url: settings.use_custom_backend ? settings.ollabridge_url : undefined,
+          }),
+        });
+
+        if (!response.ok) throw new Error('Chat request failed');
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No response stream');
+
+        const decoder = new TextDecoder();
+        let fullContent = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          const lines = chunk.split('\n');
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const data = line.slice(6);
+              if (data === '[DONE]') continue;
+
+              try {
+                const parsed = JSON.parse(data);
+                const delta = parsed.choices?.[0]?.delta?.content;
+                if (delta) {
+                  fullContent += delta;
+                  setMessages((prev) => {
+                    const updated = [...prev];
+                    const lastIdx = updated.length - 1;
+                    if (updated[lastIdx]?.role === 'assistant') {
+                      updated[lastIdx] = {
+                        ...updated[lastIdx],
+                        content: fullContent,
+                        isEmergency: parsed.isEmergency || false,
+                      };
+                    }
+                    return updated;
+                  });
+                }
+              } catch {
+                // Skip malformed SSE chunks
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.error('[Chat Error]:', error);
+        setMessages((prev) => {
+          const updated = [...prev];
+          const lastIdx = updated.length - 1;
+          if (updated[lastIdx]?.role === 'assistant') {
+            updated[lastIdx] = {
+              ...updated[lastIdx],
+              content:
+                'I apologize, but I\'m having trouble connecting right now. Please try again in a moment. If you are experiencing a medical emergency, please call your local emergency number immediately.',
+            };
+          }
+          return updated;
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [messages, language, countryCode, isLoading, settings]
+  );
+
+  const renderView = () => {
+    switch (currentView) {
+      case 'topics':
+        return (
+          <TopicsView
+            language={language}
+            onSelectTopic={(topic) => {
+              setCurrentView('chat');
+              sendMessage(topic);
+            }}
+          />
+        );
+      case 'emergency':
+        return <EmergencyView countryCode={countryCode} language={language} />;
+      case 'language':
+        return (
+          <LanguageView
+            currentLanguage={language}
+            onSelectLanguage={(lang) => {
+              handleLanguageChange(lang);
+              setCurrentView('chat');
+            }}
+          />
+        );
+      case 'share':
+        return <ShareView language={language} />;
+      case 'settings':
+        return (
+          <SettingsView
+            language={language}
+            settings={settings}
+            onUpdateSettings={handleUpdateSettings}
+          />
+        );
+      case 'about':
+        return <AboutView />;
+      default:
+        return (
+          <ChatView
+            messages={messages}
+            isLoading={isLoading}
+            language={language}
+            onSendMessage={sendMessage}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="h-screen-safe flex flex-col bg-white dark:bg-slate-900 pt-safe transition-colors">
+      {!online && <OfflineBanner language={language} />}
+      <InstallPrompt />
+
+      <div className="flex flex-1 overflow-hidden">
+        <div className="desktop-sidebar w-64 border-r border-slate-700/50 flex-shrink-0">
+          <Sidebar
+            currentView={currentView}
+            onNavigate={setCurrentView}
+            language={language}
+          />
+        </div>
+
+        <main className="flex-1 flex flex-col min-w-0">
+          {renderView()}
+          <DisclaimerBanner language={language} />
+        </main>
+
+        <div className="desktop-right-panel w-72 border-l border-slate-700/50 flex-shrink-0">
+          <RightPanel
+            countryCode={countryCode}
+            language={language}
+            onNavigate={setCurrentView}
+          />
+        </div>
+      </div>
+
+      <div className="mobile-bottom-nav pb-safe">
+        <BottomNav
+          currentView={currentView}
+          onNavigate={setCurrentView}
+          language={language}
+        />
+      </div>
+    </div>
+  );
+}

components/chat/MessageBubble.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import {
+  AlertTriangle,
+  Share2,
+  Link as LinkIcon,
+  Copy,
+  Check,
+  Volume2,
+  VolumeX,
+  ShieldCheck,
+} from 'lucide-react';
+import type { ChatMessage } from '../MedOSGlobalApp';
+import { shareMessage, buildShareUrl } from '@/lib/share';
+import {
+  estimateConfidence,
+  extractCitations,
+  CONFIDENCE_LABELS,
+  CONFIDENCE_COLORS,
+} from '@/lib/answer-quality';
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+  /** The user question that produced this assistant answer (shareable). */
+  sourceQuestion?: string;
+  /** Language code carried into share URLs + TTS playback. */
+  language?: string;
+}
+
+type ActionState = 'idle' | 'copied-text' | 'copied-link' | 'shared';
+
+export default function MessageBubble({
+  message,
+  sourceQuestion,
+  language = 'en',
+}: MessageBubbleProps) {
+  const isUser = message.role === 'user';
+  const isEmergency = message.isEmergency;
+
+  const [actionState, setActionState] = useState<ActionState>('idle');
+  const [isPlaying, setIsPlaying] = useState(false);
+  const utterRef = useRef<SpeechSynthesisUtterance | null>(null);
+
+  const isAssistant = !isUser && message.content.length > 0;
+  const hasSource = !!sourceQuestion;
+
+  // Answer-quality signals — computed once per render, pure functions.
+  const confidence = isAssistant ? estimateConfidence(message.content) : null;
+  const citations = isAssistant ? extractCitations(message.content) : [];
+
+  const flash = (s: ActionState) => {
+    setActionState(s);
+    window.setTimeout(() => setActionState('idle'), 2200);
+  };
+
+  const handleShare = async () => {
+    if (!sourceQuestion) return;
+    const result = await shareMessage(sourceQuestion, language);
+    if (result === 'shared') flash('shared');
+    else if (result === 'copied') flash('copied-link');
+  };
+
+  const handleCopyLink = async () => {
+    if (!sourceQuestion) return;
+    try {
+      const url = buildShareUrl(sourceQuestion, language);
+      await navigator.clipboard.writeText(url);
+      flash('copied-link');
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleCopyText = async () => {
+    try {
+      await navigator.clipboard.writeText(message.content);
+      flash('copied-text');
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleToggleListen = () => {
+    if (typeof window === 'undefined' || !('speechSynthesis' in window)) return;
+    if (isPlaying) {
+      window.speechSynthesis.cancel();
+      setIsPlaying(false);
+      return;
+    }
+    // Strip Markdown emphasis markers so TTS doesn't read them aloud.
+    const plain = message.content.replace(/\*\*|`/g, '').trim();
+    const u = new SpeechSynthesisUtterance(plain);
+    u.lang = language;
+    u.rate = 1.02;
+    u.onend = () => setIsPlaying(false);
+    u.onerror = () => setIsPlaying(false);
+    utterRef.current = u;
+    window.speechSynthesis.cancel();
+    window.speechSynthesis.speak(u);
+    setIsPlaying(true);
+  };
+
+  return (
+    <div
+      className={`flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in`}
+    >
+      <div
+        className={`
+          max-w-[88%] md:max-w-[72%] rounded-2xl px-4 py-3
+          ${
+            isUser
+              ? 'bg-medical-primary text-white message-user'
+              : isEmergency
+                ? 'bg-red-50 border border-red-200 text-red-900 dark:bg-red-950/50 dark:border-red-700/50 dark:text-slate-100 message-bot'
+                : 'bg-slate-50 border border-slate-200 text-slate-800 dark:bg-slate-800 dark:border-slate-700/50 dark:text-slate-100 message-bot'
+          }
+        `}
+      >
+        {/* Assistant header: confidence + citation chips */}
+        {isAssistant && (confidence || citations.length > 0) && (
+          <div className="flex flex-wrap items-center gap-1.5 mb-2 pb-2 border-b border-slate-700/40">
+            {confidence && (
+              <span
+                className={`inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider border px-2 py-0.5 rounded-full ${CONFIDENCE_COLORS[confidence]}`}
+                title={`Confidence: ${confidence}`}
+              >
+                <ShieldCheck size={10} />
+                {CONFIDENCE_LABELS[confidence]}
+              </span>
+            )}
+            {citations.map((c) => (
+              <a
+                key={c.id}
+                href={c.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-teal-300 border border-teal-500/30 bg-teal-500/10 px-2 py-0.5 rounded-full hover:bg-teal-500/20 transition-colors"
+                title={`Open ${c.label} in a new tab`}
+              >
+                {c.label}
+              </a>
+            ))}
+          </div>
+        )}
+
+        {/* Emergency indicator */}
+        {isEmergency && !isUser && (
+          <div className="flex items-center gap-2 mb-2 pb-2 border-b border-red-700/30">
+            <AlertTriangle size={16} className="text-red-400" />
+            <span className="text-xs font-semibold text-red-300 uppercase">
+              Emergency Detected
+            </span>
+          </div>
+        )}
+
+        {/* Message body */}
+        <div className="message-content text-sm leading-relaxed whitespace-pre-wrap">
+          {renderMarkdown(message.content)}
+        </div>
+
+        {/* Footer: timestamp + action row */}
+        <div
+          className={`flex items-center justify-between mt-2 gap-3 flex-wrap ${
+            isUser ? 'text-blue-200' : 'text-slate-400 dark:text-slate-500'
+          }`}
+        >
+          <span className="text-xs">
+            {message.timestamp.toLocaleTimeString([], {
+              hour: '2-digit',
+              minute: '2-digit',
+            })}
+          </span>
+
+          {isAssistant && (
+            <div className="flex items-center gap-1">
+              <ActionButton
+                active={actionState === 'copied-text'}
+                onClick={handleCopyText}
+                label={actionState === 'copied-text' ? 'Copied' : 'Copy'}
+                Icon={actionState === 'copied-text' ? Check : Copy}
+                activeColor="text-teal-300"
+                title="Copy answer text"
+              />
+
+              {'speechSynthesis' in (globalThis as any) && (
+                <ActionButton
+                  active={isPlaying}
+                  onClick={handleToggleListen}
+                  label={isPlaying ? 'Stop' : 'Listen'}
+                  Icon={isPlaying ? VolumeX : Volume2}
+                  activeColor="text-teal-300"
+                  title={isPlaying ? 'Stop reading' : 'Read answer aloud'}
+                />
+              )}
+
+              {hasSource && (
+                <>
+                  <ActionButton
+                    active={actionState === 'copied-link'}
+                    onClick={handleCopyLink}
+                    label={actionState === 'copied-link' ? 'Copied' : 'Link'}
+                    Icon={actionState === 'copied-link' ? Check : LinkIcon}
+                    activeColor="text-teal-300"
+                    title="Copy shareable link"
+                  />
+                  <ActionButton
+                    active={actionState === 'shared'}
+                    onClick={handleShare}
+                    label={actionState === 'shared' ? 'Shared' : 'Share'}
+                    Icon={actionState === 'shared' ? Check : Share2}
+                    activeColor="text-teal-300"
+                    title="Share this answer"
+                  />
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ActionButton({
+  active,
+  onClick,
+  label,
+  Icon,
+  activeColor,
+  title,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+  Icon: any;
+  activeColor: string;
+  title: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      className={`inline-flex items-center gap-1 text-xs font-semibold px-1.5 py-1 rounded transition-colors ${
+        active
+          ? activeColor
+          : 'text-slate-400 hover:text-teal-300 hover:bg-slate-700/40'
+      }`}
+    >
+      <Icon size={12} />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}
+
+function renderMarkdown(text: string): React.ReactNode {
+  // Simple markdown rendering: bold, code, line breaks
+  const parts = text.split(/(\*\*.*?\*\*|`.*?`|\n)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return (
+        <strong key={i} className="font-semibold text-slate-50">
+          {part.slice(2, -2)}
+        </strong>
+      );
+    }
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return (
+        <code key={i} className="bg-slate-700/50 px-1.5 py-0.5 rounded text-xs">
+          {part.slice(1, -1)}
+        </code>
+      );
+    }
+    if (part === '\n') {
+      return <br key={i} />;
+    }
+    return <span key={i}>{part}</span>;
+  });
+}

components/chat/QuickChips.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { hapticFeedback } from '@/lib/mobile/touch';
+
+interface QuickChipsProps {
+  topics: string[];
+  onSelect: (topic: string) => void;
+}
+
+export default function QuickChips({ topics, onSelect }: QuickChipsProps) {
+  return (
+    <div className="flex flex-wrap gap-2 px-4 py-3">
+      {topics.map((topic) => (
+        <button
+          key={topic}
+          onClick={() => {
+            hapticFeedback('light');
+            onSelect(`I have a question about ${topic.toLowerCase()}`);
+          }}
+          className="px-3.5 py-2 rounded-full bg-slate-800 border border-slate-700/50
+                     text-sm text-slate-300 hover:bg-slate-700 hover:text-slate-100
+                     hover:border-medical-primary/30 transition-all duration-200
+                     touch-target whitespace-nowrap active:scale-95"
+        >
+          {topic}
+        </button>
+      ))}
+    </div>
+  );
+}

components/chat/RightPanel.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Phone, ExternalLink, Heart } from 'lucide-react';
+import { getEmergencyInfo } from '@/lib/safety/emergency-numbers';
+import { trackSession } from '@/lib/analytics/anonymous-tracker';
+import type { ViewType } from '../MedOSGlobalApp';
+import type { SupportedLanguage } from '@/lib/i18n';
+
+interface RightPanelProps {
+  countryCode: string;
+  language: SupportedLanguage;
+  onNavigate: (view: ViewType) => void;
+}
+
+const REGION_TOPICS: Record<string, string[]> = {
+  US: ['Diabetes', 'Mental Health', 'Heart Disease', 'Obesity', 'Cancer Screening'],
+  GB: ['Cancer', 'Mental Health', 'Heart Disease', 'Dementia', 'Asthma'],
+  IN: ['Tuberculosis', 'Diabetes', 'Dengue', 'Malaria', 'Maternal Health'],
+  NG: ['Malaria', 'HIV/AIDS', 'Tuberculosis', 'Maternal Health', 'Sickle Cell'],
+  BR: ['Dengue', 'Diabetes', 'Hypertension', 'Mental Health', 'Zika'],
+  CN: ['Stroke', 'Diabetes', 'Lung Cancer', 'Hypertension', 'Air Pollution'],
+  JP: ['Cancer', 'Dementia', 'Stroke', 'Mental Health', 'Allergies'],
+  SA: ['Diabetes', 'Obesity', 'Heart Disease', 'Heat Illness', 'Genetic Disorders'],
+  KE: ['Malaria', 'HIV/AIDS', 'TB', 'Maternal Health', 'Malnutrition'],
+  PH: ['Dengue', 'TB', 'Diabetes', 'Typhoid', 'Mental Health'],
+  DE: ['Cancer', 'Heart Disease', 'Mental Health', 'Allergies', 'Back Pain'],
+  EG: ['Diabetes', 'Hepatitis C', 'Heart Disease', 'Kidney Disease', 'Hypertension'],
+};
+
+export default function RightPanel({
+  countryCode,
+  onNavigate,
+}: RightPanelProps) {
+  const emergencyInfo = getEmergencyInfo(countryCode);
+  const topics = REGION_TOPICS[countryCode] || REGION_TOPICS.US;
+  const [helpedCount, setHelpedCount] = useState(0);
+
+  useEffect(() => {
+    trackSession().then(setHelpedCount);
+  }, []);
+
+  return (
+    <div className="flex flex-col h-full bg-slate-900 p-4 overflow-y-auto scroll-smooth">
+      {/* Region Topics */}
+      <div className="mb-6">
+        <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">
+          Top Health Topics
+        </h3>
+        <div className="space-y-1">
+          {topics.map((topic) => (
+            <button
+              key={topic}
+              onClick={() => onNavigate('topics')}
+              className="w-full text-left px-3 py-2 rounded-lg text-sm text-slate-300
+                         hover:bg-slate-800 hover:text-slate-100 transition-colors"
+            >
+              {topic}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Emergency Card */}
+      <div className="mb-6 p-4 rounded-xl bg-red-950/30 border border-red-800/30">
+        <div className="flex items-center gap-2 mb-2">
+          <Phone size={16} className="text-red-400" />
+          <h3 className="text-sm font-semibold text-red-300">Emergency</h3>
+        </div>
+        <p className="text-xs text-slate-400 mb-3">{emergencyInfo.country}</p>
+        <a
+          href={`tel:${emergencyInfo.emergency}`}
+          className="flex items-center justify-center gap-2 w-full py-2.5 rounded-lg
+                     bg-red-600 hover:bg-red-500 text-white text-sm font-semibold
+                     transition-colors touch-target emergency-pulse"
+        >
+          <Phone size={16} />
+          Call {emergencyInfo.emergency}
+        </a>
+        {emergencyInfo.crisisHotline && (
+          <p className="text-xs text-slate-400 mt-2 text-center">
+            Crisis: {emergencyInfo.crisisHotline}
+          </p>
+        )}
+      </div>
+
+      {/* Share Card */}
+      <div className="mb-6 p-4 rounded-xl bg-slate-800/50 border border-slate-700/30">
+        <h3 className="text-sm font-semibold text-slate-300 mb-2">
+          Share MedOS
+        </h3>
+        <p className="text-xs text-slate-400 mb-3">
+          Help others get free medical guidance
+        </p>
+        <button
+          onClick={() => onNavigate('share')}
+          className="flex items-center justify-center gap-2 w-full py-2 rounded-lg
+                     bg-medical-primary hover:bg-blue-500 text-white text-sm
+                     transition-colors touch-target"
+        >
+          <ExternalLink size={14} />
+          Share & Embed
+        </button>
+      </div>
+
+      {/* Social Proof */}
+      <div className="p-4 rounded-xl bg-slate-800/30 border border-slate-700/20">
+        <div className="flex items-center gap-2 mb-1">
+          <Heart size={14} className="text-medical-secondary" />
+          <span className="text-sm font-semibold text-slate-300">
+            {helpedCount.toLocaleString()}
+          </span>
+        </div>
+        <p className="text-xs text-slate-500">people helped worldwide</p>
+      </div>
+
+      {/* Open Source Badge */}
+      <div className="mt-auto pt-4 border-t border-slate-700/30">
+        <a
+          href="https://github.com/ruslanmv/ai-medical-chatbot"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-xs text-slate-500 hover:text-slate-400 transition-colors"
+        >
+          <ExternalLink size={12} />
+          Open Source on GitHub
+        </a>
+        <p className="text-xs text-slate-600 mt-1">
+          Powered by OllaBridge-Cloud
+        </p>
+      </div>
+    </div>
+  );
+}

components/chat/Sidebar.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import {
+  MessageSquare, BookOpen, AlertTriangle, Share2,
+  Settings, Globe, HelpCircle, Info, Smartphone,
+  ExternalLink, Github, ChevronUp, ChevronRight,
+} from 'lucide-react';
+import type { ViewType } from '../MedOSGlobalApp';
+import type { SupportedLanguage } from '@/lib/i18n';
+import { LANGUAGE_META } from '@/lib/i18n';
+
+interface SidebarProps {
+  currentView: ViewType;
+  onNavigate: (view: ViewType) => void;
+  language: SupportedLanguage;
+}
+
+const NAV_ITEMS: Array<{ id: ViewType; icon: typeof MessageSquare; label: string }> = [
+  { id: 'chat', icon: MessageSquare, label: 'Chat' },
+  { id: 'topics', icon: BookOpen, label: 'Health Topics' },
+  { id: 'emergency', icon: AlertTriangle, label: 'Emergency SOS' },
+  { id: 'share', icon: Share2, label: 'Share & Embed' },
+];
+
+export default function Sidebar({ currentView, onNavigate, language }: SidebarProps) {
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowMenu(false);
+      }
+    }
+    if (showMenu) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [showMenu]);
+
+  // Close menu on Escape
+  useEffect(() => {
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') setShowMenu(false);
+    }
+    if (showMenu) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [showMenu]);
+
+  const currentLangMeta = LANGUAGE_META[language];
+
+  return (
+    <div className="flex flex-col h-full bg-slate-100 dark:bg-slate-900 p-4 transition-colors">
+      {/* Logo */}
+      <div className="mb-6">
+        <h1 className="text-xl font-bold text-slate-800 dark:text-slate-50">
+          <span className="text-medical-primary">Med</span>OS
+        </h1>
+        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Free AI Medical Assistant</p>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1">
+        {NAV_ITEMS.map((item) => {
+          const Icon = item.icon;
+          const isActive = currentView === item.id;
+          const isEmergency = item.id === 'emergency';
+
+          return (
+            <button
+              key={item.id}
+              onClick={() => onNavigate(item.id)}
+              className={`
+                w-full flex items-center gap-3 px-3 py-2.5 rounded-lg
+                touch-target transition-all duration-200
+                ${isActive
+                  ? 'bg-blue-50 text-blue-700 dark:bg-slate-700/60 dark:text-slate-50'
+                  : 'text-slate-500 hover:bg-slate-200 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200'
+                }
+                ${isEmergency && !isActive ? 'text-red-400 hover:text-red-300' : ''}
+              `}
+            >
+              <Icon
+                size={18}
+                className={isEmergency && !isActive ? 'text-red-400' : ''}
+              />
+              <span className="text-sm font-medium">{item.label}</span>
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* User Menu Area */}
+      <div className="relative" ref={menuRef}>
+        {/* ===== Popup Menu (Claude-style) ===== */}
+        {showMenu && (
+          <div className="absolute bottom-full left-0 right-0 mb-2 z-50">
+            <div className="bg-slate-800 border border-slate-700/60 rounded-2xl shadow-2xl
+                            overflow-hidden animate-slide-up w-full min-w-[240px]">
+
+              {/* Group 1: Core actions */}
+              <div className="p-1.5">
+                <MenuButton
+                  icon={<Settings size={16} />}
+                  label="Settings"
+                  shortcut="Ctrl+,"
+                  onClick={() => { onNavigate('settings'); setShowMenu(false); }}
+                />
+                <MenuButton
+                  icon={<Globe size={16} />}
+                  label="Language"
+                  trailing={
+                    <span className="flex items-center gap-1 text-xs text-slate-500">
+                      {currentLangMeta?.flag} {currentLangMeta?.nativeName}
+                      <ChevronRight size={12} />
+                    </span>
+                  }
+                  onClick={() => { onNavigate('language'); setShowMenu(false); }}
+                />
+                <MenuButton
+                  icon={<HelpCircle size={16} />}
+                  label="Get help"
+                  onClick={() => { onNavigate('about'); setShowMenu(false); }}
+                />
+              </div>
+
+              {/* Divider */}
+              <div className="h-px bg-slate-700/50 mx-2" />
+
+              {/* Group 2: Product */}
+              <div className="p-1.5">
+                <MenuButton
+                  icon={<Smartphone size={16} />}
+                  label="Install as App"
+                  onClick={() => {
+                    setShowMenu(false);
+                    // Trigger PWA install
+                    window.dispatchEvent(new CustomEvent('pwa-trigger-install'));
+                  }}
+                />
+                <MenuButton
+                  icon={<Share2 size={16} />}
+                  label="Share MedOS"
+                  onClick={() => { onNavigate('share'); setShowMenu(false); }}
+                />
+                <MenuButton
+                  icon={<Info size={16} />}
+                  label="About MedOS"
+                  trailing={<ChevronRight size={12} className="text-slate-600" />}
+                  onClick={() => { onNavigate('about'); setShowMenu(false); }}
+                />
+              </div>
+
+              {/* Divider */}
+              <div className="h-px bg-slate-700/50 mx-2" />
+
+              {/* Group 3: Links */}
+              <div className="p-1.5">
+                <MenuLink
+                  icon={<Github size={16} />}
+                  label="Source Code"
+                  href="https://github.com/ruslanmv/ai-medical-chatbot"
+                />
+                <MenuLink
+                  icon={<ExternalLink size={16} />}
+                  label="OllaBridge Cloud"
+                  href="https://github.com/ruslanmv/ollabridge"
+                />
+              </div>
+
+              {/* Footer */}
+              <div className="bg-slate-850 border-t border-slate-700/40 px-4 py-2.5">
+                <p className="text-[10px] text-slate-500">
+                  MedOS v1.0 &middot; Powered by OllaBridge
+                </p>
+                <p className="text-[10px] text-slate-600">
+                  Free &amp; Open Source &middot; Zero data retention
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ===== User Button (bottom of sidebar) ===== */}
+        <div className="pt-3 border-t border-slate-700/50">
+          <button
+            onClick={() => setShowMenu(!showMenu)}
+            className="w-full flex items-center gap-2.5 p-2 rounded-xl
+                       hover:bg-slate-800 transition-colors group"
+          >
+            {/* Avatar */}
+            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-medical-primary to-medical-secondary
+                            flex items-center justify-center flex-shrink-0 ring-2 ring-slate-700/50">
+              <span className="text-sm font-bold text-white">G</span>
+            </div>
+
+            {/* Name & plan */}
+            <div className="flex-1 text-left min-w-0">
+              <p className="text-sm font-medium text-slate-200 truncate">Guest User</p>
+              <p className="text-[11px] text-slate-500">Free plan</p>
+            </div>
+
+            {/* Chevron */}
+            <ChevronUp
+              size={16}
+              className={`text-slate-500 transition-transform duration-200
+                         ${showMenu ? '' : 'rotate-180'}`}
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ===== Reusable Menu Button ===== */
+function MenuButton({
+  icon,
+  label,
+  shortcut,
+  trailing,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  shortcut?: string;
+  trailing?: React.ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300
+                 hover:bg-slate-700/60 transition-colors text-left group"
+    >
+      <span className="text-slate-400 group-hover:text-slate-300 transition-colors">
+        {icon}
+      </span>
+      <span className="flex-1 text-sm">{label}</span>
+      {shortcut && (
+        <kbd className="text-[10px] text-slate-600 bg-slate-750 px-1.5 py-0.5 rounded
+                        border border-slate-700/50 font-mono">{shortcut}</kbd>
+      )}
+      {trailing}
+    </button>
+  );
+}
+
+/* ===== Reusable Menu Link (opens in new tab) ===== */
+function MenuLink({
+  icon,
+  label,
+  href,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  href: string;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300
+                 hover:bg-slate-700/60 transition-colors group"
+    >
+      <span className="text-slate-400 group-hover:text-slate-300 transition-colors">
+        {icon}
+      </span>
+      <span className="flex-1 text-sm">{label}</span>
+      <ExternalLink size={12} className="text-slate-600" />
+    </a>
+  );
+}

components/chat/TrustBar.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { ShieldCheck, Globe2, Clock4 } from 'lucide-react';
+
+/**
+ * Compact trust strip shown below the hero headline on the empty chat
+ * state and on symptom landing pages. Three icons, three short phrases,
+ * one color: muted teal. Communicates clinical credibility without
+ * looking salesy.
+ */
+export default function TrustBar() {
+  const items = [
+    { Icon: ShieldCheck, text: 'Aligned with WHO · CDC · NHS' },
+    { Icon: Globe2,      text: 'Private & anonymous' },
+    { Icon: Clock4,      text: 'Available 24/7' },
+  ];
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs text-slate-400">
+      {items.map(({ Icon, text }) => (
+        <span key={text} className="inline-flex items-center gap-1.5 font-medium">
+          <Icon size={13} className="text-teal-400" />
+          {text}
+        </span>
+      ))}
+    </div>
+  );
+}

components/chat/TypingIndicator.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+export default function TypingIndicator() {
+  return (
+    <div className="flex justify-start animate-fade-in">
+      <div className="bg-slate-800 border border-slate-700/50 rounded-2xl px-4 py-3">
+        <div className="flex items-center gap-1.5">
+          <div className="typing-dot" />
+          <div className="typing-dot" />
+          <div className="typing-dot" />
+        </div>
+      </div>
+    </div>
+  );
+}

components/chat/VoiceInput.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Mic, MicOff } from 'lucide-react';
+import { hapticFeedback } from '@/lib/mobile/touch';
+
+interface VoiceInputProps {
+  onTranscript: (text: string) => void;
+  language: string;
+}
+
+function getSpeechRecognitionClass(): SpeechRecognitionConstructor | null {
+  if (typeof window === 'undefined') return null;
+  return window.SpeechRecognition || window.webkitSpeechRecognition || null;
+}
+
+export default function VoiceInput({ onTranscript, language }: VoiceInputProps) {
+  const [isListening, setIsListening] = useState(false);
+  const [isSupported, setIsSupported] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const recognitionRef = useRef<any>(null);
+
+  // Check support only on client after mount
+  useEffect(() => {
+    setIsSupported(!!getSpeechRecognitionClass());
+  }, []);
+
+  const toggleListening = useCallback(() => {
+    const SpeechRecognitionCtor = getSpeechRecognitionClass();
+    if (!SpeechRecognitionCtor) return;
+
+    if (isListening && recognitionRef.current) {
+      recognitionRef.current.stop();
+      setIsListening(false);
+      return;
+    }
+
+    hapticFeedback('medium');
+
+    const recognition = new SpeechRecognitionCtor();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = getRecognitionLang(language);
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      const transcript = event.results[0][0].transcript;
+      if (transcript.trim()) {
+        onTranscript(transcript.trim());
+      }
+    };
+
+    recognition.onend = () => setIsListening(false);
+    recognition.onerror = () => setIsListening(false);
+
+    recognitionRef.current = recognition;
+    recognition.start();
+    setIsListening(true);
+  }, [isListening, language, onTranscript]);
+
+  // Render nothing until we know if supported (avoids hydration mismatch)
+  if (!isSupported) return null;
+
+  return (
+    <button
+      onClick={toggleListening}
+      className={`
+        touch-target rounded-full p-2.5 transition-all duration-200
+        ${isListening
+          ? 'bg-red-500 text-white voice-recording'
+          : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
+        }
+      `}
+      aria-label={isListening ? 'Stop recording' : 'Start voice input'}
+    >
+      {isListening ? <MicOff size={20} /> : <Mic size={20} />}
+    </button>
+  );
+}
+
+function getRecognitionLang(lang: string): string {
+  const langMap: Record<string, string> = {
+    en: 'en-US', es: 'es-ES', zh: 'zh-CN', hi: 'hi-IN', ar: 'ar-SA',
+    pt: 'pt-BR', bn: 'bn-BD', fr: 'fr-FR', ru: 'ru-RU', ja: 'ja-JP',
+    de: 'de-DE', ko: 'ko-KR', tr: 'tr-TR', vi: 'vi-VN', it: 'it-IT',
+    th: 'th-TH', id: 'id-ID', sw: 'sw-KE', tl: 'tl-PH', uk: 'uk-UA',
+  };
+  return langMap[lang] || 'en-US';
+}

components/mobile/BottomNav.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { MessageSquare, BookOpen, AlertTriangle, Settings, Share2 } from 'lucide-react';
+import type { ViewType } from '../MedOSGlobalApp';
+import type { SupportedLanguage } from '@/lib/i18n';
+import { hapticFeedback } from '@/lib/mobile/touch';
+
+interface BottomNavProps {
+  currentView: ViewType;
+  onNavigate: (view: ViewType) => void;
+  language: SupportedLanguage;
+}
+
+const NAV_ITEMS: Array<{
+  id: ViewType;
+  icon: typeof MessageSquare;
+  label: string;
+}> = [
+  { id: 'chat', icon: MessageSquare, label: 'Chat' },
+  { id: 'topics', icon: BookOpen, label: 'Topics' },
+  { id: 'emergency', icon: AlertTriangle, label: 'SOS' },
+  { id: 'share', icon: Share2, label: 'Share' },
+  { id: 'settings', icon: Settings, label: 'More' },
+];
+
+export default function BottomNav({
+  currentView,
+  onNavigate,
+}: BottomNavProps) {
+  return (
+    <nav className="bottom-nav flex items-center justify-around border-t border-slate-700/50 px-2 py-1">
+      {NAV_ITEMS.map((item) => {
+        const Icon = item.icon;
+        const isActive = currentView === item.id;
+        const isEmergency = item.id === 'emergency';
+
+        return (
+          <button
+            key={item.id}
+            onClick={() => {
+              hapticFeedback('light');
+              onNavigate(item.id);
+            }}
+            className={`
+              flex flex-col items-center justify-center gap-0.5
+              touch-target px-3 py-1.5 rounded-lg transition-all duration-200
+              ${isActive
+                ? 'text-medical-primary'
+                : isEmergency
+                  ? 'text-red-400'
+                  : 'text-slate-500'
+              }
+            `}
+          >
+            <Icon
+              size={20}
+              className={isActive ? 'text-medical-primary' : ''}
+            />
+            <span className="text-[10px] font-medium">{item.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

components/mobile/InstallPrompt.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Download, X } from 'lucide-react';
+import { canInstallPWA, installPWA, isPWAInstalled } from '@/lib/mobile/pwa';
+
+export default function InstallPrompt() {
+  const [showPrompt, setShowPrompt] = useState(false);
+
+  useEffect(() => {
+    if (isPWAInstalled()) return;
+
+    const handleInstallable = () => setShowPrompt(true);
+    window.addEventListener('pwa-installable', handleInstallable);
+
+    // Check if already installable
+    if (canInstallPWA()) setShowPrompt(true);
+
+    return () => {
+      window.removeEventListener('pwa-installable', handleInstallable);
+    };
+  }, []);
+
+  if (!showPrompt) return null;
+
+  return (
+    <div className="fixed bottom-20 left-4 right-4 z-50 animate-slide-up md:left-auto md:right-4 md:max-w-sm">
+      <div className="bg-slate-800 border border-slate-700/50 rounded-2xl p-4 shadow-xl">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-xl bg-medical-primary/20 flex items-center justify-center flex-shrink-0">
+            <Download size={20} className="text-medical-primary" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-sm font-semibold text-slate-200">
+              Install MedOS
+            </h3>
+            <p className="text-xs text-slate-400 mt-1">
+              Add to your home screen for quick access, offline support, and a
+              native app experience.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowPrompt(false)}
+            className="touch-target p-1 text-slate-500 hover:text-slate-300"
+          >
+            <X size={16} />
+          </button>
+        </div>
+        <div className="flex gap-2 mt-3">
+          <button
+            onClick={() => setShowPrompt(false)}
+            className="flex-1 py-2 rounded-lg text-sm text-slate-400
+                       hover:text-slate-300 transition-colors"
+          >
+            Not now
+          </button>
+          <button
+            onClick={async () => {
+              await installPWA();
+              setShowPrompt(false);
+            }}
+            className="flex-1 py-2 rounded-lg bg-medical-primary text-white text-sm
+                       font-semibold hover:bg-blue-500 transition-colors"
+          >
+            Install
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/DisclaimerBanner.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { AlertTriangle } from 'lucide-react';
+import { getDisclaimer } from '@/lib/safety/disclaimer';
+import type { SupportedLanguage } from '@/lib/i18n';
+
+interface DisclaimerBannerProps {
+  language: SupportedLanguage;
+}
+
+export default function DisclaimerBanner({ language }: DisclaimerBannerProps) {
+  const disclaimer = getDisclaimer(language);
+
+  return (
+    <div className="flex-shrink-0 px-4 py-2 bg-slate-800/50 border-t border-slate-700/30">
+      <div className="flex items-start gap-2">
+        <AlertTriangle
+          size={12}
+          className="text-amber-500/70 mt-0.5 flex-shrink-0"
+        />
+        <p className="text-[10px] text-slate-500 leading-relaxed">
+          {disclaimer}
+        </p>
+      </div>
+    </div>
+  );
+}

components/ui/InstallPrompt.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Download, X } from 'lucide-react';
+
+/**
+ * Custom PWA install prompt banner.
+ *
+ * - Captures the standard `beforeinstallprompt` event (Chromium/Edge/
+ *   Samsung) and defers it so we can surface a friendlier custom banner.
+ * - Shows AFTER a short delay so it doesn't interrupt the very first
+ *   interaction — users install apps they already like.
+ * - Dismissal is persisted in localStorage so we never nag.
+ * - Re-appears automatically if the user uninstalls and comes back (the
+ *   browser will fire `beforeinstallprompt` again).
+ * - Gracefully absent on iOS Safari (which has no install event) — iOS
+ *   users get an Add-to-Home-Screen hint via the manifest anyway.
+ */
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+const DISMISS_KEY = 'medos_install_dismissed';
+const DELAY_MS = 8000;
+
+export default function InstallPrompt() {
+  const [evt, setEvt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (localStorage.getItem(DISMISS_KEY) === '1') return;
+
+    // Already installed? Nothing to do.
+    if (window.matchMedia?.('(display-mode: standalone)').matches) return;
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setEvt(e as BeforeInstallPromptEvent);
+      // Delay the reveal so it never interrupts the first answer.
+      setTimeout(() => setVisible(true), DELAY_MS);
+    };
+    window.addEventListener('beforeinstallprompt', handler as EventListener);
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handler as EventListener);
+    };
+  }, []);
+
+  const install = async () => {
+    if (!evt) return;
+    try {
+      await evt.prompt();
+      const choice = await evt.userChoice;
+      if (choice.outcome === 'accepted') {
+        localStorage.setItem(DISMISS_KEY, '1');
+      }
+    } catch {
+      // User cancelled or unsupported — just hide the banner.
+    } finally {
+      setVisible(false);
+      setEvt(null);
+    }
+  };
+
+  const dismiss = () => {
+    localStorage.setItem(DISMISS_KEY, '1');
+    setVisible(false);
+    setEvt(null);
+  };
+
+  if (!visible || !evt) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Install MedOS on your device"
+      className="fixed left-1/2 -translate-x-1/2 bottom-4 z-50 w-[calc(100%-2rem)] max-w-sm
+                 rounded-2xl border border-slate-700/60 bg-slate-900/95 backdrop-blur-xl
+                 shadow-2xl shadow-blue-500/10 animate-fade-in"
+    >
+      <div className="flex items-start gap-3 p-4">
+        <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-teal-500 flex items-center justify-center shadow-lg shadow-blue-500/30">
+          <Download size={18} className="text-white" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-bold text-slate-100">
+            Install MedOS on your phone
+          </p>
+          <p className="text-xs text-slate-400 mt-0.5 leading-relaxed">
+            Add to your home screen for instant access. Free, private, offline-ready.
+          </p>
+          <div className="flex items-center gap-2 mt-3">
+            <button
+              type="button"
+              onClick={install}
+              className="px-3 py-1.5 rounded-lg bg-gradient-to-br from-blue-500 to-teal-500 text-white text-xs font-bold hover:brightness-110 transition-all"
+            >
+              Install
+            </button>
+            <button
+              type="button"
+              onClick={dismiss}
+              className="px-3 py-1.5 rounded-lg text-slate-400 hover:text-slate-200 text-xs font-semibold transition-colors"
+            >
+              Not now
+            </button>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={dismiss}
+          aria-label="Dismiss"
+          className="flex-shrink-0 text-slate-500 hover:text-slate-300 transition-colors"
+        >
+          <X size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}

components/ui/OfflineBanner.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { WifiOff } from 'lucide-react';
+import type { SupportedLanguage } from '@/lib/i18n';
+
+interface OfflineBannerProps {
+  language: SupportedLanguage;
+}
+
+const OFFLINE_MESSAGES: Record<string, string> = {
+  en: "You're offline. Showing cached answers.",
+  es: 'Estás sin conexión. Mostrando respuestas guardadas.',
+  zh: '您已离线。正在显示缓存的回答。',
+  hi: 'आप ऑफलाइन हैं। सहेजे गए उत्तर दिखा रहे हैं।',
+  ar: 'أنت غير متصل. عرض الإجابات المحفوظة.',
+  pt: 'Você está offline. Mostrando respostas salvas.',
+  fr: 'Vous êtes hors ligne. Affichage des réponses en cache.',
+  ru: 'Вы офлайн. Показаны сохранённые ответы.',
+  ja: 'オフラインです。保存された回答を表示しています。',
+  de: 'Sie sind offline. Gespeicherte Antworten werden angezeigt.',
+};
+
+export default function OfflineBanner({ language }: OfflineBannerProps) {
+  const message =
+    OFFLINE_MESSAGES[language] || OFFLINE_MESSAGES.en;
+
+  return (
+    <div className="flex items-center justify-center gap-2 px-4 py-2 bg-amber-900/30 border-b border-amber-700/30">
+      <WifiOff size={14} className="text-amber-400" />
+      <p className="text-xs text-amber-300">{message}</p>
+    </div>
+  );
+}

components/ui/ShareButtons.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface ShareButtonsProps {
+  url: string;
+  language: string;
+}
+
+const SHARE_MESSAGE =
+  'I just got free AI medical advice! Try MediBot - free, works in 20 languages, no sign-up needed:';
+
+export default function ShareButtons({ url }: ShareButtonsProps) {
+  const [canShare, setCanShare] = useState(false);
+
+  useEffect(() => {
+    setCanShare(typeof navigator !== 'undefined' && 'share' in navigator);
+  }, []);
+
+  const encodedUrl = encodeURIComponent(url);
+  const encodedMessage = encodeURIComponent(`${SHARE_MESSAGE} ${url}`);
+
+  const platforms = [
+    { name: 'WhatsApp', href: `https://wa.me/?text=${encodedMessage}`, color: 'bg-green-600 hover:bg-green-500', label: 'WA' },
+    { name: 'Telegram', href: `https://t.me/share/url?url=${encodedUrl}&text=${encodeURIComponent(SHARE_MESSAGE)}`, color: 'bg-blue-500 hover:bg-blue-400', label: 'TG' },
+    { name: 'Twitter', href: `https://twitter.com/intent/tweet?text=${encodedMessage}`, color: 'bg-slate-700 hover:bg-slate-600', label: 'X' },
+    { name: 'Facebook', href: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, color: 'bg-blue-700 hover:bg-blue-600', label: 'FB' },
+    { name: 'LinkedIn', href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`, color: 'bg-blue-800 hover:bg-blue-700', label: 'LI' },
+  ];
+
+  const handleNativeShare = async () => {
+    if (typeof navigator !== 'undefined' && navigator.share) {
+      try {
+        await navigator.share({ title: 'MediBot - Free AI Medical Assistant', text: SHARE_MESSAGE, url });
+      } catch { /* user cancelled */ }
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {canShare && (
+        <button onClick={handleNativeShare}
+          className="w-full py-3 rounded-xl bg-medical-primary hover:bg-blue-500
+                     text-white text-sm font-semibold transition-colors touch-target">
+          Share via...
+        </button>
+      )}
+      <div className="grid grid-cols-5 gap-2">
+        {platforms.map((p) => (
+          <a key={p.name} href={p.href} target="_blank" rel="noopener noreferrer"
+            className={`flex flex-col items-center justify-center gap-1 py-3 rounded-xl ${p.color} text-white transition-colors touch-target`}>
+            <span className="text-sm font-bold">{p.label}</span>
+            <span className="text-[9px] opacity-80">{p.name}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

components/ui/ThemeToggle.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Sun, Moon, Monitor } from 'lucide-react';
+import type { ThemeMode } from '@/lib/hooks/useTheme';
+
+interface ThemeToggleProps {
+  theme: ThemeMode;
+  setTheme: (t: ThemeMode) => void;
+}
+
+const OPTIONS: { id: ThemeMode; Icon: typeof Sun }[] = [
+  { id: 'light',  Icon: Sun },
+  { id: 'dark',   Icon: Moon },
+  { id: 'system', Icon: Monitor },
+];
+
+export default function ThemeToggle({ theme, setTheme }: ThemeToggleProps) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Theme"
+      className="inline-flex items-center gap-0.5 rounded-full p-0.5 bg-slate-200/70 dark:bg-slate-800/70 border border-slate-300/60 dark:border-slate-700/60"
+    >
+      {OPTIONS.map(({ id, Icon }) => {
+        const active = theme === id;
+        return (
+          <button
+            key={id}
+            role="radio"
+            aria-checked={active}
+            onClick={() => setTheme(id)}
+            className={`flex items-center justify-center h-7 w-7 rounded-full transition-all ${
+              active
+                ? 'bg-white dark:bg-slate-700 text-medical-primary shadow-sm'
+                : 'text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300'
+            }`}
+          >
+            <Icon size={14} strokeWidth={2.25} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

components/views/AboutView.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ExternalLink, Heart, Shield, Globe, Zap, Smartphone } from 'lucide-react';
+import { fetchCount } from '@/lib/analytics/anonymous-tracker';
+
+export default function AboutView() {
+  const [helpedCount, setHelpedCount] = useState(0);
+
+  useEffect(() => {
+    fetchCount().then(setHelpedCount);
+  }, []);
+
+  return (
+    <div className="flex-1 overflow-y-auto scroll-smooth">
+      {/* Header */}
+      <div className="px-4 py-6 text-center border-b border-slate-700/50">
+        <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-medical-primary to-medical-secondary flex items-center justify-center mx-auto mb-3">
+          <span className="text-3xl">&#x1F3E5;</span>
+        </div>
+        <h2 className="text-2xl font-bold text-slate-100">
+          <span className="text-medical-primary">Med</span>OS
+        </h2>
+        <p className="text-sm text-slate-400 mt-1">Free AI Medical Assistant</p>
+        <p className="text-xs text-slate-500 mt-1">Version 1.0.0</p>
+      </div>
+
+      <div className="p-4 space-y-6">
+        {/* Mission */}
+        <div className="text-center">
+          <p className="text-sm text-slate-300 leading-relaxed max-w-md mx-auto">
+            MedOS provides free, multilingual health information to everyone worldwide.
+            No sign-up. No cost. No data collected.
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-3">
+          <div className="text-center p-3 rounded-xl bg-slate-800/50 border border-slate-700/20">
+            <p className="text-lg font-bold text-medical-primary">{helpedCount > 0 ? helpedCount.toLocaleString() : '---'}</p>
+            <p className="text-[10px] text-slate-500">People Helped</p>
+          </div>
+          <div className="text-center p-3 rounded-xl bg-slate-800/50 border border-slate-700/20">
+            <p className="text-lg font-bold text-medical-secondary">20</p>
+            <p className="text-[10px] text-slate-500">Languages</p>
+          </div>
+          <div className="text-center p-3 rounded-xl bg-slate-800/50 border border-slate-700/20">
+            <p className="text-lg font-bold text-amber-400">190+</p>
+            <p className="text-[10px] text-slate-500">Countries</p>
+          </div>
+        </div>
+
+        {/* Features */}
+        <div>
+          <h3 className="text-sm font-semibold text-slate-300 mb-3">Features</h3>
+          <div className="space-y-2">
+            {[
+              { icon: Zap, title: 'Multi-Provider AI', desc: 'Routes to best free LLM via OllaBridge (Gemini, Groq, OpenRouter)' },
+              { icon: Globe, title: '20 Languages', desc: 'Auto-detects your language with RTL support' },
+              { icon: Shield, title: 'Emergency Triage', desc: 'Detects emergencies and shows local emergency numbers' },
+              { icon: Smartphone, title: 'Mobile PWA', desc: 'Install on your phone, works offline' },
+              { icon: Heart, title: 'Zero Data Retention', desc: 'No conversations stored. No PII collected. Ever.' },
+            ].map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div key={feature.title} className="flex items-start gap-3 p-3 rounded-xl bg-slate-800/30">
+                  <Icon size={16} className="text-medical-primary mt-0.5 flex-shrink-0" />
+                  <div>
+                    <p className="text-sm font-medium text-slate-200">{feature.title}</p>
+                    <p className="text-xs text-slate-500">{feature.desc}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Powered By */}
+        <div>
+          <h3 className="text-sm font-semibold text-slate-300 mb-3">Powered By</h3>
+          <div className="space-y-2">
+            <a href="https://github.com/ruslanmv/ollabridge" target="_blank" rel="noopener noreferrer"
+               className="flex items-center gap-3 p-3 rounded-xl bg-slate-800/50 border border-slate-700/30 hover:bg-slate-800 transition-colors">
+              <div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
+                <Zap size={16} className="text-blue-400" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-slate-200">OllaBridge-Cloud</p>
+                <p className="text-xs text-slate-500">Multi-provider LLM gateway</p>
+              </div>
+              <ExternalLink size={14} className="text-slate-500" />
+            </a>
+            <a href="https://github.com/ruslanmv/ai-medical-chatbot" target="_blank" rel="noopener noreferrer"
+               className="flex items-center gap-3 p-3 rounded-xl bg-slate-800/50 border border-slate-700/30 hover:bg-slate-800 transition-colors">
+              <div className="w-8 h-8 rounded-lg bg-green-600/20 flex items-center justify-center">
+                <Heart size={16} className="text-green-400" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-slate-200">AI Medical Chatbot</p>
+                <p className="text-xs text-slate-500">Medical RAG knowledge base</p>
+              </div>
+              <ExternalLink size={14} className="text-slate-500" />
+            </a>
+          </div>
+        </div>
+
+        {/* License */}
+        <div className="text-center pt-4 border-t border-slate-700/30">
+          <p className="text-xs text-slate-500">Apache 2.0 License</p>
+          <p className="text-xs text-slate-600 mt-1">
+            This AI provides general health information only.
+            Always consult a healthcare professional.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/views/ChatView.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { Send, Sparkles } from 'lucide-react';
+import type { ChatMessage } from '../MedOSGlobalApp';
+import type { SupportedLanguage } from '@/lib/i18n';
+import MessageBubble from '../chat/MessageBubble';
+import TypingIndicator from '../chat/TypingIndicator';
+import VoiceInput from '../chat/VoiceInput';
+import QuickChips from '../chat/QuickChips';
+import TrustBar from '../chat/TrustBar';
+import { trackSession } from '@/lib/analytics/anonymous-tracker';
+import { readPrefillQuery } from '@/lib/share';
+import { useTheme } from '@/lib/hooks/useTheme';
+import ThemeToggle from '../ui/ThemeToggle';
+import { suggestFollowUps } from '@/lib/follow-ups';
+import { HERO_VARIANTS, pickVariant } from '@/lib/ab-variant';
+
+interface ChatViewProps {
+  messages: ChatMessage[];
+  isLoading: boolean;
+  language: SupportedLanguage;
+  onSendMessage: (message: string) => void;
+}
+
+const DEFAULT_TOPICS = [
+  'Headache',
+  'Fever',
+  'Cough',
+  'Diabetes',
+  'Blood Pressure',
+  'Pregnancy',
+  'Mental Health',
+  'Child Health',
+];
+
+// Rotating empathetic placeholders — one of the single biggest virality
+// levers for a medical chatbot. Users see an example of exactly how to
+// phrase their concern.
+const ROTATING_PLACEHOLDERS = [
+  'I have chest pain since this morning…',
+  'My child has a fever of 39 °C…',
+  'I\'ve had a headache for three days…',
+  'Is this medication safe with pregnancy?',
+  'I feel anxious and can\'t sleep…',
+];
+
+export default function ChatView({
+  messages,
+  isLoading,
+  language,
+  onSendMessage,
+}: ChatViewProps) {
+  const { theme, setTheme } = useTheme();
+  const [input, setInput] = useState('');
+  const [rotIdx, setRotIdx] = useState(0);
+  // Deterministic A/B variant — picked once per visitor and persisted.
+  // Default to 0 for SSR; effect hydrates the real selection on mount.
+  const [variant, setVariant] = useState(0);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const prefillHandled = useRef(false);
+
+  // Auto-scroll on new messages.
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Rotate the placeholder every 3.2 s while the input is empty.
+  useEffect(() => {
+    if (input) return;
+    const id = setInterval(
+      () => setRotIdx((i) => (i + 1) % ROTATING_PLACEHOLDERS.length),
+      3200,
+    );
+    return () => clearInterval(id);
+  }, [input]);
+
+  // Pick the A/B hero variant once on mount.
+  useEffect(() => {
+    setVariant(pickVariant(HERO_VARIANTS.length));
+  }, []);
+
+  // Viral entry point: `?q=` in the URL pre-fills the input and auto-sends
+  // once, so a shared link becomes an instant conversation starter.
+  useEffect(() => {
+    if (prefillHandled.current) return;
+    const q = readPrefillQuery();
+    if (q) {
+      prefillHandled.current = true;
+      const url = new URL(window.location.href);
+      url.searchParams.delete('q');
+      window.history.replaceState({}, '', url.toString());
+      trackSession();
+      onSendMessage(q);
+    }
+  }, [onSendMessage]);
+
+  const handleSend = () => {
+    if (!input.trim() || isLoading) return;
+    trackSession();
+    onSendMessage(input);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleVoiceTranscript = (text: string) => {
+    trackSession();
+    onSendMessage(text);
+  };
+
+  const handleQuickTopic = (topic: string) => {
+    trackSession();
+    onSendMessage(topic);
+  };
+
+  // Look up the user question that triggered each assistant message, so
+  // the assistant bubble's Share button can build a clean deep link.
+  const sourceQuestionFor = (index: number): string | undefined => {
+    for (let i = index - 1; i >= 0; i--) {
+      if (messages[i].role === 'user') return messages[i].content;
+    }
+    return undefined;
+  };
+
+  // Show CONTEXTUAL follow-up chips derived from the latest AI answer.
+  // `suggestFollowUps` scans medical keywords and picks topical prompts,
+  // falling back to universal defaults when nothing matches.
+  const lastMessage = messages[messages.length - 1];
+  const showFollowUps =
+    !isLoading &&
+    messages.length > 0 &&
+    lastMessage?.role === 'assistant' &&
+    lastMessage.content.length > 40;
+  const followUps = useMemo(
+    () =>
+      showFollowUps && lastMessage
+        ? suggestFollowUps(lastMessage.content, 4)
+        : [],
+    [showFollowUps, lastMessage],
+  );
+
+  const hero = HERO_VARIANTS[variant] ?? HERO_VARIANTS[0];
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* Mobile Header */}
+      <div className="mobile-header-compact flex items-center justify-between px-4 py-3 border-b border-slate-200 dark:border-slate-700/50">
+        <h1 className="text-lg font-bold text-slate-800 dark:text-slate-50">
+          <span className="text-medical-primary">Med</span>OS
+        </h1>
+        <div className="flex items-center gap-2">
+          <ThemeToggle theme={theme} setTheme={setTheme} />
+          <span className="text-xs text-slate-500">Free</span>
+        </div>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 overflow-y-auto scroll-smooth px-4 py-4 space-y-4">
+        {messages.length === 0 && (
+          <div className="flex flex-col items-center justify-center h-full text-center animate-fade-in">
+            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-teal-500 flex items-center justify-center mb-4 shadow-lg shadow-blue-500/30">
+              <span className="text-3xl">&#x1F3E5;</span>
+            </div>
+            <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-teal-400 mb-2">
+              {hero.eyebrow}
+            </p>
+            <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2 tracking-tight max-w-md">
+              {hero.title}
+            </h2>
+            <p className="text-sm text-slate-500 dark:text-slate-400 mb-5 max-w-md leading-relaxed">
+              {hero.subtitle}
+            </p>
+            <div className="mb-6">
+              <TrustBar />
+            </div>
+            <QuickChips topics={DEFAULT_TOPICS} onSelect={handleQuickTopic} />
+          </div>
+        )}
+
+        {messages.map((msg, i) => (
+          <MessageBubble
+            key={msg.id}
+            message={msg}
+            sourceQuestion={msg.role === 'assistant' ? sourceQuestionFor(i) : undefined}
+            language={language}
+          />
+        ))}
+
+        {isLoading && messages[messages.length - 1]?.content === '' && (
+          <TypingIndicator />
+        )}
+
+        {/* Contextual follow-up suggestion chips */}
+        {showFollowUps && followUps.length > 0 && (
+          <div className="flex flex-wrap items-center gap-2 pl-1 pt-2 animate-fade-in">
+            <span className="inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-teal-400">
+              <Sparkles size={11} />
+              Follow up
+            </span>
+            {followUps.map((f) => (
+              <button
+                key={f.id}
+                type="button"
+                onClick={() => {
+                  trackSession();
+                  onSendMessage(f.prompt);
+                }}
+                className="px-3 py-1.5 rounded-full bg-slate-800/80 border border-slate-700/60 text-xs font-medium text-slate-300 hover:text-teal-200 hover:border-teal-500/50 hover:bg-teal-500/10 transition-all"
+              >
+                {f.prompt}
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input Area */}
+      <div className="flex-shrink-0 border-t border-slate-200 dark:border-slate-700/50 bg-white/95 dark:bg-slate-900/95 px-4 py-3 transition-colors">
+        <div className="flex items-center gap-2 chat-input-area">
+          <div className="flex-1 relative">
+            <input
+              ref={inputRef}
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={ROTATING_PLACEHOLDERS[rotIdx]}
+              className="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700/50 rounded-xl
+                         px-4 py-3 text-sm text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500
+                         focus:outline-none focus:ring-2 focus:ring-medical-primary/50
+                         focus:border-medical-primary/50 transition-all"
+              disabled={isLoading}
+            />
+          </div>
+
+          <VoiceInput onTranscript={handleVoiceTranscript} language={language} />
+
+          <button
+            onClick={handleSend}
+            disabled={!input.trim() || isLoading}
+            className="touch-target rounded-xl p-2.5 bg-gradient-to-br from-blue-500 to-teal-500 text-white
+                       hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed
+                       transition-all duration-200 active:scale-95 shadow-lg shadow-blue-500/20"
+            aria-label="Send message"
+          >
+            <Send size={20} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}