unk..

.gitattributes

@@ -35,3 +35,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 stem_black.png filter=lfs diff=lfs merge=lfs -text
 assets/stem_black.png filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

app.py

@@ -155,6 +155,19 @@ def save_profile(req: ProfileRequest):
 
 # --- Core routes ---
 
+APP_DIR = os.path.dirname(os.path.abspath(__file__))
+
+@app.get("/sw.js")
+def serve_sw():
+    """Service worker must be served from root for PWA scope."""
+    return FileResponse(os.path.join(APP_DIR, "sw.js"), media_type="application/javascript")
+
+
+@app.get("/manifest.json")
+def serve_manifest():
+    return FileResponse(os.path.join(STATIC_DIR, "manifest.json"), media_type="application/manifest+json")
+
+
 @app.get("/")
 def serve_index():
     return FileResponse(os.path.join(STATIC_DIR, "index.html"))

static/app.js

@@ -1,64 +1,86 @@
 /* ============================================================
-   Stem Copilot — Application Logic
-   Auth, BYOK, Chat, Settings, Image Upload, Streaming
+   STEM Copilot — Application Logic
+   Auth, BYOK, Chat, Settings, Streaming MD, PWA, Sidebar Rail
    ============================================================ */
 
 /* ----- State ----- */
-let currentUser     = null;   // { google_id, email, name, picture }
+let currentUser     = null;
 let currentThreadId = crypto.randomUUID();
 const threads       = [];
 let isSending       = false;
-let pendingImage    = null;   // base64 string
+let pendingImage    = null;
+let isHeroMode      = true;   // hero visible = true
 
-let currentPersona  = localStorage.getItem('anstem_persona')  || 'nerd';
-let currentLanguage = localStorage.getItem('anstem_language') || 'auto';
-let currentUsername  = localStorage.getItem('anstem_username') || '';
+let currentPersona  = localStorage.getItem('stemcopilot_persona')  || 'nerd';
+let currentLanguage = localStorage.getItem('stemcopilot_language') || 'auto';
+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 toggleSidebarBtn= document.getElementById('toggleSidebarBtn');
-const chatHistoryList = document.getElementById('chatHistoryList');
-const chatContainer   = document.getElementById('chatContainer');
-const welcomeScreen   = document.getElementById('welcomeScreen');
-const userInput       = document.getElementById('userInput');
-const sendBtn         = document.getElementById('sendBtn');
-const newChatBtn      = document.getElementById('newChatBtn');
+const loginScreen       = document.getElementById('loginScreen');
+const byokScreen        = document.getElementById('byokScreen');
+const appContainer      = document.getElementById('appContainer');
+const sidebar           = document.getElementById('sidebar');
+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');
+
+// Bottom input bar
+const userInput         = document.getElementById('userInput');
+const sendBtn           = document.getElementById('sendBtn');
+const newChatBtn        = document.getElementById('newChatBtn');
+
+// Hero input bar
+const heroInput         = document.getElementById('heroInput');
+const heroSendBtn       = document.getElementById('heroSendBtn');
+const heroUploadBtn     = document.getElementById('heroUploadBtn');
+const heroImageInput    = document.getElementById('heroImageInput');
 
 // Auth
-const byokInput       = document.getElementById('byokInput');
-const byokSubmitBtn   = document.getElementById('byokSubmitBtn');
+const byokInput         = document.getElementById('byokInput');
+const byokSubmitBtn     = document.getElementById('byokSubmitBtn');
 
 // User menu
-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 userProfileBtn    = document.getElementById('userProfileBtn');
+const userMenu          = document.getElementById('userMenu');
+const userAvatar        = document.getElementById('userAvatar');
+const userDisplayName   = document.getElementById('userDisplayName');
+const logoutBtn         = document.getElementById('logoutBtn');
+
+// Rail
+const railExpandBtn     = document.getElementById('railExpandBtn');
+const railNewChatBtn    = document.getElementById('railNewChatBtn');
+const railProfileBtn    = document.getElementById('railProfileBtn');
+const railAvatar        = document.getElementById('railAvatar');
 
 // Settings
-const settingsOverlay = document.getElementById('settingsOverlay');
-const openSettingsBtn = document.getElementById('openSettingsBtn');
-const settingsCloseBtn= document.getElementById('settingsCloseBtn');
-const usernameInput   = document.getElementById('usernameInput');
-const languageSelect  = document.getElementById('languageSelect');
-const profileInput    = document.getElementById('profileInput');
-const saveProfileBtn  = document.getElementById('saveProfileBtn');
+const settingsOverlay   = document.getElementById('settingsOverlay');
+const openSettingsBtn   = document.getElementById('openSettingsBtn');
+const settingsCloseBtn  = document.getElementById('settingsCloseBtn');
+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');
 
