Update static/script.js

static/script.js

@@ -1,48 +1,12 @@
 // ===== GLOBAL STATE =====
 let currentResults = null;
 let explanations = null;
-let sessionId = null; // Store session ID
+let sessionId = null;
 
-// ===== INITIALIZATION =====
-document.addEventListener('DOMContentLoaded', () => {
-    initNavigation();
-    initFileUpload();
-    initScrollAnimations();
-});
-
-// ===== NAVIGATION =====
-function initNavigation() {
-    const navLinks = document.querySelectorAll('.nav-link');
-    
-    navLinks.forEach(link => {
-        link.addEventListener('click', (e) => {
-            e.preventDefault();
-            const target = link.getAttribute('href');
-            
-            // Update active state
-            navLinks.forEach(l => l.classList.remove('active'));
-            link.classList.add('active');
-            
-            // Smooth scroll
-            document.querySelector(target).scrollIntoView({
-                behavior: 'smooth',
-                block: 'start'
-            });
-        });
-    });
-    
-    // Mobile menu toggle
-    const mobileToggle = document.querySelector('.mobile-menu-toggle');
-    const navMenu = document.querySelector('.nav-menu');
-    
-    if (mobileToggle) {
-        mobileToggle.addEventListener('click', () => {
-            navMenu.classList.toggle('active');
-        });
-    }
-}
-// Add this function for section navigation
+// ===== SECTION NAVIGATION (CRITICAL - MISSING IN YOUR CODE) =====
 function showSection(sectionId) {
+    console.log('🔄 Showing section:', sectionId);
+    
     // Hide all sections
     document.querySelectorAll('.section').forEach(section => {
         section.classList.remove('active');
@@ -52,38 +16,32 @@ function showSection(sectionId) {
     const targetSection = document.getElementById(sectionId);
     if (targetSection) {
         targetSection.classList.add('active');
+        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else {
+        console.error('❌ Section not found:', sectionId);
     }
 }
 
-// Add this function to match your HTML button
-function askQuestion() {
-    sendChatMessage(); // Just call your existing function
-}
-// ===== SCROLL ANIMATIONS =====
-function initScrollAnimations() {
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.style.opacity = '1';
-                entry.target.style.transform = 'translateY(0)';
-            }
-        });
-    }, { threshold: 0.1 });
+// ===== INITIALIZATION =====
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('✅ DOM loaded, initializing...');
+    initFileUpload();
     
