Spaces:

Fa987123
/

multimodal_previsit

Sleeping

App Files Files Community

frabbani commited on Feb 18

Commit

564a1f3

1 Parent(s): 51f57f8

context added .

Browse files

Files changed (1) hide show

static/index.html +597 -333

static/index.html CHANGED Viewed

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <!-- VERSION: chart-colors-fix-v2-2026-02-03 -->
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,21 +14,28 @@
             /* Color System */
             --primary: #5e72e4;
             --primary-dark: #465acb;
-            --secondary: #252f49; /* Darker secondary for inputs/chips */
-            --text-main: #e2e6ea;  /* Off-white text */
             --text-muted: #8898aa;
             --success: #2dce89;
             --warning: #fb6340;
             --danger: #f5365c;
             --info: #11cdef;
-            --derm: #9b59b6; /* Purple for skin analysis */
             /* Surfaces */
-            --bg-body: #0f1219;    /* Very dark background */
-            --bg-card: #171c29;    /* Dark card background */
             --bg-chat-user: #5e72e4;
-            --bg-chat-bot: #252f49; /* Darker bubble */
-            --border-color: #2b3553; /* Dark borders */
             /* Spacing & Radius */
             --radius-lg: 20px;
@@ -37,8 +45,12 @@
             --shadow-hover: 0 7px 14px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.2);
         }
-        * { box-sizing: border-box; margin: 0; padding: 0; }
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background: var(--bg-body);
@@ -75,9 +87,18 @@
             z-index: 10;
         }
-        .header-branding h1 { font-size: 18px; font-weight: 700; color: var(--text-main); }
-        .header-branding p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
         .connection-status {
             display: flex;
             align-items: center;
@@ -89,8 +110,18 @@
             border-radius: 30px;
             color: var(--text-main);
         }
-        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); transition: background 0.3s; }
-        .status-dot.connected { background: var(--success); }
         /* Patient Context Bar (Collapsible) */
         .context-bar {
@@ -99,6 +130,7 @@
             border-bottom: 1px solid var(--border-color);
             font-size: 13px;
         }
         .context-toggle {
             width: 100%;
             display: flex;
@@ -110,6 +142,7 @@
             font-weight: 600;
             align-items: center;
         }
         .context-details {
             display: none;
             margin-top: 15px;
@@ -118,17 +151,44 @@
             grid-template-columns: repeat(3, 1fr);
             gap: 15px;
         }
-        .context-details.open { display: grid; }
-        .detail-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }
-        .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--secondary); font-size: 11px; margin-right: 4px; margin-bottom: 4px; color: var(--text-main); border: 1px solid rgba(255,255,255,0.05); }
-        .tag.alert { background: rgba(245, 54, 92, 0.2); color: #ffadad; border-color: rgba(245, 54, 92, 0.3); }
         /* Chat Area */
         .chat-viewport {
             flex: 1;
             overflow-y: auto;
             padding: 20px 25px;
-            background: #131722; /* Slightly different dark for chat area */
         }
         .message-row {
@@ -136,8 +196,11 @@
             margin-bottom: 15px;
             width: 100%;
         }
-        .message-row.user { justify-content: flex-end; }
         .bubble {
             max-width: 75%;
             padding: 12px 18px;
@@ -146,23 +209,28 @@
             line-height: 1.5;
             position: relative;
         }
         /* Standard Messages */
         .message-row.user .bubble {
             background: var(--primary);
             color: white;
             border-bottom-right-radius: 4px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
         }
         .message-row.assistant .bubble {
             background: var(--bg-chat-bot);
             color: var(--text-main);
             border-bottom-left-radius: 4px;
-            border: 1px solid rgba(255,255,255,0.05);
         }
         /* Widgets (Charts/Audio - Not bubbles) */
-        .message-row.widget-row { display: block; margin: 20px 0; }
         .widget-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
@@ -172,9 +240,10 @@
             max-width: 100%;
             margin: 0 auto;
         }
         .widget-header {
             padding: 12px 20px;
-            background: rgba(255,255,255,0.03);
             border-bottom: 1px solid var(--border-color);
             font-size: 13px;
             font-weight: 600;
@@ -183,17 +252,20 @@
             align-items: center;
             gap: 8px;
         }
-        .widget-body { padding: 20px; }
         /* Agent Status - All hidden except via feedback card */
         .status-line {
             display: none !important;
         }
         /* Hide any stray status messages that might come through */
-        .chat-viewport > div[style*="color: #11cdef"],
-        .chat-viewport > div[style*="color: var(--info)"],
-        .chat-viewport > span[style*="color: #11cdef"] {
             display: none !important;
         }
@@ -216,6 +288,7 @@
             border: 1px solid transparent;
             transition: border 0.2s;
         }
         .input-group:focus-within {
             background: var(--bg-card);
             border-color: var(--primary);
@@ -231,7 +304,10 @@
             outline: none;
             color: var(--text-main);
         }
-        .input-group input::placeholder { color: var(--text-muted); }
         /* Action Buttons */
         .btn-icon {
@@ -247,18 +323,38 @@
             font-size: 18px;
             flex-shrink: 0;
         }
