ui/ux; vidyut-personaa

graph.py

@@ -360,9 +360,24 @@ def chat_node(state: ChatState, config: RunnableConfig):
     sys = SystemMessage(content=base_prompt)
     print(f"[ROUTER] category={category} model={model_id} vision={actual == 'vision'}")
 
-    llm  = _make_llm(api_key, model_id)
-    resp = llm.invoke([sys] + messages)
-    return {"messages": [resp]}
+    # Retry loop for rate limits or transient errors
+    max_attempts = 3
+    for attempt in range(max_attempts):
+        try:
+            llm = _make_llm(api_key, model_id)
+            resp = llm.invoke([sys] + messages)
+            return {"messages": [resp]}
+        except Exception as e:
+            err_str = str(e)
+            print(f"[ROUTER] Model {model_id} failed on attempt {attempt+1}/{max_attempts}: {err_str[:100]}")
+            if attempt < max_attempts - 1:
+                # Pick a different model and try again
+                model_id, actual = _pick(category, has_image=has_image)
+                print(f"[ROUTER] Retrying with new model {model_id}")
+            else:
+                # Last attempt failed
+                from langchain_core.messages import AIMessage
+                return {"messages": [AIMessage(content="I'm experiencing high traffic right now. Could you please try again in a moment?")]}
 
 
 # ── Compile graph ─────────────────────────────────────────────

prompts.py

@@ -99,6 +99,31 @@ _PERSONAS = {
         "- Skip derivations unless explicitly asked. Give the result and how to USE it.\n"
         "- End with a confidence boost: 'Quick revision done. You've got this. 💪'"
     ),
+    "vidyut": (
+        "TEACHING STYLE — Vidyut Mode:\n"
+        "You are that one teacher students remember for the rest of their lives — "
+        "the one who made hard things feel obvious without ever making the student feel small.\n"
+        "- Teach one topic at a time. Do not move ahead until the student asks.\n"
+        "- Open with a single sharp real-world analogy or daily-life observation — "
+        "something a sharp 17-year-old would immediately connect with. "
+        "Not a long story. One precise moment that makes the concept feel inevitable.\n"
+        "- Then define the concept cleanly in 2 lines — no jargon, no filler.\n"
+        "- Explain how it works in numbered steps. Name every variable in any formula. "
+        "Solve one example completely from start to finish.\n"
+        "- Show 2-3 places the concept appears in real life or the NCERT syllabus.\n"
+        "- End with one line on what the examiner expects, and one mistake to avoid.\n"
+        "- Tone: calm, mature, direct. No cheerleading. No over-explaining. "
+        "Treat the student as an intelligent person who just hasn't seen this yet.\n"
+        "- If a student is confused, approach from a completely different angle. "
+        "A different analogy, a different example — never the same explanation repeated.\n"
+        "- If the student sends an image, identify it first — question, diagram, or their "
+        "own solution — then respond to exactly what is in front of you.\n"
+        "- Hinglish is welcome if the student uses it naturally. Never force it.\n"
+        "- No Mermaid diagrams. ASCII art only when it genuinely clarifies something.\n"
+        "- Keep the session respectful at all times. No inappropriate language, "
+        "no off-topic conversation, no content outside academics.\n"
+        "- One concept taught well is worth ten taught badly. Do not rush."
+    ),
 }
 
 

static/app.js

@@ -6,105 +6,105 @@
    ============================================================ */
 
 /* ----- State ----- */
-let currentUser     = null;
+let currentUser = null;
 let currentThreadId = crypto.randomUUID();
-const threads       = [];
-let isSending       = false;
-let pendingImage    = null;
+const threads = [];
+let isSending = false;
+let pendingImage = null;
 let pendingImageDataUrl = null;
-let isHeroMode      = true;
+let isHeroMode = true;
 
-let currentPersona  = localStorage.getItem('stemcopilot_persona')  || 'nerd';
+let currentPersona = localStorage.getItem('stemcopilot_persona') || 'vidyut';
 let currentLanguage = localStorage.getItem('stemcopilot_language') || 'auto';
-let currentUsername  = localStorage.getItem('stemcopilot_username') || '';
+let currentUsername = localStorage.getItem('stemcopilot_username') || '';
 
 
 /* ============================================================
    DOM REFERENCES
    ============================================================ */
 
