Update index.html

index.html

@@ -29,6 +29,8 @@
             --color-assist-text: #212529;
             --color-danger: #d90429;
             --color-danger-bg: #fff0f0;
+            --color-success: #28a745;
+            --color-success-bg: #f0fff4;
         }
 
         * {
@@ -87,6 +89,9 @@
             padding: 16px 24px;
             background-color: #fdfdfe;
             border-bottom: 1px solid var(--color-border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
         
         .api-key-group {
@@ -116,6 +121,37 @@
             margin-top: 8px;
         }
 
+        /* --- Header Actions --- */
+        .header-actions {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .action-button {
+            padding: 6px 12px;
+            border: 1px solid var(--color-border);
+            background-color: var(--color-card);
+            border-radius: 6px;
+            font-size: 0.85rem;
+            cursor: pointer;
+            font-family: var(--font-main);
+            transition: all 0.2s;
+        }
+        
+        .action-button:hover {
+            background-color: var(--color-assist-msg);
+            border-color: var(--color-accent);
+        }
+        
+        .action-button.danger {
+            color: var(--color-danger);
+            border-color: var(--color-danger);
+        }
+        
+        .action-button.danger:hover {
+            background-color: var(--color-danger-bg);
+        }
+
         /* --- Chat Box --- */
         #chat-box {
             flex-grow: 1;
@@ -174,6 +210,12 @@
             border: 1px solid var(--color-danger);
         }
 
+        .message.success {
+            background-color: var(--color-success-bg);
+            color: var(--color-success);
+            border: 1px solid var(--color-success);
+        }
+
         /* --- Markdown Formatting for Assistant --- */
         .message.assistant strong { font-weight: 600; }
         .message.assistant h1, .message.assistant h2, .message.assistant h3 {
@@ -231,10 +273,13 @@
             flex-wrap: wrap;
             gap: 8px;
             margin-bottom: 12px;
+            align-items: center;
         }
         
         .file-pill {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
             background-color: var(--color-assist-msg);
             color: var(--color-text);
             padding: 5px 12px;
@@ -242,6 +287,26 @@
             font-size: 0.8rem;
             font-weight: 500;
         }
+        
+        .file-remove {
+            background: none;
+            border: none;
+            color: var(--color-danger);
+            cursor: pointer;
+            font-size: 0.7rem;
+            padding: 0;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .file-remove:hover {
+            background-color: var(--color-danger);
+            color: white;
+        }
 
         .prompt-input-group {
             display: flex;
@@ -332,6 +397,8 @@
         /* --- Debug/Refined Prompt Area --- */
         .debug-container {
             padding: 12px 24px 4px;
+            border-top: 1px solid var(--color-border);
+            background-color: #f8f9fa;
         }
         
         .debug-container summary {
@@ -339,15 +406,32 @@
             color: var(--color-text-light);
             cursor: pointer;
             font-weight: 500;
+            padding: 8px 0;
+            list-style: none;
+        }
+        
+        .debug-container summary::-webkit-details-marker {
+            display: none;
+        }
+        
+        .debug-container summary::before {
+            content: '▶';
+            display: inline-block;
+            margin-right: 8px;
+            transition: transform 0.2s;
+        }
+        
+        .debug-container[open] summary::before {
+            transform: rotate(90deg);
         }
         
         #debug-box {
-            display: block; /* Content is shown when <details> is open */
+            display: none; /* Hidden by default */
             font-size: 0.8rem;
-            background-color: var(--color-bg);
+            background-color: var(--color-card);
             border: 1px solid var(--color-border);
             padding: 12px;
-            margin-top: 8px;
+            margin: 8px 0 0 0;
             border-radius: 8px;
             font-family: monospace;
             line-height: 1.4;
@@ -356,6 +440,27 @@
             white-space: pre-wrap;
             word-wrap: break-word;
         }
+        
+        /* Show debug box when details are open */
+        .debug-container[open] #debug-box,
+        .debug-box-visible {
+            display: block;
+        }
+        
+        /* Hide the native details arrow */
+        .debug-container summary {
+            display: none;
+        }
+
+        /* --- Conversation Info --- */
+        .conversation-info {
+            text-align: center;
+            padding: 8px 16px;
+            font-size: 0.85rem;
+            color: var(--color-text-light);
+            background-color: var(--color-success-bg);
+            border-bottom: 1px solid var(--color-border);
+        }
 
     </style>
 </head>
@@ -364,7 +469,7 @@
     <div class="container">
         <header>
             <h1>🧠 Carver Excel Analyst</h1>
-            <p class="caption">This AI uses a 2-step process to refine your query and provide an expert analysis.</p>
+            <p class="caption">This AI uses a 2-step process to refine your query and provide an expert analysis. <b>Upload files once, ask multiple questions!</b></p>
         </header>
 
         <div class="config-bar">
@@ -372,14 +477,34 @@
                 <label for="api-key-input">API Key:</label>
                 <input type="password" id="api-key-input" placeholder="Enter your Google API Key">
             </div>
-            <div class="api-key-warning">🔴 For development only. Your key is visible in this browser.</div>
+            <div class="header-actions">
+                <button class="action-button success" id="export-pdf-btn" title="Export conversation to PDF">
+                    📄 Export PDF
+                </button>
+                <button class="action-button" id="toggle-details-btn" title="Show/Hide analysis details">
+                    👁️ Show Analysis Details
+                </button>
+                <button class="action-button" id="new-conversation-btn" title="Start a new conversation">
+                    🔄 New Conversation
+                </button>
+            </div>
+        </div>
+
+        <div class="conversation-info" id="conversation-info" style="display: none;">
+            💾 Files remain available for this conversation. Ask follow-up questions anytime!
         </div>
 
         <div id="chat-box">
             <div class="message assistant">
-                Hello! Please provide your API key, then upload your files (Excel, PDF, Images) and ask a question.
+                Welcome to Carver Excel Analyst! This is a <b>conversational chatbot</b> that remembers your files and conversation.
                 <br><br>
-                <b>Note:</b> Excel files (`.xlsx`, `.xls`) will be automatically converted to CSV text for analysis.
+                <b>How it works:</b>
+                <br>• Upload your Excel, PDF, or image files once
+                <br>• Ask questions about the data
+                <br>• Files stay available for follow-up questions
+                <br>• Start a new conversation anytime to clear history
+                <br><br>
+                <b>Please provide your API key and upload your files to begin!</b>
             </div>
         </div>
         
@@ -402,11 +527,8 @@
                 </button>
             </div>
             
-            <div class="debug-container">
-                <details id="debug-details">
-                    <summary>Show Analysis Details</summary>
-                    <div id="debug-box">No analysis details yet.</div>
-                </details>
+            <div class="debug-container" id="debug-container">
+                <div id="debug-box">No analysis details yet.</div>
             </div>
         </div>
     </div>
@@ -424,15 +546,21 @@
         const sendButton = document.getElementById("send-button");
         const chatBox = document.getElementById("chat-box");
         const statusText = document.getElementById("status-text");
-        const debugDetails = document.getElementById("debug-details");
         const debugBox = document.getElementById("debug-box");
+        const newConversationBtn = document.getElementById("new-conversation-btn");
+        const conversationInfo = document.getElementById("conversation-info");
+        const exportPdfBtn = document.getElementById("export-pdf-btn");
+        const toggleDetailsBtn = document.getElementById("toggle-details-btn");
 
         // --- Model Configuration ---
         const GENERATOR_MODEL_NAME = "gemini-2.0-flash";
         const ANALYST_MODEL_NAME = "gemini-2.5-flash";
         
-        // --- Store uploaded files ---
-        let uploadedFiles = [];
+        // --- Global State ---
+        let uploadedFiles = []; // Persistent file storage
+        let conversationHistory = []; // Store conversation messages
+        let conversationStartTime = Date.now();
+        let analysisDetailsVisible = false;
 
         // --- The Main Carver Analyst System Prompt ---
         const CARVER_ANALYST_SYSTEM_PROMPT = `
@@ -442,9 +570,9 @@ NOTE: Excel files (.xlsx, .xls) have been pre-converted into structured CSV text
 ### 🎯 Mission
 Understand the provided data (CSV text, PDFs, images) and provide short, factual insights — **without making any assumptions**.  
 If any required input is missing, unclear, or conflicting, you **must first ask a short, specific clarifying question** before proceeding. Never guess, invent, or assume.
-Your goal is to make Carver’s data analysis simple, reliable, and audit-ready.
+Your goal is to make Carver's data analysis simple, reliable, and audit-ready.
 ### 🧩 Default Output (when all inputs are clear)
-1. **Executive Summary (3–6 lines)** — concise explanation answering the user’s question.
+1. **Executive Summary (3–6 lines)** — concise explanation answering the user's question.
 2. **Supporting Table (Markdown or CSV)** — key rows/columns only.
 3. **Audit Block (3–6 lines)** — list of: file(s) used (or file/sheet name for CSVs), cell/range references (or row/column names), missing or ignored fields, and formulas applied.
 Do **not** create or export a new Excel file unless the user explicitly asks for it.
@@ -454,11 +582,11 @@ Do **not** create or export a new Excel file unless the user explicitly asks for
 - Always confirm mappings if confidence <80%.
 **B. Required Data Rules**
 - For cost analysis → need \`Qty\` + \`UnitPrice\` or \`Total\`.
-- For “vs budget” → need a \`Baseline\`, \`Budget\`, or explicit reference vendor.
+- For "vs budget" → need a \`Baseline\`, \`Budget\`, or explicit reference vendor.
 - If missing, ask user directly.
 **C. No-Assumptions Policy**
 - If anything is missing or unclear: Ask before proceeding.
-- Example: “No ‘Budget’ column found. Should I use the lowest vendor total as baseline?”
+- Example: "No 'Budget' column found. Should I use the lowest vendor total as baseline?"
 **D. Validations**
 - Detect and report missing values, currency mismatches, etc., in the Audit Block.
 **E. Computation Rules**
@@ -469,7 +597,9 @@ Do **not** create or export a new Excel file unless the user explicitly asks for
 **H. Tone**
 - Professional, precise, procurement-focused.
 ### 🧭 Objective
-Act like Carver’s in-house **Excel procurement analyst** — structured, audit-traceable, and transparent. Never make assumptions. Always verify.
+Act like Carver's in-house **Excel procurement analyst** — structured, audit-traceable, and transparent. Never make assumptions. Always verify.
+
+IMPORTANT: This is a conversational chatbot. You have access to the conversation history and can refer back to previous analyses when answering follow-up questions.
 `;
 
         // --- Event Listeners ---
@@ -486,17 +616,25 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
             fileInput.click();
         });
         
-        // Update file pills
+        // Handle new conversation
+        newConversationBtn.addEventListener("click", startNewConversation);
+        
+        // Handle PDF export
+        exportPdfBtn.addEventListener("click", exportToPDF);
+        
+        // Handle analysis details toggle
+        toggleDetailsBtn.addEventListener("click", toggleAnalysisDetails);
+        
+        // Update file pills when files are selected
         fileInput.addEventListener("change", (e) => {
-            uploadedFiles = Array.from(e.target.files);
-            fileListDisplay.innerHTML = ""; // Clear existing pills
+            const newFiles = Array.from(e.target.files);
+            uploadedFiles = [...uploadedFiles, ...newFiles]; // Append, don't replace
+            updateFileDisplay();
+            fileInput.value = ""; // Reset input
+            
             if (uploadedFiles.length > 0) {
-                uploadedFiles.forEach(file => {
-                    const pill = document.createElement("span");
-                    pill.className = "file-pill";
-                    pill.textContent = file.name;
-                    fileListDisplay.appendChild(pill);
-                });
+                showSuccess(`📎 Added ${newFiles.length} file(s). Total files: ${uploadedFiles.length}`);
+                conversationInfo.style.display = "block";
             }
         });
 
@@ -515,15 +653,14 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
                 return;
             }
             if (uploadedFiles.length === 0) {
-                displayError("Please upload at least one file.");
+                displayError("Please upload at least one file first.");
                 return;
             }
 
             // --- 2. Setup UI for Loading ---