-        .btn-record { background: #373f55; color: var(--text-main); }
-        .btn-record:hover { background: #444c66; }
-        .btn-record.recording {
-            background: var(--danger);
-            color: white;
             animation: pulse 1.5s infinite;
         }
-        .btn-send { background: var(--primary); color: white; }
-        .btn-send:hover { background: var(--primary-dark); transform: translateY(-1px); }
-        .btn-send:disabled { background: #2b3553; color: #5a6585; cursor: not-allowed; transform: none; }
         /* Quick Actions - Chips Row with Report Button */
         .chips-row {
@@ -267,15 +363,17 @@
             gap: 8px;
             margin-bottom: 10px;
         }
         .chips-scroll {
             display: flex;
             gap: 8px;
             overflow-x: auto;
             flex: 1;
             padding-bottom: 2px;
-            scrollbar-width: none; /* Hide scrollbar */
         }
         .chip {
             white-space: nowrap;
             padding: 6px 12px;
@@ -287,7 +385,12 @@
             cursor: pointer;
             transition: all 0.2s;
         }
-        .chip:hover { border-color: var(--primary); color: var(--primary); background: rgba(94, 114, 228, 0.1); }
         /* Report Toggle Button - Inline & Compact */
         .btn-toggle-report {
@@ -305,47 +408,53 @@
             white-space: nowrap;
             flex-shrink: 0;
         }
         .btn-toggle-report:hover {
             border-color: var(--primary);
             color: var(--primary);
             background: rgba(94, 114, 228, 0.1);
         }
         .btn-toggle-report.has-report {
             border-color: var(--success);
             color: var(--success);
             background: rgba(45, 206, 137, 0.1);
         }
         .btn-toggle-report .icon {
             font-size: 12px;
         }
         /* Recording Overlay Logic */
         .recording-overlay {
-            flex: 1;
-            display: none;
             align-items: center;
             gap: 10px;
             padding-right: 10px;
         }
-        .wave-viz {
-            height: 20px;
-            flex: 1;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none"><path d="M0 10 Q 25 20 50 10 T 100 10" stroke="%23f5365c" fill="none" stroke-width="2"/></svg>');
         }
         /* Toggle States */
-        .input-group.recording-active input { display: none; }
-        .input-group.recording-active .recording-overlay { display: flex; }
         /* Audio Result Styling (The "Widget") */
         .audio-widget {
             display: grid;
             gap: 15px;
         }
         .score-container {
             text-align: center;
             padding: 15px;
@@ -353,9 +462,21 @@
             border: 1px solid var(--border-color);
             border-radius: 12px;
         }
-        .score-val { font-size: 36px; font-weight: 800; display: block; line-height: 1; }
-        .score-label { font-size: 12px; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
         .risk-badge {
             padding: 8px 12px;
             border-radius: 6px;
@@ -364,21 +485,38 @@
             align-items: center;
             gap: 8px;
         }
-        .risk-badge.low { background: rgba(45, 206, 137, 0.1); color: #2dce89; border: 1px solid rgba(45, 206, 137, 0.2); }
-        .risk-badge.high { background: rgba(245, 54, 92, 0.1); color: #f5365c; border: 1px solid rgba(245, 54, 92, 0.2); }
         /* Default badge if no class */
-        .risk-badge { background: var(--secondary); color: var(--text-main); border: 1px solid var(--border-color); }
         /* User Image Message */
         .message-row.user .bubble.with-image {
             padding: 8px;
             max-width: 300px;
         }
         .message-row.user .bubble.with-image img {
             max-width: 100%;
             border-radius: 12px;
             display: block;
         }
         .message-row.user .bubble.with-image .image-caption {
             padding: 8px 10px 4px;
             font-size: 13px;
@@ -389,15 +527,18 @@
             display: grid;
             gap: 15px;
         }
         .skin-widget .image-preview {
             text-align: center;
         }
         .skin-widget .image-preview img {
             max-width: 200px;
             max-height: 200px;
             border-radius: 12px;
             border: 2px solid var(--derm);
         }
         .skin-widget .quality-score {
             text-align: center;
             padding: 15px;
@@ -405,37 +546,53 @@
             border: 1px solid var(--border-color);
             border-radius: 12px;
         }
         .skin-widget .quality-val {
             font-size: 32px;
             font-weight: 800;
             display: block;
             line-height: 1;
         }
         .skin-widget .quality-label {
             font-size: 12px;
             text-transform: uppercase;
             color: var(--text-muted);
             margin-top: 5px;
         }
         .skin-widget .analysis-notes {
             background: var(--secondary);
             padding: 12px;
             border-radius: 8px;
             font-size: 13px;
         }
         .skin-widget .analysis-notes li {
             margin: 4px 0;
             list-style: none;
         }
         .skin-widget .analysis-notes li::before {
             content: "• ";
             color: var(--derm);
         }
         /* Image Upload Button */
-        .btn-image { background: #373f55; color: var(--text-main); }
-        .btn-image:hover { background: rgba(155, 89, 182, 0.3); color: var(--derm); }
-        .btn-image:disabled { opacity: 0.5; cursor: not-allowed; }
         /* Hidden file input */
         #skinImageInput {
@@ -450,6 +607,7 @@
             padding-left: 0;
             flex-shrink: 0;
         }
         .image-upload-preview img {
             width: 36px;
             height: 36px;
@@ -457,9 +615,12 @@
             border-radius: 8px;
             border: 2px solid var(--derm);
         }
         .image-upload-preview .preview-text {
-            display: none; /* Hide the "Skin image ready" text */
         }
         .image-upload-preview .btn-cancel-image {
             background: none;
             border: none;
@@ -469,32 +630,77 @@
             padding: 0 4px;
             line-height: 1;
         }
         .image-upload-preview .btn-cancel-image:hover {
             color: var(--danger);
         }
         /* Show preview alongside input - don't hide input */
-        .input-group.image-pending .image-upload-preview { display: flex; }
-        .input-group.image-pending input {
-            display: block; /* Keep input visible */
         }
         .input-group.image-pending input::placeholder {
             color: var(--derm);
         }
         /* Skin chip styling */
-        .chip.skin-chip:hover { border-color: var(--derm); color: var(--derm); background: rgba(155, 89, 182, 0.1); }
-        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 54, 92, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(245, 54, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 54, 92, 0); } }
         /* Markdown/Format helpers */
-        .markdown-body ul, .markdown-body ol { padding-left: 20px; margin: 8px 0; }
-        .markdown-body li { margin-bottom: 4px; }
-        .markdown-body p { margin-bottom: 10px; }
-        .markdown-body p:last-child { margin-bottom: 0; }
-        .markdown-body strong { font-weight: 700; color: #fff; } /* Strong text white */
         /* Tool Result Card */
-        .tool-result-row { margin: 8px 0; }
         .tool-result-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
@@ -502,8 +708,9 @@
             overflow: hidden;
             max-width: 100%;
         }
         .tool-result-header {
-            background: rgba(255,255,255,0.05);
             padding: 8px 12px;
             font-weight: 600;
             font-size: 13px;
@@ -511,21 +718,28 @@
             text-transform: capitalize;
             border-bottom: 1px solid var(--border-color);
         }
         .tool-result-body {
             padding: 12px;
             font-size: 14px;
             color: var(--text-main);
         }
         .tool-result-list {
             list-style: none;
             padding: 0;
             margin: 0;
         }
         .tool-result-list li {
             padding: 6px 0;
             border-bottom: 1px solid var(--border-color);
         }
-        .tool-result-list li:last-child { border-bottom: none; }
         .tool-result-list .badge {
             background: var(--secondary);
             padding: 2px 8px;
@@ -541,17 +755,28 @@
             animation: blink 0.7s infinite;
             margin-left: 2px;
         }
         @keyframes blink {
-            0%, 50% { opacity: 1; }
-            51%, 100% { opacity: 0; }
         }
         /* ==========================================
            UNIFIED AGENT FEEDBACK - Subtle & Merged
            ========================================== */
-        .agent-feedback-row { margin: 10px 0; }
         .agent-feedback-card {
             background: rgba(255, 255, 255, 0.02);
             border: 1px solid rgba(255, 255, 255, 0.06);
@@ -559,7 +784,7 @@
             overflow: hidden;
             font-size: 12px;
         }
         .agent-feedback-header {
             display: flex;
             align-items: center;
@@ -569,11 +794,11 @@
             cursor: pointer;
             user-select: none;
         }
         .agent-feedback-header:hover {
             background: rgba(255, 255, 255, 0.04);
         }
         .agent-feedback-title {
             display: flex;
             align-items: center;
@@ -581,41 +806,41 @@
             color: var(--text-muted);
             font-weight: 500;
         }
         .agent-feedback-title .icon {
             font-size: 12px;
             opacity: 0.7;
         }
         .agent-feedback-toggle {
             color: var(--text-muted);
             font-size: 10px;
             transition: transform 0.2s;
         }
         .agent-feedback-card.expanded .agent-feedback-toggle {
             transform: rotate(180deg);
         }
         .agent-feedback-content {
             display: none;
             padding: 0;
             border-top: 1px solid rgba(255, 255, 255, 0.04);
         }
         .agent-feedback-card.expanded .agent-feedback-content {
             display: block;
         }
         .feedback-section {
             padding: 10px 12px;
             border-bottom: 1px solid rgba(255, 255, 255, 0.04);
         }
         .feedback-section:last-child {
             border-bottom: none;
         }
         .feedback-section-label {
             font-size: 10px;
             text-transform: uppercase;
@@ -624,50 +849,50 @@
             opacity: 0.7;
             margin-bottom: 6px;
         }
         .feedback-section-content {
             color: var(--text-main);
             opacity: 0.85;
             line-height: 1.5;
         }
         .feedback-section-content .sample-data {
             margin-top: 4px;
             font-size: 11px;
             opacity: 0.6;
         }
         .feedback-plan-item {
             display: flex;
             align-items: flex-start;
             gap: 8px;
             margin-bottom: 6px;
         }
         .feedback-plan-item:last-child {
             margin-bottom: 0;
         }
         .feedback-plan-bullet {
             color: var(--text-muted);
             opacity: 0.5;
             margin-top: 2px;
         }
         .feedback-plan-tool {
             font-weight: 500;
         }
         .feedback-plan-reason {
             font-size: 11px;
             opacity: 0.6;
             margin-top: 2px;
         }
         .feedback-facts {
             white-space: pre-wrap;
         }
         .feedback-citation {
             background: rgba(255, 255, 255, 0.06);
             padding: 1px 4px;
@@ -675,7 +900,7 @@
             font-family: monospace;
             font-size: 10px;
         }
         /* Iteration badge */
         .iteration-badge {
             background: var(--primary);
@@ -686,7 +911,7 @@
             margin-left: 8px;
             font-weight: 500;
         }
         /* Reflection section styles */
         .reflection-status {
             display: flex;
@@ -696,21 +921,21 @@
             border-radius: 6px;
             margin-bottom: 8px;
         }
         .reflection-status.reflection-complete {
             background: rgba(76, 175, 80, 0.15);
             border: 1px solid rgba(76, 175, 80, 0.3);
         }
         .reflection-status.reflection-gaps {
             background: rgba(255, 152, 0, 0.15);
             border: 1px solid rgba(255, 152, 0, 0.3);
         }
         .reflection-icon {
             font-size: 14px;
         }
         .confidence-badge {
             margin-left: auto;
             font-size: 10px;
@@ -718,25 +943,25 @@
             padding: 2px 6px;
             border-radius: 8px;
         }
         .reflection-gaps-list {
             font-size: 12px;
             color: var(--warning);
             margin-bottom: 6px;
         }
         .reflection-reasoning {
             font-size: 11px;
             opacity: 0.7;
             font-style: italic;
         }
         /* Workflow summary */
         .workflow-summary .feedback-section-content {
             display: flex;
             gap: 16px;
         }
         .workflow-stat {
             font-size: 12px;
             display: flex;
@@ -747,14 +972,14 @@
         /* ==========================================
            PRE-VISIT REPORT PANEL & MODAL
            ========================================== */
         /* Main content wrapper for side-by-side layout */
         .main-content-wrapper {
             display: flex;
             flex: 1;
             overflow: hidden;
         }
         .chat-container {
             flex: 1;
             display: flex;
@@ -772,11 +997,11 @@
             display: flex;
             flex-direction: column;
         }
         .report-panel.open {
             width: 320px;
         }
         .report-panel-header {
             padding: 15px;
             border-bottom: 1px solid var(--border-color);
@@ -784,13 +1009,13 @@
             justify-content: space-between;
             align-items: center;
         }
         .report-panel-header h3 {
             font-size: 14px;
             color: var(--text-main);
             margin: 0;
         }
         .report-panel-close {
             background: none;
             border: none;
@@ -799,13 +1024,13 @@
             font-size: 18px;
             padding: 4px;
         }
         .report-panel-body {
             flex: 1;
             overflow-y: auto;
             padding: 15px;
         }
         .report-preview {
             background: linear-gradient(135deg, rgba(94, 114, 228, 0.1) 0%, rgba(94, 114, 228, 0.05) 100%);
             border: 1px solid rgba(94, 114, 228, 0.3);
@@ -814,45 +1039,45 @@
             cursor: pointer;
             transition: all 0.2s;
         }
         .report-preview:hover {
             border-color: var(--primary);
             transform: translateY(-2px);
         }
         .report-preview-placeholder {
             text-align: center;
             color: var(--text-muted);
             padding: 30px 15px;
         }
         .report-preview-placeholder .icon {
             font-size: 32px;
             margin-bottom: 10px;
         }
         .report-preview h4 {
             font-size: 13px;
             color: var(--primary);
             margin: 0 0 8px 0;
         }
         .report-preview-concerns {
             font-size: 12px;
             color: var(--text-main);
             margin-bottom: 8px;
         }
         .report-preview-meta {
             font-size: 11px;
             color: var(--text-muted);
         }
         .report-panel-actions {
             padding: 15px;
             border-top: 1px solid var(--border-color);
         }
         .btn-generate-report {
             width: 100%;
             padding: 12px;
@@ -865,21 +1090,21 @@
             cursor: pointer;
             transition: background 0.2s;
         }
         .btn-generate-report:hover {
             background: var(--primary-dark);
         }
         .btn-generate-report:disabled {
             background: var(--secondary);
             cursor: not-allowed;
         }
         .btn-generate-report.loading {
             position: relative;
             color: transparent;
         }
         .btn-generate-report.loading::after {
             content: '';
             position: absolute;
@@ -893,9 +1118,11 @@
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
         @keyframes spin {
-            to { transform: rotate(360deg); }
         }
         /* Loading indicator for image upload - pulsing dot instead of spinning */
@@ -909,9 +1136,19 @@
             margin-left: 6px;
             animation: pulse-dot 1s ease-in-out infinite;
         }
         @keyframes pulse-dot {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.2); }
         }
         /* Thinking indicator - shows while agent is working */
@@ -923,10 +1160,12 @@
             color: var(--text-secondary);
             font-size: 0.85rem;
         }
         .thinking-indicator .thinking-dots {
             display: flex;
             gap: 4px;
         }
         .thinking-indicator .thinking-dots span {
             width: 6px;
             height: 6px;
@@ -934,12 +1173,30 @@
             background: var(--primary);
             animation: thinking-bounce 1.4s ease-in-out infinite;
         }
-        .thinking-indicator .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .thinking-indicator .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes thinking-bounce {
-            0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
-            40% { opacity: 1; transform: translateY(-4px); }
         }
         .thinking-indicator .thinking-text {
             opacity: 0.8;
             transition: opacity 0.3s;
@@ -961,12 +1218,12 @@
             visibility: hidden;
             transition: all 0.3s;
         }
         .report-modal-overlay.open {
             opacity: 1;
             visibility: visible;
         }
         .report-modal {
             background: var(--bg-card);
             border-radius: var(--radius-lg);
@@ -979,11 +1236,11 @@
             transform: scale(0.9);
             transition: transform 0.3s;
         }
         .report-modal-overlay.open .report-modal {
             transform: scale(1);
         }
         .report-modal-header {
             padding: 20px;
             border-bottom: 1px solid var(--border-color);
@@ -991,18 +1248,18 @@
             justify-content: space-between;
             align-items: center;
         }
         .report-modal-header h2 {
             font-size: 18px;
             margin: 0;
             color: var(--text-main);
         }
         .report-modal-actions {
             display: flex;
             gap: 10px;
         }
         .btn-modal-action {
             padding: 8px 16px;
             border-radius: var(--radius-sm);
@@ -1012,17 +1269,17 @@
             border: none;
             transition: all 0.2s;
         }
         .btn-download {
             background: var(--success);
             color: white;
         }
         .btn-close-modal {
             background: var(--secondary);
             color: var(--text-main);
         }
         .report-modal-body {
             flex: 1;
             overflow-y: auto;
@@ -1034,87 +1291,87 @@
             font-size: 14px;
             color: var(--text-main);
         }
         .previsit-report .report-header {
             margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 2px solid var(--primary);
         }
         .previsit-report .report-header h2 {
             font-size: 20px;
             color: var(--primary);
             margin: 0 0 8px 0;
         }
         .previsit-report .report-meta {
             display: flex;
             justify-content: space-between;
             font-size: 13px;
         }
         .previsit-report .patient-info {
             color: var(--text-main);
         }
         .previsit-report .report-date {
             color: var(--text-muted);
         }
         .previsit-report .report-section {
             margin-bottom: 16px;
         }
         .previsit-report .report-section h3 {
             font-size: 14px;
             color: var(--primary);
             margin: 0 0 8px 0;
         }
         .previsit-report .report-section p {
             margin: 0;
             line-height: 1.5;
         }
         .previsit-report .report-section ul {
             margin: 0;
             padding-left: 20px;
         }
         .previsit-report .report-section li {
             margin: 4px 0;
         }
         .previsit-report .report-columns {
             display: flex;
             gap: 20px;
         }
         .previsit-report .report-section.half {
             flex: 1;
         }
         .previsit-report .vitals-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 8px;
         }
         .previsit-report .vital-item {
             background: var(--secondary);
             padding: 8px 12px;
             border-radius: var(--radius-sm);
         }
         .previsit-report .vital-name {
             color: var(--text-muted);
         }
         .previsit-report .vital-value {
             color: var(--text-main);
             font-weight: 600;
         }
         .previsit-report blockquote {
             background: var(--secondary);
             border-left: 3px solid var(--primary);
@@ -1123,13 +1380,13 @@
             font-style: italic;
             border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
         }
         .previsit-report .attachments-list {
             display: flex;
             flex-direction: column;
             gap: 8px;
         }
         .previsit-report .attachment-item {
             background: var(--secondary);
             padding: 10px 12px;
@@ -1138,21 +1395,21 @@
             align-items: center;
             gap: 10px;
         }
         .previsit-report .attachment-icon {
             font-size: 20px;
         }
         .previsit-report .attachment-title {
             font-weight: 600;
         }
         .previsit-report .attachment-summary {
             font-size: 12px;
             color: var(--text-muted);
             margin-top: 4px;
         }
         .previsit-report .report-footer {
             margin-top: 20px;
             padding-top: 15px;
@@ -1161,47 +1418,48 @@
             color: var(--text-muted);
             text-align: center;
         }
         /* NEW: Compact list styling for immunizations/procedures/encounters */
         .previsit-report .compact-list {
             font-size: 12px;
             margin: 0;
             padding-left: 16px;
         }
         .previsit-report .compact-list li {
             margin: 3px 0;
             line-height: 1.4;
         }
         .previsit-report .date-badge {
             color: var(--text-muted);
             font-size: 11px;
         }
         /* Allergy styling with severity indicators */
         .previsit-report .allergies-list {
             margin: 0;
             padding-left: 16px;
         }
         .previsit-report .allergies-list li {
             margin: 4px 0;
         }
         .previsit-report .allergies-list .allergy-high {
             color: #ff6b6b;
         }
         .previsit-report .allergies-list .allergy-high strong {
             color: #ff4757;
         }
         .previsit-report .allergies-list .allergy-low {
             color: var(--text-main);
         }
     </style>
 </head>
 <body>
     <div class="app-shell">
@@ -1242,13 +1500,14 @@
                 <div class="chat-viewport" id="chatMessages">
                     <div class="message-row assistant">
                         <div class="bubble">
-                            Hello! I'm ready to help. You can ask me to visualize your health data, use the microphone to analyze respiratory sounds, or upload a skin image for analysis.
                         </div>
                     </div>
                 </div>
                 <div class="input-area">
                     <div class="chips-row">
                         <div class="chips-scroll">
                             <div class="chip" data-q="Show me my blood pressure chart">📈 BP Chart</div>
@@ -1257,7 +1516,8 @@
                             <div class="chip" data-q="Analyze my cough risk">🎤 Cough Check</div>
                             <div class="chip skin-chip" data-action="upload-skin">🔬 Skin Analysis</div>
                         </div>
-                        <button class="btn-toggle-report" id="btnToggleReport" onclick="toggleReportPanel()" title="Pre-Visit Report">
                             <span class="icon">📋</span>
                             <span>Report</span>
                         </button>
@@ -1268,7 +1528,7 @@
                     <div class="input-group" id="mainInputGroup">
                         <input type="text" id="chatInput" placeholder="Ask a health question..." disabled>
                         <div class="recording-overlay" id="recordingOverlay">
                             <span style="color: var(--danger); font-weight: 600; font-size: 14px;">Recording...</span>
                             <div class="wave-viz"></div>
@@ -1280,7 +1540,8 @@
                             <button class="btn-cancel-image" onclick="cancelImageUpload()">✕</button>
                         </div>
-                        <button class="btn-icon btn-image" id="imageBtn" title="Upload Skin Image" onclick="triggerImageUpload()">
                             📷
                         </button>
                         <button class="btn-icon btn-record" id="recordBtn" title="Record Audio" disabled>
@@ -1290,7 +1551,7 @@
                             ➤
                         </button>
                     </div>
                     <div style="text-align: center; margin-top: 10px; font-size: 11px; color: var(--text-muted);">
                         ⚠️ AI responses can be inaccurate. Consult a doctor.
                     </div>
@@ -1306,7 +1567,8 @@
                 <div class="report-panel-body">
                     <div class="report-preview-placeholder" id="reportPlaceholder">
                         <div class="icon">📝</div>
-                        <p>Chat with me about your health concerns, then generate a summary to share with your doctor.</p>
                     </div>
                     <div class="report-preview" id="reportPreview" style="display: none;" onclick="openReportModal()">
                         <h4>Pre-Visit Summary Ready</h4>
@@ -1345,22 +1607,22 @@
         // ==========================================
         let patientId = null;
         let chartCounter = 0;
         // Report tracking state
         let conversationHistory = [];
         let collectedToolResults = [];
         let collectedAttachments = [];  // Now includes {type, title, summary, imageData} for charts AND skin images
         let currentReport = null;
         // Agent feedback state - for merging into single card
         let currentFeedbackCard = null;
         let feedbackData = { discovery: null, plan: null, facts: [], reflection: null, workflow: null, iteration: 1 };
         // Skin image upload state
         let pendingImageData = null;
         let pendingImageFile = null;
         const skinImageInput = document.getElementById('skinImageInput');
         // DOM Elements
         const chatMessages = document.getElementById('chatMessages');
         const chatInput = document.getElementById('chatInput');
@@ -1401,7 +1663,7 @@
             });
             // Collapsible Context