-const loginScreen       = document.getElementById('loginScreen');
-const byokScreen        = document.getElementById('byokScreen');
-const appContainer      = document.getElementById('appContainer');
-const sidebar           = document.getElementById('sidebar');
-const sidebarOverlay    = document.getElementById('sidebarOverlay');
-const sidebarRail       = document.getElementById('sidebarRail');
-const toggleSidebarBtn  = document.getElementById('toggleSidebarBtn');
-const chatHistoryList   = document.getElementById('chatHistoryList');
-const chatContainer     = document.getElementById('chatContainer');
-const welcomeScreen     = document.getElementById('welcomeScreen');
+const loginScreen = document.getElementById('loginScreen');
+const byokScreen = document.getElementById('byokScreen');
+const appContainer = document.getElementById('appContainer');
+const sidebar = document.getElementById('sidebar');
+const sidebarOverlay = document.getElementById('sidebarOverlay');
+const sidebarRail = document.getElementById('sidebarRail');
+const toggleSidebarBtn = document.getElementById('toggleSidebarBtn');
+const chatHistoryList = document.getElementById('chatHistoryList');
+const chatContainer = document.getElementById('chatContainer');
+const welcomeScreen = document.getElementById('welcomeScreen');
 const bottomInputContainer = document.getElementById('bottomInputContainer');
 
-const userInput         = document.getElementById('userInput');
-const sendBtn           = document.getElementById('sendBtn');
-const newChatBtn        = document.getElementById('newChatBtn');
-const stopBtn           = document.getElementById('stopBtn');
-
-const 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');
-
-const userProfileBtn    = document.getElementById('userProfileBtn');
-const userMenu          = document.getElementById('userMenu');
-const userAvatar        = document.getElementById('userAvatar');
-const userDisplayName   = document.getElementById('userDisplayName');
-const logoutBtn         = document.getElementById('logoutBtn');
-
-const railExpandBtn     = document.getElementById('railExpandBtn');
-const railNewChatBtn    = document.getElementById('railNewChatBtn');
-const railProfileBtn    = document.getElementById('railProfileBtn');
-const railAvatar        = document.getElementById('railAvatar');
-
-const settingsOverlay   = document.getElementById('settingsOverlay');
-const openSettingsBtn   = document.getElementById('openSettingsBtn');
-const settingsCloseBtn  = document.getElementById('settingsCloseBtn');
-const settingsModal     = document.getElementById('settingsModal');
-const feedbackMenuBtn   = document.getElementById('feedbackMenuBtn');
-
-const usernameInput     = document.getElementById('usernameInput');
-const languageSelect    = document.getElementById('languageSelect');
-const profileInput      = document.getElementById('profileInput');
-const saveProfileBtn    = document.getElementById('saveProfileBtn');
+const userInput = document.getElementById('userInput');
+const sendBtn = document.getElementById('sendBtn');
+const newChatBtn = document.getElementById('newChatBtn');
+const stopBtn = document.getElementById('stopBtn');
+
+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');
+
+const userProfileBtn = document.getElementById('userProfileBtn');
+const userMenu = document.getElementById('userMenu');
+const userAvatar = document.getElementById('userAvatar');
+const userDisplayName = document.getElementById('userDisplayName');
+const logoutBtn = document.getElementById('logoutBtn');
+
+const railExpandBtn = document.getElementById('railExpandBtn');
+const railNewChatBtn = document.getElementById('railNewChatBtn');
+const railProfileBtn = document.getElementById('railProfileBtn');
+const railAvatar = document.getElementById('railAvatar');
+
+const settingsOverlay = document.getElementById('settingsOverlay');
+const openSettingsBtn = document.getElementById('openSettingsBtn');
+const settingsCloseBtn = document.getElementById('settingsCloseBtn');
+const settingsModal = document.getElementById('settingsModal');
+const feedbackMenuBtn = document.getElementById('feedbackMenuBtn');
+
+const usernameInput = document.getElementById('usernameInput');
+const languageSelect = document.getElementById('languageSelect');
+const profileInput = document.getElementById('profileInput');
+const saveProfileBtn = document.getElementById('saveProfileBtn');
 const settingsApiKeyInput = document.getElementById('settingsApiKeyInput');