-            setLoadingState(true, "Processing files... (Excel files will be converted to text)");
+            setLoadingState(true, "Processing your question...");
             displayMessage(userPrompt, "user");
             debugBox.textContent = "Generating refined prompt..."; // Clear old debug info
-            debugDetails.open = false; // Close the details box
             
             const assistantMessageEl = displayMessage("", "assistant"); // Create empty bubble
 
@@ -534,26 +671,39 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
                 );
                 const fileParts = partsArrays.flat();
 
-                // --- 4. Initialize AI Client ---
+                // --- 4. Build conversation context ---
+                let conversationContext = "";
+                if (conversationHistory.length > 0) {
+                    conversationContext = `
+Previous conversation context:
+${conversationHistory.slice(-6).map(msg => 
+  `${msg.role.toUpperCase()}: ${msg.content.substring(0, 200)}${msg.content.length > 200 ? '...' : ''}`
+).join('\n')}
+
+`;
+                }
+
+                // --- 5. Initialize AI Client ---
                 const genAI = new GoogleGenerativeAI(apiKey);
 
-                // --- 5. STEP 1: Generate the "Better Prompt" (Normal Model) ---
+                // --- 6. STEP 1: Generate the "Better Prompt" (Normal Model) ---
                 setLoadingState(true, `Step 1/2: Thinking about your question... (${GENERATOR_MODEL_NAME})`);
                 
                 const generatorModel = genAI.getGenerativeModel({ model: GENERATOR_MODEL_NAME });
                 
                 const step1SystemPrompt = `
-                You are a prompt engineering assistant. Your job is to take a user's simple question and the attached file(s) and generate a new, detailed, and specific prompt. This new prompt will be given to a second AI, which is an expert 'Carver Excel Analyst'.
-                NOTE: The attached files may include images, PDFs, or TEXT parts that are CSV conversions of Excel sheets. The analyst is aware of this.
+You are a prompt engineering assistant. Your job is to take a user's simple question and the attached file(s) and generate a new, detailed, and specific prompt. This new prompt will be given to a second AI, which is an expert 'Carver Excel Analyst'.
+NOTE: The attached files may include images, PDFs, or TEXT parts that are CSV conversions of Excel sheets. The analyst is aware of this.
 
-                The user's question is: "${userPrompt}"
+The user's question is: "${userPrompt}"
 
-                Based on the user's question and the file(s), generate a single, clear, and actionable instruction for the expert analyst.
-                - Be specific.
-                - Ask for the final output (summary, table, audit block) as defined by the analyst's role.
-                - For example, if the user says "how much did I save?", you should generate a prompt like:
-                  "Please analyze the attached data (CSV text, PDFs, images). Identify the baseline or budget, compare all vendor totals against it, and calculate the saving amount and percentage for the lowest-cost compliant vendor. Present this in an executive summary, a comparison table, and an audit block."
-                `;
+${conversationContext}Based on the user's question and the file(s), generate a single, clear, and actionable instruction for the expert analyst.
+- Be specific.
+- Ask for the final output (summary, table, audit block) as defined by the analyst's role.
+- Consider previous conversation context when generating the prompt.
+- For example, if the user says "how much did I save?", you should generate a prompt like:
+  "Please analyze the attached data (CSV text, PDFs, images). Identify the baseline or budget, compare all vendor totals against it, and calculate the saving amount and percentage for the lowest-cost compliant vendor. Present this in an executive summary, a comparison table, and an audit block."
+`;
                 
                 const step1Contents = [
                     ...fileParts, 
@@ -567,9 +717,10 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
                 
                 // Display the refined prompt in the debug box
                 debugBox.textContent = generatedPrompt;
-                debugDetails.open = true; // Open the details box to show the new prompt
+                analysisDetailsVisible = true;
+                updateDetailsVisibility();
 
-                // --- 6. STEP 2: Get Final Answer (Reasoning Model) ---
+                // --- 7. STEP 2: Get Final Answer (Reasoning Model) ---
                 setLoadingState(true, `Step 2/2: The Carver Analyst is working... (${ANALYST_MODEL_NAME})`);
 
                 const analystModel = genAI.getGenerativeModel({
@@ -586,7 +737,7 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
                     contents: [{ parts: step2Contents }] 
                 });
 
-                // --- 7. Stream Response to Chat ---
+                // --- 8. Stream Response to Chat ---
                 let fullResponse = "";
                 for await (const chunk of result.stream) {
                     if (typeof chunk.text === 'function') {
@@ -597,23 +748,92 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
                     }
                 }
 
+                // --- 9. Save to conversation history ---
+                conversationHistory.push(
+                    { role: "user", content: userPrompt },
+                    { role: "assistant", content: fullResponse }
+                );
+
+                // Keep only last 20 messages to prevent context overflow
+                if (conversationHistory.length > 20) {
+                    conversationHistory = conversationHistory.slice(-20);
+                }
+
             } catch (error) {
                 console.error("Error:", error);
                 displayError(`An error occurred: ${error.message}`);
                 assistantMessageEl.remove(); // Remove the empty bubble
+                analysisDetailsVisible = false;
+                updateDetailsVisibility();
             } finally {
-                // --- 8. Cleanup UI ---
+                // --- 10. Cleanup UI ---
                 setLoadingState(false);
                 promptInput.value = "";
-                // Clear files after processing
-                uploadedFiles = [];
-                fileInput.value = ""; // Reset the file input
-                fileListDisplay.innerHTML = "";
             }
         }
 
         // --- Helper Functions ---
 
+        /**
+         * Start a new conversation - clears history and files
+         */
+        function startNewConversation() {
+            if (confirm("Start a new conversation? This will clear all uploaded files and conversation history.")) {
+                uploadedFiles = [];
+                conversationHistory = [];
+                conversationStartTime = Date.now();
+                
+                // Clear UI
+                chatBox.innerHTML = `
+                    <div class="message assistant">
+                        🔄 <b>New conversation started!</b> Upload your files and ask questions about them.
+                    </div>
+                `;
+                
+                updateFileDisplay();
+                conversationInfo.style.display = "none";
+                promptInput.value = "";
+                
+                showSuccess("Started new conversation!");
+            }
+        }
+
+        /**
+         * Update file display pills
+         */
+        function updateFileDisplay() {
+            fileListDisplay.innerHTML = "";
+            
+            if (uploadedFiles.length > 0) {
+                uploadedFiles.forEach((file, index) => {
+                    const pill = document.createElement("span");
+                    pill.className = "file-pill";
+                    pill.innerHTML = `
+                        ${file.name}
+                        <button class="file-remove" onclick="removeFile(${index})" title="Remove file">×</button>
+                    `;
+                    fileListDisplay.appendChild(pill);
+                });
+            }
+        }
+
+        /**
+         * Remove a specific file
+         */
+        window.removeFile = function(index) {
+            if (confirm(`Remove "${uploadedFiles[index].name}"?`)) {
+                uploadedFiles.splice(index, 1);
+                updateFileDisplay();
+                
+                if (uploadedFiles.length === 0) {
+                    conversationInfo.style.display = "none";
+                    showSuccess("All files removed");
+                } else {
+                    showSuccess(`Removed file. ${uploadedFiles.length} file(s) remaining`);
+                }
+            }
+        };
+
         /**
          * Converts a File object to an array of GoogleGenerativeAI.Part objects.
          */
@@ -701,6 +921,25 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
             return messageEl;
         }
 
+        /**
+         * Displays a success message in the chat
+         */
+        function showSuccess(text) {
+            const messageEl = document.createElement("div");
+            messageEl.className = "message success";
+            messageEl.textContent = text;
+            
+            chatBox.appendChild(messageEl);
+            scrollToBottom();
+            
+            // Auto-remove success message after 3 seconds
+            setTimeout(() => {
+                if (messageEl.parentNode) {
+                    messageEl.remove();
+                }
+            }, 3000);
+        }
+
         /**
          * Displays an error message in the chat
          */
@@ -716,6 +955,507 @@ Act like Carver’s in-house **Excel procurement analyst** — structured, audit
             chatBox.scrollTop = chatBox.scrollHeight;
         }
         
+        /**
+         * Toggle analysis details visibility
+         */
+        function toggleAnalysisDetails() {
+            analysisDetailsVisible = !analysisDetailsVisible;
+            updateDetailsVisibility();
+        }
+        
+        /**
+         * Update analysis details visibility
+         */
+        function updateDetailsVisibility() {
+            if (analysisDetailsVisible) {
+                debugBox.style.display = 'block';
+                toggleDetailsBtn.innerHTML = '👁️ Hide Analysis Details';
+            } else {
+                debugBox.style.display = 'none';
+                toggleDetailsBtn.innerHTML = '👁️ Show Analysis Details';
+            }
+        }
+        
+        /**
+         * Export conversation to PDF
+         */
+        function exportToPDF() {
+            if (conversationHistory.length === 0) {
+                displayError("No conversation to export.");
+                return;
+            }
+            
+            try {
+                // Create HTML content for PDF
+                const currentDate = new Date().toLocaleDateString();
+                const timestamp = new Date().toLocaleTimeString();
+                let htmlContent = `
+                <!DOCTYPE html>
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <title>Carver Excel Analyst - Export</title>
+                    <style>
+                        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+                        
+                        * {
+                            margin: 0;
+                            padding: 0;
+                            box-sizing: border-box;
+                        }
+                        
+                        body {
+                            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+                            line-height: 1.7;
+                            color: #1a202c;
+                            background-color: #f7fafc;
+                            font-size: 14px;
+                        }
+                        
+                        .page {
+                            background: white;
+                            max-width: 900px;
+                            margin: 20px auto;
+                            padding: 60px;
+                            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+                            border-radius: 8px;
+                            min-height: 800px;
+                        }
+                        
+                        /* Header Styles */
+                        .header {
+                            text-align: center;
+                            margin-bottom: 50px;
+                            padding-bottom: 30px;
+                            border-bottom: 3px solid #e2e8f0;
+                            position: relative;
+                        }
+                        
+                        .header::after {
+                            content: '';
+                            position: absolute;
+                            bottom: -3px;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            width: 80px;
+                            height: 3px;
+                            background: linear-gradient(135deg, #3182ce, #63b3ed);
+                        }
+                        
+                        .header h1 {
+                            color: #2d3748;
+                            font-size: 2.5rem;
+                            font-weight: 700;
+                            margin-bottom: 10px;
+                            letter-spacing: -0.025em;
+                        }
+                        
+                        .header .subtitle {
+                            color: #718096;
+                            font-size: 1.1rem;
+                            font-weight: 400;
+                            margin-bottom: 15px;
+                        }
+                        
+                        .header .metadata {
+                            display: flex;
+                            justify-content: center;
+                            gap: 30px;
+                            margin-top: 20px;
+                            font-size: 0.9rem;
+                            color: #a0aec0;
+                        }
+                        
+                        .metadata-item {
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+                        }
+                        
+                        /* Files Section */
+                        .files-section {
+                            background: linear-gradient(135deg, #f7fafc, #edf2f7);
+                            border: 2px solid #e2e8f0;
+                            border-radius: 12px;
+                            padding: 25px;
+                            margin-bottom: 40px;
+                        }
+                        
+                        .files-section h2 {
+                            color: #2d3748;
+                            font-size: 1.4rem;
+                            font-weight: 600;
+                            margin-bottom: 20px;
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+                        }
+                        
+                        .files-grid {
+                            display: grid;
+                            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                            gap: 15px;
+                            margin-top: 15px;
+                        }
+                        
+                        .file-card {
+                            background: white;
+                            padding: 15px 20px;
+                            border-radius: 8px;
+                            border: 1px solid #e2e8f0;
+                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+                            transition: all 0.2s ease;
+                        }
+                        
+                        .file-card:hover {
+                            transform: translateY(-2px);
+                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                        }
+                        
+                        .file-name {
+                            font-weight: 600;
+                            color: #2d3748;
+                            margin-bottom: 5px;
+                        }
+                        
+                        .file-size {
+                            color: #718096;
+                            font-size: 0.85rem;
+                        }
+                        
+                        /* Conversation Entries */
+                        .conversation-section {
+                            margin-bottom: 40px;
+                        }
+                        
+                        .conversation-entry {
+                            background: white;
+                            border-radius: 12px;
+                            margin-bottom: 30px;
+                            overflow: hidden;
+                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+                            border: 1px solid #e2e8f0;
+                        }
+                        
+                        .user-entry {
+                            border-left: 4px solid #3182ce;
+                        }
+                        
+                        .assistant-entry {
+                            border-left: 4px solid #38a169;
+                        }
+                        
+                        .entry-header {
+                            padding: 20px 25px 15px;
+                            display: flex;
+                            align-items: center;
+                            gap: 12px;
+                            background: linear-gradient(135deg, #f7fafc, #edf2f7);
+                        }
+                        
+                        .user-entry .entry-header {
+                            background: linear-gradient(135deg, #ebf8ff, #bee3f8);
+                        }
+                        
+                        .assistant-entry .entry-header {
+                            background: linear-gradient(135deg, #f0fff4, #c6f6d5);
+                        }
+                        
+                        .role-icon {
+                            width: 32px;
+                            height: 32px;
+                            border-radius: 50%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            font-weight: 600;
+                            font-size: 0.8rem;
+                            color: white;
+                        }
+                        
+                        .user-entry .role-icon {
+                            background: #3182ce;
+                        }
+                        
+                        .assistant-entry .role-icon {
+                            background: #38a169;
+                        }
+                        
+                        .role-text {
+                            font-weight: 600;
+                            font-size: 1.1rem;
+                            color: #2d3748;
+                        }
+                        
+                        .timestamp {
+                            margin-left: auto;
+                            color: #718096;
+                            font-size: 0.85rem;
+                        }
+                        
+                        .entry-content {
+                            padding: 25px;
+                            background: white;
+                        }
+                        
+                        /* Message Content Styling */
+                        .message-content {
+                            font-size: 0.95rem;
+                            line-height: 1.8;
+                        }
+                        
+                        .user-entry .message-content {
+                            color: #2d3748;
+                        }
+                        
+                        .assistant-entry .message-content {
+                            color: #2d3748;
+                        }
+                        
+                        /* Markdown Styling */
+                        .message-content h1, .message-content h2, .message-content h3 {
+                            color: #2d3748;
+                            margin-top: 1.5em;
+                            margin-bottom: 0.8em;
+                            font-weight: 600;
+                        }
+                        
+                        .message-content h1 {
+                            font-size: 1.4rem;
+                            border-bottom: 2px solid #e2e8f0;
+                            padding-bottom: 8px;
+                        }
+                        
+                        .message-content h2 {
+                            font-size: 1.25rem;
+                            color: #3182ce;
+                        }
+                        
+                        .message-content h3 {
+                            font-size: 1.1rem;
+                            color: #38a169;
+                        }
+                        
+                        .message-content strong {
+                            font-weight: 600;
+                            color: #2d3748;
+                        }
+                        
+                        .message-content table {
+                            width: 100%;
+                            border-collapse: collapse;
+                            margin: 20px 0;
+                            font-size: 0.9rem;
+                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                            border-radius: 8px;
+                            overflow: hidden;
+                        }
+                        
+                        .message-content th {
+                            background: linear-gradient(135deg, #3182ce, #63b3ed);
+                            color: white;
+                            padding: 15px 12px;
+                            text-align: left;
+                            font-weight: 600;
+                        }
+                        
+                        .message-content td {
+                            padding: 12px;
+                            border-bottom: 1px solid #e2e8f0;
+                            background: white;
+                        }
+                        
+                        .message-content tr:nth-child(even) td {
+                            background: #f7fafc;
+                        }
+                        
+                        .message-content tr:hover td {
+                            background: #edf2f7;
+                        }
+                        
+                        .message-content code {
+                            background: #f7fafc;
+                            padding: 3px 8px;
+                            border-radius: 4px;
+                            font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
+                            font-size: 0.85rem;
+                            color: #d53f8c;
+                            border: 1px solid #e2e8f0;
+                        }
+                        
+                        .message-content pre {
+                            background: #1a202c;
+                            color: #f7fafc;
+                            padding: 20px;
+                            border-radius: 8px;
+                            overflow-x: auto;
+                            margin: 20px 0;
+                            border: 1px solid #2d3748;
+                        }
+                        
+                        .message-content pre code {
+                            background: transparent;
+                            padding: 0;
+                            color: #f7fafc;
+                            border: none;
+                            font-size: 0.85rem;
+                        }
+                        
+                        .message-content blockquote {
+                            border-left: 4px solid #3182ce;
+                            padding-left: 20px;
+                            margin: 20px 0;
+                            background: #f7fafc;
+                            padding: 15px 20px;
+                            border-radius: 0 8px 8px 0;
+                            color: #4a5568;
+                        }
+                        
+                        /* Audit Block Styling */
+                        .audit-block {
+                            background: linear-gradient(135deg, #fed7d7, #feb2b2);
+                            border: 2px solid #fc8181;
+                            border-radius: 8px;
+                            padding: 20px;
+                            margin-top: 25px;
+                        }
+                        
+                        .audit-block h3 {
+                            color: #c53030;
+                            margin-top: 0;
+                            margin-bottom: 15px;
+                            font-weight: 600;
+                        }
+                        
+                        .audit-block ul {
+                            margin-left: 20px;
+                        }
+                        
+                        .audit-block li {
+                            margin-bottom: 5px;
+                        }
+                        
+                        /* Print Styles */
+                        @media print {
+                            body {
+                                background: white;
+                            }
+                            
+                            .page {
+                                margin: 0;
+                                padding: 40px;
+                                box-shadow: none;
+                                border-radius: 0;
+                            }
+                            
+                            .conversation-entry {
+                                break-inside: avoid;
+                                page-break-inside: avoid;
+                            }
+                        }
+                        
+                        /* Page Breaks */
+                        .page-break {
+                            page-break-before: always;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <div class="page">
+                        <div class="header">
+                            <h1>🧠 Carver Excel Analyst</h1>
+                            <div class="subtitle">Professional Data Analysis Report</div>
+                            <div class="metadata">
+                                <div class="metadata-item">
+                                    <span>📅</span>
+                                    <span>${currentDate}</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span>🕒</span>
+                                    <span>${timestamp}</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span>💬</span>
+                                    <span>${conversationHistory.length} messages</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="files-section">
+                            <h2>📎 Analyzed Files</h2>
+                            <div class="files-grid">
+                `;
+                
+                uploadedFiles.forEach(file => {
+                    htmlContent += `
+                        <div class="file-card">
+                            <div class="file-name">${file.name}</div>
+                            <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div>
+                        </div>
+                    `;
+                });
+                
+                htmlContent += `
+                            </div>
+                        </div>
+                        
+                        <div class="conversation-section">
+                            <h2>💬 Conversation Analysis</h2>
+                `;
+                
+                conversationHistory.forEach((message, index) => {
+                    const roleClass = message.role === 'user' ? 'user-entry' : 'assistant-entry';
+                    const roleIcon = message.role === 'user' ? '👤' : '🤖';
+                    const roleText = message.role === 'user' ? 'User' : 'Carver Analyst';
+                    const messageTime = new Date(Date.now() - (conversationHistory.length - index) * 1000).toLocaleTimeString();
+                    
+                    htmlContent += `
+                        <div class="conversation-entry ${roleClass}">
+                            <div class="entry-header">
+                                <div class="role-icon">${roleIcon}</div>
+                                <div class="role-text">${roleText}</div>
+                                <div class="timestamp">${messageTime}</div>
+                            </div>
+                            <div class="entry-content">
+                                <div class="message-content">
+                                    ${marked.parse(message.content)}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+                
+                htmlContent += `
+                        </div>
+                    </div>
+                </body>
+                </html>
+                `;
+                
+                // Create and trigger download
+                const blob = new Blob([htmlContent], { type: 'text/html' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `carver-analyst-report-${new Date().toISOString().split('T')[0]}.html`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                
+                showSuccess("✅ Professional report exported! Open the HTML file and print as PDF.");
+                
+                // Show instructions for PDF conversion
+                setTimeout(() => {
+                    showSuccess("💡 To create PDF: Open the file → Print (Ctrl/Cmd+P) → Save as PDF");
+                }, 2000);
+                
+            } catch (error) {
+                console.error("Export error:", error);
+                displayError(`Export failed: ${error.message}`);
+            }
+        }
+        
     </script>
 </body>
 </html>