-            document.getElementById('summaryToggle').addEventListener('click', function() {
                 document.getElementById('summaryContent').classList.toggle('open');
                 const arrow = this.querySelector('span:last-child');
                 arrow.textContent = arrow.textContent === '▼' ? '▲' : '▼';
@@ -1414,7 +1676,7 @@
         // ==========================================
         // SKIN IMAGE UPLOAD HANDLING
         // ==========================================
         function triggerImageUpload() {
             skinImageInput.click();
         }
@@ -1439,13 +1701,13 @@
             // Read and preview the image
             const reader = new FileReader();
-            reader.onload = function(e) {
                 pendingImageData = e.target.result;
                 // Show preview
                 document.getElementById('previewThumbnail').src = pendingImageData;
                 mainInputGroup.classList.add('image-pending');
                 // Update placeholder to guide user
                 chatInput.placeholder = 'Add a message about this image (optional)...';
                 chatInput.focus();
@@ -1477,7 +1739,7 @@
             // Store data locally
             const imageToSend = pendingImageData;
             // Clear UI state
             cancelImageUpload();
             chatInput.value = ''; // Clear the text input
@@ -1485,11 +1747,11 @@
             // 3. Add Loading Feedback (Fixes lack of feedback)
             chatSend.disabled = true;
             // Reset feedback state for new image message
             currentFeedbackCard = null;
             feedbackData = { discovery: null, plan: null, facts: [], reflection: null, workflow: null, iteration: 1 };
             // Create/Show the feedback card immediately with a loading state
             const feedbackCard = getOrCreateFeedbackCard();
             const titleSpan = feedbackCard.querySelector('.agent-feedback-title span:last-child');
@@ -1501,7 +1763,7 @@
             // Send to agent
             await sendAgentMessage(caption, imageToSend);
             chatSend.disabled = false;
             chatInput.focus();
         }
@@ -1517,7 +1779,7 @@
             `;
             chatMessages.appendChild(div);
             forceScrollToBottom();
             // Track for conversation history
             trackConversation('user', `[Uploaded skin image] ${caption}`);
         }
@@ -1528,14 +1790,14 @@
             const qualityScore = quality.score || 0;
             const notes = quality.notes || ['No analysis notes available'];
             const modelName = result.model || 'Derm Foundation';
             // Formulate the analysis summary
             const analysisSummary = `Image Quality: ${qualityScore}/100. ${notes.join(' ')}`;
             // Fix: Check if we just added this image (to avoid duplicates in report)
             // We look for the last attachment of type 'skin'
             const lastAttachment = collectedAttachments.length > 0 ? collectedAttachments[collectedAttachments.length - 1] : null;
             if (lastAttachment && lastAttachment.type === 'skin' && lastAttachment.imageData === imageData) {
                 // Update the existing attachment with the analysis results
                 lastAttachment.summary += ` | Analysis: ${analysisSummary}`;
@@ -1544,11 +1806,11 @@
                 // Fallback: Track as new if for some reason it wasn't caught
                 trackAttachment('skin', `Skin Analysis (${modelName})`, analysisSummary, imageData);
             }
             const scoreColor = qualityScore < 50 ? 'var(--danger)' : qualityScore < 75 ? 'var(--warning)' : 'var(--success)';
             const notesHtml = notes.map(n => `<li>${escapeHtml(n)}</li>`).join('');
             const html = `
                 <div class="message-row widget-row">
                     <div class="widget-card">
@@ -1577,10 +1839,10 @@
                     </div>
                 </div>
             `;
             chatMessages.insertAdjacentHTML('beforeend', html);
             forceScrollToBottom();
             // Track for conversation
             trackConversation('assistant', `[Skin Analysis Result] Quality: ${qualityScore}/100. ${notes.join(' ')}`);
         }
@@ -1610,11 +1872,11 @@
                 const res = await fetch('/api/patients');
                 const data = await res.json();
                 if (data.patients.length === 0) return;
                 const patient = data.patients[0];
                 patientId = patient.id;
                 document.getElementById('patientSummaryName').textContent = `Patient: ${patient.display_name} (${patient.age}y)`;
                 chatInput.disabled = false;
                 chatSend.disabled = false;
                 loadHealthDetails();
@@ -1632,9 +1894,9 @@
                 ]);
                 // Render Tags
-                const renderTags = (list, key, alert=false) => {
                     if (!list || list.length === 0) return '<span class="tag">None</span>';
-                    return list.map(item => `<span class="tag ${alert?'alert':''}">${item[key] || item.display || item.substance}</span>`).join('');
                 };
                 document.getElementById('conditionsList').innerHTML = renderTags(conditions.conditions, 'display');
@@ -1649,11 +1911,11 @@
         // ==========================================
         // UI RENDERING
         // ==========================================
         // Track if user has scrolled away - don't auto-scroll if they have
         let userHasScrolledAway = false;
         let scrollTimeout = null;
         // ANY upward scroll immediately stops auto-scroll
         chatMessages.addEventListener('wheel', (e) => {
             if (e.deltaY < 0) {
@@ -1667,13 +1929,13 @@
                 }
             }
         }, { passive: true });
         // Touch support
         let touchStartY = 0;
         chatMessages.addEventListener('touchstart', (e) => {
             touchStartY = e.touches[0].clientY;
         }, { passive: true });
         chatMessages.addEventListener('touchmove', (e) => {
             const touchY = e.touches[0].clientY;
             if (touchY > touchStartY) {
@@ -1681,20 +1943,20 @@
                 userHasScrolledAway = true;
             }
         }, { passive: true });
         // Debounced scroll - doesn't fight user as aggressively
         function scrollToBottom(force = false) {
             if (userHasScrolledAway && !force) return;
             // Cancel any pending scroll
             if (scrollTimeout) cancelAnimationFrame(scrollTimeout);
             // Use requestAnimationFrame for smoother, less aggressive scrolling
             scrollTimeout = requestAnimationFrame(() => {
                 chatMessages.scrollTop = chatMessages.scrollHeight;
             });
         }
         // Force scroll for new user messages and important events
         function forceScrollToBottom() {
             userHasScrolledAway = false;
@@ -1712,13 +1974,13 @@
             // Reset feedback state for new message
             currentFeedbackCard = null;
             feedbackData = { discovery: null, plan: null, facts: [], reflection: null, workflow: null, iteration: 1 };
             const div = document.createElement('div');
             div.className = 'message-row user';
             div.innerHTML = `<div class="bubble">${escapeHtml(content)}</div>`;
             chatMessages.appendChild(div);
             forceScrollToBottom(); // Always scroll for user's own message
             // Track for report
             trackConversation('user', content);
         }
@@ -1727,17 +1989,17 @@
         function addAssistantMessage(content) {
             const div = document.createElement('div');
             div.className = 'message-row assistant';
             // Remove "ANSWER:" prefix (case insensitive) and whitespace
             const cleanContent = content.replace(/^ANSWER:\s*/i, '');
             // Convert Markdown to HTML using marked
             const htmlContent = marked.parse(cleanContent);
-            div.innerHTML = `<div class="bubble markdown-body">${htmlContent}</div>`;
             chatMessages.appendChild(div);
             scrollToBottom();
             // Track for report
             trackConversation('assistant', cleanContent);
         }
@@ -1748,7 +2010,7 @@
         // Thinking indicator - shows while agent is processing
         let thinkingElement = null;
         function showThinking(text = 'Thinking') {
             removeThinking(); // Remove any existing
             const div = document.createElement('div');
@@ -1762,7 +2024,7 @@
             thinkingElement = div;
             scrollToBottom();
         }
         function updateThinking(text) {
             if (thinkingElement) {
                 const textEl = thinkingElement.querySelector('.thinking-text');
@@ -1771,7 +2033,7 @@
                 showThinking(text);
             }
         }
         function removeThinking() {
             if (thinkingElement) {
                 thinkingElement.remove();
@@ -1794,7 +2056,7 @@
                 streamingText += token;
                 // Remove "ANSWER:" prefix dynamically during stream
                 const cleanText = streamingText.replace(/^ANSWER:\s*/i, '');
                 // Using marked.parse here so markdown renders during stream
                 streamingBubble.innerHTML = marked.parse(cleanText);
                 scrollToBottom(); // Smart scroll - won't interrupt if user scrolled up
@@ -1804,13 +2066,13 @@
         function endStreamingAnswer() {
             if (streamingBubble) {
                 streamingBubble.classList.remove('streaming');
                 // Track the completed streamed answer for report
                 if (streamingText.trim()) {
                     const cleanContent = streamingText.replace(/^ANSWER:\s*/i, '');
                     trackConversation('assistant', cleanContent);
                 }
                 streamingBubble = null;
                 streamingText = "";
             }
@@ -1819,7 +2081,7 @@
         // Only show errors as assistant messages
         function addSystemLog(text, type = 'status') {
             if (type !== 'error') return; // Skip all non-error logs
             // Show errors as simple assistant messages
             const div = document.createElement('div');
             div.className = 'message-row assistant';
@@ -1856,7 +2118,7 @@
             } catch (e) {
                 formattedContent = `<pre>${escapeHtml(result)}</pre>`;
             }
             const div = document.createElement('div');
             div.className = 'message-row tool-result-row';
             div.innerHTML = `
@@ -1872,7 +2134,7 @@
         // ==========================================
         // UNIFIED AGENT FEEDBACK - Merged & Subtle
         // ==========================================
         function getOrCreateFeedbackCard() {
             if (!currentFeedbackCard) {
                 const div = document.createElement('div');
@@ -1895,23 +2157,23 @@
             }
             return currentFeedbackCard;
         }
         function toggleFeedbackCard(header) {
             const card = header.closest('.agent-feedback-card');
             card.classList.toggle('expanded');
         }
         function updateFeedbackCard() {
             const card = getOrCreateFeedbackCard();
             const content = card.querySelector('.agent-feedback-content');
             const titleSpan = card.querySelector('.agent-feedback-title span:last-child');
             // Remove loading indicator when we have actual content
             titleSpan.classList.remove('loading-indicator');
             let html = '';
             let stepCount = 0;
             // Discovery section
             if (feedbackData.discovery) {
                 stepCount++;
@@ -1925,7 +2187,7 @@
                     </div>
                 `;
             }
             // Plan section (with iteration badge)
             if (feedbackData.plan && feedbackData.plan.length > 0) {
                 stepCount++;
@@ -1941,11 +2203,11 @@
                         </div>
                     `;
                 }).join('');
-                const iterationBadge = feedbackData.iteration > 1
-                    ? `<span class="iteration-badge">Iteration ${feedbackData.iteration}</span>`
                     : '';
                 html += `
                     <div class="feedback-section">
                         <div class="feedback-section-label">Query Plan ${iterationBadge}</div>
@@ -1953,7 +2215,7 @@
                     </div>
                 `;
             }
             // Facts sections
             if (feedbackData.facts.length > 0) {
                 feedbackData.facts.forEach(f => {
@@ -1967,7 +2229,7 @@
                     `;
                 });
             }
             // Reflection section
             if (feedbackData.reflection) {
                 stepCount++;
@@ -1975,7 +2237,7 @@
                 const statusIcon = r.has_enough_info ? '✓' : '⚠';
                 const statusClass = r.has_enough_info ? 'reflection-complete' : 'reflection-gaps';
                 const confidenceBar = Math.round((r.confidence || 0.8) * 100);
                 let reflectionContent = `
                     <div class="reflection-status ${statusClass}">
                         <span class="reflection-icon">${statusIcon}</span>
@@ -1983,7 +2245,7 @@
                         <span class="confidence-badge">${confidenceBar}% confident</span>
                     </div>
                 `;
                 if (r.gaps && r.gaps.length > 0) {
                     reflectionContent += `
                         <div class="reflection-gaps-list">
@@ -1991,11 +2253,11 @@
                         </div>
                     `;
                 }
                 if (r.reasoning) {
                     reflectionContent += `<div class="reflection-reasoning">${escapeHtml(r.reasoning)}</div>`;
                 }
                 html += `
                     <div class="feedback-section">
                         <div class="feedback-section-label">Reflection</div>
@@ -2003,7 +2265,7 @@
                     </div>
                 `;
             }
             // Workflow summary (at the end)
             if (feedbackData.workflow) {
                 const w = feedbackData.workflow;
@@ -2017,15 +2279,15 @@
                     </div>
                 `;
             }
             content.innerHTML = html;
             // Update title with step count
             if (stepCount > 0) {
                 titleSpan.textContent = `${stepCount} step${stepCount > 1 ? 's' : ''} completed`;
             }
         }
         function addDiscoveryCard(summary, manifest) {
             let samplesHtml = '';
             if (manifest && manifest.sample_values) {
@@ -2039,7 +2301,7 @@
                 }
                 samplesHtml = parts.join(' • ');
             }
             feedbackData.discovery = { summary, samples: samplesHtml };
             updateFeedbackCard();
         }
@@ -2053,11 +2315,11 @@
         function addFactsCard(toolName, facts, rawPreview) {
             feedbackData.facts.push({ tool: toolName, facts });
             updateFeedbackCard();
             // Track for report
             trackToolResult(toolName, facts);
         }
         function addReflectionCard(event) {
             feedbackData.reflection = {
                 has_enough_info: event.has_enough_info,
@@ -2067,7 +2329,7 @@
             };
             updateFeedbackCard();
         }
         function addWorkflowSummary(event) {
             feedbackData.workflow = {
                 iterations: event.iterations || 1,
@@ -2085,27 +2347,27 @@
                 console.warn('Skipping empty chart data:', chartData?.title);
                 return;
             }
             // NEW: Check if any dataset actually has data points
             const hasDataPoints = chartData.datasets.some(ds => ds.data && ds.data.length > 0);
             if (!hasDataPoints) {
                 console.warn('Skipping chart with empty datasets:', chartData?.title);
                 return;
             }
             chartCounter++;
             const canvasId = `canvas-${chartCounter}`;
             // Track as attachment for report (image will be added after render)
             let summary = chartData.title;
             if (chartData.summary && Array.isArray(chartData.summary)) {
                 summary += ': ' + chartData.summary.slice(0, 2).join('; ');
             }
             // Create attachment object and store direct reference (not index)
             const attachmentObj = { type: 'chart', title: chartData.title, summary, imageData: null };
             collectedAttachments.push(attachmentObj);
             const div = document.createElement('div');
             div.className = 'message-row widget-row';
             div.innerHTML = `
@@ -2134,14 +2396,14 @@
         }
         function createChartInstance(ctx, chartData, attachmentObj) {
-            const primaryColor = '#5e72e4';
             // Set global defaults for Dark Mode charts
             Chart.defaults.color = '#8898aa';
             Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
             const isBar = chartData.chart_type && chartData.chart_type.includes('bar');
             // FIX: If bar chart, use high opacity (CC = ~80%), otherwise low opacity (20 = ~12%)
             const opacityHex = isBar ? 'CC' : '20';
@@ -2165,13 +2427,13 @@
                     label: ds.label,
                     data: ds.data.map(d => typeof d === 'object' ? (d.value || d.y) : d),
                     borderColor: color,
-                    backgroundColor: color + opacityHex,
                     tension: 0.3,
                     fill: !isBar // Don't fill bar charts
                 };
             });
             console.log(`[CHART DEBUG] Total datasets: ${datasets.length}, isBar: ${isBar}`);
             const labels = chartData.labels || chartData.datasets[0].data.map(d => d.date);
             new Chart(ctx, {
@@ -2182,26 +2444,26 @@
                     maintainAspectRatio: false,
                     // FIXED: Use animation onComplete callback to capture chart image
                     animation: {
-                        onComplete: function() {
                             // This runs only when the chart is fully drawn
                             if (!attachmentObj) return;
                             try {
                                 const canvas = ctx.canvas;
                                 // Create a temporary canvas to bake in a dark background
                                 // This ensures the chart is visible in PDF export
                                 const tempCanvas = document.createElement('canvas');
                                 tempCanvas.width = canvas.width;
                                 tempCanvas.height = canvas.height;
                                 const tempCtx = tempCanvas.getContext('2d');
                                 // Fill dark background (matches our UI)
                                 tempCtx.fillStyle = '#171c29';
                                 tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
                                 // Draw the chart on top
                                 tempCtx.drawImage(canvas, 0, 0);
                                 // Save this opaque image
                                 attachmentObj.imageData = tempCanvas.toDataURL('image/png');
                             } catch (e) {
@@ -2231,14 +2493,14 @@
         async function sendMessage() {
             // Capture text immediately
             const message = chatInput.value.trim();
             // Check if there's a pending skin image
             if (pendingImageData) {
                 // Pass the message text to the image handler
                 await sendSkinImageForAnalysis(message);
                 return;
             }
             if (!message || !patientId) return;
             addUserMessage(message);
@@ -2254,16 +2516,17 @@
         async function sendAgentMessage(message, skinImageData = null) {
             try {
-                const requestBody = {
-                    patient_id: patientId,
-                    message
                 };
                 // Include skin image data if provided
                 if (skinImageData) {
                     requestBody.skin_image_data = skinImageData;
                 }
                 const response = await fetch('/api/agent/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -2279,7 +2542,7 @@
                     const chunk = decoder.decode(value);
                     const lines = chunk.split('\n');
                     for (const line of lines) {
                         const trimmedLine = line.trim();
                         if (!trimmedLine || !trimmedLine.startsWith('data: ')) continue;
@@ -2290,7 +2553,7 @@
                         try {
                             const event = JSON.parse(dataStr);
                             switch (event.type) {
-                                case 'status':
                                     // Show thinking indicator with status text
                                     updateThinking(event.message || 'Thinking');
                                     break;
@@ -2308,7 +2571,7 @@
                                         addPlanCard(event.tools, event.iteration || 1);
                                     }
                                     break;
-                                case 'tool_call':
                                     updateThinking(`Retrieving ${event.tool || 'data'}...`);
                                     break;
                                 case 'tool_result':
@@ -2332,7 +2595,7 @@
                                     // Error recovery: Log tool errors but continue
                                     console.warn(`Tool error: ${event.tool} - ${event.error}`);
                                     break;
-                                case 'chart_data':
                                     renderChartWidget(event.data); break;
                                 case 'skin_analysis':
                                     // Handle skin analysis results from agent
@@ -2340,7 +2603,7 @@
                                         renderSkinAnalysisWidget(event.data, event.image_data || skinImageData);
                                     }
                                     break;
-                                case 'answer':
                                     removeThinking();
                                     addAssistantMessage(event.content); break;
                                 case 'answer_start':
@@ -2357,8 +2620,8 @@
                                     removeThinking();
                                     addSystemLog(event.message, 'error'); break;
                             }
-                        } catch (e) {
-                            console.log('Skipping non-JSON chunk:', dataStr);
                         }
                     }
                 }
@@ -2374,7 +2637,7 @@
         let mediaRecorder = null;
         let audioChunks = [];
         let isRecording = false;
         // 1. Check Capabilities
         fetch('/api/audio/status').then(r => r.json()).then(data => {
             if (data.available) {
@@ -2390,10 +2653,10 @@
                 mediaRecorder.stop();
                 isRecording = false;
                 recordBtn.classList.remove('recording');
                 // Toggle UI back to Input
                 mainInputGroup.classList.remove('recording-active');
                 // Don't show status log anymore
             } else {
                 // START RECORDING
@@ -2401,7 +2664,7 @@
                     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                     mediaRecorder = new MediaRecorder(stream);
                     audioChunks = [];
                     mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
                     mediaRecorder.onstop = () => {
                         const blob = new Blob(audioChunks, { type: 'audio/webm' });
@@ -2411,7 +2674,7 @@
                     mediaRecorder.start();
                     isRecording = true;
                     recordBtn.classList.add('recording');
                     // Toggle UI to Overlay
                     mainInputGroup.classList.add('recording-active');
@@ -2440,16 +2703,16 @@
             const data = result.health_assessment || result.respiratory_indicators || {};
             const score = data.respiratory_health_score || data.overall_score || 0;
             const modelName = result.model || 'Unknown';
             // Track as attachment for report
             const summary = `Respiratory Health Score: ${Math.round(score)}/100. ` +
                 `Cough: ${data.cough_level || 'None'}. ` +
                 `Breathing: ${data.breathing_quality || 'Normal'}.` +
                 (result.covid_risk ? ` COVID Risk: ${result.covid_risk.risk_level || 'Unknown'}.` : '');
             trackAttachment('audio', `Respiratory Analysis (${modelName})`, summary);
             const scoreColor = score < 60 ? 'var(--danger)' : score < 80 ? 'var(--warning)' : 'var(--success)';
             const html = `
                 <div class="message-row widget-row">
                     <div class="widget-card">
@@ -2485,7 +2748,7 @@
                     </div>
                 </div>
             `;
             chatMessages.insertAdjacentHTML('beforeend', html);
             forceScrollToBottom(); // Force scroll to show audio results
         }
@@ -2493,21 +2756,21 @@
         // ==========================================
         // PRE-VISIT REPORT FUNCTIONS
         // ==========================================
         function toggleReportPanel() {
             const panel = document.getElementById('reportPanel');
             panel.classList.toggle('open');
         }
         function openReportModal() {
             if (!currentReport) return;
             const overlay = document.getElementById('reportModalOverlay');
             const body = document.getElementById('reportModalBody');
             // Build chart images HTML
             let chartImagesHtml = '';
             let skinImagesHtml = '';
             collectedAttachments.forEach(att => {
                 if (att.type === 'chart' && att.imageData) {
                     chartImagesHtml += `
@@ -2527,7 +2790,7 @@
                     `;
                 }
             });
             // Combine report HTML with chart and skin images
             let additionalSections = '';
             if (chartImagesHtml) {
@@ -2546,24 +2809,24 @@
                     </div>
                 `;
             }
             body.innerHTML = currentReport.html + additionalSections;
             overlay.classList.add('open');
         }
         function closeReportModal(event) {
             if (event && event.target !== event.currentTarget) return;
             document.getElementById('reportModalOverlay').classList.remove('open');
         }
         async function generateReport() {
             if (!patientId) return;
             const btn = document.getElementById('btnGenerateReport');
             btn.classList.add('loading');
             btn.disabled = true;
             try {
                 const response = await fetch('/api/report/generate', {
                     method: 'POST',
@@ -2575,16 +2838,16 @@
                         attachments: collectedAttachments
                     })
                 });
                 const data = await response.json();
                 if (data.success) {
                     currentReport = data;
                     updateReportPreview(data.report);
                     // Update toggle button
                     document.getElementById('btnToggleReport').classList.add('has-report');
                     // Open panel if not already open
                     const panel = document.getElementById('reportPanel');
                     if (!panel.classList.contains('open')) {
@@ -2601,28 +2864,28 @@
                 btn.disabled = false;
             }
         }
         function updateReportPreview(report) {
             document.getElementById('reportPlaceholder').style.display = 'none';
             const preview = document.getElementById('reportPreview');
             preview.style.display = 'block';
             const concerns = report.chief_concerns || [];
-            document.getElementById('previewConcerns').textContent =
                 concerns.length > 0 ? concerns.slice(0, 2).join(', ') : 'No specific concerns noted';
             const attachCount = (report.attachments || []).length;
-            document.getElementById('previewMeta').textContent =
                 `${report.generated_at} • ${attachCount} attachment${attachCount !== 1 ? 's' : ''}`;
         }
         function downloadReport() {
             if (!currentReport) return;
             // Build chart and skin images HTML from collected attachments
             let chartImagesHtml = '';
             let skinImagesHtml = '';
             collectedAttachments.forEach(att => {
                 if (att.type === 'chart' && att.imageData) {
                     chartImagesHtml += `
@@ -2642,7 +2905,7 @@
                     `;
                 }
             });
             // Create container for PDF generation with explicit dark text on white background
             const pdfContainer = document.createElement('div');
             pdfContainer.innerHTML = `
@@ -2694,7 +2957,7 @@
                     </div>
                 </div>
             `;
             // PDF options
             const opt = {
                 margin: [10, 10, 10, 10],
@@ -2704,25 +2967,26 @@
                 jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
                 pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
             };
             // Generate and download PDF
             html2pdf().set(opt).from(pdfContainer).save();
         }
         // Track conversation for report
         function trackConversation(role, content) {
             conversationHistory.push({ role, content });
         }
         // Track tool results for report
         function trackToolResult(tool, facts) {
             collectedToolResults.push({ tool, facts });
         }
         // Track attachments for report (including chart images)
         function trackAttachment(type, title, summary, imageData = null) {
             collectedAttachments.push({ type, title, summary, imageData });
         }
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <!-- VERSION: chart-colors-fix-v2-2026-02-03 -->
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
             /* Color System */
             --primary: #5e72e4;
             --primary-dark: #465acb;
