Refresh frontend UI: typography, colors, accessibility, and responsiv…

CHANGELOG.txt

@@ -10,9 +10,22 @@ All notable changes to this project will be documented in this file.
 - Link to openrouter.ai/models for browsing available models
 - Conditional "Show free models only" filter - only displays when free models exist
 - Unit tests for `get_models_list_status()` function
+- IBM Plex Sans and Plex Mono fonts for improved typography
+- CSS design tokens for consistent spacing, shadows, and transitions
+- Skip link for keyboard navigation (accessibility)
+- ARIA landmarks, roles, and live regions throughout HTML
+- Focus-visible states on all interactive elements
+- Mobile responsive layout with bottom drawer sidebar
+- Hamburger menu toggle for mobile navigation
+- Message slide-in animations and modal transitions
 
 ### Changed
 - Model Selection UI now educates users about model list curation
+- Primary accent color changed from blue to warm orange (#ea580c)
+- Help icons converted to buttons with 44px touch targets (WCAG compliance)
+- Sidebar now scrollable to access all sections including RAG
+- Settings tabs horizontally scrollable on mobile
+- Info box styling aligned with orange accent theme
 
 
 ## 2026-02-02

chat_rag_explorer/static/script.js

@@ -49,6 +49,42 @@ document.addEventListener('DOMContentLoaded', () => {
     const submitButton = chatForm.querySelector('button');
     // Settings link navigates directly (chat is preserved in sessionStorage)
 
+    // Mobile sidebar toggle
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.getElementById('sidebar');
+    const sidebarOverlay = document.getElementById('sidebar-overlay');
+
+    if (sidebarToggle && sidebar) {
+        sidebarToggle.addEventListener('click', () => {
+            const isOpen = sidebar.classList.toggle('open');
+            sidebarToggle.setAttribute('aria-expanded', isOpen);
+            if (sidebarOverlay) {
+                sidebarOverlay.classList.toggle('visible', isOpen);
+            }
+            AppLogger.debug('Sidebar toggled', { isOpen });
+        });
+
+        // Close sidebar when clicking overlay
+        if (sidebarOverlay) {
+            sidebarOverlay.addEventListener('click', () => {
+                sidebar.classList.remove('open');
+                sidebarToggle.setAttribute('aria-expanded', 'false');
+                sidebarOverlay.classList.remove('visible');
+            });
+        }
+
+        // Close sidebar on escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('open')) {
+                sidebar.classList.remove('open');
+                sidebarToggle.setAttribute('aria-expanded', 'false');
+                if (sidebarOverlay) {
+                    sidebarOverlay.classList.remove('visible');
+                }
+            }
+        });
+    }
+
     // API key status tracking
     let apiKeyConfigured = true; // Assume configured until we check
     const apiKeyBanner = document.getElementById('api-key-banner');