model routing&response; UI/UX improvement..

graph.py

@@ -37,6 +37,26 @@ checkpointer = SqliteSaver(conn=_conn)
 DEFAULT_MODEL = "openai/gpt-oss-120b:free"
 MODELS_TTL    = 10 * 60   # seconds
 
+# Models that are safety classifiers / guardrail models — they output
+# "User Safety: safe\nResponse Safety: safe" instead of actual answers.
+_BLACKLISTED_MODELS = frozenset([
+    "meta-llama/llama-guard",
+    "meta-llama/llama-guard-2",
+    "meta-llama/llama-guard-3",
+    "meta-llama/llama-guard-4",
+])
+
+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'
+    return any(kw in base for kw in ('guard', 'shield', 'safety', 'moderation'))
+
 
 # ── Query Classification ─────────────────────────────────────
 
@@ -160,6 +180,9 @@ 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
 
             arch = m.get("architecture", {})
             modality    = arch.get("modality", "")
@@ -320,9 +343,21 @@ def chat_node(state: ChatState, config: RunnableConfig):
         messages = _strip_images(messages)
 
     # 4) Build system prompt & invoke
-    sys = SystemMessage(
-        content=prompts.build(persona, context, language, username, profile)
-    )
+    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"
+            "The student has attached an image with their question. "
+            "Analyze the image carefully and respond to their question about it. "
+            "Describe what you see in the image if relevant, then answer their query. "
+            "Do NOT output safety classifications, content ratings, or moderation labels. "
+            "You are a teacher — respond with an educational explanation, not a safety assessment.\n"
+        )
+
+    sys = SystemMessage(content=base_prompt)
     print(f"[ROUTER] category={category} model={model_id} vision={actual == 'vision'}")
 
     llm  = _make_llm(api_key, model_id)

static/app.js

@@ -1,6 +1,8 @@
 /* ============================================================
    STEM Copilot — Application Logic
-   Auth, BYOK, Chat, Settings, Streaming MD, PWA, Sidebar
+   Auth, BYOK, Chat, Settings, Streaming MD, PWA, Sidebar,
+   Theme Toggle, Teaching Style Selector, Voice Input,
+   Copy/Regenerate actions, Image Preview
    ============================================================ */
 
 /* ----- State ----- */
@@ -9,6 +11,7 @@ let currentThreadId = crypto.randomUUID();
 const threads       = [];
 let isSending       = false;
 let pendingImage    = null;
+let pendingImageDataUrl = null;
 let isHeroMode      = true;
 
 let currentPersona  = localStorage.getItem('stemcopilot_persona')  || 'nerd';
@@ -41,6 +44,7 @@ const heroInput         = document.getElementById('heroInput');
 const heroSendBtn       = document.getElementById('heroSendBtn');
 const heroUploadBtn     = document.getElementById('heroUploadBtn');
 const heroImageInput    = document.getElementById('heroImageInput');
+const heroTitle         = document.getElementById('heroTitle');
 
 const byokInput         = document.getElementById('byokInput');
 const byokSubmitBtn     = document.getElementById('byokSubmitBtn');
@@ -79,6 +83,51 @@ 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 = { nerd: 'Nerd', noob: 'Beginner', thoughtful: 'Thoughtful', panic: 'Panic' };
+
+function _initTheme() {
+    const saved = localStorage.getItem('stemcopilot_theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', saved);
+    _updateThemeColor(saved);
+}
+
+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);
+}
+
+function _updateThemeColor(theme) {
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.content = theme === 'light' ? '#f8f9fa' : '#0a0a0a';
+}
+
+_initTheme();
+if (themeToggleBtn) themeToggleBtn.addEventListener('click', _toggleTheme);
+
 
 /* ============================================================
    TOAST NOTIFICATION
@@ -308,6 +357,9 @@ function showApp() {
         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())
@@ -337,6 +389,19 @@ function enterHeroMode() {
         chatContainer.innerHTML = '';
         chatContainer.appendChild(createWelcomeScreen());
     }
+    // Update hero title with username
+    _updateHeroTitle();
+}
+
+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?';
+    }
 }
 
 function exitHeroMode() {
@@ -406,10 +471,8 @@ 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; // too vertical
-    // Swipe right from left 60px edge → open
+    if (dy > Math.abs(dx) * 0.8) return;
     if (!sidebarOpen && _touchStartX < 60 && dx > 50) openSidebar();
-    // Swipe left anywhere → close
     if (sidebarOpen && dx < -50) closeSidebar();
 }, { passive: true });
 
@@ -437,16 +500,29 @@ 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?`;
+
     div.innerHTML = `
         <img src="/assets/bot.png" alt="STEM Copilot" class="hero-bot-icon">
-        <h1 class="hero-title">What should we study today?</h1>
+        <h1 class="hero-title" id="heroTitle">${titleHtml}</h1>
         <div class="hero-input-wrap">
+            <div class="hero-image-preview" id="heroImagePreviewDynamic">
+                <div class="hero-image-preview-thumb" id="heroImagePreviewThumbDynamic"></div>
+                <button class="hero-image-preview-remove" id="heroImagePreviewRemoveDynamic">&times;</button>
+            </div>
             <div class="hero-input-box" id="heroInputBoxDynamic">
                 <button class="upload-btn" id="heroUploadBtnDynamic" title="Upload image">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                 </button>
                 <input type="file" id="heroImageInputDynamic" accept="image/*" style="display:none;">
                 <textarea id="heroInputDynamic" placeholder="Ask STEM Copilot..." rows="1"></textarea>
+                <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>
@@ -464,6 +540,10 @@ function createWelcomeScreen() {
     const dynSend = div.querySelector('#heroSendBtnDynamic');
     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');
 
     dynInput.addEventListener('input', function() {
         this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
@@ -475,13 +555,31 @@ function createWelcomeScreen() {
     });
     dynSend.addEventListener('click', () => { userInput.value = dynInput.value; sendMessage(); });
     dynUpload.addEventListener('click', () => dynFileInput.click());
-    dynFileInput.addEventListener('change', () => { if (dynFileInput.files[0]) handleImageFile(dynFileInput.files[0]); });
+    dynFileInput.addEventListener('change', () => {
+        if (dynFileInput.files[0]) {
+            handleImageFile(dynFileInput.files[0]);
+            // Show preview in hero
+            _showHeroImagePreview(dynImgPreview, dynImgThumb);
+        }
+    });
+    dynImgRemove.addEventListener('click', () => {
+        _clearImage();
+        dynImgPreview.classList.remove('visible');
+    });
+    if (dynMic) _bindMic(dynMic, dynInput);
     div.querySelectorAll('.hero-pill').forEach(p => {
         p.addEventListener('click', () => { userInput.value = p.dataset.query; sendMessage(); });
     });
     return div;
 }
 
+function _showHeroImagePreview(previewEl, thumbEl) {
+    if (pendingImageDataUrl && previewEl && thumbEl) {
+        thumbEl.style.backgroundImage = `url(${pendingImageDataUrl})`;
+        previewEl.classList.add('visible');
+    }
+}
+
 function addThreadToSidebar(id, title) {
     threads.unshift({ id, title });
     renderHistory();
@@ -554,6 +652,8 @@ 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'); }
 }
 
 function deleteChat(e, optionEl) {
@@ -641,10 +741,11 @@ document.querySelectorAll('.persona-option').forEach(opt => {
         opt.classList.add('active');
         currentPersona = opt.dataset.persona;
         localStorage.setItem('stemcopilot_persona', currentPersona);
+        _syncStyleLabel();
+        _syncStyleDropdown();
     });
 });
 
-// Save API key — with success/error feedback
 if (saveApiKeyBtn) saveApiKeyBtn.addEventListener('click', () => {
     const key = settingsApiKeyInput.value.trim();
     if (!key || key.startsWith('••')) return;
@@ -682,6 +783,99 @@ if (saveProfileBtn) saveProfileBtn.addEventListener('click', () => {
 });
 
 
+/* ============================================================
+   TEACHING STYLE SELECTOR (in input bar)
+   ============================================================ */
+
+function _syncStyleLabel() {
+    if (styleSelectorLabel) {
+        styleSelectorLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Nerd';
+    }
+}
+
+function _syncStyleDropdown() {
+    if (!styleDropdown) return;
+    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');
+    });
+}
+
+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);
+            });
+            styleDropdown.classList.remove('show');
+            styleSelectorBtn.classList.remove('open');
+        });
+    });
+}
+
+_syncStyleLabel();
+_syncStyleDropdown();
+
+
+/* ============================================================
+   VOICE INPUT (Web Speech API)
+   ============================================================ */
+
+function _bindMic(btn, targetInput) {
+    if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) {
+        btn.style.display = 'none';
+        return;
+    }
+
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    let recognition = null;
+
+    btn.addEventListener('click', () => {
+        if (btn.classList.contains('listening')) {
+            if (recognition) recognition.stop();
+            btn.classList.remove('listening');
+            return;
+        }
+
+        recognition = new SpeechRecognition();
+        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'));
+        };
+
+        recognition.onend = () => btn.classList.remove('listening');
+        recognition.onerror = () => btn.classList.remove('listening');
+        recognition.start();
+    });
+}
+
+if (micBtn && userInput) _bindMic(micBtn, userInput);
+if (heroMicBtn && heroInput) _bindMic(heroMicBtn, heroInput);
+
+
 /* ============================================================
    IMAGE UPLOAD
    ============================================================ */