-const saveApiKeyBtn     = document.getElementById('saveApiKeyBtn');
+const saveApiKeyBtn = document.getElementById('saveApiKeyBtn');
 
-const uploadBtn         = document.getElementById('uploadBtn');
-const imageInput        = document.getElementById('imageInput');
-const imagePreviewBar   = document.getElementById('imagePreviewBar');
+const uploadBtn = document.getElementById('uploadBtn');
+const imageInput = document.getElementById('imageInput');
+const imagePreviewBar = document.getElementById('imagePreviewBar');
 const imagePreviewThumb = document.getElementById('imagePreviewThumb');
-const imagePreviewRemove= document.getElementById('imagePreviewRemove');
+const imagePreviewRemove = document.getElementById('imagePreviewRemove');
 
-const installBanner     = document.getElementById('installBanner');
-const installBtn        = document.getElementById('installBtn');
-const installDismiss    = document.getElementById('installDismiss');
+const installBanner = document.getElementById('installBanner');
+const installBtn = document.getElementById('installBtn');
+const installDismiss = document.getElementById('installDismiss');
 
-const themeToggleBtn    = document.getElementById('themeToggleBtn');
+const themeToggleBtn = document.getElementById('themeToggleBtn');
 
 // Hero image preview
-const heroImagePreview       = document.getElementById('heroImagePreview');
-const heroImagePreviewThumb  = document.getElementById('heroImagePreviewThumb');
+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 styleSelectorBtn = document.getElementById('styleSelectorBtn');
 const styleSelectorLabel = document.getElementById('styleSelectorLabel');
-const styleDropdown      = document.getElementById('styleDropdown');
+const styleDropdown = document.getElementById('styleDropdown');
 
 // Mic buttons
-const micBtn      = document.getElementById('micBtn');
-const heroMicBtn  = document.getElementById('heroMicBtn');
+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' };
+const _PERSONA_LABELS = { vidyut: 'Vidyut', nerd: 'Nerd', noob: 'Beginner', thoughtful: 'Thoughtful', panic: 'Panic' };
 
 function _initTheme() {
     const saved = localStorage.getItem('stemcopilot_theme') || 'dark';
@@ -247,10 +247,12 @@ function triggerGoogleSignIn() {
     const tryClick = () => {
         const realBtn = document.querySelector('#gsi-hidden-btn [role="button"]');
         if (realBtn) { realBtn.click(); }
-        else { _renderHiddenGoogleBtn(() => {
-            const btn = document.querySelector('#gsi-hidden-btn [role="button"]');
-            if (btn) btn.click();
-        }); }
+        else {
+            _renderHiddenGoogleBtn(() => {
+                const btn = document.querySelector('#gsi-hidden-btn [role="button"]');
+                if (btn) btn.click();
+            });
+        }
     };
     if (_gsiInitialized) tryClick();
     else initGoogleAuth().then(tryClick);
@@ -262,19 +264,19 @@ function handleGoogleCredential(response) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ token: response.credential }),
     })
-    .then(r => {
-        if (!r.ok) throw new Error('Auth failed');
-        return r.json();
-    })
-    .then(data => {
-        if (data.error) { showToast('Login failed: ' + data.error, 'error'); return; }
-        currentUser = data.user;
-        localStorage.setItem('stemcopilot_user', JSON.stringify(currentUser));
-        currentUsername = currentUser.name;
-        localStorage.setItem('stemcopilot_username', currentUsername);
-        if (!data.has_api_key) showByok(); else showApp();
-    })
-    .catch(() => showToast('Login failed. Check your connection and try again.', 'error'));
+        .then(r => {
+            if (!r.ok) throw new Error('Auth failed');
+            return r.json();
+        })
+        .then(data => {
+            if (data.error) { showToast('Login failed: ' + data.error, 'error'); return; }
+            currentUser = data.user;
+            localStorage.setItem('stemcopilot_user', JSON.stringify(currentUser));
+            currentUsername = currentUser.name;
+            localStorage.setItem('stemcopilot_username', currentUsername);
+            if (!data.has_api_key) showByok(); else showApp();
+        })
+        .catch(() => showToast('Login failed. Check your connection and try again.', 'error'));
 }
 
 function checkExistingSession() {
@@ -319,9 +321,9 @@ if (byokSubmitBtn) byokSubmitBtn.addEventListener('click', () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ user_id: currentUser.google_id, key: key }),
     })
