diff --git a/website/comprehensive-demo.html b/website/comprehensive-demo.html
index 010e8a3fb..229d37d36 100644
--- a/website/comprehensive-demo.html
+++ b/website/comprehensive-demo.html
@@ -3,34 +3,48 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Comprehensive SAMO-DL Demo - All Core Features</title>
-    <meta name="description" content="Interactive demo showcasing all SAMO-DL core features: emotion detection, voice transcription, text summarization, batch processing, and more">
+    <title>SAMO Emotion Detection API - SAMO Deep Learning</title>
+    <meta name="description" content="Interactive demo showcasing SAMO Whisper (voice transcription), SAMO T5 (text summarization), and SAMO DeBERTa v3 Large (emotion detection)">
+
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+    <!-- Content Security Policy is now handled by HTTP headers -->
 
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Font Awesome -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <!-- Chart.js for visualizations -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <!-- Google Material Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Custom CSS -->
-    <link href="css/styles.css" rel="stylesheet">
-
+    <link rel="stylesheet" href="css/comprehensive-demo.css">
+    <!-- Highcharts removed - using pure HTML/CSS charts -->
 </head>
-<body>
+<body class="comprehensive-demo">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
         <div class="container">
-            <a class="navbar-brand fw-bold" href="#">
-                <i class="fas fa-brain text-primary me-2"></i>
-                SAMO-DL Demo
+            <a class="navbar-brand fw-bold" href="index.html">
+                <span class="material-icons text-primary me-2">psychology</span>
+                SAMO-DL
             </a>
-            <div class="navbar-nav ms-auto">
-                <a class="nav-link" href="index.html">Home</a>
-                <a class="nav-link active" href="comprehensive-demo.html">Demo</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="comprehensive-demo.html">All Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="integration.html">Integration</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="btn btn-primary ms-2" href="#demo">Try Now</a>
+                    </li>
+                </ul>
             </div>
         </div>
     </nav>
@@ -38,34 +52,56 @@
     <!-- Hero Section -->
     <section class="hero-section">
         <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-8 mx-auto text-center hero-content">
+            <div class="row align-items-center hero-content">
+                <div class="col-lg-6">
                     <h1 class="display-4 fw-bold mb-4">
-                        <i class="fas fa-rocket me-3"></i>
-                        Comprehensive SAMO-DL Demo
+                        SAMO Emotion Detection API
                     </h1>
                     <p class="lead mb-4">
-                        Experience all the core features of our enterprise-grade AI system:
-                        emotion detection, voice transcription, text summarization, batch processing,
-                        and real-time monitoring.
+                        Experience the full power of our AI platform with <strong>SAMO Whisper</strong> for voice transcription,
+                        <strong>SAMO T5</strong> for text summarization, and <strong>SAMO DeBERTa v3 Large</strong> for emotion detection.
                     </p>
-                    <div class="d-flex justify-content-center gap-3 flex-wrap">
-                        <span class="security-badge">
-                            <i class="fas fa-shield-alt me-1"></i>
-                            Production Ready
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-bolt me-1"></i>
-                            >90% F1 Score
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-tachometer-alt me-1"></i>
-                            2.3x Performance
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-cloud me-1"></i>
-                            Cloud Deployed
-                        </span>
+                    <div class="d-flex gap-3">
+                        <a href="#demo" class="btn btn-light btn-lg">
+                            <span class="material-icons me-2">play_arrow</span>
+                            Start Demo
+                        </a>
+                        <a href="integration.html" class="btn btn-outline-light btn-lg">
+                            <span class="material-icons me-2">code</span>
+                            View Code
+                        </a>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="row g-3">
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-primary mb-2 material-icons-2rem">mic</span>
+                                <h6 class="fw-bold">SAMO Whisper</h6>
+                                <small class="text-muted">Voice Transcription</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-success mb-2 material-icons-2rem">description</span>
+                                <h6 class="fw-bold">SAMO T5</h6>
+                                <small class="text-muted">Text Summarization</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-warning mb-2 material-icons-2rem">favorite</span>
+                                <h6 class="fw-bold">SAMO DeBERTa v3 Large</h6>
+                                <small class="text-muted">28 Emotions</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-info mb-2 material-icons-2rem">rocket_launch</span>
+                                <h6 class="fw-bold">Complete Pipeline</h6>
+                                <small class="text-muted">End-to-End AI</small>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -73,1185 +109,630 @@ <h1 class="display-4 fw-bold mb-4">
     </section>
 
     <!-- Demo Container -->
-    <div class="container">
-        <div class="demo-container">
-            <!-- Feature Tabs -->
-            <div class="text-center mb-4">
-                <button class="demo-tab active" onclick="showFeature('emotion', event)">
-                    <i class="fas fa-heart me-2"></i>
-                    Emotion Detection
-                </button>
-                <button class="demo-tab" onclick="showFeature('voice', event)">
-                    <i class="fas fa-microphone me-2"></i>
-                    Voice Transcription
-                </button>
-                <button class="demo-tab" onclick="showFeature('batch', event)">
-                    <i class="fas fa-layer-group me-2"></i>
-                    Batch Processing
-                </button>
-                <button class="demo-tab" onclick="showFeature('summarization', event)">
-                    <i class="fas fa-compress-alt me-2"></i>
-                    Text Summarization
-                </button>
-                <button class="demo-tab" onclick="showFeature('monitoring', event)">
-                    <i class="fas fa-chart-line me-2"></i>
-                    Real-time Monitoring
-                </button>
-                <button class="demo-tab" onclick="showFeature('security', event)">
-                    <i class="fas fa-shield-alt me-2"></i>
-                    Security Features
-                </button>
-            </div>
-
-            <!-- Emotion Detection Demo -->
-            <div id="emotion-demo" class="feature-demo">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-heart text-danger me-2"></i>
-                    Emotion Detection
-                </h3>
-                <p class="text-muted mb-4">
-                    Our flagship feature with >90% F1 score. Analyze text and detect emotions with high accuracy.
-                </p>
-
+    <section id="demo" class="py-4">
+        <div class="container-fluid px-4">
+            <div class="demo-container">
                 <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="emotion-text" class="form-label fw-bold">Enter your text:</label>
-                            <textarea class="form-control" id="emotion-text" rows="4"
-                                placeholder="Try: 'I am feeling really happy and excited about this project!'"></textarea>
-                        </div>
-                        <button class="btn btn-primary btn-lg" onclick="analyzeEmotion()">
-                            <i class="fas fa-magic me-2"></i>
-                            Analyze Emotions
-                        </button>
-                    </div>
-                    <div class="col-md-6">
-                        <div id="emotion-results"></div>
-                    </div>
-                </div>
-
-                <div class="loading-spinner" id="emotion-loading">
-                    <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Loading...</span>
+                    <div class="col-12 text-center mb-3">
+                        <p class="text-muted mb-0">
+                            Enter text to see our AI pipeline in action
+                        </p>
                     </div>
-                    <p class="mt-2">Analyzing emotions...</p>
-                </div>
-            </div>
-
-            <!-- Voice Transcription Demo -->
-            <div id="voice-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-microphone text-info me-2"></i>
-                    Voice-to-Text Transcription
-                </h3>
-                <p class="text-muted mb-4">
-                    Convert speech to text with emotion analysis using OpenAI Whisper integration.
-                </p>
-
-                <div class="voice-recorder">
-                    <button class="record-button" id="record-btn" onclick="toggleRecording()">
-                        <i class="fas fa-microphone" id="record-icon"></i>
-                    </button>
-                    <p class="mt-3" id="recording-status">Click to start recording</p>
                 </div>
 