+            --secondary: #252f49;
+            /* Darker secondary for inputs/chips */
+            --text-main: #e2e6ea;
+            /* Off-white text */
             --text-muted: #8898aa;
             --success: #2dce89;
             --warning: #fb6340;
             --danger: #f5365c;
             --info: #11cdef;
+            --derm: #9b59b6;
+            /* Purple for skin analysis */
             /* Surfaces */
+            --bg-body: #0f1219;
+            /* Very dark background */
+            --bg-card: #171c29;
+            /* Dark card background */
             --bg-chat-user: #5e72e4;
+            --bg-chat-bot: #252f49;
+            /* Darker bubble */
+            --border-color: #2b3553;
+            /* Dark borders */
             /* Spacing & Radius */
             --radius-lg: 20px;
             --shadow-hover: 0 7px 14px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.2);
         }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background: var(--bg-body);
             z-index: 10;
         }
+        .header-branding h1 {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--text-main);
+        }
+        .header-branding p {
+            font-size: 12px;
+            color: var(--text-muted);
+            margin-top: 2px;
+        }
         .connection-status {
             display: flex;
             align-items: center;
             border-radius: 30px;
             color: var(--text-main);
         }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--danger);
+            transition: background 0.3s;
+        }
+        .status-dot.connected {
+            background: var(--success);
+        }
         /* Patient Context Bar (Collapsible) */
         .context-bar {
             border-bottom: 1px solid var(--border-color);
             font-size: 13px;
         }
         .context-toggle {
             width: 100%;
             display: flex;
             font-weight: 600;
             align-items: center;
         }
         .context-details {
             display: none;
             margin-top: 15px;
             grid-template-columns: repeat(3, 1fr);
             gap: 15px;
         }
