From 9211aa6359bd35d34e1604f04e840215df31c0c4 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 10:54:54 +0200
Subject: [PATCH 01/15] feat: add website assets from PR #169
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ultra-granular split for Sourcery compatibility (30k chars < 150k limit):
- favicon.ico: Professional website favicon
- css/comprehensive-demo.css: Advanced demo styling with CSS variables

Part 3/4 of website files from feat/clean-demo-website.
Completes the website assets for visual branding and styling.

Original work attribution: PR #169 feat/clean-demo-website

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/css/comprehensive-demo.css | 1252 ++++++++++++++++++++++++++++
 website/favicon.ico                |    6 +
 2 files changed, 1258 insertions(+)
 create mode 100644 website/css/comprehensive-demo.css
 create mode 100644 website/favicon.ico

diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css
new file mode 100644
index 000000000..3d642f408
--- /dev/null
+++ b/website/css/comprehensive-demo.css
@@ -0,0 +1,1252 @@
+/* Comprehensive Demo Styles - Extracted from HTML for better maintainability */
+
+/* CSS Variables */
+:root {
+    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+    --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
+    --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+    --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
+
+    --primary-color: #8b5cf6;
+    --secondary-color: #a855f7;
+    --accent-color: #c084fc;
+    --dark-color: #0f0f23;
+    --darker-color: #0a0a1a;
+    --light-accent: #e9d5ff;
+    --glass-bg: rgba(139, 92, 246, 0.1);
+    --glass-border: rgba(139, 92, 246, 0.2);
+    --error-color: #ef4444;
+    --success-color: #10b981;
+
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
+    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Material Icons styling */
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+}
+
+/* Info icon styling */
+.info-icon {
+    font-size: 16px !important;
+    color: #6b7280;
+    margin-left: 6px;
+    cursor: help;
+    opacity: 0.7;
+    transition: var(--transition-smooth);
+    vertical-align: middle;
+}
+
+.info-icon:hover {
+    color: var(--primary-color);
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+/* Text input styling */
+#textInput {
+    min-height: 240px !important;
+    font-size: 16px;
+    line-height: 1.5;
+    resize: vertical;
+}
+
+/* Base Styles */
+body.comprehensive-demo {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.6;
+    color: #e2e8f0;
+    background: var(--dark-gradient);
+    background-attachment: fixed;
+    min-height: 100vh;
+    padding-top: 80px; /* Account for fixed navbar */
+}
+
+/* Result sections */
+.result-section-hidden {
+    display: none !important;
+}
+
+.result-section-visible {
+    display: block;
+    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Ensure all text is visible - scoped to comprehensive demo */
+.comprehensive-demo .text-muted {
+    color: #cbd5e1 !important;
+}
+
+/* Scoped to demo container only */
+.demo-container .text-dark {
+    color: #e2e8f0;
+}
+
+/* Feature card text improvements */
+.feature-card .text-muted {
+    color: #cbd5e1 !important;
+}
+
+.feature-card h5, .feature-card h6 {
+    color: #f1f5f9 !important;
+}
+
+.feature-card small {
+    color: #cbd5e1 !important;
+}
+
+/* Scoped form controls to demo container */
+.demo-container .form-control {
+    color: #e2e8f0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.demo-container .form-control:focus {
+    color: #e2e8f0;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
+}
+
+.comprehensive-demo .form-control::placeholder {
+    color: #94a3b8 !important;
+}
+
+/* Hero Section */
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
+    animation: float 6s ease-in-out infinite;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+/* Demo Container - Full Width Professional Design */
+.demo-container {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    padding: 3rem;
+    margin: 2rem 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    color: #e2e8f0;
+}
+
+/* Feature Cards */
+.feature-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    color: #e2e8f0;
+    height: 100%;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: var(--shadow-glow);
+}
+
+.feature-card.active {
+    background: var(--primary-gradient);
+    border-color: var(--accent-color);
+    color: white;
+    transform: translateY(-5px) scale(1.05);
+    box-shadow: var(--shadow-glow);
+}
+
+/* Navigation */
+.comprehensive-demo .navbar {
+    background: rgba(15, 15, 35, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.comprehensive-demo .navbar-brand, .comprehensive-demo .navbar .nav-link {
+    color: #e2e8f0;
+}
+
+/* Buttons */
+.comprehensive-demo .btn-primary {
+    background: var(--primary-gradient);
+    border: none;
+    border-radius: 12px;
+    padding: 12px 30px;
+    font-weight: 600;
+    transition: var(--transition-bounce);
+    box-shadow: var(--shadow-glow);
+}
+
+.comprehensive-demo .btn-primary:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
+}
+
+.comprehensive-demo .btn:focus-visible {
+    outline: 3px solid #667eea;
+    outline-offset: 2px;
+}
+
+/* Form Controls - consolidated with scoped rules above */
+
+/* Focus styles consolidated with scoped rules above */
+
+.demo-container .form-control::placeholder {
+    color: #94a3b8;
+}
+
+/* Loading States */
+.loading-spinner {
+    display: none;
+    color: #e2e8f0;
+}
+
+.loading-spinner.show {
+    display: block;
+}
+
+/* Result Sections */
+.result-section {
+    display: none;
+}
+
+/* Ensure icons are visible in results */
+.feature-card h5 i {
+    font-size: 1.2rem;
+    margin-right: 8px;
+}
+
+/* Processing Information Icons */
+.processing-info i {
+    font-size: 1.5rem !important;
+    margin-bottom: 8px;
+}
+
+.result-section.show {
+    display: block;
+    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(1deg); }
+    66% { transform: translateY(-10px) rotate(-1deg); }
+}
+
+.floating-card {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Text Effects */
+.gradient-text {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Emotion Badges */
+.emotion-badge {
+    display: block;
+    padding: 8px 16px;
+    margin: 4px 0;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: var(--transition-smooth);
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.emotion-badge:hover {
+    transform: scale(1.05);
+}
+
+/* Emotion Badges Container */
+#emotionBadges {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+/* Audio Visualizer */
+.audio-visualizer {
+    width: 100%;
+    height: 60px;
+    background: var(--glass-bg);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 0;
+}
+
+.audio-bar {
+    width: 4px;
+    height: 20px;
+    background: var(--primary-color);
+    margin: 0 2px;
+    border-radius: 2px;
+    animation: audioPulse 0.5s ease-in-out infinite alternate;
+}
+
+@keyframes audioPulse {
+    0% { height: 20px; }
+    100% { height: 40px; }
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+    .step.active .step-circle,
+    .spinner {
+        animation: none !important;
+    }
+    .btn:hover {
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Progress Steps */
+.progress-step {
+    display: flex;
+    align-items: center;
+}
+
+/* Vertical Progress Pipeline */
+.progress-pipeline-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px; /* Reduced from 20px for tighter spacing */
+    padding: 25px 15px; /* Reduced padding */
+    background: var(--glass-bg);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: 450px; /* Reduced height */
+    justify-content: center;
+    width: 100%;
+}
+
+.progress-step-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    padding: 16px 20px; /* Increased padding for better touch targets */
+    border-radius: 15px;
+    transition: var(--transition-smooth);
+    min-width: 160px; /* Increased width */
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 4px; /* Reduced margin */
+    width: 100%; /* Full width for better appearance */
+}
+
+.progress-step-vertical .step-icon-small {
+    width: 24px !important; /* Increased from 18px */
+    height: 24px !important; /* Increased from 18px */
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px; /* Increased margin */
+    margin-bottom: 0;
+    font-size: 0.8rem !important; /* Increased from 0.6rem */
+    transition: var(--transition-smooth);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #e2e8f0 !important;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    flex-shrink: 0;
+}
+
+.progress-step-vertical .step-label {
+    font-size: 0.9rem; /* Increased from 0.7rem */
+    font-weight: 600;
+    color: #e2e8f0;
+    transition: var(--transition-smooth);
+    text-align: left; /* Changed from center to left for better alignment */
+    flex: 1; /* Take remaining space */
+}
+
+.progress-step-vertical.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    box-shadow: var(--shadow-glow);
+}
+
+.progress-step-vertical.completed .step-icon-small {
+    background: var(--success-color) !important;
+    color: white !important;
+}
+
+.progress-step-vertical.error .step-icon-small {
+    background: var(--error-color) !important;
+    color: white !important;
+}
+
+.pipeline-arrow-vertical {
+    font-size: 1.2rem; /* Slightly smaller */
+    color: #94a3b8; /* Better color */
+    margin: 2px 0; /* Reduced margin */
+    opacity: 0.7; /* Subtle appearance */
+    transition: var(--transition-smooth);
+}
+
+.progress-step.completed {
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.progress-step.active {
+    background: var(--primary-gradient);
+    color: white;
+}
+
+.step-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+    font-size: 14px;
+}
+
+.step-icon.completed {
+    background: #10b981;
+    color: white;
+}
+
+.step-icon.active {
+    background: white;
+    color: var(--primary-color);
+}
+
+.step-icon.pending {
+    background: rgba(139, 92, 246, 0.2);
+    color: #94a3b8;
+}
+
+/* Progress Pipeline - New Compact Horizontal Design */
+.progress-pipeline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: var(--glass-bg);
+    border-radius: 15px;
+    border: 1px solid var(--glass-border);
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+/* Horizontal Progress Pipeline for Title Flow */
+.progress-pipeline-horizontal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(139, 92, 246, 0.05);
+    border-radius: 25px;
+    border: 1px solid rgba(139, 92, 246, 0.1);
+    backdrop-filter: blur(5px);
+    box-shadow: none;
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.progress-pipeline-horizontal:hover {
+    opacity: 1;
+    background: rgba(139, 92, 246, 0.08);
+}
+
+/* Dynamic Layout States */
+#inputLayout {
+    transition: all 0.5s ease-in-out;
+}
+
+#resultsLayout {
+    transition: all 0.5s ease-in-out;
+}
+
+#titleWithFlow {
+    transition: all 0.3s ease-in-out;
+}
+
+/* Enhanced Feature Cards with Better Background Prominence */
+.feature-card {
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.15) 0%,
+        rgba(168, 85, 247, 0.12) 50%,
+        rgba(192, 132, 252, 0.1) 100%);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(139, 92, 246, 0.25);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    color: #e2e8f0;
+    height: 100%;
+    padding: 2rem; /* Increased padding for better background-to-text ratio */
+    min-height: 140px; /* Ensure minimum height for prominence */
+    position: relative;
+}
+
+/* Add subtle glow effect to feature cards */
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.05),
+        rgba(168, 85, 247, 0.03),
+        rgba(192, 132, 252, 0.02));
+    border-radius: 20px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+/* Enhanced demo container background */
+.demo-container {
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.12) 0%,
+        rgba(15, 15, 35, 0.95) 50%,
+        rgba(168, 85, 247, 0.08) 100%);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(139, 92, 246, 0.2);
+    border-radius: 20px;
+    box-shadow:
+        var(--shadow-glass),
+        0 0 40px rgba(139, 92, 246, 0.1);
+    padding: 3rem;
+    margin: 2rem 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    color: #e2e8f0;
+}
+
+/* Enhanced Loading Step Styles */
+.process-step {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.process-step.active {
+    background: rgba(139, 92, 246, 0.15);
+    border-color: rgba(139, 92, 246, 0.4);
+    transform: scale(1.02);
+}
+
+.process-step.completed {
+    background: rgba(16, 185, 129, 0.15);
+    border-color: rgba(16, 185, 129, 0.4);
+}
+
+.step-text {
+    font-weight: 600;
+    color: #e2e8f0;
+    font-size: 0.9rem;
+    margin-bottom: 8px;
+}
+
+.step-status {
+    font-size: 0.8rem;
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+.process-step.active .step-status {
+    color: #a855f7;
+}
+
+.process-step.completed .step-status {
+    color: #10b981;
+}
+
+/* Processing Information Compact Styles */
+#processingInfoSidebar .feature-card {
+    min-height: auto;
+}
+
+#processingInfoSidebar .bg-dark {
+    transition: all 0.2s ease;
+}
+
+#processingInfoSidebar .bg-dark:hover {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    transform: translateX(2px);
+}
+
+/* Button Consistency and Improved Spacing */
+.btn-lg {
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    min-width: 120px; /* Ensure consistent button widths */
+}
+
+/* Debug Test Section Toggleable */
+#debugTestSection.hidden {
+    display: none !important;
+}
+
+#debugTestSection .btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+/* Enhanced Input Area Background */
+#textInput {
+    min-height: 240px !important;
+    font-size: 16px;
+    line-height: 1.5;
+    resize: vertical;
+    padding: 1.5rem; /* Increased padding for better appearance */
+    background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */
+    border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */
+}
+
+#textInput:focus {
+    background-color: rgba(255, 255, 255, 0.18) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important;
+    transform: scale(1.01); /* Subtle scale on focus */
+}
+
+.progress-step-horizontal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-width: 60px;
+    transition: var(--transition-smooth);
+}
+
+.progress-step-horizontal .step-icon-small {
+    width: 18px !important;
+    height: 18px !important;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.25rem;
+    font-size: 0.7rem !important;
+    transition: var(--transition-smooth);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #cbd5e1 !important;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+}
+
+.progress-step-horizontal .step-label {
+    font-size: 0.65rem;
+    font-weight: 500;
+    color: #94a3b8;
+    white-space: nowrap;
+    transition: var(--transition-smooth);
+}
+
+.progress-step-horizontal.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    transform: scale(1.1);
+}
+
+.progress-step-horizontal.active .step-label {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.progress-step-horizontal.completed .step-icon-small {
+    background: #10b981 !important;
+    color: white !important;
+}
+
+.progress-step-horizontal.completed .step-label {
+    color: #10b981;
+}
+
+.pipeline-arrow {
+    font-size: 0.8rem;
+    color: #64748b;
+    font-weight: normal;
+    user-select: none;
+    opacity: 0.6;
+}
+
+
+/* Responsive Design for Progress Pipeline */
+@media (max-width: 768px) {
+    .progress-pipeline {
+        flex-direction: column;
+        gap: 1.5rem;
+        padding: 2rem 1rem;
+    }
+
+    .pipeline-arrow {
+        transform: rotate(90deg);
+        font-size: 1.5rem;
+    }
+
+    .progress-step-horizontal {
+        min-width: 100px;
+    }
+
+    .step-label {
+        font-size: 0.8rem;
+    }
+}
+
+/* Error Messages */
+.error-message {
+    color: #ef4444;
+    font-size: 0.875rem;
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 8px;
+    display: none;
+}
+
+.error-message.show {
+    display: block;
+    animation: fadeInUp 0.3s ease-out;
+}
+
+/* Success Messages */
+.success-message {
+    color: #10b981;
+    font-size: 0.875rem;
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    border-radius: 8px;
+    display: none;
+}
+
+.success-message.show {
+    display: block;
+    animation: fadeInUp 0.3s ease-out;
+}
+
+/* Model Detail Cards */
+.model-detail-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    transition: all 0.3s ease;
+}
+
+.model-detail-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-1px);
+}
+
+.model-detail-label {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+
+.model-detail-value {
+    font-size: 1.1rem;
+    color: #f1f5f9;
+    font-weight: 700;
+}
+
+.model-detail-text {
+    font-size: 0.9rem;
+    color: #cbd5e1;
+    line-height: 1.4;
+}
+
+/* Pure HTML/CSS Chart styling - BEAUTIFUL DESIGN */
+.emotion-chart-container, .summary-chart-container {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    border-radius: 16px;
+    padding: 25px;
+    margin: 20px 0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.emotion-chart-container::before, .summary-chart-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
+}
+
+.chart-header {
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+.chart-title {
+    color: #fbbf24;
+    font-weight: 700;
+    margin-bottom: 8px;
+    font-size: 1.25rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.chart-subtitle {
+    color: #cbd5e1;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.emotion-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.emotion-bar {
+    margin-bottom: 20px;
+    animation: slideInLeft 0.8s ease-out forwards;
+    opacity: 0;
+    transform: translateX(-30px);
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    display: block;
+    visibility: visible;
+}
+
+.emotion-bar:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes slideInLeft {
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.emotion-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    align-items: center;
+}
+
+.emotion-name {
+    font-weight: 700;
+    color: #f1f5f9;
+    text-transform: capitalize;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+}
+
+.emotion-percentage {
+    color: #a855f7;
+    font-weight: 700;
+    font-size: 1.1rem;
+    background: rgba(168, 85, 247, 0.1);
+    padding: 4px 12px;
+    border-radius: 20px;
+    border: 1px solid rgba(168, 85, 247, 0.3);
+}
+
+.emotion-bar-bg {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 15px;
+    height: 16px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.emotion-bar-fill {
+    height: 100%;
+    border-radius: 15px;
+    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.emotion-bar-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.summary-stats {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 25px;
+    gap: 20px;
+}
+
+.stat-item {
+    text-align: center;
+    flex: 1;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+}
+
+.stat-item.highlight {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
+    border: 2px solid rgba(139, 92, 246, 0.4);
+    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
+}
+
+.stat-value {
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: #fbbf24;
+    margin-bottom: 8px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item.highlight .stat-value {
+    color: #c084fc;
+    font-size: 2rem;
+}
+
+.stat-label {
+    font-size: 0.8rem;
+    color: #cbd5e1;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.summary-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.summary-bar {
+    margin-bottom: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.summary-bar:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-1px);
+}
+
+.bar-label {
+    font-weight: 700;
+    color: #f1f5f9;
+    margin-bottom: 12px;
+    font-size: 1rem;
+}
+
+.bar-bg {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    height: 24px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.bar-fill {
+    height: 100%;
+    border-radius: 12px;
+    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.bar-fill.original {
+    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
+}
+
+.bar-fill.summary {
+    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
+}
+
+.bar-value {
+    text-align: right;
+    font-size: 0.9rem;
+    color: #cbd5e1;
+    margin-top: 8px;
+    font-weight: 600;
+}
+
+.chart-footer {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #94a3b8;
+    font-size: 0.85rem;
+}
+
+
+/* Keyboard Focus Indicators */
+.comprehensive-demo .btn-primary:focus-visible {
+    outline: 3px solid #c084fc;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45);
+}
+
+.demo-container .form-control:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* Reduced Motion Preferences */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
+    }
+    .hero-section::before {
+        animation: none !important;
+    }
+    .floating-card {
+        animation: none !important;
+    }
+    .audio-bar {
+        animation: none !important;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .progress-pipeline-horizontal {
+        gap: 0.5rem;
+        padding: 0.8rem 1rem;
+    }
+
+    .progress-pipeline-horizontal .step-label {
+        font-size: 0.7rem;
+    }
+
+    #processingInfoSidebar {
+        margin-top: 2rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .demo-container {
+        padding: 30px 20px;
+        margin: -50px 15px 30px 15px;
+    }
+
+    .hero-section {
+        padding: 80px 0;
+    }
+
+    /* Stack title and flow vertically on mobile */
+    #titleWithFlow .d-flex {
+        flex-direction: column;
+        gap: 0.75rem;
+        text-align: center;
+    }
+
+    .progress-pipeline-horizontal {
+        gap: 0.25rem;
+        padding: 0.4rem 0.6rem;
+        justify-content: center;
+    }
+
+    .progress-step-horizontal {
+        min-width: 40px;
+    }
+
+    .progress-step-horizontal .step-icon-small {
+        width: 16px !important;
+        height: 16px !important;
+        font-size: 0.6rem !important;
+    }
+
+    .progress-step-horizontal .step-label {
+        font-size: 0.5rem;
+    }
+
+    .pipeline-arrow {
+        font-size: 0.7rem;
+    }
+
+    /* Stack buttons vertically on mobile */
+    .d-flex.gap-3.justify-content-center {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem !important;
+    }
+
+    .btn-lg {
+        min-width: 200px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    /* Full width input on mobile */
+    #textInput {
+        min-height: 180px !important;
+        padding: 1rem;
+    }
+
+    /* Compact processing info on mobile */
+    #processingInfoSidebar .bg-dark {
+        padding: 0.5rem !important;
+    }
+
+    #processingInfoSidebar .feature-card {
+        padding: 1rem;
+    }
+
+    /* Results layout adjustments */
+    #resultsLayout .col-lg-8,
+    #resultsLayout .col-lg-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    .demo-container {
+        padding: 20px 15px;
+        margin: -50px 10px 20px 10px;
+    }
+
+    .progress-pipeline-horizontal {
+        padding: 0.5rem;
+    }
+
+    .btn-lg {
+        padding: 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .feature-card {
+        padding: 1rem !important;
+        margin-bottom: 1rem;
+    }
+
+    #textInput {
+        min-height: 160px !important;
+        font-size: 14px;
+    }
+}
+
+/* Debug section responsive behavior */
+@media (max-width: 992px) {
+    #debugTestSection {
+        margin-top: 1rem;
+    }
+}
+
+/* Enhanced transitions for responsive changes */
+@media (prefers-reduced-motion: no-preference) {
+    #titleWithFlow,
+    #inputLayout,
+    #resultsLayout {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+}
diff --git a/website/favicon.ico b/website/favicon.ico
new file mode 100644
index 000000000..cb37ebb78
--- /dev/null
+++ b/website/favicon.ico
@@ -0,0 +1,6 @@
+<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
+<TITLE>301 Moved</TITLE></HEAD><BODY>
+<H1>301 Moved</H1>
+The document has moved
+<A HREF="https://t2.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=http://github.com&amp;size=32">here</A>.
+</BODY></HTML>

From 373da35eb4ebca087127fd7e64ad96f776219602 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:24:42 +0200
Subject: [PATCH 02/15] fix: replace HTML redirect favicon.ico with proper
 binary icon file

---
 website/favicon.ico | Bin 330 -> 1042 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/website/favicon.ico b/website/favicon.ico
index cb37ebb78418ccdd4261cffee1aa89c5d8c4170d..2efdef2a8f3084bc3c9ab1abca51fdf6f9a0db6b 100644
GIT binary patch
literal 1042
jcmZQ%5D;KsU}R8W00R~VhVGbe|3~p?7>uTYk(mYn=tJCP

literal 330
zcmYk2!Eb^v7{%`-{trzLJ1L!bS!T<^6axv4MVX1aEVUNf41~c4nfvS4!VWvWm+$5G
z-bbTsoA@*egSAgf2^=YadM3X*-7_qzE66L%;8shF{uIL?zkw(yi=|M!X(g}@^4SCS
z9h${i68ek#IoejeJX10nl#GPubbT~e(ft33QBI~LI#;4A4Gt;ZqSD448lY$wZWy+$
z+DAgbb1yA$(83i}Npjw6Q|sV8i9(ww+o!8INbY!9FKubI2@dfpeHo0L7sZK-&yT8x
zmSxA+aJrA*!|B^@40KJwEXQCj8dP_(h#}ePAITOT_LXcTC4uiw97={UW|{rq#Q6n$
CK58@o


From 97a6f632d10894c128ce544ebdc6c3edde66b37c Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:24:50 +0200
Subject: [PATCH 03/15] fix: update HTML to use modular CSS structure

---
 website/comprehensive-demo.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/comprehensive-demo.html b/website/comprehensive-demo.html
index 010e8a3fb..56c8f1188 100644
--- a/website/comprehensive-demo.html
+++ b/website/comprehensive-demo.html
@@ -16,8 +16,8 @@
     <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>
-    <!-- Custom CSS -->
-    <link href="css/styles.css" rel="stylesheet">
+    <!-- Custom CSS - Modular Structure -->
+    <link href="css/main.css" rel="stylesheet">
 
 </head>
 <body>

From ad48b66917e4ce44fe9c155dcac9f7e2c41eaff2 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:24:58 +0200
Subject: [PATCH 04/15] fix: address code review issues in
 comprehensive-demo.css

- Consolidate duplicate CSS rules (.demo-container, .feature-card, #textInput)
- Fix aggressive universal selector in prefers-reduced-motion with specific classes
- Make .step-label selector more specific to avoid conflicts
- Merge duplicate @media (max-width: 768px) blocks for better maintainability
---
 website/css/comprehensive-demo.css | 289 +++++++++++++----------------
 1 file changed, 125 insertions(+), 164 deletions(-)

diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css
index 3d642f408..1073ba403 100644
--- a/website/css/comprehensive-demo.css
+++ b/website/css/comprehensive-demo.css
@@ -59,13 +59,7 @@
     transform: scale(1.1);
 }
 
-/* Text input styling */
-#textInput {
-    min-height: 240px !important;
-    font-size: 16px;
-    line-height: 1.5;
-    resize: vertical;
-}
+/* Text input styling - consolidated below */
 
 /* Base Styles */
 body.comprehensive-demo {
@@ -78,6 +72,107 @@ body.comprehensive-demo {
     padding-top: 80px; /* Account for fixed navbar */
 }
 
+/* Mobile Responsive Design - Consolidated */
+@media (max-width: 768px) {
+    body.comprehensive-demo {
+        background-attachment: scroll;
+    }
+
+    .progress-pipeline {
+        flex-direction: column;
+        gap: 1.5rem;
+        padding: 2rem 1rem;
+    }
+
+    .pipeline-arrow {
+        transform: rotate(90deg);
+        font-size: 1.5rem;
+    }
+
+    .progress-step-horizontal {
+        min-width: 100px;
+    }
+
+    .progress-step-horizontal .step-label {
+        font-size: 0.8rem;
+    }
+
+    .demo-container {
+        padding: 30px 20px;
+        margin: -50px 15px 30px 15px;
+    }
+
+    .hero-section {
+        padding: 80px 0;
+    }
+
+    /* Stack title and flow vertically on mobile */
+    #titleWithFlow .d-flex {
+        flex-direction: column;
+        gap: 0.75rem;
+        text-align: center;
+    }
+
+    .progress-pipeline-horizontal {
+        gap: 0.25rem;
+        padding: 0.4rem 0.6rem;
+        justify-content: center;
+    }
+
+    .progress-step-horizontal {
+        min-width: 40px;
+    }
+
+    .progress-step-horizontal .step-icon-small {
+        width: 16px !important;
+        height: 16px !important;
+        font-size: 0.6rem !important;
+    }
+
+    .progress-step-horizontal .step-label {
+        font-size: 0.5rem;
+    }
+
+    .pipeline-arrow {
+        font-size: 0.7rem;
+    }
+
+    /* Stack buttons vertically on mobile */
+    .d-flex.gap-3.justify-content-center {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem !important;
+    }
+
+    .btn-lg {
+        min-width: 200px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    /* Full width input on mobile */
+    #textInput {
+        min-height: 180px !important;
+        padding: 1rem;
+    }
+
+    /* Compact processing info on mobile */
+    #processingInfoSidebar .bg-dark {
+        padding: 0.5rem !important;
+    }
+
+    #processingInfoSidebar .feature-card {
+        padding: 1rem;
+    }
+
+    /* Results layout adjustments */
+    #resultsLayout .col-lg-8,
+    #resultsLayout .col-lg-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
 /* Result sections */
 .result-section-hidden {
     display: none !important;
@@ -149,45 +244,9 @@ body.comprehensive-demo {
     z-index: 2;
 }
 
-/* Demo Container - Full Width Professional Design */
-.demo-container {
-    background: var(--glass-bg);
-    backdrop-filter: blur(20px);
-    border: 1px solid var(--glass-border);
-    border-radius: 20px;
-    box-shadow: var(--shadow-glass);
-    padding: 3rem;
-    margin: 2rem 0;
-    width: 100%;
-    position: relative;
-    z-index: 1;
-    color: #e2e8f0;
-}
+/* Demo Container - Consolidated */
 
-/* Feature Cards */
-.feature-card {
-    background: var(--glass-bg);
-    backdrop-filter: blur(15px);
-    border: 1px solid var(--glass-border);
-    border-radius: 20px;
-    box-shadow: var(--shadow-glass);
-    transition: var(--transition-bounce);
-    color: #e2e8f0;
-    height: 100%;
-}
-
-.feature-card:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: var(--shadow-glow);
-}
-
-.feature-card.active {
-    background: var(--primary-gradient);
-    border-color: var(--accent-color);
-    color: white;
-    transform: translateY(-5px) scale(1.05);
-    box-shadow: var(--shadow-glow);
-}
+/* Feature Cards - Consolidated */
 
 /* Navigation */
 .comprehensive-demo .navbar {
@@ -343,17 +402,7 @@ body.comprehensive-demo {
     100% { height: 40px; }
 }
 
-/* Reduce motion for users who prefer it */
-@media (prefers-reduced-motion: reduce) {
-    .step.active .step-circle,
-    .spinner {
-        animation: none !important;
-    }
-    .btn:hover {
-        transform: none !important;
-        box-shadow: none !important;
-    }
-}
+/* Reduced motion rules consolidated above */
 
 /* Progress Steps */
 .progress-step {
@@ -742,27 +791,7 @@ body.comprehensive-demo {
 }
 
 
-/* Responsive Design for Progress Pipeline */
-@media (max-width: 768px) {
-    .progress-pipeline {
-        flex-direction: column;
-        gap: 1.5rem;
-        padding: 2rem 1rem;
-    }
-
-    .pipeline-arrow {
-        transform: rotate(90deg);
-        font-size: 1.5rem;
-    }
-
-    .progress-step-horizontal {
-        min-width: 100px;
-    }
-
-    .step-label {
-        font-size: 0.8rem;
-    }
-}
+/* Responsive Design for Progress Pipeline - consolidated above */
 
 /* Error Messages */
 .error-message {
@@ -1099,20 +1128,27 @@ body.comprehensive-demo {
     outline-offset: 2px;
 }
 
-/* Reduced Motion Preferences */
+/* Reduced Motion Preferences - Consolidated */
 @media (prefers-reduced-motion: reduce) {
-    * {
+    .step.active .step-circle,
+    .spinner,
+    .hero-section::before,
+    .floating-card,
+    .audio-bar,
+    .emotion-bar-fill::after,
+    .feature-card,
+    .btn,
+    .btn:hover,
+    .progress-step-vertical,
+    .progress-step-horizontal,
+    .process-step,
+    .model-detail-card,
+    .stat-item,
+    .emotion-bar,
+    .summary-bar {
         animation: none !important;
         transition: none !important;
-    }
-    .hero-section::before {
-        animation: none !important;
-    }
-    .floating-card {
-        animation: none !important;
-    }
-    .audio-bar {
-        animation: none !important;
+        transform: none !important;
     }
 }
 
@@ -1132,82 +1168,7 @@ body.comprehensive-demo {
     }
 }
 
-@media (max-width: 768px) {
-    .demo-container {
-        padding: 30px 20px;
-        margin: -50px 15px 30px 15px;
-    }
-
-    .hero-section {
-        padding: 80px 0;
-    }
-
-    /* Stack title and flow vertically on mobile */
-    #titleWithFlow .d-flex {
-        flex-direction: column;
-        gap: 0.75rem;
-        text-align: center;
-    }
-
-    .progress-pipeline-horizontal {
-        gap: 0.25rem;
-        padding: 0.4rem 0.6rem;
-        justify-content: center;
-    }
-
-    .progress-step-horizontal {
-        min-width: 40px;
-    }
-
-    .progress-step-horizontal .step-icon-small {
-        width: 16px !important;
-        height: 16px !important;
-        font-size: 0.6rem !important;
-    }
-
-    .progress-step-horizontal .step-label {
-        font-size: 0.5rem;
-    }
-
-    .pipeline-arrow {
-        font-size: 0.7rem;
-    }
-
-    /* Stack buttons vertically on mobile */
-    .d-flex.gap-3.justify-content-center {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.75rem !important;
-    }
-
-    .btn-lg {
-        min-width: 200px;
-        width: 100%;
-        max-width: 300px;
-    }
-
-    /* Full width input on mobile */
-    #textInput {
-        min-height: 180px !important;
-        padding: 1rem;
-    }
-
-    /* Compact processing info on mobile */
-    #processingInfoSidebar .bg-dark {
-        padding: 0.5rem !important;
-    }
-
-    #processingInfoSidebar .feature-card {
-        padding: 1rem;
-    }
-
-    /* Results layout adjustments */
-    #resultsLayout .col-lg-8,
-    #resultsLayout .col-lg-4 {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
-}
+/* Mobile responsive rules consolidated above */
 
 @media (max-width: 576px) {
     .demo-container {

From bdd5d578ea5929ad322233f331adbe0a7191810f Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:25:39 +0200
Subject: [PATCH 05/15] feat: add core CSS architecture files

- Add variables.css with design system variables
- Add base.css with typography and global styles
- Add main.css as entry point for component imports
---
 website/css/components/base.css      | 77 ++++++++++++++++++++++++++++
 website/css/components/variables.css | 23 +++++++++
 website/css/main.css                 | 15 ++++++
 3 files changed, 115 insertions(+)
 create mode 100644 website/css/components/base.css
 create mode 100644 website/css/components/variables.css
 create mode 100644 website/css/main.css

diff --git a/website/css/components/base.css b/website/css/components/base.css
new file mode 100644
index 000000000..4f8efb758
--- /dev/null
+++ b/website/css/components/base.css
@@ -0,0 +1,77 @@
+/* Base Styles and Typography */
+body.comprehensive-demo {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.6;
+    color: #e2e8f0;
+    background: var(--dark-gradient);
+    background-attachment: fixed;
+    min-height: 100vh;
+    padding-top: 80px; /* Account for fixed navbar */
+}
+
+/* Disable background-attachment: fixed on mobile devices for performance */
+@media (max-width: 768px) {
+    body.comprehensive-demo {
+        background-attachment: scroll;
+    }
+}
+
+/* Material Icons styling */
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+}
+
+/* Info icon styling */
+.info-icon {
+    font-size: 16px !important;
+    color: #6b7280;
+    margin-left: 6px;
+    cursor: help;
+    opacity: 0.7;
+    transition: var(--transition-smooth);
+    vertical-align: middle;
+}
+
+.info-icon:hover {
+    color: var(--primary-color);
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+/* Text Effects */
+.gradient-text {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Reduced Motion Preferences */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
+    }
+    .hero-section::before {
+        animation: none !important;
+    }
+    .floating-card {
+        animation: none !important;
+    }
+    .audio-bar {
+        animation: none !important;
+    }
+}
diff --git a/website/css/components/variables.css b/website/css/components/variables.css
new file mode 100644
index 000000000..3deb64aba
--- /dev/null
+++ b/website/css/components/variables.css
@@ -0,0 +1,23 @@
+/* CSS Variables - Centralized Design System */
+:root {
+    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+    --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
+    --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+    --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
+
+    --primary-color: #8b5cf6;
+    --secondary-color: #a855f7;
+    --accent-color: #c084fc;
+    --dark-color: #0f0f23;
+    --darker-color: #0a0a1a;
+    --light-accent: #e9d5ff;
+    --glass-bg: rgba(139, 92, 246, 0.1);
+    --glass-border: rgba(139, 92, 246, 0.2);
+    --error-color: #ef4444;
+    --success-color: #10b981;
+
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
+    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
diff --git a/website/css/main.css b/website/css/main.css
new file mode 100644
index 000000000..bf13ccca0
--- /dev/null
+++ b/website/css/main.css
@@ -0,0 +1,15 @@
+/* Main CSS File - Imports all component stylesheets */
+
+/* Import component stylesheets in logical order */
+@import url('./components/variables.css');
+@import url('./components/base.css');
+@import url('./components/navigation.css');
+@import url('./components/buttons.css');
+@import url('./components/forms.css');
+@import url('./components/containers.css');
+@import url('./components/cards.css');
+@import url('./components/progress.css');
+@import url('./components/charts.css');
+@import url('./components/messages.css');
+@import url('./components/animations.css');
+@import url('./components/responsive.css');

From b228a9e15ee14b13d41ff0fd0808d10f01cc9926 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:25:47 +0200
Subject: [PATCH 06/15] feat: add UI component CSS files

- Add buttons.css for button styles and interactions
- Add forms.css for form controls and input styling
- Add navigation.css for navbar and menu components
- Add cards.css for feature cards and content containers
---
 website/css/components/buttons.css    |  59 +++++++++++
 website/css/components/cards.css      | 135 ++++++++++++++++++++++++++
 website/css/components/forms.css      |  45 +++++++++
 website/css/components/navigation.css |  10 ++
 4 files changed, 249 insertions(+)
 create mode 100644 website/css/components/buttons.css
 create mode 100644 website/css/components/cards.css
 create mode 100644 website/css/components/forms.css
 create mode 100644 website/css/components/navigation.css

diff --git a/website/css/components/buttons.css b/website/css/components/buttons.css
new file mode 100644
index 000000000..72a41ea2f
--- /dev/null
+++ b/website/css/components/buttons.css
@@ -0,0 +1,59 @@
+/* Button Styles */
+.comprehensive-demo .btn-primary {
+    background: var(--primary-gradient);
+    border: none;
+    border-radius: 12px;
+    padding: 12px 30px;
+    font-weight: 600;
+    transition: var(--transition-bounce);
+    box-shadow: var(--shadow-glow);
+}
+
+.comprehensive-demo .btn-primary:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
+}
+
+.comprehensive-demo .btn:focus-visible {
+    outline: 3px solid #667eea;
+    outline-offset: 2px;
+}
+
+.comprehensive-demo .btn-primary:focus-visible {
+    outline: 3px solid #c084fc;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45);
+}
+
+/* Button Consistency and Improved Spacing */
+.btn-lg {
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    min-width: 120px; /* Ensure consistent button widths */
+}
+
+/* Debug Test Section Toggleable */
+#debugTestSection .btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+/* Responsive button adjustments */
+@media (max-width: 768px) {
+    .btn-lg {
+        min-width: 200px;
+        width: 100%;
+        max-width: 300px;
+    }
+}
+
+@media (max-width: 576px) {
+    .btn-lg {
+        padding: 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+}
diff --git a/website/css/components/cards.css b/website/css/components/cards.css
new file mode 100644
index 000000000..e52a92e34
--- /dev/null
+++ b/website/css/components/cards.css
@@ -0,0 +1,135 @@
+/* Feature Cards - Consolidated */
+.feature-card {
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.15) 0%,
+        rgba(168, 85, 247, 0.12) 50%,
+        rgba(192, 132, 252, 0.1) 100%);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(139, 92, 246, 0.25);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    color: #e2e8f0;
+    height: 100%;
+    padding: 2rem; /* Increased padding for better background-to-text ratio */
+    min-height: 140px; /* Ensure minimum height for prominence */
+    position: relative;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: var(--shadow-glow);
+}
+
+.feature-card.active {
+    background: var(--primary-gradient);
+    border-color: var(--accent-color);
+    color: white;
+    transform: translateY(-5px) scale(1.05);
+    box-shadow: var(--shadow-glow);
+}
+
+/* Add subtle glow effect to feature cards */
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.05),
+        rgba(168, 85, 247, 0.03),
+        rgba(192, 132, 252, 0.02));
+    border-radius: 20px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+/* Feature card text improvements */
+.feature-card .text-muted {
+    color: #cbd5e1 !important;
+}
+
+.feature-card h5, .feature-card h6 {
+    color: #f1f5f9 !important;
+}
+
+.feature-card small {
+    color: #cbd5e1 !important;
+}
+
+/* Ensure icons are visible in results */
+.feature-card h5 i {
+    font-size: 1.2rem;
+    margin-right: 8px;
+}
+
+/* Processing Information Compact Styles */
+#processingInfoSidebar .feature-card {
+    min-height: auto;
+}
+
+#processingInfoSidebar .bg-dark {
+    transition: all 0.2s ease;
+}
+
+#processingInfoSidebar .bg-dark:hover {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    transform: translateX(2px);
+}
+
+/* Model Detail Cards */
+.model-detail-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    transition: all 0.3s ease;
+}
+
+.model-detail-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-1px);
+}
+
+.model-detail-label {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+
+.model-detail-value {
+    font-size: 1.1rem;
+    color: #f1f5f9;
+    font-weight: 700;
+}
+
+.model-detail-text {
+    font-size: 0.9rem;
+    color: #cbd5e1;
+    line-height: 1.4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    #processingInfoSidebar .feature-card {
+        padding: 1rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .feature-card {
+        padding: 1rem !important;
+        margin-bottom: 1rem;
+    }
+}
diff --git a/website/css/components/forms.css b/website/css/components/forms.css
new file mode 100644
index 000000000..3f28cef36
--- /dev/null
+++ b/website/css/components/forms.css
@@ -0,0 +1,45 @@
+/* Form Controls and Input Styling */
+#textInput {
+    min-height: 240px !important;
+    font-size: 16px;
+    line-height: 1.5;
+    resize: vertical;
+    padding: 1.5rem; /* Increased padding for better appearance */
+    background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */
+    border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */
+}
+
+#textInput:focus {
+    background-color: rgba(255, 255, 255, 0.18) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important;
+    transform: scale(1.01); /* Subtle scale on focus */
+}
+
+/* Scoped form controls to demo container */
+.demo-container .form-control {
+    color: #e2e8f0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.demo-container .form-control:focus {
+    color: #e2e8f0;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
+}
+
+.comprehensive-demo .form-control::placeholder {
+    color: #94a3b8 !important;
+}
+
+.demo-container .form-control::placeholder {
+    color: #94a3b8;
+}
+
+/* Focus styles */
+.demo-container .form-control:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
diff --git a/website/css/components/navigation.css b/website/css/components/navigation.css
new file mode 100644
index 000000000..13ffc036d
--- /dev/null
+++ b/website/css/components/navigation.css
@@ -0,0 +1,10 @@
+/* Navigation Styles */
+.comprehensive-demo .navbar {
+    background: rgba(15, 15, 35, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.comprehensive-demo .navbar-brand, .comprehensive-demo .navbar .nav-link {
+    color: #e2e8f0;
+}

From 60956241cc4c9c1470a08f323aed8a98f2633cf7 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:25:56 +0200
Subject: [PATCH 07/15] feat: add layout and interactive component CSS files

- Add containers.css for layout containers and hero sections
- Add progress.css for progress indicators and pipeline components
- Add charts.css for data visualization and chart components
- Add animations.css for transitions and animation effects
---
 website/css/components/animations.css |  89 +++++++
 website/css/components/charts.css     | 286 ++++++++++++++++++++++
 website/css/components/containers.css |  68 ++++++
 website/css/components/progress.css   | 332 ++++++++++++++++++++++++++
 4 files changed, 775 insertions(+)
 create mode 100644 website/css/components/animations.css
 create mode 100644 website/css/components/charts.css
 create mode 100644 website/css/components/containers.css
 create mode 100644 website/css/components/progress.css

diff --git a/website/css/components/animations.css b/website/css/components/animations.css
new file mode 100644
index 000000000..b79b3fe01
--- /dev/null
+++ b/website/css/components/animations.css
@@ -0,0 +1,89 @@
+/* Animations and Transitions */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(1deg); }
+    66% { transform: translateY(-10px) rotate(-1deg); }
+}
+
+@keyframes slideInLeft {
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+@keyframes audioPulse {
+    0% { height: 20px; }
+    100% { height: 40px; }
+}
+
+.floating-card {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Result sections */
+.result-section-hidden {
+    display: none !important;
+}
+
+.result-section-visible {
+    display: block;
+    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.result-section {
+    display: none;
+}
+
+.result-section.show {
+    display: block;
+    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Loading States */
+.loading-spinner {
+    display: none;
+    color: #e2e8f0;
+}
+
+.loading-spinner.show {
+    display: block;
+}
+
+/* Dynamic Layout States */
+#inputLayout {
+    transition: all 0.5s ease-in-out;
+}
+
+#resultsLayout {
+    transition: all 0.5s ease-in-out;
+}
+
+#titleWithFlow {
+    transition: all 0.3s ease-in-out;
+}
+
+/* Enhanced transitions for responsive changes */
+@media (prefers-reduced-motion: no-preference) {
+    #titleWithFlow,
+    #inputLayout,
+    #resultsLayout {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+}
diff --git a/website/css/components/charts.css b/website/css/components/charts.css
new file mode 100644
index 000000000..f14319845
--- /dev/null
+++ b/website/css/components/charts.css
@@ -0,0 +1,286 @@
+/* Chart and Visualization Components */
+.emotion-chart-container, .summary-chart-container {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    border-radius: 16px;
+    padding: 25px;
+    margin: 20px 0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.emotion-chart-container::before, .summary-chart-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
+}
+
+.chart-header {
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+.chart-title {
+    color: #fbbf24;
+    font-weight: 700;
+    margin-bottom: 8px;
+    font-size: 1.25rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.chart-subtitle {
+    color: #cbd5e1;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.emotion-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.emotion-bar {
+    margin-bottom: 20px;
+    animation: slideInLeft 0.8s ease-out forwards;
+    opacity: 0;
+    transform: translateX(-30px);
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    display: block;
+    visibility: visible;
+}
+
+.emotion-bar:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.emotion-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    align-items: center;
+}
+
+.emotion-name {
+    font-weight: 700;
+    color: #f1f5f9;
+    text-transform: capitalize;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+}
+
+.emotion-percentage {
+    color: #a855f7;
+    font-weight: 700;
+    font-size: 1.1rem;
+    background: rgba(168, 85, 247, 0.1);
+    padding: 4px 12px;
+    border-radius: 20px;
+    border: 1px solid rgba(168, 85, 247, 0.3);
+}
+
+.emotion-bar-bg {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 15px;
+    height: 16px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.emotion-bar-fill {
+    height: 100%;
+    border-radius: 15px;
+    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.emotion-bar-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 3s infinite;
+}
+
+.summary-stats {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 25px;
+    gap: 20px;
+}
+
+.stat-item {
+    text-align: center;
+    flex: 1;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+}
+
+.stat-item.highlight {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
+    border: 2px solid rgba(139, 92, 246, 0.4);
+    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
+}
+
+.stat-value {
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: #fbbf24;
+    margin-bottom: 8px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item.highlight .stat-value {
+    color: #c084fc;
+    font-size: 2rem;
+}
+
+.stat-label {
+    font-size: 0.8rem;
+    color: #cbd5e1;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.summary-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.summary-bar {
+    margin-bottom: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.summary-bar:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-1px);
+}
+
+.bar-label {
+    font-weight: 700;
+    color: #f1f5f9;
+    margin-bottom: 12px;
+    font-size: 1rem;
+}
+
+.bar-bg {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    height: 24px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.bar-fill {
+    height: 100%;
+    border-radius: 12px;
+    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.bar-fill.original {
+    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
+}
+
+.bar-fill.summary {
+    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
+}
+
+.bar-value {
+    text-align: right;
+    font-size: 0.9rem;
+    color: #cbd5e1;
+    margin-top: 8px;
+    font-weight: 600;
+}
+
+.chart-footer {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #94a3b8;
+    font-size: 0.85rem;
+}
+
+/* Emotion Badges */
+.emotion-badge {
+    display: block;
+    padding: 8px 16px;
+    margin: 4px 0;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: var(--transition-smooth);
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.emotion-badge:hover {
+    transform: scale(1.05);
+}
+
+/* Emotion Badges Container */
+#emotionBadges {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+/* Audio Visualizer */
+.audio-visualizer {
+    width: 100%;
+    height: 60px;
+    background: var(--glass-bg);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 0;
+}
+
+.audio-bar {
+    width: 4px;
+    height: 20px;
+    background: var(--primary-color);
+    margin: 0 2px;
+    border-radius: 2px;
+    animation: audioPulse 0.5s ease-in-out infinite alternate;
+}
diff --git a/website/css/components/containers.css b/website/css/components/containers.css
new file mode 100644
index 000000000..45e519a9b
--- /dev/null
+++ b/website/css/components/containers.css
@@ -0,0 +1,68 @@
+/* Demo Container - Consolidated */
+.demo-container {
+    background: linear-gradient(135deg,
+        rgba(139, 92, 246, 0.12) 0%,
+        rgba(15, 15, 35, 0.95) 50%,
+        rgba(168, 85, 247, 0.08) 100%);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(139, 92, 246, 0.2);
+    border-radius: 20px;
+    box-shadow:
+        var(--shadow-glass),
+        0 0 40px rgba(139, 92, 246, 0.1);
+    padding: 3rem;
+    margin: 2rem 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    color: #e2e8f0;
+}
+
+/* Scoped to demo container only */
+.demo-container .text-dark {
+    color: #e2e8f0;
+}
+
+/* Hero Section */
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
+    animation: float 6s ease-in-out infinite;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+/* Ensure all text is visible - scoped to comprehensive demo */
+.comprehensive-demo .text-muted {
+    color: #cbd5e1 !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .demo-container {
+        padding: 30px 20px;
+        margin: -50px 15px 30px 15px;
+    }
+
+    .hero-section {
+        padding: 80px 0;
+    }
+}
+
+@media (max-width: 576px) {
+    .demo-container {
+        padding: 20px 15px;
+        margin: -50px 10px 20px 10px;
+    }
+}
diff --git a/website/css/components/progress.css b/website/css/components/progress.css
new file mode 100644
index 000000000..3d89120ba
--- /dev/null
+++ b/website/css/components/progress.css
@@ -0,0 +1,332 @@
+/* Progress Steps and Pipelines */
+.progress-step {
+    display: flex;
+    align-items: center;
+}
+
+/* Vertical Progress Pipeline */
+.progress-pipeline-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px; /* Reduced from 20px for tighter spacing */
+    padding: 25px 15px; /* Reduced padding */
+    background: var(--glass-bg);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: 450px; /* Reduced height */
+    justify-content: center;
+    width: 100%;
+}
+
+.progress-step-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    padding: 16px 20px; /* Increased padding for better touch targets */
+    border-radius: 15px;
+    transition: var(--transition-smooth);
+    min-width: 160px; /* Increased width */
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 4px; /* Reduced margin */
+    width: 100%; /* Full width for better appearance */
+}
+
+.progress-step-vertical .step-icon-small {
+    width: 24px !important; /* Increased from 18px */
+    height: 24px !important; /* Increased from 18px */
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px; /* Increased margin */
+    margin-bottom: 0;
+    font-size: 0.8rem !important; /* Increased from 0.6rem */
+    transition: var(--transition-smooth);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #e2e8f0 !important;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    flex-shrink: 0;
+}
+
+.progress-step-vertical .step-label {
+    font-size: 0.9rem; /* Increased from 0.7rem */
+    font-weight: 600;
+    color: #e2e8f0;
+    transition: var(--transition-smooth);
+    text-align: left; /* Changed from center to left for better alignment */
+    flex: 1; /* Take remaining space */
+}
+
+.progress-step-vertical.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    box-shadow: var(--shadow-glow);
+}
+
+.progress-step-vertical.completed .step-icon-small {
+    background: var(--success-color) !important;
+    color: white !important;
+}
+
+.progress-step-vertical.error .step-icon-small {
+    background: var(--error-color) !important;
+    color: white !important;
+}
+
+.pipeline-arrow-vertical {
+    font-size: 1.2rem; /* Slightly smaller */
+    color: #94a3b8; /* Better color */
+    margin: 2px 0; /* Reduced margin */
+    opacity: 0.7; /* Subtle appearance */
+    transition: var(--transition-smooth);
+}
+
+.progress-step.completed {
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.progress-step.active {
+    background: var(--primary-gradient);
+    color: white;
+}
+
+.step-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+    font-size: 14px;
+}
+
+.step-icon.completed {
+    background: #10b981;
+    color: white;
+}
+
+.step-icon.active {
+    background: white;
+    color: var(--primary-color);
+}
+
+.step-icon.pending {
+    background: rgba(139, 92, 246, 0.2);
+    color: #94a3b8;
+}
+
+/* Progress Pipeline - New Compact Horizontal Design */
+.progress-pipeline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: var(--glass-bg);
+    border-radius: 15px;
+    border: 1px solid var(--glass-border);
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+/* Horizontal Progress Pipeline for Title Flow */
+.progress-pipeline-horizontal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(139, 92, 246, 0.05);
+    border-radius: 25px;
+    border: 1px solid rgba(139, 92, 246, 0.1);
+    backdrop-filter: blur(5px);
+    box-shadow: none;
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.progress-pipeline-horizontal:hover {
+    opacity: 1;
+    background: rgba(139, 92, 246, 0.08);
+}
+
+.progress-step-horizontal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-width: 60px;
+    transition: var(--transition-smooth);
+}
+
+.progress-step-horizontal .step-icon-small {
+    width: 18px !important;
+    height: 18px !important;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.25rem;
+    font-size: 0.7rem !important;
+    transition: var(--transition-smooth);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #cbd5e1 !important;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+}
+
+.progress-step-horizontal .step-label {
+    font-size: 0.65rem;
+    font-weight: 500;
+    color: #94a3b8;
+    white-space: nowrap;
+    transition: var(--transition-smooth);
+}
+
+.progress-step-horizontal.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    transform: scale(1.1);
+}
+
+.progress-step-horizontal.active .step-label {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.progress-step-horizontal.completed .step-icon-small {
+    background: #10b981 !important;
+    color: white !important;
+}
+
+.progress-step-horizontal.completed .step-label {
+    color: #10b981;
+}
+
+.pipeline-arrow {
+    font-size: 0.8rem;
+    color: #64748b;
+    font-weight: normal;
+    user-select: none;
+    opacity: 0.6;
+}
+
+/* Enhanced Loading Step Styles */
+.process-step {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.process-step.active {
+    background: rgba(139, 92, 246, 0.15);
+    border-color: rgba(139, 92, 246, 0.4);
+    transform: scale(1.02);
+}
+
+.process-step.completed {
+    background: rgba(16, 185, 129, 0.15);
+    border-color: rgba(16, 185, 129, 0.4);
+}
+
+.step-text {
+    font-weight: 600;
+    color: #e2e8f0;
+    font-size: 0.9rem;
+    margin-bottom: 8px;
+}
+
+.step-status {
+    font-size: 0.8rem;
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+.process-step.active .step-status {
+    color: #a855f7;
+}
+
+.process-step.completed .step-status {
+    color: #10b981;
+}
+
+/* Processing Information Icons */
+.processing-info i {
+    font-size: 1.5rem !important;
+    margin-bottom: 8px;
+}
+
+/* Responsive Design for Progress Pipeline */
+@media (max-width: 768px) {
+    .progress-pipeline {
+        flex-direction: column;
+        gap: 1.5rem;
+        padding: 2rem 1rem;
+    }
+
+    .pipeline-arrow {
+        transform: rotate(90deg);
+        font-size: 1.5rem;
+    }
+
+    .progress-step-horizontal {
+        min-width: 100px;
+    }
+
+    .step-label {
+        font-size: 0.8rem;
+    }
+
+    .progress-pipeline-horizontal {
+        gap: 0.25rem;
+        padding: 0.4rem 0.6rem;
+        justify-content: center;
+    }
+
+    .progress-step-horizontal {
+        min-width: 40px;
+    }
+
+    .progress-step-horizontal .step-icon-small {
+        width: 16px !important;
+        height: 16px !important;
+        font-size: 0.6rem !important;
+    }
+
+    .progress-step-horizontal .step-label {
+        font-size: 0.5rem;
+    }
+
+    .pipeline-arrow {
+        font-size: 0.7rem;
+    }
+}
+
+@media (max-width: 1200px) {
+    .progress-pipeline-horizontal {
+        gap: 0.5rem;
+        padding: 0.8rem 1rem;
+    }
+
+    .progress-pipeline-horizontal .step-label {
+        font-size: 0.7rem;
+    }
+
+    #processingInfoSidebar {
+        margin-top: 2rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .progress-pipeline-horizontal {
+        padding: 0.5rem;
+    }
+}

From 1b8466fd09f42bc549caab16d086d21de6f75c5f Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 12:26:03 +0200
Subject: [PATCH 08/15] feat: add final component CSS files and documentation

- Add messages.css for error and success message styling
- Add responsive.css for media queries and responsive design
- Add comprehensive README.md explaining the modular CSS architecture
---
 website/css/README.md                 | 59 +++++++++++++++++++++++++++
 website/css/components/messages.css   | 32 +++++++++++++++
 website/css/components/responsive.css | 55 +++++++++++++++++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 website/css/README.md
 create mode 100644 website/css/components/messages.css
 create mode 100644 website/css/components/responsive.css

diff --git a/website/css/README.md b/website/css/README.md
new file mode 100644
index 000000000..3ce7d3ea9
--- /dev/null
+++ b/website/css/README.md
@@ -0,0 +1,59 @@
+# CSS Architecture - Modular Component Structure
+
+This directory contains a modular CSS architecture that addresses code review feedback
+for improved maintainability and performance.
+
+## Structure
+
+### Main Files
+
+- `main.css` - Main entry point that imports all component stylesheets
+- `comprehensive-demo.css` - Original monolithic file (kept for reference)
+
+### Component Files (`components/` directory)
+
+- `variables.css` - CSS custom properties and design system variables
+- `base.css` - Base styles, typography, and global elements
+- `navigation.css` - Navigation bar and menu styles
+- `buttons.css` - Button components and interactive elements
+- `forms.css` - Form controls and input styling
+- `containers.css` - Layout containers and hero sections
+- `cards.css` - Feature cards and content cards
+- `progress.css` - Progress indicators and pipeline components
+- `charts.css` - Data visualization and chart components
+- `messages.css` - Error and success message styling
+- `animations.css` - Keyframes, transitions, and animation effects
+- `responsive.css` - Media queries and responsive design rules
+
+## Benefits
+
+1. **Improved Maintainability**: Each component is isolated and easier to modify
+2. **Better Performance**: Mobile-specific optimizations (e.g., disabled
+   `background-attachment: fixed`)
+3. **Reduced Redundancy**: Consolidated duplicate rules and eliminated conflicts
+4. **Enhanced Readability**: Logical organization makes code easier to understand
+5. **Scalability**: Easy to add new components without affecting existing styles
+
+## Usage
+
+Simply include `main.css` in your HTML:
+
+```html
+<link href="css/main.css" rel="stylesheet" />
+```
+
+The main.css file automatically imports all component stylesheets in the correct order.
+
+## Performance Optimizations
+
+- Mobile devices use `background-attachment: scroll` instead of `fixed` for better
+  performance
+- Consolidated duplicate CSS rules to reduce file size
+- Optimized favicon.ico for better loading performance
+- Modular structure allows for better caching strategies
+
+## Browser Support
+
+- Modern browsers with CSS custom properties support
+- Graceful degradation for older browsers
+- Mobile-first responsive design approach
diff --git a/website/css/components/messages.css b/website/css/components/messages.css
new file mode 100644
index 000000000..0492e3da2
--- /dev/null
+++ b/website/css/components/messages.css
@@ -0,0 +1,32 @@
+/* Error and Success Messages */
+.error-message {
+    color: #ef4444;
+    font-size: 0.875rem;
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 8px;
+    display: none;
+}
+
+.error-message.show {
+    display: block;
+    animation: fadeInUp 0.3s ease-out;
+}
+
+.success-message {
+    color: #10b981;
+    font-size: 0.875rem;
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    border-radius: 8px;
+    display: none;
+}
+
+.success-message.show {
+    display: block;
+    animation: fadeInUp 0.3s ease-out;
+}
diff --git a/website/css/components/responsive.css b/website/css/components/responsive.css
new file mode 100644
index 000000000..1999414d0
--- /dev/null
+++ b/website/css/components/responsive.css
@@ -0,0 +1,55 @@
+/* Responsive Design and Media Queries */
+
+/* Debug section responsive behavior */
+@media (max-width: 992px) {
+    #debugTestSection {
+        margin-top: 1rem;
+    }
+}
+
+/* Stack title and flow vertically on mobile */
+@media (max-width: 768px) {
+    #titleWithFlow .d-flex {
+        flex-direction: column;
+        gap: 0.75rem;
+        text-align: center;
+    }
+
+    /* Stack buttons vertically on mobile */
+    .d-flex.gap-3.justify-content-center {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem !important;
+    }
+
+    /* Full width input on mobile */
+    #textInput {
+        min-height: 180px !important;
+        padding: 1rem;
+    }
+
+    /* Compact processing info on mobile */
+    #processingInfoSidebar .bg-dark {
+        padding: 0.5rem !important;
+    }
+
+    /* Results layout adjustments */
+    #resultsLayout .col-lg-8,
+    #resultsLayout .col-lg-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    /* Full width input on mobile */
+    #textInput {
+        min-height: 160px !important;
+        font-size: 14px;
+    }
+}
+
+/* Debug Test Section Toggleable */
+#debugTestSection.hidden {
+    display: none !important;
+}

From 83b57c01b63bf217f26c927664eb5b7ac49bc330 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sat, 27 Sep 2025 23:26:23 +0200
Subject: [PATCH 09/15] feat: add UI System Components (PR #201-B) - layout &
 notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🏰 Fortress-Compliant PR (5/5 files) - UI System Components

This PR implements the core UI system with layout management and
notification functionality, including comprehensive testing.

### Files Added (5 files):
- website/js/layout-manager.js - Responsive layout and UI state management
- website/js/notification-manager.js - Toast notification system with accessibility
- website/test/layout-manager.test.js - Unit tests for layout management
- website/test/notification-manager.test.js - Unit tests for notifications
- website/test/setup.js - Testing framework setup and utilities

### Key Features:
✅ **Layout Management**: Responsive UI state coordination with dependency injection
✅ **Notification System**: Toast notifications with accessibility support
✅ **State Management**: Processing guards to prevent concurrent operations
✅ **Error Handling**: Comprehensive error management and user feedback
✅ **Testing Coverage**: Unit tests for all core functionality
✅ **Accessibility**: ARIA labels, screen reader support, keyboard navigation

### Fortress Strategy:
This is **PR #201-B** of the three-part Hybrid Fortress split:
- **PR #201-A** (merged): Platform Foundation (4 files) ✅
- **PR #201-B** (this PR): UI System Components (5 files) ←
- **PR #201-C** (next): Audio & Integration (4 files)

### Architecture Design:
- **Dependency Injection**: Clean separation of concerns through DI pattern
- **Contract-Based**: Clear APIs between layout-manager and notification-manager
- **Modular**: Each component can be tested and used independently
- **Extensible**: Easy to add new UI components following the same patterns

### Contract Validation:
- [ ] Layout manager initializes with dependency injection
- [ ] Notification manager creates and manages toast notifications
- [ ] Both components work together without tight coupling
- [ ] All tests pass with proper mocking of dependencies
- [ ] Accessibility features function correctly

### Dependencies:
- **Requires**: PR #201-A (Platform Foundation) - for testing infrastructure
- **Enables**: PR #201-C (Audio & Integration) - provides UI system
- **Merge Order**: After #201-A, before #201-C

**🔧 Technical Details:**
- ES6 modules with clean import/export patterns
- Comprehensive error handling and logging
- Bootstrap CSS framework integration
- jsdom testing environment for DOM manipulation
- Accessibility-first design with ARIA compliance

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/js/layout-manager.js              | 474 ++++++++++++++++++++++
 website/js/notification-manager.js        | 233 +++++++++++
 website/test/layout-manager.test.js       | 144 +++++++
 website/test/notification-manager.test.js | 164 ++++++++
 website/test/setup.js                     |  49 +++
 5 files changed, 1064 insertions(+)
 create mode 100644 website/js/layout-manager.js
 create mode 100644 website/js/notification-manager.js
 create mode 100644 website/test/layout-manager.test.js
 create mode 100644 website/test/notification-manager.test.js
 create mode 100644 website/test/setup.js

diff --git a/website/js/layout-manager.js b/website/js/layout-manager.js
new file mode 100644
index 000000000..cbe64d16d
--- /dev/null
+++ b/website/js/layout-manager.js
@@ -0,0 +1,474 @@
+/**
+ * Layout State Management Functions
+ * Handles transitions between different UI states and progress tracking
+ */
+
+// Layout State Management Functions
+const LayoutManager = {
+    currentState: 'initial', // initial, processing, results
+    isProcessing: false, // Processing guard to prevent concurrent operations
+    activeRequests: new Set(), // Track active API requests
+    processingStartTime: null, // Track when processing started
+    maxProcessingTime: 120000, // Maximum processing time (2 minutes) before auto-reset
+
+    // Dependencies (injected for testability and loose coupling)
+    dependencies: {
+        clearAllResultContent: null, // Function to clear result content
+        updateElement: null, // Function to update element content
+        textInput: null, // DOM element reference
+        resultsLayout: null, // DOM element reference
+        inputLayout: null, // DOM element reference
+        inlineMessages: null // Selector for inline messages
+    },
+
+    // Initialize with dependencies (dependency injection)
+    init(dependencies = {}) {
+        console.log('🔧 LayoutManager: Initializing with dependencies...');
+
+        // Set up dependencies with fallbacks to global scope for backward compatibility
+        this.dependencies.clearAllResultContent = dependencies.clearAllResultContent || (typeof clearAllResultContent === 'function' ? clearAllResultContent : null);
+        this.dependencies.updateElement = dependencies.updateElement || (typeof updateElement === 'function' ? updateElement : null);
+        this.dependencies.textInput = dependencies.textInput || document.getElementById('textInput');
+        this.dependencies.resultsLayout = dependencies.resultsLayout || document.getElementById('resultsLayout');
+        this.dependencies.inputLayout = dependencies.inputLayout || document.getElementById('inputLayout');
+        this.dependencies.inlineMessages = dependencies.inlineMessages || '.inline-message';
+
+        console.log('✅ LayoutManager: Dependencies initialized');
+    },
+
+    // Safety reset to ensure clean state on page load
+    resetProcessingState() {
+        console.log('🔄 Safety reset: clearing processing state...');
+        this.isProcessing = false;
+        this.activeRequests.clear();
+        this.currentState = 'initial';
+    },
+
+    // Emergency reset if processing gets stuck (with timeout)
+    emergencyReset() {
+        console.warn('🚨 Emergency reset: processing state appears stuck, forcing reset...');
+        this.isProcessing = false;
+        this.activeRequests.clear();
+        this.currentState = 'initial';
+        // Also clear any UI elements that might be stuck
+        if (typeof clearAllResultContent === 'function') {
+            clearAllResultContent();
+        }
+    },
+
+    // Check if processing is allowed (prevents concurrent operations)
+    canStartProcessing() {
+        return !this.isProcessing;
+    },
+
+    // Start processing (sets guard)
+    startProcessing() {
+        if (this.isProcessing) {
+            // Guard against null processingStartTime to prevent NaN calculations
+            if (this.processingStartTime == null) {
+                console.warn('⚠️ Missing processingStartTime; forcing reset...');
+                this.forceResetProcessing();
+                return false;
+            }
+            // Check if processing has been stuck for too long
+            const timeElapsed = Date.now() - this.processingStartTime;
+            if (timeElapsed > this.maxProcessingTime) {
+                console.warn(`⚠️ Processing stuck for ${timeElapsed/1000}s, forcing reset...`);
+                this.forceResetProcessing();
+            } else {
+                console.warn('⚠️ Processing already in progress, ignoring request');
+                console.warn('⚠️ Current state:', this.currentState);
+                console.warn('⚠️ Active requests:', this.activeRequests.size);
+                console.warn(`⚠️ Time elapsed: ${timeElapsed/1000}s`);
+                return false;
+            }
+        }
+        this.isProcessing = true;
+        this.processingStartTime = Date.now();
+        this.activeRequests.clear();
+        console.log('🚀 Processing started - locked for concurrent operations');
+        return true;
+    },
+
+    // End processing (removes guard)
+    endProcessing() {
+        this.isProcessing = false;
+        this.processingStartTime = null;
+        this.activeRequests.clear();
+        console.log('✅ Processing completed - ready for new operations');
+    },
+
+    // Cancel all active requests
+    cancelActiveRequests() {
+        console.log(`🚫 Cancelling ${this.activeRequests.size} active requests...`);
+        for (const controller of this.activeRequests) {
+            if (controller && typeof controller.abort === 'function') {
+                controller.abort();
+            }
+        }
+        this.activeRequests.clear();
+    },
+
+    // Add request controller for tracking
+    addActiveRequest(controller) {
+        if (controller) {
+            this.activeRequests.add(controller);
+            console.log(`📡 Added request to tracking (${this.activeRequests.size} active)`);
+        }
+    },
+
+    // Remove request controller
+    removeActiveRequest(controller) {
+        if (this.activeRequests.delete(controller)) {
+            console.log(`📡 Removed request from tracking (${this.activeRequests.size} remaining)`);
+        }
+    },
+
+    // Force cancel all active requests immediately
+    forceResetProcessing() {
+        console.warn('🚨 Force resetting processing state and cancelling all requests...');
+        this.cancelActiveRequests();
+        this.isProcessing = false;
+        this.processingStartTime = null;
+        this.currentState = 'initial';
+        console.log('✅ Force reset completed');
+    },
+
+    // Transition to processing state
+    showProcessingState() {
+        console.log('🔄 Transitioning to processing state...');
+
+        // Check if processing is allowed
+        if (!this.startProcessing()) {
+            console.error('❌ Cannot start processing - operation already in progress');
+            console.error('💡 Suggestion: Check if previous processing completed or call resetToInitialState()');
+            console.error('🔍 Current state:', this.currentState);
+            console.error('🔍 Active requests:', this.activeRequests.size);
+            return false; // Fail fast to expose underlying issues
+        }
+
+        this.currentState = 'processing';
+
+        // IMMEDIATELY clear all result content to prevent remnants during processing
+        if (typeof clearAllResultContent === 'function') {
+            clearAllResultContent();
+        }
+
+        // Hide input layout with smooth transition
+        const inputLayout = document.getElementById('inputLayout');
+        if (inputLayout) {
+            inputLayout.style.opacity = '0';
+            inputLayout.style.transform = 'translateY(-20px)';
+
+            setTimeout(() => {
+                inputLayout.classList.add('d-none');
+            }, 300);
+        }
+
+        // Show loading in results area
+        this.showLoadingState();
+    },
+
+    // Transition to results state
+    showResultsState() {
+        console.log('✅ Transitioning to results state...');
+        this.currentState = 'results';
+
+        // End processing since we've reached results
+        this.endProcessing();
+
+        // Hide loading
+        this.hideLoadingState();
+
+        // Show results layout with smooth transition
+        const resultsLayout = document.getElementById('resultsLayout');
+        if (resultsLayout) {
+            resultsLayout.classList.remove('d-none');
+            resultsLayout.style.opacity = '0';
+            resultsLayout.style.transform = 'translateY(20px)';
+
+            // Animate in
+            setTimeout(() => {
+                resultsLayout.style.opacity = '1';
+                resultsLayout.style.transform = 'translateY(0)';
+            }, 100);
+        }
+
+        // Sync processing info data
+        this.syncProcessingInfo();
+    },
+
+    // Return to initial state
+    resetToInitialState() {
+        console.log('🔄 Resetting to initial state...');
+
+        // Cancel any active requests first
+        this.cancelActiveRequests();
+
+        // Force end processing to remove lock (no matter what state we're in)
+        this.isProcessing = false;
+        this.processingStartTime = null;
+        this.activeRequests.clear();
+        this.currentState = 'initial';
+        console.log('🔧 Processing state forcibly reset');
+
+        // IMMEDIATELY clear all result content to prevent remnants
+        if (this.dependencies.clearAllResultContent) {
+            this.dependencies.clearAllResultContent();
+        }
+
+        // Clear text input (using injected dependency)
+        if (this.dependencies.textInput) {
+            this.dependencies.textInput.value = '';
+        }
+
+        // Clear any inline messages (using injected dependency)
+        const existingMessages = document.querySelectorAll(this.dependencies.inlineMessages);
+        existingMessages.forEach(msg => msg.remove());
+
+        // Reset Processing Information values (using injected dependency)
+        if (this.dependencies.updateElement) {
+            this.dependencies.updateElement('totalTimeCompact', '-');
+            this.dependencies.updateElement('processingStatusCompact', 'Ready');
+            this.dependencies.updateElement('modelsUsedCompact', '-');
+            this.dependencies.updateElement('avgConfidenceCompact', '-');
+        }
+
+        // Hide results layout (using injected dependency)
+        if (this.dependencies.resultsLayout) {
+            this.dependencies.resultsLayout.style.opacity = '0';
+            this.dependencies.resultsLayout.style.transform = 'translateY(20px)';
+
+            setTimeout(() => {
+                this.dependencies.resultsLayout.classList.add('d-none');
+            }, 300);
+        }
+
+        // Show input layout immediately (using injected dependency)
+        if (this.dependencies.inputLayout) {
+            console.log('🔄 LayoutManager: Showing input layout');
+            this.dependencies.inputLayout.classList.remove('d-none'); // Remove Bootstrap's hide class
+            this.dependencies.inputLayout.style.opacity = '1';
+            this.dependencies.inputLayout.style.transform = 'translateY(0)';
+            console.log('✅ LayoutManager: Input layout should be visible');
+        } else {
+            console.error('❌ LayoutManager: inputLayout element not found');
+        }
+
+        // Hide loading
+        this.hideLoadingState();
+
+        // Reset progress steps
+        this.resetProgressSteps();
+    },
+
+    // Show loading state in results area
+    showLoadingState() {
+        if (this.dependencies.resultsLayout) {
+            this.dependencies.resultsLayout.classList.remove('d-none');
+            this.dependencies.resultsLayout.style.opacity = '1';
+
+            // Show only loading spinner initially
+            const loadingSection = document.getElementById('loadingSection');
+            if (loadingSection) {
+                loadingSection.style.display = 'block';
+            }
+        }
+    },
+
+    // Hide loading state
+    hideLoadingState() {
+        const loadingSection = document.getElementById('loadingSection');
+        if (loadingSection) {
+            loadingSection.style.display = 'none';
+        }
+    },
+
+    // Sync processing info between original and compact versions
+    syncProcessingInfo() {
+        const mappings = [
+            ['totalTime', 'totalTimeCompact'],
+            ['processingStatus', 'processingStatusCompact'],
+            ['modelsUsed', 'modelsUsedCompact'],
+            ['avgConfidence', 'avgConfidenceCompact']
+        ];
+
+        mappings.forEach(([original, compact]) => {
+            const originalEl = document.getElementById(original);
+            const compactEl = document.getElementById(compact);
+
+            if (originalEl && compactEl) {
+                compactEl.textContent = originalEl.textContent;
+            }
+        });
+    },
+
+    // Update progress steps
+    updateProgressStep(stepNumber, state) {
+        // Update both horizontal and vertical progress indicators
+        const stepElement = document.getElementById(`step${stepNumber}`);
+        const stepIcon = document.getElementById(`step${stepNumber}-icon`);
+
+        if (stepElement && stepIcon) {
+            // Remove existing state classes
+            stepElement.classList.remove('pending', 'active', 'completed', 'error');
+            stepIcon.classList.remove('pending', 'active', 'completed', 'error');
+
+            // Add new state
+            stepElement.classList.add(state);
+            stepIcon.classList.add(state);
+        } else {
+            // Add warning for missing elements to improve debuggability
+            if (!stepElement) {
+                console.warn(`Progress step element #step${stepNumber} not found`);
+            }
+            if (!stepIcon) {
+                console.warn(`Progress step icon #step${stepNumber}-icon not found`);
+            }
+        }
+    },
+
+    // Reset progress steps to initial state
+    resetProgressSteps() {
+        for (let i = 1; i <= 4; i++) {
+            this.updateProgressStep(i, 'pending');
+        }
+    },
+
+    // Toggle debug section visibility
+    toggleDebugSection(show = null) {
+        const debugSection = document.getElementById('debugTestSection');
+        const toggleBtn = document.getElementById('debugToggleBtn');
+
+        if (debugSection) {
+            let isVisible;
+
+            if (show === null) {
+                // Toggle current state
+                isVisible = !debugSection.classList.contains('d-none');
+                if (isVisible) {
+                    debugSection.classList.add('d-none');
+                } else {
+                    debugSection.classList.remove('d-none');
+                }
+                isVisible = !isVisible;
+            } else if (show) {
+                debugSection.classList.remove('d-none');
+                isVisible = true;
+            } else {
+                debugSection.classList.add('d-none');
+                isVisible = false;
+            }
+
+            // Update toggle button text
+            if (toggleBtn) {
+                const icon = toggleBtn.querySelector('.material-icons');
+                const textNode = toggleBtn.lastChild;
+
+                if (isVisible) {
+                    textNode.textContent = ' Hide Debug';
+                    icon.textContent = 'bug_report';
+                    toggleBtn.classList.remove('btn-outline-secondary');
+                    toggleBtn.classList.add('btn-warning');
+                } else {
+                    textNode.textContent = ' Show Debug';
+                    icon.textContent = 'bug_report';
+                    toggleBtn.classList.remove('btn-warning');
+                    toggleBtn.classList.add('btn-outline-secondary');
+                }
+            }
+        }
+    }
+};
+
+// Enhanced processing function with state management
+window.processTextWithStateManagement = function() {
+    console.log('🚀 Processing with enhanced state management...');
+
+    // Check if processing is allowed
+    if (!LayoutManager.canStartProcessing()) {
+        console.warn('⚠️ Processing blocked - operation already in progress');
+        return;
+    }
+
+    // Start processing (sets guard) - don't call showProcessingState() here
+    if (!LayoutManager.startProcessing()) {
+        console.error('❌ Failed to start processing - operation already in progress');
+        return;
+    }
+
+    // Set processing state and update UI
+    LayoutManager.currentState = 'processing';
+
+    // IMMEDIATELY clear all result content to prevent remnants during processing
+    if (typeof clearAllResultContent === 'function') {
+        clearAllResultContent();
+    }
+
+        // Hide input layout with smooth transition
+        const inputLayout = document.getElementById('inputLayout');
+        if (inputLayout) {
+            inputLayout.style.opacity = '0';
+            setTimeout(() => {
+                inputLayout.classList.add('d-none'); // Use CSS class instead of direct style manipulation
+            }, 300);
+        }
+
+    // Show processing layout
+    const processingLayout = document.getElementById('processingLayout');
+    if (processingLayout) {
+        processingLayout.classList.remove('d-none'); // Use CSS class instead of direct style manipulation
+        processingLayout.style.opacity = '0';
+        setTimeout(() => {
+            processingLayout.style.opacity = '1';
+        }, 50);
+    }
+
+    // Update progress steps
+    LayoutManager.updateProgressStep(1, 'active');
+
+    // Call the original processing function
+    if (typeof processText === 'function') {
+        // Set up a promise to handle the transition to results
+        const originalFunc = processText;
+        const maybe = processText(true);  // Skip state check since we handle it here
+        const onDone = () => {
+            // Minimal delay to ensure smooth UI transition after processing completes
+            setTimeout(() => {
+                LayoutManager.showResultsState();
+                LayoutManager.updateProgressStep(4, 'completed');
+            }, 50); // Reduced from 1000ms to 50ms for better perceived performance
+        };
+        if (maybe && typeof maybe.then === 'function') {
+            maybe.then(onDone).catch((error) => {
+                console.error('Processing error:', error);
+                LayoutManager.resetToInitialState();
+            });
+        } else {
+            onDone();
+        }
+    }
+};
+
+// Enhanced clear function with state management
+window.clearAllWithStateManagement = function() {
+    console.log('🧹 Clearing with enhanced state management...');
+
+    // Reset to initial state using LayoutManager (this should handle everything)
+    LayoutManager.resetToInitialState();
+
+    // Call original clear function if available
+    if (typeof clearAll === 'function') {
+        clearAll();
+    }
+};
+
+// Initialize LayoutManager when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('🏗️ Initializing LayoutManager...');
+    LayoutManager.init(); // Initialize with default dependencies (falls back to global scope)
+    console.log('✅ LayoutManager initialized');
+});
+
+// Make LayoutManager globally available
+window.LayoutManager = LayoutManager;
diff --git a/website/js/notification-manager.js b/website/js/notification-manager.js
new file mode 100644
index 000000000..3f30e907a
--- /dev/null
+++ b/website/js/notification-manager.js
@@ -0,0 +1,233 @@
+/**
+ * Notification Manager
+ * Handles toast notifications and user feedback messages
+ * Provides a clean separation of UI concerns from business logic
+ */
+
+class NotificationManager {
+    constructor() {
+        this.activeToasts = new Set();
+        this.maxToasts = 3; // Limit concurrent toasts
+
+        // Create or reuse a container for proper toast stacking
+        this.container = document.getElementById('toastContainer') || (() => {
+            const c = document.createElement('div');
+            c.id = 'toastContainer';
+            c.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                z-index: 10000;
+                pointer-events: none;
+            `;
+            document.body.appendChild(c);
+            return c;
+        })();
+    }
+
+    /**
+     * Show a toast notification
+     * @param {string} message - The message to display
+     * @param {string} type - The notification type ('success', 'error', 'info', 'warning')
+     * @param {number} duration - Duration in milliseconds (default: 3000)
+     */
+    show(message, type = 'info', duration = 3000) {
+        // Limit concurrent toasts
+        if (this.activeToasts.size >= this.maxToasts) {
+            console.warn('⚠️ Too many active toasts, ignoring new notification');
+            return;
+        }
+
+        // Ensure container exists (recreate if cleaned up)
+        if (!this.container || !this.container.parentNode) {
+            this.container = document.getElementById('toastContainer') || (() => {
+                const c = document.createElement('div');
+                c.id = 'toastContainer';
+                c.style.cssText = `
+                    position: fixed;
+                    top: 20px;
+                    right: 20px;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 10px;
+                    z-index: 10000;
+                    pointer-events: none;
+                `;
+                document.body.appendChild(c);
+                return c;
+            })();
+        }
+
+        // Create toast element
+        const toast = this.createToast(message, type);
+        this.container.appendChild(toast);
+        this.activeToasts.add(toast);
+
+        // Animate in
+        setTimeout(() => {
+            toast.style.opacity = '1';
+            toast.style.transform = 'translateY(0)';
+        }, 10);
+
+        // Auto-remove after duration
+        setTimeout(() => {
+            this.removeToast(toast);
+        }, duration);
+    }
+
+    /**
+     * Show success notification
+     * @param {string} message - The success message
+     * @param {number} duration - Duration in milliseconds
+     */
+    success(message, duration = 3000) {
+        this.show(message, 'success', duration);
+    }
+
+    /**
+     * Show error notification
+     * @param {string} message - The error message
+     * @param {number} duration - Duration in milliseconds
+     */
+    error(message, duration = 5000) {
+        this.show(message, 'error', duration);
+    }
+
+    /**
+     * Show info notification
+     * @param {string} message - The info message
+     * @param {number} duration - Duration in milliseconds
+     */
+    info(message, duration = 3000) {
+        this.show(message, 'info', duration);
+    }
+
+    /**
+     * Show warning notification
+     * @param {string} message - The warning message
+     * @param {number} duration - Duration in milliseconds
+     */
+    warning(message, duration = 4000) {
+        this.show(message, 'warning', duration);
+    }
+
+    /**
+     * Create a toast element
+     * @private
+     */
+    createToast(message, type) {
+        const toast = document.createElement('div');
+        toast.className = `notification-toast toast-${type}`;
+
+        // Add accessibility attributes
+        toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
+        toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
+
+        // Set background colors based on type
+        const colors = {
+            success: '#28a745',
+            error: '#dc3545',
+            info: '#17a2b8',
+            warning: '#ffc107'
+        };
+
+        toast.style.cssText = `
+            position: relative;
+            padding: 12px 20px;
+            border-radius: 6px;
+            color: ${type === 'warning' ? '#212529' : 'white'};
+            font-weight: 500;
+            opacity: 0;
+            transform: translateY(-20px);
+            transition: all 0.3s ease;
+            max-width: 400px;
+            word-wrap: break-word;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            background-color: ${colors[type] || colors.info};
+            pointer-events: auto;
+        `;
+
+        // Add close button
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.setAttribute('aria-label', 'Close notification');
+        closeBtn.textContent = '×';
+        closeBtn.style.cssText = `
+            float: right;
+            margin-left: 10px;
+            cursor: pointer;
+            font-size: 18px;
+            font-weight: bold;
+            opacity: 0.8;
+            background: transparent;
+            border: none;
+            color: inherit;
+        `;
+        closeBtn.addEventListener('click', () => this.removeToast(toast));
+
+        // Add message text
+        const textNode = document.createTextNode(message);
+
+        toast.appendChild(closeBtn);
+        toast.appendChild(textNode);
+
+        return toast;
+    }
+
+    /**
+     * Remove a toast with animation
+     * @private
+     */
+    removeToast(toast) {
+        if (!toast || !this.activeToasts.has(toast)) {
+            return;
+        }
+
+        // Animate out
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateY(-20px)';
+
+        // Remove from DOM after animation
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+            this.activeToasts.delete(toast);
+
+            // Clean up container when no toasts remain
+            if (this.activeToasts.size === 0 && this.container.parentNode) {
+                this.container.parentNode.removeChild(this.container);
+                this.container = null;
+            }
+        }, 300);
+    }
+
+    /**
+     * Clear all active toasts
+     */
+    clearAll() {
+        const toasts = Array.from(this.activeToasts);
+        toasts.forEach(toast => this.removeToast(toast));
+    }
+
+    /**
+     * Get number of active toasts
+     */
+    getActiveCount() {
+        return this.activeToasts.size;
+    }
+}
+
+// Create global instance
+window.NotificationManager = new NotificationManager();
+
+// Legacy compatibility - expose common methods globally
+window.showSuccess = (message) => window.NotificationManager.success(message);
+window.showError = (message) => window.NotificationManager.error(message);
+window.showInfo = (message) => window.NotificationManager.info(message);
+window.showWarning = (message) => window.NotificationManager.warning(message);
+
+console.log('🔔 Notification Manager loaded successfully');
diff --git a/website/test/layout-manager.test.js b/website/test/layout-manager.test.js
new file mode 100644
index 000000000..d1ee36bb4
--- /dev/null
+++ b/website/test/layout-manager.test.js
@@ -0,0 +1,144 @@
+/**
+ * Tests for LayoutManager
+ * Tests the processing state management and null safety fixes
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+describe('LayoutManager', () => {
+  let layoutManager;
+
+  beforeEach(async () => {
+    // Import the LayoutManager object
+    await import('../js/layout-manager.js');
+    layoutManager = window.LayoutManager;
+
+    // Reset to clean state for each test
+    layoutManager.isProcessing = false;
+    layoutManager.processingStartTime = null;
+    layoutManager.activeRequests.clear();
+    layoutManager.currentState = 'initial';
+  });
+
+  describe('Processing State Safety', () => {
+    it('should handle null processingStartTime gracefully', () => {
+      // Simulate corrupted state where isProcessing is true but processingStartTime is null
+      layoutManager.isProcessing = true;
+      layoutManager.processingStartTime = null;
+
+      // Mock forceResetProcessing to track if it's called
+      const forceResetSpy = vi.spyOn(layoutManager, 'forceResetProcessing');
+
+      const result = layoutManager.startProcessing();
+
+      expect(forceResetSpy).toHaveBeenCalled();
+      expect(result).toBe(false);
+    });
+
+    it('should not compute NaN when processingStartTime is null', () => {
+      layoutManager.isProcessing = true;
+      layoutManager.processingStartTime = null;
+
+      // Mock console.warn to capture warnings
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const result = layoutManager.startProcessing();
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith('⚠️ Missing processingStartTime; forcing reset...');
+      expect(result).toBe(false);
+
+      consoleWarnSpy.mockRestore();
+    });
+
+    it('should work normally when processingStartTime is valid', () => {
+      layoutManager.isProcessing = true;
+      layoutManager.processingStartTime = Date.now() - 1000; // 1 second ago
+
+      // Mock forceResetProcessing to ensure it's not called
+      const forceResetSpy = vi.spyOn(layoutManager, 'forceResetProcessing');
+
+      const result = layoutManager.startProcessing();
+
+      // Should not force reset since time hasn't exceeded maxProcessingTime
+      expect(forceResetSpy).not.toHaveBeenCalled();
+      expect(result).toBe(false); // Still false because processing is already in progress
+
+      forceResetSpy.mockRestore();
+    });
+  });
+
+  describe('Processing Timeout Detection', () => {
+    it('should detect and reset stuck processing', () => {
+      layoutManager.isProcessing = true;
+      layoutManager.processingStartTime = Date.now() - (layoutManager.maxProcessingTime + 1000); // Exceeded timeout
+
+      const forceResetSpy = vi.spyOn(layoutManager, 'forceResetProcessing');
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const result = layoutManager.startProcessing();
+
+      expect(forceResetSpy).toHaveBeenCalled();
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Processing stuck for')
+      );
+      // After force reset, processing state is cleared, so startProcessing should succeed
+      expect(result).toBe(true);
+      expect(layoutManager.isProcessing).toBe(true); // Should be set to true after successful start
+
+      forceResetSpy.mockRestore();
+      consoleWarnSpy.mockRestore();
+    });
+  });
+
+  describe('Normal Processing Flow', () => {
+    it('should start processing when not already processing', () => {
+      layoutManager.isProcessing = false;
+
+      const result = layoutManager.startProcessing();
+
+      expect(result).toBe(true);
+      expect(layoutManager.isProcessing).toBe(true);
+      expect(typeof layoutManager.processingStartTime).toBe('number');
+      expect(layoutManager.processingStartTime).toBeGreaterThan(0);
+      expect(layoutManager.activeRequests.size).toBe(0);
+    });
+
+    it('should prevent concurrent processing', () => {
+      // Start first processing
+      layoutManager.startProcessing();
+      expect(layoutManager.isProcessing).toBe(true);
+
+      // Try to start second processing
+      const result = layoutManager.startProcessing();
+      expect(result).toBe(false);
+      expect(layoutManager.isProcessing).toBe(true);
+    });
+
+    it('should end processing correctly', () => {
+      layoutManager.startProcessing();
+      expect(layoutManager.isProcessing).toBe(true);
+
+      layoutManager.endProcessing();
+      expect(layoutManager.isProcessing).toBe(false);
+      expect(layoutManager.processingStartTime).toBe(null);
+      expect(layoutManager.activeRequests.size).toBe(0);
+    });
+  });
+
+  describe('Reset Functionality', () => {
+    it('should force reset processing state', () => {
+      // Set up some state
+      layoutManager.isProcessing = true;
+      layoutManager.processingStartTime = Date.now();
+      layoutManager.activeRequests.add('test-request');
+      layoutManager.currentState = 'processing';
+
+      layoutManager.forceResetProcessing();
+
+      expect(layoutManager.isProcessing).toBe(false);
+      expect(layoutManager.processingStartTime).toBe(null);
+      expect(layoutManager.activeRequests.size).toBe(0);
+      expect(layoutManager.currentState).toBe('initial');
+    });
+  });
+});
diff --git a/website/test/notification-manager.test.js b/website/test/notification-manager.test.js
new file mode 100644
index 000000000..de8e11f7b
--- /dev/null
+++ b/website/test/notification-manager.test.js
@@ -0,0 +1,164 @@
+/**
+ * Tests for NotificationManager
+ * Tests the toast notification system with dependency injection
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+
+describe('NotificationManager', () => {
+  let notificationManager;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    vi.useFakeTimers();
+
+    // Clean up DOM
+    document.body.innerHTML = '';
+
+    // Reset the global instance
+    delete window.NotificationManager;
+
+    // Import the module
+    await import('../js/notification-manager.js');
+
+    // Use the global instance directly (same pattern as LayoutManager tests)
+    notificationManager = window.NotificationManager;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+    // Clean up DOM after each test
+    document.body.innerHTML = '';
+  });
+
+  describe('Initialization', () => {
+    it('should create a NotificationManager instance', () => {
+      expect(notificationManager).toBeInstanceOf(Object);
+      expect(notificationManager.activeToasts).toBeInstanceOf(Set);
+      expect(notificationManager.maxToasts).toBe(3);
+    });
+  });
+
+  describe('Toast Creation', () => {
+    it('should show a success toast', () => {
+      notificationManager.success('Test success message');
+
+      const toast = document.querySelector('.notification-toast');
+      expect(toast).toBeTruthy();
+      expect(toast.textContent).toContain('Test success message');
+      expect(toast.classList.contains('toast-success')).toBe(true);
+    });
+
+    it('should show an error toast with custom duration', () => {
+      notificationManager.error('Test error message', 3000);
+
+      const toast = document.querySelector('.notification-toast');
+      expect(toast).toBeTruthy();
+      expect(toast.classList.contains('toast-error')).toBe(true);
+    });
+
+    it('should limit concurrent toasts', () => {
+      // Mock console.warn
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      // Add max toasts
+      for (let i = 0; i < 3; i++) {
+        notificationManager.show(`Message ${i}`);
+      }
+
+      // Try to add one more
+      notificationManager.show('Overflow message');
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Too many active toasts')
+      );
+
+      consoleWarnSpy.mockRestore();
+    });
+  });
+
+  describe('Toast Removal', () => {
+    it('should schedule toast for auto-removal', () => {
+      notificationManager.show('Test message', 'info', 100);
+
+      const toast = document.querySelector('.notification-toast');
+      expect(toast).toBeTruthy();
+      expect(notificationManager.getActiveCount()).toBe(1);
+
+      // Verify that auto-removal is scheduled (toast exists initially)
+      // The actual timing behavior is tested implicitly through other tests
+      expect(document.querySelector('.notification-toast')).toBeTruthy();
+    });
+
+    it('should remove toast on close button click', () => {
+      notificationManager.show('Test message');
+
+      const closeBtn = document.querySelector('.notification-toast button');
+      expect(closeBtn).toBeTruthy();
+      expect(notificationManager.getActiveCount()).toBe(1);
+
+      // Manually trigger the removeToast method that the button click should call
+      const toast = document.querySelector('.notification-toast');
+      notificationManager.removeToast(toast);
+
+      // Advance timers to complete the removal animation
+      vi.advanceTimersByTime(350);
+
+      expect(notificationManager.getActiveCount()).toBe(0);
+      expect(document.querySelector('.notification-toast')).toBeFalsy();
+    });
+  });
+
+  describe('Toast Management', () => {
+    it('should clear all active toasts', () => {
+      notificationManager.show('Toast 1');
+      notificationManager.show('Toast 2');
+      notificationManager.show('Toast 3');
+
+      expect(notificationManager.getActiveCount()).toBe(3);
+
+      notificationManager.clearAll();
+
+      // Advance timers to complete the removal animation
+      vi.advanceTimersByTime(350);
+
+      expect(notificationManager.getActiveCount()).toBe(0);
+      expect(document.querySelectorAll('.notification-toast').length).toBe(0);
+    });
+
+    it('should track active toast count', () => {
+      expect(notificationManager.getActiveCount()).toBe(0);
+
+      notificationManager.show('Test toast');
+      expect(notificationManager.getActiveCount()).toBe(1);
+
+      notificationManager.clearAll();
+
+      // Advance timers to complete the removal animation
+      vi.advanceTimersByTime(350);
+
+      expect(notificationManager.getActiveCount()).toBe(0);
+    });
+  });
+
+  describe('Legacy API Compatibility', () => {
+    it('should expose legacy global methods', () => {
+      expect(typeof window.showSuccess).toBe('function');
+      expect(typeof window.showError).toBe('function');
+      expect(typeof window.showInfo).toBe('function');
+      expect(typeof window.showWarning).toBe('function');
+    });
+
+    it('should call manager methods through legacy API', () => {
+      const successSpy = vi.spyOn(notificationManager, 'success');
+      const errorSpy = vi.spyOn(notificationManager, 'error');
+
+      window.showSuccess('Legacy success');
+      window.showError('Legacy error');
+
+      expect(successSpy).toHaveBeenCalledWith('Legacy success');
+      expect(errorSpy).toHaveBeenCalledWith('Legacy error');
+    });
+  });
+});
diff --git a/website/test/setup.js b/website/test/setup.js
new file mode 100644
index 000000000..e1087892b
--- /dev/null
+++ b/website/test/setup.js
@@ -0,0 +1,49 @@
+// Test setup for SAMO-DL website tests
+// This file runs before each test suite
+
+// Mock window.SAMO_CONFIG for tests
+global.window = global.window || {};
+window.SAMO_CONFIG = {
+  API: {
+    BASE_URL: 'http://localhost:3000',
+    ENDPOINTS: {
+      EMOTION: '/analyze/emotion',
+      HEALTH: '/health'
+    },
+    TIMEOUTS: {
+      DEFAULT: 5000
+    }
+  },
+  UI: {
+    DEMO: {
+      MAX_TEXT_LENGTH: 5000
+    }
+  }
+};
+
+// Mock navigator.mediaDevices for voice recording tests
+Object.defineProperty(navigator, 'mediaDevices', {
+  value: {
+    getUserMedia: vi.fn().mockResolvedValue({
+      getTracks: () => [{ stop: vi.fn() }]
+    })
+  },
+  writable: true
+});
+
+// Mock MediaRecorder
+global.MediaRecorder = vi.fn().mockImplementation(() => ({
+  start: vi.fn(),
+  stop: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn()
+}));
+
+// Mock fetch for API calls
+global.fetch = vi.fn();
+
+// Cleanup after each test
+afterEach(() => {
+  vi.clearAllMocks();
+  document.body.innerHTML = '';
+});

From 6ae1497306e778df12fe3a8ba15f4dc602c256a6 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:17:22 +0200
Subject: [PATCH 10/15] fix: address Copilot AI suggestions for
 notification-manager.js

- Fix race condition by not setting container to null after cleanup
- Extract duplicated container creation logic into ensureContainer() method
- Improve code maintainability and prevent potential race conditions
---
 website/js/notification-manager.js | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/website/js/notification-manager.js b/website/js/notification-manager.js
index 3f30e907a..8efe9fc9a 100644
--- a/website/js/notification-manager.js
+++ b/website/js/notification-manager.js
@@ -10,6 +10,14 @@ class NotificationManager {
         this.maxToasts = 3; // Limit concurrent toasts
 
         // Create or reuse a container for proper toast stacking
+        this.ensureContainer();
+    }
+
+    /**
+     * Ensure container exists, creating it if necessary
+     * @private
+     */
+    ensureContainer() {
         this.container = document.getElementById('toastContainer') || (() => {
             const c = document.createElement('div');
             c.id = 'toastContainer';
@@ -42,24 +50,7 @@ class NotificationManager {
         }
 
         // Ensure container exists (recreate if cleaned up)
-        if (!this.container || !this.container.parentNode) {
-            this.container = document.getElementById('toastContainer') || (() => {
-                const c = document.createElement('div');
-                c.id = 'toastContainer';
-                c.style.cssText = `
-                    position: fixed;
-                    top: 20px;
-                    right: 20px;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 10px;
-                    z-index: 10000;
-                    pointer-events: none;
-                `;
-                document.body.appendChild(c);
-                return c;
-            })();
-        }
+        this.ensureContainer();
 
         // Create toast element
         const toast = this.createToast(message, type);
@@ -200,7 +191,7 @@ class NotificationManager {
             // Clean up container when no toasts remain
             if (this.activeToasts.size === 0 && this.container.parentNode) {
                 this.container.parentNode.removeChild(this.container);
-                this.container = null;
+                // Do not set this.container to null to avoid race conditions
             }
         }, 300);
     }

From 0e94b2b3f8ec613793be6074c411d2447adb3fbb Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:18:35 +0200
Subject: [PATCH 11/15] fix: address comprehensive Gemini AI code suggestions

Notification Manager:
- Remove inefficient container create/destroy pattern - keep container in DOM
- Move hardcoded colors to CSS variables and apply via classes
- Replace large inline style blocks with semantic CSS classes
- Simplify show() method by removing ensureContainer() call

Layout Manager:
- Use dependency injection consistently instead of global function calls
- Fix processing reset to return false after forcing stuck process reset
- Replace direct DOM access with injected dependencies for better testability

CSS:
- Add notification color variables to variables.css
- Add notification toast styles and close button styles to messages.css
- Improve separation of concerns between JS and CSS
---
 website/css/components/messages.css  | 52 ++++++++++++++++++++++++++++
 website/css/components/variables.css |  7 ++++
 website/js/layout-manager.js         | 18 +++++-----
 website/js/notification-manager.js   | 47 +++----------------------
 4 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/website/css/components/messages.css b/website/css/components/messages.css
index 0492e3da2..3a108a746 100644
--- a/website/css/components/messages.css
+++ b/website/css/components/messages.css
@@ -30,3 +30,55 @@
     display: block;
     animation: fadeInUp 0.3s ease-out;
 }
+
+/* Notification Toasts */
+.notification-toast {
+    position: relative;
+    padding: 12px 20px;
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    max-width: 400px;
+    word-wrap: break-word;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    pointer-events: auto;
+    margin-bottom: 8px;
+}
+
+.notification-toast.toast-success {
+    background-color: var(--notification-success-bg);
+    color: white;
+}
+
+.notification-toast.toast-error {
+    background-color: var(--notification-error-bg);
+    color: white;
+}
+
+.notification-toast.toast-info {
+    background-color: var(--notification-info-bg);
+    color: white;
+}
+
+.notification-toast.toast-warning {
+    background-color: var(--notification-warning-bg);
+    color: var(--notification-warning-text);
+}
+
+.toast-close-btn {
+    float: right;
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: bold;
+    opacity: 0.8;
+    background: transparent;
+    border: none;
+    color: inherit;
+    padding: 0;
+    line-height: 1;
+}
+
+.toast-close-btn:hover {
+    opacity: 1;
+}
diff --git a/website/css/components/variables.css b/website/css/components/variables.css
index 3deb64aba..6eec6eab6 100644
--- a/website/css/components/variables.css
+++ b/website/css/components/variables.css
@@ -16,6 +16,13 @@
     --error-color: #ef4444;
     --success-color: #10b981;
 
+    /* Notification Colors */
+    --notification-success-bg: #28a745;
+    --notification-error-bg: #dc3545;
+    --notification-info-bg: #17a2b8;
+    --notification-warning-bg: #ffc107;
+    --notification-warning-text: #212529;
+
     --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
diff --git a/website/js/layout-manager.js b/website/js/layout-manager.js
index cbe64d16d..e9a1c6664 100644
--- a/website/js/layout-manager.js
+++ b/website/js/layout-manager.js
@@ -51,8 +51,8 @@ const LayoutManager = {
         this.activeRequests.clear();
         this.currentState = 'initial';
         // Also clear any UI elements that might be stuck
-        if (typeof clearAllResultContent === 'function') {
-            clearAllResultContent();
+        if (this.dependencies.clearAllResultContent) {
+            this.dependencies.clearAllResultContent();
         }
     },
 
@@ -75,6 +75,7 @@ const LayoutManager = {
             if (timeElapsed > this.maxProcessingTime) {
                 console.warn(`⚠️ Processing stuck for ${timeElapsed/1000}s, forcing reset...`);
                 this.forceResetProcessing();
+                return false;
             } else {
                 console.warn('⚠️ Processing already in progress, ignoring request');
                 console.warn('⚠️ Current state:', this.currentState);
@@ -150,18 +151,17 @@ const LayoutManager = {
         this.currentState = 'processing';
 
         // IMMEDIATELY clear all result content to prevent remnants during processing
-        if (typeof clearAllResultContent === 'function') {
-            clearAllResultContent();
+        if (this.dependencies.clearAllResultContent) {
+            this.dependencies.clearAllResultContent();
         }
 
         // Hide input layout with smooth transition
-        const inputLayout = document.getElementById('inputLayout');
-        if (inputLayout) {
-            inputLayout.style.opacity = '0';
-            inputLayout.style.transform = 'translateY(-20px)';
+        if (this.dependencies.inputLayout) {
+            this.dependencies.inputLayout.style.opacity = '0';
+            this.dependencies.inputLayout.style.transform = 'translateY(-20px)';
 
             setTimeout(() => {
-                inputLayout.classList.add('d-none');
+                this.dependencies.inputLayout.classList.add('d-none');
             }, 300);
         }
 
diff --git a/website/js/notification-manager.js b/website/js/notification-manager.js
index 8efe9fc9a..4c9bb3e46 100644
--- a/website/js/notification-manager.js
+++ b/website/js/notification-manager.js
@@ -49,9 +49,6 @@ class NotificationManager {
             return;
         }
 
-        // Ensure container exists (recreate if cleaned up)
-        this.ensureContainer();
-
         // Create toast element
         const toast = this.createToast(message, type);
         this.container.appendChild(toast);
@@ -117,46 +114,16 @@ class NotificationManager {
         toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
         toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
 
-        // Set background colors based on type
-        const colors = {
-            success: '#28a745',
-            error: '#dc3545',
-            info: '#17a2b8',
-            warning: '#ffc107'
-        };
-
-        toast.style.cssText = `
-            position: relative;
-            padding: 12px 20px;
-            border-radius: 6px;
-            color: ${type === 'warning' ? '#212529' : 'white'};
-            font-weight: 500;
-            opacity: 0;
-            transform: translateY(-20px);
-            transition: all 0.3s ease;
-            max-width: 400px;
-            word-wrap: break-word;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            background-color: ${colors[type] || colors.info};
-            pointer-events: auto;
-        `;
+        // Set initial animation state
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateY(-20px)';
 
         // Add close button
         const closeBtn = document.createElement('button');
         closeBtn.type = 'button';
+        closeBtn.className = 'toast-close-btn';
         closeBtn.setAttribute('aria-label', 'Close notification');
         closeBtn.textContent = '×';
-        closeBtn.style.cssText = `
-            float: right;
-            margin-left: 10px;
-            cursor: pointer;
-            font-size: 18px;
-            font-weight: bold;
-            opacity: 0.8;
-            background: transparent;
-            border: none;
-            color: inherit;
-        `;
         closeBtn.addEventListener('click', () => this.removeToast(toast));
 
         // Add message text
@@ -187,12 +154,6 @@ class NotificationManager {
                 toast.parentNode.removeChild(toast);
             }
             this.activeToasts.delete(toast);
-
-            // Clean up container when no toasts remain
-            if (this.activeToasts.size === 0 && this.container.parentNode) {
-                this.container.parentNode.removeChild(this.container);
-                // Do not set this.container to null to avoid race conditions
-            }
         }, 300);
     }
 

From ff3f74c3a1795bfda9be7c69e99483909da0f1be Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:19:08 +0200
Subject: [PATCH 12/15] fix: restore spy in layout-manager test to prevent
 cross-test pollution

- Add forceResetSpy.mockRestore() to prevent spy leakage between tests
- Fixes CodeRabbit AI suggestion for proper test isolation
---
 website/test/layout-manager.test.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/test/layout-manager.test.js b/website/test/layout-manager.test.js
index d1ee36bb4..af7ac6192 100644
--- a/website/test/layout-manager.test.js
+++ b/website/test/layout-manager.test.js
@@ -33,6 +33,8 @@ describe('LayoutManager', () => {
 
       expect(forceResetSpy).toHaveBeenCalled();
       expect(result).toBe(false);
+
+      forceResetSpy.mockRestore();
     });
 
     it('should not compute NaN when processingStartTime is null', () => {

From 8c6450416c47d1d7d64c9dc62a1d4b43fa4741c5 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:19:49 +0200
Subject: [PATCH 13/15] fix: avoid DOM creation in NotificationManager
 constructor

- Remove DOM element creation from constructor to prevent errors when script loads before DOM is ready
- Implement lazy container creation in ensureContainer() with proper DOM readiness checks
- Add graceful handling when DOM isn't ready (defers notifications instead of crashing)
- Fixes CodeRabbit AI critical issue for safer initialization
---
 website/js/notification-manager.js | 56 +++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/website/js/notification-manager.js b/website/js/notification-manager.js
index 4c9bb3e46..36133d06e 100644
--- a/website/js/notification-manager.js
+++ b/website/js/notification-manager.js
@@ -8,32 +8,39 @@ class NotificationManager {
     constructor() {
         this.activeToasts = new Set();
         this.maxToasts = 3; // Limit concurrent toasts
-
-        // Create or reuse a container for proper toast stacking
-        this.ensureContainer();
+        this.container = document.getElementById('toastContainer') || null; // Lazily created
     }
 
     /**
-     * Ensure container exists, creating it if necessary
+     * Ensure container exists only when needed
      * @private
      */
     ensureContainer() {
-        this.container = document.getElementById('toastContainer') || (() => {
-            const c = document.createElement('div');
-            c.id = 'toastContainer';
-            c.style.cssText = `
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-                z-index: 10000;
-                pointer-events: none;
-            `;
-            document.body.appendChild(c);
-            return c;
-        })();
+        if (this.container && this.container.parentNode) return this.container;
+        const existing = document.getElementById('toastContainer');
+        if (existing) {
+            this.container = existing;
+            return existing;
+        }
+        if (!document.body) {
+            console.warn('⚠️ Toast container deferred until DOM is ready');
+            return null;
+        }
+        const c = document.createElement('div');
+        c.id = 'toastContainer';
+        c.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 10000;
+            pointer-events: none;
+        `;
+        document.body.appendChild(c);
+        this.container = c;
+        return c;
     }
 
     /**
@@ -49,9 +56,16 @@ class NotificationManager {
             return;
         }
 
+        // Ensure container exists
+        const container = this.ensureContainer();
+        if (!container) {
+            console.warn('⚠️ Cannot show toast: DOM not ready, deferring notification');
+            return;
+        }
+
         // Create toast element
         const toast = this.createToast(message, type);
-        this.container.appendChild(toast);
+        container.appendChild(toast);
         this.activeToasts.add(toast);
 
         // Animate in

From e9b7d95645dcd5b764a6b77c4aad7731d8f6806b Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:22:19 +0200
Subject: [PATCH 14/15] fix: address comprehensive nitpick suggestions from
 code review

Notification Manager:
- Replace setTimeout with requestAnimationFrame for reliable animations
- Add type clamping with allowed values set for security
- Add aria-atomic='true' for better screen reader accessibility
- Use overflow-wrap instead of deprecated word-wrap CSS property
- Add reduced motion support respecting prefers-reduced-motion
- Gate noisy console logs behind SAMO_CONFIG?.DEBUG flag

Layout Manager:
- Use dependency injection consistently (clearAllResultContent, inputLayout, resultsLayout)
- Remove unused originalFunc variable
- Make processTextWithStateManagement return a Promise for better composability
- Gate console logs behind debug flag to reduce production noise
- Improve toggleDebugSection robustness by preferring .label class over lastChild

Test Setup:
- Add vi.restoreAllMocks() to prevent mock leakage across test suites
- Guard navigator access and add matchMedia stub for better environment compatibility

CSS:
- Update overflow-wrap property for modern CSS compliance
---
 website/css/components/messages.css |  2 +-
 website/js/layout-manager.js        | 33 ++++++++++++++++-------------
 website/js/notification-manager.js  | 26 +++++++++++++++++------
 website/test/setup.js               | 30 ++++++++++++++++++--------
 4 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/website/css/components/messages.css b/website/css/components/messages.css
index 3a108a746..91720851e 100644
--- a/website/css/components/messages.css
+++ b/website/css/components/messages.css
@@ -39,7 +39,7 @@
     font-weight: 500;
     transition: all 0.3s ease;
     max-width: 400px;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     pointer-events: auto;
     margin-bottom: 8px;
diff --git a/website/js/layout-manager.js b/website/js/layout-manager.js
index e9a1c6664..0700ed7e3 100644
--- a/website/js/layout-manager.js
+++ b/website/js/layout-manager.js
@@ -181,7 +181,7 @@ const LayoutManager = {
         this.hideLoadingState();
 
         // Show results layout with smooth transition
-        const resultsLayout = document.getElementById('resultsLayout');
+        const resultsLayout = this.dependencies.resultsLayout || document.getElementById('resultsLayout');
         if (resultsLayout) {
             resultsLayout.classList.remove('d-none');
             resultsLayout.style.opacity = '0';
@@ -363,7 +363,7 @@ const LayoutManager = {
             // Update toggle button text
             if (toggleBtn) {
                 const icon = toggleBtn.querySelector('.material-icons');
-                const textNode = toggleBtn.lastChild;
+                const textNode = toggleBtn.querySelector('.label') || toggleBtn.lastChild;
 
                 if (isVisible) {
                     textNode.textContent = ' Hide Debug';
@@ -383,30 +383,30 @@ const LayoutManager = {
 
 // Enhanced processing function with state management
 window.processTextWithStateManagement = function() {
-    console.log('🚀 Processing with enhanced state management...');
+    if (window.SAMO_CONFIG?.DEBUG) console.log('🚀 Processing with enhanced state management...');
 
     // Check if processing is allowed
     if (!LayoutManager.canStartProcessing()) {
-        console.warn('⚠️ Processing blocked - operation already in progress');
-        return;
+        if (window.SAMO_CONFIG?.DEBUG) console.warn('⚠️ Processing blocked - operation already in progress');
+        return Promise.reject(new Error('Processing blocked - operation already in progress'));
     }
 
     // Start processing (sets guard) - don't call showProcessingState() here
     if (!LayoutManager.startProcessing()) {
-        console.error('❌ Failed to start processing - operation already in progress');
-        return;
+        if (window.SAMO_CONFIG?.DEBUG) console.error('❌ Failed to start processing - operation already in progress');
+        return Promise.reject(new Error('Failed to start processing - operation already in progress'));
     }
 
     // Set processing state and update UI
     LayoutManager.currentState = 'processing';
 
     // IMMEDIATELY clear all result content to prevent remnants during processing
-    if (typeof clearAllResultContent === 'function') {
-        clearAllResultContent();
+    if (LayoutManager.dependencies.clearAllResultContent) {
+        LayoutManager.dependencies.clearAllResultContent();
     }
 
         // Hide input layout with smooth transition
-        const inputLayout = document.getElementById('inputLayout');
+        const inputLayout = this?.dependencies?.inputLayout || document.getElementById('inputLayout');
         if (inputLayout) {
             inputLayout.style.opacity = '0';
             setTimeout(() => {
@@ -430,7 +430,6 @@ window.processTextWithStateManagement = function() {
     // Call the original processing function
     if (typeof processText === 'function') {
         // Set up a promise to handle the transition to results
-        const originalFunc = processText;
         const maybe = processText(true);  // Skip state check since we handle it here
         const onDone = () => {
             // Minimal delay to ensure smooth UI transition after processing completes
@@ -440,19 +439,23 @@ window.processTextWithStateManagement = function() {
             }, 50); // Reduced from 1000ms to 50ms for better perceived performance
         };
         if (maybe && typeof maybe.then === 'function') {
-            maybe.then(onDone).catch((error) => {
+            return maybe.then(onDone).catch((error) => {
                 console.error('Processing error:', error);
                 LayoutManager.resetToInitialState();
+                throw error;
             });
         } else {
             onDone();
+            return Promise.resolve();
         }
     }
+
+    return Promise.resolve();
 };
 
 // Enhanced clear function with state management
 window.clearAllWithStateManagement = function() {
-    console.log('🧹 Clearing with enhanced state management...');
+    if (window.SAMO_CONFIG?.DEBUG) console.log('🧹 Clearing with enhanced state management...');
 
     // Reset to initial state using LayoutManager (this should handle everything)
     LayoutManager.resetToInitialState();
@@ -465,9 +468,9 @@ window.clearAllWithStateManagement = function() {
 
 // Initialize LayoutManager when DOM is ready
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('🏗️ Initializing LayoutManager...');
+    if (window.SAMO_CONFIG?.DEBUG) console.log('🏗️ Initializing LayoutManager...');
     LayoutManager.init(); // Initialize with default dependencies (falls back to global scope)
-    console.log('✅ LayoutManager initialized');
+    if (window.SAMO_CONFIG?.DEBUG) console.log('✅ LayoutManager initialized');
 });
 
 // Make LayoutManager globally available
diff --git a/website/js/notification-manager.js b/website/js/notification-manager.js
index 36133d06e..8ac61c715 100644
--- a/website/js/notification-manager.js
+++ b/website/js/notification-manager.js
@@ -23,7 +23,7 @@ class NotificationManager {
             return existing;
         }
         if (!document.body) {
-            console.warn('⚠️ Toast container deferred until DOM is ready');
+            if (window.SAMO_CONFIG?.DEBUG) console.warn('⚠️ Toast container deferred until DOM is ready');
             return null;
         }
         const c = document.createElement('div');
@@ -52,14 +52,14 @@ class NotificationManager {
     show(message, type = 'info', duration = 3000) {
         // Limit concurrent toasts
         if (this.activeToasts.size >= this.maxToasts) {
-            console.warn('⚠️ Too many active toasts, ignoring new notification');
+            if (window.SAMO_CONFIG?.DEBUG) console.warn('⚠️ Too many active toasts, ignoring new notification');
             return;
         }
 
         // Ensure container exists
         const container = this.ensureContainer();
         if (!container) {
-            console.warn('⚠️ Cannot show toast: DOM not ready, deferring notification');
+            if (window.SAMO_CONFIG?.DEBUG) console.warn('⚠️ Cannot show toast: DOM not ready, deferring notification');
             return;
         }
 
@@ -69,10 +69,10 @@ class NotificationManager {
         this.activeToasts.add(toast);
 
         // Animate in
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             toast.style.opacity = '1';
             toast.style.transform = 'translateY(0)';
-        }, 10);
+        });
 
         // Auto-remove after duration
         setTimeout(() => {
@@ -121,17 +121,29 @@ class NotificationManager {
      * @private
      */
     createToast(message, type) {
+        // Clamp type to allowed values
+        const allowedTypes = new Set(['success', 'error', 'info', 'warning']);
+        if (!allowedTypes.has(type)) type = 'info';
+
         const toast = document.createElement('div');
-        toast.className = `notification-toast toast-${type}`;
+        toast.className = 'notification-toast';
+        toast.classList.add(`toast-${type}`);
 
         // Add accessibility attributes
         toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
         toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
+        toast.setAttribute('aria-atomic', 'true');
 
         // Set initial animation state
         toast.style.opacity = '0';
         toast.style.transform = 'translateY(-20px)';
 
+        // Respect reduced motion preference
+        const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (reduceMotion) {
+            toast.style.transition = 'none';
+        }
+
         // Add close button
         const closeBtn = document.createElement('button');
         closeBtn.type = 'button';
@@ -196,4 +208,4 @@ window.showError = (message) => window.NotificationManager.error(message);
 window.showInfo = (message) => window.NotificationManager.info(message);
 window.showWarning = (message) => window.NotificationManager.warning(message);
 
-console.log('🔔 Notification Manager loaded successfully');
+if (window.SAMO_CONFIG?.DEBUG) console.log('🔔 Notification Manager loaded successfully');
diff --git a/website/test/setup.js b/website/test/setup.js
index e1087892b..8a8009c8a 100644
--- a/website/test/setup.js
+++ b/website/test/setup.js
@@ -21,15 +21,26 @@ window.SAMO_CONFIG = {
   }
 };
 
-// Mock navigator.mediaDevices for voice recording tests
-Object.defineProperty(navigator, 'mediaDevices', {
-  value: {
-    getUserMedia: vi.fn().mockResolvedValue({
-      getTracks: () => [{ stop: vi.fn() }]
-    })
-  },
-  writable: true
-});
+// Mock navigator.mediaDevices for voice recording tests (with guard)
+if (typeof navigator !== 'undefined') {
+  Object.defineProperty(navigator, 'mediaDevices', {
+    value: {
+      getUserMedia: vi.fn().mockResolvedValue({
+        getTracks: () => [{ stop: vi.fn() }]
+      })
+    },
+    writable: true
+  });
+}
+
+// Optional: matchMedia stub
+if (!window.matchMedia) {
+  window.matchMedia = vi.fn().mockReturnValue({
+    matches: false,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  });
+}
 
 // Mock MediaRecorder
 global.MediaRecorder = vi.fn().mockImplementation(() => ({
@@ -44,6 +55,7 @@ global.fetch = vi.fn();
 
 // Cleanup after each test
 afterEach(() => {
+  vi.restoreAllMocks();
   vi.clearAllMocks();
   document.body.innerHTML = '';
 });

From cba8e993287c5701e07a4fae42686ac27ea43fe9 Mon Sep 17 00:00:00 2001
From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:28:45 +0200
Subject: [PATCH 15/15] fix: update test expectation for stuck processing reset
 behavior

- Test now expects startProcessing() to return false after force reset (preventing auto-restart)
- Updated test comments to reflect new behavior that prevents masking underlying issues
- Aligns test with the Gemini AI suggestion implementation
---
 website/test/layout-manager.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/test/layout-manager.test.js b/website/test/layout-manager.test.js
index af7ac6192..47cd14fce 100644
--- a/website/test/layout-manager.test.js
+++ b/website/test/layout-manager.test.js
@@ -83,9 +83,9 @@ describe('LayoutManager', () => {
       expect(consoleWarnSpy).toHaveBeenCalledWith(
         expect.stringContaining('Processing stuck for')
       );
-      // After force reset, processing state is cleared, so startProcessing should succeed
-      expect(result).toBe(true);
-      expect(layoutManager.isProcessing).toBe(true); // Should be set to true after successful start
+      // After force reset due to stuck processing, startProcessing returns false to prevent auto-restart
+      expect(result).toBe(false);
+      expect(layoutManager.isProcessing).toBe(false); // Should remain false after reset
 
       forceResetSpy.mockRestore();
       consoleWarnSpy.mockRestore();