-                <div class="row">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Transcription Result:</h5>
-                        <div id="transcription-result" class="result-card">
-                            <p class="text-muted">Record audio to see transcription here...</p>
+                <!-- Dynamic Layout: Title with Flow | Centered Input | Hidden Results -->
+                <div class="row" id="titleWithFlow">
+                    <div class="col-12 d-flex align-items-center justify-content-center mb-4">
+                        <div class="d-flex align-items-center gap-4">
+                            <h2 class="h3 fw-bold mb-0">SAMO Emotion Pipeline</h2>
+                            <!-- Horizontal Progress Flow -->
+                            <div class="progress-pipeline-horizontal">
+                                <div class="progress-step-horizontal" id="step1">
+                                    <div class="step-icon-small pending" id="step1-icon">
+                                        <span class="material-icons">upload</span>
+                                    </div>
+                                    <span class="step-label">Input</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step2">
+                                    <div class="step-icon-small pending" id="step2-icon">
+                                        <span class="material-icons">mic</span>
+                                    </div>
+                                    <span class="step-label">Transcription</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step3">
+                                    <div class="step-icon-small pending" id="step3-icon">
+                                        <span class="material-icons">description</span>
+                                    </div>
+                                    <span class="step-label">Summarization</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step4">
+                                    <div class="step-icon-small pending" id="step4-icon">
+                                        <span class="material-icons">favorite</span>
+                                    </div>
+                                    <span class="step-label">Emotion Analysis</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Emotion Analysis:</h5>
-                        <div id="voice-emotion-results"></div>
-                    </div>
                 </div>
 
-                <div class="loading-spinner" id="voice-loading">
-                    <div class="spinner-border text-info" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Processing audio...</p>
-                </div>
-            </div>
-
-            <!-- Batch Processing Demo -->
-            <div id="batch-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-layer-group text-warning me-2"></i>
-                    Batch Processing
-                </h3>
-                <p class="text-muted mb-4">
-                    Process multiple texts efficiently with optimized batch processing capabilities.
-                </p>
-
-                <div class="batch-input">
-                    <label class="form-label fw-bold">Enter multiple texts (one per line):</label>
-                    <textarea class="form-control" id="batch-texts" rows="6"
-                        placeholder="I am feeling really happy today!
-This is so frustrating, nothing works properly.
-I'm really excited about this new project.
-I feel a bit sad about the changes."></textarea>
-                    <button class="btn btn-warning btn-lg mt-3" onclick="processBatch()">
-                        <i class="fas fa-cogs me-2"></i>
-                        Process Batch
-                    </button>
-                </div>
-
-                <div id="batch-results"></div>
+                <!-- Initial Input Layout -->
+                <div class="row" id="inputLayout">
+                    <!-- Centered Input Section -->
+                    <div class="col-lg-8 offset-lg-2">
+                        <!-- API Notice -->
+                        <div class="alert alert-info mb-3" role="alert">
+                            <span class="material-icons me-2">info</span>
+                            <strong>Live API Demo:</strong> This demo connects to our live SAMO APIs. Full voice processing now available!
+                        </div>
 
-                <div class="loading-spinner" id="batch-loading">
-                    <div class="spinner-border text-warning" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Processing batch...</p>
-                </div>
-            </div>
+                        <!-- Input Section -->
+                        <!-- Audio Upload -->
+                        <div class="mb-4">
+                            <label for="audioFile" class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2" aria-hidden="true">mic</span>
+                                Upload Audio File
+                            </label>
+                            <input type="file"
+                                   class="form-control form-control-lg"
+                                   id="audioFile"
+                                   accept="audio/*"
+                                   aria-describedby="audioFile-help"
+                                   aria-label="Select audio file for transcription and emotion analysis">
+                            <div id="audioFile-help" class="form-text">Upload an audio file for transcription and emotion analysis. Supported formats: WebM, WAV, MP4.</div>
+                        </div>
 
-            <!-- Text Summarization Demo -->
-            <div id="summarization-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-compress-alt text-success me-2"></i>
-                    Text Summarization
-                </h3>
-                <p class="text-muted mb-4">
-                    Generate intelligent summaries while preserving emotional context.
-                </p>
+                        <!-- Audio Recording -->
+                        <div class="mb-4">
+                            <label class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2" aria-hidden="true">fiber_manual_record</span>
+                                Record Audio
+                            </label>
+                            <div class="d-flex gap-3 justify-content-center" role="group" aria-label="Audio recording controls">
+                                <button class="btn btn-outline-secondary btn-lg"
+                                        id="recordBtn"
+                                        disabled
+                                        aria-label="Start audio recording"
+                                        aria-describedby="recording-help"
+                                        tabindex="0">
+                                    <span class="material-icons me-2" aria-hidden="true">mic</span>
+                                    Start Recording
+                                </button>
+                                <button class="btn btn-outline-secondary btn-lg"
+                                        id="stopBtn"
+                                        disabled
+                                        aria-label="Stop audio recording"
+                                        aria-describedby="recording-help"
+                                        tabindex="0">
+                                    <span class="material-icons me-2" aria-hidden="true">stop</span>
+                                    Stop Recording
+                                </button>
+                            </div>
 
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="summary-text" class="form-label fw-bold">Enter long text to summarize:</label>
-                        <textarea class="form-control" id="summary-text" rows="8"
-                            placeholder="Today has been an incredible day! I woke up feeling refreshed and ready to tackle the world. The weather was perfect - sunny with a gentle breeze that made me feel alive and grateful. I had a productive morning meeting where my team praised my contributions, which made me feel proud and accomplished. Later, I had lunch with an old friend who shared some exciting news about their new job opportunity. I felt genuinely happy for them and excited about our future conversations. The afternoon was filled with creative work that challenged me in the best way possible. I love days like this where everything seems to align perfectly."></textarea>
-                        <button class="btn btn-success btn-lg mt-3" onclick="generateSummary()">
-                            <i class="fas fa-magic me-2"></i>
-                            Generate Summary
-                        </button>
-                    </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Summary Result:</h5>
-                        <div id="summary-result" class="result-card">
-                            <p class="text-muted">Enter text to see summary here...</p>
+                            <!-- Recording Timer -->
+                            <div class="recording-time text-center mt-2">
+                                <span class="badge bg-secondary recording-timer" id="recordingTime">0:00</span>
+                            </div>
+                            <!-- Audio Visualizer -->
+                            <div id="audioVisualizer" class="audio-visualizer mt-3">
+                                <div class="text-center">
+                                    <div class="recording-indicator">
+                                        <span class="material-icons text-danger">fiber_manual_record</span>
+                                        <span class="ms-2">Recording...</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="recording-help" class="form-text text-muted">Click "Start Recording" to begin voice transcription. Use Tab key to navigate between buttons.</div>
                         </div>
-                    </div>
-                </div>
-
-                <div class="loading-spinner" id="summary-loading">
-                    <div class="spinner-border text-success" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Generating summary...</p>
-                </div>
-            </div>
 
-            <!-- Real-time Monitoring Demo -->
-            <div id="monitoring-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-chart-line text-primary me-2"></i>
-                    Real-time Monitoring
-                </h3>
-                <p class="text-muted mb-4">
-                    Live system metrics and performance monitoring dashboard.
-                </p>
+                        <!-- Text Input -->
+                        <div class="mb-4">
+                            <label for="textInput" class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2" aria-hidden="true">keyboard</span>
+                                Or Enter Text Directly
+                            </label>
+                            <textarea
+                                class="form-control form-control-lg"
+                                id="textInput"
+                                rows="4"
+                                placeholder="Enter your text here for summarization and emotion analysis..."
+                                aria-label="Text input for AI processing"
+                                aria-describedby="textInput-help"
+                            >I am so excited and happy today! This is such wonderful news and I feel optimistic about the future. I can't wait to see what amazing opportunities await us. However, I'm also a bit nervous about the challenges ahead, but I'm confident we can overcome them together.</textarea>
+                            <div id="textInput-help" class="form-text">Enter text directly for summarization and emotion analysis. You can type or paste your content here.</div>
+                        </div>
 