-// Image upload
-const uploadBtn       = document.getElementById('uploadBtn');
-const imageInput      = document.getElementById('imageInput');
-const imagePreviewBar = document.getElementById('imagePreviewBar');
+// Image upload (bottom bar)
+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');
+
+// PWA
+const installBanner     = document.getElementById('installBanner');
+const installBtn        = document.getElementById('installBtn');
+const installDismiss    = document.getElementById('installDismiss');
 
 
 /* ============================================================
@@ -70,7 +92,6 @@ function initGoogleAuth() {
         .then(r => r.json())
         .then(data => {
             if (!data.client_id) {
-                // No Google Client ID configured — skip login for dev
                 showApp();
                 return;
             }
@@ -80,13 +101,10 @@ function initGoogleAuth() {
             });
             google.accounts.id.renderButton(
                 document.getElementById('googleSignInBtn'),
-                { theme: 'filled_black', size: 'large', width: 280, text: 'signin_with' }
+                { theme: 'filled_black', size: 'large', width: 280, text: 'signin_with', shape: 'pill' }
             );
         })
-        .catch(() => {
-            // Fallback: skip login
-            showApp();
-        });
+        .catch(() => showApp());
 }
 
 function handleGoogleCredential(response) {
@@ -97,47 +115,32 @@ function handleGoogleCredential(response) {
     })
     .then(r => r.json())
     .then(data => {
-        if (data.error) {
-            alert('Login failed: ' + data.error);
-            return;
-        }
+        if (data.error) { alert('Login failed: ' + data.error); return; }
         currentUser = data.user;
-        localStorage.setItem('anstem_user', JSON.stringify(currentUser));
+        localStorage.setItem('stemcopilot_user', JSON.stringify(currentUser));
         currentUsername = currentUser.name;
-        localStorage.setItem('anstem_username', currentUsername);
-
-        if (!data.has_api_key) {
-            showByok();
-        } else {
-            showApp();
-        }
+        localStorage.setItem('stemcopilot_username', currentUsername);
+        if (!data.has_api_key) { showByok(); } else { showApp(); }
     })
     .catch(() => alert('Login failed. Please try again.'));
 }
 
-// Check if user was already logged in
 function checkExistingSession() {
-    const saved = localStorage.getItem('anstem_user');
+    const saved = localStorage.getItem('stemcopilot_user');
     if (saved) {
         currentUser = JSON.parse(saved);
         currentUsername = currentUser.name;
-        // Verify user still exists on backend
         fetch('/auth/me?user_id=' + encodeURIComponent(currentUser.google_id))
             .then(r => r.json())
             .then(data => {
                 if (data.error) {
-                    // Session invalid, show login
-                    localStorage.removeItem('anstem_user');
+                    localStorage.removeItem('stemcopilot_user');
                     currentUser = null;
                     initGoogleAuth();
                     return;
                 }
                 currentUser = data.user;
-                if (!data.has_api_key) {
-                    showByok();
-                } else {
-                    showApp();
-                }
+                if (!data.has_api_key) { showByok(); } else { showApp(); }
             })
             .catch(() => initGoogleAuth());
     } else {
@@ -147,7 +150,7 @@ function checkExistingSession() {
 
 
 /* ============================================================
-   BYOK — Bring Your Own Key
+   BYOK
    ============================================================ */
 
 function showByok() {
@@ -159,7 +162,6 @@ function showByok() {
 byokSubmitBtn.addEventListener('click', () => {
     const key = byokInput.value.trim();
     if (!key) { byokInput.focus(); return; }
-
     fetch('/user/apikey', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -180,13 +182,12 @@ function showApp() {
     byokScreen.style.display = 'none';
     appContainer.style.display = 'flex';
 
-    // Populate user info in sidebar
     if (currentUser) {
         userDisplayName.textContent = currentUser.name || 'Student';
         if (currentUser.picture) {
             userAvatar.src = currentUser.picture;
+            railAvatar.src = currentUser.picture;
         }
-        // Load user-specific profile data
         fetch('/auth/me?user_id=' + encodeURIComponent(currentUser.google_id))
             .then(r => r.json())
             .then(data => {
@@ -197,7 +198,6 @@ function showApp() {
             }).catch(() => {});
     }
 
-    // Load settings from localStorage
     usernameInput.value = currentUsername;
     languageSelect.value = currentLanguage;
 
@@ -215,6 +215,33 @@ function showApp() {
             renderHistory();
         })
         .catch(() => {});
+
+    // Show hero mode
+    enterHeroMode();
+}
+
+
+/* ============================================================
+   HERO / BOTTOM INPUT MODE SWITCHING
+   ============================================================ */
+
+function enterHeroMode() {
+    isHeroMode = true;
+    if (welcomeScreen) welcomeScreen.style.display = '';
+    bottomInputContainer.style.display = 'none';
+    // Rebuild hero welcome if needed
+    const existing = document.getElementById('welcomeScreen');
+    if (!existing) {
+        chatContainer.innerHTML = '';
+        chatContainer.appendChild(createWelcomeScreen());
+    }
+}
+
+function exitHeroMode() {
+    isHeroMode = false;
+    const ws = document.getElementById('welcomeScreen');
+    if (ws) ws.remove();
+    bottomInputContainer.style.display = '';
 }
 
 
@@ -222,34 +249,110 @@ function showApp() {
    SIDEBAR
    ============================================================ */
 
-toggleSidebarBtn.addEventListener('click', () => sidebar.classList.toggle('collapsed'));
+let sidebarCollapsed = false;
+
+function collapseSidebar() {
+    sidebarCollapsed = true;
+    sidebar.classList.add('collapsed');
+    sidebarRail.classList.add('visible');
+}
 
-newChatBtn.addEventListener('click', () => {
+function expandSidebar() {
+    sidebarCollapsed = false;
+    sidebar.classList.remove('collapsed');
+    sidebarRail.classList.remove('visible');
+}
+
+toggleSidebarBtn.addEventListener('click', () => {
+    if (sidebarCollapsed) expandSidebar();
+    else collapseSidebar();
+});
+
+railExpandBtn.addEventListener('click', expandSidebar);
+
+railNewChatBtn.addEventListener('click', () => {
+    startNewChat();
+});
+
+railProfileBtn.addEventListener('click', () => {
+    expandSidebar();
+    setTimeout(() => userProfileBtn.click(), 150);
+});
+
+newChatBtn.addEventListener('click', startNewChat);
+
+function startNewChat() {
     currentThreadId = crypto.randomUUID();
     chatContainer.innerHTML = '';
     chatContainer.appendChild(createWelcomeScreen());
+    enterHeroMode();
     renderHistory();
-});
+}
 
 function createWelcomeScreen() {
     const div = document.createElement('div');
-    div.className = 'welcome-screen';
+    div.className = 'hero-welcome';
     div.id = 'welcomeScreen';
     div.innerHTML = `
-        <h1 class="welcome-title">What should we study today?</h1>
-        <div class="welcome-pills">
-            <button class="pill" data-query="Explain Coulomb's law with derivation">Coulomb's Law</button>
-            <button class="pill" data-query="What is sp3 hybridisation? Explain with examples">sp3 Hybridisation</button>
-            <button class="pill" data-query="Derive the quadratic formula step by step">Quadratic Formula</button>
-            <button class="pill" data-query="Explain Newton's laws of motion with real world examples">Newton's Laws</button>
+        <img src="/assets/bot.png" alt="STEM Copilot" class="hero-bot-icon">
+        <h1 class="hero-title">What should we study today?</h1>
+        <div class="hero-input-wrap">
+            <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 anything about Physics, Chemistry or Maths..." rows="1"></textarea>
+                <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>
+            </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>
         </div>
     `;
-    div.querySelectorAll('.pill').forEach(p => {
+
+    // Attach events to dynamic elements
+    const dynInput = div.querySelector('#heroInputDynamic');
+    const dynSend = div.querySelector('#heroSendBtnDynamic');
+    const dynUpload = div.querySelector('#heroUploadBtnDynamic');
+    const dynFileInput = div.querySelector('#heroImageInputDynamic');
+
+    dynInput.addEventListener('input', function() {
+        this.style.height = '54px';
+        this.style.height = this.scrollHeight + 'px';
+    });
+
+    dynInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            userInput.value = dynInput.value;
+            sendMessage();
+        }
+    });
+
+    dynSend.addEventListener('click', () => {
+        userInput.value = dynInput.value;
+        sendMessage();
+    });
+
+    dynUpload.addEventListener('click', () => dynFileInput.click());
+    dynFileInput.addEventListener('change', () => {
+        const file = dynFileInput.files[0];
+        if (file) handleImageFile(file);
+    });
+
+    div.querySelectorAll('.hero-pill').forEach(p => {
         p.addEventListener('click', () => {
             userInput.value = p.dataset.query;
             sendMessage();
         });
     });
+
     return div;
 }
 
@@ -290,13 +393,23 @@ function loadThread(threadId) {
     currentThreadId = threadId;
     renderHistory();
     chatContainer.innerHTML = '';
+    exitHeroMode();
+
     fetch('/history/' + threadId)
         .then(res => res.json())
         .then(data => {
             data.messages.forEach(msg => {
                 const sender = msg.role === 'user' ? 'user' : 'ai';
-                const el = appendMessage(sender, msg.content);
-                if (sender === 'ai') renderFinalContent(el, msg.content);
+                // Handle multimodal messages (array content with text + image_url)
+                let textContent = msg.content;
+                if (Array.isArray(msg.content)) {
+                    textContent = msg.content
+                        .filter(part => part.type === 'text')
+                        .map(part => part.text)
+                        .join('');
+                }
+                const el = appendMessage(sender, textContent);
+                if (sender === 'ai') renderFinalContent(el, textContent);
             });
         });
 }
@@ -390,16 +503,16 @@ settingsOverlay.addEventListener('click', (e) => {
 });
 
 logoutBtn.addEventListener('click', () => {
-    localStorage.removeItem('anstem_user');
-    localStorage.removeItem('anstem_username');
+    localStorage.removeItem('stemcopilot_user');
+    localStorage.removeItem('stemcopilot_username');
     currentUser = null;
     location.reload();
 });
 
-// Settings tabs
-document.querySelectorAll('.tab-btn').forEach(btn => {
+// Settings tabs (vertical nav)
+document.querySelectorAll('.settings-nav-btn').forEach(btn => {
     btn.addEventListener('click', () => {
-        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        document.querySelectorAll('.settings-nav-btn').forEach(b => b.classList.remove('active'));
         document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
         btn.classList.add('active');
         document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
@@ -409,13 +522,13 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
 // Username
 usernameInput.addEventListener('input', () => {
     currentUsername = usernameInput.value.trim();
-    localStorage.setItem('anstem_username', currentUsername);
+    localStorage.setItem('stemcopilot_username', currentUsername);
 });
 
 // Language
 languageSelect.addEventListener('change', () => {
     currentLanguage = languageSelect.value;
-    localStorage.setItem('anstem_language', currentLanguage);
+    localStorage.setItem('stemcopilot_language', currentLanguage);
 });
 
 // Persona selection
@@ -424,11 +537,11 @@ document.querySelectorAll('.persona-option').forEach(opt => {
         document.querySelectorAll('.persona-option').forEach(o => o.classList.remove('active'));
         opt.classList.add('active');
         currentPersona = opt.dataset.persona;
-        localStorage.setItem('anstem_persona', currentPersona);
+        localStorage.setItem('stemcopilot_persona', currentPersona);
     });
 });
 
-// Save API key from settings
+// Save API key
 saveApiKeyBtn.addEventListener('click', () => {
     const key = settingsApiKeyInput.value.trim();
     if (!key || key.startsWith('••')) return;
@@ -437,9 +550,7 @@ saveApiKeyBtn.addEventListener('click', () => {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ user_id: currentUser.google_id, key: key }),
-    }).then(() => {
-        settingsApiKeyInput.value = '••••••••••••';
-    });
+    }).then(() => { settingsApiKeyInput.value = '••••••••••••'; });
 });
 
 // Save student profile
@@ -454,7 +565,7 @@ saveProfileBtn.addEventListener('click', () => {
 
 
 /* ============================================================
-   IMAGE UPLOAD (button + Ctrl+V paste)
+   IMAGE UPLOAD
    ============================================================ */
 
 uploadBtn.addEventListener('click', () => imageInput.click());
@@ -464,6 +575,13 @@ imageInput.addEventListener('change', () => {
     if (file) handleImageFile(file);
 });
 
+// Hero upload buttons (static — for initial page load)
+if (heroUploadBtn) heroUploadBtn.addEventListener('click', () => heroImageInput.click());
+if (heroImageInput) heroImageInput.addEventListener('change', () => {
+    const file = heroImageInput.files[0];
+    if (file) handleImageFile(file);
+});
+
 // Ctrl+V / Cmd+V paste
 document.addEventListener('paste', (e) => {
     const items = e.clipboardData?.items;
@@ -481,7 +599,7 @@ function handleImageFile(file) {
     const reader = new FileReader();
     reader.onload = (e) => {
         const dataUrl = e.target.result;
-        pendingImage = dataUrl.split(',')[1]; // base64 part
+        pendingImage = dataUrl.split(',')[1];
         imagePreviewThumb.style.backgroundImage = `url(${dataUrl})`;
         imagePreviewBar.style.display = 'flex';
     };
@@ -496,7 +614,7 @@ imagePreviewRemove.addEventListener('click', () => {
 
 
 /* ============================================================
-   CHAT & STREAMING
+   CHAT & STREAMING WITH LIVE MARKDOWN RENDERING
    ============================================================ */
 
 userInput.addEventListener('input', function () {
@@ -513,25 +631,44 @@ userInput.addEventListener('keydown', function (e) {
 
 sendBtn.addEventListener('click', sendMessage);
 
-// Welcome pills
-document.querySelectorAll('.pill').forEach(p => {
+// Hero pills (static — for initial page load)
+document.querySelectorAll('.hero-pill').forEach(p => {
     p.addEventListener('click', () => {
         userInput.value = p.dataset.query;
         sendMessage();
     });
 });
 
+// Hero send (static)
+if (heroSendBtn) heroSendBtn.addEventListener('click', () => {
+    userInput.value = heroInput.value;
+    sendMessage();
+});
+
+if (heroInput) {
+    heroInput.addEventListener('input', function() {
+        this.style.height = '54px';
+        this.style.height = this.scrollHeight + 'px';
+    });
+    heroInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            userInput.value = heroInput.value;
+            sendMessage();
+        }
+    });
+}
+
 function sendMessage() {
     const text = userInput.value.trim();
     if (!text || isSending) return;
 
-    // Remove welcome screen
-    const ws = document.getElementById('welcomeScreen');
-    if (ws) ws.remove();
+    // Exit hero mode
+    if (isHeroMode) exitHeroMode();
 
     isSending = true;
 
-    // Show user message (with image if attached)
+    // Show user message
     if (pendingImage) {
         const rowDiv = document.createElement('div');
         rowDiv.classList.add('message-row', 'user');
@@ -563,7 +700,6 @@ function sendMessage() {
 
 function streamResponse(text) {
     const imageData = pendingImage || '';
-    // Clear pending image
     pendingImage = null;
     imagePreviewBar.style.display = 'none';
     imageInput.value = '';
@@ -575,7 +711,7 @@ function streamResponse(text) {
         <div class="ai-avatar"></div>
         <div style="flex:1; min-width:0;">
             <div class="thinking-indicator" id="currentThinking">
-                <img src="/assets/stem_black.png" class="thinking-logo" />
+                <img src="/assets/bot.png" class="thinking-logo" />
                 <span class="thinking-text">Reading your question...</span>
             </div>
             <div class="message-content" style="display:none;"></div>
@@ -590,6 +726,19 @@ function streamResponse(text) {
     let rawText = '';
     let firstToken = true;
 
+    // Throttled live markdown rendering
+    let renderTimer = null;
+    const RENDER_INTERVAL = 120; // ms
+
+    function scheduleRender() {
+        if (renderTimer) return;
+        renderTimer = setTimeout(() => {
+            renderTimer = null;
+            renderFinalContent(contentEl, rawText);
+            scrollToBottom();
+        }, RENDER_INTERVAL);
+    }
+
     const payload = {
         message: text,
         thread_id: currentThreadId,
@@ -612,7 +761,7 @@ function streamResponse(text) {
         function read() {
             reader.read().then(({ done, value }) => {
                 if (done) {
-                    finishStream(thinkingEl, contentEl, rawText);
+                    finishStream(thinkingEl, contentEl, rawText, renderTimer);
                     return;
                 }
 
@@ -625,20 +774,18 @@ function streamResponse(text) {
                     const payload = line.substring(6);
 
                     if (payload === '[DONE]') {
-                        finishStream(thinkingEl, contentEl, rawText);
+                        finishStream(thinkingEl, contentEl, rawText, renderTimer);
                         return;
                     }
 
                     try {
                         const data = JSON.parse(payload);
 
-                        // Status event
                         if (data.status === 'thinking') {
                             thinkingText.textContent = data.message;
                             return;
                         }
 
-                        // Error event
                         if (data.error) {
                             thinkingEl.style.display = 'none';
                             contentEl.style.display = 'block';
@@ -647,7 +794,6 @@ function streamResponse(text) {
                             return;
                         }
 
-                        // Token event
                         if (data.token !== undefined) {
                             if (firstToken) {
                                 thinkingEl.style.display = 'none';
@@ -656,8 +802,8 @@ function streamResponse(text) {
                                 firstToken = false;
                             }
                             rawText += data.token;
-                            contentEl.textContent = rawText;
-                            scrollToBottom();
+                            // Live render markdown as tokens stream
+                            scheduleRender();
                         }
                     } catch (e) { /* ignore parse errors */ }
                 });
@@ -675,7 +821,8 @@ function streamResponse(text) {
     });
 }
 
-function finishStream(thinkingEl, contentEl, rawText) {
+function finishStream(thinkingEl, contentEl, rawText, renderTimer) {
+    if (renderTimer) clearTimeout(renderTimer);
     thinkingEl.style.display = 'none';
     contentEl.style.display = 'block';
     contentEl.classList.remove('cursor');
@@ -705,6 +852,7 @@ function scrollToBottom() {
 }
 
 function escapeHtml(text) {
+    if (typeof text !== 'string') return '';
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
@@ -770,11 +918,50 @@ function renderFinalContent(element, rawText) {
 }
 
 
+/* ============================================================
+   PWA — Service Worker + Install Prompt
+   ============================================================ */
+
+// Register service worker
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js').catch(() => {});
+}
+
+// Capture beforeinstallprompt for custom install banner
+let deferredPrompt = null;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    // Only show on mobile
+    if (/Mobi|Android/i.test(navigator.userAgent)) {
+        const dismissed = localStorage.getItem('stemcopilot_install_dismissed');
+        if (!dismissed) {
+            installBanner.style.display = 'flex';
+        }
+    }
+});
+
+installBtn.addEventListener('click', () => {
+    if (deferredPrompt) {
+        deferredPrompt.prompt();
+        deferredPrompt.userChoice.then(() => {
+            deferredPrompt = null;
+            installBanner.style.display = 'none';
+        });
+    }
+});
+
+installDismiss.addEventListener('click', () => {
+    installBanner.style.display = 'none';
+    localStorage.setItem('stemcopilot_install_dismissed', '1');
+});
+
+
 /* ============================================================
    INIT
    ============================================================ */
 
-// Wait for Google Identity Services to load
 window.addEventListener('load', () => {
     checkExistingSession();
 });

static/index.html

@@ -2,11 +2,14 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Stem Copilot</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>STEM Copilot</title>
     <meta name="description" content="AI-powered NCERT tutor for Class XI and XII Physics, Chemistry, and Mathematics.">
-    <link rel="icon" type="image/png" href="/assets/stem_black.png">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <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=Inter: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 -->
@@ -17,8 +20,8 @@
     <!-- ==================== LOGIN SCREEN ==================== -->
     <div class="login-screen" id="loginScreen">
         <div class="login-card">
-            <img src="/assets/stembotix.png" alt="STEMbotix" class="login-logo">
-            <h1 class="login-title">Welcome to Stem Copilot</h1>
+            <img src="/assets/bot.png" alt="STEM Copilot" class="login-logo">
+            <h1 class="login-title">Welcome to STEM Copilot</h1>
             <p class="login-subtitle">Your personal NCERT tutor for Physics, Chemistry & Mathematics</p>
             <div id="googleSignInBtn" class="google-btn-wrap"></div>
             <p class="login-footer">By signing in, you agree to our Terms of Service.</p>
@@ -30,7 +33,7 @@
         <div class="byok-card">
             <h2>One Last Step</h2>
             <p class="byok-desc">
-                Stem Copilot uses your own OpenRouter API key to power the tutor.
+                STEM Copilot uses your own OpenRouter API key to power the tutor.
                 It's free — takes 30 seconds to set up.
             </p>
             <ol class="byok-steps">
@@ -44,12 +47,26 @@
         </div>
     </div>
 
+    <!-- ==================== PWA INSTALL BANNER ==================== -->
+    <div class="install-banner" id="installBanner" style="display:none;">
+        <img src="/assets/bot.png" alt="" class="install-banner-icon">
+        <div class="install-banner-text">
+            <strong>STEM Copilot</strong>
+            <span>Install as app for faster access</span>
+        </div>
+        <button class="install-banner-btn" id="installBtn">Install</button>
+        <button class="install-banner-dismiss" id="installDismiss">&times;</button>
+    </div>
+
     <!-- ==================== MAIN APP ==================== -->
     <div class="app-container" id="appContainer" style="display:none;">
 
-        <!-- Sidebar -->
+        <!-- Sidebar (full) -->
         <aside class="sidebar" id="sidebar">
             <div class="sidebar-top">
+                <div class="sidebar-logo-row">
+                    <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>
                     New Chat
@@ -77,6 +94,23 @@
             </div>
         </aside>
 
+        <!-- Sidebar rail (collapsed) -->
+        <aside class="sidebar-rail" id="sidebarRail">
+            <div class="rail-top">
+                <button class="rail-icon-btn" id="railExpandBtn" title="Open sidebar">
+                    <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>
+                </button>
+            </div>
+            <div class="rail-bottom">
+                <button class="rail-icon-btn" id="railProfileBtn" title="Profile">
+                    <img id="railAvatar" class="rail-avatar" src="" alt="">
+                </button>
+            </div>
+        </aside>
+
         <!-- Main -->
         <main class="main-chat">
             <header class="main-header">
@@ -86,19 +120,33 @@
             </header>
 
             <div class="chat-container" id="chatContainer">
-                <!-- Welcome screen -->
-                <div class="welcome-screen" id="welcomeScreen">
-                    <h1 class="welcome-title">What should we study today?</h1>
-                    <div class="welcome-pills" id="welcomePills">
-                        <button class="pill" data-query="Explain Coulomb's law with derivation">Coulomb's Law</button>
-                        <button class="pill" data-query="What is sp3 hybridisation? Explain with examples">sp3 Hybridisation</button>
-                        <button class="pill" data-query="Derive the quadratic formula step by step">Quadratic Formula</button>
-                        <button class="pill" data-query="Explain Newton's laws of motion with real world examples">Newton's Laws</button>
+                <!-- 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>
+                    <div class="hero-input-wrap">
+                        <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>
+                            </button>
+                            <input type="file" id="heroImageInput" accept="image/*" style="display:none;">
+                            <textarea id="heroInput" placeholder="Ask anything about Physics, Chemistry or Maths..." rows="1"></textarea>
+                            <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>
+                            </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>
                     </div>
                 </div>
             </div>
 
-            <div class="input-container">
+            <!-- Bottom input (hidden during hero, shown during chat) -->
+            <div class="input-container" id="bottomInputContainer" style="display:none;">
                 <!-- Image preview -->
                 <div class="image-preview-bar" id="imagePreviewBar" style="display:none;">
                     <div class="image-preview-thumb" id="imagePreviewThumb"></div>
@@ -109,13 +157,13 @@
                         <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;">
-                    <textarea id="userInput" placeholder="Ask Stem Copilot..." rows="1"></textarea>
+                    <textarea id="userInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
                     <button class="send-btn" id="sendBtn">
                         <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                     </button>
                 </div>
                 <div class="disclaimer-text">
-                    Stem Copilot is an AI tutor grounded in NCERT material. It can still make mistakes.
+                    STEM Copilot is an AI tutor grounded in NCERT material. It can still make mistakes.
                 </div>
             </div>
         </main>
@@ -128,66 +176,80 @@
                 <h2>Settings</h2>
                 <button class="modal-close" id="settingsCloseBtn">&times;</button>
             </div>
-            <div class="modal-body">
-                <!-- Tab Navigation -->
-                <div class="settings-tabs">
-                    <button class="tab-btn active" data-tab="general">General</button>
-                    <button class="tab-btn" data-tab="apikeys">API Keys</button>
-                    <button class="tab-btn" data-tab="personalization">Personalization</button>
-                    <button class="tab-btn" data-tab="style">Teaching Style</button>
-                </div>
-
-                <!-- General Tab -->
-                <div class="tab-content active" id="tab-general">
-                    <label class="settings-label">Language</label>
-                    <select class="settings-select" id="languageSelect">
-                        <option value="auto">Auto-detect</option>
-                        <option value="english">English</option>
-                        <option value="hinglish">Hinglish</option>
-                        <option value="hindi">Hindi</option>
-                        <option value="gujarati">Gujarati</option>
-                        <option value="marathi">Marathi</option>
-                    </select>
-                </div>
-
-                <!-- API Keys Tab -->
-                <div class="tab-content" id="tab-apikeys">
-                    <label class="settings-label">OpenRouter API Key</label>
-                    <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>
-                    </p>
+            <div class="modal-body settings-layout">
+                <!-- 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>
+                        General
+                    </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>
+                        API Keys
+                    </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>
+                        Profile
+                    </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>
+                        Teaching Style
+                    </button>
                 </div>
+                <!-- Settings Content Panel -->
+                <div class="settings-panel">
+                    <!-- General Tab -->
+                    <div class="tab-content active" id="tab-general">
+                        <h3 class="settings-section-title">Language</h3>
+                        <select class="settings-select" id="languageSelect">
+                            <option value="auto">Auto-detect</option>
+                            <option value="english">English</option>
+                            <option value="hinglish">Hinglish</option>
+                            <option value="hindi">Hindi</option>
+                            <option value="gujarati">Gujarati</option>
+                            <option value="marathi">Marathi</option>
+                        </select>
+                    </div>
 
-                <!-- Personalization Tab -->
-                <div class="tab-content" id="tab-personalization">
-                    <label class="settings-label">Your Name</label>
-                    <input type="text" class="settings-input" id="usernameInput" placeholder="What should I call you?" maxlength="30" autocomplete="off">
+                    <!-- 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">
+                        <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>
+                        </p>
+                    </div>
 
-                    <label class="settings-label" style="margin-top:16px;">About You</label>
-                    <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>
+                    <!-- Personalization 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">
 
-                <!-- Teaching Style Tab -->
-                <div class="tab-content" id="tab-style">
-                    <p class="settings-hint" style="margin-bottom:12px;">All styles are equally effective. 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. Uses daily-life analogies.</div>
+                        <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>
+                        <button class="settings-save-btn" id="saveProfileBtn">Save Profile</button>
                     </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. For the kitabi keeda in you.</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. Warm, curious, like a mentor over chai.</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, mnemonics, and quick examples. No fluff, just results.</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">Noob</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>
                 </div>
             </div>

static/manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "STEM Copilot",
+  "short_name": "STEM Copilot",
+  "description": "AI-powered NCERT tutor for Class XI & XII — Physics, Chemistry, Mathematics",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0a0a0a",
+  "theme_color": "#0a0a0a",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/assets/stem_black.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/assets/bot.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

static/style.css

@@ -1,31 +1,37 @@
 /* ============================================================
-   Stem Copilot — Stylesheet
-   Montserrat, dark theme, ChatGPT-inspired layout
+   STEM Copilot — Stylesheet
+   Inter, dark theme, premium chat UI
    ============================================================ */
 
 :root {
     --brand-orange: #EB5A28;
     --brand-orange-hover: #cf4f22;
+    --brand-orange-glow: rgba(235, 90, 40, 0.25);
     --bg-main: #0a0a0a;
     --bg-sidebar: #0f0f0f;
     --bg-input: #1a1a1a;
     --bg-hover: #1f1f1f;
     --bg-card: #141414;
+    --bg-elevated: #1c1c1c;
     --text-primary: #ececec;
     --text-secondary: #888888;
     --text-muted: #555555;
     --border-color: #262626;
+    --border-subtle: #1e1e1e;
     --msg-user: #2a2a2a;
     --msg-ai: transparent;
     --radius: 12px;
     --radius-lg: 16px;
+    --radius-xl: 24px;
     --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --sidebar-width: 260px;
+    --rail-width: 56px;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background-color: var(--bg-main);
     color: var(--text-primary);
     height: 100vh;
@@ -54,15 +60,19 @@ body {
 }
 
 .login-logo {
-    max-width: 200px;
+    width: 100px;
+    height: 100px;
     margin-bottom: 28px;
+    border-radius: 50%;
+    object-fit: cover;
 }
 
 .login-title {
-    font-size: 26px;
+    font-size: 24px;
     font-weight: 700;
     margin-bottom: 8px;
     color: var(--text-primary);
+    white-space: nowrap;
 }
 
 .login-subtitle {
@@ -105,18 +115,9 @@ 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;
@@ -127,11 +128,7 @@ body {
     color: var(--text-secondary);
 }
 
-.byok-steps a {
-    color: var(--brand-orange);
-    text-decoration: none;
-}
-
+.byok-steps a { color: var(--brand-orange); text-decoration: none; }
 .byok-steps a:hover { text-decoration: underline; }
 
 .byok-submit-btn {
@@ -142,7 +139,7 @@ body {
     color: #fff;
     border: none;
     border-radius: var(--radius);
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
@@ -150,16 +147,77 @@ body {
 }
 
 .byok-submit-btn:hover { background: var(--brand-orange-hover); }
+.byok-note { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
 
-.byok-note {
-    font-size: 11px;
+
+/* ============================================================
+   PWA INSTALL BANNER
+   ============================================================ */
+
+.install-banner {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 900;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+    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-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+    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-btn {
+    background: var(--brand-orange);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background var(--transition);
+}
+
+.install-banner-btn:hover { background: var(--brand-orange-hover); }
+
+.install-banner-dismiss {
+    background: none;
+    border: none;
     color: var(--text-muted);
-    margin-top: 12px;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0 4px;
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
 }
 
 
 /* ============================================================
-   APP CONTAINER (post-login)
+   APP CONTAINER
    ============================================================ */
 
 .app-container {
@@ -170,22 +228,26 @@ body {
 
 
 /* ============================================================
-   SIDEBAR
+   SIDEBAR (full)
    ============================================================ */
 
 .sidebar {
-    width: 260px;
+    width: var(--sidebar-width);
     flex-shrink: 0;
     background: var(--bg-sidebar);
     display: flex;
     flex-direction: column;
     border-right: 1px solid var(--border-color);
-    transition: margin-left var(--transition);
+    transition: margin-left var(--transition), opacity var(--transition);
     position: relative;
     z-index: 20;
 }
 
-.sidebar.collapsed { margin-left: -260px; }
+.sidebar.collapsed {
+    margin-left: calc(-1 * var(--sidebar-width));
+    opacity: 0;
+    pointer-events: none;
+}
 
 .sidebar-top {
     flex: 1;
@@ -194,8 +256,19 @@ body {
     overflow: hidden;
 }
 
+.sidebar-logo-row {
+    padding: 16px 14px 4px;
+    display: flex;
+    align-items: center;
+}
+
+.sidebar-logo {
+    height: 28px;
+    object-fit: contain;
+}
+
 .new-chat-btn {
-    margin: 16px 14px 8px;
+    margin: 8px 14px;
     padding: 11px 14px;
     background: transparent;
     border: 1px solid var(--border-color);
@@ -207,11 +280,11 @@ body {
     gap: 10px;
     font-size: 14px;
     font-weight: 500;
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     transition: background var(--transition), border-color var(--transition);
 }
 
-.new-chat-btn:hover { background: var(--bg-hover); }
+.new-chat-btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }
 
 .chat-history {
     flex: 1;
@@ -264,7 +337,7 @@ body {
 .options-menu {
     position: absolute;
     right: 10px; top: 35px;
-    background: var(--bg-input);
+    background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     display: none;
@@ -338,16 +411,13 @@ body {
     text-overflow: ellipsis;
 }
 
-.user-menu-arrow {
-    opacity: 0.5;
-    transition: transform 0.2s;
-}
+.user-menu-arrow { opacity: 0.5; transition: transform 0.2s; }
 
 .user-menu {
     display: none;
     position: absolute;
     bottom: 68px; left: 14px; right: 14px;
-    background: var(--bg-input);
+    background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     box-shadow: 0 4px 20px rgba(0,0,0,0.7);
@@ -371,6 +441,66 @@ body {
 .user-menu-logout { color: #ff4a4a; }
 
 
+/* ============================================================
+   SIDEBAR RAIL (collapsed mode)
+   ============================================================ */
+
+.sidebar-rail {
+    width: var(--rail-width);
+    flex-shrink: 0;
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border-color);
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    z-index: 20;
+}
+
+.sidebar-rail.visible {
+    display: flex;
+}
+
+.rail-top, .rail-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+
+.rail-icon-btn {
+    width: 40px; height: 40px;
+    border-radius: 10px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background var(--transition), color var(--transition);
+}
+
+.rail-icon-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.rail-logo {
+    width: 28px; height: 28px;
+    border-radius: 6px;
+    object-fit: cover;
+}
+
+.rail-avatar {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+    background: var(--bg-hover);
+}
+
+
 /* ============================================================
    MAIN CHAT AREA
    ============================================================ */
@@ -421,50 +551,104 @@ body {
 }
 
 
-/* --- Welcome screen --- */
+/* ============================================================
+   HERO / WELCOME SCREEN
+   ============================================================ */
 
-.welcome-screen {
+.hero-welcome {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     flex: 1;
-    gap: 28px;
+    gap: 24px;
     user-select: none;
+    padding: 40px 20px;
 }
 
-.welcome-title {
-    font-size: 26px;
-    font-weight: 600;
-    color: var(--text-secondary);
+.hero-bot-icon {
+    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); }
+}
+
+.hero-title {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--text-primary);
     text-align: center;
+    line-height: 1.3;
+}
+
+.hero-input-wrap {
+    width: 100%;
+    max-width: 640px;
 }
 
-.welcome-pills {
+.hero-input-box {
     display: flex;
-    flex-wrap: wrap;
+    align-items: flex-end;
+    background: var(--bg-input);
+    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);
+}
+
+.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);
+}
+
+.hero-input-box textarea {
+    flex: 1;
+    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;
+    line-height: 1.5;
+    overflow-y: hidden;
+}
+
+.hero-input-box textarea::placeholder { color: var(--text-muted); }
+
+.hero-pills {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 10px;
-    justify-content: center;
-    max-width: 600px;
+    max-width: 560px;
+    width: 100%;
 }
 
-.pill {
-    padding: 10px 18px;
+.hero-pill {
+    padding: 14px 16px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 20px;
+    border-radius: var(--radius);
     color: var(--text-secondary);
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
-    transition: background var(--transition), color var(--transition), border-color var(--transition);
+    text-align: left;
+    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
 }
 
-.pill:hover {
+.hero-pill:hover {
     background: var(--bg-hover);
     border-color: var(--brand-orange);
     color: var(--text-primary);
+    box-shadow: 0 0 0 1px var(--brand-orange-glow);
 }
 
 
@@ -487,7 +671,7 @@ body {
     padding: 14px 18px;
     border-radius: var(--radius);
     font-size: 15px;
-    line-height: 1.7;
+    line-height: 1.75;
     word-wrap: break-word;
 }
 
@@ -504,9 +688,9 @@ body {
 }
 
 .ai-avatar {
-    width: 28px; height: 28px;
+    width: 30px; height: 30px;
     border-radius: 50%;
-    background-image: url('/assets/stem_black.png');
+    background-image: url('/assets/bot.png');
     background-size: cover;
     background-position: center;
     margin-right: 14px;
@@ -597,7 +781,6 @@ body {
 .katex { color: var(--text-primary); }
 .katex-display { margin: 14px 0; overflow-x: auto; }
 
-/* --- User uploaded image in message --- */
 .message-image {
     max-width: 240px;
     border-radius: 8px;
@@ -606,7 +789,7 @@ body {
 
 
 /* ============================================================
-   INPUT AREA
+   INPUT AREA (bottom bar during chat)
    ============================================================ */
 
 .input-container {
@@ -656,12 +839,16 @@ body {
     display: flex;
     align-items: flex-end;
     background: var(--bg-input);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    transition: border-color 0.3s;
+    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);
 }
 
-.input-box:focus-within { border-color: var(--brand-orange); }
+.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);
+}
 
 .upload-btn {
     background: none; border: none;
@@ -680,7 +867,7 @@ textarea {
     background: transparent; border: none;
     color: var(--text-primary);
     padding: 16px 12px;
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 15px;
     resize: none; outline: none;
     height: 54px; max-height: 200px;
@@ -700,13 +887,14 @@ textarea::placeholder { color: var(--text-muted); }
     transition: color 0.2s, transform 0.1s;
 }
 
-.send-btn:hover { color: var(--text-primary); }
-.send-btn:active { transform: scale(0.95); }
+.send-btn:hover { color: var(--brand-orange); }
+.send-btn:active { transform: scale(0.92); }
 .send-btn svg { width: 20px; height: 20px; fill: currentColor; }
 
 .disclaimer-text {
     font-size: 11px;
-    color: var(--text-muted);
+    color: rgba(255,255,255,0.5);
+    font-weight: 500;
     margin-top: 10px;
     text-align: center;
 }
@@ -726,19 +914,19 @@ textarea::placeholder { color: var(--text-muted); }
     justify-content: center;
 }
 
-.modal-overlay.show {
-    display: flex;
-}
+.modal-overlay.show { display: flex; }
 
 .settings-modal {
     background: var(--bg-sidebar);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
-    width: 520px;
+    width: 600px;
     max-width: 92vw;
     max-height: 85vh;
-    overflow-y: auto;
+    overflow: hidden;
     box-shadow: 0 8px 40px rgba(0,0,0,0.6);
+    display: flex;
+    flex-direction: column;
 }
 
 .modal-header {
@@ -747,12 +935,10 @@ textarea::placeholder { color: var(--text-muted); }
     align-items: center;
     padding: 20px 24px;
     border-bottom: 1px solid var(--border-color);
+    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;
@@ -766,42 +952,61 @@ textarea::placeholder { color: var(--text-muted); }
 .modal-close:hover { color: var(--text-primary); }
 
 .modal-body {
-    padding: 20px 24px 28px;
+    padding: 0;
+    overflow: hidden;
 }
 
-.settings-tabs {
+.settings-layout {
     display: flex;
-    gap: 4px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid var(--border-color);
-    padding-bottom: 12px;
+    min-height: 380px;
 }
 
-.tab-btn {
-    padding: 8px 16px;
+.settings-nav {
+    width: 160px;
+    flex-shrink: 0;
+    background: var(--bg-main);
+    padding: 16px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    border-right: 1px solid var(--border-color);
+}
+
+.settings-nav-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
     background: none;
     border: none;
     color: var(--text-secondary);
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
-    border-radius: 6px;
+    border-radius: 8px;
     transition: background var(--transition), color var(--transition);
+    text-align: left;
+    width: 100%;
 }
 
-.tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
-.tab-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;
+    padding: 24px;
+    overflow-y: auto;
+}
 
 .tab-content { display: none; }
 .tab-content.active { display: block; }
 
-.settings-label {
-    display: block;
-    font-size: 13px;
+.settings-section-title {
+    font-size: 14px;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 8px;
+    margin-bottom: 10px;
 }
 
 .settings-input, .settings-textarea {
@@ -811,7 +1016,7 @@ textarea::placeholder { color: var(--text-muted); }
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-primary);
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 14px;
     outline: none;
     transition: border-color 0.2s;
@@ -833,7 +1038,7 @@ textarea::placeholder { color: var(--text-muted); }
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-primary);
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 14px;
     outline: none;
     cursor: pointer;
@@ -855,7 +1060,7 @@ textarea::placeholder { color: var(--text-muted); }
     color: #fff;
     border: none;
     border-radius: 8px;
-    font-family: 'Montserrat', sans-serif;
+    font-family: inherit;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
@@ -871,11 +1076,7 @@ textarea::placeholder { color: var(--text-muted); }
     line-height: 1.5;
 }
 
-.settings-hint a {
-    color: var(--brand-orange);
-    text-decoration: none;
-}
-
+.settings-hint a { color: var(--brand-orange); text-decoration: none; }
 .settings-hint a:hover { text-decoration: underline; }
 
 .persona-option {
@@ -893,17 +1094,8 @@ textarea::placeholder { color: var(--text-muted); }
 .persona-option:hover { background: var(--bg-hover); }
 .persona-option.active { border-color: var(--brand-orange); background: rgba(235,90,40,0.06); }
 
-.persona-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.persona-desc {
-    font-size: 12px;
-    color: var(--text-secondary);
-    line-height: 1.5;
-}
+.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; }
 
 
 /* ============================================================
@@ -923,7 +1115,7 @@ textarea::placeholder { color: var(--text-muted); }
 .cursor::after {
     content: '\25CB';
     animation: blink 1s step-start infinite;
-    color: var(--text-secondary);
+    color: var(--brand-orange);
     margin-left: 2px;
 }
 
@@ -931,7 +1123,7 @@ textarea::placeholder { color: var(--text-muted); }
 
 
 /* ============================================================
-   ERROR MESSAGE IN STREAM
+   ERROR MESSAGE
    ============================================================ */
 
 .error-message {
@@ -949,9 +1141,37 @@ textarea::placeholder { color: var(--text-muted); }
    ============================================================ */
 
 @media (max-width: 768px) {
-    .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 30; }
-    .sidebar.collapsed { margin-left: -260px; }
+    .sidebar {
+        position: fixed; left: 0; top: 0;
+        height: 100vh; z-index: 30;
+    }
+    .sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-width)); }
+
+    .sidebar-rail { display: none !important; }
+
     .settings-modal { width: 95vw; }
-    .welcome-title { font-size: 20px; }
-    .pill { font-size: 12px; padding: 8px 14px; }
+
+    .settings-layout { flex-direction: column; }
+    .settings-nav {
+        width: 100%;
+        flex-direction: row;
+        overflow-x: auto;
+        padding: 8px;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+    }
+    .settings-nav-btn { white-space: nowrap; }
+    .settings-panel { padding: 16px; }
+
+    .hero-title { font-size: 22px; }
+    .hero-bot-icon { width: 80px; height: 80px; }
+    .hero-pills { grid-template-columns: 1fr; }
+    .hero-pill { font-size: 12px; padding: 12px 14px; }
+
+    .login-title { font-size: 20px; white-space: normal; }
+}
+
+@media (max-width: 480px) {
+    .hero-title { font-size: 20px; }
+    .hero-input-box textarea { font-size: 14px; }
 }

sw.js

@@ -0,0 +1,39 @@
+// STEM Copilot — Service Worker (PWA installability + basic cache)
+const CACHE_NAME = 'stemcopilot-v1';
+const SHELL_URLS = [
+  '/',
+  '/static/style.css',
+  '/static/app.js',
+  '/assets/bot.png',
+  '/assets/stem_black.png',
+  '/assets/stembotix.png',
+];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_URLS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (e) => {
+  // Network-first for API calls, cache-first for shell assets
+  if (e.request.url.includes('/chat') || e.request.url.includes('/auth') ||
+      e.request.url.includes('/threads') || e.request.url.includes('/history') ||
+      e.request.url.includes('/user') || e.request.url.includes('/export') ||
+      e.request.url.includes('/health')) {
+    return; // Let these go straight to network
+  }
+  e.respondWith(
+    caches.match(e.request).then((cached) => cached || fetch(e.request))
+  );
+});