broken js..

static/app.js

@@ -64,7 +64,7 @@ const railAvatar        = document.getElementById('railAvatar');
 // Settings
 const settingsOverlay   = document.getElementById('settingsOverlay');
 const openSettingsBtn = document.getElementById('openSettingsBtn');
-const closeSettingsBtn= document.getElementById('closeSettingsBtn');
+const settingsCloseBtn= document.getElementById('settingsCloseBtn');
 const saveSettingsBtn = document.getElementById('saveSettingsBtn');
 const settingsModal   = document.getElementById('settingsModal');
 
@@ -356,6 +356,11 @@ function showApp() {
         })
         .catch(() => {});
 
+    // On mobile, ensure sidebar starts collapsed so content is visible
+    if (window.innerWidth <= 768) {
+        collapseSidebar();
+    }
+
     // Show hero mode
     enterHeroMode();
 }
@@ -768,7 +773,7 @@ openSettingsBtn.addEventListener('click', () => {
     settingsOverlay.classList.add('show');
 });
 
-settingsCloseBtn.addEventListener('click', () => settingsOverlay.classList.remove('show'));
+if (settingsCloseBtn) settingsCloseBtn.addEventListener('click', () => settingsOverlay.classList.remove('show'));
 settingsOverlay.addEventListener('click', (e) => {
     if (e.target === settingsOverlay) settingsOverlay.classList.remove('show');
 });

static/style.css

@@ -1196,10 +1196,19 @@ body {
 .mobile-fab-toggle { display: none !important; }
 
 @media (max-width: 768px) {
+    /* App container: must not let fixed sidebar ghost-width push content */
+    .app-container {
+        overflow: hidden;
+        position: relative;
+    }
+
     /* Sidebar slides in from left as fixed overlay */
     .sidebar {
         position: fixed; left: 0; top: 0;
-        height: 100vh; z-index: 40;
+        width: var(--sidebar-width);
+        height: 100vh;
+        height: 100dvh;
+        z-index: 40;
         transition: transform var(--transition), opacity var(--transition);
     }
     /* Use transform instead of margin so the overlay sits behind */
@@ -1209,6 +1218,12 @@ body {
         opacity: 0;
         pointer-events: none;
     }
+    /* When open, reset any desktop negative margin */
+    .sidebar:not(.collapsed) {
+        margin-left: 0;
+        transform: translateX(0);
+        opacity: 1;
+    }
 
     /* Overlay — must be above main content (z:30) but below sidebar (z:40) */
     .sidebar-overlay {
@@ -1223,6 +1238,13 @@ body {
 
     .sidebar-rail { display: none !important; }
 
+    /* Main chat must fill entire screen width */
+    .main-chat {
+        width: 100vw;
+        min-width: 100vw;
+        flex: none;
+    }
+
     /* Settings modal — fixed size, never jumps between tabs */
     .settings-modal {
         width: 96vw;
@@ -1272,15 +1294,27 @@ body {
 
     .hero-title { font-size: 22px; }
     .hero-bot-icon { width: 80px; height: 80px; }
+
+    /* Hero welcome — ensure it scrolls and pills stay on-screen */
+    .hero-welcome {
+        justify-content: flex-start;
+        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
+        overflow-y: auto;
+        min-height: 0;
+    }
+
     .hero-pills { grid-template-columns: 1fr; }
     .hero-pill { font-size: 12px; padding: 12px 14px; }
 
+    .hero-input-wrap { max-width: 100%; }
+
     .login-title { font-size: 20px; white-space: normal; }
 
-    /* Chat container — tighter side padding so text fills screen */
+    /* Chat container — tighter side padding, use dvh for mobile browsers */
     .chat-container {
         padding: 60px 10px 16px;
         gap: 16px;
+        height: 100%;
     }
 
     /* Message rows — use full width on mobile */