-                <div class="metrics-grid">
-                    <div class="metric-card">
-                        <div class="metric-value" id="uptime-metric">99.9%</div>
-                        <div class="metric-label">Uptime</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="response-time-metric">43ms</div>
-                        <div class="metric-label">Avg Response Time</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="requests-metric">1,247</div>
-                        <div class="metric-label">Requests Today</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="accuracy-metric">90.7%</div>
-                        <div class="metric-label">Model Accuracy</div>
+                        <div class="d-flex gap-3 justify-content-center flex-wrap" role="group" aria-label="Action buttons">
+                            <button class="btn btn-primary btn-lg px-4"
+                                    id="processBtn"
+                                    aria-label="Process text with AI models for summarization and emotion analysis"
+                                    aria-describedby="action-buttons-help"
+                                    tabindex="0">
+                                <span class="material-icons me-2" aria-hidden="true">auto_fix_high</span>
+                                Process
+                            </button>
+                            <button class="btn btn-success btn-lg px-4"
+                                    id="generateBtn"
+                                    aria-label="Generate sample text using AI"
+                                    aria-describedby="action-buttons-help"
+                                    tabindex="0">
+                                <span class="material-icons me-2" aria-hidden="true">auto_awesome</span>
+                                Generate
+                            </button>
+                            <button class="btn btn-outline-secondary btn-lg px-4"
+                                    id="clearBtn"
+                                    aria-label="Clear all inputs and results"
+                                    aria-describedby="action-buttons-help"
+                                    tabindex="0">
+                                <span class="material-icons me-2" aria-hidden="true">delete</span>
+                                Clear All
+                            </button>
+                            <button class="btn btn-outline-warning btn-lg px-4"
+                                    id="apiKeyBtn"
+                                    aria-label="Manage OpenAI API Key"
+                                    aria-describedby="action-buttons-help"
+                                    tabindex="0">
+                                <span class="material-icons me-2" aria-hidden="true">key</span>
+                                API Key
+                            </button>
+                        </div>
+                        <div id="action-buttons-help" class="form-text text-center mt-2">Use these buttons to process your input, generate sample text, clear all data, or manage API settings.</div>
                     </div>
                 </div>
 
-                <div class="row mt-4">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Performance Chart:</h5>
-                        <canvas id="performanceChart" width="400" height="200"></canvas>
-                    </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Recent Activity:</h5>
-                        <div id="activity-log" class="result-card" style="max-height: 300px; overflow-y: auto;">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Emotion analysis request</span>
-                                <span class="performance-indicator performance-fast">43ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Batch processing (5 texts)</span>
-                                <span class="performance-indicator performance-fast">156ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Voice transcription</span>
-                                <span class="performance-indicator performance-medium">892ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Text summarization</span>
-                                <span class="performance-indicator performance-medium">1.2s</span>
+                <!-- Results Layout (Initially Hidden) -->
+                <div class="d-none" id="resultsLayout">
+                    <!-- Enhanced Loading Section -->
+                    <div id="loadingSection" class="loading-spinner text-center mb-4" role="status" aria-live="polite" aria-busy="true">
+                        <div class="row justify-content-center">
+                            <div class="col-md-8">
+                                <div class="feature-card p-4">
+                                    <div class="spinner-border text-primary mb-3 spinner-large" role="status">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
+                                    <h5 class="text-primary mb-3">🚀 AI Processing Pipeline</h5>
+
+                                    <!-- Progress Steps -->
+                                    <div class="row g-3 mb-4">
+                                        <div class="col-md-6">
+                                            <div id="emotionStep" class="process-step">
+                                                <span class="material-icons text-warning me-2">psychology</span>
+                                                <span class="step-text">Emotion Analysis</span>
+                                                <div class="step-status" id="emotionStatus">⏳ Waiting...</div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div id="summaryStep" class="process-step">
+                                                <span class="material-icons text-success me-2">description</span>
+                                                <span class="step-text">Text Summarization</span>
+                                                <div class="step-status" id="summaryStatus">⏳ Waiting...</div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <p class="text-muted mb-2" id="loadingMessage">Initializing AI models...</p>
+                                    <small class="text-muted" id="timeEstimate">Estimated time: 2-4 seconds</small>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <button class="btn btn-primary mt-3" onclick="refreshMetrics()">
-                    <i class="fas fa-sync-alt me-2"></i>
-                    Refresh Metrics
-                </button>
-            </div>
-
-            <!-- Security Features Demo -->
-            <div id="security-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-shield-alt text-success me-2"></i>
-                    Security Features
-                </h3>
-                <p class="text-muted mb-4">
-                    Enterprise-grade security with rate limiting, input sanitization, and threat detection.
-                </p>
 
-                <div class="row">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Security Status:</h5>
-                        <div class="result-card">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Rate Limiting</span>
-                                <span class="security-badge">Active</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Input Sanitization</span>
-                                <span class="security-badge">Active</span>
+                    <!-- Side-by-Side Results Section -->
+                    <div class="row" id="resultSection">
+                        <!-- Left Column: Emotion Analysis -->
+                        <div class="col-lg-6">
+                            <!-- Emotion Analysis Results -->
+                            <div class="mb-4 result-section-hidden" id="emotionResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-warning me-2">favorite</span>
+                                        Emotion Analysis (SAMO DeBERTa v3 Large)
+                                    </h5>
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <div class="emotion-chart-container">
+                                                <h6 class="fw-bold mb-3 text-info">
+                                                    <span class="material-icons me-2">bar_chart</span>
+                                                    Top 5 Emotions
+                                                </h6>
+                                                <div id="emotionBadges" class="mb-3">
+                                                    <span id="emotionBadgesFallback" class="text-muted">
+                                                        No emotions detected.
+                                                    </span>
+                                                </div>
+                                                <div id="emotionChart"></div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <!-- Detailed Model Output -->
+                                            <div class="mt-0">
+                                                <h6 class="fw-bold mb-3 text-info">
+                                                    <span class="material-icons me-2">psychology</span>
+                                                    Detailed Model Analysis
+                                                </h6>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Primary Emotion</div>
+                                                    <div class="model-detail-value" id="primaryEmotion">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">
+                                                        Emotional Intensity
+                                                        <span class="material-icons info-icon"
+                                                              data-bs-toggle="tooltip"
+                                                              data-bs-placement="top"
+                                                              title="Strength of the detected emotion (0-100%). Higher values indicate stronger emotional expression.">
+                                                            info
+                                                        </span>
+                                                    </div>
+                                                    <div class="model-detail-value" id="emotionalIntensity">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">
+                                                        Sentiment Score
+                                                        <span class="material-icons info-icon"
+                                                              data-bs-toggle="tooltip"
+                                                              data-bs-placement="top"
+                                                              title="Overall sentiment polarity from the emotion analysis (0-100). Scores above 50 typically indicate positive sentiment.">
+                                                            info
+                                                        </span>
+                                                    </div>
+                                                    <div class="model-detail-value" id="sentimentScore">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">
+                                                        Confidence Range
+                                                        <span class="material-icons info-icon"
+                                                              data-bs-toggle="tooltip"
+                                                              data-bs-placement="top"
+                                                              title="Model's certainty range for the prediction. Narrower ranges indicate higher confidence in the results.">
+                                                            info
+                                                        </span>
+                                                    </div>
+                                                    <div class="model-detail-value" id="confidenceRange">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Model Processing Details</div>
+                                                    <div class="model-detail-text" id="modelDetails">-</div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Additional Emotion Details -->
+                                            <div class="mt-3">
+                                                <div id="emotionDetails"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>XSS Protection</span>
-                                <span class="security-badge">Active</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>SQL Injection Protection</span>
-                                <span class="security-badge">Active</span>
+                        </div>
+
+                        <!-- Right Column: Summarization -->
+                        <div class="col-lg-6">
+                            <!-- Summarization Results -->
+                            <div class="mb-4 result-section-hidden" id="summarizationResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-success me-2">description</span>
+                                        Summarization Results
+                                    </h5>
+                                    <div id="summaryText" class="mb-3"></div>
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <small class="text-muted">Original Length: <span id="originalLength">-</span> characters</small>
+                                        <small class="text-muted">Summary Length: <span id="summaryLength">-</span> characters</small>
+                                    </div>
+                                    <div id="summaryChart"></div>
+                                </div>
                             </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Threat Detection</span>
