mobile pov-ixes;cdns;etc..

static/app.js

@@ -724,7 +724,9 @@ if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', () => {
    ============================================================ */
 
 let currentAbortController = null;
-let currentStreamReader    = null;   // ← key: we keep a ref to cancel it
+let currentStreamReader    = null;
+let currentStreamStopped   = false;   // module-level so stop button can kill it
+let currentRenderTimer     = null;    // so stop button can clear pending renders
 
 function _showStopBtn() {
     if (sendBtn) sendBtn.style.display = 'none';
@@ -737,23 +739,27 @@ function _showSendBtn() {
 
 if (stopBtn) {
     stopBtn.addEventListener('click', () => {
-        // 1) Cancel the stream reader so no more tokens arrive
+        // 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;
         }
-        // 2) Abort the fetch connection so server detects disconnect
+        // 4) Abort the fetch connection so server detects disconnect
         if (currentAbortController) {
             currentAbortController.abort();
             currentAbortController = null;
         }
-        // 3) Reset UI state
+        // 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'));
-        // 4) Remove the typing cursor from partial response
+        // 6) Remove the typing cursor from partial response
         document.querySelectorAll('.message-content.cursor').forEach(el => el.classList.remove('cursor'));
     });
 }
@@ -844,15 +850,15 @@ function streamResponse(text) {
     const contentEl = rowDiv.querySelector('.message-content');
     let rawText = '';
     let firstToken = true;
-    let stopped = false;
+    currentStreamStopped = false;   // reset for this new stream
 
-    let renderTimer = null;
+    currentRenderTimer = null;
     const RENDER_INTERVAL = 120;
     function scheduleRender() {
-        if (renderTimer || stopped) return;
-        renderTimer = setTimeout(() => {
-            renderTimer = null;
-            if (!stopped) { renderFinalContent(contentEl, rawText); scrollToBottom(); }
+        if (currentRenderTimer || currentStreamStopped) return;
+        currentRenderTimer = setTimeout(() => {
+            currentRenderTimer = null;
+            if (!currentStreamStopped) { renderFinalContent(contentEl, rawText); scrollToBottom(); }
         }, RENDER_INTERVAL);
     }
 
@@ -879,8 +885,8 @@ function streamResponse(text) {
 
         function read() {
             reader.read().then(({ done, value }) => {
-                if (done || stopped) {
-                    if (!stopped) finishStream(thinkingEl, contentEl, rawText, renderTimer);
+                if (done || currentStreamStopped) {
+                    if (!currentStreamStopped) finishStream(thinkingEl, contentEl, rawText, currentRenderTimer);
                     return;
                 }
 
@@ -888,24 +894,25 @@ function streamResponse(text) {
                 const lines = buffer.split('\n');
                 buffer = lines.pop();
 
-                lines.forEach(line => {
-                    if (stopped) return;
-                    if (!line.startsWith('data: ')) return;
+                for (const line of lines) {
+                    if (currentStreamStopped) return;  // bail immediately
+                    if (!line.startsWith('data: ')) continue;
                     const pl = line.substring(6);
                     if (pl === '[DONE]') {
-                        finishStream(thinkingEl, contentEl, rawText, renderTimer);
-                        stopped = true; return;
+                        finishStream(thinkingEl, contentEl, rawText, currentRenderTimer);
+                        currentStreamStopped = true; return;
                     }
                     try {
                         const data = JSON.parse(pl);
-                        if (data.status === 'thinking') { thinkingText.textContent = data.message; return; }
+                        if (data.status === 'thinking') { thinkingText.textContent = data.message; continue; }
                         if (data.error) {
                             thinkingEl.style.display = 'none';
                             contentEl.style.display = 'block';
                             contentEl.innerHTML = `<div class="error-message">${escapeHtml(data.error)}</div>`;
-                            isSending = false; _showSendBtn(); stopped = true; return;
+                            isSending = false; _showSendBtn(); currentStreamStopped = true; return;
                         }
                         if (data.token !== undefined) {
+                            if (currentStreamStopped) return;  // double-check before adding token
                             if (firstToken) {
                                 thinkingEl.style.display = 'none';
                                 contentEl.style.display = 'block';
@@ -916,13 +923,11 @@ function streamResponse(text) {
                             scheduleRender();
                         }
                     } catch (_) {}
-                });
+                }
 
-                if (!stopped) read();
+                if (!currentStreamStopped) read();
             }).catch(err => {
-                // reader.read() rejected — happens on abort/cancel
-                if (err.name === 'AbortError' || stopped) return;
-                // Genuine error
+                if (err.name === 'AbortError' || currentStreamStopped) return;
                 thinkingEl.style.display = 'none';
                 contentEl.style.display = 'block';
                 if (!rawText) contentEl.innerHTML = '<div class="error-message">Connection lost. Please try again.</div>';
@@ -931,7 +936,7 @@ function streamResponse(text) {
         }
         read();
     }).catch(err => {
-        if (err.name === 'AbortError') {
+        if (err.name === 'AbortError' || currentStreamStopped) {
             // User clicked stop before any response — that's fine
             thinkingEl.style.display = 'none';
             contentEl.style.display = 'block';
@@ -950,8 +955,9 @@ function streamResponse(text) {
     });
 }
 
-function finishStream(thinkingEl, contentEl, rawText, renderTimer) {
-    if (renderTimer) clearTimeout(renderTimer);
+function finishStream(thinkingEl, contentEl, rawText, timer) {
+    if (timer) clearTimeout(timer);
+    currentRenderTimer = null;
     thinkingEl.style.display = 'none';
     contentEl.style.display = 'block';
     contentEl.classList.remove('cursor');
@@ -1064,6 +1070,13 @@ if (installDismiss) installDismiss.addEventListener('click', () => {
 // Ensure sidebar starts collapsed in DOM (matches CSS default)
 if (sidebar) sidebar.classList.add('collapsed');
 
+// Lock screen to portrait on mobile
+try {
+    if (screen.orientation && screen.orientation.lock) {
+        screen.orientation.lock('portrait').catch(() => {});
+    }
+} catch(_) {}
+
 window.addEventListener('load', () => {
     checkExistingSession();
     _bindFeedbackSubmit();

static/index.html

@@ -2,18 +2,26 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, 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">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>STEM Copilot</title>
     <meta name="description" content="AI-powered NCERT tutor for Class XI and XII Physics, Chemistry, and Mathematics.">
     <meta name="theme-color" content="#0a0a0a">
     <link rel="icon" type="image/png" href="/assets/bot.png">
     <link rel="manifest" href="/manifest.json">
     <link rel="apple-touch-icon" href="/assets/stem_black.png">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Preconnect for faster font/CDN loading -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
     <link rel="stylesheet" href="/static/style.css">
-    <!-- Google Identity Services: loaded dynamically by initGoogleAuth() in app.js
-         to guarantee initialize() is called only after the script is ready. -->
+    <!-- Google Identity Services: loaded dynamically by initGoogleAuth() in app.js -->
 </head>
 <body>
 

static/manifest.json

@@ -7,7 +7,7 @@
   "display": "standalone",
   "background_color": "#000000",
   "theme_color": "#000000",
-  "orientation": "any",
+  "orientation": "portrait",
   "prefer_related_applications": false,
   "icons": [
     {

static/style.css

@@ -30,6 +30,13 @@
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    touch-action: manipulation;
+    overscroll-behavior: none;
+}
+
 body {
     font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background-color: var(--bg-main);
@@ -37,6 +44,9 @@ body {
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    overscroll-behavior: none;
 }