UI/UX;backend optim..;bug fix..

config.py

@@ -31,3 +31,4 @@ DB_PATH = "/data/stemgraph.db" if os.path.isdir("/data") else "stemgraph.db"
 # --- Defaults ---
 DEFAULT_PERSONA = "nerd"
 RETRIEVAL_TOP_K = 5
+LLM_TIMEOUT = 60  # seconds — prevents indefinite hangs on slow models

graph.py

@@ -13,7 +13,7 @@ and rotated per-category to avoid per-model rate limits.
 
 from langgraph.graph import StateGraph, START, END
 from langgraph.graph.message import add_messages
-from langchain_core.messages import BaseMessage, SystemMessage, HumanMessage
+from langchain_core.messages import BaseMessage, SystemMessage, HumanMessage, AIMessage
 from langchain_core.runnables import RunnableConfig
 from langchain_openrouter import ChatOpenRouter
 from typing import TypedDict, Annotated
@@ -23,8 +23,9 @@ import time
 import json
 import urllib.request
 import threading
+import traceback
 from langgraph.checkpoint.sqlite import SqliteSaver
-from config import OPENROUTER_API_KEY, DB_PATH
+from config import OPENROUTER_API_KEY, DB_PATH, LLM_TIMEOUT
 import prompts
 
 
@@ -49,12 +50,10 @@ _BLACKLISTED_MODELS = frozenset([
 def _is_blacklisted(model_id: str) -> bool:
     """Check if model is a known guardrail/safety classifier."""
     mid = model_id.lower()
-    # Exact prefix matches
     for bl in _BLACKLISTED_MODELS:
         if mid.startswith(bl):
             return True
-    # Heuristic: any model with 'guard' or 'shield' in its name
-    base = mid.split(':')[0]  # strip ':free'
+    base = mid.split(':')[0]
     return any(kw in base for kw in ('guard', 'shield', 'safety', 'moderation'))
 
 
@@ -180,7 +179,6 @@ def _fetch_pools() -> dict:
             mid = m.get("id", "")
             if not mid.endswith(":free"):
                 continue
-            # Skip known safety/guardrail/classifier models
             if _is_blacklisted(mid):
                 continue
 
@@ -194,16 +192,15 @@ def _fetch_pools() -> dict:
             if has_vision:
                 vision_all.append(entry)
 
-        # Sort high→low for reasoning, low→high for casual
         text_all.sort(key=lambda x: x["score"], reverse=True)
         vision_all.sort(key=lambda x: x["score"], reverse=True)
 
         pools = {
-            "reasoning": text_all[:6],          # best 6
-            "science":   text_all[:8],          # best 8
-            "general":   text_all[:10],         # best 10
+            "reasoning": text_all[:6],
+            "science":   text_all[:8],
+            "general":   text_all[:10],
             "casual":    text_all[-5:][::-1] if len(text_all) >= 5 else text_all[:3],
-            "vision":    vision_all,            # all vision-capable
+            "vision":    vision_all,
         }
 
         with _lock:
@@ -242,8 +239,6 @@ def _pick(category: str, has_image: bool = False) -> tuple[str, str]:
             idx = _counters.get("vision", 0) % len(v)
             _counters["vision"] = idx + 1
             return v[idx]["id"], "vision"
-        # No vision models — caller must strip images
-        # Fall through to text routing
 
     pool = pools.get(category) or pools.get("general") or []
     if not pool:
@@ -282,7 +277,6 @@ def _strip_images(messages: list) -> list:
             text = " ".join(t for t in text_parts if t).strip()
             if not text:
                 text = "(user sent an image)"
-            # Preserve original message class (HumanMessage, AIMessage, etc.)
             out.append(msg.__class__(content=text))
         else:
             out.append(msg)
@@ -302,7 +296,8 @@ def _make_llm(api_key: str, model_id: str):
         openrouter_api_key=key,
         temperature=0.5,
         max_tokens=4096,
-        max_retries=3,
+        max_retries=1,
+        timeout=LLM_TIMEOUT,
         streaming=True,
     )
 
@@ -334,19 +329,14 @@ def chat_node(state: ChatState, config: RunnableConfig):
     else:
         model_id, actual = _pick(category, has_image=has_image)
 
-    # 3) ALWAYS strip images from history when model is not vision-capable.
-    #    LangGraph checkpoint may contain old image messages from prior turns
-    #    that would cause "No endpoints found that support image input" on
-    #    text-only models.
+    # 3) Strip images from history when model is not vision-capable
     messages = state["messages"]
     if actual != "vision":
         messages = _strip_images(messages)
 
-    # 4) Build system prompt & invoke
+    # 4) Build system prompt
     base_prompt = prompts.build(persona, context, language, username, profile)
 
-    # If the user sent an image, add explicit vision instruction so the model
-    # doesn't just output safety labels or ignore the image.
     if has_image:
         base_prompt += (
             "\n\nIMAGE HANDLING:\n"
@@ -360,24 +350,26 @@ def chat_node(state: ChatState, config: RunnableConfig):
     sys = SystemMessage(content=base_prompt)
     print(f"[ROUTER] category={category} model={model_id} vision={actual == 'vision'}")
 
-    # Retry loop for rate limits or transient errors
+    # 5) Invoke with model rotation on failure
     max_attempts = 3
+    last_error = None
     for attempt in range(max_attempts):
         try:
             llm = _make_llm(api_key, model_id)
             resp = llm.invoke([sys] + messages)
             return {"messages": [resp]}
         except Exception as e:
-            err_str = str(e)
-            print(f"[ROUTER] Model {model_id} failed on attempt {attempt+1}/{max_attempts}: {err_str[:100]}")
+            last_error = e
+            print(f"[ROUTER] Model {model_id} failed (attempt {attempt+1}/{max_attempts}):")
+            print(f"[ROUTER]   {type(e).__name__}: {str(e)[:200]}")
+            traceback.print_exc()
             if attempt < max_attempts - 1:
-                # Pick a different model and try again
                 model_id, actual = _pick(category, has_image=has_image)
-                print(f"[ROUTER] Retrying with new model {model_id}")
-            else:
-                # Last attempt failed
-                from langchain_core.messages import AIMessage
-                return {"messages": [AIMessage(content="I'm experiencing high traffic right now. Could you please try again in a moment?")]}
+                print(f"[ROUTER] Rotating to model: {model_id}")
+
+    # All attempts failed — raise so app.py SSE handler can show the error
+    print(f"[ROUTER] All {max_attempts} attempts failed. Raising last error.")
+    raise last_error
 
 
 # ── Compile graph ─────────────────────────────────────────────

static/app.js

@@ -2,10 +2,12 @@
    STEM Copilot — Application Logic
    Auth, BYOK, Chat, Settings, Streaming MD, PWA, Sidebar,
    Theme Toggle, Teaching Style Selector, Voice Input,
-   Copy/Regenerate actions, Image Preview
+   Copy/Regenerate, Image Preview, Mobile Overlays,
+   Adaptive Mic/Send Button
    ============================================================ */
 
-/* ----- State ----- */
+/* ── State ──────────────────────────────────────────────────── */
+
 let currentUser = null;
 let currentThreadId = crypto.randomUUID();
 const threads = [];
@@ -18,10 +20,10 @@ let currentPersona = localStorage.getItem('stemcopilot_persona') || 'vidyut';
 let currentLanguage = localStorage.getItem('stemcopilot_language') || 'auto';
 let currentUsername = localStorage.getItem('stemcopilot_username') || '';
 
+const _PERSONA_LABELS = { vidyut: 'Vidyut', nerd: 'Nerd', noob: 'Beginner', thoughtful: 'Thoughtful', panic: 'Panic' };
 
-/* ============================================================
-   DOM REFERENCES
-   ============================================================ */
+
+/* ── DOM References ─────────────────────────────────────────── */
 
 const loginScreen = document.getElementById('loginScreen');
 const byokScreen = document.getElementById('byokScreen');
@@ -36,12 +38,12 @@ const welcomeScreen = document.getElementById('welcomeScreen');
 const bottomInputContainer = document.getElementById('bottomInputContainer');
 
 const userInput = document.getElementById('userInput');
-const sendBtn = document.getElementById('sendBtn');
 const newChatBtn = document.getElementById('newChatBtn');
 const stopBtn = document.getElementById('stopBtn');
+const adaptiveBtn = document.getElementById('adaptiveBtn');
 
 const heroInput = document.getElementById('heroInput');
-const heroSendBtn = document.getElementById('heroSendBtn');
+const heroAdaptiveBtn = document.getElementById('heroAdaptiveBtn');
 const heroUploadBtn = document.getElementById('heroUploadBtn');
 const heroImageInput = document.getElementById('heroImageInput');
 const heroTitle = document.getElementById('heroTitle');
@@ -63,8 +65,6 @@ const railAvatar = document.getElementById('railAvatar');
 const settingsOverlay = document.getElementById('settingsOverlay');
 const openSettingsBtn = document.getElementById('openSettingsBtn');
 const settingsCloseBtn = document.getElementById('settingsCloseBtn');
-const settingsModal = document.getElementById('settingsModal');
-const feedbackMenuBtn = document.getElementById('feedbackMenuBtn');
 
 const usernameInput = document.getElementById('usernameInput');
 const languageSelect = document.getElementById('languageSelect');
@@ -83,41 +83,60 @@ const installBanner = document.getElementById('installBanner');
 const installBtn = document.getElementById('installBtn');
 const installDismiss = document.getElementById('installDismiss');
 
-const themeToggleBtn = document.getElementById('themeToggleBtn');
-
-// Hero image preview
 const heroImagePreview = document.getElementById('heroImagePreview');
 const heroImagePreviewThumb = document.getElementById('heroImagePreviewThumb');
 const heroImagePreviewRemove = document.getElementById('heroImagePreviewRemove');
 
-// Style selector in input bar
 const styleSelectorBtn = document.getElementById('styleSelectorBtn');
 const styleSelectorLabel = document.getElementById('styleSelectorLabel');
 const styleDropdown = document.getElementById('styleDropdown');
 
-// Mic buttons
-const micBtn = document.getElementById('micBtn');
-const heroMicBtn = document.getElementById('heroMicBtn');
-
-
-/* ============================================================
-   THEME TOGGLE — Smooth dark/light
-   ============================================================ */
-
-const _PERSONA_LABELS = { vidyut: 'Vidyut', nerd: 'Nerd', noob: 'Beginner', thoughtful: 'Thoughtful', panic: 'Panic' };
+// Mobile elements
+const mobileTopbar = document.getElementById('mobileTopbar');
+const topbarProfileBtn = document.getElementById('topbarProfileBtn');
+const topbarAvatar = document.getElementById('topbarAvatar');
+const topbarHistoryBtn = document.getElementById('topbarHistoryBtn');
+const topbarNewChatBtn = document.getElementById('topbarNewChatBtn');
+const accountOverlay = document.getElementById('accountOverlay');
+const accountOverlayClose = document.getElementById('accountOverlayClose');
+const historyOverlay = document.getElementById('historyOverlay');
+const historyOverlayClose = document.getElementById('historyOverlayClose');
+const overlayHistoryList = document.getElementById('overlayHistoryList');
+const overlayHistoryEmpty = document.getElementById('overlayHistoryEmpty');
+const overlaySettingsBtn = document.getElementById('overlaySettingsBtn');
+const overlayProfileBtn = document.getElementById('overlayProfileBtn');
+const overlayLogoutBtn = document.getElementById('overlayLogoutBtn');
+const overlayUserAvatar = document.getElementById('overlayUserAvatar');
+const overlayUserName = document.getElementById('overlayUserName');
+const overlayUserEmail = document.getElementById('overlayUserEmail');
+
+// Login theme toggle
+const loginThemeBtn = document.getElementById('loginThemeBtn');
+
+// Settings theme buttons
+const themeDarkBtn = document.getElementById('themeDarkBtn');
+const themeLightBtn = document.getElementById('themeLightBtn');
+
+
+/* ── Theme ──────────────────────────────────────────────────── */
 
 function _initTheme() {
     const saved = localStorage.getItem('stemcopilot_theme') || 'dark';
     document.documentElement.setAttribute('data-theme', saved);
     _updateThemeColor(saved);
+    _syncThemeButtons(saved);
+}
+
+function _setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('stemcopilot_theme', theme);
+    _updateThemeColor(theme);
+    _syncThemeButtons(theme);
 }
 
 function _toggleTheme() {
     const current = document.documentElement.getAttribute('data-theme') || 'dark';
-    const next = current === 'dark' ? 'light' : 'dark';
-    document.documentElement.setAttribute('data-theme', next);
-    localStorage.setItem('stemcopilot_theme', next);
-    _updateThemeColor(next);
+    _setTheme(current === 'dark' ? 'light' : 'dark');
 }
 
 function _updateThemeColor(theme) {
@@ -125,13 +144,19 @@ function _updateThemeColor(theme) {
     if (meta) meta.content = theme === 'light' ? '#f8f9fa' : '#0a0a0a';
 }
 
+function _syncThemeButtons(theme) {
+    if (themeDarkBtn) themeDarkBtn.classList.toggle('active', theme === 'dark');
+    if (themeLightBtn) themeLightBtn.classList.toggle('active', theme === 'light');
+}
+
 _initTheme();
-if (themeToggleBtn) themeToggleBtn.addEventListener('click', _toggleTheme);
+if (loginThemeBtn) loginThemeBtn.addEventListener('click', _toggleTheme);
+if (themeDarkBtn) themeDarkBtn.addEventListener('click', () => _setTheme('dark'));
+if (themeLightBtn) themeLightBtn.addEventListener('click', () => _setTheme('light'));
 
 
-/* ============================================================
-   TOAST NOTIFICATION
-   ============================================================ */
+/* ── Toast ──────────────────────────────────────────────────── */
+
 function showToast(msg, type = 'info') {
     const t = document.createElement('div');
     t.textContent = msg;
@@ -144,18 +169,15 @@ function showToast(msg, type = 'info') {
     });
     document.body.appendChild(t);
     requestAnimationFrame(() => t.style.opacity = '1');
-    setTimeout(() => {
-        t.style.opacity = '0';
-        setTimeout(() => t.remove(), 300);
-    }, 2500);
+    setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 2500);
 }
 
 