@@ -689,7 +883,16 @@ if (saveProfileBtn) saveProfileBtn.addEventListener('click', () => {
 if (uploadBtn) uploadBtn.addEventListener('click', () => imageInput.click());
 if (imageInput) imageInput.addEventListener('change', () => { if (imageInput.files[0]) handleImageFile(imageInput.files[0]); });
 if (heroUploadBtn) heroUploadBtn.addEventListener('click', () => heroImageInput.click());
-if (heroImageInput) heroImageInput.addEventListener('change', () => { if (heroImageInput.files[0]) handleImageFile(heroImageInput.files[0]); });
+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');
+        }
+    }
+});
 
 document.addEventListener('paste', (e) => {
     const items = e.clipboardData?.items;
@@ -706,16 +909,33 @@ function handleImageFile(file) {
     reader.onload = (e) => {
         const dataUrl = e.target.result;
         pendingImage = dataUrl.split(',')[1];
+        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');
+            }
+        }
     };
     reader.readAsDataURL(file);
 }
 
-if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', () => {
+function _clearImage() {
     pendingImage = null;
+    pendingImageDataUrl = null;
     if (imagePreviewBar) imagePreviewBar.style.display = 'none';
     if (imageInput) imageInput.value = '';
+}
+
+if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', _clearImage);
+if (heroImagePreviewRemove) heroImagePreviewRemove.addEventListener('click', () => {
+    _clearImage();
+    if (heroImagePreview) heroImagePreview.classList.remove('visible');
 });
 
 
@@ -725,8 +945,8 @@ if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', () => {
 
 let currentAbortController = null;
 let currentStreamReader    = null;
-let currentStreamStopped   = false;   // module-level so stop button can kill it
-let currentRenderTimer     = null;    // so stop button can clear pending renders
+let currentStreamStopped   = false;
+let currentRenderTimer     = null;
 
 function _showStopBtn() {
     if (sendBtn) sendBtn.style.display = 'none';
@@ -739,27 +959,21 @@ function _showSendBtn() {
 
 if (stopBtn) {
     stopBtn.addEventListener('click', () => {
-        // 1) Set the flag FIRST — this immediately stops token processing
         currentStreamStopped = true;
-        // 2) Clear any pending render timer
         if (currentRenderTimer) { clearTimeout(currentRenderTimer); currentRenderTimer = null; }
-        // 3) Cancel the stream reader so no more data arrives
         if (currentStreamReader) {
             try { currentStreamReader.cancel(); } catch(_) {}
             currentStreamReader = null;
         }
-        // 4) Abort the fetch connection so server detects disconnect
         if (currentAbortController) {
             currentAbortController.abort();
             currentAbortController = null;
         }
-        // 5) Reset UI state
         isSending = false;
         _showSendBtn();
         const currentThinking = document.getElementById('currentThinking');
         if (currentThinking) currentThinking.style.display = 'none';
         document.querySelectorAll('.ai-avatar.pulsing').forEach(el => el.classList.remove('pulsing'));
-        // 6) Remove the typing cursor from partial response
         document.querySelectorAll('.message-content.cursor').forEach(el => el.classList.remove('cursor'));
     });
 }
@@ -827,6 +1041,7 @@ function sendMessage() {
 function streamResponse(text) {
     const imageData = pendingImage || '';
     pendingImage = null;
+    pendingImageDataUrl = null;
     if (imagePreviewBar) imagePreviewBar.style.display = 'none';
     if (imageInput) imageInput.value = '';
 
@@ -839,6 +1054,7 @@ function streamResponse(text) {
                 <span class="thinking-text">Reading your question...</span>
             </div>
             <div class="message-content" style="display:none;"></div>
+            <div class="msg-actions" style="display:none;"></div>
         </div>
     `;
     chatContainer.appendChild(rowDiv);
@@ -848,9 +1064,10 @@ function streamResponse(text) {
     const thinkingEl = rowDiv.querySelector('#currentThinking');
     const thinkingText = thinkingEl.querySelector('.thinking-text');
     const contentEl = rowDiv.querySelector('.message-content');
+    const actionsEl = rowDiv.querySelector('.msg-actions');
     let rawText = '';
     let firstToken = true;
-    currentStreamStopped = false;   // reset for this new stream
+    currentStreamStopped = false;
 
     currentRenderTimer = null;
     const RENDER_INTERVAL = 120;
@@ -879,14 +1096,14 @@ function streamResponse(text) {
         signal: currentAbortController.signal,
     }).then(response => {
         const reader = response.body.getReader();
-        currentStreamReader = reader;  // ← store so stop button can cancel it
+        currentStreamReader = reader;
         const decoder = new TextDecoder();
         let buffer = '';
 
         function read() {
             reader.read().then(({ done, value }) => {
                 if (done || currentStreamStopped) {
-                    if (!currentStreamStopped) finishStream(thinkingEl, contentEl, rawText, currentRenderTimer);
+                    if (!currentStreamStopped) finishStream(thinkingEl, contentEl, rawText, currentRenderTimer, actionsEl);
                     return;
                 }
 
@@ -895,11 +1112,11 @@ function streamResponse(text) {
                 buffer = lines.pop();
 
                 for (const line of lines) {
-                    if (currentStreamStopped) return;  // bail immediately
+                    if (currentStreamStopped) return;
                     if (!line.startsWith('data: ')) continue;
                     const pl = line.substring(6);
                     if (pl === '[DONE]') {
-                        finishStream(thinkingEl, contentEl, rawText, currentRenderTimer);
+                        finishStream(thinkingEl, contentEl, rawText, currentRenderTimer, actionsEl);
                         currentStreamStopped = true; return;
                     }
                     try {
@@ -912,7 +1129,7 @@ function streamResponse(text) {
                             isSending = false; _showSendBtn(); currentStreamStopped = true; return;
                         }
                         if (data.token !== undefined) {
-                            if (currentStreamStopped) return;  // double-check before adding token
+                            if (currentStreamStopped) return;
                             if (firstToken) {
                                 thinkingEl.style.display = 'none';
                                 contentEl.style.display = 'block';
@@ -937,7 +1154,6 @@ function streamResponse(text) {
         read();
     }).catch(err => {
         if (err.name === 'AbortError' || currentStreamStopped) {
-            // User clicked stop before any response — that's fine
             thinkingEl.style.display = 'none';
             contentEl.style.display = 'block';
             isSending = false; _showSendBtn();
@@ -955,7 +1171,7 @@ function streamResponse(text) {
     });
 }
 
-function finishStream(thinkingEl, contentEl, rawText, timer) {
+function finishStream(thinkingEl, contentEl, rawText, timer, actionsEl) {
     if (timer) clearTimeout(timer);
     currentRenderTimer = null;
     thinkingEl.style.display = 'none';
@@ -969,6 +1185,48 @@ function finishStream(thinkingEl, contentEl, rawText, timer) {
         const avatar = row.querySelector('.ai-avatar');
         if (avatar) avatar.classList.remove('pulsing');
     }
+    // Show copy/regenerate actions
+    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">
+                <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">
+                <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>
+        `;
+        const copyBtn = actionsEl.querySelector('[data-action="copy"]');
+        const regenBtn = actionsEl.querySelector('[data-action="regenerate"]');
+        if (copyBtn) {
+            copyBtn.addEventListener('click', () => {
+                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'));
+            });
+        }
+        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);
+                    }
+                }
+            });
+        }
+    }
 }
 
 