+        .context-details.open {
+            display: grid;
+        }
+        .detail-group h4 {
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-muted);
+            margin-bottom: 8px;
+        }
+        .tag {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            background: var(--secondary);
+            font-size: 11px;
+            margin-right: 4px;
+            margin-bottom: 4px;
+            color: var(--text-main);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .tag.alert {
+            background: rgba(245, 54, 92, 0.2);
+            color: #ffadad;
+            border-color: rgba(245, 54, 92, 0.3);
+        }
         /* Chat Area */
         .chat-viewport {
             flex: 1;
             overflow-y: auto;
             padding: 20px 25px;
+            background: #131722;
+            /* Slightly different dark for chat area */
         }
         .message-row {
             margin-bottom: 15px;
             width: 100%;
         }
+        .message-row.user {
+            justify-content: flex-end;
+        }
         .bubble {
             max-width: 75%;
             padding: 12px 18px;
             line-height: 1.5;
             position: relative;
         }
         /* Standard Messages */
         .message-row.user .bubble {
             background: var(--primary);
             color: white;
             border-bottom-right-radius: 4px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
         }
         .message-row.assistant .bubble {
             background: var(--bg-chat-bot);
             color: var(--text-main);
             border-bottom-left-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
         }
         /* Widgets (Charts/Audio - Not bubbles) */
+        .message-row.widget-row {
+            display: block;
+            margin: 20px 0;
+        }
         .widget-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             max-width: 100%;
             margin: 0 auto;
         }
         .widget-header {
             padding: 12px 20px;
+            background: rgba(255, 255, 255, 0.03);
             border-bottom: 1px solid var(--border-color);
             font-size: 13px;
             font-weight: 600;
             align-items: center;
             gap: 8px;
         }
+        .widget-body {
+            padding: 20px;
+        }
         /* Agent Status - All hidden except via feedback card */
         .status-line {
             display: none !important;
         }
         /* Hide any stray status messages that might come through */
+        .chat-viewport>div[style*="color: #11cdef"],
+        .chat-viewport>div[style*="color: var(--info)"],
+        .chat-viewport>span[style*="color: #11cdef"] {
             display: none !important;
         }
             border: 1px solid transparent;
             transition: border 0.2s;
         }
         .input-group:focus-within {
             background: var(--bg-card);
             border-color: var(--primary);
             outline: none;
             color: var(--text-main);
         }
+        .input-group input::placeholder {
+            color: var(--text-muted);
+        }
         /* Action Buttons */
         .btn-icon {
             font-size: 18px;
             flex-shrink: 0;
         }
+        .btn-record {
+            background: #373f55;
+            color: var(--text-main);
+        }
+        .btn-record:hover {
+            background: #444c66;
+        }
+        .btn-record.recording {
+            background: var(--danger);
+            color: white;
             animation: pulse 1.5s infinite;
         }
+        .btn-send {
+            background: var(--primary);
+            color: white;
+        }
+        .btn-send:hover {
+            background: var(--primary-dark);
+            transform: translateY(-1px);
+        }
+        .btn-send:disabled {
+            background: #2b3553;
+            color: #5a6585;
+            cursor: not-allowed;
+            transform: none;
+        }
         /* Quick Actions - Chips Row with Report Button */
         .chips-row {
             gap: 8px;
             margin-bottom: 10px;
         }
         .chips-scroll {
             display: flex;
             gap: 8px;
             overflow-x: auto;
             flex: 1;
             padding-bottom: 2px;
+            scrollbar-width: none;
+            /* Hide scrollbar */
         }
         .chip {
             white-space: nowrap;
             padding: 6px 12px;
             cursor: pointer;
             transition: all 0.2s;
         }
+        .chip:hover {
+            border-color: var(--primary);
+            color: var(--primary);
+            background: rgba(94, 114, 228, 0.1);
+        }
         /* Report Toggle Button - Inline & Compact */
         .btn-toggle-report {
             white-space: nowrap;
             flex-shrink: 0;
         }
         .btn-toggle-report:hover {
             border-color: var(--primary);
             color: var(--primary);
             background: rgba(94, 114, 228, 0.1);
         }
         .btn-toggle-report.has-report {
             border-color: var(--success);
             color: var(--success);
             background: rgba(45, 206, 137, 0.1);
         }
         .btn-toggle-report .icon {
             font-size: 12px;
         }
         /* Recording Overlay Logic */
         .recording-overlay {
+            flex: 1;
+            display: none;
             align-items: center;
             gap: 10px;
             padding-right: 10px;
         }
+        .wave-viz {
+            height: 20px;
+            flex: 1;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none"><path d="M0 10 Q 25 20 50 10 T 100 10" stroke="%23f5365c" fill="none" stroke-width="2"/></svg>');
         }
         /* Toggle States */
+        .input-group.recording-active input {
+            display: none;
+        }
+        .input-group.recording-active .recording-overlay {
+            display: flex;
+        }
         /* Audio Result Styling (The "Widget") */
         .audio-widget {
             display: grid;
             gap: 15px;
         }
         .score-container {
             text-align: center;
             padding: 15px;
             border: 1px solid var(--border-color);
             border-radius: 12px;
         }
+        .score-val {
+            font-size: 36px;
+            font-weight: 800;
+            display: block;
+            line-height: 1;
+        }
+        .score-label {
+            font-size: 12px;
+            text-transform: uppercase;
+            color: var(--text-muted);
+            margin-top: 5px;
+        }
         .risk-badge {
             padding: 8px 12px;
             border-radius: 6px;
             align-items: center;
             gap: 8px;
         }
+        .risk-badge.low {
+            background: rgba(45, 206, 137, 0.1);
+            color: #2dce89;
+            border: 1px solid rgba(45, 206, 137, 0.2);
+        }
+        .risk-badge.high {
+            background: rgba(245, 54, 92, 0.1);
+            color: #f5365c;
+            border: 1px solid rgba(245, 54, 92, 0.2);
+        }
         /* Default badge if no class */
+        .risk-badge {
+            background: var(--secondary);
+            color: var(--text-main);
+            border: 1px solid var(--border-color);
+        }
         /* User Image Message */
         .message-row.user .bubble.with-image {
             padding: 8px;
             max-width: 300px;
         }
         .message-row.user .bubble.with-image img {
             max-width: 100%;
             border-radius: 12px;
             display: block;
         }
         .message-row.user .bubble.with-image .image-caption {
             padding: 8px 10px 4px;
             font-size: 13px;
             display: grid;
             gap: 15px;
         }
         .skin-widget .image-preview {
             text-align: center;
         }
         .skin-widget .image-preview img {
             max-width: 200px;
             max-height: 200px;
             border-radius: 12px;
             border: 2px solid var(--derm);
         }
         .skin-widget .quality-score {
             text-align: center;
             padding: 15px;
             border: 1px solid var(--border-color);
             border-radius: 12px;
         }
         .skin-widget .quality-val {
             font-size: 32px;
             font-weight: 800;
             display: block;
             line-height: 1;
         }
         .skin-widget .quality-label {
             font-size: 12px;
             text-transform: uppercase;
             color: var(--text-muted);
             margin-top: 5px;
         }
         .skin-widget .analysis-notes {
             background: var(--secondary);
             padding: 12px;
             border-radius: 8px;
             font-size: 13px;
         }
         .skin-widget .analysis-notes li {
             margin: 4px 0;
             list-style: none;
         }
         .skin-widget .analysis-notes li::before {
             content: "• ";
             color: var(--derm);
         }
         /* Image Upload Button */
+        .btn-image {
+            background: #373f55;
+            color: var(--text-main);
+        }
+        .btn-image:hover {
+            background: rgba(155, 89, 182, 0.3);
+            color: var(--derm);
+        }
+        .btn-image:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
         /* Hidden file input */
         #skinImageInput {
             padding-left: 0;
             flex-shrink: 0;
         }
         .image-upload-preview img {
             width: 36px;
             height: 36px;
             border-radius: 8px;
             border: 2px solid var(--derm);
         }
         .image-upload-preview .preview-text {
+            display: none;
+            /* Hide the "Skin image ready" text */
         }
         .image-upload-preview .btn-cancel-image {
             background: none;
             border: none;
             padding: 0 4px;
             line-height: 1;
         }
         .image-upload-preview .btn-cancel-image:hover {
             color: var(--danger);
         }
         /* Show preview alongside input - don't hide input */
+        .input-group.image-pending .image-upload-preview {
+            display: flex;
+        }
+        .input-group.image-pending input {
+            display: block;
+            /* Keep input visible */
         }
         .input-group.image-pending input::placeholder {
             color: var(--derm);
         }
         /* Skin chip styling */
+        .chip.skin-chip:hover {
+            border-color: var(--derm);
+            color: var(--derm);
+            background: rgba(155, 89, 182, 0.1);
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(245, 54, 92, 0.4);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(245, 54, 92, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(245, 54, 92, 0);
+            }
+        }
         /* Markdown/Format helpers */