-                                <span class="security-badge">Active</span>
+
+                            <!-- Transcription Results (Optional - may be hidden) -->
+                            <div class="mb-4 result-section-hidden" id="transcriptionResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-primary me-2">mic</span>
+                                        Transcription Results
+                                    </h5>
+                                    <div id="transcriptionText" class="mb-3"></div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <small class="text-muted">Confidence: <span id="transcriptionConfidence">-</span></small>
+                                        <small class="text-muted">Duration: <span id="transcriptionDuration">-</span></small>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Rate Limit Test:</h5>
-                        <div class="result-card">
-                            <p>Test rate limiting by making rapid requests:</p>
-                            <button class="btn btn-danger" onclick="testRateLimit()">
-                                <i class="fas fa-bolt me-2"></i>
-                                Test Rate Limit
-                            </button>
-                            <div id="rate-limit-result" class="mt-3"></div>
-                        </div>
-                    </div>
-                </div>
 
-                <div class="row mt-4">
-                    <div class="col-12">
-                        <h5 class="fw-bold">Security Headers:</h5>
-                        <div class="code-block">
-                            <pre><code class="language-json">{
-  "Content-Security-Policy": "default-src 'self'",
-  "X-Frame-Options": "DENY",
-  "X-Content-Type-Options": "nosniff",
-  "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
-  "X-XSS-Protection": "1; mode=block",
-  "Referrer-Policy": "strict-origin-when-cross-origin"
-}</code></pre>
+                    <!-- Bottom: Processing Information & Controls (Horizontal Layout) -->
+                    <div class="row mt-4">
+                        <div class="col-12">
+                            <div class="feature-card">
+                                <div class="card-body">
+                                    <h6 class="fw-bold mb-3 text-center">Processing Information</h6>
+                                    <div class="row g-3">
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-primary me-2 material-icons-1-2rem">schedule</span>
+                                                    <small class="fw-bold">Total Time</small>
+                                                </div>
+                                                <small class="text-muted" id="totalTimeCompact">-</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-success me-2 material-icons-1-2rem">check_circle</span>
+                                                    <small class="fw-bold">Status</small>
+                                                </div>
+                                                <small class="text-muted" id="processingStatusCompact">Ready</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-warning me-2 material-icons-1-2rem">psychology</span>
+                                                    <small class="fw-bold">Models Used</small>
+                                                </div>
+                                                <small class="text-muted" id="modelsUsedCompact">-</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-info me-2 material-icons-1-2rem">trending_up</span>
+                                                    <small class="fw-bold">Confidence</small>
+                                                </div>
+                                                <small class="text-muted" id="avgConfidenceCompact">-</small>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Control Buttons Row -->
+                                    <div class="row mt-3">
+                                        <div class="col-md-6 text-center">
+                                            <!-- Reset Button -->
+                                            <button class="btn btn-outline-primary btn-sm me-2" id="resetBtn">
+                                                <span class="material-icons me-1 material-icons-1rem">refresh</span>
+                                                New Analysis
+                                            </button>
+                                            <!-- Debug Toggle Button -->
+                                            <button class="btn btn-outline-secondary btn-sm" id="debugToggleBtn">
+                                                <span class="material-icons me-1 material-icons-1rem">bug_report</span>
+                                                Show Debug
+                                            </button>
+                                        </div>
+                                        <div class="col-md-6 text-center">
+                                            <!-- Debug Test (Hidden by Default, Toggleable) -->
+                                            <div class="d-none" id="debugTestSection">
+                                                <div class="d-flex justify-content-center gap-2">
+                                                    <button class="btn btn-success btn-sm" id="testRealApiBtn">Test with Real API</button>
+                                                    <button class="btn btn-secondary btn-sm" id="clearAllBtn">Clear All</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Progress Console (Added for user-friendly feedback) -->
+                                    <div class="row mt-3 progress-console-row" id="progressConsoleRow">
+                                        <div class="col-12">
+                                            <div class="bg-dark bg-opacity-75 rounded p-3">
+                                                <h6 class="fw-bold mb-3 text-light">
+                                                    <span class="material-icons text-info me-2 material-icons-1-2rem">terminal</span>
+                                                    Processing Console
+                                                </h6>
+                                                <div id="progressConsole" class="bg-black rounded p-2 progress-console">
+                                                    <div class="text-success">SAMO-DL Processing Console Ready...</div>
+                                                </div>
+                                                <div class="mt-2 text-end">
+                                                    <button class="btn btn-outline-light btn-sm" id="clearConsoleBtn">
+                                                        <span class="material-icons me-1 material-icons-0-9rem">clear</span>
+                                                        Clear Console
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </section>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
             <div class="row">
-                <div class="col-lg-8 mx-auto text-center">
-                    <h5 class="fw-bold mb-3">SAMO Deep Learning</h5>
-                    <p class="text-muted mb-4">
-                        Enterprise-grade AI system with >90% F1 score and 2.3x performance optimization.
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">
+                        <span class="material-icons text-primary me-2">psychology</span>
+                        SAMO-DL
+                    </h5>
+                    <p class="text-muted">
+                        Complete AI platform with voice transcription, text summarization, and emotion detection.
+                    </p>
+                </div>
+                <div class="col-lg-2 col-md-6 mb-4">
+                    <h6 class="fw-bold mb-3">Product</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="index.html" class="text-muted text-decoration-none">Home</a></li>
+                        <li><a href="comprehensive-demo.html" class="text-muted text-decoration-none">All Features</a></li>
+                        <li><a href="integration.html" class="text-muted text-decoration-none">Integration</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-2 col-md-6 mb-4">
+                    <h6 class="fw-bold mb-3">Resources</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/api/API_DOCUMENTATION.md" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">API Docs</a></li>
+                        <li><a href="https://huggingface.co/duelker/samo-goemotions-deberta-v3-large" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">DeBERTa Model</a></li>
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/README.md" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">Support</a></li>
+                    </ul>
+                </div>
+            </div>
+            <hr class="my-4">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">
+                        © 2025 SAMO-DL
+                    </p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <p class="text-muted mb-0">
+                        Built with ❤ during TechLabs Berlin Summer '25
                     </p>
-                    <div class="d-flex justify-content-center gap-3">
-                        <a href="index.html" class="text-muted text-decoration-none">Home</a>
-                        <a href="comprehensive-demo.html" class="text-muted text-decoration-none">Demo</a>
-                    </div>
                 </div>
             </div>
         </div>
     </footer>
 
     <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-
-    <script>
-        // API Configuration (Unified API)
-        const API_BASE_URL = 'https://samo-unified-api-frrnetyhfa-uc.a.run.app';
-        let AUTH_TOKEN = null;
-        let CHAT_WS = null;
-
-        // Chart Management - Better pattern than global window storage
-        const ChartManager = {
-            charts: new Map(),
-
-            destroy(chartId) {
-                const chart = this.charts.get(chartId);
-                if (chart && typeof chart.destroy === 'function') {
-                    try {
-                        chart.destroy();
-                        console.log(`Chart '${chartId}' destroyed successfully`);
-                    } catch (e) {
-                        console.warn(
-                            `Error destroying chart '${chartId}'. Chart instance:`, chart,
-                            'Operation: destroy',
-                            'Error:', e
-                        );
-                    }
-                }
-                this.charts.delete(chartId);
-            },
-
-            set(chartId, chartInstance) {
-                // Destroy existing chart if it exists
-                this.destroy(chartId);
-                // Store new chart
-                this.charts.set(chartId, chartInstance);
-                console.log(`Chart '${chartId}' registered in ChartManager`);
-            },
-
-            get(chartId) {
-                return this.charts.get(chartId);
-            },
-
-            has(chartId) {
-                return this.charts.has(chartId);
-            },
-
-            clear() {
-                for (const [chartId] of this.charts) {
-                    this.destroy(chartId);
-                }
-                console.log('All charts cleared from ChartManager');
-            }
-        };
-
-        // Demo state
-        let isRecording = false;
-        let mediaRecorder = null;
-        let audioChunks = [];
-
-        // Feature switching
-        function showFeature(feature, event) {
-            // Hide all demos
-            document.querySelectorAll('.feature-demo').forEach(demo => {
-                demo.style.display = 'none';
-            });
-
-            // Remove active class from all tabs
-            document.querySelectorAll('.demo-tab').forEach(tab => {
-                tab.classList.remove('active');
-            });
-
-            // Show selected demo
-            document.getElementById(feature + '-demo').style.display = 'block';
-
-            // Add active class to clicked tab
-            event.target.classList.add('active');
-        }
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+
+    <!-- Configuration Script -->
+    <script src="js/config.js"></script>
+
+    <!-- Chart.js for emotion visualization - MUST load before simple-demo-functions.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"
+            integrity="sha384-e6nUZUa1rfIeW3/coqGctw1iI3S3sLpD0pJs3eaD6W2S4fBf5rYwI22/SSs9aF2j"
+            crossorigin="anonymous"
+            onload="console.log('✅ Chart.js loaded successfully'); window.chartJsLoaded = true;"
+            onerror="console.error('❌ Failed to load Chart.js'); window.chartJsLoaded = false; showChartJsFallback();"></script>
+
+    <!-- Chart.js fallback message (initially hidden) -->
+    <div id="chartJsFallback" class="alert alert-warning d-none" role="alert">
+        <span class="material-icons me-2">warning</span>
+        <strong>Chart visualization unavailable:</strong> Chart.js failed to load. Emotion data will be displayed as text only.
+    </div>
 