@@ -1040,7 +1298,6 @@ let deferredPrompt = null;
 window.addEventListener('beforeinstallprompt', (e) => {
     e.preventDefault();
     deferredPrompt = e;
-    // Show install banner immediately — works on login screen too
     const dismissed = localStorage.getItem('stemcopilot_install_dismissed');
     if (!dismissed && installBanner) {
         installBanner.style.display = 'flex';

static/index.html

@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <meta name="screen-orientation" content="portrait">
     <meta name="x5-orientation" content="portrait">
     <meta name="mobile-web-app-capable" content="yes">
@@ -23,22 +25,46 @@
     <link rel="stylesheet" href="/static/style.css">
     <!-- Google Identity Services: loaded dynamically by initGoogleAuth() in app.js -->
 </head>
+
 <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-card">
             <img src="/assets/stembotix.png" alt="STEM Copilot" class="login-logo-stembotix">
             <h1 class="login-title">Welcome to STEM Copilot</h1>
             <p class="login-subtitle">Your personal NCERT tutor for Physics, Chemistry &amp; Mathematics</p>
-            <div id="gsi-hidden-btn" style="position:fixed;top:-9999px;left:-9999px;opacity:0;pointer-events:none;"></div>
+            <div id="gsi-hidden-btn" style="position:fixed;top:-9999px;left:-9999px;opacity:0;pointer-events:none;">
+            </div>
             <div class="google-btn-wrap">
                 <button id="customGoogleBtn" class="gsi-custom-btn" onclick="triggerGoogleSignIn()">
                     <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-                        <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/>
-                        <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
-                        <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/>
-                        <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z"/>
+                        <path fill="#2231D4"
+                            d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" />
+                        <path fill="#34A853"
+                            d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" />
+                        <path fill="#FBBC05"
+                            d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" />
+                        <path fill="#EA4335"
+                            d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" />
                     </svg>
                     <span>Sign in with Google</span>
                 </button>
@@ -56,11 +82,13 @@
                 It's free — takes 30 seconds to set up.
             </p>
             <ol class="byok-steps">
-                <li>Go to <a href="https://openrouter.ai/workspaces/default/keys" target="_blank" rel="noopener">openrouter.ai/keys</a></li>
+                <li>Go to <a href="https://openrouter.ai/workspaces/default/keys" target="_blank"
+                        rel="noopener">openrouter.ai/keys</a></li>
                 <li>Create a new key (free)</li>
                 <li>Paste it below</li>
             </ol>
-            <input type="text" id="byokInput" class="settings-input" placeholder="Paste your OpenRouter API key here" autocomplete="off" spellcheck="false">
+            <input type="text" id="byokInput" class="settings-input" placeholder="Paste your OpenRouter API key here"
+                autocomplete="off" spellcheck="false">
             <button class="byok-submit-btn" id="byokSubmitBtn">Start Learning</button>
             <p class="byok-note">Your key is stored securely and never shared.</p>
         </div>
@@ -95,7 +123,10 @@
                     <img src="/assets/stembotix.png" alt="STEMbotix" class="sidebar-logo">
                 </div>
                 <button class="new-chat-btn" id="newChatBtn">
-                    <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="M12 5v14M5 12h14"/></svg>
+                    <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="M12 5v14M5 12h14" />
+                    </svg>
                     New Chat
                 </button>
                 <div class="chat-history" id="chatHistoryList"></div>
@@ -106,14 +137,24 @@
                     <img id="userAvatar" class="user-avatar" src="" alt="">
                     <span id="userDisplayName" class="user-name">Student</span>
                 </div>
-                <!-- User menu popup — Feedback now lives in Settings → Feedback tab -->
+                <!-- User menu popup -->
                 <div class="user-menu" id="userMenu">
                     <div class="user-menu-item" id="openSettingsBtn">
-                        <svg width="16" height="16" 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>
+                        <svg width="16" height="16" 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
                     </div>
                     <div class="user-menu-item user-menu-logout" id="logoutBtn">
-                        <svg width="16" height="16" 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>
+                        <svg width="16" height="16" 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
                     </div>
                 </div>
@@ -127,7 +168,10 @@
                     <img src="/assets/stem_black.png" alt="S" class="rail-logo">
                 </button>
                 <button class="rail-icon-btn" id="railNewChatBtn" 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>
+                    <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 class="rail-bottom">
@@ -141,7 +185,11 @@
         <main class="main-chat">
             <header class="main-header">
                 <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                        <line x1="9" y1="3" x2="9" y2="21" />
+                    </svg>
                 </button>
             </header>
 
@@ -149,24 +197,49 @@
                 <!-- Hero / Welcome screen -->
                 <div class="hero-welcome" id="welcomeScreen">
                     <img src="/assets/bot.png" alt="STEM Copilot" class="hero-bot-icon">
-                    <h1 class="hero-title">What should we study today?</h1>
+                    <h1 class="hero-title" id="heroTitle">What should we study today?</h1>
                     <div class="hero-input-wrap">
+                        <!-- Image preview in hero -->
+                        <div class="hero-image-preview" id="heroImagePreview">
+                            <div class="hero-image-preview-thumb" id="heroImagePreviewThumb"></div>
+                            <button class="hero-image-preview-remove" id="heroImagePreviewRemove">&times;</button>
+                        </div>
                         <div class="hero-input-box" id="heroInputBox">
                             <button class="upload-btn" id="heroUploadBtn" title="Upload image">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                                    <circle cx="8.5" cy="8.5" r="1.5" />
+                                    <polyline points="21 15 16 10 5 21" />
+                                </svg>
                             </button>
                             <input type="file" id="heroImageInput" accept="image/*" style="display:none;">
                             <textarea id="heroInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
+                            <!-- 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>
+                                <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>
                     <div class="hero-pills" id="welcomePills">
-                        <button class="hero-pill" data-query="Explain Coulomb's law with derivation">Coulomb's Law</button>
-                        <button class="hero-pill" data-query="What is sp3 hybridisation? Explain with examples">sp3 Hybridisation</button>
-                        <button class="hero-pill" data-query="Derive the quadratic formula step by step">Quadratic Formula</button>
-                        <button class="hero-pill" data-query="Explain Newton's laws of motion with real world examples">Newton's Laws</button>
+                        <button class="hero-pill" data-query="Explain Coulomb's law with derivation">Coulomb's
+                            Law</button>
+                        <button class="hero-pill" data-query="What is sp3 hybridisation? Explain with examples">sp3
+                            Hybridisation</button>
+                        <button class="hero-pill" data-query="Derive the quadratic formula step by step">Quadratic
+                            Formula</button>
+                        <button class="hero-pill"
+                            data-query="Explain Newton's laws of motion with real world examples">Newton's Laws</button>
                     </div>
                 </div>
             </div>
@@ -180,15 +253,64 @@
                 </div>
                 <div class="input-box" id="inputBox">
                     <button class="upload-btn" id="uploadBtn" title="Upload image">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                            <circle cx="8.5" cy="8.5" r="1.5" />
+                            <polyline points="21 15 16 10 5 21" />
+                        </svg>
                     </button>
                     <input type="file" id="imageInput" accept="image/*" style="display:none;">
+                    <!-- 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>
+                            <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">
+                            <div class="style-option 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" 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" 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" 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>
+                        </div>
+                    </div>
                     <textarea id="userInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
+                    <!-- 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>
+                    </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>
+                        <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>
+                        <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">
@@ -209,23 +331,44 @@
                 <!-- Vertical Tab Navigation -->
                 <div class="settings-nav">
                     <button class="settings-nav-btn active" data-tab="general">
-                        <svg width="16" height="16" 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>
+                        <svg width="16" height="16" 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>
                         <span>General</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"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path
+                                d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+                        </svg>
                         <span>API Keys</span>
                     </button>
                     <button class="settings-nav-btn" data-tab="personalization">
-                        <svg width="16" height="16" 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>
+                        <svg width="16" height="16" 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>
                         <span>Profile</span>
                     </button>
                     <button class="settings-nav-btn" data-tab="style">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path d="M12 20h9" />
+                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+                        </svg>
                         <span>Teaching Style</span>
                     </button>
                     <button class="settings-nav-btn" data-tab="feedback">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path
+                                d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+                        </svg>
                         <span>Feedback</span>
                     </button>
                 </div><!-- /settings-nav -->
@@ -249,19 +392,24 @@
                     <!-- API Keys Tab -->
                     <div class="tab-content" id="tab-apikeys">
                         <h3 class="settings-section-title">OpenRouter API Key</h3>
-                        <input type="password" class="settings-input" id="settingsApiKeyInput" placeholder="sk-or-..." autocomplete="off" spellcheck="false">
+                        <input type="password" class="settings-input" id="settingsApiKeyInput" placeholder="sk-or-..."
+                            autocomplete="off" spellcheck="false">
                         <button class="settings-save-btn" id="saveApiKeyBtn">Save Key</button>
                         <p class="settings-hint">
-                            Get your free key at <a href="https://openrouter.ai/workspaces/default/keys" target="_blank" rel="noopener">openrouter.ai/keys</a>
+                            Get your free key at <a href="https://openrouter.ai/workspaces/default/keys" target="_blank"
+                                rel="noopener">openrouter.ai/keys</a>
                         </p>
                     </div>
 
                     <!-- Profile Tab -->
                     <div class="tab-content" id="tab-personalization">
                         <h3 class="settings-section-title">Your Name</h3>
-                        <input type="text" class="settings-input" id="usernameInput" placeholder="What should I call you?" maxlength="30" autocomplete="off">
+                        <input type="text" class="settings-input" id="usernameInput"
+                            placeholder="What should I call you?" maxlength="30" autocomplete="off">
                         <h3 class="settings-section-title" style="margin-top:20px;">About You</h3>
-                        <textarea class="settings-textarea" id="profileInput" placeholder="e.g. I'm in Class XII, preparing for JEE. Physics and Maths scare me. I'm good at Chemistry." rows="4"></textarea>
+                        <textarea class="settings-textarea" id="profileInput"
+                            placeholder="e.g. I'm in Class XII, preparing for JEE. Physics and Maths scare me. I'm good at Chemistry."
+                            rows="4"></textarea>
                         <button class="settings-save-btn" id="saveProfileBtn">Save Profile</button>
                     </div>
 
@@ -269,8 +417,9 @@
                     <div class="tab-content" id="tab-style">
                         <p class="settings-hint" style="margin-bottom:14px;">Pick the mood that suits you today.</p>
                         <div class="persona-option" data-persona="noob">
-                            <div class="persona-name">Noob</div>
-                            <div class="persona-desc">Patient, step-by-step. Explains like you're seeing it for the first time.</div>
+                            <div class="persona-name">Beginner</div>
+                            <div class="persona-desc">Patient, step-by-step. Explains like you're seeing it for the
+                                first time.</div>
                         </div>
                         <div class="persona-option active" data-persona="nerd">
                             <div class="persona-name">Nerd</div>
@@ -278,7 +427,8 @@
                         </div>
                         <div class="persona-option" data-persona="thoughtful">
                             <div class="persona-name">Thoughtful</div>
-                            <div class="persona-desc">Connects science to the real world. Every formula has a story.</div>
+                            <div class="persona-desc">Connects science to the real world. Every formula has a story.
+                            </div>
                         </div>
                         <div class="persona-option" data-persona="panic">
                             <div class="persona-name">Panic</div>
@@ -295,8 +445,10 @@
                             <option value="other">Other</option>
                         </select>
                         <h3 class="settings-section-title" style="margin-top:16px;">Message</h3>
-                        <textarea class="settings-textarea" id="feedbackMessage" rows="5" placeholder="Tell us how we can improve..."></textarea>
-                        <button class="settings-save-btn" id="submitFeedbackBtn" style="width:100%;margin-top:4px;">Submit Securely</button>
+                        <textarea class="settings-textarea" id="feedbackMessage" rows="5"
+                            placeholder="Tell us how we can improve..."></textarea>
+                        <button class="settings-save-btn" id="submitFeedbackBtn"
+                            style="width:100%;margin-top:4px;">Submit Securely</button>
                     </div>
                 </div><!-- /settings-panel -->
             </div><!-- /settings-layout -->
@@ -310,4 +462,5 @@
     <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script defer src="/static/app.js"></script>
 </body>
-</html>
+
+</html>

static/style.css

@@ -1,12 +1,12 @@
 /* ============================================================
    STEM Copilot — Stylesheet
-   Montserrat, dark theme, premium chat UI
+   Montserrat, dark/light theme, premium chat UI
    ============================================================ */
 
 :root {
-    --brand-orange: #EB5A28;
-    --brand-orange-hover: #cf4f22;
-    --brand-orange-glow: rgba(235, 90, 40, 0.25);
+    --brand: #2231D4;
+    --brand-hover: #3367D6;
+    --brand-glow: rgba(66, 133, 244, 0.25);
     --bg-main: #000000;
     --bg-sidebar: #0a0a0a;
     --bg-input: #1a1a1a;
@@ -28,7 +28,28 @@
     --rail-width: 56px;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+/* ── LIGHT MODE ── */
+[data-theme="light"] {
+    --bg-main: #f8f9fa;
+    --bg-sidebar: #ffffff;
+    --bg-input: #ffffff;
+    --bg-hover: #f0f0f0;
+    --bg-card: #ffffff;
+    --bg-elevated: #f5f5f5;
+    --text-primary: #1a1a1a;
+    --text-secondary: #555555;
+    --text-muted: #999999;
+    --border-color: #e0e0e0;
+    --border-subtle: #eeeeee;
+    --msg-user: #e8f0fe;
+    --msg-ai: transparent;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 
 html {
     -webkit-text-size-adjust: 100%;
@@ -47,6 +68,80 @@ body {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
     overscroll-behavior: none;
+    /* Smooth theme transitions */
+    transition: background-color 0.4s ease, color 0.4s ease;
+}
+
+/* Smooth transitions for all themed elements */
+*,
+*::before,
+*::after {
+    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
+}
+
+/* Exclude specific properties that shouldn't transition globally */
+textarea,
+input,
+select {
+    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+
+/* ============================================================
+   THEME TOGGLE BUTTON (top-right, all screens)
+   ============================================================ */
+
+.theme-toggle-btn {
+    position: fixed;
+    top: 14px;
+    right: 16px;
+    z-index: 1100;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    background: var(--bg-elevated);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s, border-color 0.3s, transform 0.2s;
+}
+
+.theme-toggle-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--brand);
+    transform: scale(1.08);
+}
+
+.theme-toggle-btn svg {
+    width: 18px;
+    height: 18px;
+    stroke: var(--text-secondary);
+    fill: none;
+    stroke-width: 2;
+    transition: stroke 0.3s;
+}
+
+.theme-toggle-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;
 }
 
 
@@ -70,14 +165,6 @@ body {
     padding: 48px 36px;
 }
 
-.login-logo {
-    width: 100px;
-    height: 100px;
-    margin-bottom: 28px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
 .login-logo-stembotix {
     height: 48px;
     margin-bottom: 32px;
@@ -109,22 +196,22 @@ body {
     display: inline-flex;
     align-items: center;
     gap: 12px;
-    background: #1a1a1a;
-    border: 1px solid #333;
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
     border-radius: 24px;
     padding: 12px 28px;
-    color: #f0ece6;
+    color: var(--text-primary);
     font-family: 'Montserrat', sans-serif;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
-    transition: background 0.2s, border-color 0.2s, transform 0.1s;
+    transition: background 0.3s, border-color 0.3s, transform 0.1s;
     white-space: nowrap;
 }
 
 .gsi-custom-btn:hover {
-    background: #222;
-    border-color: #555;
+    background: var(--bg-hover);
+    border-color: var(--brand);
 }
 
 .gsi-custom-btn:active {
@@ -158,9 +245,18 @@ body {
     padding: 48px 36px;
 }
 
-.byok-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
+.byok-card h2 {
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
 
-.byok-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
+.byok-desc {
+    font-size: 14px;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
 
 .byok-steps {
     text-align: left;
@@ -171,14 +267,20 @@ body {
     color: var(--text-secondary);
 }
 
-.byok-steps a { color: var(--brand-orange); 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%;
     padding: 14px;
     margin-top: 16px;
-    background: var(--brand-orange);
+    background: var(--brand);
     color: #fff;
     border: none;
     border-radius: var(--radius);
@@ -186,11 +288,18 @@ body {
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
-    transition: background var(--transition);
+    transition: background 0.3s;
 }
 
-.byok-submit-btn:hover { background: var(--brand-orange-hover); }
-.byok-note { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
+.byok-submit-btn:hover {
+    background: var(--brand-hover);
+}
+
+.byok-note {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-top: 12px;
+}
 
 
 /* ============================================================
@@ -202,7 +311,7 @@ body {
     bottom: calc(24px + env(safe-area-inset-bottom));
     left: 50%;
     transform: translateX(-50%);
-    z-index: 1000;
+    z-index: 1050;
     background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
@@ -210,13 +319,17 @@ body {
     display: flex;
     align-items: center;
     gap: 12px;
-    box-shadow: 0 12px 48px rgba(0,0,0,0.8);
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
     max-width: 400px;
     width: calc(100% - 32px);
     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;
@@ -226,11 +339,17 @@ body {
     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-orange);
+    background: var(--brand);
     color: #fff;
     border: none;
     border-radius: 8px;
@@ -239,10 +358,12 @@ body {
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
-    transition: background var(--transition);
+    transition: background 0.3s;
 }
 
-.install-banner-btn:hover { background: var(--brand-orange-hover); }
+.install-banner-btn:hover {
+    background: var(--brand-hover);
+}
 
 .install-banner-dismiss {
     background: none;
@@ -254,8 +375,15 @@ body {
 }
 
 @keyframes slideUp {
-    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
-    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
 }
 
 
@@ -282,7 +410,7 @@ body {
     display: flex;
     flex-direction: column;
     border-right: 1px solid var(--border-color);
-    transition: margin-left var(--transition), opacity var(--transition);
+    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     z-index: 20;
 }
@@ -314,8 +442,8 @@ body {
 .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: linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(66, 133, 244, 0.02));
+    border: 1px solid rgba(66, 133, 244, 0.2);
     color: var(--text-primary);
     border-radius: var(--radius);
     cursor: pointer;
@@ -325,17 +453,17 @@ body {
     font-size: 14px;
     font-weight: 600;
     font-family: inherit;
-    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
+    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
 }
 
 .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: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(66, 133, 244, 0.05));
+    border-color: rgba(66, 133, 244, 0.4);
+    box-shadow: 0 0 16px rgba(66, 133, 244, 0.1);
 }
 
 .new-chat-btn svg {
-    color: var(--brand-orange);
+    color: var(--brand);
 }
 
 .chat-history {
@@ -357,7 +485,7 @@ body {
     display: flex;
     align-items: center;
     gap: 10px;
-    transition: background var(--transition), color var(--transition), transform 0.15s;
+    transition: background 0.2s, color 0.2s, transform 0.15s;
 }
 
 .history-item:hover {
@@ -370,9 +498,9 @@ body {
 }
 
 .history-item.active {
-    background: linear-gradient(135deg, rgba(235,90,40,0.1), rgba(235,90,40,0.03));
+    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(66, 133, 244, 0.03));
     color: var(--text-primary);
-    border: 1px solid rgba(235,90,40,0.15);
+    border: 1px solid rgba(66, 133, 244, 0.15);
 }
 
 .history-item:not(.active) {
@@ -388,7 +516,7 @@ body {
 
 .history-item.active .thread-icon {
     opacity: 0.8;
-    color: var(--brand-orange);
+    color: var(--brand);
 }
 
 .chat-title {
@@ -399,34 +527,45 @@ body {
 }
 
 .options-btn {
-    background: none; border: none;
+    background: none;
+    border: none;
     color: var(--text-secondary);
-    font-size: 18px; line-height: 1;
-    cursor: pointer; opacity: 0;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0;
     padding: 0 4px;
     flex-shrink: 0;
     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); }
+.options-btn.menu-open {
+    opacity: 1;
+}
+
+.options-btn:hover {
+    color: var(--text-primary);
+}
 
 .options-menu {
     position: absolute;
-    right: 10px; top: 40px;
+    right: 10px;
+    top: 40px;
     background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     display: none;
     flex-direction: column;
     z-index: 100;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     min-width: 130px;
     overflow: hidden;
 }
 
-.options-menu.show { display: flex; }
+.options-menu.show {
+    display: flex;
+}
 
 .option-item {
     padding: 10px 14px;
@@ -439,27 +578,34 @@ body {
     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%;
-    background: transparent; border: none;
+    background: transparent;
+    border: none;
     color: var(--text-primary);
-    font-family: inherit; font-size: 13px;
+    font-family: inherit;
+    font-size: 13px;
     outline: none;
-    border-bottom: 1px solid var(--brand-orange);
+    border-bottom: 1px solid var(--brand);
     padding: 2px 0;
 }
 
 
-/* --- Sidebar bottom — user profile (premium look) --- */
+/* --- Sidebar bottom — user profile --- */
 
 .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));
+    background: linear-gradient(180deg, transparent, rgba(66, 133, 244, 0.02));
 }
 
 .user-profile-btn {
@@ -469,27 +615,28 @@ body {
     padding: 10px 12px;
     border-radius: 12px;
     cursor: pointer;
-    transition: background var(--transition), box-shadow var(--transition);
+    transition: background 0.2s, box-shadow 0.2s;
     border: 1px solid transparent;
 }
 
 .user-profile-btn:hover {
     background: var(--bg-hover);
     border-color: var(--border-color);
-    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
 }
 
 .user-avatar {
-    width: 34px; height: 34px;
+    width: 34px;
+    height: 34px;
     border-radius: 50%;
     object-fit: cover;
     background: var(--bg-hover);
     border: 2px solid var(--border-color);
-    transition: border-color var(--transition);
+    transition: border-color 0.2s;
 }
 
 .user-profile-btn:hover .user-avatar {
-    border-color: var(--brand-orange);
+    border-color: var(--brand);
 }
 
 .user-name {
@@ -501,21 +648,23 @@ body {
     text-overflow: ellipsis;
 }
 
-.user-menu-arrow { opacity: 0.5; transition: transform 0.2s; }
-
 .user-menu {
     display: none;
     position: absolute;
-    bottom: 72px; left: 14px; right: 14px;
+    bottom: 72px;
+    left: 14px;
+    right: 14px;
     background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
-    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     z-index: 50;
 }
 
-.user-menu.show { display: block; }
+.user-menu.show {
+    display: block;
+}
 
 .user-menu-item {
     padding: 12px 16px;
@@ -527,8 +676,13 @@ body {
     transition: background 0.2s;
 }
 
-.user-menu-item:hover { background: var(--bg-hover); }
-.user-menu-logout { color: #ff4a4a; }
+.user-menu-item:hover {
+    background: var(--bg-hover);
+}
+
+.user-menu-logout {
+    color: #ff4a4a;
+}
 
 
 /* ============================================================
@@ -552,7 +706,8 @@ body {
     display: flex;
 }
 
-.rail-top, .rail-bottom {
+.rail-top,
+.rail-bottom {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -560,7 +715,8 @@ body {
 }
 
 .rail-icon-btn {
-    width: 40px; height: 40px;
+    width: 40px;
+    height: 40px;
     border-radius: 10px;
     background: transparent;
     border: none;
@@ -569,7 +725,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background var(--transition), color var(--transition);
+    transition: background 0.2s, color 0.2s;
 }
 
 .rail-icon-btn:hover {
@@ -578,13 +734,15 @@ body {
 }
 
 .rail-logo {
-    width: 34px; height: 34px;
+    width: 34px;
+    height: 34px;
     border-radius: 6px;
     object-fit: contain;
 }
 
 .rail-avatar {
-    width: 28px; height: 28px;
+    width: 28px;
+    height: 28px;
     border-radius: 50%;
     object-fit: cover;
     background: var(--bg-hover);
@@ -605,7 +763,8 @@ body {
 
 .main-header {
     position: absolute;
-    top: 0; left: 0;
+    top: 0;
+    left: 0;
     width: 100%;
     padding: 14px 20px;
     display: flex;
@@ -614,7 +773,8 @@ body {
 }
 
 .toggle-sidebar-btn {
-    background: transparent; border: none;
+    background: transparent;
+    border: none;
     color: var(--text-secondary);
     cursor: pointer;
     display: flex;
@@ -651,7 +811,7 @@ body {
     align-items: center;
     justify-content: center;
     flex: 1;
-    gap: 24px;
+    gap: 20px;
     user-select: none;
     padding: 40px 20px;
 }
@@ -660,28 +820,66 @@ body {
     width: 120px;
     height: 120px;
     object-fit: contain;
-    animation: heroFloat 3s ease-in-out infinite;
-    filter: drop-shadow(0 8px 24px rgba(235, 90, 40, 0.15));
-}
-
-@keyframes heroFloat {
-    0%, 100% { transform: translateY(0); }
-    50%      { transform: translateY(-8px); }
+    filter: drop-shadow(0 8px 24px rgba(66, 133, 244, 0.15));
+    /* NO animation — fixed, no jumping */
 }
 
 .hero-title {
-    font-size: 32px;
+    font-size: 28px;
     font-weight: 700;
     color: var(--text-primary);
     text-align: center;
     line-height: 1.3;
 }
 
+.hero-title .hero-name {
+    color: var(--brand);
+}
+
 .hero-input-wrap {
     width: 100%;
     max-width: 640px;
 }
 
+/* Image preview inside hero */
+.hero-image-preview {
+    display: none;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding: 6px 10px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+}
+
+.hero-image-preview.visible {
+    display: flex;
+}
+
+.hero-image-preview-thumb {
+    width: 48px;
+    height: 48px;
+    border-radius: 6px;
+    background-size: cover;
+    background-position: center;
+}
+
+.hero-image-preview-remove {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 4px 8px;
+    transition: color 0.2s;
+}
+
+.hero-image-preview-remove:hover {
+    color: #ff4a4a;
+}
+
 .hero-input-box {
     display: flex;
     align-items: flex-end;
@@ -689,28 +887,33 @@ body {
     border: 1.5px solid var(--border-color);
     border-radius: var(--radius-xl);
     transition: border-color 0.3s, box-shadow 0.3s;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
 }
 
 .hero-input-box:focus-within {
-    border-color: var(--brand-orange);
-    box-shadow: 0 0 0 3px var(--brand-orange-glow), 0 4px 20px rgba(0,0,0,0.4);
+    border-color: var(--brand);
+    box-shadow: 0 0 0 3px var(--brand-glow), 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
 .hero-input-box textarea {
     flex: 1;
-    background: transparent; border: none;
+    background: transparent;
+    border: none;
     color: var(--text-primary);
     padding: 16px 12px;
     font-family: inherit;
     font-size: 15px;
-    resize: none; outline: none;
-    height: 54px; max-height: 120px;
+    resize: none;
+    outline: none;
+    height: 54px;
+    max-height: 120px;
     line-height: 1.5;
     overflow-y: hidden;
 }
 
-.hero-input-box textarea::placeholder { color: var(--text-muted); }
+.hero-input-box textarea::placeholder {
+    color: var(--text-muted);
+}
 
 .hero-pills {
     display: grid;
@@ -731,14 +934,14 @@ body {
     font-weight: 500;
     cursor: pointer;
     text-align: left;
-    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
+    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-orange);
+    border-color: var(--brand);
     color: var(--text-primary);
-    box-shadow: 0 0 0 1px var(--brand-orange-glow);
+    box-shadow: 0 0 0 1px var(--brand-glow);
 }
 
 
@@ -754,8 +957,13 @@ body {
     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;
@@ -779,7 +987,8 @@ body {
 }
 
 .ai-avatar {
-    width: 30px; height: 30px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background-image: url('/assets/bot.png');
     background-size: cover;
@@ -794,8 +1003,17 @@ body {
 }
 
 @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);
+    }
 }
 
 
@@ -809,12 +1027,8 @@ body {
     animation: fadeIn 0.3s ease-out;
 }
 
-.thinking-indicator.hidden { display: none; }
-
-.thinking-logo {
-    width: 22px; height: 22px;
-    border-radius: 50%;
-    animation: pulse 1.5s ease-in-out infinite;
+.thinking-indicator.hidden {
+    display: none;
 }
 
 .thinking-text {
@@ -823,34 +1037,54 @@ body {
     font-style: italic;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 0.5; transform: scale(1); }
-    50%      { opacity: 1;   transform: scale(1.08); }
-}
-
 
 /* --- Rendered markdown in AI messages --- */
 
-.message-content h1, .message-content h2, .message-content h3 {
-    margin-top: 16px; margin-bottom: 8px;
+.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: #1e1e1e;
+    background: rgba(0, 0, 0, 0.15);
     padding: 2px 6px;
     border-radius: 4px;
     font-family: 'Courier New', monospace;
     font-size: 0.88em;
 }
 
+[data-theme="light"] .message-content code {
+    background: rgba(0, 0, 0, 0.06);
+}
+
 .message-content pre {
     background: #111;
     border: 1px solid var(--border-color);
@@ -860,26 +1094,49 @@ body {
     margin: 10px 0;
 }
 
-.message-content pre code { background: none; padding: 0; }
+[data-theme="light"] .message-content pre {
+    background: #f5f5f5;
+}
 
-.message-content table { border-collapse: collapse; margin: 10px 0; width: 100%; }
-.message-content th, .message-content td {
+.message-content pre code {
+    background: none;
+    padding: 0;
+}
+
+.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-orange);
+    border-left: 3px solid var(--brand);
     padding-left: 12px;
     margin: 10px 0;
     color: var(--text-secondary);
 }
 
-.katex { color: var(--text-primary); }
-.katex-display { margin: 14px 0; overflow-x: auto; }
+.katex {
+    color: var(--text-primary);
+}
+
+.katex-display {
+    margin: 14px 0;
+    overflow-x: auto;
+}
 
 .message-image {
     max-width: 240px;
@@ -888,6 +1145,55 @@ body {
 }
 
 
+/* ============================================================
+   AI MESSAGE ACTION BAR (copy, regenerate)
+   ============================================================ */
+
+.msg-actions {
+    display: flex;
+    gap: 6px;
+    margin-top: 8px;
+    padding-top: 6px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.message-row.ai:hover .msg-actions,
+.msg-actions.visible {
+    opacity: 1;
+}
+
+.msg-action-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 11px;
+    font-family: inherit;
+    font-weight: 500;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+
+.msg-action-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--brand);
+}
+
+.msg-action-btn svg {
+    width: 13px;
+    height: 13px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+}
+
+
 /* ============================================================
    INPUT AREA (bottom bar during chat)
    ============================================================ */
@@ -915,7 +1221,8 @@ body {
 }
 
 .image-preview-thumb {
-    width: 48px; height: 48px;
+    width: 48px;
+    height: 48px;
     border-radius: 6px;
     background-size: cover;
     background-position: center;
@@ -923,7 +1230,8 @@ body {
 
 .image-preview-remove {
     margin-left: auto;
-    background: none; border: none;
+    background: none;
+    border: none;
     color: var(--text-secondary);
     font-size: 20px;
     cursor: pointer;
@@ -931,10 +1239,13 @@ body {
     transition: color 0.2s;
 }
 
-.image-preview-remove:hover { color: #ff4a4a; }
+.image-preview-remove:hover {
+    color: #ff4a4a;
+}
 
 .input-box {
-    width: 100%; max-width: 800px;
+    width: 100%;
+    max-width: 800px;
     position: relative;
     display: flex;
     align-items: flex-end;
@@ -942,16 +1253,17 @@ body {
     border: 1.5px solid var(--border-color);
     border-radius: var(--radius-xl);
     transition: border-color 0.3s, box-shadow 0.3s;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
 }
 
 .input-box:focus-within {
-    border-color: var(--brand-orange);
-    box-shadow: 0 0 0 3px var(--brand-orange-glow), 0 4px 20px rgba(0,0,0,0.4);
+    border-color: var(--brand);
+    box-shadow: 0 0 0 3px var(--brand-glow), 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
 .upload-btn {
-    background: none; border: none;
+    background: none;
+    border: none;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 16px 4px 16px 16px;
@@ -960,25 +1272,175 @@ body {
     transition: color 0.2s;
 }
 
-.upload-btn:hover { color: var(--text-primary); }
+.upload-btn:hover {
+    color: var(--text-primary);
+}
+
+/* Teaching style selector in input bar */
+.style-selector-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.style-selector-btn {
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 6px 10px;
+    font-size: 11px;
+    font-family: inherit;
+    font-weight: 600;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
+    margin-bottom: 12px;
+}
+
+.style-selector-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--brand);
+}
+
+.style-selector-btn svg {
+    width: 12px;
+    height: 12px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    transition: transform 0.2s;
+}
+
+.style-selector-btn.open svg {
+    transform: rotate(180deg);
+}
+
+.style-dropdown {
+    display: none;
+    position: absolute;
+    bottom: 44px;
+    left: 0;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    min-width: 240px;
+    overflow: hidden;
+    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(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;
+}
 
 #userInput {
     flex: 1;
-    background: transparent; border: none;
+    background: transparent;
+    border: none;
     color: var(--text-primary);
-    padding: 16px 12px 16px 16px;
+    padding: 16px 12px 16px 8px;
     font-family: inherit;
     font-size: 14px;
-    resize: none; outline: none;
-    height: 54px; max-height: 200px;
+    resize: none;
+    outline: none;
+    height: 54px;
+    max-height: 200px;
     line-height: 1.5;
     overflow-y: hidden;
 }
 
-#userInput::placeholder { color: var(--text-muted); }
+#userInput::placeholder {
+    color: var(--text-muted);
+}
 
 .send-btn {
-    background: none; border: none;
+    background: none;
+    border: none;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 16px 16px 16px 4px;
@@ -987,13 +1449,24 @@ body {
     transition: color 0.2s, transform 0.1s;
 }
 
-.send-btn:hover { color: var(--brand-orange); }
-.send-btn:active { transform: scale(0.92); }
-.send-btn svg { width: 20px; height: 20px; fill: currentColor; }
+.send-btn:hover {
+    color: var(--brand);
+}
+
+.send-btn:active {
+    transform: scale(0.92);
+}
+
+.send-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+}
 
 .stop-btn {
-    background: none; border: none;
-    color: var(--brand-orange);
+    background: none;
+    border: none;
+    color: var(--brand);
     cursor: pointer;
     padding: 16px 16px 16px 4px;
     display: none;
@@ -1001,15 +1474,27 @@ body {
     transition: color 0.2s, transform 0.1s;
 }
 
-.stop-btn.visible { display: flex; }
+.stop-btn.visible {
+    display: flex;
+}
+
+.stop-btn:hover {
+    color: #ff4a4a;
+}
+
+.stop-btn:active {
+    transform: scale(0.92);
+}
 
-.stop-btn:hover { color: #ff4a4a; }
-.stop-btn:active { transform: scale(0.92); }
-.stop-btn svg { width: 22px; height: 22px; fill: currentColor; }
+.stop-btn svg {
+    width: 22px;
+    height: 22px;
+    fill: currentColor;
+}
 
 .disclaimer-text {
     font-size: 11px;
-    color: rgba(255,255,255,0.5);
+    color: var(--text-muted);
     font-weight: 500;
     margin-top: 10px;
     text-align: center;
@@ -1024,13 +1509,16 @@ body {
     display: none;
     position: fixed;
     inset: 0;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
     z-index: 500;
     align-items: center;
     justify-content: center;
 }
 
-.modal-overlay.show { display: flex; }
+.modal-overlay.show {
+    display: flex;
+}
 
 .settings-modal {
     background: var(--bg-sidebar);
@@ -1041,7 +1529,7 @@ body {
     height: 520px;
     max-height: 88vh;
     overflow: hidden;
-    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
 }
@@ -1055,10 +1543,14 @@ body {
     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; border: none;
+    background: none;
+    border: none;
     color: var(--text-secondary);
     font-size: 24px;
     cursor: pointer;
@@ -1066,7 +1558,9 @@ body {
     transition: color 0.2s;
 }
 
-.modal-close:hover { color: var(--text-primary); }
+.modal-close:hover {
+    color: var(--text-primary);
+}
 
 .modal-body {
     padding: 0;
@@ -1103,13 +1597,21 @@ body {
     font-weight: 500;
     cursor: pointer;
     border-radius: 8px;
-    transition: background var(--transition), color var(--transition);
+    transition: background 0.2s, color 0.2s;
     text-align: left;
     width: 100%;
 }
 
-.settings-nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
-.settings-nav-btn.active { background: var(--bg-hover); color: var(--text-primary); font-weight: 600; }
+.settings-nav-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.settings-nav-btn.active {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    font-weight: 600;
+}
 
 .settings-panel {
     flex: 1;
@@ -1118,8 +1620,13 @@ body {
     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;
@@ -1128,7 +1635,8 @@ body {
     margin-bottom: 10px;
 }
 
-.settings-input, .settings-textarea {
+.settings-input,
+.settings-textarea {
     width: 100%;
     padding: 11px 14px;
     background: var(--bg-input);
@@ -1141,8 +1649,15 @@ body {
     transition: border-color 0.2s;
 }
 
-.settings-input:focus, .settings-textarea:focus { border-color: var(--brand-orange); }
-.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;
@@ -1169,13 +1684,19 @@ body {
     transition: border-color 0.2s;
 }
 
-.settings-select:focus { border-color: var(--brand-orange); }
-.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;
     padding: 10px 24px;
-    background: var(--brand-orange);
+    background: var(--brand);
     color: #fff;
     border: none;
     border-radius: 8px;
@@ -1183,10 +1704,12 @@ body {
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
-    transition: background var(--transition);
+    transition: background 0.3s;
 }
 
-.settings-save-btn:hover { background: var(--brand-orange-hover); }
+.settings-save-btn:hover {
+    background: var(--brand-hover);
+}
 
 .settings-hint {
     font-size: 12px;
@@ -1195,8 +1718,14 @@ body {
     line-height: 1.5;
 }
 
-.settings-hint a { color: var(--brand-orange); text-decoration: none; }
-.settings-hint a:hover { text-decoration: underline; }
+.settings-hint a {
+    color: var(--brand);
+    text-decoration: none;
+}
+
+.settings-hint a:hover {
+    text-decoration: underline;
+}
 
 .persona-option {
     display: flex;
@@ -1210,11 +1739,26 @@ body {
     transition: border-color 0.2s, background 0.2s;
 }
 
-.persona-option:hover { background: var(--bg-hover); }
-.persona-option.active { border-color: var(--brand-orange); background: rgba(235,90,40,0.06); }
+.persona-option:hover {
+    background: var(--bg-hover);
+}
+
+.persona-option.active {
+    border-color: var(--brand);
+    background: rgba(66, 133, 244, 0.06);
+}
+
+.persona-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
 
-.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; }
+.persona-desc {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
 
 
 /* ============================================================
@@ -1222,23 +1766,54 @@ body {
    ============================================================ */
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(8px); }
-    to   { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
 }
 
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: #555; }
+::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-thumb {
+    background: #ccc;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
+    background: #aaa;
+}
 
 .cursor::after {
     content: '\25CB';
     animation: blink 1s step-start infinite;
-    color: var(--brand-orange);
+    color: var(--brand);
     margin-left: 2px;
 }
 
-@keyframes blink { 50% { opacity: 0; } }
+@keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}
 
 
 /* ============================================================
@@ -1249,7 +1824,7 @@ body {
     color: #ff6b6b;
     font-style: italic;
     padding: 10px 14px;
-    background: rgba(255,75,75,0.08);
+    background: rgba(255, 75, 75, 0.08);
     border-radius: 8px;
     border-left: 3px solid #ff4a4a;
 }
@@ -1259,34 +1834,38 @@ body {
    RESPONSIVE — MOBILE
    ============================================================ */
 
-.mobile-fab-toggle { display: none !important; }
+.mobile-fab-toggle {
+    display: none !important;
+}
 
-/* Sidebar overlay — mobile only (hidden on desktop) */
 .sidebar-overlay {
     display: none;
     position: fixed;
     inset: 0;
-    background: rgba(0,0,0,0.55);
+    background: rgba(0, 0, 0, 0.45);
     z-index: 35;
     -webkit-tap-highlight-color: transparent;
 }
-.sidebar-overlay.visible { display: block; }
+
+.sidebar-overlay.visible {
+    display: block;
+}
 
 @media (max-width: 768px) {
-    /* App container */
     .app-container {
         overflow: hidden;
         position: relative;
     }
 
-    /* Sidebar — fixed overlay on mobile */
     .sidebar {
-        position: fixed; left: 0; top: 0;
+        position: fixed;
+        left: 0;
+        top: 0;
         width: var(--sidebar-width);
         height: 100vh;
         height: 100dvh;
         z-index: 40;
-        transition: transform var(--transition), opacity var(--transition);
+        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;
     }
 
@@ -1302,16 +1881,16 @@ body {
         pointer-events: auto;
     }
 
-    .sidebar-rail { display: none !important; }
+    .sidebar-rail {
+        display: none !important;
+    }
 
-    /* Main chat fills full screen */
     .main-chat {
         width: 100vw;
         min-width: 0;
         flex: 1;
     }
 
-    /* Sidebar logo bigger on mobile */
     .sidebar-logo {
         height: 36px;
     }
@@ -1320,7 +1899,6 @@ body {
         padding: 20px 18px 10px;
     }
 
-    /* Settings modal */
     .settings-modal {
         width: 96vw;
         height: 78vh;
@@ -1353,20 +1931,38 @@ body {
         border-radius: 10px;
         white-space: normal;
     }
+
     .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> :not(svg) {
+        display: none;
+    }
+
+    .settings-nav-btn svg {
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+    }
+
     .settings-nav-btn.active {
         background: var(--bg-elevated);
-        color: var(--brand-orange);
+        color: var(--brand);
+    }
+
+    .settings-panel {
+        padding: 14px 12px;
+        flex: 1;
+        min-width: 0;
     }
 
-    .settings-panel { padding: 14px 12px; flex: 1; min-width: 0; }
+    .hero-title {
+        font-size: 22px;
+    }
 
-    .hero-title { font-size: 22px; }
-    .hero-bot-icon { width: 80px; height: 80px; }
+    .hero-bot-icon {
+        width: 80px;
+        height: 80px;
+    }
 
-    /* Hero welcome — scrollable so pills don't go off-screen */
     .hero-welcome {
         justify-content: flex-start;
         padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
@@ -1374,14 +1970,24 @@ body {
         min-height: 0;
     }
 
-    .hero-pills { grid-template-columns: 1fr; }
-    .hero-pill { font-size: 12px; padding: 12px 14px; }
+    .hero-pills {
+        grid-template-columns: 1fr;
+    }
 
-    .hero-input-wrap { max-width: 100%; }
+    .hero-pill {
+        font-size: 12px;
+        padding: 12px 14px;
+    }
 
-    .login-title { font-size: 20px; white-space: normal; }
+    .hero-input-wrap {
+        max-width: 100%;
+    }
+
+    .login-title {
+        font-size: 20px;
+        white-space: normal;
+    }
 
-    /* Chat container */
     .chat-container {
         padding: 60px 10px 16px;
         gap: 16px;
@@ -1395,6 +2001,7 @@ body {
     .ai-avatar {
         display: none;
     }
+
     .ai .message-content {
         font-size: 13px;
         line-height: 1.55;
@@ -1406,10 +2013,6 @@ body {
         font-size: 13px;
     }
 
-    .thinking-indicator .thinking-logo {
-        display: none;
-    }
-
     .input-container {
         padding: 10px 10px calc(6px + env(safe-area-inset-bottom));
     }
@@ -1419,17 +2022,46 @@ body {
         margin-top: 6px;
     }
 
-    /* History items — always show options on mobile (no hover) */
     .history-item .options-btn {
         opacity: 0.6;
     }
+
+    .theme-toggle-btn {
+        top: 10px;
+        right: 10px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .theme-toggle-btn svg {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 @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;
+    }
+}