-    document.querySelectorAll('.about-card, .feature-card').forEach(card => {
-        card.style.opacity = '0';
-        card.style.transform = 'translateY(20px)';
-        card.style.transition = 'all 0.6s ease-out';
-        observer.observe(card);
-    });
-}
+    // Show upload section by default
+    showSection('upload-section');
+});
 
 // ===== FILE UPLOAD =====
 function initFileUpload() {
     const fileInput = document.getElementById('fileInput');
     const uploadArea = document.getElementById('uploadArea');
     
-    if (!fileInput || !uploadArea) return;
+    if (!fileInput || !uploadArea) {
+        console.error('❌ Upload elements not found');
+        return;
+    }
+    
+    console.log('✅ Upload initialized');
     
     // Click to upload
     fileInput.addEventListener('change', handleFileSelect);
@@ -91,16 +49,16 @@ function initFileUpload() {
     // Drag and drop
     uploadArea.addEventListener('dragover', (e) => {
         e.preventDefault();
-        uploadArea.classList.add('dragover');
+        uploadArea.classList.add('border-secondary', 'bg-blue-100');
     });
     
     uploadArea.addEventListener('dragleave', () => {
-        uploadArea.classList.remove('dragover');
+        uploadArea.classList.remove('border-secondary', 'bg-blue-100');
     });
     
     uploadArea.addEventListener('drop', (e) => {
         e.preventDefault();
-        uploadArea.classList.remove('dragover');
+        uploadArea.classList.remove('border-secondary', 'bg-blue-100');
         
         const file = e.dataTransfer.files[0];
         if (file && file.type === 'application/pdf') {
@@ -117,6 +75,7 @@ function handleFileSelect(e) {
         uploadFile(file);
     }
 }
+
 async function uploadFile(file) {
     const formData = new FormData();
     formData.append('file', file);
@@ -126,7 +85,7 @@ async function uploadFile(file) {
     document.getElementById('uploadProgress').classList.remove('hidden');
     
     try {
-        console.log('📤 Uploading file...');
+        console.log('📤 Uploading file:', file.name);
         
         const response = await fetch('/api/upload', {
             method: 'POST',
@@ -145,25 +104,28 @@ async function uploadFile(file) {
         currentResults = data.results;
         
         console.log('✅ Session ID:', sessionId);
-        console.log('✅ Results count:', currentResults.length);
+        console.log('✅ Results:', currentResults.length);
         
         showToast(`✓ Found ${data.count} lab results!`, 'success');
         
-        // IMPORTANT: Show results immediately with template explanations
-        console.log('🎨 Displaying results with template explanations...');
+        // Display results immediately with template explanations
+        console.log('🎨 Displaying template results...');
         displayResults();
+        updateSummaryStats();
+        
+        // Show stats and buttons
+        document.getElementById('summaryStats').classList.remove('hidden');
+        document.getElementById('generateSummaryBtn').classList.remove('hidden');
         
-        // Scroll to results
+        // Switch to results section
         setTimeout(() => {
-            const resultsEl = document.getElementById('results');
-            if (resultsEl) {
-                resultsEl.scrollIntoView({ behavior: 'smooth' });
-                console.log('📍 Scrolled to results section');
-            }
+            showSection('results-section');
         }, 500);
         
-        // Then fetch AI explanations in background
+        // Fetch AI explanations in background
         console.log('🤖 Fetching AI explanations...');
+        showToast('Generating AI explanations...', 'info');
+        
         await generateExplanations();
         
         // Update display with AI explanations
@@ -179,281 +141,168 @@ async function uploadFile(file) {
     }
 }
 
-
 async function generateExplanations() {
-    showLoading('Generating AI explanations... (10-20 seconds)');
-    
     try {
-        // Add timeout to prevent hanging
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 60000); // 60 second timeout
+        console.log('🔄 Calling /api/explain with session:', sessionId);
         
         const response = await fetch('/api/explain', {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ session_id: sessionId }),
-            signal: controller.signal
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ session_id: sessionId })
         });
         
-        clearTimeout(timeoutId);
-        
         const data = await response.json();
+        console.log('📥 Explanation response:', data);
         
         if (!response.ok) {
             throw new Error(data.error || 'Failed to generate explanations');
         }
         
         explanations = data.explanations;
-        console.log('Explanations generated:', Object.keys(explanations).length);
+        console.log('✅ Explanations loaded:', Object.keys(explanations).length);
         
     } catch (error) {
-        if (error.name === 'AbortError') {
-            console.log('Explanation generation timed out - showing basic results');
-            showToast('Loading took longer than expected. Showing basic results.', 'info');
-        } else {
-            console.error('Error generating explanations:', error);
-            showToast('Some explanations may be unavailable', 'info');
-        }
-        // Continue anyway to show results
-    } finally {
-        hideLoading();
+        console.error('❌ Explanation error:', error);
+        showToast('Using basic explanations', 'info');
     }
 }
+
 function displayResults() {
-    const resultsSection = document.getElementById('results-section');
     const container = document.getElementById('resultsContainer');
     
     console.log('🎯 displayResults() called');
-    console.log('📊 currentResults:', currentResults);
-    console.log('💬 explanations:', explanations);
+    console.log('📊 Results:', currentResults?.length);
+    console.log('💬 Explanations:', explanations ? Object.keys(explanations).length : 0);
     
     if (!currentResults || currentResults.length === 0) {
         console.log('❌ No results to display');
-        container.innerHTML = '<p style="text-align:center;color:#94a3b8;padding:3rem;">No results found</p>';
+        container.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-slate-400 py-20"><div class="text-6xl mb-4 opacity-20">📊</div><p>Upload a lab report to view results here</p></div>';
         return;
     }
     
     console.log(`✅ Displaying ${currentResults.length} results`);
     
-    // Show results section
-    resultsSection.classList.remove('hidden');
-    
-    // Update summary stats
-    updateSummaryStats();
-    
     // Clear container
     container.innerHTML = '';
     
     // Create result cards
     currentResults.forEach((result, index) => {
-        console.log(`📝 Creating card ${index + 1}: ${result.test_name} (${result.status})`);
-        try {
-            const card = createResultCard(result, index);
-            container.appendChild(card);
-            console.log(`  ✅ Card added to DOM`);
-        } catch (error) {
-            console.error(`  ❌ Error creating card:`, error);
-        }
+        console.log(`📝 Card ${index + 1}:`, result.test_name, result.status);
+        const card = createResultCard(result, index);
+        container.appendChild(card);
     });
     
     // Reset upload area
     resetUploadArea();
     
-    console.log('✅ All results displayed successfully');
-}
-
-function updateSummaryStats() {
-    const stats = {
-        normal: 0,
-        high: 0,
-        low: 0
-    };
-    
-    currentResults.forEach(result => {
-        if (result.status in stats) {
-            stats[result.status]++;
-        }
-    });
-    
-    document.getElementById('normalCount').textContent = stats.normal;
-    document.getElementById('highCount').textContent = stats.high;
-    document.getElementById('lowCount').textContent = stats.low;
+    console.log('✅ All cards rendered');
 }
 
 function createResultCard(result, index) {
-    console.log(`  Creating card for: ${result.test_name}`);
-    
     const card = document.createElement('div');
-    card.className = 'result-card';
-    card.style.setProperty('--i', index + 1);
+    card.className = 'bg-white rounded-xl shadow-md border border-slate-200 p-6 mb-4 hover:shadow-lg transition-shadow';
+    
+    // Status colors
+    const statusColors = {
+        normal: { bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200' },
+        high: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200' },
+        low: { bg: 'bg-yellow-50', text: 'text-yellow-700', border: 'border-yellow-200' },
+        unknown: { bg: 'bg-slate-50', text: 'text-slate-700', border: 'border-slate-200' }
+    };
     
-    // Determine status class and color
-    const statusClass = `status-${result.status || 'unknown'}`;
-    let statusColor = '#64748b'; // gray for unknown
-    if (result.status === 'normal') statusColor = '#10b981';
-    if (result.status === 'high') statusColor = '#ef4444';
-    if (result.status === 'low') statusColor = '#f59e0b';
+    const colors = statusColors[result.status] || statusColors.unknown;
     
     // Get explanation
     let explanation = '';
     
     if (explanations && explanations[result.test_name]) {
         explanation = explanations[result.test_name];
-        console.log(`  ✅ Using AI explanation (${explanation.length} chars)`);
+        console.log(`  ✅ Using AI explanation for ${result.test_name}`);
     } else {
-        console.log(`  ⚠️ No AI explanation yet, using template`);
-        // Template explanation based on status
+        console.log(`  ⚠️ Using template for ${result.test_name}`);
+        // Template explanation
         if (result.status === 'normal') {
             explanation = `✅ <strong>Good news!</strong> Your ${result.test_name} level of ${result.value} ${result.unit} is within the normal range (${result.reference_range}).<br><br>This indicates healthy levels. Keep up your current health habits!`;
         } else if (result.status === 'high') {
-            explanation = `⚠️ Your ${result.test_name} level of ${result.value} ${result.unit} is <strong>above</strong> the normal range (${result.reference_range}).<br><br>This may require attention. Please consult your healthcare provider to discuss these results and any necessary steps.`;
+            explanation = `⚠️ Your ${result.test_name} level of ${result.value} ${result.unit} is <strong>above</strong> the normal range (${result.reference_range}).<br><br>This may require attention. Please consult your healthcare provider.`;
         } else if (result.status === 'low') {
-            explanation = `⚠️ Your ${result.test_name} level of ${result.value} ${result.unit} is <strong>below</strong> the normal range (${result.reference_range}).<br><br>This may require attention. Please consult your healthcare provider to discuss these results and any necessary steps.`;
+            explanation = `⚠️ Your ${result.test_name} level of ${result.value} ${result.unit} is <strong>below</strong> the normal range (${result.reference_range}).<br><br>This may require attention. Please consult your healthcare provider.`;
         } else {
-            explanation = `Your ${result.test_name} result is ${result.value} ${result.unit}.<br><br>Reference range: ${result.reference_range}<br><br>Please discuss this result with your healthcare provider for proper interpretation.`;
+            explanation = `Your ${result.test_name} result is ${result.value} ${result.unit}.<br><br>Reference range: ${result.reference_range}`;
         }
     }
     
-    // Build card HTML
     card.innerHTML = `
-        <div class="result-header">
+        <div class="flex justify-between items-start mb-4">
             <div>
-                <h3 class="result-name">${escapeHtml(result.test_name)}</h3>
-                <p class="result-range">Reference: ${escapeHtml(result.reference_range || 'N/A')}</p>
+                <h3 class="text-xl font-bold text-slate-800">${escapeHtml(result.test_name)}</h3>
+                <p class="text-sm text-slate-500">Reference: ${escapeHtml(result.reference_range || 'N/A')}</p>
             </div>
-            <div class="result-value-container">
-                <div class="result-value">${escapeHtml(result.value)} ${escapeHtml(result.unit)}</div>
-                <span class="result-status ${statusClass}" style="background: ${statusColor}20; color: ${statusColor}; border: 2px solid ${statusColor};">${result.status || 'unknown'}</span>
+            <div class="text-right">
+                <div class="text-2xl font-bold text-slate-800">${escapeHtml(result.value)} <span class="text-lg text-slate-500">${escapeHtml(result.unit)}</span></div>
+                <span class="inline-block mt-2 px-3 py-1 rounded-full text-sm font-medium ${colors.bg} ${colors.text} border ${colors.border}">
+                    ${result.status.toUpperCase()}
+                </span>
             </div>
         </div>
-        <div class="result-explanation">
-            <strong>💡 What does this mean?</strong><br><br>
-            <div style="line-height: 1.8;">${explanation}</div>
+        <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-100">
+            <div class="font-semibold text-blue-900 mb-2">💡 What does this mean?</div>
+            <div class="text-sm text-slate-700 leading-relaxed">${explanation}</div>
         </div>
     `;
     
-    console.log(`  ✅ Card HTML created`);
     return card;
 }
 
-function resetUploadArea() {
-    document.getElementById('uploadArea').classList.remove('hidden');
-    document.getElementById('uploadProgress').classList.add('hidden');
-    document.getElementById('fileInput').value = '';
-}
-
-// ===== SUMMARY GENERATION =====
-async function generateSummary() {
-    if (!sessionId) {
-        showToast('Please upload a lab report first', 'error');
-        return;
-    }
-    
-    showLoading('Generating comprehensive summary...');
-    
-    try {
-        const response = await fetch('/api/summary', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ session_id: sessionId })
-        });
-        
-        const data = await response.json();
-        
-        if (!response.ok) {
-            throw new Error(data.error || 'Failed to generate summary');
-        }
-        
-        // Show summary modal
-        showSummaryModal(data.summary, data.stats);
-        
-    } catch (error) {
-        showToast('Error: ' + error.message, 'error');
-    } finally {
-        hideLoading();
-    }
-}
-
-function showSummaryModal(summary, stats) {
-    const modal = document.createElement('div');
-    modal.className = 'chat-modal';
-    modal.innerHTML = `
-        <div class="chat-modal-content">
-            <div class="chat-header">
-                <h3>📊 Complete Summary</h3>
-                <button class="chat-close" onclick="this.closest('.chat-modal').remove()">&times;</button>
-            </div>
-            <div class="chat-messages">
-                <div class="chat-message assistant">
-                    <div class="chat-bubble">
-                        <p>${escapeHtml(summary).replace(/\n/g, '<br><br>')}</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(modal);
+function updateSummaryStats() {
+    const stats = { normal: 0, high: 0, low: 0 };
     
-    // Close on click outside
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-            modal.remove();
+    currentResults.forEach(result => {
+        if (result.status in stats) {
+            stats[result.status]++;
         }
     });
-}
-
-// ===== CHAT FUNCTIONALITY =====
-function openChat() {
-    if (!sessionId) {
-        showToast('Please upload a lab report first', 'error');
-        return;
-    }
     
-    const modal = document.getElementById('chatModal');
-    modal.classList.remove('hidden');
-    document.getElementById('chatInput').focus();
-}
-
-function closeChat() {
-    document.getElementById('chatModal').classList.add('hidden');
+    document.getElementById('normalCount').textContent = stats.normal;
+    document.getElementById('highCount').textContent = stats.high;
+    document.getElementById('lowCount').textContent = stats.low;
+    
+    console.log('📊 Stats updated:', stats);
 }
 
-function handleChatKeypress(event) {
-    if (event.key === 'Enter') {
-        sendChatMessage();
-    }
+function resetUploadArea() {
+    document.getElementById('uploadArea').classList.remove('hidden');
+    document.getElementById('uploadProgress').classList.add('hidden');
+    document.getElementById('fileInput').value = '';
 }
 
-async function sendChatMessage() {
+// ===== CHAT FUNCTIONALITY =====
+async function askQuestion() {
     const input = document.getElementById('chatInput');
     const question = input.value.trim();
     
     if (!question) return;
     
     if (!sessionId) {
-        showToast('Session expired. Please upload your report again.', 'error');
+        showToast('Please upload a lab report first', 'error');
         return;
     }
     
+    console.log('💬 Asking:', question);
+    
     // Clear input
     input.value = '';
     
     // Add user message
     addChatMessage(question, 'user');
     
-    // Show loading message
+    // Add loading message
     const loadingId = addChatMessage('Thinking...', 'assistant', true);
     
     try {
         const response = await fetch('/api/ask', {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ 
                 question: question,
                 session_id: sessionId 
@@ -461,6 +310,7 @@ async function sendChatMessage() {
         });
         
         const data = await response.json();
+        console.log('💬 Answer:', data);
         
         if (!response.ok) {
             throw new Error(data.error || 'Failed to get answer');
@@ -473,6 +323,7 @@ async function sendChatMessage() {
         addChatMessage(data.answer, 'assistant');
         
     } catch (error) {
+        console.error('❌ Chat error:', error);
         document.getElementById(loadingId).remove();
         addChatMessage(`Sorry, I encountered an error: ${error.message}`, 'assistant');
         showToast(error.message, 'error');
@@ -482,19 +333,22 @@ async function sendChatMessage() {
 function addChatMessage(text, sender, isLoading = false) {
     const messagesContainer = document.getElementById('chatMessages');
     
-    // Remove welcome message if exists
-    const welcome = messagesContainer.querySelector('.chat-welcome');
-    if (welcome) {
-        welcome.remove();
+    // Remove placeholder text if exists
+    const placeholder = messagesContainer.querySelector('.text-slate-400');
+    if (placeholder && placeholder.closest('.text-center')) {
+        placeholder.closest('.text-center').remove();
     }
     
-    const messageId = `msg-${Date.now()}`;
+    const messageId = `msg-${Date.now()}-${Math.random()}`;
     const messageDiv = document.createElement('div');
     messageDiv.id = messageId;
-    messageDiv.className = `chat-message ${sender}`;
+    messageDiv.className = `mb-4 ${sender === 'user' ? 'text-right' : 'text-left'}`;
+    
+    const bubbleClass = sender === 'user' 
+        ? 'inline-block bg-secondary text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%]'
+        : 'inline-block bg-slate-100 text-slate-800 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[80%]';
     
-    const bubbleClass = isLoading ? 'chat-bubble loading' : 'chat-bubble';
-    messageDiv.innerHTML = `<div class="${bubbleClass}">${escapeHtml(text)}</div>`;
+    messageDiv.innerHTML = `<div class="${bubbleClass} ${isLoading ? 'animate-pulse' : ''}">${escapeHtml(text)}</div>`;
     
     messagesContainer.appendChild(messageDiv);
     messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -502,30 +356,66 @@ function addChatMessage(text, sender, isLoading = false) {
     return messageId;
 }
 
-// ===== LOADING OVERLAY =====
-function showLoading(message = 'Processing...') {
-    const overlay = document.getElementById('loadingOverlay');
-    if (overlay) {
-        overlay.querySelector('p').textContent = message;
-        overlay.classList.remove('hidden');
+// ===== SUMMARY GENERATION =====
+async function generateSummary() {
+    if (!sessionId) {
+        showToast('Please upload a lab report first', 'error');
+        return;
     }
-}
-
-function hideLoading() {
-    const overlay = document.getElementById('loadingOverlay');
-    if (overlay) {
-        overlay.classList.add('hidden');
+    
+    console.log('📊 Generating summary...');
+    
+    const summaryContent = document.getElementById('summaryContent');
+    summaryContent.innerHTML = '<div class="text-center py-10"><div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-200 border-t-secondary"></div><p class="text-secondary mt-3">Generating summary...</p></div>';
+    
+    try {
+        const response = await fetch('/api/summary', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ session_id: sessionId })
+        });
+        
+        const data = await response.json();
+        console.log('📊 Summary:', data);
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to generate summary');
+        }
+        
+        // Display summary
+        summaryContent.innerHTML = `
+            <div class="prose max-w-none">
+                <div class="text-slate-700 leading-relaxed whitespace-pre-wrap">${escapeHtml(data.summary)}</div>
+            </div>
+        `;
+        
+        showToast('✓ Summary generated!', 'success');
+        
+    } catch (error) {
+        console.error('❌ Summary error:', error);
+        summaryContent.innerHTML = '<div class="text-center text-slate-400 py-10"><p>Error generating summary. Please try again.</p></div>';
+        showToast('Error: ' + error.message, 'error');
     }
 }
 
 // ===== TOAST NOTIFICATIONS =====
 function showToast(message, type = 'info') {
     const toast = document.getElementById('toast');
+    
+    const colors = {
+        success: 'bg-green-600',
+        error: 'bg-red-600',
+        info: 'bg-blue-600'
+    };
+    
     toast.textContent = message;
-    toast.className = `toast ${type} show`;
+    toast.className = `fixed bottom-5 right-5 ${colors[type] || colors.info} text-white px-6 py-3 rounded-lg shadow-2xl z-50 transform transition-all duration-300`;
+    toast.style.transform = 'translateY(0)';
+    toast.style.opacity = '1';
     
     setTimeout(() => {
-        toast.classList.remove('show');
+        toast.style.transform = 'translateY(100px)';
+        toast.style.opacity = '0';
     }, 4000);
 }
 
@@ -535,36 +425,4 @@ function escapeHtml(text) {
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
-}
-
-// ===== SMOOTH SCROLL FOR ALL LINKS =====
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-            target.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start'
-            });
-        }
-    });
-});
-
-// ===== CLOSE MODALS ON ESC =====
-document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-        const chatModal = document.getElementById('chatModal');
-        if (chatModal && !chatModal.classList.contains('hidden')) {
-            closeChat();
-        }
-    }
-});
-
-// ===== CLOSE MODALS ON OUTSIDE CLICK =====
-document.addEventListener('click', (e) => {
-    const chatModal = document.getElementById('chatModal');
-    if (e.target === chatModal) {
-        closeChat();
-    }
-});
+}