-        // Emotion Detection (Unified API -> /analyze/journal)
-        function _emotionsDictToArray(emotions) {
-            return Object.entries(emotions || {}).map(([emotion, confidence]) => ({ emotion, confidence }));
-        }
+    <!-- Dynamic Layout State Management -->
+    <!-- Layout Manager Script -->
+    <script src="js/layout-manager.js"></script>
 
-        async function analyzeEmotion() {
-            const text = document.getElementById('emotion-text').value.trim();
-            if (!text) {
-                alert('Please enter some text to analyze');
-                return;
-            }
+    <!-- Main comprehensive demo script - MUST load before demo-initialization -->
+    <script src="js/comprehensive-demo.js"></script>
 
-            showLoading('emotion');
+    <!-- Demo Initialization Script - loads AFTER functions are defined -->
+    <script src="js/demo-initialization.js"></script>
 
-            try {
-                const response = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text, generate_summary: false })
-                });
+    <!-- Voice Recording Module -->
+    <script src="js/voice-recorder.js"></script>
 
-                const unified = await response.json();
-                const adapted = _emotionsDictToArray(
-                    unified?.emotion_analysis?.emotions || {}
-                );
-                displayEmotionResults(adapted);
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('emotion-results').innerHTML =
-                    '<div class="alert alert-danger">Error analyzing emotions. Please try again.</div>';
-            } finally {
-                hideLoading('emotion');
+    <!-- Fallback and utility functions -->
+    <script>
+        // Chart.js fallback function
+        function showChartJsFallback() {
+            const fallback = document.getElementById('chartJsFallback');
+            if (fallback) {
+                fallback.classList.remove('d-none');
             }
         }
 
-        function displayEmotionResults(result, container = null) {
-            const targetContainer = container || document.getElementById('emotion-results');
-            targetContainer.innerHTML = ''; // Clear previous results
-
-            if (Array.isArray(result) && result.length > 0) {
-                const title = document.createElement('h5');
-                title.className = 'fw-bold mb-3';
-                title.textContent = 'Detected Emotions:';
-                targetContainer.appendChild(title);
-
-                result.forEach(emotion => {
-                    const confidence = (emotion.confidence * 100).toFixed(1);
-                    const color = getEmotionColor(emotion.emotion);
-
-                    const resultCard = document.createElement('div');
-                    resultCard.className = 'result-card';
-
-                    const headerDiv = document.createElement('div');
-                    headerDiv.className = 'd-flex justify-content-between align-items-center mb-2';
-
-                    const emotionSpan = document.createElement('span');
-                    emotionSpan.className = 'fw-bold text-capitalize';
-                    emotionSpan.textContent = emotion.emotion; // textContent automatically escapes HTML
-                    headerDiv.appendChild(emotionSpan);
-
-                    const badgeSpan = document.createElement('span');
-                    badgeSpan.className = `badge bg-${color}`;
-                    badgeSpan.textContent = `${confidence}%`;
-                    headerDiv.appendChild(badgeSpan);
-
-                    resultCard.appendChild(headerDiv);
+        // Emotion badges fallback management
+        function renderEmotionBadges(emotions) {
+            const emotionBadgesContainer = document.getElementById('emotionBadges');
+            const fallback = document.getElementById('emotionBadgesFallback');
 
-                    const progressDiv = document.createElement('div');
-                    progressDiv.className = 'progress';
-                    progressDiv.style.height = '8px';
+            if (!emotionBadgesContainer || !fallback) return;
 
-                    const progressBar = document.createElement('div');
-                    progressBar.className = `progress-bar bg-${color}`;
-                    progressBar.style.width = `${confidence}%`;
-                    progressDiv.appendChild(progressBar);
+            // Clear previous badges
+            emotionBadgesContainer.innerHTML = '';
 
-                    resultCard.appendChild(progressDiv);
-                    targetContainer.appendChild(resultCard);
-                });
+            if (!emotions || emotions.length === 0) {
+                // Show fallback message
+                fallback.style.display = 'inline';
+                emotionBadgesContainer.appendChild(fallback);
             } else {
-                const alertDiv = document.createElement('div');
-                alertDiv.className = 'alert alert-warning';
-                alertDiv.textContent = 'No emotions detected.';
-                targetContainer.appendChild(alertDiv);
-            }
-        }
-
-        function getEmotionColor(emotion) {
-            const colors = {
-                'joy': 'success',
-                'happiness': 'success',
-                'excitement': 'warning',
-                'sadness': 'info',
-                'anger': 'danger',
-                'fear': 'warning',
-                'surprise': 'primary',
-                'disgust': 'secondary'
-            };
-            return colors[emotion] || 'primary';
-        }
-
-        // Minimal Chat Demo (Auth + HTTP + WS)
-        document.addEventListener('DOMContentLoaded', () => {
-            const saved = localStorage.getItem('samo_auth_token');
-            if (saved) {
-                AUTH_TOKEN = saved;
-                setAuthStatus(true);
-            }
-        });
+                // Hide fallback and show emotion badges
+                fallback.style.display = 'none';
 
-        function setAuthStatus(ok) {
-            const badge = document.getElementById('chat-auth-status');
-            if (!badge) return;
-            badge.textContent = ok ? 'AUTH OK' : 'AUTH REQ';
-            badge.className = `badge ${ok ? 'bg-success' : 'bg-warning text-dark'}`;
-        }
-
-        async function chatLogin() {
-            const u = document.getElementById('chat-username').value.trim();
-            const p = document.getElementById('chat-password').value;
-            const out = document.getElementById('chat-output');
-            out.textContent = 'Logging in...';
-            try {
-                const resp = await fetch(`${API_BASE_URL}/auth/login`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ username: u, password: p })
+                emotions.forEach(emotion => {
+                    const badge = document.createElement('span');
+                    badge.className = 'badge bg-primary me-2 mb-2';
+                    badge.textContent = `${emotion.name}: ${emotion.confidence}%`;
+                    emotionBadgesContainer.appendChild(badge);
                 });
-                const data = await resp.json();
-                if (!resp.ok || !data.access_token) throw new Error(data.detail || 'Login failed');
-                AUTH_TOKEN = data.access_token;
-                localStorage.setItem('samo_auth_token', AUTH_TOKEN);
-                setAuthStatus(true);
-                out.textContent = 'Login successful.';
-            } catch (e) {
-                out.textContent = 'Login error: ' + e.message;
-                setAuthStatus(false);
             }
         }
 
-        function appendChatMessage(sender, text, summary = null) {
-            const list = document.getElementById('chat-messages');
-            const item = document.createElement('div');
-            item.className = 'p-2 mb-2 rounded ' + (sender === 'you' ? 'bg-primary bg-opacity-10' : 'bg-dark bg-opacity-10');
-            const who = document.createElement('div');
-            who.className = 'small text-muted mb-1';
-            who.textContent = sender;
-            const body = document.createElement('div');
-            body.textContent = text || '';
-            item.appendChild(who);
-            item.appendChild(body);
-            if (summary) {
-                const sum = document.createElement('div');
-                sum.className = 'mt-1 text-secondary';
-                sum.textContent = 'summary: ' + summary;
-                item.appendChild(sum);
-            }
-            list.appendChild(item);
-            list.scrollTop = list.scrollHeight;
-        }
-
-        async function sendChatHttp() {
-            const input = document.getElementById('chat-input');
-            const out = document.getElementById('chat-output');
-            const text = input.value.trim();
-            if (!text) return;
-            if (!AUTH_TOKEN) { out.textContent = 'Please login first.'; return; }
-            appendChatMessage('you', text);
-            out.textContent = '...';
-            try {
-                const resp = await fetch(`${API_BASE_URL}/chat`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${AUTH_TOKEN}` },
-                    body: JSON.stringify({ text, summarize: true, model: 't5-small' })
+        // Keyboard accessibility for buttons
+        function addKeyboardSupport() {
+            const buttons = document.querySelectorAll('button[tabindex="0"]');
+            buttons.forEach(button => {
+                button.addEventListener('keydown', function(e) {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.click();
+                    }
                 });
-                const data = await resp.json();
-                out.textContent = '';
-                appendChatMessage('bot', data.reply || JSON.stringify(data), data.summary || null);
-            } catch (e) {
-                out.textContent = 'Error sending message';
-            }
-        }
-
-        function buildWsUrl(path) {
-            if (!API_BASE_URL.startsWith('https://')) return null;
-            return API_BASE_URL.replace('https://', 'wss://') + path;
-        }
-
-        async function connectChatWs() {
-            const out = document.getElementById('chat-output');
-            if (!AUTH_TOKEN) { out.textContent = 'Please login first.'; return; }
-            const url = buildWsUrl(`/ws/chat?token=${encodeURIComponent(AUTH_TOKEN)}`);
-            if (!url) { out.textContent = 'WS requires https base URL.'; return; }
-            out.textContent = 'Connecting WS...';
-            try {
-                CHAT_WS = new WebSocket(url);
-                CHAT_WS.onopen = () => { out.textContent = 'WS connected.'; };
-                CHAT_WS.onmessage = (evt) => {
-                    try {
-                        const data = JSON.parse(evt.data);
-                        appendChatMessage('bot', data.reply || JSON.stringify(data), data.summary || null);
-                    } catch (e) { console.error("Error processing WebSocket message:", e); }
-                };
-                CHAT_WS.onerror = () => { out.textContent = 'WS error'; };
-                CHAT_WS.onclose = () => { out.textContent = 'WS disconnected.'; };
-            } catch (e) {
-                out.textContent = 'WS connect failed';
-            }
-        }
-
-        function disconnectChatWs() {
-            if (CHAT_WS) {
-                try { CHAT_WS.close(); } catch {}
-                CHAT_WS = null;
-            }
-        }
-
-        function sendChatWs() {
-            const input = document.getElementById('chat-input');
-            const out = document.getElementById('chat-output');
-            const text = input.value.trim();
-            if (!text) return;
-            if (!CHAT_WS || CHAT_WS.readyState !== 1) { out.textContent = 'WS not connected'; return; }
-            appendChatMessage('you', text);
-            CHAT_WS.send(JSON.stringify({ text, summarize: true, model: 't5-small' }));
-        }
-
-        // Voice Recording
-        async function toggleRecording() {
-            if (!isRecording) {
-                startRecording();
-            } else {
-                stopRecording();
-            }
-        }
-
-        async function startRecording() {
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                mediaRecorder = new MediaRecorder(stream);
-                audioChunks = [];
-
-                mediaRecorder.ondataavailable = (event) => {
-                    audioChunks.push(event.data);
-                };
-
-                mediaRecorder.onstop = async () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                    await processAudio(audioBlob);
-                };
-
-                mediaRecorder.start();
-                isRecording = true;
-
-                document.getElementById('record-btn').classList.add('recording');
-                document.getElementById('record-icon').className = 'fas fa-stop';
-                document.getElementById('recording-status').textContent = 'Recording... Click to stop';
-            } catch (error) {
-                console.error('Error accessing microphone:', error);
-                alert('Error accessing microphone. Please check permissions.');
-            }
-        }
-
-        function stopRecording() {
-            if (mediaRecorder && isRecording) {
-                mediaRecorder.stop();
-                mediaRecorder.stream.getTracks().forEach(track => track.stop());
-
-                isRecording = false;
-                document.getElementById('record-btn').classList.remove('recording');
-                document.getElementById('record-icon').className = 'fas fa-microphone';
-                document.getElementById('recording-status').textContent = 'Processing audio...';
-            }
+            });
         }
 
-        async function processAudio(audioBlob) {
-            showLoading('voice');
-
-            try {
-                const formData = new FormData();
-                formData.append('audio_file', audioBlob, 'recording.wav');
-
-                // Use AbortController for proper timeout handling
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-                let response;
-                try {
-                    response = await fetch(`${API_BASE_URL}/transcribe/voice`, {
-                        method: 'POST',
-                        body: formData,
-                        signal: controller.signal
-                    });
-                } catch (error) {
-                    if (error.name === 'AbortError') {
-                        throw new Error('Voice transcription request timed out after 30 seconds');
-                    }
-                    throw error;
-                } finally {
-                    clearTimeout(timeoutId);
-                }
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    let errorMessage = 'Failed to transcribe audio';
-                    try {
-                        const errorData = JSON.parse(errorText);
-                        errorMessage = errorData.detail || errorData.message || errorMessage;
-                    } catch (e) {
-                        // If response isn't JSON, use default message
-                    }
-                    throw new Error(errorMessage);
-                }
-
-                const data = await response.json();
-                const transcription = data.transcription || data.text || 'No transcription available.';
-
-                document.getElementById('transcription-result').innerHTML = '';
-                const transcriptionTitle = document.createElement('p');
-                transcriptionTitle.className = 'fw-bold';
-                transcriptionTitle.textContent = 'Transcription:';
-
-                const transcriptionText = document.createElement('p');
-                transcriptionText.textContent = transcription;
-
-                document.getElementById('transcription-result').appendChild(transcriptionTitle);
-                document.getElementById('transcription-result').appendChild(transcriptionText);
-
-                // If transcription is successful, analyze emotions from the transcribed text
-                if (transcription && transcription !== 'No transcription available.') {
-                    try {
-                        const emotionController = new AbortController();
-                        const emotionTimeout = setTimeout(() => emotionController.abort(), 15000); // 15 seconds
-
-                        let emotionResponse;
-                        try {
-                            emotionResponse = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ text: transcription, generate_summary: false }),
-                                signal: emotionController.signal
-                            });
-                        } catch (error) {
-                            if (error.name === 'AbortError') {
-                                console.error('Emotion analysis request timed out.');
-                                // Show a message to the user about the timeout
-                                const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                                voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis timed out</p>';
-                                return;
-                            } else {
-                                throw error;
-                            }
-                        } finally {
-                            clearTimeout(emotionTimeout);
-                        }
-
-                        if (emotionResponse.ok) {
-                            const emotionData = await emotionResponse.json();
-                            const emotions = _emotionsDictToArray(
-                                emotionData?.emotion_analysis?.emotions || {}
-                            );
+        // Initialize keyboard support and event listeners when DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            addKeyboardSupport();
+            addEventListeners();
+        });
 
-                            const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                            voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6>';
-                            displayEmotionResults(emotions, voiceEmotionContainer);
-                        } else {
-                            // Fallback with simulated emotions if emotion analysis fails
-                            const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                            voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis unavailable</p>';
-                        }
-                    } catch (emotionError) {
-                        console.warn('Emotion analysis failed for transcribed text:', emotionError);
-                        const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                        voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis unavailable</p>';
+        // Add event listeners for buttons
+        function addEventListeners() {
+            // Reset button
+            const resetBtn = document.getElementById('resetBtn');
+            if (resetBtn) {
+                resetBtn.addEventListener('click', function() {
+                    if (typeof clearAllWithStateManagement === 'function') {
+                        clearAllWithStateManagement();
                     }
-                }
-
-            } catch (error) {
-                console.error('Error processing audio:', error);
-                const resultContainer = document.getElementById('transcription-result');
-                resultContainer.innerHTML = '';
-
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-danger';
-                errorDiv.textContent = `Error: ${error.message}`;
-                resultContainer.appendChild(errorDiv);
-
-                // Clear emotion results on error
-                const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Processing failed</p>';
-            } finally {
-                hideLoading('voice');
-                document.getElementById('recording-status').textContent = 'Click to start recording';
-            }
-        }
-
-        // Batch Processing
-        async function processBatch() {
-            const texts = document.getElementById('batch-texts').value
-                .split('\n')
-                .map(text => text.trim())
-                .filter(text => text.length > 0);
-
-            if (texts.length === 0) {
-                alert('Please enter some texts to process');
-                return;
-            }
-
-            showLoading('batch');
-
-            try {
-                const response = await fetch(`${API_BASE_URL}/predict_batch`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
                 });
-
-                const results = await response.json();
-                displayBatchResults(texts, results);
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('batch-results').innerHTML =
-                    '<div class="alert alert-danger">Error processing batch. Please try again.</div>';
-            } finally {
-                hideLoading('batch');
             }
-        }
-
-        function displayBatchResults(texts, results) {
-            const container = document.getElementById('batch-results');
-            container.innerHTML = ''; // Clear previous results
-
-            const title = document.createElement('h5');
-            title.className = 'fw-bold mb-3';
-            title.textContent = 'Batch Processing Results:';
-            container.appendChild(title);
-
-            texts.forEach((text, index) => {
-                const result = results[index] || [];
-
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'batch-item';
 
-                const textTitle = document.createElement('p');
-                textTitle.className = 'fw-bold mb-2';
-                textTitle.textContent = `Text ${index + 1}:`;
-                itemDiv.appendChild(textTitle);
-
-                const textContent = document.createElement('p');
-                textContent.className = 'text-muted mb-2';
-                textContent.textContent = `"${text}"`; // textContent automatically escapes HTML
-                itemDiv.appendChild(textContent);
-
-                const badgesDiv = document.createElement('div');
-                badgesDiv.className = 'd-flex flex-wrap gap-2';
-
-                // Create badges safely
-                result.forEach(emotion => {
-                    const badge = document.createElement('span');
-                    badge.className = `badge bg-${getEmotionColor(emotion.emotion)}`;
-                    badge.textContent = `${emotion.emotion} (${(emotion.confidence * 100).toFixed(1)}%)`;
-                    badgesDiv.appendChild(badge);
+            // Debug toggle button
+            const debugToggleBtn = document.getElementById('debugToggleBtn');
+            if (debugToggleBtn) {
+                debugToggleBtn.addEventListener('click', function() {
+                    if (typeof LayoutManager !== 'undefined' && LayoutManager.toggleDebugSection) {
+                        LayoutManager.toggleDebugSection();
+                    }
                 });
-
-                itemDiv.appendChild(badgesDiv);
-                container.appendChild(itemDiv);
-            });
-        }
-
-        // Text Summarization
-        async function generateSummary() {
-            const text = document.getElementById('summary-text').value.trim();
-            if (!text) {
-                alert('Please enter some text to summarize');
-                return;
             }
 
-            showLoading('summary');
-
-            try {
-                // Call the actual summarization API with proper timeout
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-                let response;
-                try {
-                    response = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            text: text,
-                            generate_summary: true,
-                            summary_model: 't5-small'
-                        }),
-                        signal: controller.signal
-                    });
-                    clearTimeout(timeoutId);
-                } catch (error) {
-                    clearTimeout(timeoutId);
-                    if (error.name === 'AbortError') {
-                        throw new Error('Summary request timed out. Please try with shorter text or try again later.');
-                    }
-                    throw error;
-                }
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    let errorMessage = 'Failed to generate summary';
-                    try {
-                        const errorData = JSON.parse(errorText);
-                        errorMessage = errorData.detail || errorData.message || errorMessage;
-                    } catch (e) {
-                        // If response isn't JSON, use default message
+            // Test real API button
+            const testRealApiBtn = document.getElementById('testRealApiBtn');
+            if (testRealApiBtn) {
+                testRealApiBtn.addEventListener('click', function() {
+                    if (typeof testWithRealAPI === 'function') {
+                        testWithRealAPI();
                     }
-                    throw new Error(errorMessage);
-                }
-
-                const data = await response.json();
-                const summary = data.summary || data.text_summary || 'No summary available.';
-
-                const summaryContainer = document.getElementById('summary-result');
-                summaryContainer.innerHTML = ''; // Clear previous results
-
-                const summaryTitle = document.createElement('p');
-                summaryTitle.className = 'fw-bold';
-                summaryTitle.textContent = 'Summary:';
-                summaryContainer.appendChild(summaryTitle);
-
-                const summaryText = document.createElement('p');
-                summaryText.textContent = summary; // textContent automatically escapes HTML
-                summaryContainer.appendChild(summaryText);
-
-                // Add emotional context if available
-                if (data.emotion_analysis && data.emotion_analysis.emotions) {
-                    const emotionDiv = document.createElement('div');
-                    emotionDiv.className = 'mt-3 p-3 rounded emotional-context-card';
-
-                    const emotionTitle = document.createElement('h6');
-                    emotionTitle.className = 'fw-bold mb-2';
-                    emotionTitle.textContent = 'Emotional Tone:';
-                    emotionDiv.appendChild(emotionTitle);
-
-                    const emotions = _emotionsDictToArray(data.emotion_analysis.emotions);
-                    emotions.slice(0, 3).forEach(emotion => {
-                        const badge = document.createElement('span');
-                        badge.className = 'badge me-2 mb-1';
-                        badge.textContent = `${emotion.emotion} (${(emotion.confidence * 100).toFixed(1)}%)`;
-                        emotionDiv.appendChild(badge);
-                    });
-
-                    summaryContainer.appendChild(emotionDiv);
-                }
-
-                const infoDiv = document.createElement('div');
-                infoDiv.className = 'mt-3';
-
-                const infoText = document.createElement('small');
-                infoText.className = 'text-muted';
-
-                const icon = document.createElement('i');
-                icon.className = 'fas fa-info-circle me-1';
-                infoText.appendChild(icon);
-
-                const originalWords = text.split(' ').length;
-                const summaryWords = summary.split(' ').length;
-                const compressionRatio = Math.max(0, ((originalWords - summaryWords) / originalWords * 100)).toFixed(1);
-
-                const infoContent = document.createTextNode(
-                    `Original: ${originalWords} words | Summary: ${summaryWords} words | Compression: ${compressionRatio}%`
-                );
-                infoText.appendChild(infoContent);
-                infoDiv.appendChild(infoText);
-                summaryContainer.appendChild(infoDiv);
-
-            } catch (error) {
-                console.error('Error:', error);
-                const summaryContainer = document.getElementById('summary-result');
-                summaryContainer.innerHTML = '';
-
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-danger';
-                errorDiv.textContent = `Error: ${error.message}`;
-                summaryContainer.appendChild(errorDiv);
-            } finally {
-                hideLoading('summary');
-            }
-        }
-
-        // Monitoring
-        function refreshMetrics() {
-            // Simulate refreshing metrics
-            document.getElementById('uptime-metric').textContent = '99.9%';
-            document.getElementById('response-time-metric').textContent = '43ms';
-            document.getElementById('requests-metric').textContent = Math.floor(Math.random() * 2000 + 1000);
-            document.getElementById('accuracy-metric').textContent = '90.7%';
-
-            // Update performance chart
-            updatePerformanceChart();
-        }
-
-        function updatePerformanceChart() {
-            const chartCanvas = document.getElementById('performanceChart');
-            if (!chartCanvas) {
-                console.warn('Performance chart canvas not found');
-                const chartContainer = document.querySelector('.col-md-6') || document.body;
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-warning';
-                errorDiv.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>Performance chart unavailable.';
-                chartContainer.appendChild(errorDiv);
-                return;
-            }
-
-            const ctx = chartCanvas.getContext('2d');
-
-            // Safely destroy existing chart instance using ChartManager
-            ChartManager.destroy('performanceChart');
-
-            // Generate realistic performance data
-            const now = new Date();
-            const timeLabels = [];
-            const responseData = [];
-
-            for (let i = 4; i >= 0; i--) {
-                const timestamp = new Date(now - i * 15000); // 15 seconds intervals
-                timeLabels.push(i === 0 ? 'Now' : `${i * 15}s ago`);
-                responseData.push(35 + Math.random() * 20); // Random response times between 35-55ms
+                });
             }
 
-            try {
-                const performanceChart = new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: timeLabels,
-                        datasets: [{
-                            label: 'Response Time (ms)',
-                            data: responseData,
-                            borderColor: 'rgba(139, 92, 246, 1)',
-                            backgroundColor: 'rgba(139, 92, 246, 0.1)',
-                            borderWidth: 3,
-                            tension: 0.4,
-                            fill: true,
-                            pointBackgroundColor: 'rgba(139, 92, 246, 1)',
-                            pointBorderColor: 'rgba(255, 255, 255, 1)',
-                            pointBorderWidth: 2,
-                            pointRadius: 6
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        interaction: {
-                            intersect: false,
-                            mode: 'index'
-                        },
-                        plugins: {
-                            legend: {
-                                display: false
-                            },
-                            tooltip: {
-                                backgroundColor: 'rgba(15, 15, 35, 0.9)',
-                                titleColor: '#e2e8f0',
-                                bodyColor: '#e2e8f0',
-                                borderColor: 'rgba(139, 92, 246, 0.5)',
-                                borderWidth: 1
-                            }
-                        },
-                        scales: {
-                            x: {
-                                grid: {
-                                    color: 'rgba(139, 92, 246, 0.1)',
-                                    borderColor: 'rgba(139, 92, 246, 0.2)'
-                                },
-                                ticks: {
-                                    color: '#cbd5e1'
-                                }
-                            },
-                            y: {
-                                beginAtZero: true,
-                                grid: {
-                                    color: 'rgba(139, 92, 246, 0.1)',
-                                    borderColor: 'rgba(139, 92, 246, 0.2)'
-                                },
-                                ticks: {
-                                    color: '#cbd5e1',
-                                    callback: function(value) {
-                                        return value + 'ms';
-                                    }
-                                }
-                            }
-                        }
+            // Clear all button
+            const clearAllBtn = document.getElementById('clearAllBtn');
+            if (clearAllBtn) {
+                clearAllBtn.addEventListener('click', function() {
+                    if (typeof clearAll === 'function') {
+                        clearAll();
                     }
                 });
-
-                // Register chart with ChartManager for proper lifecycle management
-                ChartManager.set('performanceChart', performanceChart);
-            } catch (error) {
-                console.error('Error creating performance chart:', error);
-                // Fallback: show text-based metrics if chart fails
-                const chartContainer = chartCanvas.parentElement;
-                if (chartContainer) {
-                    chartContainer.innerHTML = '<div class="alert alert-info">Chart visualization temporarily unavailable</div>';
-                }
             }
-        }
-
-        // Security Testing
-        async function testRateLimit() {
-            const container = document.getElementById('rate-limit-result');
-            container.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Testing...';
-
-            try {
-                const promises = Array(10).fill().map(() =>
-                    fetch(`${API_BASE_URL}/predict`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ text: 'test' })
-                    })
-                );
 
-                const responses = await Promise.all(promises);
-                const successCount = responses.filter(r => r.ok).length;
-                const rateLimitedCount = responses.filter(r => r.status === 429).length;
-
-                container.innerHTML = `
-                    <div class="alert alert-info">
-                        <strong>Rate Limit Test Results:</strong><br>
-                        Successful requests: ${successCount}<br>
-                        Rate limited requests: ${rateLimitedCount}<br>
-                        Rate limiting is working correctly!
-                    </div>
-                `;
-            } catch (error) {
-                container.innerHTML = '<div class="alert alert-warning">Rate limit test completed (simulated).</div>';
+            // Clear console button
+            const clearConsoleBtn = document.getElementById('clearConsoleBtn');
+            if (clearConsoleBtn) {
+                clearConsoleBtn.addEventListener('click', function() {
+                    if (typeof clearProgressConsole === 'function') {
+                        clearProgressConsole();
+                    }
+                });
             }
         }
 
-        // Utility functions
-        function showLoading(feature) {
-            document.getElementById(feature + '-loading').style.display = 'block';
-        }
-
-        function hideLoading(feature) {
-            document.getElementById(feature + '-loading').style.display = 'none';
-        }
-
-        // Initialize
-        document.addEventListener('DOMContentLoaded', function() {
-            updatePerformanceChart();
-            refreshMetrics();
-        });
+        // Make functions globally available
+        window.showChartJsFallback = showChartJsFallback;
+        window.renderEmotionBadges = renderEmotionBadges;
     </script>
-
-    <!-- Simple Chat UI -->
-    <section class="py-5 bg-light">
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-lg-8">
-                    <div class="card border-0 shadow-sm">
-                        <div class="card-body">
-                            <h5 class="fw-bold mb-3">Chat Demo</h5>
-                            <div class="d-flex align-items-center gap-2 mb-3">
-                                <span id="chat-auth-status" class="badge bg-warning text-dark">AUTH REQ</span>
-                                <input id="chat-username" class="form-control form-control-sm" placeholder="email" style="max-width:220px" />
-                                <input id="chat-password" class="form-control form-control-sm" placeholder="password" type="password" style="max-width:180px" />
-                                <button class="btn btn-sm btn-outline-primary" onclick="chatLogin()">Login</button>
-                                <button class="btn btn-sm btn-outline-success" onclick="connectChatWs()">Connect WS</button>
-                                <button class="btn btn-sm btn-outline-secondary" onclick="disconnectChatWs()">Disconnect</button>
-                            </div>
-                            <div id="chat-messages" class="mb-3" style="height:220px; overflow:auto; background:#0b1324; color:#e2e8f0; border-radius:8px; padding:10px;"></div>
-                            <div class="input-group mb-3">
-                                <input id="chat-input" class="form-control" placeholder="Type a message..." />
-                                <button class="btn btn-primary" onclick="sendChatHttp()">Send HTTP</button>
-                                <button class="btn btn-outline-primary" onclick="sendChatWs()">Send WS</button>
-                            </div>
-                            <pre id="chat-output" class="code-block" style="min-height:80px"></pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 </body>
 </html>
diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css
new file mode 100644
index 000000000..d49bf057f
--- /dev/null
+++ b/website/css/comprehensive-demo.css
@@ -0,0 +1,52 @@
+/* Comprehensive Demo Specific Styles */
+
+/* Material Icons sizing classes */
+.material-icons-2rem {
+    font-size: 2rem;
+}
+
+.material-icons-1-2rem {
+    font-size: 1.2rem;
+}
+
+.material-icons-1rem {
+    font-size: 1rem;
+}
+
+.material-icons-0-9rem {
+    font-size: 0.9rem;
+}
+
+/* Hidden elements */
+.hidden-element {
+    display: none;
+}
+
+/* Recording timer badge */
+.recording-timer {
+    display: none;
+}
+
+/* Audio visualizer */
+.audio-visualizer {
+    display: none;
+}
+
+/* Spinner sizing */
+.spinner-large {
+    width: 3rem;
+    height: 3rem;
+}
+
+/* Progress console */
+.progress-console {
+    height: 150px;
+    overflow-y: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 0.85rem;
+}
+
+/* Progress console row */
+.progress-console-row {
+    display: none;
+}