-/* ============================================================
-   FEEDBACK
-   ============================================================ */
+/* ── Feedback ───────────────────────────────────────────────── */
+
 function openFeedbackInSettings() {
-    userMenu.classList.remove('show');
+    if (userMenu) userMenu.classList.remove('show');
+    _closeAllOverlays();
     document.querySelectorAll('.settings-nav-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
     const fbBtn = document.querySelector('.settings-nav-btn[data-tab="feedback"]');
@@ -164,17 +186,16 @@ function openFeedbackInSettings() {
     if (fbTab) fbTab.classList.add('active');
     settingsOverlay.classList.add('show');
 }
-if (feedbackMenuBtn) feedbackMenuBtn.addEventListener('click', openFeedbackInSettings);
 
 function _bindFeedbackSubmit() {
-    const submitFeedbackBtn = document.getElementById('submitFeedbackBtn');
-    if (!submitFeedbackBtn) return;
-    submitFeedbackBtn.addEventListener('click', () => {
+    const btn = document.getElementById('submitFeedbackBtn');
+    if (!btn) return;
+    btn.addEventListener('click', () => {
         const cat = document.getElementById('feedbackCategory').value;
         const msg = document.getElementById('feedbackMessage').value;
         if (!msg.trim()) { document.getElementById('feedbackMessage').focus(); return; }
-        submitFeedbackBtn.disabled = true;
-        submitFeedbackBtn.textContent = 'Submitting...';
+        btn.disabled = true;
+        btn.textContent = 'Submitting...';
         fetch('/feedback', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -182,53 +203,39 @@ function _bindFeedbackSubmit() {
                 user_id: currentUser ? currentUser.google_id : 'anonymous',
                 category: cat, message: msg
             })
-        }).then(r => {
-            if (!r.ok) throw new Error('Server error');
-            return r.json();
-        }).then(() => {
-            settingsOverlay.classList.remove('show');
-            document.getElementById('feedbackMessage').value = '';
-            showToast('Feedback submitted. Thank you!', 'success');
-        }).catch(() => {
-            showToast('Could not submit feedback. Please try again.', 'error');
-        }).finally(() => {
-            submitFeedbackBtn.disabled = false;
-            submitFeedbackBtn.textContent = 'Submit Securely';
-        });
+        }).then(r => { if (!r.ok) throw new Error(); return r.json(); })
+          .then(() => { settingsOverlay.classList.remove('show'); document.getElementById('feedbackMessage').value = ''; showToast('Feedback submitted. Thank you!', 'success'); })
+          .catch(() => showToast('Could not submit feedback.', 'error'))
+          .finally(() => { btn.disabled = false; btn.textContent = 'Submit Securely'; });
     });
 }
 
 
-/* ============================================================
-   AUTH — Google Sign-In
-   ============================================================ */
+/* ── Auth — Google Sign-In ──────────────────────────────────── */
 
 let _gsiInitialized = false;
 
 function initGoogleAuth() {
     return new Promise((resolve) => {
         if (_gsiInitialized) { resolve(); return; }
-        fetch('/auth/client_id')
-            .then(r => r.json())
-            .then(data => {
-                if (!data.client_id) { showApp(); resolve(); return; }
-                const script = document.createElement('script');
-                script.src = 'https://accounts.google.com/gsi/client';
-                script.async = true; script.defer = true;
-                script.onload = () => {
-                    google.accounts.id.initialize({
-                        client_id: data.client_id,
-                        callback: handleGoogleCredential,
-                        auto_select: false, cancel_on_tap_outside: false,
-                    });
-                    _renderHiddenGoogleBtn();
-                    _gsiInitialized = true;
-                    resolve();
-                };
-                script.onerror = () => { showApp(); resolve(); };
-                document.head.appendChild(script);
-            })
-            .catch(() => { showApp(); resolve(); });
+        fetch('/auth/client_id').then(r => r.json()).then(data => {
+            if (!data.client_id) { showApp(); resolve(); return; }
+            const script = document.createElement('script');
+            script.src = 'https://accounts.google.com/gsi/client';
+            script.async = true; script.defer = true;
+            script.onload = () => {
+                google.accounts.id.initialize({
+                    client_id: data.client_id,
+                    callback: handleGoogleCredential,
+                    auto_select: false, cancel_on_tap_outside: false,
+                });
+                _renderHiddenGoogleBtn();
+                _gsiInitialized = true;
+                resolve();
+            };
+            script.onerror = () => { showApp(); resolve(); };
+            document.head.appendChild(script);
+        }).catch(() => { showApp(); resolve(); });
     });
 }
 
@@ -246,13 +253,8 @@ function _renderHiddenGoogleBtn(cb) {
 function triggerGoogleSignIn() {
     const tryClick = () => {
         const realBtn = document.querySelector('#gsi-hidden-btn [role="button"]');
-        if (realBtn) { realBtn.click(); }
-        else {
-            _renderHiddenGoogleBtn(() => {
-                const btn = document.querySelector('#gsi-hidden-btn [role="button"]');
-                if (btn) btn.click();
-            });
-        }
+        if (realBtn) realBtn.click();
+        else _renderHiddenGoogleBtn(() => { const btn = document.querySelector('#gsi-hidden-btn [role="button"]'); if (btn) btn.click(); });
     };
     if (_gsiInitialized) tryClick();
     else initGoogleAuth().then(tryClick);
@@ -260,23 +262,17 @@ function triggerGoogleSignIn() {
 
 function handleGoogleCredential(response) {
     fetch('/auth/google', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ token: response.credential }),
-    })
-        .then(r => {
-            if (!r.ok) throw new Error('Auth failed');
-            return r.json();
-        })
-        .then(data => {
-            if (data.error) { showToast('Login failed: ' + data.error, 'error'); return; }
-            currentUser = data.user;
-            localStorage.setItem('stemcopilot_user', JSON.stringify(currentUser));
-            currentUsername = currentUser.name;
-            localStorage.setItem('stemcopilot_username', currentUsername);
-            if (!data.has_api_key) showByok(); else showApp();
-        })
-        .catch(() => showToast('Login failed. Check your connection and try again.', 'error'));
+    }).then(r => { if (!r.ok) throw new Error('Auth failed'); return r.json(); })
+      .then(data => {
+          if (data.error) { showToast('Login failed: ' + data.error, 'error'); return; }
+          currentUser = data.user;
+          localStorage.setItem('stemcopilot_user', JSON.stringify(currentUser));
+          currentUsername = currentUser.name;
+          localStorage.setItem('stemcopilot_username', currentUsername);
+          if (!data.has_api_key) showByok(); else showApp();
+      }).catch(() => showToast('Login failed. Check your connection.', 'error'));
 }
 
 function checkExistingSession() {
@@ -287,25 +283,15 @@ function checkExistingSession() {
         fetch('/auth/me?user_id=' + encodeURIComponent(currentUser.google_id))
             .then(r => r.json())
             .then(data => {
-                if (data.error) {
-                    localStorage.removeItem('stemcopilot_user');
-                    currentUser = null;
-                    initGoogleAuth();
-                    return;
-                }
+                if (data.error) { localStorage.removeItem('stemcopilot_user'); currentUser = null; initGoogleAuth(); return; }
                 currentUser = data.user;
                 if (!data.has_api_key) showByok(); else showApp();
-            })
-            .catch(() => initGoogleAuth());
-    } else {
-        initGoogleAuth();
-    }
+            }).catch(() => initGoogleAuth());
+    } else initGoogleAuth();
 }
 
 
-/* ============================================================
-   BYOK
-   ============================================================ */
+/* ── BYOK ───────────────────────────────────────────────────── */
 
 function showByok() {
     loginScreen.style.display = 'none';
@@ -316,20 +302,14 @@ function showByok() {
 if (byokSubmitBtn) byokSubmitBtn.addEventListener('click', () => {
     const key = byokInput.value.trim();
     if (!key) { byokInput.focus(); return; }
-    fetch('/user/apikey', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ user_id: currentUser.google_id, key: key }),
-    })
+    fetch('/user/apikey', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: currentUser.google_id, key: key }) })
         .then(r => { if (!r.ok) throw new Error(); return r.json(); })
         .then(() => showApp())
-        .catch(() => showToast('Failed to save key. Try again.', 'error'));
+        .catch(() => showToast('Failed to save key.', 'error'));
 });
 
 
-/* ============================================================
-   SHOW MAIN APP
-   ============================================================ */
+/* ── Show Main App ──────────────────────────────────────────── */
 
 function showApp() {
     loginScreen.style.display = 'none';
@@ -337,11 +317,17 @@ function showApp() {
     appContainer.style.display = 'flex';
 
     if (currentUser) {
-        userDisplayName.textContent = currentUser.name || 'Student';
-        if (currentUser.picture) {
-            userAvatar.src = currentUser.picture;
-            if (railAvatar) railAvatar.src = currentUser.picture;
+        if (userDisplayName) userDisplayName.textContent = currentUser.name || 'Student';
+        const pic = currentUser.picture || '';
+        if (pic) {
+            if (userAvatar) userAvatar.src = pic;
+            if (railAvatar) railAvatar.src = pic;
+            if (topbarAvatar) topbarAvatar.src = pic;
+            if (overlayUserAvatar) overlayUserAvatar.src = pic;
         }
+        if (overlayUserName) overlayUserName.textContent = currentUser.name || 'Student';
+        if (overlayUserEmail) overlayUserEmail.textContent = currentUser.email || '';
+
         fetch('/auth/me?user_id=' + encodeURIComponent(currentUser.google_id))
             .then(r => r.json())
             .then(data => {
@@ -349,38 +335,25 @@ function showApp() {
                     if (data.user.student_profile && profileInput) profileInput.value = data.user.student_profile;
                     if (data.user.openrouter_key && settingsApiKeyInput) settingsApiKeyInput.value = '••••••••••••';
                 }
-            }).catch(() => { });
+            }).catch(() => {});
     }
 
     if (usernameInput) usernameInput.value = currentUsername;
     if (languageSelect) languageSelect.value = currentLanguage;
-
-    document.querySelectorAll('.persona-option').forEach(opt => {
-        opt.classList.toggle('active', opt.dataset.persona === currentPersona);
-    });
-
-    // Sync style selector label
     _syncStyleLabel();
 
     const userId = currentUser ? currentUser.google_id : '';
     fetch('/threads?user_id=' + encodeURIComponent(userId))
         .then(r => r.json())
-        .then(data => {
-            data.threads.forEach(t => threads.push({ id: t.id, title: t.title }));
-            renderHistory();
-        })
-        .catch(() => { });
+        .then(data => { data.threads.forEach(t => threads.push({ id: t.id, title: t.title })); renderHistory(); })
+        .catch(() => {});
 
-    // Ensure sidebar starts collapsed on mobile
     if (window.innerWidth <= 768) closeSidebar();
-
     enterHeroMode();
 }
 
 
-/* ============================================================
-   HERO / BOTTOM INPUT MODE SWITCHING
-   ============================================================ */
+/* ── Hero / Bottom Input Switching ──────────────────────────── */
 
 function enterHeroMode() {
     isHeroMode = true;
@@ -391,7 +364,6 @@ function enterHeroMode() {
         chatContainer.innerHTML = '';
         chatContainer.appendChild(createWelcomeScreen());
     }
-    // Update hero title with username
     _updateHeroTitle();
 }
 