-    .then(r => { if (!r.ok) throw new Error(); return r.json(); })
-    .then(() => showApp())
-    .catch(() => showToast('Failed to save key. Try again.', 'error'));
+        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
+        .then(() => showApp())
+        .catch(() => showToast('Failed to save key. Try again.', 'error'));
 });
 
 
@@ -347,7 +349,7 @@ function showApp() {
                     if (data.user.student_profile && profileInput) profileInput.value = data.user.student_profile;
                     if (data.user.openrouter_key && settingsApiKeyInput) settingsApiKeyInput.value = '••••••••••••';
                 }
-            }).catch(() => {});
+            }).catch(() => { });
     }
 
     if (usernameInput) usernameInput.value = currentUsername;
@@ -367,7 +369,7 @@ function showApp() {
             data.threads.forEach(t => threads.push({ id: t.id, title: t.title }));
             renderHistory();
         })
-        .catch(() => {});
+        .catch(() => { });
 
     // Ensure sidebar starts collapsed on mobile
     if (window.innerWidth <= 768) closeSidebar();
@@ -420,13 +422,13 @@ let sidebarOpen = false;
 
 function _cleanSidebarStyles() {
     sidebar.style.transition = '';
-    sidebar.style.transform  = '';
-    sidebar.style.opacity    = '';
-    sidebar.style.display    = '';
+    sidebar.style.transform = '';
+    sidebar.style.opacity = '';
+    sidebar.style.display = '';
     if (sidebarOverlay) {
         sidebarOverlay.style.transition = '';
-        sidebarOverlay.style.opacity    = '';
-        sidebarOverlay.style.display    = '';
+        sidebarOverlay.style.opacity = '';
+        sidebarOverlay.style.display = '';
     }
 }
 