+        .markdown-body ul,
+        .markdown-body ol {
+            padding-left: 20px;
+            margin: 8px 0;
+        }
+        .markdown-body li {
+            margin-bottom: 4px;
+        }
+        .markdown-body p {
+            margin-bottom: 10px;
+        }
+        .markdown-body p:last-child {
+            margin-bottom: 0;
+        }
+        .markdown-body strong {
+            font-weight: 700;
+            color: #fff;
+        }
+        /* Strong text white */
         /* Tool Result Card */
+        .tool-result-row {
+            margin: 8px 0;
+        }
         .tool-result-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             overflow: hidden;
             max-width: 100%;
         }
         .tool-result-header {
+            background: rgba(255, 255, 255, 0.05);
             padding: 8px 12px;
             font-weight: 600;
             font-size: 13px;
             text-transform: capitalize;
             border-bottom: 1px solid var(--border-color);
         }
         .tool-result-body {
             padding: 12px;
             font-size: 14px;
             color: var(--text-main);
         }
         .tool-result-list {
             list-style: none;
             padding: 0;
             margin: 0;
         }
         .tool-result-list li {
             padding: 6px 0;
             border-bottom: 1px solid var(--border-color);
         }
+        .tool-result-list li:last-child {
+            border-bottom: none;
+        }
         .tool-result-list .badge {
             background: var(--secondary);
             padding: 2px 8px;
             animation: blink 0.7s infinite;
             margin-left: 2px;
         }
         @keyframes blink {
+            0%,
+            50% {
+                opacity: 1;
+            }
+            51%,
+            100% {
+                opacity: 0;
+            }
         }
         /* ==========================================
            UNIFIED AGENT FEEDBACK - Subtle & Merged
            ========================================== */
+        .agent-feedback-row {
+            margin: 10px 0;
+        }
         .agent-feedback-card {
             background: rgba(255, 255, 255, 0.02);
             border: 1px solid rgba(255, 255, 255, 0.06);
             overflow: hidden;
             font-size: 12px;
         }
         .agent-feedback-header {
             display: flex;
             align-items: center;
             cursor: pointer;
             user-select: none;
         }
         .agent-feedback-header:hover {
             background: rgba(255, 255, 255, 0.04);
         }
         .agent-feedback-title {
             display: flex;
             align-items: center;
             color: var(--text-muted);
             font-weight: 500;
         }
         .agent-feedback-title .icon {
             font-size: 12px;
             opacity: 0.7;
         }
         .agent-feedback-toggle {
             color: var(--text-muted);
             font-size: 10px;
             transition: transform 0.2s;
         }
         .agent-feedback-card.expanded .agent-feedback-toggle {
             transform: rotate(180deg);
         }
         .agent-feedback-content {
             display: none;
             padding: 0;
             border-top: 1px solid rgba(255, 255, 255, 0.04);
         }
         .agent-feedback-card.expanded .agent-feedback-content {
             display: block;
         }
         .feedback-section {
             padding: 10px 12px;
             border-bottom: 1px solid rgba(255, 255, 255, 0.04);
         }
         .feedback-section:last-child {
             border-bottom: none;
         }
         .feedback-section-label {
             font-size: 10px;
             text-transform: uppercase;
             opacity: 0.7;
             margin-bottom: 6px;
         }
         .feedback-section-content {
             color: var(--text-main);
             opacity: 0.85;
             line-height: 1.5;
         }
         .feedback-section-content .sample-data {
             margin-top: 4px;
             font-size: 11px;
             opacity: 0.6;
         }
         .feedback-plan-item {
             display: flex;
             align-items: flex-start;
             gap: 8px;
             margin-bottom: 6px;
         }
         .feedback-plan-item:last-child {
             margin-bottom: 0;
         }
         .feedback-plan-bullet {
             color: var(--text-muted);
             opacity: 0.5;
             margin-top: 2px;
         }
         .feedback-plan-tool {
             font-weight: 500;
         }
         .feedback-plan-reason {
             font-size: 11px;
             opacity: 0.6;
             margin-top: 2px;
         }
         .feedback-facts {
             white-space: pre-wrap;
         }
         .feedback-citation {
             background: rgba(255, 255, 255, 0.06);
             padding: 1px 4px;
             font-family: monospace;
             font-size: 10px;
         }
         /* Iteration badge */
         .iteration-badge {
             background: var(--primary);
             margin-left: 8px;
             font-weight: 500;
         }
         /* Reflection section styles */
         .reflection-status {
             display: flex;
             border-radius: 6px;
             margin-bottom: 8px;
         }
         .reflection-status.reflection-complete {
             background: rgba(76, 175, 80, 0.15);
             border: 1px solid rgba(76, 175, 80, 0.3);
         }
         .reflection-status.reflection-gaps {
             background: rgba(255, 152, 0, 0.15);
             border: 1px solid rgba(255, 152, 0, 0.3);
         }
         .reflection-icon {
             font-size: 14px;
         }
         .confidence-badge {
             margin-left: auto;
             font-size: 10px;
             padding: 2px 6px;
             border-radius: 8px;
         }
         .reflection-gaps-list {
             font-size: 12px;
             color: var(--warning);
             margin-bottom: 6px;
         }
         .reflection-reasoning {
             font-size: 11px;
             opacity: 0.7;
             font-style: italic;
         }
         /* Workflow summary */
         .workflow-summary .feedback-section-content {
             display: flex;
             gap: 16px;
         }
         .workflow-stat {
             font-size: 12px;
             display: flex;
         /* ==========================================
            PRE-VISIT REPORT PANEL & MODAL
            ========================================== */
         /* Main content wrapper for side-by-side layout */
         .main-content-wrapper {
             display: flex;
             flex: 1;
             overflow: hidden;
         }
         .chat-container {
             flex: 1;
             display: flex;
             display: flex;
             flex-direction: column;
         }
         .report-panel.open {
             width: 320px;
         }
         .report-panel-header {
             padding: 15px;
             border-bottom: 1px solid var(--border-color);
             justify-content: space-between;
             align-items: center;
         }
         .report-panel-header h3 {
             font-size: 14px;
             color: var(--text-main);
             margin: 0;
         }
         .report-panel-close {
             background: none;
             border: none;
             font-size: 18px;
             padding: 4px;
         }
         .report-panel-body {
             flex: 1;
             overflow-y: auto;
             padding: 15px;
         }
         .report-preview {
             background: linear-gradient(135deg, rgba(94, 114, 228, 0.1) 0%, rgba(94, 114, 228, 0.05) 100%);
             border: 1px solid rgba(94, 114, 228, 0.3);
             cursor: pointer;
             transition: all 0.2s;
         }
         .report-preview:hover {
             border-color: var(--primary);
             transform: translateY(-2px);
         }
         .report-preview-placeholder {
             text-align: center;
             color: var(--text-muted);
             padding: 30px 15px;
         }
         .report-preview-placeholder .icon {
             font-size: 32px;
             margin-bottom: 10px;
         }
         .report-preview h4 {
             font-size: 13px;
             color: var(--primary);
             margin: 0 0 8px 0;
         }
         .report-preview-concerns {
             font-size: 12px;
             color: var(--text-main);
             margin-bottom: 8px;
         }
         .report-preview-meta {
             font-size: 11px;
             color: var(--text-muted);
         }
         .report-panel-actions {
             padding: 15px;
             border-top: 1px solid var(--border-color);
         }
         .btn-generate-report {
             width: 100%;
             padding: 12px;
             cursor: pointer;
             transition: background 0.2s;
         }
         .btn-generate-report:hover {
             background: var(--primary-dark);
         }
         .btn-generate-report:disabled {
             background: var(--secondary);
             cursor: not-allowed;
         }
         .btn-generate-report.loading {
             position: relative;
             color: transparent;
         }
         .btn-generate-report.loading::after {
             content: '';
             position: absolute;
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
         @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
         /* Loading indicator for image upload - pulsing dot instead of spinning */
             margin-left: 6px;
             animation: pulse-dot 1s ease-in-out infinite;
         }
         @keyframes pulse-dot {
+            0%,
+            100% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.2);
+            }
         }
         /* Thinking indicator - shows while agent is working */
             color: var(--text-secondary);
             font-size: 0.85rem;
         }
         .thinking-indicator .thinking-dots {
             display: flex;
             gap: 4px;
         }
         .thinking-indicator .thinking-dots span {
             width: 6px;
             height: 6px;
             background: var(--primary);
             animation: thinking-bounce 1.4s ease-in-out infinite;
         }
+        .thinking-indicator .thinking-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .thinking-indicator .thinking-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         @keyframes thinking-bounce {
+            0%,
+            80%,
+            100% {
+                opacity: 0.3;
+                transform: translateY(0);
+            }
+            40% {
+                opacity: 1;
+                transform: translateY(-4px);
+            }
         }
         .thinking-indicator .thinking-text {
             opacity: 0.8;
             transition: opacity 0.3s;
             visibility: hidden;
             transition: all 0.3s;
         }
         .report-modal-overlay.open {
             opacity: 1;
             visibility: visible;
         }
         .report-modal {
             background: var(--bg-card);
             border-radius: var(--radius-lg);
             transform: scale(0.9);
             transition: transform 0.3s;
         }
         .report-modal-overlay.open .report-modal {
             transform: scale(1);
         }
         .report-modal-header {
             padding: 20px;
             border-bottom: 1px solid var(--border-color);
             justify-content: space-between;
             align-items: center;
         }
         .report-modal-header h2 {
             font-size: 18px;
             margin: 0;
             color: var(--text-main);
         }
         .report-modal-actions {
             display: flex;
             gap: 10px;
         }
         .btn-modal-action {
             padding: 8px 16px;
             border-radius: var(--radius-sm);
             border: none;
             transition: all 0.2s;
         }
         .btn-download {
             background: var(--success);
             color: white;
         }
         .btn-close-modal {
             background: var(--secondary);
             color: var(--text-main);
         }
         .report-modal-body {
             flex: 1;
             overflow-y: auto;
             font-size: 14px;
             color: var(--text-main);
         }
         .previsit-report .report-header {
             margin-bottom: 20px;
             padding-bottom: 15px;
             border-bottom: 2px solid var(--primary);
         }
         .previsit-report .report-header h2 {
             font-size: 20px;
             color: var(--primary);
             margin: 0 0 8px 0;
         }
         .previsit-report .report-meta {
             display: flex;
             justify-content: space-between;
             font-size: 13px;
         }
         .previsit-report .patient-info {
             color: var(--text-main);
         }
         .previsit-report .report-date {
             color: var(--text-muted);
         }
         .previsit-report .report-section {
             margin-bottom: 16px;
         }
         .previsit-report .report-section h3 {
             font-size: 14px;
             color: var(--primary);
             margin: 0 0 8px 0;
         }
         .previsit-report .report-section p {
             margin: 0;
             line-height: 1.5;
         }
         .previsit-report .report-section ul {
             margin: 0;
             padding-left: 20px;
         }
         .previsit-report .report-section li {
             margin: 4px 0;
         }
         .previsit-report .report-columns {
             display: flex;
             gap: 20px;
         }
         .previsit-report .report-section.half {
             flex: 1;
         }
         .previsit-report .vitals-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 8px;
         }
         .previsit-report .vital-item {
             background: var(--secondary);
             padding: 8px 12px;
             border-radius: var(--radius-sm);
         }
         .previsit-report .vital-name {
             color: var(--text-muted);
         }
         .previsit-report .vital-value {
             color: var(--text-main);
             font-weight: 600;
         }
         .previsit-report blockquote {
             background: var(--secondary);
             border-left: 3px solid var(--primary);
             font-style: italic;
             border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
         }
         .previsit-report .attachments-list {
             display: flex;
             flex-direction: column;
             gap: 8px;
         }
         .previsit-report .attachment-item {
             background: var(--secondary);
             padding: 10px 12px;
             align-items: center;
             gap: 10px;
         }
         .previsit-report .attachment-icon {
             font-size: 20px;
         }
         .previsit-report .attachment-title {
             font-weight: 600;
         }
         .previsit-report .attachment-summary {
             font-size: 12px;
             color: var(--text-muted);
             margin-top: 4px;
         }
         .previsit-report .report-footer {
             margin-top: 20px;
             padding-top: 15px;
             color: var(--text-muted);
             text-align: center;
         }
         /* NEW: Compact list styling for immunizations/procedures/encounters */
         .previsit-report .compact-list {
             font-size: 12px;
             margin: 0;
             padding-left: 16px;
         }
         .previsit-report .compact-list li {
             margin: 3px 0;
             line-height: 1.4;
         }
         .previsit-report .date-badge {
             color: var(--text-muted);
             font-size: 11px;
         }
         /* Allergy styling with severity indicators */
         .previsit-report .allergies-list {
             margin: 0;
             padding-left: 16px;
         }
         .previsit-report .allergies-list li {
             margin: 4px 0;
         }
         .previsit-report .allergies-list .allergy-high {
             color: #ff6b6b;
         }
         .previsit-report .allergies-list .allergy-high strong {
             color: #ff4757;
         }
         .previsit-report .allergies-list .allergy-low {
             color: var(--text-main);
         }
     </style>
 </head>
 <body>
     <div class="app-shell">
                 <div class="chat-viewport" id="chatMessages">
                     <div class="message-row assistant">
                         <div class="bubble">
