Update static/script.js

static/script.js

@@ -1,385 +1,485 @@
-// ===== GLOBAL STATE =====
-let currentResults = null;
-let explanations = null;
-
-// ===== INITIALIZATION =====
-document.addEventListener('DOMContentLoaded', () => {
-    // Navigation is now handled via onclick="showSection", but we init other listeners
-    initFileUpload();
-    initScrollAnimations();
-    initEnterKey();
-});
-
-// ===== NAVIGATION (Compatible with Tailwind HTML) =====
-function showSection(sectionId) {
-    // Hide all sections
-    document.querySelectorAll('.section').forEach(sec => {
-        sec.classList.remove('active');
-        sec.style.display = 'none';
-    });
-
-    // Show target section
-    const target = document.getElementById(sectionId);
-    if (target) {
-        target.style.display = 'block';
-        // Small timeout to allow display:block to apply before adding active class for animation
-        setTimeout(() => {
-            target.classList.add('active');
-        }, 10);
-        
-        // Scroll to top
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-}
-
-// ===== SCROLL ANIMATIONS =====
-function initScrollAnimations() {
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.remove('opacity-0', 'translate-y-4');
-                entry.target.classList.add('opacity-100', 'translate-y-0');
-            }
-        });
-    }, { threshold: 0.1 });
-    
-    // Add animation classes to cards
-    document.querySelectorAll('.feature-card, .upload-card').forEach(card => {
-        card.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-4');
-        observer.observe(card);
-    });
-}
-
-// ===== FILE UPLOAD =====
-function initFileUpload() {
-    const fileInput = document.getElementById('fileInput');
-    const uploadArea = document.getElementById('uploadArea');
-    
-    if (!fileInput || !uploadArea) return;
-    
-    // Click to upload (handled by onclick in HTML, but keeping listener just in case)
-    fileInput.addEventListener('change', handleFileSelect);
-    
-    // Drag and drop Visuals
-    uploadArea.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        // Add Tailwind classes for drag state
-        uploadArea.classList.add('border-secondary', 'bg-blue-50', 'scale-[1.02]');
-    });
-    
-    uploadArea.addEventListener('dragleave', () => {
-        // Remove Tailwind classes
-        uploadArea.classList.remove('border-secondary', 'bg-blue-50', 'scale-[1.02]');
-    });
-    
-    uploadArea.addEventListener('drop', (e) => {
-        e.preventDefault();
-        uploadArea.classList.remove('border-secondary', 'bg-blue-50', 'scale-[1.02]');
-        
-        const file = e.dataTransfer.files[0];
-        if (file && file.type === 'application/pdf') {
-            uploadFile(file);
-        } else {
-            showToast('Please upload a PDF file', 'error');
-        }
-    });
-}
-
-function handleFileSelect(e) {
-    const file = e.target.files[0];
-    if (file) {
-        uploadFile(file);
-    }
-}
-
-async function uploadFile(file) {
-    const formData = new FormData();
-    formData.append('file', file);
-    
-    // Show progress
-    document.getElementById('uploadArea').classList.add('hidden');
-    document.getElementById('uploadProgress').classList.remove('hidden');
-    
-    try {
-        const response = await fetch('/api/upload', {
-            method: 'POST',
-            body: formData
-        });
-        
-        const data = await response.json();
-        
-        if (!response.ok) {
-            throw new Error(data.error || 'Upload failed');
-        }
-        
-        currentResults = data.results;
-        showToast(`✓ Found ${data.count} lab results!`, 'success');
-        
-        // Generate explanations
-        await generateExplanations();
-        
-        // Display results
-        displayResults();
-        
-        // Switch to results tab automatically
-        showSection('results-section');
-        
-    } catch (error) {
-        showToast(error.message, 'error');
-        resetUploadArea();
-    }
-}
-
-async function generateExplanations() {
-    // Optional: show a mini toast or loading indicator
-    try {
-        const response = await fetch('/api/explain', { method: 'POST' });
-        const data = await response.json();
-        if (!response.ok) throw new Error(data.error);
-        explanations = data.explanations;
-    } catch (error) {
-        console.warn('Auto-explanation generation failed:', error);
-        // We continue anyway, results will just say "Loading..." or show basic info
-    }
-}
-
-function displayResults() {
-    const container = document.getElementById('resultsContainer');
-    
-    if (!currentResults || currentResults.length === 0) {
-        container.innerHTML = '<div class="text-center text-gray-500 py-10">No results found</div>';
-        return;
-    }
-    
-    // Update summary stats in the Summary tab
-    updateSummaryStats();
-    
-    // Clear container
-    container.innerHTML = '';
-    
-    // Create result cards with Tailwind Styling
-    currentResults.forEach((result, index) => {
-        const card = createResultCard(result, index);
-        container.appendChild(card);
-    });
-    
-    // Reset upload area for next time
-    resetUploadArea();
-}
-
-function updateSummaryStats() {
-    const stats = { normal: 0, high: 0, low: 0 };
-    
-    currentResults.forEach(result => {
-        // Normalize status string
-        const status = result.status ? result.status.toLowerCase() : 'normal';
-        if (status.includes('high')) stats.high++;
-        else if (status.includes('low')) stats.low++;
-        else stats.normal++;
-    });
-    
-    // Update the DOM elements in the Summary Section
-    document.getElementById('normalCount').textContent = stats.normal;
-    document.getElementById('highCount').textContent = stats.high;
-    document.getElementById('lowCount').textContent = stats.low;
-    
-    // Reveal the stats container
-    const statsContainer = document.getElementById('summaryStats');
-    if(statsContainer) statsContainer.classList.remove('hidden');
-    
-    const generateBtn = document.getElementById('generateSummaryBtn');
-    if(generateBtn) generateBtn.classList.remove('hidden');
-}
-
-function createResultCard(result, index) {
-    const card = document.createElement('div');
-    // TAILWIND STYLING: Card container
-    card.className = 'bg-white rounded-xl shadow-sm border border-slate-100 p-5 mb-4 hover:shadow-md transition-shadow';
-    
-    // Status colors
-    let statusColors = 'bg-green-100 text-green-700'; // Default normal
-    let borderClass = 'border-l-4 border-green-500';
-    
-    const statusLower = result.status ? result.status.toLowerCase() : '';
-    if (statusLower.includes('high')) {
-        statusColors = 'bg-red-100 text-red-700';
-        borderClass = 'border-l-4 border-red-500';
-    } else if (statusLower.includes('low')) {
-        statusColors = 'bg-yellow-100 text-yellow-800';
-        borderClass = 'border-l-4 border-yellow-500';
-    }
-
-    const explanation = explanations && explanations[result.test_name] 
-        ? explanations[result.test_name] 
-        : 'Analysis available in Chat or Summary.';
-    
-    // HTML Structure using Tailwind
-    card.innerHTML = `
-        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 ${borderClass} pl-4">
-            <div class="flex-grow">
-                <h3 class="text-lg font-bold text-slate-800">${escapeHtml(result.test_name)}</h3>
-                <p class="text-sm text-slate-500">Ref Range: ${escapeHtml(result.reference_range || 'N/A')}</p>
-            </div>
-            
-            <div class="flex items-center gap-3 w-full md:w-auto justify-between md:justify-end">
-                <span class="text-xl font-bold text-slate-700">${escapeHtml(result.value)} <span class="text-sm font-normal text-slate-500">${escapeHtml(result.unit)}</span></span>
-                <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide ${statusColors}">
-                    ${escapeHtml(result.status)}
-                </span>
-            </div>
-        </div>
-        
-        <div class="mt-4 pt-3 border-t border-slate-50">
-            <p class="text-sm text-slate-600 leading-relaxed">
-                <span class="font-semibold text-primary">Insight:</span> ${escapeHtml(explanation)}
-            </p>
-        </div>
-    `;
-    
-    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 (!currentResults) {
-        showToast('Please upload a lab report first', 'error');
-        return;
-    }
-    
-    const contentDiv = document.getElementById('summaryContent');
-    contentDiv.innerHTML = '<div class="flex justify-center p-8"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>';
-    
-    try {
-        const response = await fetch('/api/summary');
-        const data = await response.json();
-        
-        if (!response.ok) throw new Error(data.error);
-        
-        // Render summary with Markdown-like paragraphs
-        contentDiv.innerHTML = `
-            <div class="prose prose-slate max-w-none">
-                <h3 class="text-xl font-semibold mb-4 text-primary">Analysis Report</h3>
-                <div class="text-slate-700 leading-relaxed whitespace-pre-line">
-                    ${escapeHtml(data.summary).replace(/\n/g, '<br>')}
-                </div>
-            </div>
-        `;
-        
-    } catch (error) {
-        showToast('Error: ' + error.message, 'error');
-        contentDiv.innerHTML = '<p class="text-red-500 text-center">Failed to generate summary.</p>';
-    }
-}
-
-// ===== CHAT FUNCTIONALITY =====
-function initEnterKey() {
-    const input = document.getElementById('chatInput');
-    if (input) {
-        input.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') askQuestion();
-        });
-    }
-}
-
-async function askQuestion() {
-    if (!currentResults) {
-        showToast('Please upload a lab report first', 'error');
-        return;
-    }
-
-    const input = document.getElementById('chatInput');
-    const question = input.value.trim();
-    
-    if (!question) return;
-    
-    // Clear input
-    input.value = '';
-    
-    // Add user message
-    addChatMessage(question, 'user');
-    
-    // Show loading
-    const loadingId = addChatMessage('Analyzing...', 'assistant', true);
-    
-    try {
-        const response = await fetch('/api/ask', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ question })
-        });
-        
-        const data = await response.json();
-        if (!response.ok) throw new Error(data.error);
-        
-        // Remove loading
-        const loadingEl = document.getElementById(loadingId);
-        if(loadingEl) loadingEl.remove();
-        
-        // Add response
-        addChatMessage(data.answer, 'assistant');
-        
-    } catch (error) {
-        const loadingEl = document.getElementById(loadingId);
-        if(loadingEl) loadingEl.remove();
-        showToast(error.message, 'error');
-    }
-}
-
-function addChatMessage(text, sender, isLoading = false) {
-    const container = document.getElementById('chatMessages');
-    
-    const wrapper = document.createElement('div');
-    // Flex alignment based on sender
-    wrapper.className = `flex w-full mb-4 ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
-    
-    const bubble = document.createElement('div');
-    // Bubble Styling
-    const baseStyle = "max-w-[85%] rounded-2xl px-5 py-3 shadow-sm text-sm leading-relaxed";
-    const userStyle = "bg-secondary text-white rounded-br-none"; // Blue bubble
-    const aiStyle = "bg-slate-100 text-slate-800 rounded-tl-none border border-slate-200"; // Grey bubble
-    
-    bubble.className = `${baseStyle} ${sender === 'user' ? userStyle : aiStyle} ${isLoading ? 'animate-pulse' : ''}`;
-    
-    bubble.innerHTML = escapeHtml(text).replace(/\n/g, '<br>');
-    if (isLoading) bubble.id = `loading-${Date.now()}`;
-    
-    wrapper.appendChild(bubble);
-    container.appendChild(wrapper);
-    
-    // Scroll to bottom
-    container.scrollTop = container.scrollHeight;
-    
-    return bubble.id;
-}
-
-// ===== TOAST NOTIFICATIONS =====
-function showToast(message, type = 'info') {
-    const toast = document.getElementById('toast');
-    toast.textContent = message;
-    
-    // Tailwind classes for toast
-    toast.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-2xl transform transition-all duration-300 z-50 text-white font-medium translate-y-0 opacity-100`;
-    
-    if (type === 'error') toast.classList.add('bg-red-600');
-    else if (type === 'success') toast.classList.add('bg-green-600');
-    else toast.classList.add('bg-slate-800');
-    
-    setTimeout(() => {
-        toast.classList.remove('translate-y-0', 'opacity-100');
-        toast.classList.add('translate-y-20', 'opacity-0');
-    }, 4000);
-}
-
-// ===== UTILS =====
-function escapeHtml(text) {
-    if (!text) return '';
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
+// ===== GLOBAL STATE =====
+let currentResults = null;
+let explanations = null;
+let sessionId = null; // Store session ID
+
+// ===== 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');
+        });
+    }
+}
+
+// ===== 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 });
+    
+    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);
+    });
+}
+
+// ===== FILE UPLOAD =====
+function initFileUpload() {
+    const fileInput = document.getElementById('fileInput');
+    const uploadArea = document.getElementById('uploadArea');
+    
+    if (!fileInput || !uploadArea) return;
+    
+    // Click to upload
+    fileInput.addEventListener('change', handleFileSelect);
+    
+    // Drag and drop
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+    
+    uploadArea.addEventListener('dragleave', () => {
+        uploadArea.classList.remove('dragover');
+    });
+    
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        
+        const file = e.dataTransfer.files[0];
+        if (file && file.type === 'application/pdf') {
+            uploadFile(file);
+        } else {
+            showToast('Please upload a PDF file', 'error');
+        }
+    });
+}
+
+function handleFileSelect(e) {
+    const file = e.target.files[0];
+    if (file) {
+        uploadFile(file);
+    }
+}
+
+async function uploadFile(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    // Show progress
+    document.getElementById('uploadArea').classList.add('hidden');
+    document.getElementById('uploadProgress').classList.remove('hidden');
+    
+    try {
+        const response = await fetch('/api/upload', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Upload failed');
+        }
+        
+        // Store session ID and results
+        sessionId = data.session_id;
+        currentResults = data.results;
+        
+        console.log('Session ID:', sessionId);
+        console.log('Results:', currentResults);
+        
+        showToast(`✓ Found ${data.count} lab results!`, 'success');
+        
+        // Generate explanations
+        await generateExplanations();
+        
+        // Display results
+        displayResults();
+        
+        // Scroll to results
+        setTimeout(() => {
+            document.getElementById('results').scrollIntoView({ 
+                behavior: 'smooth' 
+            });
+        }, 500);
+        
+    } catch (error) {
+        showToast(error.message, 'error');
+        resetUploadArea();
+    }
+}
+
+async function generateExplanations() {
+    showLoading('Generating AI explanations... This may take 30-60 seconds.');
+    
+    try {
+        const response = await fetch('/api/explain', {
+            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 explanations');
+        }
+        
+        explanations = data.explanations;
+        console.log('Explanations:', explanations);
+        
+    } catch (error) {
+        showToast('Error generating explanations: ' + error.message, 'error');
+        // Continue anyway to show results
+    } finally {
+        hideLoading();
+    }
+}
+
+function displayResults() {
+    const resultsSection = document.getElementById('results');
+    const container = document.getElementById('resultsContainer');
+    
+    if (!currentResults || currentResults.length === 0) {
+        container.innerHTML = '<p class="empty-message">No results found</p>';
+        return;
+    }
+    
+    // Show results section
+    resultsSection.classList.remove('hidden');
+    
+    // Update summary stats
+    updateSummaryStats();
+    
+    // Clear container
+    container.innerHTML = '';
+    
+    // Create result cards
+    currentResults.forEach((result, index) => {
+        const card = createResultCard(result, index);
+        container.appendChild(card);
+    });
+    
+    // Reset upload area
+    resetUploadArea();
+}
+
+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;
+}
+
+function createResultCard(result, index) {
+    const card = document.createElement('div');
+    card.className = 'result-card';
+    card.style.setProperty('--i', index + 1);
+    
+    const statusClass = `status-${result.status}`;
+    const explanation = explanations && explanations[result.test_name] 
+        ? explanations[result.test_name] 
+        : 'Explanation is being generated. Click "Ask Questions" to learn more about this result.';
+    
+    card.innerHTML = `
+        <div class="result-header">
+            <div>
+                <h3 class="result-name">${escapeHtml(result.test_name)}</h3>
+                <p class="result-range">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}">${result.status}</span>
+            </div>
+        </div>
+        <div class="result-explanation">
+            <strong>💡 What does this mean?</strong>
+            <p>${escapeHtml(explanation)}</p>
+        </div>
+    `;
+    
+    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);
+    
+    // Close on click outside
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            modal.remove();
+        }
+    });
+}
+
+// ===== 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');
+}
+
+function handleChatKeypress(event) {
+    if (event.key === 'Enter') {
+        sendChatMessage();
+    }
+}
+
+async function sendChatMessage() {
+    const input = document.getElementById('chatInput');
+    const question = input.value.trim();
+    
+    if (!question) return;
+    
+    if (!sessionId) {
+        showToast('Session expired. Please upload your report again.', 'error');
+        return;
+    }
+    
+    // Clear input
+    input.value = '';
+    
+    // Add user message
+    addChatMessage(question, 'user');
+    
+    // Show loading message
+    const loadingId = addChatMessage('Thinking...', 'assistant', true);
+    
+    try {
+        const response = await fetch('/api/ask', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ 
+                question: question,
+                session_id: sessionId 
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to get answer');
+        }
+        
+        // Remove loading message
+        document.getElementById(loadingId).remove();
+        
+        // Add assistant response
+        addChatMessage(data.answer, 'assistant');
+        
+    } catch (error) {
+        document.getElementById(loadingId).remove();
+        addChatMessage(`Sorry, I encountered an error: ${error.message}`, 'assistant');
+        showToast(error.message, 'error');
+    }
+}
+
+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();
+    }
+    
+    const messageId = `msg-${Date.now()}`;
+    const messageDiv = document.createElement('div');
+    messageDiv.id = messageId;
+    messageDiv.className = `chat-message ${sender}`;
+    
+    const bubbleClass = isLoading ? 'chat-bubble loading' : 'chat-bubble';
+    messageDiv.innerHTML = `<div class="${bubbleClass}">${escapeHtml(text)}</div>`;
+    
+    messagesContainer.appendChild(messageDiv);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    
+    return messageId;
+}
+
+// ===== LOADING OVERLAY =====
+function showLoading(message = 'Processing...') {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.querySelector('p').textContent = message;
+        overlay.classList.remove('hidden');
+    }
+}
+
+function hideLoading() {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+    }
+}
+
+// ===== TOAST NOTIFICATIONS =====
+function showToast(message, type = 'info') {
+    const toast = document.getElementById('toast');
+    toast.textContent = message;
+    toast.className = `toast ${type} show`;
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 4000);
+}
+
+// ===== UTILITY FUNCTIONS =====
+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();
+    }
+});