Spaces:

thors1
/

deepsite-project-etach

Running

App Files Files Community

thors1 commited on Apr 12

Commit

49bb569

verified ·

1 Parent(s): ee6c7ff

Initial DeepSite commit

Browse files

Files changed (2) hide show

README.md +9 -6
index.html +1222 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project Etach
-emoji: 💻
-colorFrom: purple
-colorTo: red
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: gray
+colorTo: green
 sdk: static
+emoji: 🚧
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,1222 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Verify MC — AI Patient Intake</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'vm-bg': '#F8FAFC',
+                        'vm-card': '#FFFFFF',
+                        'vm-border': '#E5E7EB',
+                        'vm-text': '#0F172A',
+                        'vm-muted': '#64748B',
+                        'vm-teal': '#0C8F8B',
+                        'vm-teal-hover': '#0A7F7B',
+                        'vm-success': '#10B981',
+                        'vm-warning': '#F59E0B',
+                        'vm-risk': '#EF4444',
+                        'vm-success-bg': '#F0FDF4',
+                        'vm-warning-bg': '#FFFBEB',
+                        'vm-risk-bg': '#FEF2F2',
+                    },
+                    fontFamily: {
+                        'inter': ['Inter', 'sans-serif'],
+                    },
+                    maxWidth: {
+                        'vm': '1360px',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        * { font-family: 'Inter', sans-serif; }
+        body { background: #F8FAFC; color: #0F172A; }
+        /* Scrollbar */
+        .custom-scroll::-webkit-scrollbar { width: 4px; }
+        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
+        .custom-scroll::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }
+        .custom-scroll::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }
+        /* Field highlight animation */
+        @keyframes fieldHighlight {
+            0% { background-color: rgba(12, 143, 139, 0.08); }
+            100% { background-color: transparent; }
+        }
+        .field-highlight {
+            animation: fieldHighlight 2s ease-out forwards;
+        }
+        /* Typing indicator */
+        @keyframes typingDot {
+            0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+            30% { opacity: 1; transform: translateY(-3px); }
+        }
+        .typing-dot:nth-child(1) { animation: typingDot 1.4s infinite 0s; }
+        .typing-dot:nth-child(2) { animation: typingDot 1.4s infinite 0.2s; }
+        .typing-dot:nth-child(3) { animation: typingDot 1.4s infinite 0.4s; }
+        /* Fade in */
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
+        /* Stream text */
+        @keyframes pulseSoft {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+        .pulse-soft { animation: pulseSoft 1.5s ease-in-out infinite; }
+        /* Toast */
+        @keyframes toastIn {
+            from { opacity: 0; transform: translateY(-12px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes toastOut {
+            from { opacity: 1; transform: translateY(0); }
+            to { opacity: 0; transform: translateY(-12px); }
+        }
+        .toast-in { animation: toastIn 0.3s ease-out forwards; }
+        .toast-out { animation: toastOut 0.3s ease-in forwards; }
+        /* Inline edit transition */
+        .field-row { transition: background-color 0.2s ease; }
+        .field-row:hover { background-color: #F8FAFC; }
+        /* Mode toggle */
+        .mode-btn { transition: all 0.2s ease; }
+        .mode-btn.active {
+            background: #0C8F8B;
+            color: white;
+        }
+        /* Mobile tab */
+        .mobile-tab.active {
+            color: #0C8F8B;
+            border-bottom: 2px solid #0C8F8B;
+        }
+        /* Card */
+        .vm-card {
+            background: #FFFFFF;
+            border: 1px solid #E5E7EB;
+            border-radius: 8px;
+        }
+        textarea:focus, input:focus { outline: none; }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed top-16 right-4 z-50 flex flex-col gap-2"></div>
+    <!-- Header -->
+    <header class="sticky top-0 z-40 bg-white border-b border-vm-border" style="height: 52px;">
+        <div class="max-w-vm mx-auto h-full px-6 flex items-center justify-between">
+            <!-- Left: Logo -->
+            <div class="flex items-center gap-2">
+                <div class="w-7 h-7 rounded-md bg-vm-teal flex items-center justify-center">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M8 1L14 4.5V11.5L8 15L2 11.5V4.5L8 1Z" fill="white" stroke="white" stroke-width="0.5"/>
+                    </svg>
+                </div>
+                <span class="text-[15px] font-semibold text-vm-text tracking-tight">Verify MC</span>
+            </div>
+            <!-- Right: Actions -->
+            <div class="flex items-center gap-5">
+                <button onclick="saveDraft()" class="text-[13px] font-medium text-vm-muted hover:text-vm-text transition-colors">Save Draft</button>
+                <button onclick="switchToManual()" class="text-[13px] font-medium text-vm-muted hover:text-vm-text transition-colors">Switch to Manual</button>
+            </div>
+        </div>
+    </header>
+    <!-- Mobile Tab Bar -->
+    <div class="lg:hidden flex border-b border-vm-border bg-white">
+        <button onclick="showMobileTab('ai')" id="mobile-tab-ai" class="mobile-tab active flex-1 py-3 text-[13px] font-medium text-center">AI Intake</button>
+        <button onclick="showMobileTab('record')" id="mobile-tab-record" class="mobile-tab flex-1 py-3 text-[13px] font-medium text-vm-muted text-center">Patient Record</button>
+    </div>
+    <!-- Main Content -->
+    <main class="max-w-vm mx-auto px-6 py-6">
+        <!-- Page Title -->
+        <div class="mb-6">
+            <h1 class="text-[22px] font-semibold text-vm-text leading-tight">Add Patient</h1>
+            <p class="text-[14px] text-vm-muted mt-1">Guided by intelligent assistant</p>
+        </div>
+        <!-- Two Column Layout -->
+        <div class="flex gap-8" style="min-height: calc(100vh - 180px);">
+            <!-- LEFT COLUMN (65%) -->
+            <div id="left-column" class="w-full lg:w-[65%] flex flex-col min-h-0">
+                <!-- Mode Toggle -->
+                <div class="flex items-center gap-1 p-1 bg-vm-bg rounded-lg mb-6 self-start">
+                    <button onclick="setMode('oneshot')" id="mode-oneshot" class="mode-btn active px-4 py-1.5 rounded-md text-[13px] font-medium">One-shot</button>
+                    <button onclick="setMode('guided')" id="mode-guided" class="mode-btn px-4 py-1.5 rounded-md text-[13px] font-medium text-vm-muted">Guided AI Intake</button>
+                </div>
+                <!-- One-shot Input Card -->
+                <div id="oneshot-card" class="vm-card p-6 mb-6">
+                    <label class="text-[14px] font-medium text-vm-text block mb-2">Add instantly with one sentence</label>
+                    <textarea id="oneshot-input" rows="3"
+                        class="w-full border border-vm-border rounded-lg px-4 py-3 text-[14px] text-vm-text placeholder-vm-muted/60 resize-none focus:border-vm-teal focus:ring-1 focus:ring-vm-teal/20 transition-all"
+                        placeholder="e.g. Sarah Johnson, DOB 03/15/1985, 555-123-4567"></textarea>
+                    <div class="flex items-center justify-between mt-3">
+                        <button onclick="handleOneShot()" id="generate-btn"
+                            class="bg-vm-teal hover:bg-vm-teal-hover text-white text-[13px] font-medium px-5 py-2 rounded-lg transition-colors flex items-center gap-2">
+                            <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
+                            Generate Patient Record
+                        </button>
+                        <span class="text-[12px] text-vm-muted">Type one answer or everything — I'll handle it.</span>
+                    </div>
+                    <!-- Smart Suggestion -->
+                    <div class="mt-4 pt-4 border-t border-vm-border/60">
+                        <span class="text-[12px] text-vm-muted font-medium">Try this</span>
+                        <button onclick="fillSuggestion()" id="suggestion-btn"
+                            class="block mt-1.5 text-[13px] text-vm-teal hover:text-vm-teal-hover text-left transition-colors leading-relaxed">
+                            Sarah Johnson, DOB 03/15/1985, 555-123-4567
+                        </button>
+                    </div>
+                </div>
+                <!-- One-shot Processed Summary (hidden by default) -->
+                <div id="oneshot-processed" class="vm-card p-4 mb-6 hidden">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center gap-2">
+                            <div class="w-5 h-5 rounded-full bg-vm-success/10 flex items-center justify-center">
+                                <i data-lucide="check" class="w-3 h-3 text-vm-success"></i>
+                            </div>
+                            <span id="processed-text" class="text-[13px] text-vm-text font-medium"></span>
+                        </div>
+                        <button onclick="resetOneShot()" class="text-[12px] text-vm-muted hover:text-vm-teal transition-colors">Edit</button>
+                    </div>
+                </div>
+                <!-- AI Canvas Card -->
+                <div id="ai-canvas" class="vm-card flex-1 min-h-0 flex flex-col mb-0 overflow-hidden">
+                    <div class="px-6 py-4 border-b border-vm-border/60 flex items-center gap-2">
+                        <div class="w-5 h-5 rounded-full bg-vm-teal/10 flex items-center justify-center">
+                            <i data-lucide="bot" class="w-3 h-3 text-vm-teal"></i>
+                        </div>
+                        <span class="text-[13px] font-medium text-vm-text">AI Assistant</span>
+                        <span id="ai-status" class="text-[12px] text-vm-muted ml-auto hidden">Thinking...</span>
+                    </div>
+                    <div id="conversation-area" class="flex-1 overflow-y-auto custom-scroll px-6 py-4 space-y-4" style="max-height: calc(100vh - 460px); min-height: 200px;">
+                        <!-- Welcome message -->
+                        <div class="fade-in-up">
+                            <div class="flex items-start gap-3">
+                                <div class="w-6 h-6 rounded-full bg-vm-teal/10 flex items-center justify-center shrink-0 mt-0.5">
+                                    <i data-lucide="bot" class="w-3 h-3 text-vm-teal"></i>
+                                </div>
+                                <div class="bg-vm-bg rounded-lg rounded-tl-none px-4 py-3 max-w-[85%]">
+                                    <p class="text-[14px] text-vm-text leading-relaxed">Welcome! I'll help you register a new patient. Enter the details above or switch to guided mode, and I'll walk you through step by step.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Left Column Sticky Footer - Chat Input -->
+                <div class="shrink-0 pt-4">
+                    <div class="vm-card p-4">
+                        <div class="flex items-center gap-3">
+                            <input type="text" id="chat-input"
+                                class="flex-1 border border-vm-border rounded-lg px-4 py-2.5 text-[14px] text-vm-text placeholder-vm-muted/60 focus:border-vm-teal focus:ring-1 focus:ring-vm-teal/20 transition-all"
+                                placeholder="Type your response..."
+                                onkeydown="if(event.key==='Enter')handleChatSend()">
+                            <button onclick="handleChatSend()"
+                                class="bg-vm-teal hover:bg-vm-teal-hover text-white p-2.5 rounded-lg transition-colors shrink-0">
+                                <i data-lucide="send" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- RIGHT COLUMN (35%) -->
+            <div id="right-column" class="hidden lg:flex w-[35%] flex-col min-h-0">
+                <!-- Performance Indicator -->
+                <div id="perf-indicator" class="vm-card p-4 mb-6 hidden">
+                    <div class="flex items-center gap-2">
+                        <div class="w-5 h-5 rounded-full bg-vm-success/10 flex items-center justify-center">
+                            <i data-lucide="zap" class="w-3 h-3 text-vm-success"></i>
+                        </div>
+                        <span id="perf-text" class="text-[13px] font-medium text-vm-text"></span>
+                    </div>
+                </div>
+                <!-- Patient Record Card -->
+                <div class="vm-card flex-1 min-h-0 flex flex-col overflow-hidden">
+                    <div class="px-6 py-4 border-b border-vm-border/60 flex items-center justify-between">
+                        <div class="flex items-center gap-2">
+                            <i data-lucide="user-circle" class="w-4 h-4 text-vm-muted"></i>
+                            <span class="text-[14px] font-medium text-vm-text">Patient Record</span>
+                        </div>
+                        <span id="completeness-badge" class="text-[11px] font-medium text-vm-muted bg-vm-bg px-2 py-0.5 rounded-full">0% complete</span>
+                    </div>
+                    <div id="record-area" class="flex-1 overflow-y-auto custom-scroll px-6 py-4 space-y-6">
+                        <!-- Personal Information -->
+                        <div>
+                            <h3 class="text-[12px] font-medium text-vm-muted uppercase tracking-wider mb-3">Personal Information</h3>
+                            <div class="space-y-0">
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('fullName')" data-field="fullName">
+                                    <span class="text-[13px] text-vm-muted">Full Name</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-fullName">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('dob')" data-field="dob">
+                                    <span class="text-[13px] text-vm-muted">Date of Birth</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-dob">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('phone')" data-field="phone">
+                                    <span class="text-[13px] text-vm-muted">Phone</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-phone">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('email')" data-field="email">
+                                    <span class="text-[13px] text-vm-muted">Email</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-email">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('address')" data-field="address">
+                                    <span class="text-[13px] text-vm-muted">Address</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-address">—</span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Emergency Contact -->
+                        <div>
+                            <h3 class="text-[12px] font-medium text-vm-muted uppercase tracking-wider mb-3">Emergency Contact</h3>
+                            <div class="space-y-0">
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('emergencyName')" data-field="emergencyName">
+                                    <span class="text-[13px] text-vm-muted">Contact Name</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-emergencyName">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('emergencyPhone')" data-field="emergencyPhone">
+                                    <span class="text-[13px] text-vm-muted">Contact Phone</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-emergencyPhone">—</span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Insurance -->
+                        <div>
+                            <h3 class="text-[12px] font-medium text-vm-muted uppercase tracking-wider mb-3">Insurance</h3>
+                            <div class="space-y-0">
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('insuranceProvider')" data-field="insuranceProvider">
+                                    <span class="text-[13px] text-vm-muted">Provider</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-insuranceProvider">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('policyNumber')" data-field="policyNumber">
+                                    <span class="text-[13px] text-vm-muted">Policy Number</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-policyNumber">—</span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Medical Information -->
+                        <div>
+                            <h3 class="text-[12px] font-medium text-vm-muted uppercase tracking-wider mb-3">Medical Information</h3>
+                            <div class="space-y-0">
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('allergies')" data-field="allergies">
+                                    <span class="text-[13px] text-vm-muted">Allergies</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-allergies">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('medications')" data-field="medications">
+                                    <span class="text-[13px] text-vm-muted">Current Medications</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-medications">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('conditions')" data-field="conditions">
+                                    <span class="text-[13px] text-vm-muted">Medical Conditions</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-conditions">—</span>
+                                </div>
+                                <div class="field-row flex items-center justify-between py-2.5 px-2 rounded-md cursor-pointer" onclick="editField('reasonForVisit')" data-field="reasonForVisit">
+                                    <span class="text-[13px] text-vm-muted">Reason for Visit</span>
+                                    <span class="field-value text-[14px] text-vm-text font-medium" id="display-reasonForVisit">—</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Right Column Sticky Footer -->
+                <div class="shrink-0 pt-4">
+                    <button onclick="reviewAndCreate()" id="create-btn"
+                        class="w-full bg-vm-teal hover:bg-vm-teal-hover text-white text-[14px] font-medium py-3 rounded-lg transition-colors flex items-center justify-center gap-2">
+                        <i data-lucide="check-circle" class="w-4 h-4"></i>
+                        Review & Create Patient
+                    </button>
+                    <p class="text-[11px] text-vm-muted text-center mt-2">Verify all information before creating the record</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Edit Field Modal -->
+    <div id="edit-modal" class="fixed inset-0 z-50 hidden">
+        <div class="absolute inset-0 bg-black/20" onclick="closeEditModal()"></div>
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-lg border border-vm-border p-6 w-[90%] max-w-md fade-in-up">
+            <h3 id="edit-modal-title" class="text-[16px] font-medium text-vm-text mb-4">Edit Field</h3>
+            <input type="text" id="edit-modal-input"
+                class="w-full border border-vm-border rounded-lg px-4 py-3 text-[14px] text-vm-text focus:border-vm-teal focus:ring-1 focus:ring-vm-teal/20 transition-all"
+                onkeydown="if(event.key==='Enter')saveEditField()">
+            <div class="flex items-center justify-end gap-3 mt-5">
+                <button onclick="closeEditModal()" class="text-[13px] font-medium text-vm-muted hover:text-vm-text transition-colors px-4 py-2">Cancel</button>
+                <button onclick="saveEditField()" class="bg-vm-teal hover:bg-vm-teal-hover text-white text-[13px] font-medium px-5 py-2 rounded-lg transition-colors">Save</button>
+            </div>
+        </div>
+    </div>
+    <!-- Success Modal -->
+    <div id="success-modal" class="fixed inset-0 z-50 hidden">
+        <div class="absolute inset-0 bg-black/20"></div>
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-lg border border-vm-border p-8 w-[90%] max-w-sm text-center fade-in-up">
+            <div class="w-12 h-12 rounded-full bg-vm-success/10 flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="check" class="w-6 h-6 text-vm-success"></i>
+            </div>
+            <h3 class="text-[18px] font-semibold text-vm-text mb-2">Patient Created</h3>
+            <p class="text-[14px] text-vm-muted mb-6">The patient record has been successfully created and saved.</p>
+            <button onclick="closeSuccessModal()" class="bg-vm-teal hover:bg-vm-teal-hover text-white text-[14px] font-medium px-6 py-2.5 rounded-lg transition-colors">Done</button>
+        </div>
+    </div>
+    <script>
+    // ─── STATE ───────────────────────────────────────────────────
+    const state = {
+        mode: 'oneshot',
+        patientRecord: {
+            fullName: '',
+            dob: '',
+            phone: '',
+            email: '',
+            address: '',
+            emergencyName: '',
+            emergencyPhone: '',
+            insuranceProvider: '',
+            policyNumber: '',
+            allergies: '',
+            medications: '',
+            conditions: '',
+            reasonForVisit: ''
+        },
+        conversations: [],
+        questionsQueue: [],
+        currentQuestionField: null,
+        isProcessing: false,
+        isConversationActive: false,
+        autoFilledCount: 0,
+        autoFillStartTime: 0,
+        editingField: null
+    };
+    const fieldLabels = {
+        fullName: 'Full Name',
+        dob: 'Date of Birth',
+        phone: 'Phone Number',
+        email: 'Email Address',
+        address: 'Address',
+        emergencyName: 'Emergency Contact Name',
+        emergencyPhone: 'Emergency Contact Phone',
+        insuranceProvider: 'Insurance Provider',
+        policyNumber: 'Policy Number',
+        allergies: 'Known Allergies',
+        medications: 'Current Medications',
+        conditions: 'Medical Conditions',
+        reasonForVisit: 'Reason for Visit'
+    };
+    const questionMap = {
+        fullName: "What is the patient's full name?",
+        dob: "What is the patient's date of birth?",
+        phone: "What is the patient's phone number?",
+        email: "Do you have an email address for this patient?",
+        address: "What is the patient's home address?",
+        emergencyName: "Who should we contact in case of emergency?",
+        emergencyPhone: "What is the emergency contact's phone number?",
+        insuranceProvider: "What is the patient's insurance provider?",
+        policyNumber: "What is the insurance policy number?",
+        allergies: "Does the patient have any known allergies?",
+        medications: "Is the patient currently taking any medications?",
+        conditions: "Does the patient have any existing medical conditions?",
+        reasonForVisit: "What is the reason for today's visit?"
+    };
+    // Priority order for questions
+    const fieldOrder = ['fullName', 'dob', 'phone', 'email', 'address', 'emergencyName', 'emergencyPhone', 'insuranceProvider', 'policyNumber', 'allergies', 'medications', 'conditions', 'reasonForVisit'];
+    const requiredFields = ['fullName', 'dob', 'phone'];
+    // ─── SUGGESTIONS ─────────────────────────────────────────────
+    const suggestions = [
+        "Sarah Johnson, DOB 03/15/1985, 555-123-4567",
+        "Michael Chen, born 07/22/1990, mchen@email.com, BlueCross Insurance",
+        "Emily Davis, DOB 11/05/1978, 555-987-6543, allergic to penicillin"
+    ];
+    let currentSuggestion = 0;
+    // ─── PARSE ONE-SHOT INPUT ────────────────────────────────────
+    function parseOneShotInput(input) {
+        const record = {};
+        let filledCount = 0;
+        const original = input;
+        // Extract email
+        const emailMatch = input.match(/[\w.-]+@[\w.-]+\.\w+/);
+        if (emailMatch) {
+            record.email = emailMatch[0];
+            filledCount++;
+            input = input.replace(emailMatch[0], ' ');
+        }
+        // Extract phone
+        const phonePatterns = [
+            /(?:phone|tel|cell|mobile)?[:\s]*(\(\d{3}\)\s*\d{3}[-.]?\d{4})/i,
+            /(?:phone|tel|cell|mobile)?[:\s]*(\d{3}[-.]\d{3}[-.]\d{4})/i,
+            /(\d{3}[-.]\d{3}[-.]\d{4})/,
+            /(\(\d{3}\)\s*\d{3}[-.]?\d{4})/
+        ];
+        for (const pat of phonePatterns) {
+            const m = input.match(pat);
+            if (m) {
+                record.phone = m[1].trim();
+                filledCount++;
+                input = input.replace(m[0], ' ');
+                break;
+            }
+        }
+        // Extract DOB
+        const dobPatterns = [
+            /(?:DOB|born|date of birth|d\.o\.b\.?)[:\s]*(\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4})/i,
+            /(\d{1,2}[\/-]\d{1,2}[\/-]\d{4})/
+        ];
+        for (const pat of dobPatterns) {
+            const m = input.match(pat);
+            if (m) {
+                let dob = m[1];
+                // Normalize to MM/DD/YYYY
+                const parts = dob.split(/[\/\-]/);
+                if (parts.length === 3) {
+                    if (parts[2].length === 2) parts[2] = '19' + parts[2];
+                    if (parseInt(parts[0]) > 12) {
+                        // Might be DD/MM/YYYY, swap
+                        [parts[0], parts[1]] = [parts[1], parts[0]];
+                    }
+                    dob = parts[0].padStart(2, '0') + '/' + parts[1].padStart(2, '0') + '/' + parts[2];
+                }
+                record.dob = dob;
+                filledCount++;
+                input = input.replace(m[0], ' ');
+                break;
+            }
+        }
+        // Extract insurance
+        const insuranceMatch = input.match(/(?:insurance|ins|provider|coverage)[:\s]*(.+?)(?:,|\.|$)/i);
+        if (insuranceMatch) {
+            record.insuranceProvider = insuranceMatch[1].trim();
+            filledCount++;
+            input = input.replace(insuranceMatch[0], ' ');
+        } else {
+            // Check for known insurance names
+            const knownInsurers = ['Aetna', 'BlueCross', 'Blue Shield', 'Cigna', 'UnitedHealth', 'Humana', 'Kaiser', 'Medicare', 'Medicaid', 'Anthem'];
+            for (const ins of knownInsurers) {
+                if (input.toLowerCase().includes(ins.toLowerCase())) {
+                    record.insuranceProvider = ins;
+                    filledCount++;
+                    input = input.replace(new RegExp(ins, 'i'), ' ');
+                    break;
+                }
+            }
+        }
+        // Extract allergies
+        const allergyMatch = input.match(/(?:allergic to|allergies|allergy)[:\s]*(.+?)(?:,|\.|$)/i);
+        if (allergyMatch) {
+            record.allergies = allergyMatch[1].trim();
+            filledCount++;
+            input = input.replace(allergyMatch[0], ' ');
+        }
+        // Extract medications
+        const medMatch = input.match(/(?:medications?|meds?|taking)[:\s]*(.+?)(?:,|\.|$)/i);
+        if (medMatch) {
+            record.medications = medMatch[1].trim();
+            filledCount++;
+            input = input.replace(medMatch[0], ' ');
+        }
+        // Extract conditions
+        const condMatch = input.match(/(?:conditions?|diagnosed with|history of)[:\s]*(.+?)(?:,|\.|$)/i);
+        if (condMatch) {
+            record.conditions = condMatch[1].trim();
+            filledCount++;
+            input = input.replace(condMatch[0], ' ');
+        }
+        // Extract address
+        const addrMatch = input.match(/(?:address|addr|lives at|located at)[:\s]*(.+?)(?:,|\.|$)/i);
+        if (addrMatch) {
+            record.address = addrMatch[1].trim();
+            filledCount++;
+            input = input.replace(addrMatch[0], ' ');
+        }
+        // Extract reason for visit
+        const reasonMatch = input.match(/(?:reason|visit|appointment|seeing|complaint)[:\s]*(.+?)(?:,|\.|$)/i);
+        if (reasonMatch) {
+            record.reasonForVisit = reasonMatch[1].trim();
+            filledCount++;
+            input = input.replace(reasonMatch[0], ' ');
+        }
+        // Extract name (remaining text, look for capitalized words pattern)
+        let remaining = input.replace(/\s+/g, ' ').trim();
+        // Remove common noise words
+        remaining = remaining.replace(/\b(DOB|born|phone|tel|email|insurance|allergies?|medications?|patient)\b/gi, '');
+        remaining = remaining.replace(/[,\d\(\)\-\.\/]/g, ' ').replace(/\s+/g, ' ').trim();
+        // Find name pattern: 2-3 capitalized words
+        const nameMatch = remaining.match(/([A-Z][a-z]+(?:\s+[A-Z][a-z]+)+)/);
+        if (nameMatch) {
+            record.fullName = nameMatch[1].trim();
+            filledCount++;
+        } else {
+            // Try to get any remaining meaningful text as name
+            const words = remaining.split(/\s+/).filter(w => w.length > 1 && /^[A-Za-z]/.test(w));
+            if (words.length >= 2) {
+                const nameWords = [];
+                for (const w of words) {
+                    if (/^[A-Z]/.test(w)) nameWords.push(w);
+                    else if (nameWords.length >= 2) break;
+                }
+                if (nameWords.length >= 2) {
+                    record.fullName = nameWords.join(' ');
+                    filledCount++;
+                }
+            }
+        }
+        return { record, filledCount };
+    }
+    // ─── MODE TOGGLE ─────────────────────────────────────────────
+    function setMode(mode) {
+        state.mode = mode;
+        const oneshotBtn = document.getElementById('mode-oneshot');
+        const guidedBtn = document.getElementById('mode-guided');
+        const oneshotCard = document.getElementById('oneshot-card');
+        if (mode === 'oneshot') {
+            oneshotBtn.classList.add('active');
+            oneshotBtn.classList.remove('text-vm-muted');
+            guidedBtn.classList.remove('active');
+            guidedBtn.classList.add('text-vm-muted');
+            oneshotCard.classList.remove('hidden');
+        } else {
+            guidedBtn.classList.add('active');
+            guidedBtn.classList.remove('text-vm-muted');
+            oneshotBtn.classList.remove('active');
+            oneshotBtn.classList.add('text-vm-muted');
+            oneshotCard.classList.add('hidden');
+            // Start guided intake
+            if (!state.isConversationActive) {
+                startGuidedIntake();
+            }
+        }
+    }
+    // ─── SUGGESTION FILL ─────────────────────────────────────────
+    function fillSuggestion() {
+        const input = document.getElementById('oneshot-input');
+        input.value = suggestions[currentSuggestion];
+        input.focus();
+        currentSuggestion = (currentSuggestion + 1) % suggestions.length;
+    }
+    // ─── ONE-SHOT HANDLER ────────────────────────────────────────
+    async function handleOneShot() {
+        const input = document.getElementById('oneshot-input').value.trim();
+        if (!input || state.isProcessing) return;
+        state.isProcessing = true;
+        state.autoFillStartTime = Date.now();
+        // Show processed summary
+        document.getElementById('oneshot-card').classList.add('hidden');
+        document.getElementById('oneshot-processed').classList.remove('hidden');
+        document.getElementById('processed-text').textContent = `"${input.substring(0, 50)}${input.length > 50 ? '...' : ''}" processed`;
+        // Parse the input
+        const { record, filledCount } = parseOneShotInput(input);
+        // Show typing indicator
+        showAITyping();
+        // Simulate processing delay
+        await delay(1200);
+        // Apply parsed data to patient record
+        let actualFilled = 0;
+        for (const [key, value] of Object.entries(record)) {
+            if (value && !state.patientRecord[key]) {
+                state.patientRecord[key] = value;
+                actualFilled++;
+            }
+        }
+        state.autoFilledCount = actualFilled;
+        const elapsed = ((Date.now() - state.autoFillStartTime) / 1000).toFixed(1);
+        // Update display
+        updateRecordDisplay();
+        showPerformanceIndicator(actualFilled, elapsed);
+        hideAITyping();
+        // Build conversation
+        state.isConversationActive = true;
+        // AI greeting
+        const firstName = state.patientRecord.fullName ? state.patientRecord.fullName.split(' ')[0] : 'the patient';
+        await addAIMessage(`I've captured the details for ${firstName}. Let me fill in the record for you.`);
+        // Highlight filled fields
+        for (const key of Object.keys(record)) {
+            if (record[key]) {
+                highlightField(key);
+            }
+        }
+        await delay(800);
+        // Check what's missing
+        const missingFields = fieldOrder.filter(f => !state.patientRecord[f]);
+        if (missingFields.length > 0) {
+            await addAIMessage(`I've added most of the patient details. I still need a few things to complete the record.`);
+            // Queue up questions for missing fields
+            state.questionsQueue = missingFields;
+            await delay(600);
+            askNextQuestion();
+        } else {
+            await addAIMessage(`All patient details have been captured. You can review the record on the right and make any adjustments needed.`);
+        }
+        state.isProcessing = false;
+    }
+    // ─── GUIDED INTAKE ───────────────────────────────────────────
+    async function startGuidedIntake() {
+        if (state.isConversationActive) return;
+        state.isConversationActive = true;
+        state.isProcessing = true;
+        showAITyping();
+        await delay(800);
+        hideAITyping();
+        await addAIMessage("Welcome! I'll help you register a new patient. Let's go through this together — I'll ask one question at a time.");
+        await delay(600);
+        // Queue all fields
+        state.questionsQueue = [...fieldOrder];
+        askNextQuestion();
+        state.isProcessing = false;
+    }
+    // ─── QUESTION FLOW ───────────────────────────────────────────
+    async function askNextQuestion() {
+        if (state.questionsQueue.length === 0) {
+            await addAIMessage("That's everything I need! The patient record is now complete. Review the details on the right, and click **Review & Create Patient** when you're ready.");
+            state.isConversationActive = false;
+            return;
+        }
+        const nextField = state.questionsQueue.shift();
+        state.currentQuestionField = nextField;
+        const question = questionMap[nextField];
+        const isRequired = requiredFields.includes(nextField);
+        await addAIMessageWithSkip(question, nextField, isRequired);
+    }
+    // ─── CHAT SEND ───────────────────────────────────────────────
+    async function handleChatSend() {
+        const input = document.getElementById('chat-input');
+        const value = input.value.trim();
+        if (!value || state.isProcessing) return;
+        input.value = '';
+        // Add user message
+        addUserMessage(value);
+        // Process response
+        state.isProcessing = true;
+        if (state.currentQuestionField) {
+            // Update the patient record with the answer
+            state.patientRecord[state.currentQuestionField] = value;
+            updateRecordDisplay();
+            highlightField(state.currentQuestionField);
+            // Update completeness
+            updateCompleteness();
+            showAITyping();
+            await delay(800);
+            hideAITyping();
+            // Brief acknowledgment
+            const acknowledgments = [
+                "Got it.",
+                "Noted.",
+                "Added.",
+                "Thanks, I've added that.",
+                "Recorded.",
+                "Updated."
+            ];
+            await addAIMessage(acknowledgments[Math.floor(Math.random() * acknowledgments.length)]);
+            await delay(400);
+            state.currentQuestionField = null;
+            // Ask next question
+            askNextQuestion();
+        } else {
+            // General response - try to extract info
+            showAITyping();
+            await delay(600);
+            hideAITyping();
+            await addAIMessage("I've noted that. Let me know if there's anything else you'd like to update in the patient record.");
+        }
+        state.isProcessing = false;
+    }
+    // ─── SKIP HANDLER ────────────────────────────────────────────
+    async function handleSkip(field) {
+        // Remove skip button
+        const skipContainer = document.getElementById(`skip-${field}`);
+        if (skipContainer) skipContainer.remove();
+        addUserMessage("Skip");
+        showAITyping();
+        await delay(500);
+        hideAITyping();
+        await addAIMessage("No problem, we can fill that in later.");
+        state.currentQuestionField = null;
+        await delay(300);
+        askNextQuestion();
+    }
+    // ─── CONVERSATION UI ─────────────────────────────────────────
+    async function addAIMessage(text) {
+        const convArea = document.getElementById('conversation-area');
+        const msgDiv = document.createElement('div');
+        msgDiv.className = 'fade-in-up';
+        // Simple markdown bold handling
+        const formattedText = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        msgDiv.innerHTML = `
+            <div class="flex items-start gap-3">
+                <div class="w-6 h-6 rounded-full bg-vm-teal/10 flex items-center justify-center shrink-0 mt-0.5">
+                    <i data-lucide="bot" class="w-3 h-3 text-vm-teal"></i>
+                </div>
+                <div class="bg-vm-bg rounded-lg rounded-tl-none px-4 py-3 max-w-[85%]">
+                    <p class="text-[14px] text-vm-text leading-relaxed">${formattedText}</p>
+                </div>
+            </div>
+        `;
+        convArea.appendChild(msgDiv);
+        lucide.createIcons();
+        scrollToBottom();
+    }
+    async function addAIMessageWithSkip(text, field, isRequired) {
+        const convArea = document.getElementById('conversation-area');
+        const msgDiv = document.createElement('div');
+        msgDiv.className = 'fade-in-up';
+        msgDiv.id = `skip-${field}`;
+        const skipBtn = !isRequired
+            ? `<button onclick="handleSkip('${field}')" class="text-[12px] text-vm-muted hover:text-vm-teal transition-colors font-medium ml-3">Skip</button>`
+            : `<span class="text-[11px] text-vm-muted/60 ml-3">Required</span>`;
+        msgDiv.innerHTML = `
+            <div class="flex items-start gap-3">
+                <div class="w-6 h-6 rounded-full bg-vm-teal/10 flex items-center justify-center shrink-0 mt-0.5">
+                    <i data-lucide="bot" class="w-3 h-3 text-vm-teal"></i>
+                </div>
+                <div>
+                    <div class="bg-vm-bg rounded-lg rounded-tl-none px-4 py-3 max-w-[85%]">
+                        <p class="text-[14px] text-vm-text leading-relaxed">${text}</p>
+                    </div>
+                    <div class="flex items-center mt-2 ml-1">
+                        ${skipBtn}
+                    </div>
+                </div>
+            </div>
+        `;
+        convArea.appendChild(msgDiv);
+        lucide.createIcons();
+        scrollToBottom();
+        // Focus the chat input
+        document.getElementById('chat-input').focus();
+    }
+    function addUserMessage(text) {
+        const convArea = document.getElementById('conversation-area');
+        const msgDiv = document.createElement('div');
+        msgDiv.className = 'fade-in-up flex justify-end';
+        msgDiv.innerHTML = `
+            <div class="bg-vm-teal text-white rounded-lg rounded-tr-none px-4 py-3 max-w-[75%]">
+                <p class="text-[14px] leading-relaxed">${text}</p>
+            </div>
+        `;
+        convArea.appendChild(msgDiv);
+        scrollToBottom();
+    }
+    function showAITyping() {
+        const convArea = document.getElementById('conversation-area');
+        const typingDiv = document.createElement('div');
+        typingDiv.id = 'typing-indicator';
+        typingDiv.className = 'fade-in-up';
+        typingDiv.innerHTML = `
+            <div class="flex items-start gap-3">
+                <div class="w-6 h-6 rounded-full bg-vm-teal/10 flex items-center justify-center shrink-0 mt-0.5">
+                    <i data-lucide="bot" class="w-3 h-3 text-vm-teal"></i>
+                </div>
+                <div class="bg-vm-bg rounded-lg rounded-tl-none px-4 py-3">
+                    <div class="flex items-center gap-1">
+                        <div class="typing-dot w-1.5 h-1.5 bg-vm-muted rounded-full"></div>
+                        <div class="typing-dot w-1.5 h-1.5 bg-vm-muted rounded-full"></div>
+                        <div class="typing-dot w-1.5 h-1.5 bg-vm-muted rounded-full"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+        convArea.appendChild(typingDiv);
+        lucide.createIcons();
+        scrollToBottom();
+        document.getElementById('ai-status').classList.remove('hidden');
+    }
+    function hideAITyping() {
+        const typing = document.getElementById('typing-indicator');
+        if (typing) typing.remove();
+        document.getElementById('ai-status').classList.add('hidden');
+    }
+    function scrollToBottom() {
+        const convArea = document.getElementById('conversation-area');
+        requestAnimationFrame(() => {
+            convArea.scrollTop = convArea.scrollHeight;
+        });
+    }
+    // ─── RECORD DISPLAY ──────────────────────────────────────────
+    function updateRecordDisplay() {
+        for (const [key, value] of Object.entries(state.patientRecord)) {
+            const el = document.getElementById(`display-${key}`);
+            if (el) {
+                if (value) {
+                    el.textContent = value;
+                    el.classList.remove('text-vm-muted/50');
+                    el.classList.add('text-vm-text', 'font-medium');
+                } else {
+                    el.textContent = '—';
+                    el.classList.add('text-vm-muted/50');
+                    el.classList.remove('font-medium');
+                }
+            }
+        }
+        updateCompleteness();
+    }
+    function highlightField(field) {
+        const row = document.querySelector(`[data-field="${field}"]`);
+        if (row) {
+            row.classList.remove('field-highlight');
+            void row.offsetWidth; // Trigger reflow
+            row.classList.add('field-highlight');
+        }
+    }
+    function updateCompleteness() {
+        const totalFields = fieldOrder.length;
+        const filledFields = fieldOrder.filter(f => state.patientRecord[f]).length;
+        const percentage = Math.round((filledFields / totalFields) * 100);
+        const badge = document.getElementById('completeness-badge');
+        badge.textContent = `${percentage}% complete`;
+        if (percentage === 100) {
+            badge.classList.remove('text-vm-muted', 'bg-vm-bg');
+            badge.classList.add('text-vm-success', 'bg-vm-success-bg');
+        } else if (percentage >= 50) {
+            badge.classList.remove('text-vm-muted', 'bg-vm-bg');
+            badge.classList.add('text-vm-warning', 'bg-vm-warning-bg');
+        }
+    }
+    // ─── PERFORMANCE INDICATOR ───────────────────────────────────
+    function showPerformanceIndicator(count, time) {
+        const indicator = document.getElementById('perf-indicator');
+        const text = document.getElementById('perf-text');
+        indicator.classList.remove('hidden');
+        text.textContent = `${count} field${count !== 1 ? 's' : ''} auto-filled in ${time}s`;
+    }
+    // ─── INLINE EDITING ──────────────────────────────────────────
+    function editField(field) {
+        state.editingField = field;
+        const modal = document.getElementById('edit-modal');
+        const title = document.getElementById('edit-modal-title');
+        const input = document.getElementById('edit-modal-input');
+        title.textContent = `Edit ${fieldLabels[field]}`;
+        input.value = state.patientRecord[field] || '';
+        modal.classList.remove('hidden');
+        requestAnimationFrame(() => input.focus());
+    }
+    function saveEditField() {
+        const input = document.getElementById('edit-modal-input');
+        const value = input.value.trim();
+        if (state.editingField) {
+            state.patientRecord[state.editingField] = value;
+            updateRecordDisplay();
+            highlightField(state.editingField);
+        }
+        closeEditModal();
+    }
+    function closeEditModal() {
+        document.getElementById('edit-modal').classList.add('hidden');
+        state.editingField = null;
+    }
+    // ─── REVIEW & CREATE ─────────────────────���───────────────────
+    function reviewAndCreate() {
+        // Check required fields
+        const missing = requiredFields.filter(f => !state.patientRecord[f]);
+        if (missing.length > 0) {
+            const missingLabels = missing.map(f => fieldLabels[f]);
+            showToast(`Missing required fields: ${missingLabels.join(', ')}`, 'warning');
+            return;
+        }
+        // Show success modal
+        document.getElementById('success-modal').classList.remove('hidden');
+        lucide.createIcons();
+    }
+    function closeSuccessModal() {
+        document.getElementById('success-modal').classList.add('hidden');
+        // Reset everything
+        state.patientRecord = {
+            fullName: '', dob: '', phone: '', email: '', address: '',
+            emergencyName: '', emergencyPhone: '', insuranceProvider: '',
+            policyNumber: '', allergies: '', medications: '', conditions: '',
+            reasonForVisit: ''
+        };
+        state.isConversationActive = false;
+        state.isProcessing = false;
+        state.questionsQueue = [];
+        state.currentQuestionField = null;
+        state.autoFilledCount = 0;
+        updateRecordDisplay();
+        // Reset conversation
+        const convArea = document.getElementById('conversation-area');
+        convArea.innerHTML = `
+            <div class="fade-in-up">
+                <div class="flex items-start gap-3">
+                    <div class="w-6 h-6 rounded-full bg-vm-teal/10 flex items-center justify-center shrink-0 mt-0.5">
+                        <i data-lucide="bot" class="w-3 h-3 text-vm-teal"></i>
+                    </div>
+                    <div class="bg-vm-bg rounded-lg rounded-tl-none px-4 py-3 max-w-[85%]">
+                        <p class="text-[14px] text-vm-text leading-relaxed">Welcome! I'll help you register a new patient. Enter the details above or switch to guided mode, and I'll walk you through step by step.</p>
+                    </div>
+                </div>
+            </div>
+        `;
+        lucide.createIcons();
+        // Reset oneshot card
+        document.getElementById('oneshot-card').classList.remove('hidden');
+        document.getElementById('oneshot-processed').classList.add('hidden');
+        document.getElementById('oneshot-input').value = '';
+        document.getElementById('perf-indicator').classList.add('hidden');
+        // Reset completeness badge
+        const badge = document.getElementById('completeness-badge');
+        badge.textContent = '0% complete';
+        badge.className = 'text-[11px] font-medium text-vm-muted bg-vm-bg px-2 py-0.5 rounded-full';
+        setMode('oneshot');
+    }
+    // ─── RESET ONE-SHOT ──────────────────────────────────────────
+    function resetOneShot() {
+        document.getElementById('oneshot-card').classList.remove('hidden');
+        document.getElementById('oneshot-processed').classList.add('hidden');
+        document.getElementById('oneshot-input').focus();
+    }
+    // ─── HEADER ACTIONS ──────────────────────────────────────────
+    function saveDraft() {
+        // Save to localStorage
+        localStorage.setItem('verifyMC_draft', JSON.stringify(state.patientRecord));
+        showToast('Draft saved successfully', 'success');
+    }
+    function switchToManual() {
+        showToast('Manual mode is not available in this demo', 'info');
+    }
+    // ─── TOAST ───────────────────────────────────────────────────
+    function showToast(message, type = 'info') {
+        const container = document.getElementById('toast-container');
+        const toast = document.createElement('div');
+        const colors = {
+            success: 'bg-vm-success-bg border-vm-success/20 text-vm-success',
+            warning: 'bg-vm-warning-bg border-vm-warning/20 text-vm-warning',
+            info: 'bg-vm-bg border-vm-border text-vm-text',
+            error: 'bg-vm-risk-bg border-vm-risk/20 text-vm-risk'
+        };
+        const icons = {
+            success: 'check-circle',
+            warning: 'alert-triangle',
+            info: 'info',
+            error: 'alert-circle'
+        };
+        toast.className = `toast-in flex items-center gap-2 px-4 py-3 rounded-lg border ${colors[type]} shadow-sm min-w-[260px]`;
+        toast.innerHTML = `
+            <i data-lucide="${icons[type]}" class="w-4 h-4 shrink-0"></i>
+            <span class="text-[13px] font-medium">${message}</span>
+        `;
+        container.appendChild(toast);
+        lucide.createIcons();
+        setTimeout(() => {
+            toast.classList.remove('toast-in');
+            toast.classList.add('toast-out');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
+    // ─── MOBILE TABS ─────────────────────────────────────────────
+    function showMobileTab(tab) {
+        const leftCol = document.getElementById('left-column');
+        const rightCol = document.getElementById('right-column');
+        const tabAI = document.getElementById('mobile-tab-ai');
+        const tabRecord = document.getElementById('mobile-tab-record');
+        if (tab === 'ai') {
+            leftCol.classList.remove('hidden');
+            rightCol.classList.add('hidden');
+            rightCol.classList.remove('flex');
+            tabAI.classList.add('active');
+            tabRecord.classList.remove('active');
+            tabRecord.classList.add('text-vm-muted');
+        } else {
+            leftCol.classList.add('hidden');
+            rightCol.classList.remove('hidden');
+            rightCol.classList.add('flex');
+            tabRecord.classList.add('active');
+            tabRecord.classList.remove('text-vm-muted');
+            tabAI.classList.remove('active');
+        }
+    }
+    // ─── UTILITY ─────────────────────────────────────────────────
+    function delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    // ─── LOAD DRAFT ──────────────────────────────────────────────
+    function loadDraft() {
+        const draft = localStorage.getItem('verifyMC_draft');
+        if (draft) {
+            try {
+                const parsed = JSON.parse(draft);
+                const hasData = Object.values(parsed).some(v => v);
+                if (hasData) {
+                    Object.assign(state.patientRecord, parsed);
+                    updateRecordDisplay();
+                    showToast('Draft recovered from previous session', 'info');
+                }
+            } catch (e) {}
+        }
+    }
+    // ─── INIT ────────────────────────────────────────────────────
+    document.addEventListener('DOMContentLoaded', () => {
+        lucide.createIcons();
+        loadDraft();
+        // Handle responsive on resize
+        function handleResize() {
+            const rightCol = document.getElementById('right-column');
+            const leftCol = document.getElementById('left-column');
+            if (window.innerWidth >= 1024) {
+                rightCol.classList.remove('hidden');
+                rightCol.classList.add('flex');
+                leftCol.classList.remove('hidden');
+            }
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+    });
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>