@@ -506,6 +508,8 @@ function createWelcomeScreen() {
         ? `What should we study today, <span class="hero-name">${escapeHtml(name)}</span>?`
         : `What should we study today?`;
 
+    const styleLabel = _PERSONA_LABELS[currentPersona] || 'Vidyut';
+
     div.innerHTML = `
         <img src="/assets/bot.png" alt="STEM Copilot" class="hero-bot-icon">
         <h1 class="hero-title" id="heroTitle">${titleHtml}</h1>
@@ -520,6 +524,34 @@ function createWelcomeScreen() {
                 </button>
                 <input type="file" id="heroImageInputDynamic" accept="image/*" style="display:none;">
                 <textarea id="heroInputDynamic" placeholder="Ask STEM Copilot..." rows="1"></textarea>
+                <div class="style-selector-wrap" id="heroStyleSelectorWrapDynamic">
+                    <button class="style-selector-btn" id="heroStyleSelectorBtnDynamic" title="Teaching style">
+                        <span id="heroStyleSelectorLabelDynamic">${styleLabel}</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="heroStyleDropdownDynamic">
+                        <div class="style-option ${currentPersona === 'vidyut' ? 'active' : ''}" data-persona="vidyut">
+                            <div class="style-option-name">Vidyut</div>
+                            <div class="style-option-desc">Calm, clear, step-by-step master teacher. Makes hard concepts obvious.</div>
+                        </div>
+                        <div class="style-option ${currentPersona === 'nerd' ? 'active' : ''}" data-persona="nerd">
+                            <div class="style-option-name">Nerd</div>
+                            <div class="style-option-desc">Deep, rigorous, first-principles. Goes beyond the textbook.</div>
+                        </div>
+                        <div class="style-option ${currentPersona === 'noob' ? 'active' : ''}" data-persona="noob">
+                            <div class="style-option-name">Beginner</div>
+                            <div class="style-option-desc">Patient, step-by-step. Explains like you're seeing it for the first time.</div>
+                        </div>
+                        <div class="style-option ${currentPersona === 'thoughtful' ? 'active' : ''}" data-persona="thoughtful">
+                            <div class="style-option-name">Thoughtful</div>
+                            <div class="style-option-desc">Connects science to the real world. Every formula has a story.</div>
+                        </div>
+                        <div class="style-option ${currentPersona === 'panic' ? 'active' : ''}" data-persona="panic">
+                            <div class="style-option-name">Panic</div>
+                            <div class="style-option-desc">Exam tomorrow? Concise bullets, key formulas, no fluff.</div>
+                        </div>
+                    </div>
+                </div>
                 <button class="mic-btn" id="heroMicBtnDynamic" title="Voice input">
                     <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
                 </button>
@@ -529,10 +561,10 @@ function createWelcomeScreen() {
             </div>
         </div>
         <div class="hero-pills">
-            <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="What is the photoelectric effect, and why did Einstein win the Nobel Prize for it?">What is the photoelectric effect and why did Einstein win the Nobel Prize for it?</button>
+            <button class="hero-pill" data-query="Derive the relation between Kp and Kc for a general gaseous equilibrium reaction">Derive the relation between Kp and Kc for gaseous equilibrium</button>
+            <button class="hero-pill" data-query="Solve: A ball is thrown vertically upward with velocity 20 m/s. Find maximum height and time of flight. Take g = 10 m/s^2">A ball thrown up at 20 m/s -- find max height and time of flight</button>
+            <button class="hero-pill" data-query="Explain the concept of limits in calculus with a real-world example. How is it different from the actual value of a function?">Explain limits in calculus with a real-world example</button>
         </div>
     `;
 
@@ -545,10 +577,15 @@ function createWelcomeScreen() {
     const dynImgThumb = div.querySelector('#heroImagePreviewThumbDynamic');
     const dynImgRemove = div.querySelector('#heroImagePreviewRemoveDynamic');
 
-    dynInput.addEventListener('input', function() {
+    // Style selector in dynamic hero
+    const dynStyleBtn = div.querySelector('#heroStyleSelectorBtnDynamic');
+    const dynStyleDropdown = div.querySelector('#heroStyleDropdownDynamic');
+    const dynStyleLabel = div.querySelector('#heroStyleSelectorLabelDynamic');
+
+    dynInput.addEventListener('input', function () {
         this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
     });
-    dynInput.addEventListener('keydown', function(e) {
+    dynInput.addEventListener('keydown', function (e) {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault(); userInput.value = dynInput.value; sendMessage();
         }
@@ -558,7 +595,6 @@ function createWelcomeScreen() {
     dynFileInput.addEventListener('change', () => {
         if (dynFileInput.files[0]) {
             handleImageFile(dynFileInput.files[0]);
-            // Show preview in hero
             _showHeroImagePreview(dynImgPreview, dynImgThumb);
         }
     });
@@ -567,6 +603,30 @@ function createWelcomeScreen() {
         dynImgPreview.classList.remove('visible');
     });
     if (dynMic) _bindMic(dynMic, dynInput);
+
+    // Style selector events
+    if (dynStyleBtn) {
+        dynStyleBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            dynStyleDropdown.classList.toggle('show');
+            dynStyleBtn.classList.toggle('open');
+        });
+    }
+    if (dynStyleDropdown) {
+        dynStyleDropdown.querySelectorAll('.style-option').forEach(opt => {
+            opt.addEventListener('click', (e) => {
+                e.stopPropagation();
+                _setPersona(opt.dataset.persona);
+                dynStyleDropdown.classList.remove('show');
+                dynStyleBtn.classList.remove('open');
+                dynStyleLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Vidyut';
+                dynStyleDropdown.querySelectorAll('.style-option').forEach(o => {
+                    o.classList.toggle('active', o.dataset.persona === currentPersona);
+                });
+            });
+        });
+    }
+
     div.querySelectorAll('.hero-pill').forEach(p => {
         p.addEventListener('click', () => { userInput.value = p.dataset.query; sendMessage(); });
     });
@@ -684,8 +744,10 @@ function renameChat(e, optionEl) {
         titleSpan.innerText = newTitle; input.replaceWith(titleSpan);
         const thread = threads.find(t => t.id === threadId);
         if (thread) thread.title = newTitle;
-        fetch('/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ thread_id: threadId, title: newTitle }) });
+        fetch('/rename', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ thread_id: threadId, title: newTitle })
+        });
     }
     input.addEventListener('blur', saveRename);
     input.addEventListener('keydown', evt => {
@@ -789,7 +851,7 @@ if (saveProfileBtn) saveProfileBtn.addEventListener('click', () => {
 
 function _syncStyleLabel() {
     if (styleSelectorLabel) {
-        styleSelectorLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Nerd';
+        styleSelectorLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Vidyut';
     }
 }
 
@@ -944,9 +1006,9 @@ if (heroImagePreviewRemove) heroImagePreviewRemove.addEventListener('click', ()
    ============================================================ */
 
 let currentAbortController = null;
-let currentStreamReader    = null;
-let currentStreamStopped   = false;
-let currentRenderTimer     = null;
+let currentStreamReader = null;
+let currentStreamStopped = false;
+let currentRenderTimer = null;
 
 function _showStopBtn() {
     if (sendBtn) sendBtn.style.display = 'none';
@@ -962,7 +1024,7 @@ if (stopBtn) {
         currentStreamStopped = true;
         if (currentRenderTimer) { clearTimeout(currentRenderTimer); currentRenderTimer = null; }
         if (currentStreamReader) {
-            try { currentStreamReader.cancel(); } catch(_) {}
+            try { currentStreamReader.cancel(); } catch (_) { }
             currentStreamReader = null;
         }
         if (currentAbortController) {
@@ -997,10 +1059,10 @@ if (heroSendBtn) heroSendBtn.addEventListener('click', () => {
     userInput.value = heroInput.value; sendMessage();
 });
 if (heroInput) {
-    heroInput.addEventListener('input', function() {
+    heroInput.addEventListener('input', function () {
         this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
     });
-    heroInput.addEventListener('keydown', function(e) {
+    heroInput.addEventListener('keydown', function (e) {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault(); userInput.value = heroInput.value; sendMessage();
         }
@@ -1139,7 +1201,7 @@ function streamResponse(text) {
                             rawText += data.token;
                             scheduleRender();
                         }
-                    } catch (_) {}
+                    } catch (_) { }
                 }
 
                 if (!currentStreamStopped) read();
@@ -1264,10 +1326,10 @@ function renderFinalContent(element, rawText) {
     if (!rawText) return;
     const blocks = [];
     let safeText = rawText;
-    safeText = safeText.replace(/\$\$[\s\S]*?\$\$/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
-    safeText = safeText.replace(/\$[^\$\n]+?\$/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
-    safeText = safeText.replace(/\\\[[\s\S]*?\\\]/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
-    safeText = safeText.replace(/\\\([\s\S]*?\\\)/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
+    safeText = safeText.replace(/\$\$[\s\S]*?\$\$/g, m => { blocks.push(m); return `%%LATEX_${blocks.length - 1}%%`; });
+    safeText = safeText.replace(/\$[^\$\n]+?\$/g, m => { blocks.push(m); return `%%LATEX_${blocks.length - 1}%%`; });
+    safeText = safeText.replace(/\\\[[\s\S]*?\\\]/g, m => { blocks.push(m); return `%%LATEX_${blocks.length - 1}%%`; });
+    safeText = safeText.replace(/\\\([\s\S]*?\\\)/g, m => { blocks.push(m); return `%%LATEX_${blocks.length - 1}%%`; });
     let html = typeof marked !== 'undefined' ? marked.parse(safeText) : safeText;
     blocks.forEach((block, i) => { html = html.replace(`%%LATEX_${i}%%`, block); });
     element.innerHTML = html;
@@ -1275,7 +1337,7 @@ function renderFinalContent(element, rawText) {
         renderMathInElement(element, {
             delimiters: [
                 { left: '$$', right: '$$', display: true },
-                { left: '$',  right: '$',  display: false },
+                { left: '$', right: '$', display: false },
                 { left: '\\(', right: '\\)', display: false },
                 { left: '\\[', right: '\\]', display: true },
             ],
@@ -1290,7 +1352,7 @@ function renderFinalContent(element, rawText) {
    ============================================================ */
 
 if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/sw.js').catch(() => {});
+    navigator.serviceWorker.register('/sw.js').catch(() => { });
 }
 
 let deferredPrompt = null;
@@ -1330,9 +1392,9 @@ if (sidebar) sidebar.classList.add('collapsed');
 // Lock screen to portrait on mobile
 try {
     if (screen.orientation && screen.orientation.lock) {
-        screen.orientation.lock('portrait').catch(() => {});
+        screen.orientation.lock('portrait').catch(() => { });
     }
-} catch(_) {}
+} catch (_) { }
 
 window.addEventListener('load', () => {
     checkExistingSession();

static/index.html

@@ -215,31 +215,45 @@
                             </button>
                             <input type="file" id="heroImageInput" accept="image/*" style="display:none;">
                             <textarea id="heroInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
+                            <!-- Teaching style selector in hero -->
+                            <div class="style-selector-wrap" id="heroStyleSelectorWrap">
+                                <button class="style-selector-btn" id="heroStyleSelectorBtn" title="Teaching style">
+                                    <span id="heroStyleSelectorLabel">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="heroStyleDropdown">
+                                    <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>
                             <!-- 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>
+                                <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="What is the photoelectric effect, and why did Einstein win the Nobel Prize for it?">What is the photoelectric effect and why did Einstein win the Nobel Prize for it?</button>
+                        <button class="hero-pill" data-query="Derive the relation between Kp and Kc for a general gaseous equilibrium reaction">Derive the relation between Kp and Kc for gaseous equilibrium</button>
+                        <button class="hero-pill" data-query="Solve: A ball is thrown vertically upward with velocity 20 m/s. Find maximum height and time of flight. Take g = 10 m/s^2">A ball thrown up at 20 m/s -- find max height and time of flight</button>
+                        <button class="hero-pill" data-query="Explain the concept of limits in calculus with a real-world example. How is it different from the actual value of a function?">Explain limits in calculus with a real-world example</button>
                     </div>
                 </div>
             </div>
@@ -261,38 +275,36 @@
                         </svg>
                     </button>
                     <input type="file" id="imageInput" accept="image/*" style="display:none;">
-                    <!-- Teaching style selector -->
+                    <textarea id="userInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
+                    <!-- Teaching style selector (RIGHT side, before mic) -->
                     <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>
+                            <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 active" data-persona="vidyut">
+                                <div class="style-option-name">Vidyut</div>
+                                <div class="style-option-desc">Calm, clear, step-by-step master teacher. Makes hard concepts obvious.</div>
+                            </div>
+                            <div class="style-option" data-persona="nerd">
                                 <div class="style-option-name">Nerd</div>
-                                <div class="style-option-desc">Deep, rigorous, first-principles. Goes beyond the
-                                    textbook.</div>
+                                <div 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 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 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 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">
@@ -355,14 +367,6 @@
                         </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>
-                        <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">
@@ -413,29 +417,7 @@
                         <button class="settings-save-btn" id="saveProfileBtn">Save Profile</button>
                     </div>
 
-                    <!-- Teaching Style Tab -->
-                    <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">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>
-                            <div class="persona-desc">Deep, rigorous, first-principles. Goes beyond the textbook.</div>
-                        </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>
-                        <div class="persona-option" data-persona="panic">
-                            <div class="persona-name">Panic</div>
-                            <div class="persona-desc">Exam tomorrow? Concise bullets, key formulas, no fluff.</div>
-                        </div>
-                    </div>
-
+                    <!-- Teaching Style Tab (REMOVED - now in input bar) -->
                     <!-- Feedback Tab -->
                     <div class="tab-content" id="tab-feedback">
                         <h3 class="settings-section-title">Category</h3>

static/style.css

@@ -4,9 +4,9 @@
    ============================================================ */
 
 :root {
-    --brand: #2231D4;
-    --brand-hover: #3367D6;
-    --brand-glow: rgba(66, 133, 244, 0.25);
+    --brand: #EB5A28;
+    --brand-hover: #cf4f22;
+    --brand-glow: rgba(235, 90, 40, 0.25);
     --bg-main: #000000;
     --bg-sidebar: #0a0a0a;
     --bg-input: #1a1a1a;
@@ -23,13 +23,16 @@
     --radius: 12px;
     --radius-lg: 16px;
     --radius-xl: 24px;
-    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     --sidebar-width: 280px;
     --rail-width: 56px;
 }
 
 /* ── LIGHT MODE ── */
 [data-theme="light"] {
+    --brand: #4285F4;
+    --brand-hover: #3367D6;
+    --brand-glow: rgba(66, 133, 244, 0.25);
     --bg-main: #f8f9fa;
     --bg-sidebar: #ffffff;
     --bg-input: #ffffff;
@@ -68,22 +71,21 @@ 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 theme transitions — uniform 0.35s for all components */
+    transition: background-color 0.35s ease, color 0.35s ease;
 }
 
-/* Smooth transitions for all themed elements */
+/* Smooth transitions for all themed elements — UNIFORM timing */
 *,
 *::before,
 *::after {
-    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
+    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease;
 }
 
-/* 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;
+    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
 }
 
 
@@ -442,8 +444,8 @@ select {
 .new-chat-btn {
     margin: 8px 14px;
     padding: 12px 16px;
-    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);
+    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);
     color: var(--text-primary);
     border-radius: var(--radius);
     cursor: pointer;
@@ -457,9 +459,9 @@ select {
 }
 
 .new-chat-btn:hover {
-    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);
+    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);
 }
 
 .new-chat-btn svg {
@@ -498,9 +500,9 @@ select {
 }
 
 .history-item.active {
-    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(66, 133, 244, 0.03));
+    background: linear-gradient(135deg, rgba(235, 90, 40, 0.1), rgba(235, 90, 40, 0.03));
     color: var(--text-primary);
-    border: 1px solid rgba(66, 133, 244, 0.15);
+    border: 1px solid rgba(235, 90, 40, 0.15);
 }
 
 .history-item:not(.active) {
@@ -605,7 +607,7 @@ select {
     padding: 12px 14px 16px;
     border-top: 1px solid var(--border-color);
     position: relative;
-    background: linear-gradient(180deg, transparent, rgba(66, 133, 244, 0.02));
+    background: linear-gradient(180deg, transparent, rgba(235, 90, 40, 0.02));
 }
 
 .user-profile-btn {
@@ -654,34 +656,54 @@ select {
     bottom: 72px;
     left: 14px;
     right: 14px;
-    background: var(--bg-elevated);
+    background: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     z-index: 50;
+    backdrop-filter: blur(12px);
 }
 
 .user-menu.show {
     display: block;
+    animation: fadeIn 0.15s ease-out;
 }
 
 .user-menu-item {
-    padding: 12px 16px;
+    padding: 12px 18px;
     font-size: 13px;
+    font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 10px;
-    transition: background 0.2s;
+    gap: 12px;
+    transition: background 0.2s, color 0.2s;
+    color: var(--text-primary);
 }
 
 .user-menu-item:hover {
     background: var(--bg-hover);
+    color: var(--brand);
+}
+
+.user-menu-item svg {
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.user-menu-item:hover svg {
+    opacity: 1;
 }
 
 .user-menu-logout {
     color: #ff4a4a;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.user-menu-logout:hover {
+    color: #ff4a4a;
+    background: rgba(255, 74, 74, 0.06);
 }
 
 
@@ -820,7 +842,7 @@ select {
     width: 120px;
     height: 120px;
     object-fit: contain;
-    filter: drop-shadow(0 8px 24px rgba(66, 133, 244, 0.15));
+    filter: drop-shadow(0 8px 24px rgba(235, 90, 40, 0.15));
     /* NO animation — fixed, no jumping */
 }
 
@@ -1276,11 +1298,12 @@ select {
     color: var(--text-primary);
 }
 
-/* Teaching style selector in input bar */
+/* Teaching style selector in input bar — right side before mic */
 .style-selector-wrap {
     position: relative;
     display: flex;
     align-items: center;
+    order: 10; /* push to right */
 }
 
 .style-selector-btn {
@@ -1324,7 +1347,7 @@ select {
     display: none;
     position: absolute;
     bottom: 44px;
-    left: 0;
+    right: 0;
     background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
@@ -1355,6 +1378,10 @@ select {
 }
 
 .style-option.active {
+    background: rgba(235, 90, 40, 0.08);
+}
+
+[data-theme="light"] .style-option.active {
     background: rgba(66, 133, 244, 0.08);
 }
 
@@ -1745,6 +1772,10 @@ select {
 
 .persona-option.active {
     border-color: var(--brand);
+    background: rgba(235, 90, 40, 0.06);
+}
+
+[data-theme="light"] .persona-option.active {
     background: rgba(66, 133, 244, 0.06);
 }
 
@@ -1964,8 +1995,8 @@ select {
     }
 
     .hero-welcome {
-        justify-content: flex-start;
-        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
+        justify-content: center;
+        padding: 40px 16px calc(20px + env(safe-area-inset-bottom));
         overflow-y: auto;
         min-height: 0;
     }