+                            Hello! I'm ready to help. You can ask me to visualize your health data, use the microphone
+                            to analyze respiratory sounds, or upload a skin image for analysis.
                         </div>
                     </div>
                 </div>
                 <div class="input-area">
                     <div class="chips-row">
                         <div class="chips-scroll">
                             <div class="chip" data-q="Show me my blood pressure chart">📈 BP Chart</div>
                             <div class="chip" data-q="Analyze my cough risk">🎤 Cough Check</div>
                             <div class="chip skin-chip" data-action="upload-skin">🔬 Skin Analysis</div>
                         </div>
+                        <button class="btn-toggle-report" id="btnToggleReport" onclick="toggleReportPanel()"
+                            title="Pre-Visit Report">
                             <span class="icon">📋</span>
                             <span>Report</span>
                         </button>
                     <div class="input-group" id="mainInputGroup">
                         <input type="text" id="chatInput" placeholder="Ask a health question..." disabled>
                         <div class="recording-overlay" id="recordingOverlay">
                             <span style="color: var(--danger); font-weight: 600; font-size: 14px;">Recording...</span>
                             <div class="wave-viz"></div>
                             <button class="btn-cancel-image" onclick="cancelImageUpload()">✕</button>
                         </div>
+                        <button class="btn-icon btn-image" id="imageBtn" title="Upload Skin Image"
+                            onclick="triggerImageUpload()">
                             📷
                         </button>
                         <button class="btn-icon btn-record" id="recordBtn" title="Record Audio" disabled>
                             ➤
                         </button>
                     </div>
                     <div style="text-align: center; margin-top: 10px; font-size: 11px; color: var(--text-muted);">
                         ⚠️ AI responses can be inaccurate. Consult a doctor.
                     </div>
                 <div class="report-panel-body">
                     <div class="report-preview-placeholder" id="reportPlaceholder">
                         <div class="icon">📝</div>
+                        <p>Chat with me about your health concerns, then generate a summary to share with your doctor.
+                        </p>
                     </div>
                     <div class="report-preview" id="reportPreview" style="display: none;" onclick="openReportModal()">
                         <h4>Pre-Visit Summary Ready</h4>
         // ==========================================
         let patientId = null;
         let chartCounter = 0;
         // Report tracking state
         let conversationHistory = [];
         let collectedToolResults = [];
         let collectedAttachments = [];  // Now includes {type, title, summary, imageData} for charts AND skin images
         let currentReport = null;
         // Agent feedback state - for merging into single card
         let currentFeedbackCard = null;
         let feedbackData = { discovery: null, plan: null, facts: [], reflection: null, workflow: null, iteration: 1 };
         // Skin image upload state
         let pendingImageData = null;
         let pendingImageFile = null;
         const skinImageInput = document.getElementById('skinImageInput');
         // DOM Elements
         const chatMessages = document.getElementById('chatMessages');
         const chatInput = document.getElementById('chatInput');
             });
             // Collapsible Context
