Update templates/index.html

templates/index.html

@@ -7,25 +7,30 @@
   <title>{{ app_title }}</title>
   <style>
     :root {
-      --bg: #0b0e14;
-      --panel: #11151d;
-      --panel2: #171c26;
-      --border: rgba(255,255,255,.08);
-      --border2: rgba(255,255,255,.13);
-      --text: #ebeff7;
-      --muted: #8b93a8;
-      --accent: #6c83ff;
-      --accent2: #a16eff;
+      --bg: #08101a;
+      --panel: rgba(15, 22, 34, .94);
+      --panel2: rgba(20, 29, 44, .96);
+      --border: rgba(148, 163, 184, .14);
+      --border2: rgba(148, 163, 184, .2);
+      --text: #eef3f9;
+      --muted: #91a0b4;
+      --accent: #7ca6ff;
+      --accent2: #4fd1c5;
       --good: #2dd4bf;
       --bad: #f87171;
       --warn: #fbbf24;
-      --shadow: 0 20px 60px rgba(0,0,0,.35);
+      --shadow: 0 18px 44px rgba(0,0,0,.34);
+      --shadow-soft: 0 8px 26px rgba(0,0,0,.2);
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 16px;
+      --radius-xl: 22px;
       --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font: "Segoe UI Variable Text", "Segoe UI", Aptos, system-ui, -apple-system, sans-serif;
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body {
-      width: 100%; height: 100%;
+      width: 100%; height: var(--app-height, 100%);
       background: radial-gradient(ellipse at top center, #161c2b 0%, var(--bg) 50%);
       color: var(--text);
       font-family: var(--font);
@@ -36,14 +41,16 @@
       content: "";
       position: fixed; inset: 0;
       background-image:
-        linear-gradient(rgba(108,131,255,.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(108,131,255,.03) 1px, transparent 1px);
-      background-size: 44px 44px;
-      pointer-events: none; opacity: .3;
+        linear-gradient(rgba(124,166,255,.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(124,166,255,.025) 1px, transparent 1px);
+      background-size: 56px 56px;
+      pointer-events: none; opacity: .16;
     }
     #app {
       position: relative; z-index: 1;
-      height: 100%; display: flex; flex-direction: column;
+      height: var(--app-height, 100%);
+      display: flex; flex-direction: column;
+      min-height: 0;
     }
     /* ── Topbar ── */
     #topbar {
@@ -70,11 +77,11 @@
       border: 1px solid var(--border2);
       background: rgba(255,255,255,.03);
       color: var(--muted);
-      border-radius: 10px;
+      border-radius: var(--radius-md);
       padding: 6px 12px;
       font: inherit; font-size: 12px;
       cursor: pointer;
-      transition: all 180ms ease;
+      transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
       display: flex; align-items: center; gap: 5px;
     }
     .top-btn:hover {
@@ -107,9 +114,11 @@
     }
     /* ── Chat area ── */
     #chat {
-      flex: 1; overflow-y: auto;
+      flex: 1; min-height: 0; overflow-y: auto;
       padding: 20px 14px 24px;
       scroll-behavior: smooth;
+      overscroll-behavior-y: contain;
+      -webkit-overflow-scrolling: touch;
     }
     #chat::-webkit-scrollbar { width: 5px; }
     #chat::-webkit-scrollbar-track { background: transparent; }
@@ -120,7 +129,7 @@
       margin: 6vh auto 0; max-width: 480px; text-align: center;
       padding: 24px 20px;
       border: 1px solid var(--border);
-      border-radius: 20px;
+      border-radius: var(--radius-xl);
       background: rgba(255,255,255,.025);
       box-shadow: var(--shadow);
       animation: fadeUp 400ms ease both;
@@ -156,7 +165,7 @@
     .bubble {
       max-width: min(620px, calc(100vw - 100px));
       border: 1px solid var(--border);
-      border-radius: 16px;
+      border-radius: var(--radius-lg);
       padding: 10px 14px;
       line-height: 1.6; font-size: 14px;
       white-space: pre-wrap; word-break: break-word;
@@ -165,7 +174,7 @@
     .turn.user .bubble {
       background: linear-gradient(135deg, rgba(108,131,255,.15), rgba(161,110,255,.12));
       border-color: rgba(108,131,255,.2);
-      border-radius: 16px 16px 4px 16px;
+      border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
     }
     .turn-meta {
       margin-top: 3px;
@@ -187,7 +196,7 @@
     /* ── Best answer ── */
     .best-answer-bubble {
       border: 1px solid rgba(45,212,191,.15);
-      border-radius: 4px 16px 16px 16px;
+      border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
       padding: 10px 14px;
       background: rgba(45,212,191,.04);
       line-height: 1.6; font-size: 14px;
@@ -203,11 +212,11 @@
       border: 1px solid var(--border2);
       background: rgba(255,255,255,.02);
       color: var(--muted);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 4px 9px;
       font: inherit; font-size: 11px;
       cursor: pointer;
-      transition: all 160ms ease;
+      transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
       display: inline-flex; align-items: center; gap: 3px;
     }
     .vote-btn:hover {
@@ -227,11 +236,11 @@
       border: 1px solid var(--border2);
       background: rgba(255,255,255,.02);
       color: var(--muted);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 4px 9px;
       font: inherit; font-size: 11px;
       cursor: pointer;
-      transition: all 160ms ease;
+      transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
     }
     .action-btn:hover {
       border-color: rgba(108,131,255,.35);
@@ -242,11 +251,11 @@
       border: 1px solid rgba(45,212,191,.3);
       background: rgba(45,212,191,.08);
       color: var(--good);
-      border-radius: 10px;
+      border-radius: var(--radius-md);
       padding: 8px 14px;
       font: inherit; font-size: 12px; font-weight: 600;
       cursor: pointer;
-      transition: all 180ms ease;
+      transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
       display: inline-flex; align-items: center; gap: 6px;
       margin-top: 8px;
     }
@@ -268,7 +277,7 @@
       min-height: 80px; max-height: 160px;
       resize: vertical;
       border: 1px solid var(--border2);
-      border-radius: 12px;
+      border-radius: var(--radius-md);
       background: var(--panel);
       color: var(--text);
       font: inherit; font-size: 13px;
@@ -286,11 +295,11 @@
       border: 1px solid rgba(45,212,191,.4);
       background: rgba(45,212,191,.12);
       color: var(--good);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 6px 14px;
       font: inherit; font-size: 12px; font-weight: 600;
       cursor: pointer;
-      transition: all 160ms ease;
+      transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
     }
     .write-submit:hover {
       background: rgba(45,212,191,.2);
@@ -301,7 +310,7 @@
       border: 1px solid var(--border);
       background: transparent;
       color: var(--muted);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 6px 12px;
       font: inherit; font-size: 12px;
       cursor: pointer;
@@ -312,11 +321,11 @@
       border: 1px solid var(--border);
       background: rgba(255,255,255,.02);
       color: var(--muted);
-      border-radius: 10px;
+      border-radius: var(--radius-md);
       padding: 6px 12px;
       font: inherit; font-size: 11px;
       cursor: pointer;
-      transition: all 180ms ease;
+      transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
       display: inline-flex; align-items: center; gap: 5px;
     }
     .other-answers-toggle:hover {
@@ -376,7 +385,7 @@
     .version-card {
       border: 1px solid var(--border);
       background: rgba(255,255,255,.02);
-      border-radius: 10px;
+      border-radius: var(--radius-md);
       padding: 8px 10px; margin-top: 4px;
       animation: fadeUp 180ms ease both;
     }
@@ -417,11 +426,11 @@
       border: 1px solid rgba(108,131,255,.3);
       background: rgba(108,131,255,.1);
       color: var(--accent);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 5px 12px;
       font: inherit; font-size: 11px;
       cursor: pointer;
-      transition: all 160ms ease;
+      transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
     }
     .propose-submit:hover {
       background: rgba(108,131,255,.18);
@@ -432,7 +441,7 @@
       border: 1px solid var(--border);
       background: transparent;
       color: var(--muted);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 5px 10px;
       font: inherit; font-size: 11px;
       cursor: pointer;
@@ -447,7 +456,7 @@
       display: flex; gap: 4px; align-items: center;
       padding: 12px 16px;
       border: 1px solid var(--border);
-      border-radius: 4px 16px 16px 16px;
+      border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
       background: rgba(255,255,255,.03);
     }
     .typing-dots span {
@@ -504,6 +513,17 @@
       opacity: 1;
       transform: translateY(0);
     }
+    .answer-reveal {
+      opacity: 0;
+      transform: translateY(4px);
+      filter: blur(1px);
+      transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
+    }
+    .answer-reveal.revealed {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
     .related-stack {
       margin-top: 14px;
       padding-top: 12px;
@@ -517,11 +537,11 @@
       border: 1px solid var(--border);
       background: rgba(255,255,255,.02);
       color: var(--muted);
-      border-radius: 10px;
+      border-radius: var(--radius-md);
       padding: 6px 12px;
       font: inherit; font-size: 11px;
       cursor: pointer;
-      transition: all 180ms ease;
+      transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
       display: inline-flex; align-items: center; gap: 5px;
     }
     .related-toggle:hover {
@@ -561,16 +581,16 @@
       border-top: 1px solid var(--border);
       background: rgba(11,14,20,.85);
       backdrop-filter: blur(14px);
-      padding: 10px 14px 14px;
+      padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
       flex-shrink: 0;
     }
     .compose-inner {
       max-width: 760px; margin: 0 auto;
       border: 1px solid var(--border2);
-      border-radius: 14px;
+      border-radius: var(--radius-lg);
       padding: 8px 10px 6px;
       background: var(--panel);
-      box-shadow: 0 8px 32px rgba(0,0,0,.25);
+      box-shadow: var(--shadow-soft);
       transition: border-color 200ms ease;
     }
     .compose-inner:focus-within { border-color: rgba(108,131,255,.3); }
@@ -601,7 +621,7 @@
       color: white;
       background: linear-gradient(135deg, var(--accent), var(--accent2));
       box-shadow: 0 4px 14px rgba(108,131,255,.2);
-      transition: transform 140ms ease, box-shadow 140ms ease;
+      transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
     }
     .send-btn:hover {
       transform: translateY(-1px);
@@ -644,8 +664,9 @@
       border: 1px solid var(--border2);
       cursor: pointer;
       position: relative;
-      transition: background 200ms ease;
+      transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
       flex-shrink: 0;
+      appearance: none;
     }
     .toggle.on {
       background: rgba(108,131,255,.35);
@@ -666,11 +687,11 @@
       left: 50%; bottom: 80px;
       transform: translateX(-50%) translateY(12px);
       opacity: 0; pointer-events: none;
-      transition: all 200ms cubic-bezier(.4,0,.2,1);
+      transition: opacity 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
       z-index: 50;
       background: rgba(17,21,29,.95);
       border: 1px solid var(--border2);
-      border-radius: 10px;
+      border-radius: var(--radius-md);
       padding: 8px 14px;
       color: var(--text);
       font-family: var(--mono); font-size: 11px;
@@ -682,6 +703,46 @@
     #toast.good { border-color: rgba(45,212,191,.4); color: var(--good); }
     #toast.bad { border-color: rgba(248,113,113,.4); color: var(--bad); }
     .no-answer-bubble { border-style: dashed !important; color: var(--muted); }
+    #jumpLatest {
+      position: fixed;
+      left: 50%;
+      bottom: 132px;
+      transform: translateX(-50%) translateY(8px);
+      z-index: 55;
+      border: 1px solid rgba(124,166,255,.3);
+      background: rgba(14, 20, 31, .94);
+      color: var(--text);
+      border-radius: 999px;
+      padding: 8px 14px;
+      font: inherit;
+      font-size: 12px;
+      box-shadow: var(--shadow-soft);
+      backdrop-filter: blur(10px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 160ms ease, transform 160ms ease;
+    }
+    #jumpLatest.show {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateX(-50%) translateY(0);
+    }
+    #jumpLatest:focus-visible,
+    .top-btn:focus-visible,
+    .vote-btn:focus-visible,
+    .action-btn:focus-visible,
+    .write-answer-btn:focus-visible,
+    .other-answers-toggle:focus-visible,
+    .related-toggle:focus-visible,
+    .send-btn:focus-visible,
+    .write-submit:focus-visible,
+    .write-cancel:focus-visible,
+    .propose-submit:focus-visible,
+    .propose-cancel:focus-visible,
+    .toggle:focus-visible {
+      outline: 2px solid rgba(124,166,255,.65);
+      outline-offset: 2px;
+    }
     @media (max-width: 600px) {
       #topbar { padding: 0 10px; }
       .brand-sub { display: none; }
@@ -689,6 +750,7 @@
       .welcome { margin-top: 3vh; padding: 18px 14px; }
       .welcome h1 { font-size: 18px; }
       #settingsPanel { width: 100%; border-radius: 0 0 16px 16px; }
+      #jumpLatest { bottom: 120px; max-width: calc(100vw - 24px); white-space: nowrap; }
     }
   </style>
 </head>
@@ -707,7 +769,7 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           New chat
         </button>
-        <button class="top-btn" id="settingsBtn">
+        <button class="top-btn" id="settingsBtn" aria-expanded="false" aria-controls="settingsPanel">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><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 1 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 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 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 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.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 1 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>
         </button>
       </div>
@@ -717,38 +779,39 @@
       <span class="status-dot"></span>
       <span id="statusText">Thinking…</span>
     </div>
+    <button id="jumpLatest" type="button" aria-label="Jump to latest content">New content below · Jump to latest</button>
 
-    <div id="settingsPanel">
-      <div class="settings-title">Appearance</div>
-      <div class="setting-row">
-        <div><div class="setting-label">None</div><div class="setting-desc">Instant display</div></div>
-        <div class="toggle" id="togNone" data-anim="none"></div>
+      <div id="settingsPanel">
+        <div class="settings-title">Appearance</div>
+        <div class="setting-row">
+        <div><div class="setting-label">Instant</div><div class="setting-desc">No response animation</div></div>
+        <button class="toggle" type="button" id="togNone" data-anim="none" aria-pressed="true"></button>
       </div>
       <div class="setting-row">
-        <div><div class="setting-label">AI typing</div><div class="setting-desc">Fast character stream</div></div>
-        <div class="toggle" id="togAI" data-anim="ai"></div>
+        <div><div class="setting-label">Quick fade</div><div class="setting-desc">Light reveal on response</div></div>
+        <button class="toggle" type="button" id="togAI" data-anim="ai" aria-pressed="false"></button>
       </div>
       <div class="setting-row">
-        <div><div class="setting-label">Human typing</div><div class="setting-desc">Irregular human speed</div></div>
-        <div class="toggle" id="togHuman" data-anim="human"></div>
+        <div><div class="setting-label">Gentle fade</div><div class="setting-desc">A slightly slower reveal</div></div>
+        <button class="toggle" type="button" id="togHuman" data-anim="human" aria-pressed="false"></button>
       </div>
       <div class="setting-row">
-        <div><div class="setting-label">Diffusion</div><div class="setting-desc">Blur-to-clear reveal</div></div>
-        <div class="toggle" id="togDiffusion" data-anim="diffusion"></div>
+        <div><div class="setting-label">Soft reveal</div><div class="setting-desc">Low-motion blur-free animation</div></div>
+        <button class="toggle" type="button" id="togDiffusion" data-anim="diffusion" aria-pressed="false"></button>
       </div>
       <div class="setting-row">
-        <div><div class="setting-label">Diffusion v2</div><div class="setting-desc">Random text resolves in global steps</div></div>
-        <div class="toggle" id="togDiffusionV2" data-anim="diffusion-v2"></div>
+        <div><div class="setting-label">Slow reveal</div><div class="setting-desc">Longest subtle response transition</div></div>
+        <button class="toggle" type="button" id="togDiffusionV2" data-anim="diffusion-v2" aria-pressed="false"></button>
       </div>
     </div>
 
     <div id="chat">
       <div class="wrap">
         <div class="welcome" id="welcome">
-          <h1>Ask anything. Get human made answers.</h1>
+          <h1>Ask a question. Get answers from real people.</h1>
           <p>Type a question below. If a matching answer exists, it appears instantly. Otherwise, anyone can write the first answer.</p>
-          <p>Do not share personal information</p>
-          <p>All answers are from humans, if you didnt get an answer, come back tommorrow and ask again.</p>
+          <p>Please do not share personal or sensitive information.</p>
+          <p>If no one answers yet, try again later. More people may see it over time.</p>
         </div>
         <div id="transcript"></div>
       </div>
@@ -777,9 +840,14 @@
         currentQuestion: "",
         relatedAnswers: [],
         loading: false,
+        atBottom: true,
         animMode: localStorage.getItem("hi_anim") || "none",
       };
       const $ = id => document.getElementById(id);
+      function updateAppHeight() {
+        const h = window.visualViewport?.height || window.innerHeight || document.documentElement.clientHeight;
+        document.documentElement.style.setProperty("--app-height", `${Math.round(h)}px`);
+      }
       function getClientId() {
         let id = localStorage.getItem("hi_client_id");
         if (!id) {
@@ -813,11 +881,36 @@
         try { return new Date(iso).toLocaleString([], { month:"short", day:"numeric", hour:"2-digit", minute:"2-digit" }); }
         catch { return iso; }
       }
-      function scrollBottom() {
+      function isNearBottom() {
         const c = $("chat");
-        requestAnimationFrame(() => { c.scrollTop = c.scrollHeight; });
+        return c.scrollHeight - c.scrollTop - c.clientHeight < 72;
+      }
+      function setJumpLatest(visible) {
+        const btn = $("jumpLatest");
+        if (!btn) return;
+        btn.classList.toggle("show", !!visible);
+      }
+      function scrollBottom(force = false) {
+        const c = $("chat");
+        if (!c) return;
+        const shouldScroll = force || S.atBottom || isNearBottom();
+        if (shouldScroll) {
+          requestAnimationFrame(() => {
+            c.scrollTop = c.scrollHeight;
+            setJumpLatest(false);
+            S.atBottom = true;
+          });
+        } else {
+          setJumpLatest(true);
+        }
       }
       function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+      function appendHTML(target, html) {
+        if (!html) return;
+        const tpl = document.createElement("template");
+        tpl.innerHTML = html.trim();
+        target.appendChild(tpl.content);
+      }
       function diffusionTokens(text) {
         return String(text || "").split(/(\s+)/).map((part, i) => {
           if (!part) return "";
@@ -897,41 +990,21 @@
         el.textContent = String(text || "");
       }
       async function animateText(el, text) {
+        if (!el) return;
         const mode = S.animMode;
-        if (mode === "ai") {
-          el.innerHTML = "";
-          for (let i = 0; i < text.length; i++) {
-            el.innerHTML = nl2br(text.slice(0, i + 1));
-            scrollBottom();
-            await sleep(12 + Math.random() * 8);
-          }
-        } else if (mode === "human") {
-          el.innerHTML = "";
-          for (let i = 0; i < text.length; i++) {
-            el.innerHTML = nl2br(text.slice(0, i + 1));
-            scrollBottom();
-            const ch = text[i];
-            let d = 25 + Math.random() * 55;
-            if (ch === " ") d += Math.random() * 30;
-            if (".!?".includes(ch)) d += 120 + Math.random() * 180;
-            if (",;:".includes(ch)) d += 40 + Math.random() * 60;
-            if (Math.random() < .03) d += 200 + Math.random() * 300;
-            await sleep(d);
-          }
-        } else if (mode === "diffusion") {
-          el.innerHTML = `<span class="diffusion-text">${diffusionTokens(text)}</span>`;
-          scrollBottom();
-          const tokens = Array.from(el.querySelectorAll(".diffusion-token"));
-          for (let i = 0; i < tokens.length; i++) {
-            tokens[i].classList.add("revealed");
-            if (i % 5 === 0) scrollBottom();
-            await sleep(26 + Math.random() * 30);
-          }
-        } else if (mode === "diffusion-v2") {
-          await animateDiffusionV2(el, text);
-        } else {
-          el.innerHTML = nl2br(text);
+        const timings = { none: 0, ai: 90, human: 140, diffusion: 110, "diffusion-v2": 160 };
+        el.classList.remove("answer-reveal", "revealed");
+        el.innerHTML = nl2br(text);
+        if (mode === "none") {
+          setJumpLatest(false);
+          return;
         }
+        el.classList.add("answer-reveal");
+        requestAnimationFrame(() => {
+          el.classList.add("revealed");
+        });
+        scrollBottom();
+        await sleep(timings[mode] || 120);
       }
       function showTyping() {
         removeTyping();
@@ -974,7 +1047,7 @@
         const others = (answer.versions||[]).filter(v => v.id !== act?.id);
         if (!others.length) return "";
         return `
-          <button class="versions-toggle" data-toggle-versions="${answer.id}">
+          <button class="versions-toggle" type="button" data-toggle-versions="${answer.id}" aria-controls="vp-${answer.id}" aria-expanded="false">
             <span class="arrow">▶</span> ${others.length} version${others.length>1?"s":""}
           </button>
           <div class="versions-panel" id="vp-${answer.id}">
@@ -992,7 +1065,7 @@
       }
       function renderPropose(answerId) {
         return `
-          <button class="action-btn" data-propose="${answerId}">Propose version</button>
+          <button class="action-btn" type="button" data-propose="${answerId}" aria-controls="pp-${answerId}" aria-expanded="false">Propose version</button>
           <div class="propose-panel" id="pp-${answerId}">
             <textarea class="propose-textarea" placeholder="Write a better version…" rows="3"></textarea>
             <div class="propose-actions">
@@ -1003,7 +1076,7 @@
       }
       function renderWriteAnswer() {
         return `
-          <button class="write-answer-btn" id="writeAnswerBtn">
+          <button class="write-answer-btn" type="button" id="writeAnswerBtn" aria-controls="writePanel" aria-expanded="false">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><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>
             Write an answer
           </button>
@@ -1038,7 +1111,7 @@
         if (answers.length <= 1) return "";
         const others = answers.slice(1);
         return `
-          <button class="other-answers-toggle" id="otherAnswersToggle">
+          <button class="other-answers-toggle" type="button" id="otherAnswersToggle" aria-controls="otherAnswersPanel" aria-expanded="false">
             <span class="arrow">▶</span> ${others.length} other answer${others.length>1?"s":""}
           </button>
           <div class="other-answers-panel" id="otherAnswersPanel">
@@ -1067,7 +1140,7 @@
         return `
           <div class="related-stack">
             <div class="chip muted">from similar questions</div>
-            <button class="related-toggle" id="relatedToggle">
+            <button class="related-toggle" type="button" id="relatedToggle" aria-controls="relatedPanel" aria-expanded="false">
               <span class="arrow">▶</span> ${rel.length} related answer${rel.length > 1 ? "s" : ""}
             </button>
             <div class="related-panel" id="relatedPanel">
@@ -1091,15 +1164,17 @@
       async function renderConversation(questionText, doAnimate) {
         const tr = $("transcript");
         const wl = $("welcome");
-        tr.innerHTML = "";
+        const frag = document.createDocumentFragment();
         if (!S.conversation) {
           wl.style.display = "block";
+          tr.replaceChildren();
+          setJumpLatest(false);
           return;
         }
         wl.style.display = "none";
         const q = questionText || S.conversation.question || "";
         // Question bubble
-        tr.insertAdjacentHTML("beforeend", `
+        appendHTML(frag, `
           <div class="turn user">
             <div>
               <div class="bubble">${nl2br(q)}</div>
@@ -1113,7 +1188,7 @@
         const answers = sortedAnswers(S.conversation);
         if (!answers.length) {
           // No answers yet — show placeholder + write button
-          tr.insertAdjacentHTML("beforeend", `
+          appendHTML(frag, `
             <div class="turn assistant">
               <div class="avatar assistant">✦</div>
               <div>
@@ -1126,7 +1201,7 @@
         } else {
           // Best answer + write more + other answers
           const best = answers[0];
-          tr.insertAdjacentHTML("beforeend", `
+          appendHTML(frag, `
             <div class="turn assistant">
               <div class="avatar assistant">✦</div>
               <div style="min-width:0;flex:1;">
@@ -1136,13 +1211,16 @@
                 <div id="relatedMount"></div>
               </div>
             </div>`);
-          // Animate best answer text
+        }
+        tr.replaceChildren(frag);
+        if (answers.length) {
+          const best = answers[0];
           const bestV = activeVersion(best);
           if (bestV) {
             const el = $("bestAnswerText");
             if (doAnimate) {
               await animateText(el, bestV.text || "");
-            } else {
+            } else if (el) {
               el.innerHTML = nl2br(bestV.text || "");
             }
           }
@@ -1181,6 +1259,7 @@
             if (!p) return;
             const open = p.classList.toggle("open");
             btn.querySelector(".arrow").style.transform = open ? "rotate(90deg)" : "";
+            btn.setAttribute("aria-expanded", String(open));
           };
         });
         // Other answers toggle
@@ -1190,6 +1269,7 @@
           if (!p) return;
           const open = p.classList.toggle("open");
           oat.classList.toggle("open", open);
+          oat.setAttribute("aria-expanded", String(open));
         };
         const rt = $("relatedToggle");
         if (rt) rt.onclick = () => {
@@ -1197,18 +1277,26 @@
           if (!p) return;
           const open = p.classList.toggle("open");
           rt.classList.toggle("open", open);
+          rt.setAttribute("aria-expanded", String(open));
         };
         // Propose toggle
         document.querySelectorAll("[data-propose]").forEach(btn => {
           btn.onclick = () => {
-            const p = $("pp-" + btn.getAttribute("data-propose"));
-            if (p) p.classList.toggle("open");
+            const id = btn.getAttribute("data-propose");
+            const p = $("pp-" + id);
+            if (p) {
+              const open = p.classList.toggle("open");
+              btn.setAttribute("aria-expanded", String(open));
+            }
           };
         });
         document.querySelectorAll("[data-cancel-propose]").forEach(btn => {
           btn.onclick = () => {
-            const p = $("pp-" + btn.getAttribute("data-cancel-propose"));
+            const id = btn.getAttribute("data-cancel-propose");
+            const p = $("pp-" + id);
             if (p) p.classList.remove("open");
+            const trigger = Array.from(document.querySelectorAll("[data-propose]")).find(el => el.getAttribute("data-propose") === id);
+            if (trigger) trigger.setAttribute("aria-expanded", "false");
           };
         });
         // Submit proposal
@@ -1239,8 +1327,9 @@
         if (wab) wab.onclick = () => {
           const p = $("writePanel");
           if (p) {
-            p.classList.toggle("open");
-            if (p.classList.contains("open")) {
+            const open = p.classList.toggle("open");
+            wab.setAttribute("aria-expanded", String(open));
+            if (open) {
               const ta = $("writeTextarea");
               if (ta) setTimeout(() => ta.focus(), 100);
             }
@@ -1251,6 +1340,7 @@
         if (wc) wc.onclick = () => {
           const p = $("writePanel");
           if (p) p.classList.remove("open");
+          if (wab) wab.setAttribute("aria-expanded", "false");
         };
         // Submit answer
         const ws = $("writeSubmit");
@@ -1282,12 +1372,22 @@
       }
       /* ── API ── */
       async function callAPI(action, payload = {}) {
-        const resp = await fetch("/api", {
-          method: "POST",
-          headers: { "Content-Type": "application/json", "X-Client-Id": S.clientId },
-          body: JSON.stringify({ action, client_id: S.clientId, ...payload }),
-        });
-        return resp.json();
+        try {
+          const resp = await fetch("/api", {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "X-Client-Id": S.clientId },
+            body: JSON.stringify({ action, client_id: S.clientId, ...payload }),
+          });
+          const data = await resp.json().catch(() => null);
+          if (!resp.ok) {
+            return data && typeof data === "object"
+              ? data
+              : { ok: false, error: `Request failed (${resp.status})` };
+          }
+          return data || { ok: false, error: "Empty response from server" };
+        } catch (err) {
+          return { ok: false, error: err?.message || "Network error" };
+        }
       }
       /* ── Ask (input bar is ONLY for asking) ── */
       async function askQuestion(q) {
@@ -1339,24 +1439,40 @@
         S.conversation = null;
         S.currentQuestion = "";
         S.relatedAnswers = [];
+        S.atBottom = true;
         localStorage.removeItem("hi_last_cid");
         $("transcript").innerHTML = "";
         $("welcome").style.display = "block";
+        setJumpLatest(false);
         $("prompt").value = "";
         $("prompt").focus();
       }
       /* ── Settings ── */
       function initSettings() {
         const panel = $("settingsPanel");
-        $("settingsBtn").onclick = () => panel.classList.toggle("open");
+        const btn = $("settingsBtn");
+        function setOpen(open, focusBtn = false) {
+          panel.classList.toggle("open", open);
+          btn.setAttribute("aria-expanded", String(open));
+          if (!open && focusBtn) btn.focus();
+        }
+        btn.onclick = () => setOpen(!panel.classList.contains("open"));
         document.addEventListener("click", e => {
-          if (!panel.contains(e.target) && e.target !== $("settingsBtn") && !$("settingsBtn").contains(e.target))
-            panel.classList.remove("open");
+          if (!panel.contains(e.target) && e.target !== btn && !btn.contains(e.target))
+            setOpen(false);
+        });
+        document.addEventListener("keydown", e => {
+          if (e.key === "Escape" && panel.classList.contains("open")) {
+            setOpen(false, true);
+          }
         });
         const ids = ["togNone","togAI","togHuman","togDiffusion","togDiffusionV2"];
         function sync() {
           ids.forEach(id => {
-            $(id).classList.toggle("on", S.animMode === $(id).getAttribute("data-anim"));
+            const el = $(id);
+            const on = S.animMode === el.getAttribute("data-anim");
+            el.classList.toggle("on", on);
+            el.setAttribute("aria-pressed", String(on));
           });
         }
         ids.forEach(id => {
@@ -1366,11 +1482,24 @@
             sync();
           };
         });
+        const jump = $("jumpLatest");
+        if (jump) jump.onclick = () => scrollBottom(true);
         sync();
       }
       /* ── Init ── */
       function init() {
+        updateAppHeight();
+        window.addEventListener("resize", updateAppHeight);
+        window.addEventListener("orientationchange", updateAppHeight);
+        if (window.visualViewport) {
+          window.visualViewport.addEventListener("resize", updateAppHeight);
+          window.visualViewport.addEventListener("scroll", updateAppHeight);
+        }
         S.clientId = getClientId();
+        $("chat").addEventListener("scroll", () => {
+          S.atBottom = isNearBottom();
+          if (S.atBottom) setJumpLatest(false);
+        }, { passive: true });
         $("sendBtn").onclick = submitPrompt;
         $("newChatBtn").onclick = newChat;
         $("prompt").addEventListener("input", e => autoGrow(e.target));