@@ -399,11 +371,8 @@ function _updateHeroTitle() {
     const el = document.getElementById('heroTitle');
     if (!el) return;
     const name = currentUsername || (currentUser ? currentUser.name : '');
-    if (name) {
-        el.innerHTML = `What should we study today, <span class="hero-name">${escapeHtml(name)}</span>?`;
-    } else {
-        el.textContent = 'What should we study today?';
-    }
+    if (name) el.innerHTML = `What should we study today, <span class="hero-name">${escapeHtml(name)}</span>?`;
+    else el.textContent = 'What should we study today?';
 }
 
 function exitHeroMode() {
@@ -414,27 +383,12 @@ function exitHeroMode() {
 }
 
 
-/* ============================================================
-   SIDEBAR
-   ============================================================ */
+/* ── Sidebar (Desktop) ──────────────────────────────────────── */
 
 let sidebarOpen = false;
 
-function _cleanSidebarStyles() {
-    sidebar.style.transition = '';
-    sidebar.style.transform = '';
-    sidebar.style.opacity = '';
-    sidebar.style.display = '';
-    if (sidebarOverlay) {
-        sidebarOverlay.style.transition = '';
-        sidebarOverlay.style.opacity = '';
-        sidebarOverlay.style.display = '';
-    }
-}
-
 function openSidebar() {
     sidebarOpen = true;
-    _cleanSidebarStyles();
     sidebar.classList.remove('collapsed');
     if (sidebarOverlay && window.innerWidth <= 768) sidebarOverlay.classList.add('visible');
     if (sidebarRail) sidebarRail.classList.remove('visible');
@@ -442,42 +396,19 @@ function openSidebar() {
 
 function closeSidebar() {
     sidebarOpen = false;
-    _cleanSidebarStyles();
     sidebar.classList.add('collapsed');
     if (sidebarOverlay) sidebarOverlay.classList.remove('visible');
     if (sidebarRail && window.innerWidth > 768) sidebarRail.classList.add('visible');
 }
 
-function toggleSidebar() {
-    if (sidebarOpen) closeSidebar(); else openSidebar();
-}
+function toggleSidebar() { if (sidebarOpen) closeSidebar(); else openSidebar(); }
 
 if (toggleSidebarBtn) toggleSidebarBtn.addEventListener('click', toggleSidebar);
-
 if (sidebarOverlay) {
     sidebarOverlay.addEventListener('click', closeSidebar);
-    sidebarOverlay.addEventListener('touchstart', (e) => {
-        e.preventDefault(); closeSidebar();
-    }, { passive: false });
+    sidebarOverlay.addEventListener('touchstart', (e) => { e.preventDefault(); closeSidebar(); }, { passive: false });
 }
 
-// Edge swipe — 60px zone, mid-screen horizontal swipe
-let _touchStartX = 0, _touchStartY = 0;
-document.addEventListener('touchstart', (e) => {
-    if (window.innerWidth > 768) return;
-    _touchStartX = e.changedTouches[0].clientX;
-    _touchStartY = e.changedTouches[0].clientY;
-}, { passive: true });
-
-document.addEventListener('touchend', (e) => {
-    if (window.innerWidth > 768) return;
-    const dx = e.changedTouches[0].clientX - _touchStartX;
-    const dy = Math.abs(e.changedTouches[0].clientY - _touchStartY);
-    if (dy > Math.abs(dx) * 0.8) return;
-    if (!sidebarOpen && _touchStartX < 60 && dx > 50) openSidebar();
-    if (sidebarOpen && dx < -50) closeSidebar();
-}, { passive: true });
-
 if (railExpandBtn) railExpandBtn.addEventListener('click', openSidebar);
 if (railNewChatBtn) railNewChatBtn.addEventListener('click', () => startNewChat());
 if (railProfileBtn) railProfileBtn.addEventListener('click', () => {
@@ -485,8 +416,6 @@ if (railProfileBtn) railProfileBtn.addEventListener('click', () => {
     setTimeout(() => { if (userProfileBtn) userProfileBtn.click(); }, 150);
 });
 
-const mobileFabToggle = document.getElementById('mobileFabToggle');
-if (mobileFabToggle) mobileFabToggle.addEventListener('click', toggleSidebar);
 if (newChatBtn) newChatBtn.addEventListener('click', startNewChat);
 
 function startNewChat() {
@@ -495,19 +424,98 @@ function startNewChat() {
     chatContainer.appendChild(createWelcomeScreen());
     enterHeroMode();
     renderHistory();
-    if (window.innerWidth <= 768) closeSidebar();
+    if (window.innerWidth <= 768) { closeSidebar(); _closeAllOverlays(); }
+}
+
+
+/* ── Mobile Overlays ───────────��────────────────────────────── */
+
+function _closeAllOverlays() {
+    if (accountOverlay) accountOverlay.classList.remove('open');
+    if (historyOverlay) historyOverlay.classList.remove('open');
+}
+
+if (topbarProfileBtn) topbarProfileBtn.addEventListener('click', () => {
+    _closeAllOverlays();
+    if (accountOverlay) accountOverlay.classList.add('open');
+});
+
+if (accountOverlayClose) accountOverlayClose.addEventListener('click', () => {
+    if (accountOverlay) accountOverlay.classList.remove('open');
+});
+
+if (topbarHistoryBtn) topbarHistoryBtn.addEventListener('click', () => {
+    _closeAllOverlays();
+    _renderOverlayHistory();
+    if (historyOverlay) historyOverlay.classList.add('open');
+});
+
+if (historyOverlayClose) historyOverlayClose.addEventListener('click', () => {
+    if (historyOverlay) historyOverlay.classList.remove('open');
+});
+
+if (topbarNewChatBtn) topbarNewChatBtn.addEventListener('click', () => {
+    _closeAllOverlays();
+    startNewChat();
+});
+
+if (overlaySettingsBtn) overlaySettingsBtn.addEventListener('click', () => {
+    _closeAllOverlays();
+    settingsOverlay.classList.add('show');
+});
+
+if (overlayProfileBtn) overlayProfileBtn.addEventListener('click', () => {
+    _closeAllOverlays();
+    // Open settings on Profile tab
+    document.querySelectorAll('.settings-nav-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+    const btn = document.querySelector('.settings-nav-btn[data-tab="personalization"]');
+    const tab = document.getElementById('tab-personalization');
+    if (btn) btn.classList.add('active');
+    if (tab) tab.classList.add('active');
+    settingsOverlay.classList.add('show');
+});
+
+if (overlayLogoutBtn) overlayLogoutBtn.addEventListener('click', () => {
+    localStorage.removeItem('stemcopilot_user');
+    localStorage.removeItem('stemcopilot_username');
+    currentUser = null;
+    location.reload();
+});
+
+function _renderOverlayHistory() {
+    if (!overlayHistoryList) return;
+    overlayHistoryList.innerHTML = '';
+    if (threads.length === 0) {
+        if (overlayHistoryEmpty) overlayHistoryEmpty.style.display = 'flex';
+        return;
+    }
+    if (overlayHistoryEmpty) overlayHistoryEmpty.style.display = 'none';
+    threads.forEach(thread => {
+        const item = document.createElement('button');
+        item.className = `overlay-history-item ${thread.id === currentThreadId ? 'active' : ''}`;
+        item.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span class="overlay-history-title">${escapeHtml(thread.title)}</span>
+        `;
+        item.addEventListener('click', () => {
+            _closeAllOverlays();
+            loadThread(thread.id);
+        });
+        overlayHistoryList.appendChild(item);
+    });
 }
 
+
+/* ── Create Welcome Screen (Dynamic) ───────────────────────── */
+
 function createWelcomeScreen() {
     const div = document.createElement('div');
     div.className = 'hero-welcome';
     div.id = 'welcomeScreen';
 
     const name = currentUsername || (currentUser ? currentUser.name : '');
-    const titleHtml = name
-        ? `What should we study today, <span class="hero-name">${escapeHtml(name)}</span>?`
-        : `What should we study today?`;
-
+    const titleHtml = name ? `What should we study today, <span class="hero-name">${escapeHtml(name)}</span>?` : `What should we study today?`;
     const styleLabel = _PERSONA_LABELS[currentPersona] || 'Vidyut';
 
     div.innerHTML = `
@@ -530,87 +538,54 @@ function createWelcomeScreen() {
                         <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
                     </button>
                     <div class="style-dropdown" id="heroStyleDropdownDynamic">
-                        <div class="style-option ${currentPersona === 'vidyut' ? 'active' : ''}" data-persona="vidyut">
-                            <div class="style-option-name">Vidyut</div>
-                            <div class="style-option-desc">Calm, clear, step-by-step master teacher. Makes hard concepts obvious.</div>
-                        </div>
-                        <div class="style-option ${currentPersona === 'nerd' ? 'active' : ''}" data-persona="nerd">
-                            <div class="style-option-name">Nerd</div>
-                            <div class="style-option-desc">Deep, rigorous, first-principles. Goes beyond the textbook.</div>
-                        </div>
-                        <div class="style-option ${currentPersona === 'noob' ? 'active' : ''}" data-persona="noob">
-                            <div class="style-option-name">Beginner</div>
-                            <div class="style-option-desc">Patient, step-by-step. Explains like you're seeing it for the first time.</div>
-                        </div>
-                        <div class="style-option ${currentPersona === 'thoughtful' ? 'active' : ''}" data-persona="thoughtful">
-                            <div class="style-option-name">Thoughtful</div>
-                            <div class="style-option-desc">Connects science to the real world. Every formula has a story.</div>
-                        </div>
-                        <div class="style-option ${currentPersona === 'panic' ? 'active' : ''}" data-persona="panic">
-                            <div class="style-option-name">Panic</div>
-                            <div class="style-option-desc">Exam tomorrow? Concise bullets, key formulas, no fluff.</div>
-                        </div>
+                        ${['vidyut','nerd','noob','thoughtful','panic'].map(p => `
+                        <div class="style-option ${currentPersona === p ? 'active' : ''}" data-persona="${p}">
+                            <div class="style-option-name">${_PERSONA_LABELS[p]}</div>
+                            <div class="style-option-desc">${_personaDesc(p)}</div>
+                        </div>`).join('')}
                     </div>
                 </div>
-                <button class="mic-btn" id="heroMicBtnDynamic" title="Voice input">
-                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
-                </button>
-                <button class="send-btn" id="heroSendBtnDynamic">
-                    <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
+                <button class="adaptive-action-btn" id="heroAdaptiveBtnDynamic" title="Voice input">
+                    <svg class="icon-mic" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+                    <svg class="icon-send" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                 </button>
             </div>
         </div>
-        <div class="hero-pills">
-            <button class="hero-pill" data-query="What is the photoelectric effect, and why did Einstein win the Nobel Prize for it?">What is the photoelectric effect and why did Einstein win the Nobel Prize for it?</button>
-            <button class="hero-pill" data-query="Derive the relation between Kp and Kc for a general gaseous equilibrium reaction">Derive the relation between Kp and Kc for gaseous equilibrium</button>
-            <button class="hero-pill" data-query="Solve: A ball is thrown vertically upward with velocity 20 m/s. Find maximum height and time of flight. Take g = 10 m/s^2">A ball thrown up at 20 m/s -- find max height and time of flight</button>
-            <button class="hero-pill" data-query="Explain the concept of limits in calculus with a real-world example. How is it different from the actual value of a function?">Explain limits in calculus with a real-world example</button>
-        </div>
     `;
 
     const dynInput = div.querySelector('#heroInputDynamic');
-    const dynSend = div.querySelector('#heroSendBtnDynamic');
+    const dynAdaptive = div.querySelector('#heroAdaptiveBtnDynamic');
     const dynUpload = div.querySelector('#heroUploadBtnDynamic');
     const dynFileInput = div.querySelector('#heroImageInputDynamic');
-    const dynMic = div.querySelector('#heroMicBtnDynamic');
     const dynImgPreview = div.querySelector('#heroImagePreviewDynamic');
     const dynImgThumb = div.querySelector('#heroImagePreviewThumbDynamic');
     const dynImgRemove = div.querySelector('#heroImagePreviewRemoveDynamic');
-
-    // Style selector in dynamic hero
     const dynStyleBtn = div.querySelector('#heroStyleSelectorBtnDynamic');
     const dynStyleDropdown = div.querySelector('#heroStyleDropdownDynamic');
     const dynStyleLabel = div.querySelector('#heroStyleSelectorLabelDynamic');
 
+    // Auto-resize
     dynInput.addEventListener('input', function () {
-        this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
+        this.style.height = '54px';
+        this.style.height = this.scrollHeight + 'px';
     });
+
+    // Adaptive button logic
+    _bindAdaptiveBtn(dynAdaptive, dynInput);
+
     dynInput.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault(); userInput.value = dynInput.value; sendMessage();
-        }
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); userInput.value = dynInput.value; sendMessage(); }
     });
-    dynSend.addEventListener('click', () => { userInput.value = dynInput.value; sendMessage(); });
+
     dynUpload.addEventListener('click', () => dynFileInput.click());
     dynFileInput.addEventListener('change', () => {
-        if (dynFileInput.files[0]) {
-            handleImageFile(dynFileInput.files[0]);
-            _showHeroImagePreview(dynImgPreview, dynImgThumb);
-        }
-    });
-    dynImgRemove.addEventListener('click', () => {
-        _clearImage();
-        dynImgPreview.classList.remove('visible');
+        if (dynFileInput.files[0]) { handleImageFile(dynFileInput.files[0]); _showHeroImagePreview(dynImgPreview, dynImgThumb); }
     });
-    if (dynMic) _bindMic(dynMic, dynInput);
+    dynImgRemove.addEventListener('click', () => { _clearImage(); dynImgPreview.classList.remove('visible'); });
 
-    // Style selector events
+    // Style selector
     if (dynStyleBtn) {
-        dynStyleBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            dynStyleDropdown.classList.toggle('show');
-            dynStyleBtn.classList.toggle('open');
-        });
+        dynStyleBtn.addEventListener('click', (e) => { e.stopPropagation(); dynStyleDropdown.classList.toggle('show'); dynStyleBtn.classList.toggle('open'); });
     }
     if (dynStyleDropdown) {
         dynStyleDropdown.querySelectorAll('.style-option').forEach(opt => {
@@ -620,19 +595,25 @@ function createWelcomeScreen() {
                 dynStyleDropdown.classList.remove('show');
                 dynStyleBtn.classList.remove('open');
                 dynStyleLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Vidyut';
-                dynStyleDropdown.querySelectorAll('.style-option').forEach(o => {
-                    o.classList.toggle('active', o.dataset.persona === currentPersona);
-                });
+                dynStyleDropdown.querySelectorAll('.style-option').forEach(o => o.classList.toggle('active', o.dataset.persona === currentPersona));
             });
         });
     }
 
-    div.querySelectorAll('.hero-pill').forEach(p => {
-        p.addEventListener('click', () => { userInput.value = p.dataset.query; sendMessage(); });
-    });
     return div;
 }
 
+function _personaDesc(p) {
+    const descs = {
+        vidyut: 'Calm, clear, step-by-step master teacher. Makes hard concepts obvious.',
+        nerd: 'Deep, rigorous, first-principles. Goes beyond the textbook.',
+        noob: 'Patient, step-by-step. Explains like you\'re seeing it for the first time.',
+        thoughtful: 'Connects science to the real world. Every formula has a story.',
+        panic: 'Exam tomorrow? Concise bullets, key formulas, no fluff.',
+    };
+    return descs[p] || '';
+}
+
 function _showHeroImagePreview(previewEl, thumbEl) {
     if (pendingImageDataUrl && previewEl && thumbEl) {
         thumbEl.style.backgroundImage = `url(${pendingImageDataUrl})`;
@@ -640,12 +621,16 @@ function _showHeroImagePreview(previewEl, thumbEl) {
     }
 }
 
+
+/* ── Chat History ───────────────────────────────────────────── */
+
 function addThreadToSidebar(id, title) {
     threads.unshift({ id, title });
     renderHistory();
 }
 
 function renderHistory() {
+    if (!chatHistoryList) return;
     chatHistoryList.innerHTML = '';
     threads.forEach(thread => {
         const item = document.createElement('div');
@@ -681,38 +666,32 @@ function loadThread(threadId) {
     exitHeroMode();
     if (window.innerWidth <= 768) closeSidebar();
 
-    fetch('/history/' + threadId)
-        .then(res => res.json())
-        .then(data => {
-            data.messages.forEach(msg => {
-                const sender = msg.role === 'user' ? 'user' : 'ai';
-                let textContent = msg.content;
-                if (Array.isArray(msg.content)) {
-                    textContent = msg.content.filter(p => p.type === 'text').map(p => p.text).join('');
-                }
-                const el = appendMessage(sender, textContent);
-                if (sender === 'ai') renderFinalContent(el, textContent);
-            });
+    fetch('/history/' + threadId).then(res => res.json()).then(data => {
+        data.messages.forEach(msg => {
+            const sender = msg.role === 'user' ? 'user' : 'ai';
+            let textContent = msg.content;
+            if (Array.isArray(msg.content)) textContent = msg.content.filter(p => p.type === 'text').map(p => p.text).join('');
+            const el = appendMessage(sender, textContent);
+            if (sender === 'ai') renderFinalContent(el, textContent);
         });
+    });
 }
 
 
-/* ============================================================
-   OPTIONS MENU (Rename / Delete)
-   ============================================================ */
+/* ── Options Menu ───────────────────────────────────────────── */
 
 function toggleMenu(e, btn) {
     e.stopPropagation(); closeAllMenus();
     btn.nextElementSibling.classList.add('show');
     btn.classList.add('menu-open');
 }
+
 document.addEventListener('click', closeAllMenus);
 
 function closeAllMenus() {
     document.querySelectorAll('.options-menu.show').forEach(m => m.classList.remove('show'));
     document.querySelectorAll('.options-btn.menu-open').forEach(b => b.classList.remove('menu-open'));
     if (userMenu) userMenu.classList.remove('show');
-    // Close style dropdown too
     if (styleDropdown) { styleDropdown.classList.remove('show'); styleSelectorBtn?.classList.remove('open'); }
 }
 
@@ -744,10 +723,7 @@ function renameChat(e, optionEl) {
         titleSpan.innerText = newTitle; input.replaceWith(titleSpan);
         const thread = threads.find(t => t.id === threadId);
         if (thread) thread.title = newTitle;
-        fetch('/rename', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ thread_id: threadId, title: newTitle })
-        });
+        fetch('/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ thread_id: threadId, title: newTitle }) });
     }
     input.addEventListener('blur', saveRename);
     input.addEventListener('keydown', evt => {
@@ -758,25 +734,13 @@ function renameChat(e, optionEl) {
 }
 
 
-/* ============================================================
-   USER MENU & SETTINGS
-   ============================================================ */
+/* ── User Menu & Settings ───────────────────────────────────── */
 
-if (userProfileBtn) userProfileBtn.addEventListener('click', (e) => {
-    e.stopPropagation(); userMenu.classList.toggle('show');
-});
-if (openSettingsBtn) openSettingsBtn.addEventListener('click', () => {
-    userMenu.classList.remove('show'); settingsOverlay.classList.add('show');
-});
+if (userProfileBtn) userProfileBtn.addEventListener('click', (e) => { e.stopPropagation(); userMenu.classList.toggle('show'); });
+if (openSettingsBtn) openSettingsBtn.addEventListener('click', () => { userMenu.classList.remove('show'); settingsOverlay.classList.add('show'); });
 if (settingsCloseBtn) settingsCloseBtn.addEventListener('click', () => settingsOverlay.classList.remove('show'));
-if (settingsOverlay) settingsOverlay.addEventListener('click', (e) => {
-    if (e.target === settingsOverlay) settingsOverlay.classList.remove('show');
-});
-if (logoutBtn) logoutBtn.addEventListener('click', () => {
-    localStorage.removeItem('stemcopilot_user');
-    localStorage.removeItem('stemcopilot_username');
-    currentUser = null; location.reload();
-});
+if (settingsOverlay) settingsOverlay.addEventListener('click', (e) => { if (e.target === settingsOverlay) settingsOverlay.classList.remove('show'); });
+if (logoutBtn) logoutBtn.addEventListener('click', () => { localStorage.removeItem('stemcopilot_user'); localStorage.removeItem('stemcopilot_username'); currentUser = null; location.reload(); });
 
 document.querySelectorAll('.settings-nav-btn').forEach(btn => {
     btn.addEventListener('click', () => {
@@ -788,100 +752,56 @@ document.querySelectorAll('.settings-nav-btn').forEach(btn => {
     });
 });
 
-if (usernameInput) usernameInput.addEventListener('input', () => {
-    currentUsername = usernameInput.value.trim();
-    localStorage.setItem('stemcopilot_username', currentUsername);
-});
-if (languageSelect) languageSelect.addEventListener('change', () => {
-    currentLanguage = languageSelect.value;
-    localStorage.setItem('stemcopilot_language', currentLanguage);
-});
-
-document.querySelectorAll('.persona-option').forEach(opt => {
-    opt.addEventListener('click', () => {
-        document.querySelectorAll('.persona-option').forEach(o => o.classList.remove('active'));
-        opt.classList.add('active');
-        currentPersona = opt.dataset.persona;
-        localStorage.setItem('stemcopilot_persona', currentPersona);
-        _syncStyleLabel();
-        _syncStyleDropdown();
-    });
-});
+if (usernameInput) usernameInput.addEventListener('input', () => { currentUsername = usernameInput.value.trim(); localStorage.setItem('stemcopilot_username', currentUsername); });
+if (languageSelect) languageSelect.addEventListener('change', () => { currentLanguage = languageSelect.value; localStorage.setItem('stemcopilot_language', currentLanguage); });
 
 if (saveApiKeyBtn) saveApiKeyBtn.addEventListener('click', () => {
     const key = settingsApiKeyInput.value.trim();
     if (!key || key.startsWith('••')) return;
     if (!currentUser) return;
-    saveApiKeyBtn.disabled = true;
-    saveApiKeyBtn.textContent = 'Saving...';
-    fetch('/user/apikey', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ user_id: currentUser.google_id, key: key }),
-    }).then(r => {
-        if (!r.ok) throw new Error();
-        return r.json();
-    }).then(() => {
-        settingsApiKeyInput.value = '••••••••••••';
-        showToast('API key saved successfully!', 'success');
-    }).catch(() => {
-        showToast('Failed to save API key. Please try again.', 'error');
-    }).finally(() => {
-        saveApiKeyBtn.disabled = false;
-        saveApiKeyBtn.textContent = 'Save Key';
-    });
+    saveApiKeyBtn.disabled = true; saveApiKeyBtn.textContent = 'Saving...';
+    fetch('/user/apikey', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: currentUser.google_id, key: key }) })
+        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
+        .then(() => { settingsApiKeyInput.value = '••••••••••••'; showToast('API key saved!', 'success'); })
+        .catch(() => showToast('Failed to save API key.', 'error'))
+        .finally(() => { saveApiKeyBtn.disabled = false; saveApiKeyBtn.textContent = 'Save Key'; });
 });
 
 if (saveProfileBtn) saveProfileBtn.addEventListener('click', () => {
     if (!currentUser) return;
-    fetch('/user/profile', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ user_id: currentUser.google_id, profile: profileInput.value }),
-    }).then(r => {
-        if (!r.ok) throw new Error();
-        showToast('Profile saved!', 'success');
-    }).catch(() => showToast('Failed to save profile.', 'error'));
+    fetch('/user/profile', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: currentUser.google_id, profile: profileInput.value }) })
+        .then(r => { if (!r.ok) throw new Error(); showToast('Profile saved!', 'success'); })
+        .catch(() => showToast('Failed to save profile.', 'error'));
 });
 
 
-/* ============================================================
-   TEACHING STYLE SELECTOR (in input bar)
-   ============================================================ */
+/* ── Teaching Style Selector ────────────────────────────────── */
+
+function _setPersona(persona) {
+    currentPersona = persona;
+    localStorage.setItem('stemcopilot_persona', currentPersona);
+    _syncStyleLabel();
+    _syncStyleDropdown();
+}
 
 function _syncStyleLabel() {
-    if (styleSelectorLabel) {
-        styleSelectorLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Vidyut';
-    }
+    if (styleSelectorLabel) styleSelectorLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Vidyut';
 }
 
 function _syncStyleDropdown() {
     if (!styleDropdown) return;
-    styleDropdown.querySelectorAll('.style-option').forEach(opt => {
-        opt.classList.toggle('active', opt.dataset.persona === currentPersona);
-    });
+    styleDropdown.querySelectorAll('.style-option').forEach(opt => opt.classList.toggle('active', opt.dataset.persona === currentPersona));
 }
 
 if (styleSelectorBtn) {
-    styleSelectorBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        styleDropdown.classList.toggle('show');
-        styleSelectorBtn.classList.toggle('open');
-    });
+    styleSelectorBtn.addEventListener('click', (e) => { e.stopPropagation(); styleDropdown.classList.toggle('show'); styleSelectorBtn.classList.toggle('open'); });
 }
 
 if (styleDropdown) {
     styleDropdown.querySelectorAll('.style-option').forEach(opt => {
         opt.addEventListener('click', (e) => {
             e.stopPropagation();
-            currentPersona = opt.dataset.persona;
-            localStorage.setItem('stemcopilot_persona', currentPersona);
-            _syncStyleLabel();
-            _syncStyleDropdown();
-            // Also sync settings modal persona options
-            document.querySelectorAll('.persona-option').forEach(o => {
-                o.classList.toggle('active', o.dataset.persona === currentPersona);
-            });
+            _setPersona(opt.dataset.persona);
             styleDropdown.classList.remove('show');
             styleSelectorBtn.classList.remove('open');
         });
@@ -892,20 +812,33 @@ _syncStyleLabel();
 _syncStyleDropdown();
 
 
-/* ============================================================
-   VOICE INPUT (Web Speech API)
-   ============================================================ */
+/* ── Adaptive Mic/Send Button ───────────────────────────────── */
 
-function _bindMic(btn, targetInput) {
-    if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) {
-        btn.style.display = 'none';
-        return;
-    }
+function _bindAdaptiveBtn(btn, inputEl) {
+    if (!btn || !inputEl) return;
+
+    // Watch input to toggle mic ↔ send
+    inputEl.addEventListener('input', () => {
+        btn.classList.toggle('has-text', inputEl.value.trim().length > 0);
+    });
 
+    // Mic / Send / Voice logic
     const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
     let recognition = null;
 
     btn.addEventListener('click', () => {
+        const hasText = inputEl.value.trim().length > 0;
+
+        if (hasText) {
+            // Act as send
+            if (inputEl === userInput) sendMessage();
+            else { userInput.value = inputEl.value; sendMessage(); }
+            return;
+        }
+
+        // Act as mic
+        if (!SpeechRecognition) { showToast('Voice input not supported in this browser.', 'error'); return; }
+
         if (btn.classList.contains('listening')) {
             if (recognition) recognition.stop();
             btn.classList.remove('listening');
@@ -916,16 +849,13 @@ function _bindMic(btn, targetInput) {
         recognition.lang = 'en-IN';
         recognition.interimResults = true;
         recognition.continuous = false;
-
         btn.classList.add('listening');
 
         recognition.onresult = (event) => {
             let transcript = '';
-            for (let i = event.resultIndex; i < event.results.length; i++) {
-                transcript += event.results[i][0].transcript;
-            }
-            targetInput.value = transcript;
-            targetInput.dispatchEvent(new Event('input'));
+            for (let i = event.resultIndex; i < event.results.length; i++) transcript += event.results[i][0].transcript;
+            inputEl.value = transcript;
+            inputEl.dispatchEvent(new Event('input'));
         };
 
         recognition.onend = () => btn.classList.remove('listening');
@@ -934,13 +864,14 @@ function _bindMic(btn, targetInput) {
     });
 }
 
-if (micBtn && userInput) _bindMic(micBtn, userInput);
-if (heroMicBtn && heroInput) _bindMic(heroMicBtn, heroInput);
+// Bind bottom input adaptive button
+_bindAdaptiveBtn(adaptiveBtn, userInput);
 
+// Bind hero adaptive button (static HTML version)
+_bindAdaptiveBtn(heroAdaptiveBtn, heroInput);
 
-/* ============================================================
-   IMAGE UPLOAD
-   ============================================================ */
+
+/* ── Image Upload ───────────────────────────────────────────── */
 
 if (uploadBtn) uploadBtn.addEventListener('click', () => imageInput.click());
 if (imageInput) imageInput.addEventListener('change', () => { if (imageInput.files[0]) handleImageFile(imageInput.files[0]); });
@@ -948,7 +879,6 @@ if (heroUploadBtn) heroUploadBtn.addEventListener('click', () => heroImageInput.
 if (heroImageInput) heroImageInput.addEventListener('change', () => {
     if (heroImageInput.files[0]) {
         handleImageFile(heroImageInput.files[0]);
-        // Show hero image preview
         if (heroImagePreview && heroImagePreviewThumb && pendingImageDataUrl) {
             heroImagePreviewThumb.style.backgroundImage = `url(${pendingImageDataUrl})`;
             heroImagePreview.classList.add('visible');
@@ -960,9 +890,7 @@ document.addEventListener('paste', (e) => {
     const items = e.clipboardData?.items;
     if (!items) return;
     for (const item of items) {
-        if (item.type.startsWith('image/')) {
-            e.preventDefault(); handleImageFile(item.getAsFile()); return;
-        }
+        if (item.type.startsWith('image/')) { e.preventDefault(); handleImageFile(item.getAsFile()); return; }
     }
 });
 
@@ -974,14 +902,10 @@ function handleImageFile(file) {
         pendingImageDataUrl = dataUrl;
         if (imagePreviewThumb) imagePreviewThumb.style.backgroundImage = `url(${dataUrl})`;
         if (imagePreviewBar) imagePreviewBar.style.display = 'flex';
-        // Also show in hero if currently in hero mode
         if (isHeroMode) {
             const hp = document.getElementById('heroImagePreviewDynamic') || heroImagePreview;
             const ht = document.getElementById('heroImagePreviewThumbDynamic') || heroImagePreviewThumb;
-            if (hp && ht) {
-                ht.style.backgroundImage = `url(${dataUrl})`;
-                hp.classList.add('visible');
-            }
+            if (hp && ht) { ht.style.backgroundImage = `url(${dataUrl})`; hp.classList.add('visible'); }
         }
     };
     reader.readAsDataURL(file);
@@ -995,15 +919,10 @@ function _clearImage() {
 }
 
 if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', _clearImage);
-if (heroImagePreviewRemove) heroImagePreviewRemove.addEventListener('click', () => {
-    _clearImage();
-    if (heroImagePreview) heroImagePreview.classList.remove('visible');
-});
+if (heroImagePreviewRemove) heroImagePreviewRemove.addEventListener('click', () => { _clearImage(); if (heroImagePreview) heroImagePreview.classList.remove('visible'); });
 
 
-/* ============================================================
-   CHAT & STREAMING — with REAL stop button
-   ============================================================ */
+/* ── Chat & Streaming ───────────────────────────────────────── */
 
 let currentAbortController = null;
 let currentStreamReader = null;
@@ -1011,62 +930,33 @@ let currentStreamStopped = false;
 let currentRenderTimer = null;
 
 function _showStopBtn() {
-    if (sendBtn) sendBtn.style.display = 'none';
+    if (adaptiveBtn) adaptiveBtn.style.display = 'none';
     if (stopBtn) { stopBtn.style.display = 'flex'; stopBtn.classList.add('visible'); }
 }
-function _showSendBtn() {
+
+function _showAdaptiveBtn() {
     if (stopBtn) { stopBtn.style.display = 'none'; stopBtn.classList.remove('visible'); }
-    if (sendBtn) sendBtn.style.display = 'flex';
+    if (adaptiveBtn) adaptiveBtn.style.display = 'flex';
 }
 
 if (stopBtn) {
     stopBtn.addEventListener('click', () => {
         currentStreamStopped = true;
         if (currentRenderTimer) { clearTimeout(currentRenderTimer); currentRenderTimer = null; }
-        if (currentStreamReader) {
-            try { currentStreamReader.cancel(); } catch (_) { }
-            currentStreamReader = null;
-        }
-        if (currentAbortController) {
-            currentAbortController.abort();
-            currentAbortController = null;
-        }
+        if (currentStreamReader) { try { currentStreamReader.cancel(); } catch (_) {} currentStreamReader = null; }
+        if (currentAbortController) { currentAbortController.abort(); currentAbortController = null; }
         isSending = false;
-        _showSendBtn();
-        const currentThinking = document.getElementById('currentThinking');
-        if (currentThinking) currentThinking.style.display = 'none';
+        _showAdaptiveBtn();
+        const ct = document.getElementById('currentThinking');
+        if (ct) ct.style.display = 'none';
         document.querySelectorAll('.ai-avatar.pulsing').forEach(el => el.classList.remove('pulsing'));
         document.querySelectorAll('.message-content.cursor').forEach(el => el.classList.remove('cursor'));
     });
 }
 
 if (userInput) {
-    userInput.addEventListener('input', function () {
-        this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
-    });
-    userInput.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
-    });
-}
-
-if (sendBtn) sendBtn.addEventListener('click', sendMessage);
-
-document.querySelectorAll('.hero-pill').forEach(p => {
-    p.addEventListener('click', () => { userInput.value = p.dataset.query; sendMessage(); });
-});
-
-if (heroSendBtn) heroSendBtn.addEventListener('click', () => {
-    userInput.value = heroInput.value; sendMessage();
-});
-if (heroInput) {
-    heroInput.addEventListener('input', function () {
-        this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
-    });
-    heroInput.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault(); userInput.value = heroInput.value; sendMessage();
-        }
-    });
+    userInput.addEventListener('input', function () { this.style.height = '54px'; this.style.height = this.scrollHeight + 'px'; });
+    userInput.addEventListener('keydown', function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
 }
 
 function sendMessage() {
@@ -1083,11 +973,12 @@ function sendMessage() {
             <div>${escapeHtml(text)}</div>
         </div>`;
         chatContainer.appendChild(rowDiv);
-    } else {
-        appendMessage('user', text);
-    }
+    } else appendMessage('user', text);
 
-    userInput.value = ''; userInput.style.height = '54px';
+    userInput.value = '';
+    userInput.style.height = '54px';
+    // Reset adaptive btn state
+    if (adaptiveBtn) adaptiveBtn.classList.remove('has-text');
 
     const exists = threads.find(t => t.id === currentThreadId);
     if (!exists) {
@@ -1102,8 +993,7 @@ function sendMessage() {
 
 function streamResponse(text) {
     const imageData = pendingImage || '';
-    pendingImage = null;
-    pendingImageDataUrl = null;
+    pendingImage = null; pendingImageDataUrl = null;
     if (imagePreviewBar) imagePreviewBar.style.display = 'none';
     if (imageInput) imageInput.value = '';
 
@@ -1130,8 +1020,8 @@ function streamResponse(text) {
     let rawText = '';
     let firstToken = true;
     currentStreamStopped = false;
-
     currentRenderTimer = null;
+
     const RENDER_INTERVAL = 120;
     function scheduleRender() {
         if (currentRenderTimer || currentStreamStopped) return;
@@ -1152,10 +1042,8 @@ function streamResponse(text) {
     currentAbortController = new AbortController();
 
     fetch('/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload),
-        signal: currentAbortController.signal,
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload), signal: currentAbortController.signal,
     }).then(response => {
         const reader = response.body.getReader();
         currentStreamReader = reader;
@@ -1177,10 +1065,7 @@ function streamResponse(text) {
                     if (currentStreamStopped) return;
                     if (!line.startsWith('data: ')) continue;
                     const pl = line.substring(6);
-                    if (pl === '[DONE]') {
-                        finishStream(thinkingEl, contentEl, rawText, currentRenderTimer, actionsEl);
-                        currentStreamStopped = true; return;
-                    }
+                    if (pl === '[DONE]') { finishStream(thinkingEl, contentEl, rawText, currentRenderTimer, actionsEl); currentStreamStopped = true; return; }
                     try {
                         const data = JSON.parse(pl);
                         if (data.status === 'thinking') { thinkingText.textContent = data.message; continue; }
@@ -1188,46 +1073,32 @@ function streamResponse(text) {
                             thinkingEl.style.display = 'none';
                             contentEl.style.display = 'block';
                             contentEl.innerHTML = `<div class="error-message">${escapeHtml(data.error)}</div>`;
-                            isSending = false; _showSendBtn(); currentStreamStopped = true; return;
+                            isSending = false; _showAdaptiveBtn(); currentStreamStopped = true; return;
                         }
                         if (data.token !== undefined) {
                             if (currentStreamStopped) return;
-                            if (firstToken) {
-                                thinkingEl.style.display = 'none';
-                                contentEl.style.display = 'block';
-                                contentEl.classList.add('cursor');
-                                firstToken = false;
-                            }
+                            if (firstToken) { thinkingEl.style.display = 'none'; contentEl.style.display = 'block'; contentEl.classList.add('cursor'); firstToken = false; }
                             rawText += data.token;
                             scheduleRender();
                         }
-                    } catch (_) { }
+                    } catch (_) {}
                 }
-
                 if (!currentStreamStopped) read();
             }).catch(err => {
                 if (err.name === 'AbortError' || currentStreamStopped) return;
-                thinkingEl.style.display = 'none';
-                contentEl.style.display = 'block';
+                thinkingEl.style.display = 'none'; contentEl.style.display = 'block';
                 if (!rawText) contentEl.innerHTML = '<div class="error-message">Connection lost. Please try again.</div>';
-                isSending = false; _showSendBtn();
+                isSending = false; _showAdaptiveBtn();
             });
         }
         read();
     }).catch(err => {
-        if (err.name === 'AbortError' || currentStreamStopped) {
-            thinkingEl.style.display = 'none';
-            contentEl.style.display = 'block';
-            isSending = false; _showSendBtn();
-            return;
-        }
-        thinkingEl.style.display = 'none';
-        contentEl.style.display = 'block';
-        contentEl.innerHTML = '<div class="error-message">Could not connect to the server. Please try again.</div>';
-        isSending = false; _showSendBtn();
+        if (err.name === 'AbortError' || currentStreamStopped) { thinkingEl.style.display = 'none'; contentEl.style.display = 'block'; isSending = false; _showAdaptiveBtn(); return; }
+        thinkingEl.style.display = 'none'; contentEl.style.display = 'block';
+        contentEl.innerHTML = '<div class="error-message">Could not connect to the server.</div>';
+        isSending = false; _showAdaptiveBtn();
     }).finally(() => {
-        currentAbortController = null;
-        currentStreamReader = null;
+        currentAbortController = null; currentStreamReader = null;
         const avatar = rowDiv.querySelector('#avatarThinking');
         if (avatar) avatar.classList.remove('pulsing');
     });
@@ -1241,22 +1112,19 @@ function finishStream(thinkingEl, contentEl, rawText, timer, actionsEl) {
     contentEl.classList.remove('cursor');
     renderFinalContent(contentEl, rawText);
     isSending = false;
-    _showSendBtn();
+    _showAdaptiveBtn();
     const row = thinkingEl.closest('.message-row');
-    if (row) {
-        const avatar = row.querySelector('.ai-avatar');
-        if (avatar) avatar.classList.remove('pulsing');
-    }
-    // Show copy/regenerate actions
+    if (row) { const avatar = row.querySelector('.ai-avatar'); if (avatar) avatar.classList.remove('pulsing'); }
+
     if (actionsEl && rawText) {
         actionsEl.style.display = 'flex';
         actionsEl.classList.add('visible');
         actionsEl.innerHTML = `
-            <button class="msg-action-btn" data-action="copy" title="Copy to clipboard">
+            <button class="msg-action-btn" data-action="copy" title="Copy">
                 <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                 Copy
             </button>
-            <button class="msg-action-btn" data-action="regenerate" title="Regenerate response">
+            <button class="msg-action-btn" data-action="regenerate" title="Regenerate">
                 <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
                 Regenerate
             </button>
@@ -1268,23 +1136,16 @@ function finishStream(thinkingEl, contentEl, rawText, timer, actionsEl) {
                 navigator.clipboard.writeText(rawText).then(() => {
                     copyBtn.querySelector('svg + *').textContent = 'Copied';
                     setTimeout(() => { copyBtn.querySelector('svg + *').textContent = 'Copy'; }, 1500);
-                }).catch(() => showToast('Could not copy to clipboard', 'error'));
+                }).catch(() => showToast('Could not copy.', 'error'));
             });
         }
         if (regenBtn) {
             regenBtn.addEventListener('click', () => {
-                // Find the last user message and re-send
                 const userMessages = chatContainer.querySelectorAll('.message-row.user');
                 if (userMessages.length) {
                     const lastUser = userMessages[userMessages.length - 1];
                     const mc = lastUser.querySelector('.message-content');
-                    if (mc) {
-                        // Remove the AI response row
-                        row.remove();
-                        // Resend
-                        const lastText = mc.textContent.trim();
-                        if (lastText) streamResponse(lastText);
-                    }
+                    if (mc) { row.remove(); const lastText = mc.textContent.trim(); if (lastText) streamResponse(lastText); }
                 }
             });
         }
@@ -1292,9 +1153,7 @@ function finishStream(thinkingEl, contentEl, rawText, timer, actionsEl) {
 }
 
 
-/* ============================================================
-   MESSAGE HELPERS
-   ============================================================ */
+/* ── Message Helpers ────────────────────────────────────────── */
 
 function appendMessage(sender, text) {
     const rowDiv = document.createElement('div');
@@ -1318,9 +1177,7 @@ function escapeHtml(text) {
 }
 
 
-/* ============================================================
-   RENDERER — Markdown + KaTeX + mhchem
-   ============================================================ */
+/* ── Renderer — Markdown + KaTeX + mhchem ───────────────────── */
 
 function renderFinalContent(element, rawText) {
     if (!rawText) return;
@@ -1347,32 +1204,22 @@ function renderFinalContent(element, rawText) {
 }
 
 
-/* ============================================================
-   PWA — Service Worker + Install Prompt
-   ============================================================ */
+/* ── PWA ────────────────────────────────────────────────────── */
 
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/sw.js').catch(() => { });
-}
+if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
 
 let deferredPrompt = null;
 
 window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    deferredPrompt = e;
+    e.preventDefault(); deferredPrompt = e;
     const dismissed = localStorage.getItem('stemcopilot_install_dismissed');
-    if (!dismissed && installBanner) {
-        installBanner.style.display = 'flex';
-    }
+    if (!dismissed && installBanner) installBanner.style.display = 'flex';
 });
 
 if (installBtn) installBtn.addEventListener('click', () => {
     if (deferredPrompt) {
         deferredPrompt.prompt();
-        deferredPrompt.userChoice.then(() => {
-            deferredPrompt = null;
-            if (installBanner) installBanner.style.display = 'none';
-        });
+        deferredPrompt.userChoice.then(() => { deferredPrompt = null; if (installBanner) installBanner.style.display = 'none'; });
     }
 });
 
@@ -1382,19 +1229,11 @@ if (installDismiss) installDismiss.addEventListener('click', () => {
 });
 
 
-/* ============================================================
-   INIT
-   ============================================================ */
+/* ── Init ───────────────────────────────────────────────────── */
 
-// Ensure sidebar starts collapsed in DOM (matches CSS default)
 if (sidebar) sidebar.classList.add('collapsed');
 
-// Lock screen to portrait on mobile
-try {
-    if (screen.orientation && screen.orientation.lock) {
-        screen.orientation.lock('portrait').catch(() => { });
-    }
-} catch (_) { }
+try { if (screen.orientation && screen.orientation.lock) screen.orientation.lock('portrait').catch(() => {}); } catch (_) {}
 
 window.addEventListener('load', () => {
     checkExistingSession();

static/index.html

@@ -28,26 +28,26 @@
 
 <body>
 
-    <!-- ==================== THEME TOGGLE (persistent, all screens) ==================== -->
-    <button class="theme-toggle-btn" id="themeToggleBtn" title="Toggle dark / light mode">
-        <svg class="icon-sun" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="5" />
-            <line x1="12" y1="1" x2="12" y2="3" />
-            <line x1="12" y1="21" x2="12" y2="23" />
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-            <line x1="1" y1="12" x2="3" y2="12" />
-            <line x1="21" y1="12" x2="23" y2="12" />
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-        </svg>
-        <svg class="icon-moon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-        </svg>
-    </button>
-
     <!-- ==================== LOGIN SCREEN ==================== -->
     <div class="login-screen" id="loginScreen">
+        <div class="login-top-actions">
+            <button class="login-theme-btn" id="loginThemeBtn" title="Toggle dark / light mode">
+                <svg class="icon-sun" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="5" />
+                    <line x1="12" y1="1" x2="12" y2="3" />
+                    <line x1="12" y1="21" x2="12" y2="23" />
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                    <line x1="1" y1="12" x2="3" y2="12" />
+                    <line x1="21" y1="12" x2="23" y2="12" />
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                </svg>
+                <svg class="icon-moon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                </svg>
+            </button>
+        </div>
         <div class="login-card">
             <img src="/assets/stembotix.png" alt="STEM Copilot" class="login-logo-stembotix">
             <h1 class="login-title">Welcome to STEM Copilot</h1>
@@ -105,18 +105,94 @@
         <button class="install-banner-dismiss" id="installDismiss">&times;</button>
     </div>
 
-    <!-- Mobile sidebar overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+    <!-- ==================== MOBILE TOP NAV BAR ==================== -->
+    <div class="mobile-topbar" id="mobileTopbar">
+        <button class="topbar-profile-btn" id="topbarProfileBtn" title="Account">
+            <img id="topbarAvatar" class="topbar-avatar" src="/assets/bot.png" alt="">
+        </button>
+        <img src="/assets/stembotix.png" alt="STEM Copilot" class="topbar-logo">
+        <div class="topbar-actions">
+            <button class="topbar-icon-btn" id="topbarHistoryBtn" title="Chat history">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                </svg>
+            </button>
+            <button class="topbar-icon-btn" id="topbarNewChatBtn" title="New chat">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 5v14M5 12h14" />
+                </svg>
+            </button>
+        </div>
+    </div>
 
-    <!-- Floating Mobile Sidebar Toggle (hidden via CSS) -->
-    <button class="mobile-fab-toggle" id="mobileFabToggle">
-        <img src="/assets/stembotix.png" alt="Menu">
-    </button>
+    <!-- ==================== MOBILE ACCOUNT OVERLAY ==================== -->
+    <div class="fullscreen-overlay" id="accountOverlay">
+        <div class="overlay-header">
+            <h2>Account</h2>
+            <button class="overlay-close-btn" id="accountOverlayClose">&times;</button>
+        </div>
+        <div class="overlay-body">
+            <div class="overlay-user-info" id="overlayUserInfo">
+                <img id="overlayUserAvatar" class="overlay-avatar" src="/assets/bot.png" alt="">
+                <div class="overlay-user-details">
+                    <span class="overlay-user-name" id="overlayUserName">Student</span>
+                    <span class="overlay-user-email" id="overlayUserEmail"></span>
+                </div>
+            </div>
+            <div class="overlay-menu">
+                <button class="overlay-menu-item" id="overlaySettingsBtn">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="3" />
+                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                    </svg>
+                    Settings
+                </button>
+                <button class="overlay-menu-item" id="overlayProfileBtn">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                        <circle cx="12" cy="7" r="4" />
+                    </svg>
+                    Profile
+                </button>
+                <button class="overlay-menu-item overlay-menu-logout" id="overlayLogoutBtn">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                        <polyline points="16 17 21 12 16 7" />
+                        <line x1="21" y1="12" x2="9" y2="12" />
+                    </svg>
+                    Log out
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ==================== MOBILE HISTORY OVERLAY ==================== -->
+    <div class="fullscreen-overlay" id="historyOverlay">
+        <div class="overlay-header">
+            <h2>Chat History</h2>
+            <button class="overlay-close-btn" id="historyOverlayClose">&times;</button>
+        </div>
+        <div class="overlay-body">
+            <div class="overlay-history-list" id="overlayHistoryList"></div>
+            <div class="overlay-empty-state" id="overlayHistoryEmpty">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.3">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </svg>
+                <p>No conversations yet</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Mobile sidebar overlay (kept for edge-swipe on mobile) -->
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
 
     <!-- ==================== MAIN APP ==================== -->
     <div class="app-container" id="appContainer" style="display:none;">
 
-        <!-- Sidebar (full) -->
+        <!-- Sidebar (full — desktop only) -->
         <aside class="sidebar collapsed" id="sidebar">
             <div class="sidebar-top">
                 <div class="sidebar-logo-row">
@@ -183,7 +259,8 @@
 
         <!-- Main -->
         <main class="main-chat">
-            <header class="main-header">
+            <!-- Desktop header -->
+            <header class="main-header" id="mainHeader">
                 <button class="toggle-sidebar-btn" id="toggleSidebarBtn" title="Toggle Sidebar">
                     <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                         stroke-linecap="round" stroke-linejoin="round">
@@ -215,14 +292,18 @@
                             </button>
                             <input type="file" id="heroImageInput" accept="image/*" style="display:none;">
                             <textarea id="heroInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
-                            <!-- Teaching style selector in hero -->
+                            <!-- Teaching style selector (scrollable) -->
                             <div class="style-selector-wrap" id="heroStyleSelectorWrap">
                                 <button class="style-selector-btn" id="heroStyleSelectorBtn" title="Teaching style">
-                                    <span id="heroStyleSelectorLabel">Nerd</span>
+                                    <span id="heroStyleSelectorLabel">Vidyut</span>
                                     <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
                                 </button>
                                 <div class="style-dropdown" id="heroStyleDropdown">
-                                    <div class="style-option active" data-persona="nerd">
+                                    <div class="style-option active" data-persona="vidyut">
+                                        <div class="style-option-name">Vidyut</div>
+                                        <div class="style-option-desc">Calm, clear, step-by-step master teacher. Makes hard concepts obvious.</div>
+                                    </div>
+                                    <div class="style-option" data-persona="nerd">
                                         <div class="style-option-name">Nerd</div>
                                         <div class="style-option-desc">Deep, rigorous, first-principles. Goes beyond the textbook.</div>
                                     </div>
@@ -240,21 +321,14 @@
                                     </div>
                                 </div>
                             </div>
-                            <!-- Voice input -->
-                            <button class="mic-btn" id="heroMicBtn" title="Voice input">
-                                <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2" /><line x1="12" y1="19" x2="12" y2="23" /><line x1="8" y1="23" x2="16" y2="23" /></svg>
-                            </button>
-                            <button class="send-btn" id="heroSendBtn">
-                                <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
+                            <!-- Adaptive action button: mic when empty, send when text present -->
+                            <button class="adaptive-action-btn" id="heroAdaptiveBtn" title="Voice input">
+                                <svg class="icon-mic" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2" /><line x1="12" y1="19" x2="12" y2="23" /><line x1="8" y1="23" x2="16" y2="23" /></svg>
+                                <svg class="icon-send" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                             </button>
                         </div>
                     </div>
-                    <div class="hero-pills" id="welcomePills">
-                        <button class="hero-pill" data-query="What is the photoelectric effect, and why did Einstein win the Nobel Prize for it?">What is the photoelectric effect and why did Einstein win the Nobel Prize for it?</button>
-                        <button class="hero-pill" data-query="Derive the relation between Kp and Kc for a general gaseous equilibrium reaction">Derive the relation between Kp and Kc for gaseous equilibrium</button>
-                        <button class="hero-pill" data-query="Solve: A ball is thrown vertically upward with velocity 20 m/s. Find maximum height and time of flight. Take g = 10 m/s^2">A ball thrown up at 20 m/s -- find max height and time of flight</button>
-                        <button class="hero-pill" data-query="Explain the concept of limits in calculus with a real-world example. How is it different from the actual value of a function?">Explain limits in calculus with a real-world example</button>
-                    </div>
+                    <!-- Hero pills REMOVED per todo item 3 -->
                 </div>
             </div>
 
@@ -276,10 +350,10 @@
                     </button>
                     <input type="file" id="imageInput" accept="image/*" style="display:none;">
                     <textarea id="userInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
-                    <!-- Teaching style selector (RIGHT side, before mic) -->
+                    <!-- Teaching style selector -->
                     <div class="style-selector-wrap" id="styleSelectorWrap">
                         <button class="style-selector-btn" id="styleSelectorBtn" title="Teaching style">
-                            <span id="styleSelectorLabel">Nerd</span>
+                            <span id="styleSelectorLabel">Vidyut</span>
                             <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
                         </button>
                         <div class="style-dropdown" id="styleDropdown">
@@ -305,25 +379,16 @@
                             </div>
                         </div>
                     </div>
-                    <!-- Voice input -->
-                    <button class="mic-btn" id="micBtn" title="Voice input">
-                        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-                            <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-                            <line x1="12" y1="19" x2="12" y2="23" />
-                            <line x1="8" y1="23" x2="16" y2="23" />
-                        </svg>
+                    <!-- Adaptive action button + stop -->
+                    <button class="adaptive-action-btn" id="adaptiveBtn" title="Voice input">
+                        <svg class="icon-mic" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2" /><line x1="12" y1="19" x2="12" y2="23" /><line x1="8" y1="23" x2="16" y2="23" /></svg>
+                        <svg class="icon-send" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                     </button>
                     <button class="stop-btn" id="stopBtn" title="Stop generating">
                         <svg viewBox="0 0 24 24" fill="currentColor">
                             <rect x="7" y="7" width="10" height="10" rx="1" />
                         </svg>
                     </button>
-                    <button class="send-btn" id="sendBtn">
-                        <svg viewBox="0 0 24 24">
-                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
-                        </svg>
-                    </button>
                 </div>
                 <div class="disclaimer-text">
                     STEM Copilot is an AI tutor grounded in NCERT material. It can still make mistakes.
@@ -351,6 +416,21 @@
                         </svg>
                         <span>General</span>
                     </button>
+                    <button class="settings-nav-btn" data-tab="appearance">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <circle cx="12" cy="12" r="5" />
+                            <line x1="12" y1="1" x2="12" y2="3" />
+                            <line x1="12" y1="21" x2="12" y2="23" />
+                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                            <line x1="1" y1="12" x2="3" y2="12" />
+                            <line x1="21" y1="12" x2="23" y2="12" />
+                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                        </svg>
+                        <span>Appearance</span>
+                    </button>
                     <button class="settings-nav-btn" data-tab="apikeys">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="2">
@@ -393,6 +473,33 @@
                         </select>
                     </div>
 
+                    <!-- Appearance Tab -->
+                    <div class="tab-content" id="tab-appearance">
+                        <h3 class="settings-section-title">Theme</h3>
+                        <div class="theme-option-group">
+                            <button class="theme-option-btn" data-theme-val="dark" id="themeDarkBtn">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                                </svg>
+                                Dark
+                            </button>
+                            <button class="theme-option-btn" data-theme-val="light" id="themeLightBtn">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="12" cy="12" r="5" />
+                                    <line x1="12" y1="1" x2="12" y2="3" />
+                                    <line x1="12" y1="21" x2="12" y2="23" />
+                                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+                                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                                    <line x1="1" y1="12" x2="3" y2="12" />
+                                    <line x1="21" y1="12" x2="23" y2="12" />
+                                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+                                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+                                </svg>
+                                Light
+                            </button>
+                        </div>
+                    </div>
+
                     <!-- API Keys Tab -->
                     <div class="tab-content" id="tab-apikeys">
                         <h3 class="settings-section-title">OpenRouter API Key</h3>
@@ -417,7 +524,6 @@
                         <button class="settings-save-btn" id="saveProfileBtn">Save Profile</button>
                     </div>
 
-                    <!-- Teaching Style Tab (REMOVED - now in input bar) -->
                     <!-- Feedback Tab -->
                     <div class="tab-content" id="tab-feedback">
                         <h3 class="settings-section-title">Category</h3>

static/style.css

@@ -1,12 +1,15 @@
 /* ============================================================
    STEM Copilot — Stylesheet
    Montserrat, dark/light theme, premium chat UI
+   Theme: Dark=#EC642B, Light=#2C2872
    ============================================================ */
 
+/* ── CSS Variables ─────────────────────────────────────────── */
+
 :root {
-    --brand: #EB5A28;
-    --brand-hover: #cf4f22;
-    --brand-glow: rgba(235, 90, 40, 0.25);
+    --brand: #EC642B;
+    --brand-hover: #d4561f;
+    --brand-glow: rgba(236, 100, 43, 0.25);
     --bg-main: #000000;
     --bg-sidebar: #0a0a0a;
     --bg-input: #1a1a1a;
@@ -26,13 +29,14 @@
     --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     --sidebar-width: 280px;
     --rail-width: 56px;
+    --topbar-height: 52px;
 }
 
-/* ── LIGHT MODE ── */
+/* ── Light Mode ── */
 [data-theme="light"] {
-    --brand: #4285F4;
-    --brand-hover: #3367D6;
-    --brand-glow: rgba(66, 133, 244, 0.25);
+    --brand: #2C2872;
+    --brand-hover: #221f5e;
+    --brand-glow: rgba(44, 40, 114, 0.25);
     --bg-main: #f8f9fa;
     --bg-sidebar: #ffffff;
     --bg-input: #ffffff;
@@ -48,6 +52,9 @@
     --msg-ai: transparent;
 }
 
+
+/* ── Reset & Base ─────────────────────────────────────────── */
+
 * {
     box-sizing: border-box;
     margin: 0;
@@ -59,6 +66,7 @@ html {
     -ms-text-size-adjust: 100%;
     touch-action: manipulation;
     overscroll-behavior: none;
+    overflow-x: hidden;
 }
 
 body {
@@ -68,98 +76,80 @@ body {
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
+    overflow-x: hidden;
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
     overscroll-behavior: none;
-    /* Smooth theme transitions — uniform 0.35s for all components */
     transition: background-color 0.35s ease, color 0.35s ease;
 }
 
-/* Smooth transitions for all themed elements — UNIFORM timing */
-*,
-*::before,
-*::after {
+/* Smooth theme transitions */
+*, *::before, *::after {
     transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease;
 }
 
-textarea,
-input,
-select {
+textarea, input, select {
     transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
 }
 
 
 /* ============================================================
-   THEME TOGGLE BUTTON (top-right, all screens)
+   LOGIN SCREEN
    ============================================================ */
 
-.theme-toggle-btn {
+.login-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background: var(--bg-main);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login-top-actions {
     position: fixed;
     top: 14px;
     right: 16px;
     z-index: 1100;
+    display: flex;
+    gap: 8px;
+}
+
+.login-theme-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    border: 1px solid var(--border-color);
-    background: var(--bg-elevated);
+    border: none;
+    background: transparent;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.3s, border-color 0.3s, transform 0.2s;
+    transition: transform 0.2s;
 }
 
-.theme-toggle-btn:hover {
-    background: var(--bg-hover);
-    border-color: var(--brand);
-    transform: scale(1.08);
+.login-theme-btn:hover {
+    transform: scale(1.1);
 }
 
-.theme-toggle-btn svg {
-    width: 18px;
-    height: 18px;
+.login-theme-btn svg {
+    width: 20px;
+    height: 20px;
     stroke: var(--text-secondary);
     fill: none;
     stroke-width: 2;
     transition: stroke 0.3s;
 }
 
-.theme-toggle-btn:hover svg {
+.login-theme-btn:hover svg {
     stroke: var(--brand);
 }
 
-/* Show sun in dark, moon in light */
-.theme-toggle-btn .icon-sun {
-    display: block;
-}
-
-.theme-toggle-btn .icon-moon {
-    display: none;
-}
-
-[data-theme="light"] .theme-toggle-btn .icon-sun {
-    display: none;
-}
-
-[data-theme="light"] .theme-toggle-btn .icon-moon {
-    display: block;
-}
-
-
-/* ============================================================
-   LOGIN SCREEN
-   ============================================================ */
-
-.login-screen {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    background: var(--bg-main);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+.login-theme-btn .icon-sun { display: block; }
+.login-theme-btn .icon-moon { display: none; }
+[data-theme="light"] .login-theme-btn .icon-sun { display: none; }
+[data-theme="light"] .login-theme-btn .icon-moon { display: block; }
 
 .login-card {
     text-align: center;
@@ -269,14 +259,8 @@ select {
     color: var(--text-secondary);
 }
 
-.byok-steps a {
-    color: var(--brand);
-    text-decoration: none;
-}
-
-.byok-steps a:hover {
-    text-decoration: underline;
-}
+.byok-steps a { color: var(--brand); text-decoration: none; }
+.byok-steps a:hover { text-decoration: underline; }
 
 .byok-submit-btn {
     width: 100%;
@@ -293,9 +277,7 @@ select {
     transition: background 0.3s;
 }
 
-.byok-submit-btn:hover {
-    background: var(--brand-hover);
-}
+.byok-submit-btn:hover { background: var(--brand-hover); }
 
 .byok-note {
     font-size: 11px;
@@ -327,11 +309,7 @@ select {
     animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.install-banner-icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 8px;
-}
+.install-banner-icon { width: 36px; height: 36px; border-radius: 8px; }
 
 .install-banner-text {
     flex: 1;
@@ -341,14 +319,8 @@ select {
     line-height: 1.4;
 }
 
-.install-banner-text strong {
-    color: var(--text-primary);
-}
-
-.install-banner-text span {
-    color: var(--text-secondary);
-    font-size: 11px;
-}
+.install-banner-text strong { color: var(--text-primary); }
+.install-banner-text span { color: var(--text-secondary); font-size: 11px; }
 
 .install-banner-btn {
     background: var(--brand);
@@ -363,29 +335,310 @@ select {
     transition: background 0.3s;
 }
 
-.install-banner-btn:hover {
-    background: var(--brand-hover);
+.install-banner-btn:hover { background: var(--brand-hover); }
+
+.install-banner-dismiss {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0 4px;
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+
+/* ============================================================
+   MOBILE TOP NAV BAR
+   ============================================================ */
+
+.mobile-topbar {
+    display: none; /* shown via media query */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--topbar-height);
+    background: var(--bg-sidebar);
+    border-bottom: 1px solid var(--border-color);
+    z-index: 100;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+}
+
+.topbar-profile-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.topbar-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--border-color);
+    transition: border-color 0.2s;
+}
+
+.topbar-profile-btn:hover .topbar-avatar,
+.topbar-profile-btn:active .topbar-avatar {
+    border-color: var(--brand);
+}
+
+.topbar-logo {
+    height: 28px;
+    object-fit: contain;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.topbar-actions {
+    display: flex;
+    gap: 4px;
+}
+
+.topbar-icon-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s;
+}
+
+.topbar-icon-btn:hover,
+.topbar-icon-btn:active {
+    background: var(--bg-hover);
+    color: var(--brand);
+}
+
+
+/* ============================================================
+   FULL-SCREEN OVERLAYS (Account & History — Mobile)
+   ============================================================ */
+
+.fullscreen-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 500;
+    background: var(--bg-main);
+    display: none;
+    flex-direction: column;
+    animation: overlaySlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.fullscreen-overlay.open {
+    display: flex;
+}
+
+@keyframes overlaySlideIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.overlay-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+}
+
+.overlay-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.overlay-close-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    font-size: 22px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s;
+}
+
+.overlay-close-btn:hover {
+    background: var(--brand);
+    color: #fff;
+}
+
+.overlay-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+/* Account overlay */
+.overlay-user-info {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px;
+    background: var(--bg-card);
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+    margin-bottom: 20px;
+}
+
+.overlay-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--brand);
+}
+
+.overlay-user-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.overlay-user-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.overlay-user-email {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.overlay-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.overlay-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 16px;
+    border-radius: var(--radius);
+    border: none;
+    background: none;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    transition: background 0.2s, color 0.2s;
+}
+
+.overlay-menu-item:hover,
+.overlay-menu-item:active {
+    background: var(--bg-hover);
+    color: var(--brand);
+}
+
+.overlay-menu-item svg {
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+.overlay-menu-item:hover svg { opacity: 1; }
+
+.overlay-menu-logout {
+    color: #ff4a4a;
+    border-top: 1px solid var(--border-subtle);
+    margin-top: 8px;
+    padding-top: 16px;
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.overlay-menu-logout:hover { color: #ff4a4a; background: rgba(255, 74, 74, 0.06); }
+
+/* History overlay */
+.overlay-history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.overlay-history-item {
+    padding: 12px 14px;
+    border-radius: 10px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: background 0.2s, color 0.2s;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    font-family: inherit;
+}
+
+.overlay-history-item:hover,
+.overlay-history-item:active {
+    background: var(--bg-hover);
+    color: var(--text-primary);
 }
 
-.install-banner-dismiss {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 18px;
-    cursor: pointer;
-    padding: 0 4px;
+.overlay-history-item.active {
+    background: rgba(236, 100, 43, 0.08);
+    color: var(--text-primary);
 }
 
-@keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateX(-50%) translateY(20px);
-    }
+[data-theme="light"] .overlay-history-item.active {
+    background: rgba(44, 40, 114, 0.08);
+}
 
-    to {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-    }
+.overlay-history-item svg {
+    flex-shrink: 0;
+    opacity: 0.4;
+}
+
+.overlay-history-item.active svg {
+    opacity: 0.8;
+    color: var(--brand);
+}
+
+.overlay-history-title {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.overlay-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 60px 20px;
+    color: var(--text-muted);
+    font-size: 14px;
 }
 
 
@@ -398,11 +651,12 @@ select {
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
+    overflow-x: hidden;
 }
 
 
 /* ============================================================
-   SIDEBAR (full) — premium look
+   SIDEBAR (desktop only)
    ============================================================ */
 
 .sidebar {
@@ -441,11 +695,12 @@ select {
     object-fit: contain;
 }
 
+/* New chat btn — no orange gradient */
 .new-chat-btn {
     margin: 8px 14px;
     padding: 12px 16px;
-    background: linear-gradient(135deg, rgba(235, 90, 40, 0.08), rgba(235, 90, 40, 0.02));
-    border: 1px solid rgba(235, 90, 40, 0.2);
+    background: var(--bg-hover);
+    border: 1px solid var(--border-color);
     color: var(--text-primary);
     border-radius: var(--radius);
     cursor: pointer;
@@ -459,9 +714,9 @@ select {
 }
 
 .new-chat-btn:hover {
-    background: linear-gradient(135deg, rgba(235, 90, 40, 0.15), rgba(235, 90, 40, 0.05));
-    border-color: rgba(235, 90, 40, 0.4);
-    box-shadow: 0 0 16px rgba(235, 90, 40, 0.1);
+    background: var(--bg-elevated);
+    border-color: var(--brand);
+    box-shadow: 0 0 12px var(--brand-glow);
 }
 
 .new-chat-btn svg {
@@ -490,36 +745,19 @@ select {
     transition: background 0.2s, color 0.2s, transform 0.15s;
 }
 
-.history-item:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-}
-
-.history-item:active {
-    transform: scale(0.98);
-}
+.history-item:hover { background: var(--bg-hover); color: var(--text-primary); }
+.history-item:active { transform: scale(0.98); }
 
 .history-item.active {
-    background: linear-gradient(135deg, rgba(235, 90, 40, 0.1), rgba(235, 90, 40, 0.03));
+    background: var(--bg-hover);
     color: var(--text-primary);
-    border: 1px solid rgba(235, 90, 40, 0.15);
-}
-
-.history-item:not(.active) {
-    border: 1px solid transparent;
+    border: 1px solid var(--border-color);
 }
 
-.thread-icon {
-    flex-shrink: 0;
-    opacity: 0.4;
-    width: 16px;
-    height: 16px;
-}
+.history-item:not(.active) { border: 1px solid transparent; }
 
-.history-item.active .thread-icon {
-    opacity: 0.8;
-    color: var(--brand);
-}
+.thread-icon { flex-shrink: 0; opacity: 0.4; width: 16px; height: 16px; }
+.history-item.active .thread-icon { opacity: 0.8; color: var(--brand); }
 
 .chat-title {
     flex: 1;
@@ -541,14 +779,8 @@ select {
     transition: opacity 0.2s, color 0.2s;
 }
 
-.history-item:hover .options-btn,
-.options-btn.menu-open {
-    opacity: 1;
-}
-
-.options-btn:hover {
-    color: var(--text-primary);
-}
+.history-item:hover .options-btn, .options-btn.menu-open { opacity: 1; }
+.options-btn:hover { color: var(--text-primary); }
 
 .options-menu {
     position: absolute;
@@ -565,9 +797,7 @@ select {
     overflow: hidden;
 }
 
-.options-menu.show {
-    display: flex;
-}
+.options-menu.show { display: flex; }
 
 .option-item {
     padding: 10px 14px;
@@ -580,13 +810,8 @@ select {
     transition: background 0.2s;
 }
 
-.option-item:hover {
-    background: var(--bg-hover);
-}
-
-.option-item.delete {
-    color: #ff4a4a;
-}
+.option-item:hover { background: var(--bg-hover); }
+.option-item.delete { color: #ff4a4a; }
 
 .rename-input {
     width: 100%;
@@ -600,14 +825,11 @@ select {
     padding: 2px 0;
 }
 
-
-/* --- Sidebar bottom — user profile --- */
-
+/* Sidebar bottom */
 .sidebar-bottom {
     padding: 12px 14px 16px;
     border-top: 1px solid var(--border-color);
     position: relative;
-    background: linear-gradient(180deg, transparent, rgba(235, 90, 40, 0.02));
 }
 
 .user-profile-btn {
@@ -637,9 +859,7 @@ select {
     transition: border-color 0.2s;
 }
 
-.user-profile-btn:hover .user-avatar {
-    border-color: var(--brand);
-}
+.user-profile-btn:hover .user-avatar { border-color: var(--brand); }
 
 .user-name {
     flex: 1;
@@ -665,10 +885,7 @@ select {
     backdrop-filter: blur(12px);
 }
 
-.user-menu.show {
-    display: block;
-    animation: fadeIn 0.15s ease-out;
-}
+.user-menu.show { display: block; animation: fadeIn 0.15s ease-out; }
 
 .user-menu-item {
     padding: 12px 18px;
@@ -682,33 +899,16 @@ select {
     color: var(--text-primary);
 }
 
-.user-menu-item:hover {
-    background: var(--bg-hover);
-    color: var(--brand);
-}
-
-.user-menu-item svg {
-    opacity: 0.6;
-    transition: opacity 0.2s;
-}
-
-.user-menu-item:hover svg {
-    opacity: 1;
-}
-
-.user-menu-logout {
-    color: #ff4a4a;
-    border-top: 1px solid var(--border-subtle);
-}
+.user-menu-item:hover { background: var(--bg-hover); color: var(--brand); }
+.user-menu-item svg { opacity: 0.6; transition: opacity 0.2s; }
+.user-menu-item:hover svg { opacity: 1; }
 
-.user-menu-logout:hover {
-    color: #ff4a4a;
-    background: rgba(255, 74, 74, 0.06);
-}
+.user-menu-logout { color: #ff4a4a; border-top: 1px solid var(--border-subtle); }
+.user-menu-logout:hover { color: #ff4a4a; background: rgba(255, 74, 74, 0.06); }
 
 
 /* ============================================================
-   SIDEBAR RAIL (collapsed mode — desktop only)
+   SIDEBAR RAIL (collapsed — desktop only)
    ============================================================ */
 
 .sidebar-rail {
@@ -724,12 +924,9 @@ select {
     z-index: 20;
 }
 
-.sidebar-rail.visible {
-    display: flex;
-}
+.sidebar-rail.visible { display: flex; }
 
-.rail-top,
-.rail-bottom {
+.rail-top, .rail-bottom {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -750,25 +947,10 @@ select {
     transition: background 0.2s, color 0.2s;
 }
 
-.rail-icon-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-}
-
-.rail-logo {
-    width: 34px;
-    height: 34px;
-    border-radius: 6px;
-    object-fit: contain;
-}
+.rail-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
 
-.rail-avatar {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    object-fit: cover;
-    background: var(--bg-hover);
-}
+.rail-logo { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; }
+.rail-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-hover); }
 
 
 /* ============================================================
@@ -807,14 +989,12 @@ select {
     transition: background 0.2s, color 0.2s;
 }
 
-.toggle-sidebar-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-}
+.toggle-sidebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
 
 .chat-container {
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 64px 20px 20px;
     display: flex;
     flex-direction: column;
@@ -842,8 +1022,7 @@ select {
     width: 120px;
     height: 120px;
     object-fit: contain;
-    filter: drop-shadow(0 8px 24px rgba(235, 90, 40, 0.15));
-    /* NO animation — fixed, no jumping */
+    filter: drop-shadow(0 8px 24px var(--brand-glow));
 }
 
 .hero-title {
@@ -854,9 +1033,7 @@ select {
     line-height: 1.3;
 }
 
-.hero-title .hero-name {
-    color: var(--brand);
-}
+.hero-title .hero-name { color: var(--brand); }
 
 .hero-input-wrap {
     width: 100%;
@@ -875,9 +1052,7 @@ select {
     border-radius: var(--radius);
 }
 
-.hero-image-preview.visible {
-    display: flex;
-}
+.hero-image-preview.visible { display: flex; }
 
 .hero-image-preview-thumb {
     width: 48px;
@@ -898,9 +1073,7 @@ select {
     transition: color 0.2s;
 }
 
-.hero-image-preview-remove:hover {
-    color: #ff4a4a;
-}
+.hero-image-preview-remove:hover { color: #ff4a4a; }
 
 .hero-input-box {
     display: flex;
@@ -931,40 +1104,12 @@ select {
     max-height: 120px;
     line-height: 1.5;
     overflow-y: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
-.hero-input-box textarea::placeholder {
-    color: var(--text-muted);
-}
-
-.hero-pills {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-    max-width: 560px;
-    width: 100%;
-}
-
-.hero-pill {
-    padding: 14px 16px;
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-    color: var(--text-secondary);
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    text-align: left;
-    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-
-.hero-pill:hover {
-    background: var(--bg-hover);
-    border-color: var(--brand);
-    color: var(--text-primary);
-    box-shadow: 0 0 0 1px var(--brand-glow);
-}
+.hero-input-box textarea::-webkit-scrollbar { display: none; }
+.hero-input-box textarea::placeholder { color: var(--text-muted); }
 
 
 /* ============================================================
@@ -979,13 +1124,8 @@ select {
     animation: fadeIn 0.35s ease-out forwards;
 }
 
-.message-row.user {
-    justify-content: flex-end;
-}
-
-.message-row.ai {
-    justify-content: flex-start;
-}
+.message-row.user { justify-content: flex-end; }
+.message-row.ai { justify-content: flex-start; }
 
 .message-content {
     padding: 14px 18px;
@@ -1003,10 +1143,7 @@ select {
     color: var(--text-primary);
 }
 
-.ai .message-content {
-    max-width: 100%;
-    background: var(--msg-ai);
-}
+.ai .message-content { max-width: 100%; background: var(--msg-ai); }
 
 .ai-avatar {
     width: 30px;
@@ -1020,27 +1157,14 @@ select {
     margin-top: 4px;
 }
 
-.ai-avatar.pulsing {
-    animation: avatarPulse 1.5s ease-in-out infinite;
-}
+.ai-avatar.pulsing { animation: avatarPulse 1.5s ease-in-out infinite; }
 
 @keyframes avatarPulse {
-
-    0%,
-    100% {
-        opacity: 0.6;
-        transform: scale(1);
-    }
-
-    50% {
-        opacity: 1;
-        transform: scale(1.05);
-    }
+    0%, 100% { opacity: 0.6; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.05); }
 }
 
-
-/* --- Thinking indicator --- */
-
+/* Thinking indicator */
 .thinking-indicator {
     display: flex;
     align-items: center;
@@ -1049,51 +1173,23 @@ select {
     animation: fadeIn 0.3s ease-out;
 }
 
-.thinking-indicator.hidden {
-    display: none;
-}
-
-.thinking-text {
-    font-size: 13px;
-    color: var(--text-secondary);
-    font-style: italic;
-}
-
+.thinking-indicator.hidden { display: none; }
 
-/* --- Rendered markdown in AI messages --- */
+.thinking-text { font-size: 13px; color: var(--text-secondary); font-style: italic; }
 
-.message-content h1,
-.message-content h2,
-.message-content h3 {
+/* Rendered markdown */
+.message-content h1, .message-content h2, .message-content h3 {
     margin-top: 16px;
     margin-bottom: 8px;
     font-weight: 600;
 }
 
-.message-content h1 {
-    font-size: 1.25em;
-}
-
-.message-content h2 {
-    font-size: 1.12em;
-}
-
-.message-content h3 {
-    font-size: 1.05em;
-}
-
-.message-content p {
-    margin-bottom: 10px;
-}
-
-.message-content ul,
-.message-content ol {
-    margin: 8px 0 8px 20px;
-}
-
-.message-content li {
-    margin-bottom: 4px;
-}
+.message-content h1 { font-size: 1.25em; }
+.message-content h2 { font-size: 1.12em; }
+.message-content h3 { font-size: 1.05em; }
+.message-content p { margin-bottom: 10px; }
+.message-content ul, .message-content ol { margin: 8px 0 8px 20px; }
+.message-content li { margin-bottom: 4px; }
 
 .message-content code {
     background: rgba(0, 0, 0, 0.15);
@@ -1103,9 +1199,7 @@ select {
     font-size: 0.88em;
 }
 
-[data-theme="light"] .message-content code {
-    background: rgba(0, 0, 0, 0.06);
-}
+[data-theme="light"] .message-content code { background: rgba(0, 0, 0, 0.06); }
 
 .message-content pre {
     background: #111;
@@ -1116,33 +1210,18 @@ select {
     margin: 10px 0;
 }
 
-[data-theme="light"] .message-content pre {
-    background: #f5f5f5;
-}
-
-.message-content pre code {
-    background: none;
-    padding: 0;
-}
-
-.message-content table {
-    border-collapse: collapse;
-    margin: 10px 0;
-    width: 100%;
-}
+[data-theme="light"] .message-content pre { background: #f5f5f5; }
+.message-content pre code { background: none; padding: 0; }
 
-.message-content th,
-.message-content td {
+.message-content table { border-collapse: collapse; margin: 10px 0; width: 100%; }
+.message-content th, .message-content td {
     border: 1px solid var(--border-color);
     padding: 8px 12px;
     text-align: left;
     font-size: 14px;
 }
 
-.message-content th {
-    background: var(--bg-input);
-    font-weight: 600;
-}
+.message-content th { background: var(--bg-input); font-weight: 600; }
 
 .message-content blockquote {
     border-left: 3px solid var(--brand);
@@ -1151,24 +1230,13 @@ select {
     color: var(--text-secondary);
 }
 
-.katex {
-    color: var(--text-primary);
-}
-
-.katex-display {
-    margin: 14px 0;
-    overflow-x: auto;
-}
-
-.message-image {
-    max-width: 240px;
-    border-radius: 8px;
-    margin-bottom: 8px;
-}
+.katex { color: var(--text-primary); }
+.katex-display { margin: 14px 0; overflow-x: auto; }
+.message-image { max-width: 240px; border-radius: 8px; margin-bottom: 8px; }
 
 
 /* ============================================================
-   AI MESSAGE ACTION BAR (copy, regenerate)
+   AI MESSAGE ACTION BAR
    ============================================================ */
 
 .msg-actions {
@@ -1180,10 +1248,7 @@ select {
     transition: opacity 0.2s;
 }
 
-.message-row.ai:hover .msg-actions,
-.msg-actions.visible {
-    opacity: 1;
-}
+.message-row.ai:hover .msg-actions, .msg-actions.visible { opacity: 1; }
 
 .msg-action-btn {
     background: var(--bg-card);
@@ -1207,13 +1272,7 @@ select {
     border-color: var(--brand);
 }
 
-.msg-action-btn svg {
-    width: 13px;
-    height: 13px;
-    stroke: currentColor;
-    fill: none;
-    stroke-width: 2;
-}
+.msg-action-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
 
 
 /* ============================================================
@@ -1261,9 +1320,7 @@ select {
     transition: color 0.2s;
 }
 
-.image-preview-remove:hover {
-    color: #ff4a4a;
-}
+.image-preview-remove:hover { color: #ff4a4a; }
 
 .input-box {
     width: 100%;
@@ -1294,16 +1351,13 @@ select {
     transition: color 0.2s;
 }
 
-.upload-btn:hover {
-    color: var(--text-primary);
-}
+.upload-btn:hover { color: var(--text-primary); }
 
-/* Teaching style selector in input bar — right side before mic */
+/* Teaching style selector */
 .style-selector-wrap {
     position: relative;
     display: flex;
     align-items: center;
-    order: 10; /* push to right */
 }
 
 .style-selector-btn {
@@ -1339,9 +1393,7 @@ select {
     transition: transform 0.2s;
 }
 
-.style-selector-btn.open svg {
-    transform: rotate(180deg);
-}
+.style-selector-btn.open svg { transform: rotate(180deg); }
 
 .style-dropdown {
     display: none;
@@ -1354,121 +1406,49 @@ select {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     z-index: 100;
     min-width: 240px;
-    overflow: hidden;
+    max-height: 280px;
+    overflow-y: auto;
     animation: fadeIn 0.15s ease-out;
 }
 
-.style-dropdown.show {
-    display: block;
-}
-
-.style-option {
-    padding: 10px 14px;
-    cursor: pointer;
-    transition: background 0.15s;
-    border-bottom: 1px solid var(--border-subtle);
-}
-
-.style-option:last-child {
-    border-bottom: none;
-}
-
-.style-option:hover {
-    background: var(--bg-hover);
-}
-
-.style-option.active {
-    background: rgba(235, 90, 40, 0.08);
-}
-
-[data-theme="light"] .style-option.active {
-    background: rgba(66, 133, 244, 0.08);
-}
-
-.style-option-name {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 2px;
-}
-
-.style-option.active .style-option-name {
-    color: var(--brand);
-}
-
-.style-option-desc {
-    font-size: 11px;
-    color: var(--text-muted);
-    line-height: 1.4;
-}
-
-/* Voice mic button */
-.mic-btn {
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-    padding: 16px 4px;
-    display: flex;
-    align-items: center;
-    transition: color 0.2s;
-}
-
-.mic-btn:hover {
-    color: var(--text-primary);
-}
-
-.mic-btn.listening {
-    color: #EA4335 !important;
-    animation: micPulse 1.5s infinite ease-in-out;
-}
-
-@keyframes micPulse {
-
-    0%,
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    50% {
-        transform: scale(1.15);
-        opacity: 0.8;
-    }
-}
-
-.mic-btn svg {
-    width: 20px;
-    height: 20px;
-    stroke: currentColor;
-    fill: none;
-    stroke-width: 2;
+.style-dropdown.show { display: block; }
+
+.style-option {
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background 0.15s;
+    border-bottom: 1px solid var(--border-subtle);
 }
 
-#userInput {
-    flex: 1;
-    background: transparent;
-    border: none;
+.style-option:last-child { border-bottom: none; }
+.style-option:hover { background: var(--bg-hover); }
+
+.style-option.active { background: var(--brand-glow); }
+
+.style-option-name {
+    font-size: 13px;
+    font-weight: 600;
     color: var(--text-primary);
-    padding: 16px 12px 16px 8px;
-    font-family: inherit;
-    font-size: 14px;
-    resize: none;
-    outline: none;
-    height: 54px;
-    max-height: 200px;
-    line-height: 1.5;
-    overflow-y: hidden;
+    margin-bottom: 2px;
 }
 
-#userInput::placeholder {
+.style-option.active .style-option-name { color: var(--brand); }
+
+.style-option-desc {
+    font-size: 11px;
     color: var(--text-muted);
+    line-height: 1.4;
 }
 
-.send-btn {
+
+/* ============================================================
+   ADAPTIVE ACTION BUTTON (mic ↔ send)
+   ============================================================ */
+
+.adaptive-action-btn {
     background: none;
     border: none;
-    color: var(--text-secondary);
+    color: var(--brand);
     cursor: pointer;
     padding: 16px 16px 16px 4px;
     display: flex;
@@ -1476,20 +1456,42 @@ select {
     transition: color 0.2s, transform 0.1s;
 }
 
-.send-btn:hover {
-    color: var(--brand);
+.adaptive-action-btn:hover { color: var(--brand-hover); }
+.adaptive-action-btn:active { transform: scale(0.92); }
+
+.adaptive-action-btn svg {
+    width: 20px;
+    height: 20px;
+    transition: opacity 0.2s, transform 0.2s;
 }
 
-.send-btn:active {
-    transform: scale(0.92);
+.adaptive-action-btn .icon-mic {
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
 }
 
-.send-btn svg {
-    width: 20px;
-    height: 20px;
+.adaptive-action-btn .icon-send {
     fill: currentColor;
+    display: none;
+}
+
+/* When text is present */
+.adaptive-action-btn.has-text .icon-mic { display: none; }
+.adaptive-action-btn.has-text .icon-send { display: block; }
+
+/* Listening state */
+.adaptive-action-btn.listening {
+    color: #EA4335 !important;
+    animation: micPulse 1.5s infinite ease-in-out;
+}
+
+@keyframes micPulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.15); opacity: 0.8; }
 }
 
+/* Stop button */
 .stop-btn {
     background: none;
     border: none;
@@ -1501,23 +1503,32 @@ select {
     transition: color 0.2s, transform 0.1s;
 }
 
-.stop-btn.visible {
-    display: flex;
-}
-
-.stop-btn:hover {
-    color: #ff4a4a;
-}
+.stop-btn.visible { display: flex; }
+.stop-btn:hover { color: #ff4a4a; }
+.stop-btn:active { transform: scale(0.92); }
+.stop-btn svg { width: 22px; height: 22px; fill: currentColor; }
 
-.stop-btn:active {
-    transform: scale(0.92);
+/* User input textarea */
+#userInput {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    padding: 16px 12px 16px 8px;
+    font-family: inherit;
+    font-size: 14px;
+    resize: none;
+    outline: none;
+    height: 54px;
+    max-height: 200px;
+    line-height: 1.5;
+    overflow-y: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
-.stop-btn svg {
-    width: 22px;
-    height: 22px;
-    fill: currentColor;
-}
+#userInput::-webkit-scrollbar { display: none; }
+#userInput::placeholder { color: var(--text-muted); }
 
 .disclaimer-text {
     font-size: 11px;
@@ -1543,9 +1554,7 @@ select {
     justify-content: center;
 }
 
-.modal-overlay.show {
-    display: flex;
-}
+.modal-overlay.show { display: flex; }
 
 .settings-modal {
     background: var(--bg-sidebar);
@@ -1570,10 +1579,7 @@ select {
     flex-shrink: 0;
 }
 
-.modal-header h2 {
-    font-size: 18px;
-    font-weight: 600;
-}
+.modal-header h2 { font-size: 18px; font-weight: 600; }
 
 .modal-close {
     background: none;
@@ -1585,14 +1591,9 @@ select {
     transition: color 0.2s;
 }
 
-.modal-close:hover {
-    color: var(--text-primary);
-}
+.modal-close:hover { color: var(--text-primary); }
 
-.modal-body {
-    padding: 0;
-    overflow: hidden;
-}
+.modal-body { padding: 0; overflow: hidden; }
 
 .settings-layout {
     display: flex;
@@ -1629,10 +1630,7 @@ select {
     width: 100%;
 }
 
-.settings-nav-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-}
+.settings-nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
 
 .settings-nav-btn.active {
     background: var(--bg-hover);
@@ -1647,13 +1645,8 @@ select {
     min-width: 0;
 }
 
-.tab-content {
-    display: none;
-}
-
-.tab-content.active {
-    display: block;
-}
+.tab-content { display: none; }
+.tab-content.active { display: block; }
 
 .settings-section-title {
     font-size: 14px;
@@ -1662,8 +1655,7 @@ select {
     margin-bottom: 10px;
 }
 
-.settings-input,
-.settings-textarea {
+.settings-input, .settings-textarea {
     width: 100%;
     padding: 11px 14px;
     background: var(--bg-input);
@@ -1676,21 +1668,10 @@ select {
     transition: border-color 0.2s;
 }
 
-.settings-input:focus,
-.settings-textarea:focus {
-    border-color: var(--brand);
-}
-
-.settings-input::placeholder,
-.settings-textarea::placeholder {
-    color: var(--text-muted);
-}
+.settings-input:focus, .settings-textarea:focus { border-color: var(--brand); }
+.settings-input::placeholder, .settings-textarea::placeholder { color: var(--text-muted); }
 
-.settings-textarea {
-    resize: vertical;
-    min-height: 80px;
-    line-height: 1.5;
-}
+.settings-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
 
 .settings-select {
     width: 100%;
@@ -1711,14 +1692,8 @@ select {
     transition: border-color 0.2s;
 }
 
-.settings-select:focus {
-    border-color: var(--brand);
-}
-
-.settings-select option {
-    background: var(--bg-input);
-    color: var(--text-primary);
-}
+.settings-select:focus { border-color: var(--brand); }
+.settings-select option { background: var(--bg-input); color: var(--text-primary); }
 
 .settings-save-btn {
     margin-top: 12px;
@@ -1734,9 +1709,7 @@ select {
     transition: background 0.3s;
 }
 
-.settings-save-btn:hover {
-    background: var(--brand-hover);
-}
+.settings-save-btn:hover { background: var(--brand-hover); }
 
 .settings-hint {
     font-size: 12px;
@@ -1745,50 +1718,39 @@ select {
     line-height: 1.5;
 }
 
-.settings-hint a {
-    color: var(--brand);
-    text-decoration: none;
-}
+.settings-hint a { color: var(--brand); text-decoration: none; }
+.settings-hint a:hover { text-decoration: underline; }
 
-.settings-hint a:hover {
-    text-decoration: underline;
+/* Appearance tab — theme selector */
+.theme-option-group {
+    display: flex;
+    gap: 10px;
 }
 
-.persona-option {
+.theme-option-btn {
+    flex: 1;
     display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 14px 16px;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 14px;
     border-radius: var(--radius);
-    border: 1px solid var(--border-color);
+    border: 2px solid var(--border-color);
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
     cursor: pointer;
-    margin-bottom: 8px;
-    transition: border-color 0.2s, background 0.2s;
+    transition: border-color 0.2s, background 0.2s, color 0.2s;
 }
 
-.persona-option:hover {
-    background: var(--bg-hover);
-}
+.theme-option-btn:hover { border-color: var(--text-muted); }
 
-.persona-option.active {
+.theme-option-btn.active {
     border-color: var(--brand);
-    background: rgba(235, 90, 40, 0.06);
-}
-
-[data-theme="light"] .persona-option.active {
-    background: rgba(66, 133, 244, 0.06);
-}
-
-.persona-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.persona-desc {
-    font-size: 12px;
-    color: var(--text-secondary);
-    line-height: 1.5;
+    color: var(--brand);
+    background: var(--brand-glow);
 }
 
 
@@ -1797,41 +1759,17 @@ select {
    ============================================================ */
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-::-webkit-scrollbar {
-    width: 5px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #333;
-    border-radius: 4px;
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
-
-[data-theme="light"] ::-webkit-scrollbar-thumb {
-    background: #ccc;
-}
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #555; }
 
-[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
-    background: #aaa;
-}
+[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aaa; }
 
 .cursor::after {
     content: '\25CB';
@@ -1840,11 +1778,7 @@ select {
     margin-left: 2px;
 }
 
-@keyframes blink {
-    50% {
-        opacity: 0;
-    }
-}
+@keyframes blink { 50% { opacity: 0; } }
 
 
 /* ============================================================
@@ -1862,13 +1796,9 @@ select {
 
 
 /* ============================================================
-   RESPONSIVE — MOBILE
+   SIDEBAR OVERLAY (mobile edge-swipe)
    ============================================================ */
 
-.mobile-fab-toggle {
-    display: none !important;
-}
-
 .sidebar-overlay {
     display: none;
     position: fixed;
@@ -1878,58 +1808,69 @@ select {
     -webkit-tap-highlight-color: transparent;
 }
 
-.sidebar-overlay.visible {
-    display: block;
-}
+.sidebar-overlay.visible { display: block; }
+
+
+/* ============================================================
+   RESPONSIVE — MOBILE (≤768px)
+   ============================================================ */
 
 @media (max-width: 768px) {
+
+    /* Show mobile top bar */
+    .mobile-topbar { display: flex; }
+
+    /* Hide desktop sidebar elements */
+    .sidebar { display: none !important; }
+    .sidebar-rail { display: none !important; }
+    .main-header { display: none !important; }
+
     .app-container {
         overflow: hidden;
+        overflow-x: hidden;
         position: relative;
+        flex-direction: column;
     }
 
-    .sidebar {
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: var(--sidebar-width);
-        height: 100vh;
-        height: 100dvh;
-        z-index: 40;
-        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-        margin-left: 0 !important;
+    .main-chat {
+        width: 100vw;
+        max-width: 100vw;
+        min-width: 0;
+        flex: 1;
+        overflow-x: hidden;
     }
 
-    .sidebar.collapsed {
-        transform: translateX(calc(-1 * var(--sidebar-width)));
-        opacity: 0;
-        pointer-events: none;
+    .chat-container {
+        padding: calc(var(--topbar-height) + 10px) 10px 16px;
+        gap: 16px;
+        height: 100%;
+        overflow-x: hidden;
     }
 
-    .sidebar:not(.collapsed) {
-        transform: translateX(0);
-        opacity: 1;
-        pointer-events: auto;
-    }
+    .message-row { max-width: 100%; }
+    .ai-avatar { display: none; }
 
-    .sidebar-rail {
-        display: none !important;
+    .ai .message-content {
+        font-size: 13px;
+        line-height: 1.55;
+        padding: 0 2px;
     }
 
-    .main-chat {
-        width: 100vw;
-        min-width: 0;
-        flex: 1;
+    .user .message-content {
+        max-width: 88%;
+        font-size: 13px;
     }
 
-    .sidebar-logo {
-        height: 36px;
+    .input-container {
+        padding: 10px 10px calc(6px + env(safe-area-inset-bottom));
     }
 
-    .sidebar-logo-row {
-        padding: 20px 18px 10px;
+    .disclaimer-text {
+        font-size: 10px;
+        margin-top: 6px;
     }
 
+    /* Settings modal responsive */
     .settings-modal {
         width: 96vw;
         height: 78vh;
@@ -1963,16 +1904,9 @@ select {
         white-space: normal;
     }
 
-    .settings-nav-btn span,
-    .settings-nav-btn> :not(svg) {
-        display: none;
-    }
+    .settings-nav-btn span, .settings-nav-btn > :not(svg) { display: none; }
 
-    .settings-nav-btn svg {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-    }
+    .settings-nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
 
     .settings-nav-btn.active {
         background: var(--bg-elevated);
@@ -1985,114 +1919,32 @@ select {
         min-width: 0;
     }
 
-    .hero-title {
-        font-size: 22px;
-    }
-
-    .hero-bot-icon {
-        width: 80px;
-        height: 80px;
-    }
+    .hero-title { font-size: 22px; }
+    .hero-bot-icon { width: 80px; height: 80px; }
 
     .hero-welcome {
         justify-content: center;
-        padding: 40px 16px calc(20px + env(safe-area-inset-bottom));
+        padding: calc(var(--topbar-height) + 10px) 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 {
-        padding: 60px 10px 16px;
-        gap: 16px;
-        height: 100%;
-    }
-
-    .message-row {
-        max-width: 100%;
-    }
-
-    .ai-avatar {
-        display: none;
-    }
-
-    .ai .message-content {
-        font-size: 13px;
-        line-height: 1.55;
-        padding: 0 2px;
-    }
-
-    .user .message-content {
-        max-width: 88%;
-        font-size: 13px;
-    }
-
-    .input-container {
-        padding: 10px 10px calc(6px + env(safe-area-inset-bottom));
-    }
-
-    .disclaimer-text {
-        font-size: 10px;
-        margin-top: 6px;
-    }
-
-    .history-item .options-btn {
-        opacity: 0.6;
-    }
+    .hero-input-wrap { max-width: 100%; }
 
-    .theme-toggle-btn {
-        top: 10px;
-        right: 10px;
-        width: 32px;
-        height: 32px;
-    }
+    .login-title { font-size: 20px; white-space: normal; }
 
-    .theme-toggle-btn svg {
-        width: 16px;
-        height: 16px;
+    /* Horizontal lock */
+    html, body, .app-container, .main-chat, .chat-container {
+        max-width: 100vw;
+        overflow-x: hidden;
     }
 }
 
 @media (max-width: 480px) {
-    .hero-title {
-        font-size: 20px;
-    }
-
-    .hero-input-box textarea {
-        font-size: 13px;
-    }
-
-    .ai .message-content {
-        font-size: 12.5px;
-    }
-
-    .user .message-content {
-        font-size: 12.5px;
-    }
-
-    .katex-display {
-        overflow-x: auto;
-        font-size: 0.95em;
-    }
-
-    .message-content pre {
-        font-size: 11px;
-    }
+    .hero-title { font-size: 20px; }
+    .hero-input-box textarea { font-size: 13px; }
+    .ai .message-content { font-size: 12.5px; }
+    .user .message-content { font-size: 12.5px; }
+    .katex-display { overflow-x: auto; font-size: 0.95em; }
+    .message-content pre { font-size: 11px; }
 }