+            document.getElementById('summaryToggle').addEventListener('click', function () {
                 document.getElementById('summaryContent').classList.toggle('open');
                 const arrow = this.querySelector('span:last-child');
                 arrow.textContent = arrow.textContent === '▼' ? '▲' : '▼';
         // ==========================================
         // SKIN IMAGE UPLOAD HANDLING
         // ==========================================
         function triggerImageUpload() {
             skinImageInput.click();
         }
             // Read and preview the image
             const reader = new FileReader();
+            reader.onload = function (e) {
                 pendingImageData = e.target.result;
                 // Show preview
                 document.getElementById('previewThumbnail').src = pendingImageData;
                 mainInputGroup.classList.add('image-pending');
                 // Update placeholder to guide user
                 chatInput.placeholder = 'Add a message about this image (optional)...';
                 chatInput.focus();
             // Store data locally
             const imageToSend = pendingImageData;
             // Clear UI state
             cancelImageUpload();
             chatInput.value = ''; // Clear the text input
             // 3. Add Loading Feedback (Fixes lack of feedback)
             chatSend.disabled = true;
             // Reset feedback state for new image message
             currentFeedbackCard = null;
             feedbackData = { discovery: null, plan: null, facts: [], reflection: null, workflow: null, iteration: 1 };
             // Create/Show the feedback card immediately with a loading state
             const feedbackCard = getOrCreateFeedbackCard();
             const titleSpan = feedbackCard.querySelector('.agent-feedback-title span:last-child');
             // Send to agent
             await sendAgentMessage(caption, imageToSend);
             chatSend.disabled = false;
             chatInput.focus();
         }
             `;
             chatMessages.appendChild(div);
             forceScrollToBottom();
             // Track for conversation history
             trackConversation('user', `[Uploaded skin image] ${caption}`);
         }
             const qualityScore = quality.score || 0;
             const notes = quality.notes || ['No analysis notes available'];
             const modelName = result.model || 'Derm Foundation';
             // Formulate the analysis summary
             const analysisSummary = `Image Quality: ${qualityScore}/100. ${notes.join(' ')}`;
             // Fix: Check if we just added this image (to avoid duplicates in report)
             // We look for the last attachment of type 'skin'
             const lastAttachment = collectedAttachments.length > 0 ? collectedAttachments[collectedAttachments.length - 1] : null;
             if (lastAttachment && lastAttachment.type === 'skin' && lastAttachment.imageData === imageData) {
                 // Update the existing attachment with the analysis results
                 lastAttachment.summary += ` | Analysis: ${analysisSummary}`;
                 // Fallback: Track as new if for some reason it wasn't caught
                 trackAttachment('skin', `Skin Analysis (${modelName})`, analysisSummary, imageData);
             }
             const scoreColor = qualityScore < 50 ? 'var(--danger)' : qualityScore < 75 ? 'var(--warning)' : 'var(--success)';
             const notesHtml = notes.map(n => `<li>${escapeHtml(n)}</li>`).join('');
             const html = `
                 <div class="message-row widget-row">
                     <div class="widget-card">
                     </div>
                 </div>
             `;
             chatMessages.insertAdjacentHTML('beforeend', html);
             forceScrollToBottom();
             // Track for conversation
             trackConversation('assistant', `[Skin Analysis Result] Quality: ${qualityScore}/100. ${notes.join(' ')}`);
         }
                 const res = await fetch('/api/patients');
                 const data = await res.json();
                 if (data.patients.length === 0) return;
                 const patient = data.patients[0];
                 patientId = patient.id;
                 document.getElementById('patientSummaryName').textContent = `Patient: ${patient.display_name} (${patient.age}y)`;
                 chatInput.disabled = false;
                 chatSend.disabled = false;
                 loadHealthDetails();
                 ]);
                 // Render Tags
+                const renderTags = (list, key, alert = false) => {
                     if (!list || list.length === 0) return '<span class="tag">None</span>';
+                    return list.map(item => `<span class="tag ${alert ? 'alert' : ''}">${item[key] || item.display || item.substance}</span>`).join('');
                 };
                 document.getElementById('conditionsList').innerHTML = renderTags(conditions.conditions, 'display');
         // ==========================================
         // UI RENDERING
         // ==========================================
         // Track if user has scrolled away - don't auto-scroll if they have
         let userHasScrolledAway = false;
         let scrollTimeout = null;
         // ANY upward scroll immediately stops auto-scroll
         chatMessages.addEventListener('wheel', (e) => {
             if (e.deltaY < 0) {
                 }
             }
         }, { passive: true });
         // Touch support
         let touchStartY = 0;
         chatMessages.addEventListener('touchstart', (e) => {
             touchStartY = e.touches[0].clientY;
         }, { passive: true });
         chatMessages.addEventListener('touchmove', (e) => {
             const touchY = e.touches[0].clientY;
             if (touchY > touchStartY) {
                 userHasScrolledAway = true;
             }
         }, { passive: true });
         // Debounced scroll - doesn't fight user as aggressively
         function scrollToBottom(force = false) {
             if (userHasScrolledAway && !force) return;
             // Cancel any pending scroll
             if (scrollTimeout) cancelAnimationFrame(scrollTimeout);
             // Use requestAnimationFrame for smoother, less aggressive scrolling
             scrollTimeout = requestAnimationFrame(() => {
                 chatMessages.scrollTop = chatMessages.scrollHeight;
             });
         }
         // Force scroll for new user messages and important events
         function forceScrollToBottom() {
             userHasScrolledAway = false;
             // Reset feedback state for new message
             currentFeedbackCard = null;
             feedbackData = { discovery: null, plan: null, facts: [], reflection: null, workflow: null, iteration: 1 };
             const div = document.createElement('div');
             div.className = 'message-row user';
             div.innerHTML = `<div class="bubble">${escapeHtml(content)}</div>`;
             chatMessages.appendChild(div);
             forceScrollToBottom(); // Always scroll for user's own message
             // Track for report
             trackConversation('user', content);
         }
         function addAssistantMessage(content) {
             const div = document.createElement('div');
             div.className = 'message-row assistant';
             // Remove "ANSWER:" prefix (case insensitive) and whitespace
             const cleanContent = content.replace(/^ANSWER:\s*/i, '');
             // Convert Markdown to HTML using marked
             const htmlContent = marked.parse(cleanContent);
+            div.innerHTML = `<div class="bubble markdown-body">${htmlContent}</div>`;
             chatMessages.appendChild(div);
             scrollToBottom();
             // Track for report
             trackConversation('assistant', cleanContent);
         }
         // Thinking indicator - shows while agent is processing
         let thinkingElement = null;
         function showThinking(text = 'Thinking') {
             removeThinking(); // Remove any existing
             const div = document.createElement('div');
             thinkingElement = div;
             scrollToBottom();
         }
         function updateThinking(text) {
             if (thinkingElement) {
                 const textEl = thinkingElement.querySelector('.thinking-text');
                 showThinking(text);
             }
         }
         function removeThinking() {
             if (thinkingElement) {
                 thinkingElement.remove();
                 streamingText += token;
                 // Remove "ANSWER:" prefix dynamically during stream
                 const cleanText = streamingText.replace(/^ANSWER:\s*/i, '');
                 // Using marked.parse here so markdown renders during stream
                 streamingBubble.innerHTML = marked.parse(cleanText);
                 scrollToBottom(); // Smart scroll - won't interrupt if user scrolled up
         function endStreamingAnswer() {
             if (streamingBubble) {
                 streamingBubble.classList.remove('streaming');
                 // Track the completed streamed answer for report
                 if (streamingText.trim()) {
                     const cleanContent = streamingText.replace(/^ANSWER:\s*/i, '');
                     trackConversation('assistant', cleanContent);
                 }
                 streamingBubble = null;
                 streamingText = "";
             }
         // Only show errors as assistant messages
         function addSystemLog(text, type = 'status') {
             if (type !== 'error') return; // Skip all non-error logs
             // Show errors as simple assistant messages
             const div = document.createElement('div');
             div.className = 'message-row assistant';
             } catch (e) {
                 formattedContent = `<pre>${escapeHtml(result)}</pre>`;
             }
             const div = document.createElement('div');
             div.className = 'message-row tool-result-row';
             div.innerHTML = `
         // ==========================================
         // UNIFIED AGENT FEEDBACK - Merged & Subtle
         // ==========================================
         function getOrCreateFeedbackCard() {
             if (!currentFeedbackCard) {
                 const div = document.createElement('div');
             }
             return currentFeedbackCard;
         }
         function toggleFeedbackCard(header) {
             const card = header.closest('.agent-feedback-card');
             card.classList.toggle('expanded');
         }
         function updateFeedbackCard() {
             const card = getOrCreateFeedbackCard();
             const content = card.querySelector('.agent-feedback-content');
             const titleSpan = card.querySelector('.agent-feedback-title span:last-child');
             // Remove loading indicator when we have actual content
             titleSpan.classList.remove('loading-indicator');
             let html = '';
             let stepCount = 0;
             // Discovery section
             if (feedbackData.discovery) {
                 stepCount++;
                     </div>
                 `;
             }
             // Plan section (with iteration badge)
             if (feedbackData.plan && feedbackData.plan.length > 0) {
                 stepCount++;
                         </div>
                     `;
                 }).join('');
+                const iterationBadge = feedbackData.iteration > 1
+                    ? `<span class="iteration-badge">Iteration ${feedbackData.iteration}</span>`
                     : '';
                 html += `
                     <div class="feedback-section">
                         <div class="feedback-section-label">Query Plan ${iterationBadge}</div>
                     </div>
                 `;
             }
             // Facts sections
             if (feedbackData.facts.length > 0) {
                 feedbackData.facts.forEach(f => {
                     `;
                 });
             }
             // Reflection section
             if (feedbackData.reflection) {
                 stepCount++;
                 const statusIcon = r.has_enough_info ? '✓' : '⚠';
                 const statusClass = r.has_enough_info ? 'reflection-complete' : 'reflection-gaps';
                 const confidenceBar = Math.round((r.confidence || 0.8) * 100);
                 let reflectionContent = `
                     <div class="reflection-status ${statusClass}">
                         <span class="reflection-icon">${statusIcon}</span>
                         <span class="confidence-badge">${confidenceBar}% confident</span>
                     </div>
                 `;
                 if (r.gaps && r.gaps.length > 0) {
                     reflectionContent += `
                         <div class="reflection-gaps-list">
                         </div>
                     `;
                 }
                 if (r.reasoning) {
                     reflectionContent += `<div class="reflection-reasoning">${escapeHtml(r.reasoning)}</div>`;
                 }
                 html += `
                     <div class="feedback-section">
                         <div class="feedback-section-label">Reflection</div>
                     </div>
                 `;
             }
             // Workflow summary (at the end)
             if (feedbackData.workflow) {
                 const w = feedbackData.workflow;
                     </div>
                 `;
             }
             content.innerHTML = html;
             // Update title with step count
             if (stepCount > 0) {
                 titleSpan.textContent = `${stepCount} step${stepCount > 1 ? 's' : ''} completed`;
             }
         }
         function addDiscoveryCard(summary, manifest) {
             let samplesHtml = '';
             if (manifest && manifest.sample_values) {
                 }
                 samplesHtml = parts.join(' • ');
             }
             feedbackData.discovery = { summary, samples: samplesHtml };
             updateFeedbackCard();
         }
         function addFactsCard(toolName, facts, rawPreview) {
             feedbackData.facts.push({ tool: toolName, facts });
             updateFeedbackCard();
             // Track for report
             trackToolResult(toolName, facts);
         }
         function addReflectionCard(event) {
             feedbackData.reflection = {
                 has_enough_info: event.has_enough_info,
             };
             updateFeedbackCard();
         }
         function addWorkflowSummary(event) {
             feedbackData.workflow = {
                 iterations: event.iterations || 1,
                 console.warn('Skipping empty chart data:', chartData?.title);
                 return;
             }
             // NEW: Check if any dataset actually has data points
             const hasDataPoints = chartData.datasets.some(ds => ds.data && ds.data.length > 0);
             if (!hasDataPoints) {
                 console.warn('Skipping chart with empty datasets:', chartData?.title);
                 return;
             }
             chartCounter++;
             const canvasId = `canvas-${chartCounter}`;
             // Track as attachment for report (image will be added after render)
             let summary = chartData.title;
             if (chartData.summary && Array.isArray(chartData.summary)) {
                 summary += ': ' + chartData.summary.slice(0, 2).join('; ');
             }
             // Create attachment object and store direct reference (not index)
             const attachmentObj = { type: 'chart', title: chartData.title, summary, imageData: null };
             collectedAttachments.push(attachmentObj);
             const div = document.createElement('div');
             div.className = 'message-row widget-row';
             div.innerHTML = `
         }
         function createChartInstance(ctx, chartData, attachmentObj) {
+            const primaryColor = '#5e72e4';
             // Set global defaults for Dark Mode charts
             Chart.defaults.color = '#8898aa';
             Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
             const isBar = chartData.chart_type && chartData.chart_type.includes('bar');
             // FIX: If bar chart, use high opacity (CC = ~80%), otherwise low opacity (20 = ~12%)
             const opacityHex = isBar ? 'CC' : '20';
                     label: ds.label,
                     data: ds.data.map(d => typeof d === 'object' ? (d.value || d.y) : d),
                     borderColor: color,
+                    backgroundColor: color + opacityHex,
                     tension: 0.3,
                     fill: !isBar // Don't fill bar charts
                 };
             });
             console.log(`[CHART DEBUG] Total datasets: ${datasets.length}, isBar: ${isBar}`);
             const labels = chartData.labels || chartData.datasets[0].data.map(d => d.date);
             new Chart(ctx, {
                     maintainAspectRatio: false,
                     // FIXED: Use animation onComplete callback to capture chart image
                     animation: {
+                        onComplete: function () {
                             // This runs only when the chart is fully drawn
                             if (!attachmentObj) return;
                             try {
                                 const canvas = ctx.canvas;
                                 // Create a temporary canvas to bake in a dark background
                                 // This ensures the chart is visible in PDF export
                                 const tempCanvas = document.createElement('canvas');
                                 tempCanvas.width = canvas.width;
                                 tempCanvas.height = canvas.height;
                                 const tempCtx = tempCanvas.getContext('2d');
                                 // Fill dark background (matches our UI)
                                 tempCtx.fillStyle = '#171c29';
                                 tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
                                 // Draw the chart on top
                                 tempCtx.drawImage(canvas, 0, 0);
                                 // Save this opaque image
                                 attachmentObj.imageData = tempCanvas.toDataURL('image/png');
                             } catch (e) {
         async function sendMessage() {
             // Capture text immediately
             const message = chatInput.value.trim();
             // Check if there's a pending skin image
             if (pendingImageData) {
                 // Pass the message text to the image handler
                 await sendSkinImageForAnalysis(message);
                 return;
             }
             if (!message || !patientId) return;
             addUserMessage(message);
         async function sendAgentMessage(message, skinImageData = null) {
             try {
+                const requestBody = {
+                    patient_id: patientId,
+                    message,
+                    conversation_history: conversationHistory
                 };
                 // Include skin image data if provided
                 if (skinImageData) {
                     requestBody.skin_image_data = skinImageData;
                 }
                 const response = await fetch('/api/agent/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     const chunk = decoder.decode(value);
                     const lines = chunk.split('\n');
                     for (const line of lines) {
                         const trimmedLine = line.trim();
                         if (!trimmedLine || !trimmedLine.startsWith('data: ')) continue;
                         try {
                             const event = JSON.parse(dataStr);
                             switch (event.type) {
+                                case 'status':
                                     // Show thinking indicator with status text
                                     updateThinking(event.message || 'Thinking');
                                     break;
                                         addPlanCard(event.tools, event.iteration || 1);
                                     }
                                     break;
+                                case 'tool_call':
                                     updateThinking(`Retrieving ${event.tool || 'data'}...`);
                                     break;
                                 case 'tool_result':
                                     // Error recovery: Log tool errors but continue
                                     console.warn(`Tool error: ${event.tool} - ${event.error}`);
                                     break;
+                                case 'chart_data':
                                     renderChartWidget(event.data); break;
                                 case 'skin_analysis':
                                     // Handle skin analysis results from agent
                                         renderSkinAnalysisWidget(event.data, event.image_data || skinImageData);
                                     }
                                     break;
+                                case 'answer':
                                     removeThinking();
                                     addAssistantMessage(event.content); break;
                                 case 'answer_start':
                                     removeThinking();
                                     addSystemLog(event.message, 'error'); break;
                             }
+                        } catch (e) {
+                            console.log('Skipping non-JSON chunk:', dataStr);
                         }
                     }
                 }
         let mediaRecorder = null;
         let audioChunks = [];
         let isRecording = false;
         // 1. Check Capabilities
         fetch('/api/audio/status').then(r => r.json()).then(data => {
             if (data.available) {
                 mediaRecorder.stop();
                 isRecording = false;
                 recordBtn.classList.remove('recording');
                 // Toggle UI back to Input
                 mainInputGroup.classList.remove('recording-active');
                 // Don't show status log anymore
             } else {
                 // START RECORDING
                     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                     mediaRecorder = new MediaRecorder(stream);
                     audioChunks = [];
                     mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
                     mediaRecorder.onstop = () => {
                         const blob = new Blob(audioChunks, { type: 'audio/webm' });
                     mediaRecorder.start();
                     isRecording = true;
                     recordBtn.classList.add('recording');
                     // Toggle UI to Overlay
                     mainInputGroup.classList.add('recording-active');
             const data = result.health_assessment || result.respiratory_indicators || {};
             const score = data.respiratory_health_score || data.overall_score || 0;
             const modelName = result.model || 'Unknown';
             // Track as attachment for report
             const summary = `Respiratory Health Score: ${Math.round(score)}/100. ` +
                 `Cough: ${data.cough_level || 'None'}. ` +
                 `Breathing: ${data.breathing_quality || 'Normal'}.` +
                 (result.covid_risk ? ` COVID Risk: ${result.covid_risk.risk_level || 'Unknown'}.` : '');
             trackAttachment('audio', `Respiratory Analysis (${modelName})`, summary);
             const scoreColor = score < 60 ? 'var(--danger)' : score < 80 ? 'var(--warning)' : 'var(--success)';
             const html = `
                 <div class="message-row widget-row">
                     <div class="widget-card">
                     </div>
                 </div>
             `;
             chatMessages.insertAdjacentHTML('beforeend', html);
             forceScrollToBottom(); // Force scroll to show audio results
         }
         // ==========================================
         // PRE-VISIT REPORT FUNCTIONS
         // ==========================================
         function toggleReportPanel() {
             const panel = document.getElementById('reportPanel');
             panel.classList.toggle('open');
         }
         function openReportModal() {
             if (!currentReport) return;
             const overlay = document.getElementById('reportModalOverlay');
             const body = document.getElementById('reportModalBody');
             // Build chart images HTML
             let chartImagesHtml = '';
             let skinImagesHtml = '';
             collectedAttachments.forEach(att => {
                 if (att.type === 'chart' && att.imageData) {
                     chartImagesHtml += `
                     `;
                 }
             });
             // Combine report HTML with chart and skin images
             let additionalSections = '';
             if (chartImagesHtml) {
                     </div>
                 `;
             }
             body.innerHTML = currentReport.html + additionalSections;
             overlay.classList.add('open');
         }
         function closeReportModal(event) {
             if (event && event.target !== event.currentTarget) return;
             document.getElementById('reportModalOverlay').classList.remove('open');
         }
         async function generateReport() {
             if (!patientId) return;
             const btn = document.getElementById('btnGenerateReport');
             btn.classList.add('loading');
             btn.disabled = true;
             try {
                 const response = await fetch('/api/report/generate', {
                     method: 'POST',
                         attachments: collectedAttachments
                     })
                 });
                 const data = await response.json();
                 if (data.success) {
                     currentReport = data;
                     updateReportPreview(data.report);
                     // Update toggle button
                     document.getElementById('btnToggleReport').classList.add('has-report');
                     // Open panel if not already open
                     const panel = document.getElementById('reportPanel');
                     if (!panel.classList.contains('open')) {
                 btn.disabled = false;
             }
         }
         function updateReportPreview(report) {
             document.getElementById('reportPlaceholder').style.display = 'none';
             const preview = document.getElementById('reportPreview');
             preview.style.display = 'block';
             const concerns = report.chief_concerns || [];
+            document.getElementById('previewConcerns').textContent =
                 concerns.length > 0 ? concerns.slice(0, 2).join(', ') : 'No specific concerns noted';
             const attachCount = (report.attachments || []).length;
+            document.getElementById('previewMeta').textContent =
                 `${report.generated_at} • ${attachCount} attachment${attachCount !== 1 ? 's' : ''}`;
         }
         function downloadReport() {
             if (!currentReport) return;
             // Build chart and skin images HTML from collected attachments
             let chartImagesHtml = '';
             let skinImagesHtml = '';
             collectedAttachments.forEach(att => {
                 if (att.type === 'chart' && att.imageData) {
                     chartImagesHtml += `
                     `;
                 }
             });
             // Create container for PDF generation with explicit dark text on white background
             const pdfContainer = document.createElement('div');
             pdfContainer.innerHTML = `
                     </div>
                 </div>
             `;
             // PDF options
             const opt = {
                 margin: [10, 10, 10, 10],
                 jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
                 pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
             };
             // Generate and download PDF
             html2pdf().set(opt).from(pdfContainer).save();
         }
         // Track conversation for report
         function trackConversation(role, content) {
             conversationHistory.push({ role, content });
         }
         // Track tool results for report
         function trackToolResult(tool, facts) {
             collectedToolResults.push({ tool, facts });
         }
         // Track attachments for report (including chart images)
         function trackAttachment(type, title, summary, imageData = null) {
             collectedAttachments.push({ type, title, summary, imageData });
         }
     </script>
 </body>
 </html>