diff --git "a/templates/index.html" "b/templates/index.html"
--- "a/templates/index.html"
+++ "b/templates/index.html"
@@ -7,6 +7,7 @@
   <link rel="icon" type="image/png" href="/templates/logo.png" />
   <title>{{ app_title }}</title>
   <style>
+    /* ── Design Tokens ── */
     :root {
       --bg: #08101a;
       --panel: rgba(15, 22, 34, .94);
@@ -22,10 +23,18 @@
       --warn: #fbbf24;
       --shadow: 0 18px 44px rgba(0,0,0,.34);
       --shadow-soft: 0 8px 26px rgba(0,0,0,.2);
-      --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
-      --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;
-      --space-1: 4px; --space-2: 8px; --space-3: 12px;
-      --space-4: 16px; --space-6: 24px; --space-8: 32px;
+      --radius-xs: 4px;
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 16px;
+      --radius-xl: 22px;
+      --radius-pill: 999px;
+      --space-1: 4px;
+      --space-2: 8px;
+      --space-3: 12px;
+      --space-4: 16px;
+      --space-6: 24px;
+      --space-8: 32px;
       --ease-out: cubic-bezier(.22,.61,.36,1);
       --ease-in-out: cubic-bezier(.4,0,.2,1);
       --ease-spring: cubic-bezier(.34,1.56,.64,1);
@@ -35,98 +44,209 @@
       --turn-gap: 6px;
       --font-size-base: 14px;
     }
+
+    /* ── Light Mode ── */
     @media (prefers-color-scheme: light) {
       :root {
-        --bg: #f8f9fc; --panel: rgba(255,255,255,.96); --panel2: rgba(245,247,252,.98);
-        --border: rgba(30,40,80,.1); --border2: rgba(30,40,80,.16);
-        --text: #1a1d26; --muted: #5a6374;
-        --accent: #3b6fd4; --accent2: #0d9488; --good: #0d9488; --bad: #dc2626; --warn: #d97706;
-        --shadow: 0 18px 44px rgba(0,0,0,.1); --shadow-soft: 0 8px 26px rgba(0,0,0,.07);
+        --bg: #f8f9fc;
+        --panel: rgba(255,255,255,.96);
+        --panel2: rgba(245,247,252,.98);
+        --border: rgba(30,40,80,.1);
+        --border2: rgba(30,40,80,.16);
+        --text: #1a1d26;
+        --muted: #5a6374;
+        --accent: #3b6fd4;
+        --accent2: #0d9488;
+        --good: #0d9488;
+        --bad: #dc2626;
+        --warn: #d97706;
+        --shadow: 0 18px 44px rgba(0,0,0,.1);
+        --shadow-soft: 0 8px 26px rgba(0,0,0,.07);
+      }
+      html, body {
+        background: radial-gradient(ellipse at top center, #e8edf8 0%, var(--bg) 50%);
       }
-      html, body { background: radial-gradient(ellipse at top center, #e8edf8 0%, var(--bg) 50%); }
       body::before { opacity: .06; }
       #topbar { background: rgba(248,249,252,.88); }
       .compose { background: rgba(248,249,252,.92); }
     }
-    [data-density="compact"]  { --bubble-padding: 6px 10px; --turn-gap: 3px; --font-size-base: 13px; }
-    [data-density="spacious"] { --bubble-padding: 14px 18px; --turn-gap: 10px; --font-size-base: 15px; }
+
+    /* ── Density Variants ── */
+    [data-density="compact"] {
+      --bubble-padding: 6px 10px;
+      --turn-gap: 3px;
+      --font-size-base: 13px;
+    }
+    [data-density="spacious"] {
+      --bubble-padding: 14px 18px;
+      --turn-gap: 10px;
+      --font-size-base: 15px;
+    }
+
+    /* ── Reduced Motion ── */
     @media (prefers-reduced-motion: reduce) {
-      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.01ms !important;
+      }
     }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body {
       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);
-      overflow: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior: none;
+      color: var(--text);
+      font-family: var(--font);
+      overflow: hidden;
+      -webkit-font-smoothing: antialiased;
+      overscroll-behavior: none;
     }
     body::before {
-      content: ""; position: fixed; inset: 0;
-      background-image: linear-gradient(rgba(124,166,255,.025) 1px, transparent 1px),
+      content: "";
+      position: fixed; inset: 0;
+      background-image:
+        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: .25; will-change: transform;
+      background-size: 56px 56px;
+      pointer-events: none;
+      opacity: .25;
+      will-change: transform;
     }
-    #app { position: relative; z-index: 1; height: var(--app-height, 100%); display: flex; flex-direction: column; min-height: 0; }
+    #app {
+      position: relative; z-index: 1;
+      height: var(--app-height, 100%);
+      display: flex; flex-direction: column;
+      min-height: 0;
+    }
+
+    /* ── Skip Link ── */
     .skip-link {
-      position: absolute; top: -100px; left: var(--space-4); background: var(--panel); color: var(--text);
-      padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 300;
-      font-size: 13px; font-weight: 600; border: 1px solid var(--border2); text-decoration: none;
+      position: absolute;
+      top: -100px; left: var(--space-4);
+      background: var(--panel);
+      color: var(--text);
+      padding: var(--space-2) var(--space-4);
+      border-radius: var(--radius-md);
+      z-index: 300;
+      font-size: 13px;
+      font-weight: 600;
+      border: 1px solid var(--border2);
+      text-decoration: none;
       transition: top 150ms var(--ease-out);
     }
     .skip-link:focus { top: var(--space-2); }
 
     /* ── Topbar ── */
     #topbar {
-      height: 56px; padding: 0 var(--space-4); display: flex; align-items: center;
-      justify-content: space-between; border-bottom: 1px solid var(--border);
-      backdrop-filter: blur(20px) saturate(180%); background: rgba(11,14,20,.78);
-      flex-shrink: 0; position: relative; z-index: 10;
+      height: 56px; padding: 0 var(--space-4);
+      display: flex; align-items: center; justify-content: space-between;
+      border-bottom: 1px solid var(--border);
+      backdrop-filter: blur(20px) saturate(180%);
+      background: rgba(11,14,20,.78);
+      flex-shrink: 0;
+      position: relative; z-index: 10;
     }
     @media (max-height: 500px) { #topbar { height: 42px; } }
     .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
-    .logo { width: 30px; height: 30px; border-radius: 10px; display: block; object-fit: cover;
-      box-shadow: 0 6px 18px rgba(108,131,255,.25); border: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
+    .logo {
+      width: 30px; height: 30px; border-radius: 10px;
+      display: block; object-fit: cover;
+      box-shadow: 0 6px 18px rgba(108,131,255,.25);
+      border: 1px solid rgba(255,255,255,.08);
+      flex: 0 0 auto;
+    }
     .brand-title { font-weight: 700; letter-spacing: -.03em; font-size: 15px; }
     .brand-sub { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-left: 2px; }
     .top-actions { display: flex; align-items: center; gap: var(--space-1); position: relative; }
     .top-btn {
-      border: 1px solid var(--border2); background: rgba(255,255,255,.03); color: var(--muted);
-      border-radius: var(--radius-md); padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer;
-      transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out);
-      display: flex; align-items: center; gap: 5px; position: relative;
+      border: 1px solid var(--border2);
+      background: rgba(255,255,255,.03);
+      color: var(--muted);
+      border-radius: var(--radius-md);
+      padding: 6px 12px;
+      font: inherit; font-size: 12px;
+      cursor: pointer;
+      transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out);
+      display: flex; align-items: center; gap: 5px;
+      position: relative;
+    }
+    .top-btn:hover {
+      border-color: rgba(108,131,255,.35);
+      color: var(--text);
+      background: rgba(108,131,255,.06);
     }
-    .top-btn:hover { border-color: rgba(108,131,255,.35); color: var(--text); background: rgba(108,131,255,.06); }
     .top-btn svg { width: 14px; height: 14px; }
+    /* Tooltip */
     .top-btn[aria-label]::after {
-      content: attr(aria-label); position: absolute; top: calc(100% + 6px); right: 0;
-      background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--radius-sm);
-      padding: 4px 8px; font-size: 11px; color: var(--text); white-space: nowrap;
-      opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease-out); z-index: 50;
+      content: attr(aria-label);
+      position: absolute;
+      top: calc(100% + 6px);
+      right: 0;
+      background: var(--panel2);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-sm);
+      padding: 4px 8px;
+      font-size: 11px;
+      color: var(--text);
+      white-space: nowrap;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 150ms var(--ease-out);
+      z-index: 50;
     }
     .top-btn[aria-label]:hover::after { opacity: 1; }
 
-    /* ── Statusbar ── */
+    /* ── Status bar ── */
     #statusbar {
-      height: 0; overflow: hidden; transition: height 220ms var(--ease-out), opacity 220ms var(--ease-out);
-      opacity: 0; border-bottom: 1px solid transparent; background: rgba(11,14,20,.6);
+      height: 0; overflow: hidden;
+      transition: height 220ms var(--ease-out), opacity 220ms var(--ease-out);
+      opacity: 0;
+      border-bottom: 1px solid transparent;
+      background: rgba(11,14,20,.6);
       display: flex; align-items: center; justify-content: center;
-      font-size: 12px; font-family: var(--mono); color: var(--muted); flex-shrink: 0;
+      font-size: 12px; font-family: var(--mono);
+      color: var(--muted); flex-shrink: 0;
     }
     #statusbar.visible { height: 32px; opacity: 1; border-bottom-color: var(--border); }
-    .status-dot {
-      width: 6px; height: 6px; border-radius: 50%; margin-right: var(--space-2); display: inline-block;
-      background: var(--accent); animation: pulse-dot 1.2s ease infinite;
+    #statusbar .status-dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      margin-right: var(--space-2); display: inline-block;
+      background: var(--accent);
+      animation: pulse-dot 1.2s ease infinite;
+    }
+    @keyframes pulse-dot {
+      0%, 100% { opacity: .4; transform: scale(.85); }
+      50% { opacity: 1; transform: scale(1.1); }
     }
-    @keyframes pulse-dot { 0%,100% { opacity:.4; transform:scale(.85); } 50% { opacity:1; transform:scale(1.1); } }
 
-    /* ── Scroll progress ── */
-    #scrollProgress { position: sticky; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg,var(--accent),var(--accent2)); transition: width 100ms ease; z-index: 10; pointer-events: none; }
+    /* ── Scroll Progress ── */
+    /*
+      Use fixed positioning so the progress bar is always pinned
+      to the viewport top. `position: sticky` can behave relative
+      to a scroll container or transformed ancestor, causing the
+      bar to appear in the wrong place.
+    */
+    #scrollProgress {
+      position: fixed !important;
+      top: 0; left: 0;
+      height: 3px; width: 0%;
+      background: linear-gradient(90deg, var(--accent), var(--accent2));
+      transition: width 100ms ease;
+      z-index: 9999;
+      pointer-events: none;
+      transform-origin: left center;
+    }
 
-    /* ── Chat ── */
+    /* ── Chat area ── */
     #chat {
-      flex: 1; min-height: 0; overflow-y: auto; padding: 20px 14px 24px; scroll-behavior: auto;
-      overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; overflow-anchor: auto;
-      scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
+      flex: 1; min-height: 0; overflow-y: auto;
+      padding: 20px 14px 24px;
+      scroll-behavior: auto;
+      overscroll-behavior-y: contain;
+      -webkit-overflow-scrolling: touch;
+      overflow-anchor: auto;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255,255,255,.1) transparent;
     }
     #chat::-webkit-scrollbar { width: 5px; }
     #chat::-webkit-scrollbar-track { background: transparent; }
@@ -134,436 +254,959 @@
     .wrap { max-width: 760px; margin: 0 auto; }
 
     /* ── Welcome ── */
-    .welcome { margin: 6vh auto 0; max-width: 480px; text-align: center; padding: var(--space-6) 20px;
-      border: 1px solid var(--border); border-radius: var(--radius-xl); background: rgba(255,255,255,.025);
-      box-shadow: var(--shadow); animation: fadeUp 400ms var(--ease-out) both; }
+    .welcome {
+      margin: 6vh auto 0; max-width: 480px; text-align: center;
+      padding: var(--space-6) 20px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xl);
+      background: rgba(255,255,255,.025);
+      box-shadow: var(--shadow);
+      animation: fadeUp 400ms var(--ease-out) both;
+    }
     @media (max-height: 500px) { .welcome { margin-top: 1vh; padding: var(--space-3); } }
     .welcome h1 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
     .welcome p { color: var(--muted); line-height: 1.6; margin-top: var(--space-2); font-size: 13px; }
-    .welcome-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
+    .welcome-suggestions {
+      display: flex; flex-wrap: wrap; gap: var(--space-2);
+      justify-content: center; margin-top: var(--space-4);
+    }
     .suggestion-chip {
-      border: 1px solid var(--border2); background: rgba(255,255,255,.03); border-radius: var(--radius-pill);
-      padding: 6px 14px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
-      transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out); text-align: left;
+      border: 1px solid var(--border2);
+      background: rgba(255,255,255,.03);
+      border-radius: var(--radius-pill);
+      padding: 6px 14px;
+      font: inherit; font-size: 12px;
+      color: var(--muted);
+      cursor: pointer;
+      transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
+      text-align: left;
+    }
+    .suggestion-chip:hover {
+      border-color: rgba(108,131,255,.35);
+      color: var(--text);
+      background: rgba(108,131,255,.05);
+    }
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to { opacity: 1; transform: translateY(0); }
     }
-    .suggestion-chip:hover { border-color: rgba(108,131,255,.35); color: var(--text); background: rgba(108,131,255,.05); }
-    @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
 
     /* ── Skeleton ── */
-    .skeleton { background: linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 100%); background-size: 200% 100%; animation: skel 1.5s ease infinite; border-radius: var(--radius-md); }
-    @keyframes skel { from { background-position:200% 0; } to { background-position:-200% 0; } }
     .skeleton-wrap { padding: 20px 0; }
+    .skeleton {
+      background: linear-gradient(90deg,
+        rgba(255,255,255,.03) 0%,
+        rgba(255,255,255,.07) 50%,
+        rgba(255,255,255,.03) 100%);
+      background-size: 200% 100%;
+      animation: skeleton-shimmer 1.5s ease infinite;
+      border-radius: var(--radius-md);
+    }
+    @keyframes skeleton-shimmer {
+      from { background-position: 200% 0; }
+      to { background-position: -200% 0; }
+    }
     .skeleton-line { height: 14px; margin-bottom: 8px; }
-    .skeleton-line.short { width: 40%; } .skeleton-line.medium { width: 70%; } .skeleton-line.long { width: 95%; }
-    .skeleton-bubble { height: 80px; border-radius: var(--radius-lg); margin-bottom: 12px; }
+    .skeleton-line.short { width: 40%; }
+    .skeleton-line.medium { width: 70%; }
+    .skeleton-line.long { width: 95%; }
+    .skeleton-bubble {
+      height: 80px; border-radius: var(--radius-lg);
+      margin-bottom: 12px;
+    }
 
     /* ── Turns ── */
-    .turn { display: flex; gap: 10px; margin-bottom: var(--turn-gap); align-items: flex-start; }
+    .turn {
+      display: flex; gap: 10px; margin-bottom: var(--turn-gap);
+      align-items: flex-start;
+    }
     .turn.new-turn { animation: fadeUp 280ms var(--ease-out) both; }
     .turn.user { justify-content: flex-end; }
-    .avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
-      font-size: 12px; flex: 0 0 auto; transition: transform 200ms var(--ease-spring); }
+    .avatar {
+      width: 28px; height: 28px; border-radius: 50%;
+      display: grid; place-items: center;
+      font-size: 12px; flex: 0 0 auto;
+      transition: transform 200ms var(--ease-spring);
+    }
     .avatar:hover { transform: scale(1.1); }
-    .avatar.user { background: linear-gradient(135deg,#1f2b63,#2d1d58); border: 1px solid rgba(108,131,255,.2); }
-    .avatar.assistant { background: linear-gradient(135deg,#163d34,#183c54); border: 1px solid rgba(45,212,191,.2); }
+    .avatar.user {
+      background: linear-gradient(135deg, #1f2b63, #2d1d58);
+      border: 1px solid rgba(108,131,255,.2);
+    }
+    .avatar.assistant {
+      background: linear-gradient(135deg, #163d34, #183c54);
+      border: 1px solid rgba(45,212,191,.2);
+    }
     .bubble {
-      max-width: min(620px, calc(100vw - 100px)); border: 1px solid var(--border); border-radius: var(--radius-lg);
-      padding: var(--bubble-padding); line-height: 1.6; font-size: var(--font-size-base);
-      white-space: pre-wrap; word-break: break-word; background: rgba(255,255,255,.03);
-    }
-    .turn.assistant .bubble { border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
-    .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: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
-    .turn-meta { margin-top: var(--space-1); font-size: 10px; color: var(--muted); font-family: var(--mono);
-      display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
-    .chip { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 7px;
-      font-size: 11px; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 3px; }
+      max-width: min(620px, calc(100vw - 100px));
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--bubble-padding);
+      line-height: 1.6; font-size: var(--font-size-base);
+      white-space: pre-wrap; word-break: break-word;
+      background: rgba(255,255,255,.03);
+    }
+    .turn.assistant .bubble {
+      border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg);
+    }
+    .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: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
+    }
+    .turn-meta {
+      margin-top: var(--space-1);
+      font-size: 10px; color: var(--muted);
+      font-family: var(--mono);
+      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
+    }
+    .chip {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-pill);
+      padding: 2px 7px;
+      font-size: 11px;
+      letter-spacing: .03em;
+      display: inline-flex; align-items: center; gap: 3px;
+    }
     .chip.good { color: var(--good); border-color: rgba(45,212,191,.25); }
     .chip.muted { color: var(--muted); }
     .chip.warn { color: var(--warn); border-color: rgba(251,191,36,.25); }
     .chip.matched { color: var(--accent); border-color: rgba(108,131,255,.25); }
 
     /* ── Best answer ── */
-    .best-answer-bubble { border: 1px solid rgba(45,212,191,.15); border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg);
-      padding: var(--bubble-padding); background: rgba(45,212,191,.04); line-height: 1.6; font-size: var(--font-size-base);
-      white-space: pre-wrap; word-break: break-word; outline: none; }
-
-    /* ── Thinking Block ── */
-    .thinking-block {
-      margin: 6px 0; border: 1px solid rgba(124,166,255,.15); border-radius: var(--radius-md);
-      background: rgba(124,166,255,.04); overflow: hidden;
-      transition: border-color 200ms var(--ease-out);
-    }
-    .thinking-block:hover { border-color: rgba(124,166,255,.25); }
-    .thinking-header {
-      display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
-      user-select: none; font-size: 12px; font-family: var(--mono); color: var(--muted);
-      transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
-    }
-    .thinking-header:hover { color: var(--text); background: rgba(124,166,255,.04); }
-    .thinking-icon {
-      width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
-      transition: transform 200ms var(--ease-out); flex-shrink: 0;
-    }
-    .thinking-icon svg { width: 12px; height: 12px; }
-    .thinking-block.open .thinking-icon { transform: rotate(90deg); }
-    .thinking-spinner {
-      width: 12px; height: 12px; border: 2px solid rgba(124,166,255,.2);
-      border-top-color: var(--accent); border-radius: 50%;
-      animation: spin .8s linear infinite; flex-shrink: 0;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-    .thinking-label { flex: 1; }
-    .thinking-timer { font-size: 10px; color: var(--muted); font-family: var(--mono); }
-    .thinking-body {
-      max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease-out), opacity 200ms var(--ease-out);
-      opacity: 0;
+    .best-answer-bubble {
+      border: 1px solid rgba(45,212,191,.15);
+      border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg);
+      padding: var(--bubble-padding);
+      background: rgba(45,212,191,.04);
+      line-height: 1.6; font-size: var(--font-size-base);
+      white-space: pre-wrap; word-break: break-word;
+      outline: none;
+    }
+    .best-answer-meta {
+      margin-top: var(--space-1);
+      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
     }
-    .thinking-block.open .thinking-body { max-height: 2000px; opacity: 1; }
-    .thinking-content {
-      padding: 0 12px 10px; font-size: 13px; line-height: 1.6; color: var(--muted);
-      border-top: 1px solid rgba(124,166,255,.1);
-    }
-    .thinking-content p { margin: 3px 0; white-space: normal; }
-
-    /* ── Markdown ── */
-    .bubble p,.best-answer-bubble p,.other-answer-text p,.version-text p,.thinking-content p { margin: 3px 0; white-space: normal; }
-    .bubble h1,.bubble h2,.bubble h3,.bubble h4,.bubble h5,.bubble h6,
-    .best-answer-bubble h1,.best-answer-bubble h2,.best-answer-bubble h3,.best-answer-bubble h4,.best-answer-bubble h5,.best-answer-bubble h6,
-    .other-answer-text h1,.other-answer-text h2,.other-answer-text h3,
-    .version-text h1,.version-text h2,.version-text h3,
-    .thinking-content h1,.thinking-content h2,.thinking-content h3 { line-height: 1.3; margin: 8px 0 3px; white-space: normal; }
-    .bubble h1,.best-answer-bubble h1 { font-size: 1.35em; font-weight: 800; }
-    .bubble h2,.best-answer-bubble h2 { font-size: 1.2em; font-weight: 700; }
-    .bubble h3,.best-answer-bubble h3 { font-size: 1.05em; font-weight: 700; color: var(--accent); }
-    .bubble h4,.best-answer-bubble h4 { font-size: .95em; font-weight: 700; }
-    .bubble h5,.best-answer-bubble h5,.bubble h6,.best-answer-bubble h6 { font-size: .88em; font-weight: 700; }
-    .bubble ul,.bubble ol,.best-answer-bubble ul,.best-answer-bubble ol,
-    .other-answer-text ul,.other-answer-text ol,.version-text ul,.version-text ol,
-    .thinking-content ul,.thinking-content ol { margin: 3px 0 3px 18px; padding: 0; white-space: normal; }
-    .bubble li,.best-answer-bubble li,.other-answer-text li,.version-text li,.thinking-content li { margin: 1px 0; white-space: normal; }
+
+    /* ── Markdown Elements ── */
+    .bubble p, .best-answer-bubble p, .other-answer-text p { margin: 3px 0; white-space: normal; }
+
+    .bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6,
+    .best-answer-bubble h1, .best-answer-bubble h2, .best-answer-bubble h3,
+    .best-answer-bubble h4, .best-answer-bubble h5, .best-answer-bubble h6,
+    .other-answer-text h1, .other-answer-text h2, .other-answer-text h3 {
+      line-height: 1.3; margin: 8px 0 3px; white-space: normal;
+    }
+    .bubble h1, .best-answer-bubble h1 { font-size: 1.35em; font-weight: 800; }
+    .bubble h2, .best-answer-bubble h2 { font-size: 1.2em;  font-weight: 700; }
+    .bubble h3, .best-answer-bubble h3 { font-size: 1.05em; font-weight: 700; color: var(--accent); }
+    .bubble h4, .best-answer-bubble h4 { font-size: .95em;  font-weight: 700; }
+    .bubble h5, .best-answer-bubble h5,
+    .bubble h6, .best-answer-bubble h6  { font-size: .88em;  font-weight: 700; }
+
+    .bubble ul, .bubble ol, .best-answer-bubble ul, .best-answer-bubble ol,
+    .other-answer-text ul, .other-answer-text ol {
+      margin: 3px 0 3px 18px; padding: 0; white-space: normal;
+    }
+    .bubble li, .best-answer-bubble li, .other-answer-text li { margin: 1px 0; white-space: normal; }
+
+    /* Task lists */
     .task-item { list-style: none; margin-left: -18px; }
-    .task-item input[type="checkbox"] { accent-color: var(--accent2); margin-right: 6px; pointer-events: none; }
-    .bubble code,.best-answer-bubble code,.other-answer-text code,.version-text code,.thinking-content code {
-      font-family: var(--mono); font-size: .87em; background: rgba(255,255,255,.08);
-      border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xs); padding: 1px 5px; }
-    .code-block-wrapper { position: relative; margin: 6px 0; }
-    .bubble pre,.best-answer-bubble pre,.other-answer-text pre,.version-text pre,.thinking-content pre {
-      background: rgba(0,0,0,.38); border: 1px solid var(--border); border-radius: var(--radius-sm);
-      padding: 10px 12px; overflow-x: auto; white-space: pre; font-family: var(--mono);
-      font-size: .84em; line-height: 1.5; margin: 0; }
-    .bubble pre code,.best-answer-bubble pre code,.other-answer-text pre code,.version-text pre code,
-    .thinking-content pre code { background: none; border: none; padding: 0; font-size: inherit; }
-    .code-lang-label { position: absolute; top: 0; right: 32px; background: rgba(255,255,255,.06);
-      border-radius: 0 0 var(--radius-xs) var(--radius-xs); padding: 2px 8px; font-size: 10px;
-      color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; pointer-events: none; }
-    .copy-code-btn { position: absolute; top: 6px; right: 6px; border: 1px solid var(--border2);
-      background: rgba(0,0,0,.3); color: var(--muted); border-radius: var(--radius-xs); padding: 2px 7px;
-      font: inherit; font-size: 10px; font-family: var(--mono); cursor: pointer; opacity: 0;
-      transition: opacity 150ms var(--ease-out), color 150ms var(--ease-out); }
+    .task-item input[type="checkbox"] {
+      accent-color: var(--accent2);
+      margin-right: 6px;
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .bubble code, .best-answer-bubble code, .other-answer-text code {
+      font-family: var(--mono); font-size: .87em;
+      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
+      border-radius: var(--radius-xs); padding: 1px 5px;
+    }
+
+    /* Code block wrapper */
+    .code-block-wrapper {
+      position: relative; margin: 6px 0;
+    }
+    .bubble pre, .best-answer-bubble pre, .other-answer-text pre {
+      background: rgba(0,0,0,.38); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 10px 12px;
+      overflow-x: auto; white-space: pre;
+      font-family: var(--mono); font-size: .84em; line-height: 1.5;
+      margin: 0;
+    }
+    .bubble pre code, .best-answer-bubble pre code, .other-answer-text pre code {
+      background: none; border: none; padding: 0; font-size: inherit;
+    }
+    .code-lang-label {
+      position: absolute; top: 5px; left: 6px;
+      background: rgba(255,255,255,.06);
+      border-radius: 0 0 var(--radius-xs) var(--radius-xs);
+      padding: 2px 8px;
+      font-size: 10px; color: var(--muted);
+      font-family: var(--mono);
+      text-transform: uppercase; letter-spacing: .05em;
+      pointer-events: none;
+    }
+    .copy-code-btn {
+      position: absolute; top: 6px; right: 6px;
+      border: 1px solid var(--border2);
+      background: rgba(0,0,0,.3);
+      color: var(--muted);
+      border-radius: var(--radius-xs);
+      padding: 2px 7px;
+      font: inherit; font-size: 10px; font-family: var(--mono);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
+    }
     .code-block-wrapper:hover .copy-code-btn { opacity: 1; }
     .copy-code-btn:hover { color: var(--text); border-color: rgba(108,131,255,.4); }
     .copy-code-btn.copied { color: var(--good); border-color: rgba(45,212,191,.4); opacity: 1; }
-    .tok-kw { color: #c792ea; } .tok-str { color: #c3e88d; } .tok-num { color: #f78c6c; }
-    .tok-cmt { color: #546e7a; font-style: italic; } .tok-fn { color: #82aaff; } .tok-op { color: #89ddff; }
-    .bubble blockquote,.best-answer-bubble blockquote,.other-answer-text blockquote,.version-text blockquote,
-    .thinking-content blockquote { border-left: 3px solid var(--accent); background: rgba(124,166,255,.04);
-      border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 6px 0; padding: 6px 12px;
-      color: var(--muted); white-space: normal; font-style: italic; }
-    .bubble hr,.best-answer-bubble hr { border: none; border-top: 1px solid var(--border2); margin: 8px 0; }
-    .bubble a,.best-answer-bubble a,.other-answer-text a,.version-text a,.thinking-content a {
-      color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
-    .bubble a[href^="http"]::after,.best-answer-bubble a[href^="http"]::after { content: " ↗"; font-size: .75em; opacity: .5; }
-    .bubble table,.best-answer-bubble table,.other-answer-text table,.version-text table {
-      border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; white-space: normal; }
-    .bubble th,.bubble td,.best-answer-bubble th,.best-answer-bubble td,
-    .other-answer-text th,.other-answer-text td,.version-text th,.version-text td {
-      border: 1px solid var(--border2); padding: 6px 10px; text-align: left; }
-    .bubble th,.best-answer-bubble th { background: rgba(255,255,255,.05); font-weight: 600; }
+
+    .bubble blockquote, .best-answer-bubble blockquote,
+    .other-answer-text blockquote {
+      border-left: 3px solid var(--accent);
+      background: rgba(124,166,255,.04);
+      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+      margin: 6px 0; padding: 6px 12px;
+      color: var(--muted); white-space: normal;
+      font-style: italic;
+    }
+    .bubble hr, .best-answer-bubble hr { border: none; border-top: 1px solid var(--border2); margin: 8px 0; }
+    .bubble a, .best-answer-bubble a, .other-answer-text a {
+      color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
+    }
+    .bubble a[href^="http"]::after,
+    .best-answer-bubble a[href^="http"]::after {
+      content: " ↗"; font-size: .75em; opacity: .5;
+    }
+    .bubble table, .best-answer-bubble table, .other-answer-text table {
+      border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; white-space: normal;
+    }
+    .bubble th, .bubble td,
+    .best-answer-bubble th, .best-answer-bubble td,
+    .other-answer-text th, .other-answer-text td {
+      border: 1px solid var(--border2); padding: 6px 10px; text-align: left;
+    }
+    .bubble th, .best-answer-bubble th { background: rgba(255,255,255,.05); font-weight: 600; }
     sup { font-size: .75em; vertical-align: super; line-height: 0; }
     sub { font-size: .75em; vertical-align: sub; line-height: 0; }
-    .md-img { display: block; max-width: 100%; min-width: 60px; max-height: 480px; width: auto; height: auto;
-      border-radius: var(--radius-md); border: 1px solid var(--border); margin: 6px 0; object-fit: contain;
-      cursor: zoom-in; transition: opacity 150ms ease; }
+    .md-img {
+      display: block; max-width: 100%; min-width: 60px; max-height: 480px;
+      width: auto; height: auto;
+      border-radius: var(--radius-md); border: 1px solid var(--border);
+      margin: 6px 0; object-fit: contain;
+      cursor: zoom-in; transition: opacity 150ms ease;
+    }
     .md-img:hover { opacity: .9; }
     p.md-gap { min-height: 0.35em; margin: 0 !important; padding: 0; }
+
+    /* Quality dots */
     .quality-dots { display: inline-flex; gap: 2px; align-items: center; margin-left: 4px; }
     .quality-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border2); }
     .quality-dot.filled { background: var(--accent2); }
 
     /* ── Vote ── */
     .vote-row { display: flex; gap: var(--space-1); align-items: center; margin-top: 6px; flex-wrap: wrap; }
-    .vote-btn { border: 1px solid var(--border2); background: rgba(255,255,255,.02); color: var(--muted);
-      border-radius: var(--radius-sm); padding: 4px 9px; font: inherit; font-size: 11px; cursor: pointer;
+    .vote-btn {
+      border: 1px solid var(--border2);
+      background: rgba(255,255,255,.02);
+      color: var(--muted);
+      border-radius: var(--radius-sm);
+      padding: 4px 9px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
       transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-spring);
-      display: inline-flex; align-items: center; gap: 3px; position: relative; overflow: hidden; }
-    .vote-btn:hover { border-color: rgba(108,131,255,.35); color: var(--text); background: rgba(108,131,255,.07); }
-    .vote-btn.voted-up { border-color: rgba(45,212,191,.5); color: var(--good); background: rgba(45,212,191,.08); }
-    .vote-btn.voted-down { border-color: rgba(248,113,113,.5); color: var(--bad); background: rgba(248,113,113,.08); }
+      display: inline-flex; align-items: center; gap: 3px;
+      position: relative; overflow: hidden;
+    }
+    .vote-btn:hover {
+      border-color: rgba(108,131,255,.35);
+      color: var(--text); background: rgba(108,131,255,.07);
+    }
+    .vote-btn.voted-up {
+      border-color: rgba(45,212,191,.5); color: var(--good);
+      background: rgba(45,212,191,.08);
+    }
+    .vote-btn.voted-down {
+      border-color: rgba(248,113,113,.5); color: var(--bad);
+      background: rgba(248,113,113,.08);
+    }
     .vote-btn:active { transform: scale(.92); }
-    .vote-count { display: inline-block; overflow: hidden; height: 1.2em; position: relative; }
-    .vote-count-inner { display: block; transition: transform 300ms var(--ease-spring); }
-    .action-btn { border: 1px solid var(--border2); background: rgba(255,255,255,.02); color: var(--muted);
-      border-radius: var(--radius-sm); padding: 4px 9px; font: inherit; font-size: 11px; cursor: pointer;
+    .vote-count {
+      display: inline-block; overflow: hidden;
+      height: 1.2em; position: relative;
+    }
+    .vote-count-inner {
+      display: block;
+      transition: transform 300ms var(--ease-spring);
+    }
+
+    .action-btn {
+      border: 1px solid var(--border2);
+      background: rgba(255,255,255,.02);
+      color: var(--muted);
+      border-radius: var(--radius-sm);
+      padding: 4px 9px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
       transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
-      display: inline-flex; align-items: center; gap: 4px; }
+      display: inline-flex; align-items: center; gap: 4px;
+    }
     .action-btn:hover { border-color: rgba(108,131,255,.35); color: var(--text); background: rgba(108,131,255,.05); }
 
-    /* ── Write answer ── */
-    .write-answer-btn { border: 1px solid rgba(45,212,191,.3); background: rgba(45,212,191,.08); color: var(--good);
-      border-radius: var(--radius-md); padding: var(--space-2) 14px; font: inherit; font-size: 12px; font-weight: 600;
-      cursor: pointer; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); display: inline-flex;
-      align-items: center; gap: 6px; margin-top: var(--space-2); }
+    /* ── Write answer inline panel ── */
+    .write-answer-btn {
+      border: 1px solid rgba(45,212,191,.3);
+      background: rgba(45,212,191,.08);
+      color: var(--good);
+      border-radius: var(--radius-md);
+      padding: var(--space-2) 14px;
+      font: inherit; font-size: 12px; font-weight: 600;
+      cursor: pointer;
+      transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-spring);
+      display: inline-flex; align-items: center; gap: 6px;
+      margin-top: var(--space-2);
+    }
     .write-answer-btn:hover { background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.5); }
     .write-answer-btn svg { width: 14px; height: 14px; }
-    .write-panel { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease-out), opacity 250ms var(--ease-out), margin 200ms var(--ease-out); opacity: 0; margin-top: 0; }
+    .write-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 300ms var(--ease-out), opacity 250ms var(--ease-out), margin 200ms var(--ease-out);
+      opacity: 0; margin-top: 0;
+    }
     .write-panel.open { max-height: 400px; opacity: 1; margin-top: 10px; }
-    .write-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
-    .write-tab { border: 1px solid var(--border); border-bottom: none; background: transparent; color: var(--muted);
-      border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 4px 12px; font: inherit; font-size: 11px;
-      cursor: pointer; transition: color 150ms, background 150ms, border-color 150ms; }
+
+    /* Write tabs */
+    .write-tabs {
+      display: flex; gap: 2px; margin-bottom: 6px;
+    }
+    .write-tab {
+      border: 1px solid var(--border); border-bottom: none;
+      background: transparent; color: var(--muted);
+      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+      padding: 4px 12px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
+      transition: color 150ms, background 150ms, border-color 150ms;
+    }
     .write-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(108,131,255,.08); }
-    .write-textarea { width: 100%; min-height: 80px; max-height: 160px; resize: vertical;
+
+    .write-textarea {
+      width: 100%; min-height: 80px; max-height: 160px; resize: vertical;
       border: 1px solid var(--border2); border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
-      background: var(--panel); color: var(--text); font: inherit; font-size: 13px; line-height: 1.55;
-      padding: 10px 12px; outline: none; transition: border-color 200ms var(--ease-out), height 100ms var(--ease-out); }
+      background: var(--panel); color: var(--text);
+      font: inherit; font-size: 13px; line-height: 1.55;
+      padding: 10px 12px; outline: none;
+      transition: border-color 200ms var(--ease-out), height 100ms var(--ease-out);
+    }
     .write-textarea:focus { border-color: rgba(45,212,191,.4); box-shadow: 0 0 0 3px rgba(45,212,191,.07); }
     .write-textarea::placeholder { color: #5a6178; }
-    .write-preview { min-height: 80px; max-height: 160px; overflow-y: auto; border: 1px solid var(--border2);
-      border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); background: var(--panel);
-      padding: 10px 12px; font-size: 13px; line-height: 1.6; display: none; }
+    .write-preview {
+      min-height: 80px; max-height: 160px; overflow-y: auto;
+      border: 1px solid var(--border2); border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
+      background: var(--panel);
+      padding: 10px 12px;
+      font-size: 13px; line-height: 1.6;
+      display: none;
+    }
     .write-preview.active { display: block; }
-    .char-count { font-size: 10px; font-family: var(--mono); color: var(--muted); text-align: right; margin-top: 2px; }
+    .char-count {
+      font-size: 10px; font-family: var(--mono);
+      color: var(--muted); text-align: right; margin-top: 2px;
+    }
     .char-count.near-limit { color: var(--warn); }
     .char-count.over-limit { color: var(--bad); }
     .write-actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
-    .write-submit { border: 1px solid rgba(45,212,191,.4); background: rgba(45,212,191,.12); color: var(--good);
-      border-radius: var(--radius-sm); padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 600;
-      cursor: pointer; transition: border-color 160ms, background 160ms; }
+    .write-submit {
+      border: 1px solid rgba(45,212,191,.4);
+      background: rgba(45,212,191,.12);
+      color: var(--good);
+      border-radius: var(--radius-sm);
+      padding: 6px 14px;
+      font: inherit; font-size: 12px; font-weight: 600;
+      cursor: pointer;
+      transition: border-color 160ms, color 160ms, background 160ms;
+    }
     .write-submit:hover { background: rgba(45,212,191,.2); border-color: rgba(45,212,191,.6); }
     .write-submit:disabled { opacity: .4; cursor: not-allowed; }
-    .write-cancel { border: 1px solid var(--border); background: transparent; color: var(--muted);
-      border-radius: var(--radius-sm); padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
-
-    /* ── Other answers / versions / propose ── */
-    .other-answers-toggle,.related-toggle {
-      margin-top: var(--space-2); border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--muted);
-      border-radius: var(--radius-md); padding: 6px 12px; font: inherit; font-size: 11px; cursor: pointer;
-      transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
-      display: inline-flex; align-items: center; gap: 5px; }
-    .other-answers-toggle:hover,.related-toggle:hover { border-color: rgba(108,131,255,.3); color: var(--text); }
-    .other-answers-toggle .arrow,.related-toggle .arrow { display: inline-block; transition: transform 200ms var(--ease-out); font-size: 10px; }
-    .other-answers-toggle.open .arrow,.related-toggle.open .arrow { transform: rotate(90deg); }
-    .other-answers-panel,.related-panel { max-height: 0; overflow: hidden;
-      transition: max-height 300ms var(--ease-out), opacity 200ms var(--ease-out); opacity: 0; margin-top: var(--space-1); }
-    .other-answers-panel.open,.related-panel.open { max-height: 3000px; opacity: 1; }
-    .other-answer-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px;
-      margin-top: 6px; background: rgba(255,255,255,.02); position: relative; }
-    .other-answer-card.related { background: linear-gradient(180deg,rgba(108,131,255,.05),rgba(255,255,255,.02));
-      border-color: rgba(108,131,255,.16); opacity: .9; }
-    .other-answer-card.related::after { content: "From similar question"; position: absolute; top: 8px; right: 10px;
-      font-size: 9px; color: var(--accent); font-family: var(--mono); pointer-events: none; }
-    .other-answer-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--muted);
-      font-family: var(--mono); font-size: 10px; margin-bottom: 6px; }
+    .write-cancel {
+      border: 1px solid var(--border); background: transparent; color: var(--muted);
+      border-radius: var(--radius-sm); padding: 6px 12px;
+      font: inherit; font-size: 12px; cursor: pointer;
+      transition: border-color 160ms, color 160ms;
+    }
+    .write-cancel:hover { border-color: var(--border2); color: var(--text); }
+
+    /* ── Other answers ── */
+    .other-answers-toggle {
+      margin-top: var(--space-2);
+      border: 1px solid var(--border); background: rgba(255,255,255,.02);
+      color: var(--muted); border-radius: var(--radius-md);
+      padding: 6px 12px; font: inherit; font-size: 11px;
+      cursor: pointer;
+      transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out);
+      display: inline-flex; align-items: center; gap: 5px;
+    }
+    .other-answers-toggle:hover { border-color: rgba(108,131,255,.3); color: var(--text); }
+    .other-answers-toggle .arrow { display: inline-block; transition: transform 200ms var(--ease-out); font-size: 10px; }
+    .other-answers-toggle.open .arrow { transform: rotate(90deg); }
+    .other-answers-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 300ms var(--ease-out), opacity 200ms var(--ease-out);
+      opacity: 0; margin-top: var(--space-1);
+    }
+    .other-answers-panel.open { max-height: 3000px; opacity: 1; }
+    .other-answer-card {
+      border: 1px solid var(--border); border-radius: var(--radius-md);
+      padding: 10px 12px; margin-top: 6px;
+      background: rgba(255,255,255,.02);
+      animation: fadeUp 200ms var(--ease-out) both;
+      position: relative;
+    }
+    .other-answer-card.related {
+      background: linear-gradient(180deg, rgba(108,131,255,.05), rgba(255,255,255,.02));
+      border-color: rgba(108,131,255,.16);
+    }
+    .other-answer-head {
+      display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
+      color: var(--muted); font-family: var(--mono); font-size: 10px; margin-bottom: 6px;
+    }
     .other-answer-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
-    .versions-toggle { margin-top: var(--space-1); color: var(--muted); font-size: 10px; cursor: pointer; font-family: var(--mono);
-      display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 0; transition: color 150ms var(--ease-out); }
+
+    /* ── Preview lines (similar questions + versions) ── */
+    .preview-block {
+      display: flex; gap: 8px; align-items: flex-start;
+      margin-top: 6px;
+    }
+    .preview-label {
+      flex: 0 0 auto;
+      font-family: var(--mono); font-size: 9px;
+      color: var(--muted);
+      background: rgba(255,255,255,.04);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xs);
+      padding: 2px 6px; line-height: 1.3;
+      letter-spacing: .06em;
+    }
+    .preview-text {
+      flex: 1; min-width: 0;
+      font-size: 12.5px; line-height: 1.5;
+      color: var(--text);
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      white-space: normal; word-break: break-word;
+    }
+    .preview-text.muted-preview { color: var(--muted); }
+    .preview-actions {
+      display: flex; align-items: center; gap: 6px;
+      margin-top: 8px; flex-wrap: wrap;
+    }
+    .preview-actions .vote-row { margin-top: 0; }
+
+    /* Ask button */
+    .ask-btn {
+      border: 1px solid rgba(108,131,255,.35);
+      background: rgba(108,131,255,.1);
+      color: var(--accent);
+      border-radius: var(--radius-sm);
+      padding: 4px 11px;
+      font: inherit; font-size: 11px; font-weight: 600;
+      cursor: pointer;
+      transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-spring);
+      display: inline-flex; align-items: center; gap: 4px;
+    }
+    .ask-btn:hover { background: rgba(108,131,255,.2); border-color: rgba(108,131,255,.55); }
+    .ask-btn:active { transform: scale(.95); }
+    .ask-btn svg { width: 11px; height: 11px; }
+
+    /* ── Versions ── */
+    .versions-toggle {
+      margin-top: var(--space-1); color: var(--muted); font-size: 10px;
+      cursor: pointer; font-family: var(--mono);
+      display: inline-flex; align-items: center; gap: 4px;
+      border: none; background: none; padding: 0;
+      transition: color 150ms var(--ease-out);
+    }
     .versions-toggle:hover { color: var(--text); }
-    .versions-panel { max-height: 0; overflow: hidden; transition: max-height 280ms var(--ease-out), opacity 180ms var(--ease-out);
-      opacity: 0; border-left: 2px solid var(--border2); padding-left: 10px; margin-top: var(--space-1); }
+    .versions-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 280ms var(--ease-out), opacity 180ms var(--ease-out);
+      opacity: 0; border-left: 2px solid var(--border2);
+      padding-left: 10px; margin-top: var(--space-1);
+    }
     .versions-panel.open { max-height: 1500px; opacity: 1; }
-    .version-card { border: 1px solid var(--border); background: rgba(255,255,255,.02); border-radius: var(--radius-md);
-      padding: 8px 10px; margin-top: var(--space-1); }
-    .version-head { font-size: 10px; color: var(--muted); font-family: var(--mono); display: flex; gap: 5px;
-      flex-wrap: wrap; align-items: center; margin-bottom: var(--space-1); }
-    .version-text { font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
-    .propose-panel { max-height: 0; overflow: hidden; transition: max-height 280ms var(--ease-out), opacity 200ms var(--ease-out);
-      opacity: 0; margin-top: 6px; }
+    .version-card {
+      border: 1px solid var(--border); background: rgba(255,255,255,.02);
+      border-radius: var(--radius-md); padding: 8px 10px; margin-top: var(--space-1);
+      animation: fadeUp 180ms var(--ease-out) both;
+    }
+    .version-head {
+      font-size: 10px; color: var(--muted); font-family: var(--mono);
+      display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-1);
+    }
+
+    /* ── Propose version ── */
+    .propose-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 280ms var(--ease-out), opacity 200ms var(--ease-out);
+      opacity: 0; margin-top: 6px;
+    }
     .propose-panel.open { max-height: 400px; opacity: 1; }
-    .propose-textarea { width: 100%; min-height: 60px; max-height: 140px; resize: vertical; border: 1px solid var(--border2);
-      border-radius: var(--radius-md); background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
-      line-height: 1.55; padding: 8px 10px; outline: none; transition: border-color 200ms var(--ease-out); }
+    .propose-textarea {
+      width: 100%; min-height: 60px; max-height: 140px; resize: vertical;
+      border: 1px solid var(--border2); border-radius: var(--radius-md);
+      background: var(--panel); color: var(--text);
+      font: inherit; font-size: 13px; line-height: 1.55;
+      padding: 8px 10px; outline: none;
+      transition: border-color 200ms var(--ease-out), height 100ms var(--ease-out);
+    }
     .propose-textarea:focus { border-color: rgba(108,131,255,.4); box-shadow: 0 0 0 3px rgba(108,131,255,.07); }
     .propose-textarea::placeholder { color: #5a6178; }
     .propose-actions { display: flex; gap: 6px; margin-top: 6px; }
-    .propose-submit { border: 1px solid rgba(108,131,255,.3); background: rgba(108,131,255,.1); color: var(--accent);
-      border-radius: var(--radius-sm); padding: 5px 12px; font: inherit; font-size: 11px; cursor: pointer; }
+    .propose-submit {
+      border: 1px solid rgba(108,131,255,.3); background: rgba(108,131,255,.1);
+      color: var(--accent); border-radius: var(--radius-sm);
+      padding: 5px 12px; font: inherit; font-size: 11px;
+      cursor: pointer; transition: border-color 160ms, color 160ms, background 160ms;
+    }
     .propose-submit:hover { background: rgba(108,131,255,.18); border-color: rgba(108,131,255,.5); }
     .propose-submit:disabled { opacity: .5; cursor: not-allowed; }
-    .propose-cancel { border: 1px solid var(--border); background: transparent; color: var(--muted);
-      border-radius: var(--radius-sm); padding: 5px 10px; font: inherit; font-size: 11px; cursor: pointer; }
-    .related-stack { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
-    .related-stack .chip { margin-bottom: 6px; }
-    .related-score { color: var(--accent); border-color: rgba(108,131,255,.22); }
-    .related-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 6px; }
+    .propose-cancel {
+      border: 1px solid var(--border); background: transparent; color: var(--muted);
+      border-radius: var(--radius-sm); padding: 5px 10px;
+      font: inherit; font-size: 11px; cursor: pointer;
+    }
 
     /* ── Typing indicator ── */
-    .typing-indicator { display: flex; gap: 10px; margin-bottom: 6px; align-items: flex-start; animation: fadeUp 250ms var(--ease-out) both; }
-    .typing-dots { display: flex; gap: 4px; align-items: center; padding: 12px 16px; border: 1px solid var(--border);
-      border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg); background: rgba(255,255,255,.03); }
-    .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typingBounce 1.1s ease infinite; }
+    .typing-indicator {
+      display: flex; gap: 10px; margin-bottom: 6px;
+      align-items: flex-start; animation: fadeUp 250ms var(--ease-out) both;
+    }
+    .typing-dots {
+      display: flex; gap: 4px; align-items: center;
+      padding: 12px 16px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg);
+      background: rgba(255,255,255,.03);
+    }
+    .typing-dots span {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--muted);
+      animation: typingBounce 1.1s ease infinite;
+    }
     .typing-dots span:nth-child(2) { animation-delay: .15s; }
     .typing-dots span:nth-child(3) { animation-delay: .3s; }
-    @keyframes typingBounce { 0%,60%,100% { transform:translateY(0); opacity:.35; } 30% { transform:translateY(-5px); opacity:1; } }
+    @keyframes typingBounce {
+      0%, 60%, 100% { transform: translateY(0); opacity: .35; }
+      30% { transform: translateY(-5px); opacity: 1; }
+    }
 
     /* ── Answer reveal ── */
-    .answer-reveal { opacity: 0; transform: translateY(4px); filter: blur(1px);
-      transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out); }
+    .answer-reveal {
+      opacity: 0; transform: translateY(4px); filter: blur(1px);
+      transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out);
+    }
     .answer-reveal.revealed { opacity: 1; transform: translateY(0); filter: blur(0); }
-    @keyframes glow-in { 0%{box-shadow:0 0 0 rgba(45,212,191,0)} 40%{box-shadow:0 0 18px rgba(45,212,191,.3)} 100%{box-shadow:none} }
+
+    /* ── Answer new glow ── */
+    @keyframes glow-in {
+      0%   { box-shadow: 0 0 0 rgba(45,212,191,0); }
+      40%  { box-shadow: 0 0 18px rgba(45,212,191,.3); }
+      100% { box-shadow: none; }
+    }
     .answer-new-glow { animation: glow-in 700ms var(--ease-out) both; }
 
+    /* ── Related ── */
+    .related-stack {
+      margin-top: 14px; padding-top: 12px;
+      border-top: 1px solid rgba(255,255,255,.06);
+    }
+    .related-stack .chip { margin-bottom: 6px; }
+    .related-toggle {
+      margin-top: 2px; border: 1px solid var(--border);
+      background: rgba(255,255,255,.02); color: var(--muted);
+      border-radius: var(--radius-md); padding: 6px 12px;
+      font: inherit; font-size: 11px; cursor: pointer;
+      transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out);
+      display: inline-flex; align-items: center; gap: 5px;
+    }
+    .related-toggle:hover { border-color: rgba(108,131,255,.3); color: var(--text); }
+    .related-toggle .arrow { display: inline-block; transition: transform 200ms var(--ease-out); font-size: 10px; }
+    .related-toggle.open .arrow { transform: rotate(90deg); }
+    .related-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 280ms var(--ease-out), opacity 180ms var(--ease-out), margin-top 180ms var(--ease-out);
+      opacity: 0; margin-top: 0;
+    }
+    .related-panel.open { max-height: 3000px; opacity: 1; margin-top: 6px; }
+    .related-score { color: var(--accent); border-color: rgba(108,131,255,.22); }
+    .related-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 6px; }
+
     /* ── Composer ── */
-    .compose { border-top: 1px solid var(--border); background: rgba(11,14,20,.85);
-      backdrop-filter: blur(16px) saturate(160%); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); flex-shrink: 0; }
+    .compose {
+      border-top: 1px solid var(--border);
+      background: rgba(11,14,20,.85);
+      backdrop-filter: blur(16px) saturate(160%);
+      padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
+      flex-shrink: 0;
+    }
     @media (max-height: 500px) { .compose { padding: 6px 10px; } }
-    .compose-inner { max-width: 760px; margin: 0 auto; border: 1px solid var(--border2); border-radius: var(--radius-lg);
-      padding: 8px 10px 6px; background: var(--panel); box-shadow: var(--shadow-soft);
-      transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); position: relative; }
-    .compose-inner:focus-within { border-color: rgba(108,131,255,.4); box-shadow: 0 0 0 3px rgba(108,131,255,.12), var(--shadow-soft); }
-    .autocomplete-dropdown { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
-      background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--radius-md); z-index: 20;
-      overflow: hidden; box-shadow: var(--shadow); display: none; }
+    .compose-inner {
+      max-width: 760px; margin: 0 auto;
+      border: 1px solid var(--border2); border-radius: var(--radius-lg);
+      padding: 8px 10px 6px;
+      background: var(--panel); box-shadow: var(--shadow-soft);
+      transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
+      position: relative;
+    }
+    .compose-inner:focus-within {
+      border-color: rgba(108,131,255,.4);
+      box-shadow: 0 0 0 3px rgba(108,131,255,.12), var(--shadow-soft);
+    }
+    /* Autocomplete */
+    .autocomplete-dropdown {
+      position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
+      background: var(--panel2); border: 1px solid var(--border2);
+      border-radius: var(--radius-md); z-index: 20;
+      overflow: hidden; box-shadow: var(--shadow);
+      display: none;
+    }
     .autocomplete-dropdown.open { display: block; }
-    .autocomplete-item { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between;
-      align-items: center; gap: 8px; transition: background 120ms; border-bottom: 1px solid var(--border); }
+    .autocomplete-item {
+      padding: 8px 12px; cursor: pointer;
+      display: flex; justify-content: space-between; align-items: center;
+      gap: 8px;
+      transition: background 120ms;
+      border-bottom: 1px solid var(--border);
+    }
     .autocomplete-item:last-child { border-bottom: none; }
     .autocomplete-item:hover { background: rgba(108,131,255,.07); }
     .autocomplete-match { font-size: 13px; color: var(--text); }
     .autocomplete-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
-    #prompt { width: 100%; min-height: 40px; max-height: 180px; resize: none; border: none; outline: none;
-      background: transparent; color: var(--text); font: inherit; font-size: var(--font-size-base); line-height: 1.55;
-      padding: 2px 2px 4px; transition: height 100ms var(--ease-out); }
+
+    #prompt {
+      width: 100%; min-height: 40px; max-height: 180px;
+      resize: none; border: none; outline: none;
+      background: transparent; color: var(--text);
+      font: inherit; font-size: var(--font-size-base); line-height: 1.55;
+      padding: 2px 2px 4px;
+      transition: height 100ms var(--ease-out);
+    }
     #prompt::placeholder { color: #5a6178; }
-    .compose-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
-      border-top: 1px solid var(--border); padding-top: 6px; }
+    .compose-row {
+      display: flex; align-items: center; justify-content: space-between;
+      gap: var(--space-2); border-top: 1px solid var(--border); padding-top: 6px;
+    }
     .hint { color: var(--muted); font-size: 10px; font-family: var(--mono); }
-    .send-btn { border: none; border-radius: 10px; padding: 7px 16px; cursor: pointer; font: inherit;
-      font-size: 13px; font-weight: 600; color: white;
+    .send-btn {
+      border: none; border-radius: 10px;
+      padding: 7px 16px; cursor: pointer;
+      font: inherit; font-size: 13px; font-weight: 600;
+      color: white;
       background: linear-gradient(135deg, var(--accent), var(--accent2));
       box-shadow: 0 4px 14px rgba(108,131,255,.2);
-      transition: transform 140ms var(--ease-spring), box-shadow 140ms var(--ease-out); }
+      transition: transform 140ms var(--ease-spring), box-shadow 140ms var(--ease-out), filter 140ms var(--ease-out);
+    }
     .send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,131,255,.3); }
     .send-btn:active { transform: scale(.96); }
     .send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
 
-    /* ── Settings ── */
-    .settings-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99;
-      opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease-in-out); }
+    /* ── Settings panel ── */
+    .settings-backdrop {
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,.4);
+      z-index: 99;
+      opacity: 0; pointer-events: none;
+      transition: opacity 250ms var(--ease-in-out);
+    }
     .settings-backdrop.visible { opacity: 1; pointer-events: auto; }
-    #settingsPanel { position: fixed; top: 56px; right: 0; width: 280px; background: var(--panel);
-      border: 1px solid var(--border2); border-radius: 0 0 0 var(--radius-lg); box-shadow: var(--shadow); z-index: 100;
-      transform: translateX(100%); transition: transform 250ms var(--ease-in-out); padding: 14px 16px;
-      backdrop-filter: blur(24px) saturate(200%); }
+    #settingsPanel {
+      position: fixed; top: 56px; right: 0;
+      width: 280px;
+      background: var(--panel);
+      border: 1px solid var(--border2);
+      border-radius: 0 0 0 var(--radius-lg);
+      box-shadow: var(--shadow);
+      z-index: 100;
+      transform: translateX(100%);
+      transition: transform 250ms var(--ease-in-out);
+      padding: 14px 16px;
+      backdrop-filter: blur(24px) saturate(200%);
+    }
     #settingsPanel.open { transform: translateX(0); }
-    .settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
-    .settings-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
-    .settings-close { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px;
-      line-height: 1; padding: 2px 4px; border-radius: var(--radius-xs); transition: color 150ms; }
+    .settings-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .settings-title {
+      font-size: 12px; font-weight: 700;
+      text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
+    }
+    .settings-close {
+      border: none; background: none; color: var(--muted);
+      cursor: pointer; font-size: 16px; line-height: 1;
+      padding: 2px 4px; border-radius: var(--radius-xs);
+      transition: color 150ms;
+    }
     .settings-close:hover { color: var(--text); }
-    .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0;
-      border-bottom: 1px solid var(--border); }
+    .setting-row {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 6px 0; border-bottom: 1px solid var(--border);
+    }
     .setting-row:last-child { border-bottom: none; }
     .setting-label { font-size: 12px; color: var(--text); }
     .setting-desc { font-size: 10px; color: var(--muted); margin-top: 1px; }
-    .anim-segment { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
-    .anim-option { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px;
-      border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer;
-      transition: border-color 150ms, background 150ms; font-size: 12px; color: var(--muted); }
-    .anim-option.active { border-color: rgba(108,131,255,.4); background: rgba(108,131,255,.08); color: var(--accent); }
-    .anim-preview { width: 24px; height: 8px; border-radius: 4px; background: var(--border2); overflow: hidden; position: relative; }
-    .anim-option.active .anim-preview::after { content: ""; position: absolute; inset: 0;
-      background: linear-gradient(90deg,var(--accent),var(--accent2)); animation: anim-slide 1s ease infinite alternate; }
-    @keyframes anim-slide { from { transform:translateX(-100%); } to { transform:translateX(0); } }
-    .density-segment { display: flex; gap: 4px; margin-top: 6px; width: 100%; }
-    .density-option { flex: 1; padding: 6px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm);
-      cursor: pointer; font-size: 11px; color: var(--muted); transition: border-color 150ms, background 150ms, color 150ms; }
-    .density-option.active { border-color: rgba(108,131,255,.4); background: rgba(108,131,255,.08); color: var(--accent); }
+
+    /* Anim segmented control */
+    .anim-segment {
+      display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
+    }
+    .anim-option {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 6px 10px; border-radius: var(--radius-sm);
+      border: 1px solid var(--border); cursor: pointer;
+      transition: border-color 150ms, background 150ms;
+      font-size: 12px; color: var(--muted);
+    }
+    .anim-option.active {
+      border-color: rgba(108,131,255,.4);
+      background: rgba(108,131,255,.08);
+      color: var(--accent);
+    }
+    .anim-preview {
+      width: 24px; height: 8px; border-radius: 4px;
+      background: var(--border2);
+      overflow: hidden; position: relative;
+    }
+    .anim-option.active .anim-preview::after {
+      content: ""; position: absolute; inset: 0;
+      background: linear-gradient(90deg, var(--accent), var(--accent2));
+      animation: anim-preview-slide 1s ease infinite alternate;
+    }
+    @keyframes anim-preview-slide {
+      from { transform: translateX(-100%); }
+      to { transform: translateX(0); }
+    }
+
+    /* Density control */
+    .density-segment {
+      display: flex; gap: 4px; margin-top: 6px; width: 100%;
+    }
+    .density-option {
+      flex: 1; padding: 6px; text-align: center;
+      border: 1px solid var(--border); border-radius: var(--radius-sm);
+      cursor: pointer; font-size: 11px; color: var(--muted);
+      transition: border-color 150ms, background 150ms, color 150ms;
+    }
+    .density-option.active {
+      border-color: rgba(108,131,255,.4);
+      background: rgba(108,131,255,.08);
+      color: var(--accent);
+    }
 
     /* ── Toast ── */
-    #toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(12px);
-      opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-in-out), transform 200ms var(--ease-in-out);
-      z-index: 50; background: rgba(17,21,29,.95); border: 1px solid var(--border2); border-radius: var(--radius-md);
-      padding: 8px 14px; color: var(--text); font-family: var(--mono); font-size: 11px; box-shadow: var(--shadow);
-      white-space: nowrap; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px; }
+    #toast {
+      position: fixed; left: 50%; bottom: 80px;
+      transform: translateX(-50%) translateY(12px);
+      opacity: 0; pointer-events: none;
+      transition: opacity 200ms var(--ease-in-out), transform 200ms var(--ease-in-out);
+      z-index: 50;
+      background: rgba(17,21,29,.95);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-md);
+      padding: 8px 14px;
+      color: var(--text);
+      font-family: var(--mono); font-size: 11px;
+      box-shadow: var(--shadow);
+      white-space: nowrap;
+      backdrop-filter: blur(10px);
+      display: flex; align-items: center; gap: 8px;
+    }
     #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
     #toast.good { border-color: rgba(45,212,191,.4); color: var(--good); }
-    #toast.bad { border-color: rgba(248,113,113,.4); color: var(--bad); }
-    .toast-retry { border: 1px solid currentColor; border-radius: var(--radius-xs); background: transparent;
-      color: inherit; padding: 2px 8px; font: inherit; font-size: 10px; cursor: pointer; white-space: nowrap; }
+    #toast.bad  { border-color: rgba(248,113,113,.4); color: var(--bad); }
+    .toast-retry {
+      border: 1px solid currentColor; border-radius: var(--radius-xs);
+      background: transparent; color: inherit;
+      padding: 2px 8px; font: inherit; font-size: 10px;
+      cursor: pointer; white-space: nowrap;
+    }
+
     .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: var(--radius-pill); padding: 8px 14px; font: inherit; font-size: 12px;
-      box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; cursor: pointer;
-      transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
+
+    /* ── Jump to latest ── */
+    #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: var(--radius-pill);
+      padding: 8px 14px; font: inherit; font-size: 12px;
+      box-shadow: var(--shadow-soft);
+      backdrop-filter: blur(10px);
+      opacity: 0; pointer-events: none; cursor: pointer;
+      transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
+    }
     #jumpLatest.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
-    .question-note { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 4px; }
 
     /* ── Lightbox ── */
-    #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 400; display: none;
-      place-items: center; cursor: zoom-out; animation: fadeIn 150ms ease; }
+    #lightbox {
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,.9);
+      z-index: 400;
+      display: none; place-items: center;
+      cursor: zoom-out;
+      animation: fadeIn 150ms ease;
+    }
     #lightbox.open { display: grid; }
-    #lightbox img { max-width: 95vw; max-height: 95vh; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
-    #lightboxClose { position: absolute; top: 16px; right: 16px; border: 1px solid rgba(255,255,255,.2);
-      background: rgba(0,0,0,.5); color: white; border-radius: var(--radius-pill); width: 36px; height: 36px;
-      display: grid; place-items: center; cursor: pointer; font-size: 18px; line-height: 1; }
-    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+    #lightbox img {
+      max-width: 95vw; max-height: 95vh;
+      border-radius: var(--radius-sm);
+      box-shadow: 0 20px 60px rgba(0,0,0,.5);
+      cursor: default;
+    }
+    #lightboxClose {
+      position: absolute; top: 16px; right: 16px;
+      border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5);
+      color: white; border-radius: var(--radius-pill);
+      width: 36px; height: 36px;
+      display: grid; place-items: center;
+      cursor: pointer; font-size: 18px; line-height: 1;
+    }
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
     /* ── Command palette ── */
-    #cmdBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 500; display: none; place-items: flex-start center; padding-top: 18vh; }
+    #cmdBackdrop {
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,.55);
+      z-index: 500;
+      display: none; place-items: flex-start center;
+      padding-top: 18vh;
+    }
     #cmdBackdrop.open { display: grid; }
-    #cmdPalette { width: min(480px,90vw); background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--radius-xl);
-      box-shadow: var(--shadow); overflow: hidden; animation: fadeUp 150ms var(--ease-out) both; }
-    #cmdInput { width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text);
-      font: inherit; font-size: 14px; padding: 14px 16px; outline: none; }
+    #cmdPalette {
+      width: min(480px, 90vw);
+      background: var(--panel2);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+      animation: fadeUp 150ms var(--ease-out) both;
+    }
+    #cmdInput {
+      width: 100%; border: none; border-bottom: 1px solid var(--border);
+      background: transparent; color: var(--text);
+      font: inherit; font-size: 14px;
+      padding: 14px 16px; outline: none;
+    }
     #cmdInput::placeholder { color: var(--muted); }
     .cmd-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
-    .cmd-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px;
-      color: var(--text); transition: background 100ms; }
-    .cmd-item:hover,.cmd-item.focused { background: rgba(108,131,255,.1); }
+    .cmd-item {
+      padding: 10px 16px; cursor: pointer;
+      display: flex; align-items: center; gap: 10px;
+      font-size: 13px; color: var(--text);
+      transition: background 100ms;
+    }
+    .cmd-item:hover, .cmd-item.focused { background: rgba(108,131,255,.1); }
     .cmd-item-icon { color: var(--muted); font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
     .cmd-item-label { flex: 1; }
     .cmd-item-shortcut { font-family: var(--mono); font-size: 10px; color: var(--muted); }
     .cmd-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
 
     /* ── Confirm modal ── */
-    #confirmBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 600; display: none; place-items: center; }
+    #confirmBackdrop {
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,.55);
+      z-index: 600;
+      display: none; place-items: center;
+    }
     #confirmBackdrop.open { display: grid; }
-    #confirmModal { width: min(360px,90vw); background: var(--panel2); border: 1px solid var(--border2);
-      border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow); animation: fadeUp 150ms var(--ease-out) both; }
+    #confirmModal {
+      width: min(360px, 90vw);
+      background: var(--panel2);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-xl);
+      padding: 24px;
+      box-shadow: var(--shadow);
+      animation: fadeUp 150ms var(--ease-out) both;
+    }
     .confirm-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
     .confirm-msg { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }
     .confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
-    .confirm-ok { border: none; border-radius: var(--radius-sm); padding: 7px 18px; font: inherit; font-size: 13px;
-      font-weight: 600; background: var(--bad); color: white; cursor: pointer; }
-    .confirm-cancel { border: 1px solid var(--border2); background: transparent; color: var(--muted);
-      border-radius: var(--radius-sm); padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
-
-    /* ── Focus ── */
-    #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,.anim-option:focus-visible,.density-option:focus-visible,
-    .suggestion-chip:focus-visible,.cmd-item:focus-visible,.confirm-ok:focus-visible,.confirm-cancel:focus-visible,
-    .copy-code-btn:focus-visible { outline: 2px solid rgba(124,166,255,.7); outline-offset: 2px; }
+    .confirm-ok {
+      border: none; border-radius: var(--radius-sm);
+      padding: 7px 18px; font: inherit; font-size: 13px; font-weight: 600;
+      background: var(--bad); color: white; cursor: pointer;
+      transition: filter 150ms;
+    }
+    .confirm-ok:hover { filter: brightness(1.1); }
+    .confirm-cancel {
+      border: 1px solid var(--border2); background: transparent;
+      color: var(--muted); border-radius: var(--radius-sm);
+      padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
+    }
+
+    /* ── Question note ── */
+    .question-note {
+      font-size: 11px; color: var(--muted); font-family: var(--mono);
+      margin-top: 4px; display: flex; align-items: center; gap: 4px;
+    }
+
+    /* ── Focus styles ── */
+    #jumpLatest:focus-visible,
+    .top-btn:focus-visible,
+    .vote-btn:focus-visible,
+    .action-btn:focus-visible,
+    .ask-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,
+    .anim-option:focus-visible,
+    .density-option:focus-visible,
+    .suggestion-chip:focus-visible,
+    .cmd-item:focus-visible,
+    .confirm-ok:focus-visible,
+    .confirm-cancel:focus-visible,
+    .copy-code-btn:focus-visible {
+      outline: 2px solid rgba(124,166,255,.7);
+      outline-offset: 2px;
+    }
 
     /* ── Responsive ── */
     @media (max-width: 600px) {
-      #topbar { padding: 0 10px; } .brand-sub { display: none; }
-      .bubble { max-width: calc(100vw - 80px); } .welcome { margin-top: 3vh; padding: 18px 14px; }
+      #topbar { padding: 0 10px; }
+      .brand-sub { display: none; }
+      .bubble { max-width: calc(100vw - 80px); }
+      .welcome { margin-top: 3vh; padding: 18px 14px; }
       .welcome h1 { font-size: 18px; }
       #settingsPanel { width: 100%; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
-      #jumpLatest { bottom: 120px; max-width: calc(100vw - 24px); }
+      #jumpLatest { bottom: 120px; max-width: calc(100vw - 24px); white-space: nowrap; }
     }
     @media (pointer: coarse) {
-      .vote-btn,.action-btn,.versions-toggle,.other-answers-toggle,.related-toggle,.write-answer-btn { min-height: 44px; padding: 8px 14px; }
+      .vote-btn, .action-btn, .ask-btn, .versions-toggle, .other-answers-toggle,
+      .related-toggle, .write-answer-btn {
+        min-height: 44px; padding: 8px 14px;
+      }
+      .vote-btn { min-height: 44px; }
       .top-btn { min-height: 40px; }
     }
   </style>
 </head>
 <body>
   <a href="#prompt" class="skip-link">Skip to chat input</a>
+
   <div id="app">
     <header id="topbar" role="banner">
       <div class="brand">
@@ -575,36 +1218,69 @@
       </div>
       <nav class="top-actions" aria-label="Chat actions">
         <button class="top-btn" id="newChatBtn" aria-label="Start a new chat">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> New chat
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><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" aria-label="Open appearance settings" aria-expanded="false" aria-controls="settingsPanel">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><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>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><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>
       </nav>
     </header>
-    <div id="statusbar" role="status" aria-live="assertive"><span class="status-dot" aria-hidden="true"></span><span id="statusText">Thinking…</span></div>
+
+    <div id="statusbar" role="status" aria-live="assertive">
+      <span class="status-dot" aria-hidden="true"></span>
+      <span id="statusText">Thinking…</span>
+    </div>
+
     <button id="jumpLatest" type="button" aria-label="Jump to latest content">New content below · Jump ↓</button>
+
+    <!-- Settings backdrop -->
     <div class="settings-backdrop" id="settingsBackdrop" aria-hidden="true"></div>
+
+    <!-- Settings panel -->
     <div id="settingsPanel" role="dialog" aria-label="Appearance settings" aria-modal="false">
       <div class="settings-header">
         <div class="settings-title">Appearance</div>
         <button class="settings-close" id="settingsClose" aria-label="Close settings">×</button>
       </div>
-      <div class="setting-row"><div><div class="setting-label">Response animation</div><div class="setting-desc">How answers are revealed</div></div></div>
+
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Response animation</div>
+          <div class="setting-desc">How answers are revealed</div>
+        </div>
+      </div>
       <div class="anim-segment" id="animSegment" role="radiogroup" aria-label="Animation style">
-        <div class="anim-option" data-anim="none" role="radio" aria-checked="true" tabindex="0"><span>Instant</span><div class="anim-preview"></div></div>
-        <div class="anim-option" data-anim="ai" role="radio" aria-checked="false" tabindex="0"><span>Quick fade</span><div class="anim-preview"></div></div>
-        <div class="anim-option" data-anim="human" role="radio" aria-checked="false" tabindex="0"><span>Gentle fade</span><div class="anim-preview"></div></div>
-        <div class="anim-option" data-anim="diffusion" role="radio" aria-checked="false" tabindex="0"><span>Soft reveal</span><div class="anim-preview"></div></div>
-        <div class="anim-option" data-anim="diffusion-v2" role="radio" aria-checked="false" tabindex="0"><span>Slow reveal</span><div class="anim-preview"></div></div>
+        <div class="anim-option" data-anim="none" role="radio" aria-checked="true" tabindex="0">
+          <span>Instant</span><div class="anim-preview"></div>
+        </div>
+        <div class="anim-option" data-anim="ai" role="radio" aria-checked="false" tabindex="0">
+          <span>Quick fade</span><div class="anim-preview"></div>
+        </div>
+        <div class="anim-option" data-anim="human" role="radio" aria-checked="false" tabindex="0">
+          <span>Gentle fade</span><div class="anim-preview"></div>
+        </div>
+        <div class="anim-option" data-anim="diffusion" role="radio" aria-checked="false" tabindex="0">
+          <span>Soft reveal</span><div class="anim-preview"></div>
+        </div>
+        <div class="anim-option" data-anim="diffusion-v2" role="radio" aria-checked="false" tabindex="0">
+          <span>Slow reveal</span><div class="anim-preview"></div>
+        </div>
+      </div>
+
+      <div class="setting-row" style="margin-top:12px;">
+        <div>
+          <div class="setting-label">Content density</div>
+          <div class="setting-desc">Amount of spacing in chat</div>
+        </div>
       </div>
-      <div class="setting-row" style="margin-top:12px;"><div><div class="setting-label">Content density</div><div class="setting-desc">Amount of spacing</div></div></div>
       <div class="density-segment" id="densitySegment" role="radiogroup" aria-label="Content density">
         <div class="density-option" data-density="compact" role="radio" aria-checked="false" tabindex="0">Compact</div>
         <div class="density-option active" data-density="comfortable" role="radio" aria-checked="true" tabindex="0">Default</div>
         <div class="density-option" data-density="spacious" role="radio" aria-checked="false" tabindex="0">Spacious</div>
       </div>
     </div>
+
     <main id="chat" role="main">
       <div id="scrollProgress" aria-hidden="true"></div>
       <div class="wrap">
@@ -621,6 +1297,7 @@
         <div id="transcript" aria-live="polite" aria-atomic="false"></div>
       </div>
     </main>
+
     <div class="compose">
       <form id="composeForm" class="compose-inner" onsubmit="return false;" autocomplete="off">
         <div class="autocomplete-dropdown" id="autocompleteDropdown" role="listbox" aria-label="Similar questions"></div>
@@ -632,17 +1309,25 @@
       </form>
     </div>
   </div>
+
+  <!-- Toast -->
   <div id="toast" role="alert" aria-live="assertive"></div>
+
+  <!-- Lightbox -->
   <div id="lightbox" aria-modal="true" aria-label="Image viewer" role="dialog">
     <button id="lightboxClose" aria-label="Close image viewer">×</button>
     <img id="lightboxImg" src="" alt="" />
   </div>
+
+  <!-- Command palette -->
   <div id="cmdBackdrop" role="dialog" aria-modal="true" aria-label="Command palette">
     <div id="cmdPalette">
       <input id="cmdInput" type="text" placeholder="Type a command or search…" aria-label="Command search" autocomplete="off" />
       <div class="cmd-list" id="cmdList" role="listbox"></div>
     </div>
   </div>
+
+  <!-- Confirm modal -->
   <div id="confirmBackdrop" role="dialog" aria-modal="true" aria-labelledby="confirmTitle">
     <div id="confirmModal">
       <div class="confirm-title" id="confirmTitle">Are you sure?</div>
@@ -655,768 +1340,1731 @@
   </div>
 
   <script>window.__HI_INIT__ = {{ init_json | safe }};</script>
+
   <script>
   (() => {
-  'use strict';
-
-  // ═══════════ HELPERS ═══════════
-  const $ = id => document.getElementById(id);
-  const qs = (s, c = document) => c.querySelector(s);
-  const qsa = (s, c = document) => [...c.querySelectorAll(s)];
-  const sleep = ms => new Promise(r => setTimeout(r, ms));
-  const esc = s => String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-  const nl2br = s => esc(s).replace(/\n/g,'<br>');
-
-  function debounce(fn, ms) { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }
-  function debounceClick(fn, ms = 350) {
-    let busy = false;
-    return async (...a) => { if (busy) return; busy = true; try { await fn(...a); } finally { setTimeout(() => busy = false, ms); } };
-  }
-  function haptic(ms = 10) { if ('vibrate' in navigator) navigator.vibrate(ms); }
-  function appendHTML(t, h) { if (!h) return; const tpl = document.createElement('template'); tpl.innerHTML = h.trim(); t.appendChild(tpl.content); }
-
-  // ═══════════ STATE ═══════════
-  const S = {
-    clientId: null, conversation: null, currentQuestion: '', relatedAnswers: [],
-    loading: false, atBottom: true, lastAction: null,
-    animMode: localStorage.getItem('hi_anim') || 'none',
-    density: localStorage.getItem('hi_density') || 'comfortable',
-    originalTitle: document.title,
-  };
-
-  // ═══════════ VIEWPORT ═══════════
-  function updateAppHeight() {
-    const h = window.visualViewport?.height || window.innerHeight;
-    document.documentElement.style.setProperty('--app-height', `${Math.round(h)}px`);
-  }
-  function getClientId() {
-    let id = localStorage.getItem('hi_client_id');
-    if (!id) { id = (crypto.randomUUID?.() || Date.now().toString(36) + Math.random().toString(36).slice(2)).replace(/-/g,'').slice(0,16); localStorage.setItem('hi_client_id', id); }
-    return id;
-  }
-
-  // ═══════════ TOAST / STATUS ═══════════
-  function toast(msg, kind = '', retryFn = null) {
-    const t = $('toast'); t.innerHTML = '';
-    const s = document.createElement('span'); s.textContent = msg; t.appendChild(s);
-    if (retryFn) { const b = document.createElement('button'); b.className = 'toast-retry'; b.textContent = 'Retry'; b.onclick = () => { hideToast(); retryFn(); }; t.appendChild(b); }
-    t.className = 'show' + (kind ? ' ' + kind : '');
-    clearTimeout(t._t); t._t = setTimeout(hideToast, retryFn ? 6000 : 2500);
-  }
-  function hideToast() { $('toast').className = ''; }
-
-  let statusTimers = [];
-  function showStatus(text) { $('statusText').textContent = text; $('statusbar').classList.add('visible'); }
-  function hideStatus() { statusTimers.forEach(clearTimeout); statusTimers = []; $('statusbar').classList.remove('visible'); }
-  function showStatusEscalating() {
-    showStatus('Searching for answers…');
-    statusTimers.push(setTimeout(() => showStatus('Still searching…'), 8000));
-    statusTimers.push(setTimeout(() => showStatus('Taking longer than usual…'), 20000));
-  }
-
-  // ═══════════ SYNTAX HIGHLIGHT ═══════════
-  function syntaxHL(code, lang) {
-    const e = esc(code);
-    if (!lang || lang === 'text' || lang === 'plain') return e;
-    return e
-      .replace(/(\/\/[^\n]*|#[^\n]*|\/\*[\s\S]*?\*\/)/g,'<span class="tok-cmt">$1</span>')
-      .replace(/(["'`])((?:\\.|(?!\1)[^\\])*)\1/g,'<span class="tok-str">$1$2$1</span>')
-      .replace(/\b(\d+\.?\d*)\b/g,'<span class="tok-num">$1</span>')
-      .replace(/\b(function|const|let|var|return|if|else|for|while|class|import|export|from|async|await|def|self|print|True|False|None|int|str|bool|float|public|private|static|void|new|this|typeof|instanceof)\b/g,'<span class="tok-kw">$1</span>')
-      .replace(/\b([a-zA-Z_]\w*)\s*(?=\()/g,'<span class="tok-fn">$1</span>')
-      .replace(/([=!<>&|+\-*/%^~]+)/g,'<span class="tok-op">$1</span>');
-  }
-
-  // ═══════════ INLINE MARKDOWN ═══════════
-  function renderInline(s) {
-    const tk = [];
-    let raw = String(s || '').replace(
-      /!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)|\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
-      (_, iA, iS, lT, lH) => { const i = tk.length; tk.push(iS !== undefined ? `<img class="md-img" src="${iS}" alt="${esc(iA)}" loading="lazy">` : `<a href="${lH}" target="_blank" rel="noopener noreferrer">${esc(lT)}</a>`); return `\x00${i}\x00`; }
-    );
-    raw = raw.replace(/`([^`]+)`/g, (_, c) => { const i = tk.length; tk.push(`<code>${esc(c)}</code>`); return `\x00${i}\x00`; });
-    let o = esc(raw);
-    o = o.replace(/\*\*\*([^*]+)\*\*\*/g,'<strong><em>$1</em></strong>');
-    o = o.replace(/___([^_]+)___/g,'<strong><em>$1</em></strong>');
-    o = o.replace(/\*\*([^*]+)\*\*/g,'<strong>$1</strong>');
-    o = o.replace(/__([^_]+)__/g,'<strong>$1</strong>');
-    o = o.replace(/\*([^*\s][^*]*[^*\s]|\S)\*/g,'<em>$1</em>');
-    o = o.replace(/_([^_\s][^_]*[^_\s]|\S)_/g,'<em>$1</em>');
-    o = o.replace(/~~([^~]+)~~/g,'<s>$1</s>');
-    o = o.replace(/\^([^^]+)\^/g,'<sup>$1</sup>');
-    o = o.replace(/~([^~]+)~/g,'<sub>$1</sub>');
-    return o.replace(/\x00(\d+)\x00/g, (_, i) => tk[Number(i)]);
-  }
-
-  // ═══════════ THINKING BLOCK EXTRACTION ═══════════
-  // Extracts <|thinking|>…</|thinking|> blocks from text, returns
-  // { segments: [{type:'text'|'thinking', content:string}] }
-  function extractThinking(text) {
-    const segments = [];
-    const re = /<\|thinking\|>([\s\S]*?)<\/\|thinking\|>/g;
-    let last = 0, m;
-    while ((m = re.exec(text)) !== null) {
-      if (m.index > last) segments.push({ type: 'text', content: text.slice(last, m.index) });
-      segments.push({ type: 'thinking', content: m[1].trim() });
-      last = re.lastIndex;
-    }
-    if (last < text.length) segments.push({ type: 'text', content: text.slice(last) });
-    if (!segments.length) segments.push({ type: 'text', content: text });
-    return segments;
-  }
-
-  function renderThinkingBlock(content, elapsed = null) {
-    const id = 'tb-' + Math.random().toString(36).slice(2, 8);
-    const timeLabel = elapsed !== null ? `${elapsed.toFixed(1)}s` : '';
-    return `<div class="thinking-block" id="${id}">
-      <div class="thinking-header" data-thinking-toggle="${id}" role="button" tabindex="0" aria-expanded="false">
-        <div class="thinking-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg></div>
-        <span class="thinking-label">Thinking${timeLabel ? ` for ${timeLabel}` : ''}</span>
-        <span class="thinking-timer">${timeLabel}</span>
-      </div>
-      <div class="thinking-body">
-        <div class="thinking-content">${renderMarkdown(content)}</div>
-      </div>
-    </div>`;
-  }
-
-  // ═══════════ BLOCK MARKDOWN ═══════════
-  function renderMarkdown(md) {
-    const lines = String(md || '').replace(/\r\n/g,'\n').split('\n');
-    const out = [];
-    let inCode = false, codeLang = '', codeBuf = [], lastBlank = false;
-    const listStack = [];
-    let inQuote = false, inTable = false, tAligns = [];
-
-    const closeLists = () => { while (listStack.length) out.push(`</${listStack.pop().type}>`); };
-    const closeQuote = () => { if (inQuote) { out.push('</blockquote>'); inQuote = false; } };
-    const closeTable = () => { if (inTable) { out.push('</tbody></table>'); inTable = false; tAligns = []; } };
-    const closeAll = () => { closeLists(); closeQuote(); closeTable(); };
-
-    for (let i = 0; i < lines.length; i++) {
-      const raw = lines[i].trimEnd();
-      if (inCode) {
-        if (/^```/.test(raw)) {
-          const hl = syntaxHL(codeBuf.join('\n'), codeLang);
-          const lbl = codeLang ? `<span class="code-lang-label">${esc(codeLang)}</span>` : '';
-          out.push(`<div class="code-block-wrapper">${lbl}<button class="copy-code-btn" data-copy-code="${encodeURIComponent(codeBuf.join('\n'))}">Copy</button><pre><code>${hl}</code></pre></div>`);
-          codeBuf = []; codeLang = ''; inCode = false;
-        } else codeBuf.push(raw);
-        continue;
+    'use strict';
+
+    /* ═══════════════════════════════════════════════
+       STATE
+    ═══════════════════════════════════════════════ */
+    const S = {
+      clientId: null,
+      conversation: null,
+      currentQuestion: '',
+      relatedAnswers: [],
+      loading: false,
+      atBottom: true,
+      animMode: localStorage.getItem('hi_anim') || 'none',
+      density: localStorage.getItem('hi_density') || 'comfortable',
+      lastAction: null, // for retry
+      originalTitle: document.title,
+    };
+
+    /* ═══════════════════════════════════════════════
+       UTILITIES
+    ═══════════════════════════════════════════════ */
+    const $ = id => document.getElementById(id);
+    const qs = (sel, ctx = document) => ctx.querySelector(sel);
+    const qsa = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
+
+    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) {
+        id = (crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2))
+          .replace(/-/g, '').slice(0, 16);
+        localStorage.setItem('hi_client_id', id);
       }
-      if (/^```/.test(raw)) { closeAll(); codeLang = raw.replace(/^```/,'').trim().toLowerCase(); inCode = true; continue; }
-      if (!raw.trim()) { closeAll(); if (!lastBlank) out.push('<p class="md-gap"></p>'); lastBlank = true; continue; }
-      lastBlank = false;
-      if (/^#{1,6}\s/.test(raw)) { closeAll(); const l = Math.min(6, raw.match(/^#+/)[0].length); out.push(`<h${l}>${renderInline(raw.replace(/^#+\s+/,''))}</h${l}>`); continue; }
-      if (/^(-{3,}|\*{3,}|_{3,})$/.test(raw.trim())) { closeAll(); out.push('<hr>'); continue; }
-      if (/^> ?/.test(raw)) { closeLists(); closeTable(); if (!inQuote) { out.push('<blockquote>'); inQuote = true; } out.push(`<p>${renderInline(raw.replace(/^> ?/,''))}</p>`); continue; }
-      closeQuote();
-
-      // Table
-      if (/^\|.+\|$/.test(raw)) {
-        const next = lines[i + 1]?.trimEnd() || '';
-        if (/^\|[\s|:\-]+\|$/.test(next)) {
-          closeLists(); closeTable();
-          const hdrs = raw.split('|').slice(1,-1).map(c => c.trim());
-          tAligns = next.split('|').slice(1,-1).map(c => /^:-+:$/.test(c.trim()) ? 'center' : /-+:$/.test(c.trim()) ? 'right' : 'left');
-          out.push('<table><thead><tr>');
-          hdrs.forEach((h,j) => out.push(`<th style="text-align:${tAligns[j]||'left'}">${renderInline(h)}</th>`));
-          out.push('</tr></thead><tbody>'); inTable = true; i++; continue;
-        } else if (inTable) {
-          const cells = raw.split('|').slice(1,-1).map(c => c.trim());
-          out.push('<tr>'); cells.forEach((c,j) => out.push(`<td style="text-align:${tAligns[j]||'left'}">${renderInline(c)}</td>`)); out.push('</tr>'); continue;
+      return id;
+    }
+
+    function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+    function debounce(fn, ms) {
+      let t;
+      return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
+    }
+
+    function debounceClick(fn, ms = 350) {
+      let blocked = false;
+      return async (...args) => {
+        if (blocked) return;
+        blocked = true;
+        try { await fn(...args); }
+        finally { setTimeout(() => { blocked = false; }, ms); }
+      };
+    }
+
+    /* ═══════════════════════════════════════════════
+       TOAST
+    ═══════════════════════════════════════════════ */
+    function toast(msg, kind = '', retryFn = null) {
+      const t = $('toast');
+      t.innerHTML = '';
+      const span = document.createElement('span');
+      span.textContent = msg;
+      t.appendChild(span);
+      if (retryFn) {
+        const btn = document.createElement('button');
+        btn.className = 'toast-retry';
+        btn.textContent = 'Retry';
+        btn.onclick = () => { hideToast(); retryFn(); };
+        t.appendChild(btn);
+      }
+      t.className = 'show' + (kind ? ' ' + kind : '');
+      clearTimeout(t._t);
+      t._t = setTimeout(hideToast, retryFn ? 6000 : 2500);
+    }
+    function hideToast() {
+      const t = $('toast');
+      t.className = '';
+    }
+
+    /* ═══════════════════════════════════════════════
+       STATUS BAR
+    ═══════════════════════════════════════════════ */
+    let statusTimers = [];
+    function showStatus(text) {
+      $('statusText').textContent = text;
+      $('statusbar').classList.add('visible');
+    }
+    function hideStatus() {
+      statusTimers.forEach(clearTimeout);
+      statusTimers = [];
+      $('statusbar').classList.remove('visible');
+    }
+    function showStatusWithEscalation() {
+      showStatus('Searching for answers…');
+      statusTimers.push(setTimeout(() => showStatus('Still searching…'), 8000));
+      statusTimers.push(setTimeout(() => showStatus('Taking longer than usual…'), 20000));
+    }
+
+    /* ═══════════════════════════════════════════════
+       ESCAPE
+    ═══════════════════════════════════════════════ */
+    function esc(s) {
+      return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    }
+    function nl2br(s) { return esc(s).replace(/\n/g, '<br>'); }
+
+    /* Strip markdown markers for clean inline previews */
+    function previewText(s) {
+      return String(s || '')
+        .replace(/```[\s\S]*?```/g, ' [code] ')
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, ' [image] ')
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        .replace(/^[#>\-*+]\s+/gm, '')
+        .replace(/[*_~`]+/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    }
+
+    /* ═══════════════════════════════════════════════
+       SYNTAX HIGHLIGHTER (lightweight)
+    ═══════════════════════════════════════════════ */
+    function syntaxHighlight(code, _lang) {
+      return esc(code);
+    }
+
+    /* ═══════════════════════════════════════════════
+       INLINE MARKDOWN
+    ═══════════════════════════════════════════════ */
+    function renderInlineMarkdown(s) {
+      const tokens = [];
+      // Extract images, links first
+      let raw = String(s || '').replace(
+        /!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)|\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
+        (match, imgAlt, imgSrc, linkText, linkHref) => {
+          const idx = tokens.length;
+          if (imgSrc !== undefined) {
+            tokens.push(`<img class="md-img" src="${imgSrc}" alt="${esc(imgAlt)}" loading="lazy">`);
+          } else {
+            tokens.push(`<a href="${linkHref}" target="_blank" rel="noopener noreferrer">${esc(linkText)}</a>`);
+          }
+          return `\x00${idx}\x00`;
+        }
+      );
+      // Extract inline code
+      raw = raw.replace(/`([^`]+)`/g, (_, c) => {
+        const idx = tokens.length;
+        tokens.push(`<code>${esc(c)}</code>`);
+        return `\x00${idx}\x00`;
+      });
+
+      let out = esc(raw);
+      // Bold+italic
+      out = out.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
+      out = out.replace(/___([^_]+)___/g, '<strong><em>$1</em></strong>');
+      // Bold
+      out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      out = out.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+      // Italic
+      out = out.replace(/\*([^*\s][^*]*[^*\s]|\S)\*/g, '<em>$1</em>');
+      out = out.replace(/_([^_\s][^_]*[^_\s]|\S)_/g, '<em>$1</em>');
+      // Strikethrough
+      out = out.replace(/~~([^~]+)~~/g, '<s>$1</s>');
+      // Superscript / subscript
+      out = out.replace(/\^([^^]+)\^/g, '<sup>$1</sup>');
+      out = out.replace(/~([^~]+)~/g, '<sub>$1</sub>');
+      // Restore tokens
+      out = out.replace(/\x00(\d+)\x00/g, (_, i) => tokens[Number(i)]);
+      return out;
+    }
+
+    /* ═══════════════════════════════════════════════
+       BLOCK MARKDOWN RENDERER
+    ═══════════════════════════════════════════════ */
+    function renderMarkdown(md) {
+      const lines = String(md || '').replace(/\r\n/g, '\n').split('\n');
+      const out = [];
+      let inCode = false, codeLang = '', codeBuf = [];
+      let lastWasBlank = false;
+
+      // List stack: [{type:'ul'|'ol', indent:number}]
+      const listStack = [];
+      function closeListsTo(targetIndent) {
+        while (listStack.length && listStack[listStack.length - 1].indent > targetIndent) {
+          out.push(`</${listStack.pop().type}>`);
         }
       }
-      if (inTable && !/^\|/.test(raw)) closeTable();
-
-      // Lists (nested)
-      const ulM = raw.match(/^(\s*)[-*]\s+(.*)/), olM = raw.match(/^(\s*)\d+\.\s+(.*)/);
-      if (ulM || olM) {
-        closeQuote(); closeTable();
-        const indent = (ulM || olM)[1].length, type = ulM ? 'ul' : 'ol', text = (ulM ? ulM : olM)[2];
-        if (!listStack.length || indent > listStack[listStack.length-1].indent) { out.push(`<${type}>`); listStack.push({type, indent}); }
-        else if (indent < listStack[listStack.length-1].indent) {
-          while (listStack.length && listStack[listStack.length-1].indent > indent) out.push(`</${listStack.pop().type}>`);
-          if (!listStack.length || listStack[listStack.length-1].indent !== indent) { out.push(`<${type}>`); listStack.push({type, indent}); }
+      function closeLists() { while (listStack.length) out.push(`</${listStack.pop().type}>`); }
+
+      let inQuote = false;
+      function closeQuote() { if (inQuote) { out.push('</blockquote>'); inQuote = false; } }
+
+      // Table state
+      let inTable = false, tableHeaders = [], tableAligns = [];
+      function closeTable() {
+        if (inTable) { out.push('</tbody></table>'); inTable = false; tableHeaders = []; tableAligns = []; }
+      }
+
+      for (let li = 0; li < lines.length; li++) {
+        const raw = lines[li].trimEnd();
+
+        // Code block
+        if (inCode) {
+          if (/^```/.test(raw)) {
+            const highlighted = syntaxHighlight(codeBuf.join('\n'), codeLang);
+            const langLabel = codeLang ? `<span class="code-lang-label">${esc(codeLang)}</span>` : '';
+            out.push(`<div class="code-block-wrapper">${langLabel}<button class="copy-code-btn" data-copy-code="${encodeURIComponent(codeBuf.join('\n'))}">Copy</button><pre><code>${highlighted}</code></pre></div>`);
+            codeBuf = []; codeLang = ''; inCode = false;
+          } else { codeBuf.push(raw); }
+          continue;
+        }
+        if (/^```/.test(raw)) {
+          closeLists(); closeQuote(); closeTable();
+          codeLang = raw.replace(/^```/, '').trim().toLowerCase();
+          inCode = true; continue;
+        }
+
+        // Blank line
+        if (!raw.trim()) {
+          closeLists(); closeQuote(); closeTable();
+          if (!lastWasBlank) out.push('<p class="md-gap"></p>');
+          lastWasBlank = true; continue;
+        }
+        lastWasBlank = false;
+
+        // Heading
+        if (/^#{1,6}\s/.test(raw)) {
+          closeLists(); closeQuote(); closeTable();
+          const lvl = Math.min(6, raw.match(/^#+/)[0].length);
+          out.push(`<h${lvl}>${renderInlineMarkdown(raw.replace(/^#+\s+/, ''))}</h${lvl}>`);
+          continue;
+        }
+
+        // HR
+        if (/^(-{3,}|\*{3,}|_{3,})$/.test(raw.trim())) {
+          closeLists(); closeQuote(); closeTable();
+          out.push('<hr>'); continue;
+        }
+
+        // Blockquote
+        if (/^> ?/.test(raw)) {
+          closeLists(); closeTable();
+          if (!inQuote) { out.push('<blockquote>'); inQuote = true; }
+          out.push(`<p>${renderInlineMarkdown(raw.replace(/^> ?/, ''))}</p>`);
+          continue;
+        }
+        closeQuote();
+
+        // Table detection
+        if (/^\|.+\|$/.test(raw)) {
+          closeTable(); // might open a new one
+          const nextLine = lines[li + 1] ? lines[li + 1].trimEnd() : '';
+          if (/^\|[\s|:\-]+\|$/.test(nextLine)) {
+            // Header row
+            closeLists();
+            tableHeaders = raw.split('|').slice(1, -1).map(c => c.trim());
+            const sepCells = nextLine.split('|').slice(1, -1).map(c => c.trim());
+            tableAligns = sepCells.map(c => {
+              if (/^:-+:$/.test(c)) return 'center';
+              if (/^-+:$/.test(c)) return 'right';
+              return 'left';
+            });
+            out.push('<table><thead><tr>');
+            tableHeaders.forEach((h, i) => out.push(`<th style="text-align:${tableAligns[i]}">${renderInlineMarkdown(h)}</th>`));
+            out.push('</tr></thead><tbody>');
+            inTable = true;
+            li++; // skip separator
+            continue;
+          } else if (inTable) {
+            // Data row
+            const cells = raw.split('|').slice(1, -1).map(c => c.trim());
+            out.push('<tr>');
+            cells.forEach((c, i) => out.push(`<td style="text-align:${tableAligns[i]||'left'}">${renderInlineMarkdown(c)}</td>`));
+            out.push('</tr>');
+            continue;
+          }
         }
-        const taskM = text.match(/^\[([ xX])\]\s+(.*)/);
-        if (taskM) { const ck = taskM[1] !== ' '; out.push(`<li class="task-item"><input type="checkbox" ${ck?'checked':''} disabled>${renderInline(taskM[2])}</li>`); }
-        else out.push(`<li>${renderInline(text)}</li>`);
-        continue;
+        if (inTable && !/^\|/.test(raw)) closeTable();
+
+        // Lists (with nesting)
+        const ulMatch = raw.match(/^(\s*)[-*]\s+(.*)/);
+        const olMatch = raw.match(/^(\s*)\d+\.\s+(.*)/);
+        if (ulMatch || olMatch) {
+          closeQuote(); closeTable();
+          const indent = (ulMatch || olMatch)[1].length;
+          const type = ulMatch ? 'ul' : 'ol';
+          const text = (ulMatch ? ulMatch[2] : olMatch[2]);
+
+          if (listStack.length === 0 || indent > listStack[listStack.length - 1].indent) {
+            out.push(`<${type}>`);
+            listStack.push({ type, indent });
+          } else if (indent < listStack[listStack.length - 1].indent) {
+            closeListsTo(indent);
+            if (!listStack.length || listStack[listStack.length - 1].indent !== indent) {
+              out.push(`<${type}>`);
+              listStack.push({ type, indent });
+            }
+          }
+
+          // Task list
+          const taskMatch = text.match(/^\[([ xX])\]\s+(.*)/);
+          if (taskMatch) {
+            const checked = taskMatch[1] !== ' ';
+            out.push(`<li class="task-item"><input type="checkbox" ${checked ? 'checked' : ''} disabled aria-checked="${checked}">${renderInlineMarkdown(taskMatch[2])}</li>`);
+          } else {
+            out.push(`<li>${renderInlineMarkdown(text)}</li>`);
+          }
+          continue;
+        }
+
+        closeLists(); closeTable();
+        out.push(`<p>${renderInlineMarkdown(raw)}</p>`);
       }
-      closeAll();
-      out.push(`<p>${renderInline(raw)}</p>`);
-    }
-    closeAll();
-    if (inCode) out.push(`<div class="code-block-wrapper"><pre><code>${codeBuf.join('\n')}</code></pre></div>`);
-    return out.join('');
-  }
-
-  // ═══════════ TIME / QUALITY ═══════════
-  function relativeTime(iso) {
-    if (!iso) return '';
-    try {
-      const d = Date.now() - new Date(iso).getTime(), m = Math.floor(d/60000);
-      if (m < 1) return 'just now'; if (m < 60) return m + 'm ago';
-      const h = Math.floor(m/60); if (h < 24) return h + 'h ago';
-      const dy = Math.floor(h/24); if (dy < 7) return dy + 'd ago';
-      return new Date(iso).toLocaleString([], { month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' });
-    } catch { return iso; }
-  }
-  function qualityDots(text) {
-    let q = 0;
-    if (text.length > 200) q++; if (/```/.test(text)) q++; if (/https?:\/\//.test(text)) q++; if (/\n[-*] /.test(text)) q++;
-    q = Math.min(q, 4);
-    return `<span class="quality-dots" aria-label="Quality">${Array.from({length:4}, (_,i) => `<span class="quality-dot${i<q?' filled':''}" aria-hidden="true"></span>`).join('')}</span>`;
-  }
-
-  // ═══════════ SCROLL ═══════════
-  let scrollRAF = null;
-  function scrollBottom(force = false) {
-    if (scrollRAF) return;
-    scrollRAF = requestAnimationFrame(() => { scrollRAF = null; const c = $('chat');
-      if (force || S.atBottom || isNear()) { c.scrollTop = c.scrollHeight; setJump(false); S.atBottom = true; } else setJump(true);
-    });
-  }
-  function isNear() { const c = $('chat'); return c.scrollHeight - c.scrollTop - c.clientHeight < 72; }
-  function setJump(v) { $('jumpLatest')?.classList.toggle('show', !!v); }
-  function updateScrollProg() {
-    const c = $('chat'), b = $('scrollProgress'); if (!c || !b) return;
-    b.style.width = c.scrollHeight <= c.clientHeight ? '0%' : ((c.scrollTop / (c.scrollHeight - c.clientHeight)) * 100).toFixed(1) + '%';
-  }
-
-  // ═══════════ AUTOREGRESSIVE ANIMATION ═══════════
-  // Splits rendered HTML into very small chunks (~word-sized)
-  // and reveals them one at a time for a smooth streaming feel.
-  async function animateText(el, text) {
-    if (!el) return;
-    const mode = S.animMode;
-    const segments = extractThinking(text);
-    const hasThinking = segments.some(s => s.type === 'thinking');
-
-    if (mode === 'none') {
-      el.innerHTML = renderSegments(segments, null);
-      bindCodeCopy(el); bindThinkingToggles(el); return;
-    }
-
-    el.innerHTML = '';
-    const baseDelay = { none:0, ai:12, human:20, diffusion:30, 'diffusion-v2':45 }[mode] || 12;
-
-    for (const seg of segments) {
-      if (seg.type === 'thinking') {
-        await animateThinkingBlock(el, seg.content, baseDelay);
-      } else {
-        await animateMarkdownChunked(el, seg.content, baseDelay);
+
+      closeLists(); closeQuote(); closeTable();
+      if (inCode) out.push(`<div class="code-block-wrapper"><pre><code>${codeBuf.join('\n')}</code></pre></div>`);
+
+      return out.join('');
+    }
+
+    /* ═══════════════════════════════════════════════
+       TIME HELPERS
+    ═════════════════════════════════════���═════════ */
+    function relativeTime(iso) {
+      if (!iso) return '';
+      try {
+        const diff = Date.now() - new Date(iso).getTime();
+        const mins = Math.floor(diff / 60000);
+        if (mins < 1) return 'just now';
+        if (mins < 60) return `${mins}m ago`;
+        const hrs = Math.floor(mins / 60);
+        if (hrs < 24) return `${hrs}h ago`;
+        const days = Math.floor(hrs / 24);
+        if (days < 7) return `${days}d ago`;
+        return fmtTime(iso);
+      } catch { return iso; }
+    }
+    function fmtTime(iso) {
+      if (!iso) return '';
+      try { return new Date(iso).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); }
+      catch { return iso; }
+    }
+
+    /* ═══════════════════════════════════════════════
+       QUALITY SCORE
+    ═══════════════════════════════════════════════ */
+    function answerQuality(text) {
+      let score = 0;
+      if (text.length > 200) score++;
+      if (/```/.test(text)) score++;
+      if (/https?:\/\//.test(text)) score++;
+      if (/\n[-*] /.test(text)) score++;
+      return Math.min(score, 4);
+    }
+    function renderQualityDots(text) {
+      const q = answerQuality(text);
+      let html = '<span class="quality-dots" aria-label="Answer quality">';
+      for (let i = 0; i < 4; i++) {
+        html += `<span class="quality-dot ${i < q ? 'filled' : ''}" aria-hidden="true"></span>`;
       }
+      html += '</span>';
+      return html;
     }
-    bindCodeCopy(el); bindThinkingToggles(el);
-  }
-
-  // Animates a thinking block: shows spinner, streams content, then finalizes with elapsed time
-  async function animateThinkingBlock(container, content, baseDelay) {
-    const id = 'tb-' + Math.random().toString(36).slice(2, 8);
-    const blockHTML = `<div class="thinking-block open" id="${id}">
-      <div class="thinking-header" data-thinking-toggle="${id}" role="button" tabindex="0" aria-expanded="true">
-        <div class="thinking-spinner"></div>
-        <span class="thinking-label">Thinking…</span>
-        <span class="thinking-timer" id="${id}-timer">0.0s</span>
-      </div>
-      <div class="thinking-body" style="max-height:2000px;opacity:1;">
-        <div class="thinking-content" id="${id}-content"></div>
-      </div>
-    </div>`;
-    container.insertAdjacentHTML('beforeend', blockHTML);
-    scrollBottom();
-
-    const contentEl = $(`${id}-content`);
-    const timerEl = $(`${id}-timer`);
-    const blockEl = $(id);
-    const startTime = performance.now();
-
-    // Update timer every 100ms
-    const timerInterval = setInterval(() => {
-      const elapsed = (performance.now() - startTime) / 1000;
-      if (timerEl) timerEl.textContent = elapsed.toFixed(1) + 's';
-    }, 100);
-
-    // Stream the thinking content in small text chunks
-    await streamMarkdownInto(contentEl, content, Math.max(baseDelay * 0.7, 6));
-
-    clearInterval(timerInterval);
-    const elapsed = (performance.now() - startTime) / 1000;
-
-    // Finalize: replace spinner with chevron, update label, collapse
-    if (blockEl) {
-      const header = qs('.thinking-header', blockEl);
-      if (header) {
-        header.innerHTML = `
-          <div class="thinking-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg></div>
-          <span class="thinking-label">Thinking for ${elapsed.toFixed(1)}s</span>
-          <span class="thinking-timer">${elapsed.toFixed(1)}s</span>`;
+
+    /* ═══════════════════════════════════════════════
+       SCROLL
+    ═══════════════════════════════════════════════ */
+    function isNearBottom() {
+      const c = $('chat');
+      return c.scrollHeight - c.scrollTop - c.clientHeight < 72;
+    }
+    function setJumpLatest(visible) {
+      const btn = $('jumpLatest');
+      if (btn) btn.classList.toggle('show', !!visible);
+    }
+
+    let scrollRAF = null;
+    function scrollBottom(force = false) {
+      if (scrollRAF) return;
+      scrollRAF = requestAnimationFrame(() => {
+        scrollRAF = null;
+        const c = $('chat');
+        if (!c) return;
+        if (force || S.atBottom || isNearBottom()) {
+          c.scrollTop = c.scrollHeight;
+          setJumpLatest(false);
+          S.atBottom = true;
+        } else {
+          setJumpLatest(true);
+        }
+      });
+    }
+
+    function updateScrollProgress() {
+      const c = $('chat');
+      const bar = $('scrollProgress');
+      if (!c || !bar) return;
+      const pct = c.scrollHeight <= c.clientHeight ? 0
+        : (c.scrollTop / (c.scrollHeight - c.clientHeight)) * 100;
+      bar.style.width = pct.toFixed(1) + '%';
+    }
+
+    /* ═══════════════════════════════════════════════
+       DOM HELPERS
+    ═══════════════════════════════════════════════ */
+    function appendHTML(target, html) {
+      if (!html) return;
+      const tpl = document.createElement('template');
+      tpl.innerHTML = html.trim();
+      target.appendChild(tpl.content);
+    }
+
+    /* ═══════════════════════════════════════════════
+       ANIMATE TEXT
+    ═══════════════════════════════════════════════ */
+    async function animateText(el, text) {
+      if (!el) return;
+      const mode = S.animMode;
+      const delays = { none: 0, ai: 60, human: 90, diffusion: 130, 'diffusion-v2': 170 };
+      const delay = delays[mode] ?? 0;
+      const html = renderMarkdown(text);
+
+      if (mode === 'none') {
+        el.innerHTML = html;
+        bindCodeCopyButtons(el);
+        return;
       }
-      // Close the block after a brief pause
-      await sleep(300);
-      blockEl.classList.remove('open');
-    }
-    scrollBottom();
-  }
-
-  // Streams markdown into an element character-by-character in small chunks
-  // giving a true autoregressive feel: text appears word by word
-  async function streamMarkdownInto(el, md, baseDelay) {
-    const lines = String(md || '').split('\n');
-    let buffer = '';
-
-    for (let li = 0; li < lines.length; li++) {
-      const line = lines[li];
-      const words = line.split(/(\s+)/); // Split keeping whitespace
-
-      for (const word of words) {
-        buffer += word;
-        // Render the buffer as markdown periodically (every word or two)
-        el.innerHTML = renderMarkdown(buffer);
+
+      const tmp = document.createElement('div');
+      tmp.innerHTML = html;
+      el.innerHTML = '';
+
+      for (const node of Array.from(tmp.childNodes)) {
+        const n = node.cloneNode(true);
+        if (n.nodeType === 1) {
+          n.classList.add('answer-reveal');
+          el.appendChild(n);
+          requestAnimationFrame(() => n.classList.add('revealed'));
+        } else {
+          el.appendChild(n);
+        }
         scrollBottom();
-        // Variable delay: longer for sentence endings, shorter for spaces
-        const isPunctuation = /[.!?;:]$/.test(word.trim());
-        const isSpace = /^\s+$/.test(word);
-        const delay = isSpace ? baseDelay * 0.3 : isPunctuation ? baseDelay * 2.5 : baseDelay;
         await sleep(delay);
       }
-      // Add newline to buffer
-      if (li < lines.length - 1) buffer += '\n';
-    }
-    // Final render to be safe
-    el.innerHTML = renderMarkdown(buffer);
-    bindCodeCopy(el);
-  }
-
-  // Animate regular (non-thinking) markdown content with the same streaming approach
-  async function animateMarkdownChunked(container, text, baseDelay) {
-    // Create a wrapper span for this text segment
-    const wrapper = document.createElement('div');
-    wrapper.style.display = 'contents';
-    container.appendChild(wrapper);
-
-    await streamMarkdownInto(wrapper, text, baseDelay);
-  }
-
-  // Render all segments at once (for non-animated / static render)
-  function renderSegments(segments, elapsed) {
-    return segments.map(seg => {
-      if (seg.type === 'thinking') return renderThinkingBlock(seg.content, elapsed);
-      return renderMarkdown(seg.content);
-    }).join('');
-  }
-
-  // ═══════════ THINKING TOGGLES ═══════════
-  function bindThinkingToggles(ctx = document) {
-    qsa('[data-thinking-toggle]', ctx).forEach(h => {
-      if (h._bound) return; h._bound = true;
-      h.addEventListener('click', () => {
-        const block = $(h.getAttribute('data-thinking-toggle'));
-        if (!block) return;
-        const open = block.classList.toggle('open');
-        h.setAttribute('aria-expanded', String(open));
+      bindCodeCopyButtons(el);
+    }
+
+    /* ═══════════════════════════════════════════════
+       TYPING INDICATOR
+    ═══════════════════════════════════════════════ */
+    function showTyping() {
+      removeTyping();
+      $('transcript').insertAdjacentHTML('beforeend', `
+        <div class="typing-indicator" id="typingInd" aria-label="Loading response" role="status">
+          <div class="avatar assistant" aria-hidden="true">✦</div>
+          <div class="typing-dots" aria-hidden="true"><span></span><span></span><span></span></div>
+        </div>`);
+      scrollBottom();
+    }
+    function removeTyping() { const el = $('typingInd'); if (el) el.remove(); }
+
+    /* ═══════════════════════════════════════════════
+       LIGHTBOX
+    ═══════════════════════════════════════════════ */
+    function openLightbox(src, alt) {
+      const lb = $('lightbox');
+      const img = $('lightboxImg');
+      img.src = src;
+      img.alt = alt || '';
+      lb.classList.add('open');
+      $('lightboxClose').focus();
+      document.addEventListener('keydown', closeLightboxOnKey);
+    }
+    function closeLightbox() {
+      $('lightbox').classList.remove('open');
+      $('lightboxImg').src = '';
+      document.removeEventListener('keydown', closeLightboxOnKey);
+    }
+    function closeLightboxOnKey(e) { if (e.key === 'Escape') closeLightbox(); }
+
+    /* ═══════════════════════════════════════════════
+       CODE COPY BUTTONS
+    ═══════════════════════════════════════════════ */
+    function bindCodeCopyButtons(ctx = document) {
+      qsa('[data-copy-code]', ctx).forEach(btn => {
+        if (btn._bound) return;
+        btn._bound = true;
+        btn.addEventListener('click', async () => {
+          const code = decodeURIComponent(btn.getAttribute('data-copy-code'));
+          try {
+            await navigator.clipboard.writeText(code);
+            btn.textContent = 'Copied!';
+            btn.classList.add('copied');
+            setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
+          } catch { toast('Could not copy', 'bad'); }
+        });
       });
-      h.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); h.click(); } });
-    });
-  }
-
-  // ═══════════ CODE COPY ═══════════
-  function bindCodeCopy(ctx = document) {
-    qsa('[data-copy-code]', ctx).forEach(btn => {
-      if (btn._bound) return; btn._bound = true;
-      btn.addEventListener('click', async () => {
-        try { await navigator.clipboard.writeText(decodeURIComponent(btn.getAttribute('data-copy-code')));
-          btn.textContent = 'Copied!'; btn.classList.add('copied'); setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
-        } catch { toast('Could not copy','bad'); }
+    }
+
+    /* ═══════════════════════════════════════════════
+       ANSWER HELPERS
+    ═══════════════════════════════════════════════ */
+    function activeVersion(answer) {
+      const v = answer?.versions || [];
+      if (!v.length) return null;
+      let f = v.find(x => x.id === answer.active_version);
+      if (f) return f;
+      return [...v].sort((a, b) => {
+        const d = Number(b.votes || 0) - Number(a.votes || 0);
+        return d !== 0 ? d : String(b.created_at || '').localeCompare(String(a.created_at || ''));
+      })[0];
+    }
+    function answerScore(a) { const v = activeVersion(a); return v ? Number(v.votes || 0) : 0; }
+    function sortedAnswers(conv) {
+      return [...(conv?.answers || [])].sort((a, b) => {
+        const d = answerScore(b) - answerScore(a);
+        return d !== 0 ? d : String(b.created_at || '').localeCompare(String(a.created_at || ''));
       });
-    });
-  }
-
-  // ═══════════ LIGHTBOX ═══════════
-  function openLightbox(src, alt) { $('lightboxImg').src = src; $('lightboxImg').alt = alt || ''; $('lightbox').classList.add('open'); $('lightboxClose').focus(); }
-  function closeLightbox() { $('lightbox').classList.remove('open'); $('lightboxImg').src = ''; }
-
-  // ═══════════ ANSWER HELPERS ═══════════
-  function activeVer(a) {
-    const v = a?.versions || []; if (!v.length) return null;
-    let f = v.find(x => x.id === a.active_version);
-    return f || [...v].sort((a,b) => (Number(b.votes||0) - Number(a.votes||0)) || String(b.created_at||'').localeCompare(String(a.created_at||'')))[0];
-  }
-  function aScore(a) { const v = activeVer(a); return v ? Number(v.votes||0) : 0; }
-  function sortedAnswers(c) { return [...(c?.answers||[])].sort((a,b) => (aScore(b)-aScore(a)) || String(b.created_at||'').localeCompare(String(a.created_at||''))); }
-
-  // ═══════════ RENDER BLOCKS ═══════════
-  function renderVoteRow(aid, ver) {
-    const my = ver.votes_by_client?.[S.clientId], vu = my === 1, vd = my === -1, cnt = Number(ver.votes||0);
-    return `<div class="vote-row">
-      <button class="vote-btn ${vu?'voted-up':''}" data-vote="${aid}|${ver.id}|1" aria-label="Upvote (${cnt})" aria-pressed="${vu}">▲ <span class="vote-count"><span class="vote-count-inner">${cnt}</span></span></button>
-      <button class="vote-btn ${vd?'voted-down':''}" data-vote="${aid}|${ver.id}|-1" aria-label="Downvote" aria-pressed="${vd}">▼</button>
-      <button class="action-btn" data-copy-answer="${aid}"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy</button>
-    </div>`;
-  }
-  function renderVersions(a) {
-    const act = activeVer(a), oth = (a.versions||[]).filter(v => v.id !== act?.id);
-    if (!oth.length) return '';
-    return `<button class="versions-toggle" data-toggle-versions="${a.id}" aria-expanded="false"><span class="arrow" aria-hidden="true">▶</span> ${oth.length} version${oth.length>1?'s':''}</button>
-      <div class="versions-panel" id="vp-${a.id}">${oth.map(v => `<div class="version-card"><div class="version-head"><span>${esc(v.author||'Anon')}</span>·<span>${relativeTime(v.created_at)}</span>·<span>${Number(v.votes||0)} votes</span></div><div class="version-text">${renderMarkdown(v.text||'')}</div>${renderVoteRow(a.id, v)}</div>`).join('')}</div>`;
-  }
-  function renderPropose(aid) {
-    return `<button class="action-btn" data-propose="${aid}" title="Suggest improved version" aria-expanded="false">✏ Propose version</button>
-      <div class="propose-panel" id="pp-${aid}"><textarea class="propose-textarea" placeholder="Write a better version…" rows="3" aria-label="Proposed version" maxlength="5000"></textarea><div class="char-count"><span class="cc-cur">0</span> / 5000</div><div class="propose-actions"><button class="propose-submit" data-submit-proposal="${aid}">Submit</button><button class="propose-cancel" data-cancel-propose="${aid}">Cancel</button></div></div>`;
-  }
-  function renderWriteAnswer() {
-    return `<button class="write-answer-btn" id="writeAnswerBtn" aria-controls="writePanel" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><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>
-      <div class="write-panel" id="writePanel"><div class="write-tabs" role="tablist"><button class="write-tab active" role="tab" id="writeTabEdit" aria-selected="true">Write</button><button class="write-tab" role="tab" id="writeTabPreview" aria-selected="false">Preview</button></div><div id="writeEditorPane"><textarea class="write-textarea" id="writeTextarea" placeholder="Write your answer here… Markdown supported." rows="4" maxlength="5000"></textarea></div><div id="writePreviewPane" class="write-preview"></div><div class="char-count" id="writeCharCount"><span id="writeCharCur">0</span> / 5000</div><div class="write-actions"><button class="write-submit" id="writeSubmit">Submit answer</button><button class="write-cancel" id="writeCancel">Cancel</button></div></div>`;
-  }
-  function renderAnswerBlock(a, idx, isBest) {
-    const v = activeVer(a); if (!v) return '';
-    const raw = v.text || '';
-    const label = isBest ? '<span class="chip good">✓ best answer</span>' : `<span class="chip muted">answer ${idx+1}</span>`;
-    const cls = isBest ? 'best-answer-bubble answer-new-glow' : 'bubble';
-    return `<div ${isBest?'id="bestAnswerText"':''} class="${cls}" tabindex="-1">${isBest ? '' : renderSegments(extractThinking(raw), null)}</div>
-      <div class="turn-meta">${label}${qualityDots(raw)}<span>${esc(v.author||'Anon')}</span>·<span>${relativeTime(v.created_at)}</span></div>
-      ${renderVoteRow(a.id, v)}
-      <div style="display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-1);">${renderVersions(a)}${renderPropose(a.id)}</div>`;
-  }
-  function renderOtherAnswers(answers) {
-    if (answers.length <= 1) return '';
-    const oth = answers.slice(1);
-    return `<button class="other-answers-toggle" id="otherAnswersToggle" aria-expanded="false"><span class="arrow" aria-hidden="true">▶</span> ${oth.length} other answer${oth.length>1?'s':''}</button>
-      <div class="other-answers-panel" id="otherAnswersPanel">${oth.map((a,i) => { const v = activeVer(a); if (!v) return ''; return `<div class="other-answer-card"><div class="other-answer-head"><span class="chip muted">answer ${i+2}</span><span>${esc(v.author||'Anon')}</span>·<span>${relativeTime(v.created_at)}</span>${qualityDots(v.text||'')}</div><div class="other-answer-text">${renderSegments(extractThinking(v.text||''), null)}</div>${renderVoteRow(a.id, v)}<div style="display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-1);">${renderVersions(a)}${renderPropose(a.id)}</div></div>`; }).join('')}</div>`;
-  }
-  function renderRelated(rel) {
-    if (!rel?.length) return '';
-    return `<div class="related-stack"><div class="chip muted">from similar questions</div>
-      <button class="related-toggle" id="relatedToggle" aria-expanded="false"><span class="arrow" aria-hidden="true">▶</span> ${rel.length} related answer${rel.length>1?'s':''}</button>
-      <div class="related-panel" id="relatedPanel">${rel.map(r => `<div class="other-answer-card related"><div class="other-answer-head"><span class="chip matched">related</span><span>${esc(r.question||'')}</span>·<span class="chip related-score">score ${Number(r.score||0).toFixed(2)}</span></div><div class="other-answer-text">${renderMarkdown(r.answer||'')}</div></div>`).join('')}<p class="related-note">Read-only answers from similar questions.</p></div></div>`;
-  }
-
-  // ═══════════ MAIN RENDER ═══════════
-  async function renderConversation(q, doAnimate) {
-    const tr = $('transcript'), wl = $('welcome'), frag = document.createDocumentFragment();
-    if (!S.conversation) { wl.style.display = ''; tr.replaceChildren(); setJump(false); document.title = S.originalTitle; updateWelcome(); return; }
-    wl.style.display = 'none';
-    q = q || S.conversation.question || '';
-    document.title = q.slice(0,60) + ' — ' + S.originalTitle;
-    if (S.conversation.id) history.replaceState({ cid: S.conversation.id }, '', `/q/${S.conversation.id}`);
-    const isNew = !S.conversation.created_at || (Date.now() - new Date(S.conversation.created_at).getTime()) < 10000;
-    appendHTML(frag, `<div class="turn user new-turn"><div><div class="bubble">${nl2br(q)}</div><div class="turn-meta"><span class="chip muted">question</span><span>${relativeTime(S.conversation.created_at)}</span></div><div class="question-note">${isNew ? '🆕 First to ask this!' : 'Asked ' + relativeTime(S.conversation.created_at)}</div></div><div class="avatar user" aria-hidden="true">U</div></div>`);
-    const answers = sortedAnswers(S.conversation);
-    if (!answers.length) {
-      appendHTML(frag, `<div class="turn assistant new-turn"><div class="avatar assistant" aria-hidden="true">✦</div><div><div class="bubble no-answer-bubble" role="status">⏳ No answer yet. Be the first to write one.</div><div class="turn-meta"><span class="chip warn">⏳ awaiting answer</span></div>${renderWriteAnswer()}<div id="relatedMount"></div></div></div>`);
-    } else {
-      appendHTML(frag, `<div class="turn assistant new-turn"><div class="avatar assistant" aria-hidden="true">✦</div><div style="min-width:0;flex:1;">${renderAnswerBlock(answers[0], 0, true)}${renderWriteAnswer()}${renderOtherAnswers(answers)}<div id="relatedMount"></div></div></div>`);
-    }
-    tr.replaceChildren(frag);
-    if (answers.length) {
-      const bv = activeVer(answers[0]);
-      if (bv) { const el = $('bestAnswerText');
-        if (doAnimate) await animateText(el, bv.text || '');
-        else if (el) { el.innerHTML = renderSegments(extractThinking(bv.text||''), null); bindCodeCopy(el); bindThinkingToggles(el); }
-      }
     }
-    const rm = $('relatedMount');
-    if (rm && S.relatedAnswers.length) { rm.innerHTML = renderRelated(S.relatedAnswers); }
-    bindHandlers(); scrollBottom(); restoreDraft();
-  }
-
-  // ═══════════ DRAFTS ═══════════
-  function draftKey() { return S.conversation ? `hi_draft_${S.conversation.id}` : null; }
-  function saveDraft(t) { const k = draftKey(); if (k) { t ? localStorage.setItem(k,t) : localStorage.removeItem(k); } }
-  function clearDraft() { const k = draftKey(); if (k) localStorage.removeItem(k); }
-  function restoreDraft() {
-    const k = draftKey(); if (!k) return;
-    const s = localStorage.getItem(k), ta = $('writeTextarea');
-    if (s && ta) { ta.value = s; updateCC(ta,'writeCharCur',5000); const p = $('writePanel'), b = $('writeAnswerBtn'); if (p && b) { p.classList.add('open'); b.setAttribute('aria-expanded','true'); } }
-  }
-  function updateCC(ta, spanId, max) {
-    const sp = $(spanId); if (!sp) return; const l = ta.value.length; sp.textContent = l;
-    const r = sp.closest('.char-count');
-    if (r) { r.classList.toggle('near-limit', l > max*.85 && l <= max); r.classList.toggle('over-limit', l > max); }
-  }
-  function updateWelcome() {
-    const t = $('welcomeTitle'); if (!t) return;
-    t.textContent = localStorage.getItem('hi_last_cid') ? 'Welcome back. Ask something new.' : 'Ask a question. Get answers from real people.';
-  }
-
-  // ═══════════ EVENT DELEGATION ═══════════
-  function bindHandlers() {
-    const tr = $('transcript'); if (tr._del) return; tr._del = true;
-    tr.addEventListener('click', async e => {
-      const t = e.target;
-      let el;
-      if ((el = t.closest('[data-vote]'))) return handleVote(el);
-      if ((el = t.closest('[data-copy-answer]'))) return handleCopyAnswer(el);
-      if ((el = t.closest('[data-toggle-versions]'))) return togglePanel(el, 'vp-' + el.getAttribute('data-toggle-versions'));
-      if (t.closest('#otherAnswersToggle')) return togglePanel($('otherAnswersToggle'), 'otherAnswersPanel');
-      if (t.closest('#relatedToggle')) return togglePanel($('relatedToggle'), 'relatedPanel');
-      if ((el = t.closest('[data-propose]'))) return togglePanel(el, 'pp-' + el.getAttribute('data-propose'), () => { const ta = qs('textarea', $('pp-' + el.getAttribute('data-propose'))); if (ta) setTimeout(() => ta.focus(), 80); });
-      if ((el = t.closest('[data-cancel-propose]'))) { const id = el.getAttribute('data-cancel-propose'); $('pp-'+id)?.classList.remove('open'); qs(`[data-propose="${id}"]`)?.setAttribute('aria-expanded','false'); return; }
-      if ((el = t.closest('[data-submit-proposal]'))) return handleSubmitProposal(el);
-      if (t.closest('#writeAnswerBtn')) { const p = $('writePanel'), b = $('writeAnswerBtn'); if (p && b) { const o = p.classList.toggle('open'); b.setAttribute('aria-expanded', String(o)); if (o) setTimeout(() => $('writeTextarea')?.focus(), 100); } return; }
-      if (t.closest('#writeCancel')) { $('writePanel')?.classList.remove('open'); $('writeAnswerBtn')?.setAttribute('aria-expanded','false'); $('writeAnswerBtn')?.focus(); return; }
-      if (t.closest('#writeSubmit')) return handleWriteSubmit();
-      if (t.closest('#writeTabEdit')) return handleWriteTab('edit');
-      if (t.closest('#writeTabPreview')) return handleWriteTab('preview');
-      if ((el = t.closest('[data-thinking-toggle]'))) {
-        const block = $(el.getAttribute('data-thinking-toggle'));
-        if (block) { const o = block.classList.toggle('open'); el.setAttribute('aria-expanded', String(o)); }
+
+    /* ═══════════════════════════════════════════════
+       RENDER HELPERS
+    ═══════════════════════════════════════════════ */
+    function renderVoteRow(answerId, ver) {
+      const myVote = ver.votes_by_client?.[S.clientId];
+      const vu = myVote === 1;
+      const vd = myVote === -1;
+      const cnt = Number(ver.votes || 0);
+      const upLabel = `Upvote. Currently ${cnt} vote${cnt !== 1 ? 's' : ''}. ${vu ? 'You voted.' : 'Not voted.'}`;
+      const dnLabel = `Downvote.${vd ? ' You voted.' : ''}`;
+      return `<div class="vote-row">
+        <button class="vote-btn ${vu ? 'voted-up' : ''}" data-vote="${answerId}|${ver.id}|1" aria-label="${esc(upLabel)}" aria-pressed="${vu}">
+          ▲ <span class="vote-count"><span class="vote-count-inner">${cnt}</span></span>
+        </button>
+        <button class="vote-btn ${vd ? 'voted-down' : ''}" data-vote="${answerId}|${ver.id}|-1" aria-label="${esc(dnLabel)}" aria-pressed="${vd}">▼</button>
+        <button class="action-btn" data-copy-answer="${answerId}" data-answer-id="${ver.id}">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          Copy
+        </button>
+      </div>`;
+    }
+
+    function renderVersions(answer) {
+      const act = activeVersion(answer);
+      const others = (answer.versions || []).filter(v => v.id !== act?.id);
+      if (!others.length) return '';
+      return `
+        <button class="versions-toggle" type="button" data-toggle-versions="${answer.id}" aria-controls="vp-${answer.id}" aria-expanded="false">
+          <span class="arrow" aria-hidden="true">▶</span> ${others.length} version${others.length > 1 ? 's' : ''}
+        </button>
+        <div class="versions-panel" id="vp-${answer.id}" role="region" aria-label="Other versions">
+          ${others.map(v => `
+            <div class="version-card">
+              <div class="version-head">
+                <span>${esc(v.author || 'Anonymous')}</span><span aria-hidden="true">·</span>
+                <span>${relativeTime(v.created_at)}</span><span aria-hidden="true">·</span>
+                <span>${Number(v.votes || 0)} vote${Number(v.votes || 0) !== 1 ? 's' : ''}</span>
+              </div>
+              <div class="preview-block">
+                <span class="preview-label">A</span>
+                <div class="preview-text">${esc(previewText(v.text || ''))}</div>
+              </div>
+              <div class="preview-actions">
+                ${renderVoteRow(answer.id, v)}
+                <button class="ask-btn" type="button" data-ask-current="1" aria-label="Ask this question again in a fresh conversation">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                  Ask
+                </button>
+              </div>
+            </div>`).join('')}
+        </div>`;
+    }
+
+    function renderPropose(answerId) {
+      return `
+        <button class="action-btn" type="button" data-propose="${answerId}" aria-controls="pp-${answerId}" aria-expanded="false"
+          title="Suggest an improved version of this answer">
+          ✏ Propose version
+        </button>
+        <div class="propose-panel" id="pp-${answerId}" role="region" aria-label="Propose version">
+          <textarea class="propose-textarea" placeholder="Write a better version…" rows="3" aria-label="Proposed version text"></textarea>
+          <div class="char-count"><span class="cc-cur">0</span> / 5000</div>
+          <div class="propose-actions">
+            <button class="propose-submit" data-submit-proposal="${answerId}">Submit</button>
+            <button class="propose-cancel" data-cancel-propose="${answerId}">Cancel</button>
+          </div>
+        </div>`;
+    }
+
+    function renderWriteAnswer(convId) {
+      return `
+        <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" aria-hidden="true"><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>
+        <div class="write-panel" id="writePanel" role="region" aria-label="Write your answer">
+          <div class="write-tabs" role="tablist">
+            <button class="write-tab active" role="tab" id="writeTabEdit" aria-selected="true" aria-controls="writeEditorPane">Write</button>
+            <button class="write-tab" role="tab" id="writeTabPreview" aria-selected="false" aria-controls="writePreviewPane">Preview</button>
+          </div>
+          <div id="writeEditorPane" role="tabpanel" aria-labelledby="writeTabEdit">
+            <textarea class="write-textarea" id="writeTextarea" placeholder="Write your answer here… Markdown is supported." rows="4" aria-label="Your answer" maxlength="5000"></textarea>
+          </div>
+          <div id="writePreviewPane" role="tabpanel" aria-labelledby="writeTabPreview" class="write-preview"></div>
+          <div class="char-count" id="writeCharCount"><span id="writeCharCur">0</span> / 5000</div>
+          <div class="write-actions">
+            <button class="write-submit" id="writeSubmit">Submit answer</button>
+            <button class="write-cancel" id="writeCancel">Cancel</button>
+          </div>
+        </div>`;
+    }
+
+    function renderAnswerBlock(answer, idx, isBest) {
+      const v = activeVersion(answer);
+      if (!v) return '';
+      const rawText = v.text || '';
+      const label = isBest
+        ? `<span class="chip good">✓ best answer</span>`
+        : `<span class="chip muted">answer ${idx + 1}</span>`;
+      const bubbleId = isBest ? 'id="bestAnswerText"' : '';
+      const bubbleClass = isBest ? 'best-answer-bubble' : 'bubble';
+      const glowClass = isBest ? 'answer-new-glow' : '';
+      return `
+        <div ${bubbleId} class="${bubbleClass} ${glowClass}" tabindex="-1">${isBest ? '' : renderMarkdown(rawText)}</div>
+        <div class="turn-meta" style="margin-top:var(--space-1);">
+          ${label}
+          ${renderQualityDots(rawText)}
+          <span>${esc(v.author || 'Anonymous')}</span><span aria-hidden="true">·</span>
+          <span>${relativeTime(v.created_at)}</span>
+        </div>
+        ${renderVoteRow(answer.id, v)}
+        <div style="display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-1);">
+          ${renderVersions(answer)}
+          ${renderPropose(answer.id)}
+        </div>`;
+    }
+
+    function renderOtherAnswers(answers) {
+      if (answers.length <= 1) return '';
+      const others = answers.slice(1);
+      return `
+        <button class="other-answers-toggle" type="button" id="otherAnswersToggle" aria-controls="otherAnswersPanel" aria-expanded="false">
+          <span class="arrow" aria-hidden="true">▶</span> ${others.length} other answer${others.length > 1 ? 's' : ''}
+        </button>
+        <div class="other-answers-panel" id="otherAnswersPanel" role="region" aria-label="Other answers">
+          ${others.map((a, i) => {
+            const v = activeVersion(a);
+            if (!v) return '';
+            return `
+              <div class="other-answer-card">
+                <div class="other-answer-head">
+                  <span class="chip muted">answer ${i + 2}</span>
+                  <span>${esc(v.author || 'Anonymous')}</span><span aria-hidden="true">·</span>
+                  <span>${relativeTime(v.created_at)}</span>
+                  ${renderQualityDots(v.text || '')}
+                </div>
+                <div class="other-answer-text">${renderMarkdown(v.text || '')}</div>
+                ${renderVoteRow(a.id, v)}
+                <div style="display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-1);">
+                  ${renderVersions(a)}
+                  ${renderPropose(a.id)}
+                </div>
+              </div>`;
+          }).join('')}
+        </div>`;
+    }
+
+    function renderRelated(rel) {
+      if (!rel || !rel.length) return '';
+      return `
+        <div class="related-stack">
+          <div class="chip muted">from similar questions</div>
+          <button class="related-toggle" type="button" id="relatedToggle" aria-controls="relatedPanel" aria-expanded="false">
+            <span class="arrow" aria-hidden="true">▶</span> ${rel.length} related answer${rel.length > 1 ? 's' : ''}
+          </button>
+          <div class="related-panel" id="relatedPanel" role="region" aria-label="Related answers">
+            ${rel.map(r => {
+              const q = String(r.question || '');
+              return `
+              <div class="other-answer-card related">
+                <div class="other-answer-head">
+                  <span class="chip matched">related</span>
+                  <span class="chip related-score">score ${Number(r.score || 0).toFixed(2)}</span>
+                </div>
+                <div class="preview-block">
+                  <span class="preview-label">Q</span>
+                  <div class="preview-text">${esc(previewText(q))}</div>
+                </div>
+                <div class="preview-block">
+                  <span class="preview-label">A</span>
+                  <div class="preview-text muted-preview">${esc(previewText(r.answer || ''))}</div>
+                </div>
+                <div class="preview-actions">
+                  <button class="ask-btn" type="button" data-ask-question="${esc(q)}" aria-label="Ask this question">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    Ask
+                  </button>
+                </div>
+              </div>`;
+            }).join('')}
+            <p class="related-note">Previews of answers from semantically similar questions. Click Ask to start a fresh conversation.</p>
+          </div>
+        </div>`;
+    }
+
+    /* ═══════════════════════════════════════════════
+       MAIN RENDER
+    ═══════════════════════════════════════════════ */
+    async function renderConversation(questionText, doAnimate) {
+      const tr = $('transcript');
+      const wl = $('welcome');
+      const frag = document.createDocumentFragment();
+
+      if (!S.conversation) {
+        wl.style.display = '';
+        tr.replaceChildren();
+        setJumpLatest(false);
+        document.title = S.originalTitle;
+        updateWelcomeState();
         return;
       }
-      if ((el = t.closest('.md-img'))) return openLightbox(el.src, el.alt);
-    });
-    tr.addEventListener('input', e => {
-      const ta = e.target; if (ta.tagName !== 'TEXTAREA') return;
-      autoGrow(ta);
-      if (ta.id === 'writeTextarea') { updateCC(ta,'writeCharCur',5000); saveDraft(ta.value); const pv = $('writePreviewPane'); if (pv?.classList.contains('active')) { pv.innerHTML = renderMarkdown(ta.value); bindCodeCopy(pv); } }
-      else { const p = ta.closest('.propose-panel'); if (p) { const sp = qs('.cc-cur',p); if (sp) sp.textContent = ta.value.length; } }
-    });
-  }
-
-  function togglePanel(btn, panelId, onOpen) {
-    const p = $(panelId); if (!p) return;
-    const o = p.classList.toggle('open'); btn.classList?.toggle('open', o); btn.setAttribute('aria-expanded', String(o));
-    if (o && onOpen) onOpen();
-  }
-
-  const handleVote = debounceClick(async btn => {
-    if (!S.conversation) return;
-    const [aid, vid, d] = btn.getAttribute('data-vote').split('|'), delta = Number(d);
-    const ans = (S.conversation.answers||[]).find(a => a.id === aid), ver = ans?.versions?.find(v => v.id === vid);
-    const my = ver?.votes_by_client?.[S.clientId], effective = my === delta ? 0 : delta;
-    const cEl = qs('.vote-count-inner', btn.parentElement), prev = cEl ? Number(cEl.textContent) : 0;
-    if (cEl) { cEl.style.transform = `translateY(${delta>0?'-':''}100%)`; requestAnimationFrame(() => { cEl.textContent = prev + (effective === 0 ? -delta : delta); cEl.style.transform = ''; }); }
-    btn.classList.toggle('voted-up', effective===1); btn.classList.toggle('voted-down', effective===-1); haptic();
-    S.lastAction = () => handleVote(btn);
-    const res = await callAPI('vote', { conversation_id: S.conversation.id, answer_id: aid, version_id: vid, delta: effective });
-    if (res.ok) { S.conversation = res.conversation; save(); } else { if (cEl) cEl.textContent = prev; btn.classList.toggle('voted-up', my===1); btn.classList.toggle('voted-down', my===-1); toast(res.error||'Vote failed','bad',S.lastAction); }
-  });
-
-  async function handleCopyAnswer(btn) {
-    const a = (S.conversation?.answers||[]).find(x => x.id === btn.getAttribute('data-copy-answer'));
-    const v = activeVer(a); if (!v) return;
-    try { await navigator.clipboard.writeText(v.text||''); toast('Answer copied','good'); } catch { toast('Could not copy','bad'); }
-  }
-
-  const handleSubmitProposal = debounceClick(async btn => {
-    const aid = btn.getAttribute('data-submit-proposal'), box = $('pp-'+aid), ta = box ? qs('textarea',box) : null;
-    const text = ta?.value.trim(); if (!text) { toast('Empty','bad'); return; } if (!S.conversation) return;
-    btn.disabled = true; btn.textContent = 'Saving…'; showStatus('Saving…');
-    const res = await callAPI('propose', { conversation_id: S.conversation.id, answer_id: aid, text });
-    hideStatus(); btn.disabled = false; btn.textContent = 'Submit';
-    if (res.ok) { S.conversation = res.conversation; save(); renderConversation(S.currentQuestion, false); toast('Version proposed','good'); } else toast(res.error||'Error','bad');
-  });
-
-  function handleWriteTab(mode) {
-    const eT = $('writeTabEdit'), pT = $('writeTabPreview'), eP = $('writeEditorPane'), pP = $('writePreviewPane');
-    if (!eT || !pT || !eP || !pP) return;
-    if (mode === 'edit') { eT.classList.add('active'); eT.setAttribute('aria-selected','true'); pT.classList.remove('active'); pT.setAttribute('aria-selected','false'); eP.style.display = ''; pP.style.display = 'none'; pP.classList.remove('active'); $('writeTextarea')?.focus(); }
-    else { pT.classList.add('active'); pT.setAttribute('aria-selected','true'); eT.classList.remove('active'); eT.setAttribute('aria-selected','false'); eP.style.display = 'none'; pP.style.display = ''; pP.classList.add('active'); pP.innerHTML = renderMarkdown($('writeTextarea')?.value || ''); bindCodeCopy(pP); }
-  }
-
-  const handleWriteSubmit = debounceClick(async () => {
-    const ta = $('writeTextarea'), text = ta?.value.trim(); if (!text) { toast('Empty','bad'); return; } if (!S.conversation) return;
-    const ws = $('writeSubmit'); if (ws) { ws.disabled = true; ws.textContent = 'Saving…'; } showStatus('Saving answer…');
-    const res = await callAPI('answer', { conversation_id: S.conversation.id, text, question: S.currentQuestion });
-    hideStatus(); if (ws) { ws.disabled = false; ws.textContent = 'Submit answer'; }
-    if (res.ok) { S.conversation = res.conversation; clearDraft(); save(); await renderConversation(S.currentQuestion, false); toast('Answer saved','good'); setTimeout(() => { const el = $('bestAnswerText'); if (el) { el.tabIndex = -1; el.focus(); } }, 200); }
-    else toast(res.error||'Error','bad');
-  });
-
-  // ═══════════ API ═══════════
-  const inflight = new Set();
-  async function callAPI(action, payload = {}) {
-    const key = action + ':' + JSON.stringify(payload);
-    if (['search','get_conversation'].includes(action) && inflight.has(key)) return { ok: false, error: 'In progress' };
-    inflight.add(key);
-    try {
-      const r = 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 d = await r.json().catch(()=>null);
-      return r.ok ? (d || {ok:false, error:'Empty response'}) : (d || {ok:false, error:`Error (${r.status})`});
-    } catch (e) { return {ok:false, error: e?.message||'Network error'}; }
-    finally { inflight.delete(key); }
-  }
-
-  // ═══════════ ASK / SUBMIT ═══════════
-  async function askQuestion(q) {
-    showStatusEscalating(); showTyping(); S.loading = true; $('sendBtn').disabled = true; closeAC();
-    S.lastAction = () => askQuestion(q);
-    const res = await callAPI('ask', { question: q });
-    removeTyping(); hideStatus(); S.loading = false; $('sendBtn').disabled = false;
-    if (!res.ok) { toast(res.error||'Error','bad',S.lastAction); return; }
-    S.conversation = res.conversation; S.currentQuestion = q;
-    S.relatedAnswers = Array.isArray(res.related) ? res.related : [];
-    save(); toast(res.matched ? '✓ Existing answer found' : '✓ New question created', 'good');
-    await renderConversation(q, true);
-  }
-  async function submitPrompt() { const p = $('prompt'), t = p.value.trim(); if (!t || S.loading) return; p.value = ''; autoGrow(p); await askQuestion(t); }
-  function autoGrow(el) { el.style.height = '0'; const h = Math.min(el.scrollHeight,180)+'px'; requestAnimationFrame(() => { el.style.height = h; }); }
-
-  function showTyping() { removeTyping(); $('transcript').insertAdjacentHTML('beforeend', `<div class="typing-indicator" id="typingInd" role="status"><div class="avatar assistant" aria-hidden="true">✦</div><div class="typing-dots" aria-hidden="true"><span></span><span></span><span></span></div></div>`); scrollBottom(); }
-  function removeTyping() { $('typingInd')?.remove(); }
-
-  // ═══════════ LOAD / SAVE / NEW ═══════════
-  function save() { if (S.conversation) localStorage.setItem('hi_last_cid', S.conversation.id); }
-
-  async function loadSaved() {
-    const id = localStorage.getItem('hi_last_cid'); if (!id) return;
-    $('welcome').style.display = 'none';
-    $('transcript').innerHTML = '<div class="skeleton-wrap"><div class="skeleton skeleton-bubble"></div><div class="skeleton skeleton-line long"></div><div class="skeleton skeleton-line medium"></div><div class="skeleton skeleton-line short"></div></div>';
-    showStatus('Loading conversation…');
-    const res = await callAPI('get_conversation', { conversation_id: id });
-    hideStatus();
-    if (res.ok && res.conversation) { S.conversation = res.conversation; S.currentQuestion = res.conversation.question || ''; S.relatedAnswers = []; renderConversation(S.currentQuestion, false); }
-    else { $('transcript').innerHTML = ''; $('welcome').style.display = ''; updateWelcome(); localStorage.removeItem('hi_last_cid'); }
-  }
-
-  async function newChat() {
-    if (qsa('textarea').some(t => t.value.trim())) { if (!await confirmModal('Start a new chat?','Unsaved content will be lost.')) return; }
-    S.conversation = null; S.currentQuestion = ''; S.relatedAnswers = []; S.atBottom = true;
-    localStorage.removeItem('hi_last_cid'); $('transcript').innerHTML = ''; $('welcome').style.display = '';
-    updateWelcome(); setJump(false); history.replaceState({},'','/'); document.title = S.originalTitle;
-    $('prompt').value = ''; autoGrow($('prompt')); $('prompt').focus();
-  }
-
-  // ═══════════ CONFIRM MODAL ═══════════
-  function confirmModal(title, msg) {
-    return new Promise(resolve => {
-      $('confirmTitle').textContent = title; $('confirmMsg').textContent = msg; $('confirmBackdrop').classList.add('open'); $('confirmOk').focus();
-      const done = r => { $('confirmBackdrop').classList.remove('open'); $('confirmOk').onclick = $('confirmCancel').onclick = null; resolve(r); };
-      $('confirmOk').onclick = () => done(true); $('confirmCancel').onclick = () => done(false);
+
+      wl.style.display = 'none';
+      const q = questionText || S.conversation.question || '';
+
+      // Update document title
+      document.title = q.slice(0, 60) + ' — ' + S.originalTitle;
+
+      // Update URL
+      if (S.conversation.id) {
+        history.replaceState({ cid: S.conversation.id }, '', `/q/${S.conversation.id}`);
+      }
+
+      // Question note
+      const isNew = !S.conversation.created_at ||
+        (Date.now() - new Date(S.conversation.created_at).getTime()) < 10000;
+      const questionNote = isNew
+        ? `<div class="question-note">🆕 You're the first to ask this!</div>`
+        : `<div class="question-note">Asked ${relativeTime(S.conversation.created_at)}</div>`;
+
+      // Question bubble
+      appendHTML(frag, `
+        <div class="turn user new-turn">
+          <div>
+            <div class="bubble">${nl2br(q)}</div>
+            <div class="turn-meta">
+              <span class="chip muted">question</span>
+              <span>${relativeTime(S.conversation.created_at)}</span>
+            </div>
+            ${questionNote}
+          </div>
+          <div class="avatar user" aria-hidden="true">U</div>
+        </div>`);
+
+      const answers = sortedAnswers(S.conversation);
+
+      if (!answers.length) {
+        appendHTML(frag, `
+          <div class="turn assistant new-turn">
+            <div class="avatar assistant" aria-hidden="true">✦</div>
+            <div>
+              <div class="bubble no-answer-bubble" role="status">⏳ No answer yet. Be the first to write one.</div>
+              <div class="turn-meta"><span class="chip warn">⏳ awaiting answer</span></div>
+              ${renderWriteAnswer(S.conversation.id)}
+              <div id="relatedMount"></div>
+            </div>
+          </div>`);
+      } else {
+        const best = answers[0];
+        appendHTML(frag, `
+          <div class="turn assistant new-turn">
+            <div class="avatar assistant" aria-hidden="true">✦</div>
+            <div style="min-width:0;flex:1;">
+              ${renderAnswerBlock(best, 0, true)}
+              ${renderWriteAnswer(S.conversation.id)}
+              ${renderOtherAnswers(answers)}
+              <div id="relatedMount"></div>
+            </div>
+          </div>`);
+      }
+
+      tr.replaceChildren(frag);
+
+      // Animate best answer
+      if (answers.length) {
+        const bestV = activeVersion(answers[0]);
+        if (bestV) {
+          const el = $('bestAnswerText');
+          if (doAnimate) {
+            await animateText(el, bestV.text || '');
+          } else if (el) {
+            el.innerHTML = renderMarkdown(bestV.text || '');
+            bindCodeCopyButtons(el);
+          }
+        }
+      }
+
+      const relatedMount = $('relatedMount');
+      if (relatedMount && S.relatedAnswers.length) {
+        relatedMount.innerHTML = renderRelated(S.relatedAnswers);
+      }
+
+      bindHandlers();
+      scrollBottom();
+
+      // Restore draft if any
+      restoreDraft();
+    }
+
+    /* ═══════════════════════════════════════════════
+       DRAFTS
+    ═══════════════════════════════════════════════ */
+    function draftKey() {
+      return S.conversation ? `hi_draft_${S.conversation.id}` : null;
+    }
+    function saveDraft(text) {
+      const k = draftKey();
+      if (!k) return;
+      if (text) localStorage.setItem(k, text);
+      else localStorage.removeItem(k);
+    }
+    function restoreDraft() {
+      const k = draftKey();
+      if (!k) return;
+      const saved = localStorage.getItem(k);
+      const ta = $('writeTextarea');
+      if (saved && ta) {
+        ta.value = saved;
+        updateCharCount(ta, 'writeCharCur', 5000);
+        // Auto-open the panel if draft exists
+        const panel = $('writePanel');
+        const btn = $('writeAnswerBtn');
+        if (panel && btn) {
+          panel.classList.add('open');
+          btn.setAttribute('aria-expanded', 'true');
+        }
+      }
+    }
+    function clearDraft() { const k = draftKey(); if (k) localStorage.removeItem(k); }
+
+    /* ═══════════════════════════════════════════════
+       CHAR COUNT HELPER
+    ═══════════════════════════════════════════════ */
+    function updateCharCount(ta, spanId, max) {
+      const span = $(spanId);
+      if (!span) return;
+      const len = ta.value.length;
+      span.textContent = len;
+      const row = span.closest('.char-count');
+      if (row) {
+        row.classList.toggle('near-limit', len > max * 0.85 && len <= max);
+        row.classList.toggle('over-limit', len > max);
+      }
+    }
+
+    /* ═══════════════════════════════════════════════
+       WELCOME STATE
+    ═══════════════════════════════════════════════ */
+    function updateWelcomeState() {
+      const title = $('welcomeTitle');
+      if (!title) return;
+      const isReturning = !!localStorage.getItem('hi_last_cid');
+      title.textContent = isReturning
+        ? 'Welcome back. Ask something new.'
+        : 'Ask a question. Get answers from real people.';
+    }
+
+    /* ═══════════════════════════════════════════════
+       BIND HANDLERS (event delegation)
+    ═══════════════════════════════════════════════ */
+    function bindHandlers() {
+      // -- Event delegation on transcript --
+      // (Remove old listener then re-add so we don't stack)
+      const tr = $('transcript');
+      if (tr._delegated) return;
+      tr._delegated = true;
+
+      tr.addEventListener('click', async e => {
+        // Vote
+        const voteBtn = e.target.closest('[data-vote]');
+        if (voteBtn) { await handleVote(voteBtn); return; }
+
+        // Ask a related/similar question
+        const askQ = e.target.closest('[data-ask-question]');
+        if (askQ) { handleAskFromCard(askQ.getAttribute('data-ask-question')); return; }
+
+        // Re-ask the current question
+        if (e.target.closest('[data-ask-current]')) { handleAskFromCard(S.currentQuestion); return; }
+
+        // Copy answer text
+        const copyAns = e.target.closest('[data-copy-answer]');
+        if (copyAns) { await handleCopyAnswer(copyAns); return; }
+
+        // Toggle versions
+        const toggleVer = e.target.closest('[data-toggle-versions]');
+        if (toggleVer) { handleToggleVersions(toggleVer); return; }
+
+        // Other answers toggle
+        if (e.target.closest('#otherAnswersToggle')) { handleTogglePanel('otherAnswersToggle', 'otherAnswersPanel'); return; }
+
+        // Related toggle
+        if (e.target.closest('#relatedToggle')) { handleTogglePanel('relatedToggle', 'relatedPanel'); return; }
+
+        // Propose toggle
+        const proposeBtn = e.target.closest('[data-propose]');
+        if (proposeBtn) { handleProposeToggle(proposeBtn); return; }
+
+        // Cancel propose
+        const cancelProp = e.target.closest('[data-cancel-propose]');
+        if (cancelProp) { handleProposeCancel(cancelProp); return; }
+
+        // Submit proposal
+        const submitProp = e.target.closest('[data-submit-proposal]');
+        if (submitProp) { await handleSubmitProposal(submitProp); return; }
+
+        // Write answer toggle
+        if (e.target.closest('#writeAnswerBtn')) { handleWriteToggle(); return; }
+
+        // Cancel write
+        if (e.target.closest('#writeCancel')) { handleWriteCancel(); return; }
+
+        // Submit write
+        if (e.target.closest('#writeSubmit')) { await handleWriteSubmit(); return; }
+
+        // Write tabs
+        if (e.target.closest('#writeTabEdit')) { handleWriteTab('edit'); return; }
+        if (e.target.closest('#writeTabPreview')) { handleWriteTab('preview'); return; }
+
+        // Image lightbox
+        const img = e.target.closest('.md-img');
+        if (img) { openLightbox(img.src, img.alt); return; }
+      });
+
+      // Textarea events (can't fully delegate these)
+      tr.addEventListener('input', e => {
+        const ta = e.target;
+        if (ta.tagName !== 'TEXTAREA') return;
+        if (ta.id === 'writeTextarea') {
+          autoGrow(ta);
+          updateCharCount(ta, 'writeCharCur', 5000);
+          saveDraft(ta.value);
+          // Live preview update
+          const preview = $('writePreviewPane');
+          if (preview && preview.classList.contains('write-preview') && !preview.style.display.includes('none')) {
+            preview.innerHTML = renderMarkdown(ta.value);
+          }
+        } else {
+          // Propose textareas
+          autoGrow(ta);
+          const panel = ta.closest('.propose-panel');
+          if (panel) {
+            const ccSpan = qs('.cc-cur', panel);
+            if (ccSpan) {
+              ccSpan.textContent = ta.value.length;
+              const ccRow = qs('.char-count', panel);
+              if (ccRow) {
+                ccRow.classList.toggle('near-limit', ta.value.length > 4250);
+                ccRow.classList.toggle('over-limit', ta.value.length > 5000);
+              }
+            }
+          }
+        }
+      });
+    }
+
+    /* Individual handlers */
+    const handleVote = debounceClick(async (btn) => {
+      if (!S.conversation) return;
+      const [aid, vid, d] = btn.getAttribute('data-vote').split('|');
+      const delta = Number(d);
+
+      // Find current vote state for this version
+      const answers = S.conversation.answers || [];
+      const answer = answers.find(a => a.id === aid);
+      const ver = answer?.versions?.find(v => v.id === vid);
+      const myVote = ver?.votes_by_client?.[S.clientId];
+      // Toggle off if same direction
+      const effectiveDelta = myVote === delta ? 0 : delta;
+
+      // Optimistic update
+      const countEl = qs('.vote-count-inner', btn.parentElement);
+      const prevCount = countEl ? Number(countEl.textContent) : 0;
+      if (countEl) {
+        const newCount = prevCount + (effectiveDelta === 0 ? -delta : delta);
+        countEl.style.transform = `translateY(${delta > 0 ? '-100%' : '100%'})`;
+        requestAnimationFrame(() => {
+          countEl.textContent = newCount;
+          countEl.style.transform = '';
+        });
+      }
+      btn.classList.toggle('voted-up', effectiveDelta === 1);
+      btn.classList.toggle('voted-down', effectiveDelta === -1);
+      if ('vibrate' in navigator) navigator.vibrate(10);
+
+      // Mark card loading
+      const card = btn.closest('.other-answer-card, .best-answer-bubble, [id="bestAnswerText"]')?.parentElement;
+
+      S.lastAction = () => handleVote(btn);
+      const res = await callAPI('vote', {
+        conversation_id: S.conversation.id,
+        answer_id: aid, version_id: vid, delta: effectiveDelta,
+      });
+
+      if (res.ok) {
+        S.conversation = res.conversation;
+        save();
+        // Only update the vote row DOM, not full re-render
+        updateVoteBtn(btn, aid, vid, res.conversation);
+      } else {
+        // Revert
+        if (countEl) countEl.textContent = prevCount;
+        btn.classList.toggle('voted-up', myVote === 1);
+        btn.classList.toggle('voted-down', myVote === -1);
+        toast(res.error || 'Vote failed', 'bad', S.lastAction);
+      }
     });
-  }
-
-  // ═══════════ AUTOCOMPLETE ═══════════
-  const debouncedAC = debounce(async q => {
-    if (!q || q.length < 4) { closeAC(); return; }
-    const res = await callAPI('search', { query: q, limit: 5 });
-    if (!res.ok || !res.results?.length) { closeAC(); return; }
-    const dd = $('autocompleteDropdown');
-    dd.innerHTML = res.results.map((r,i) => `<div class="autocomplete-item" role="option" data-ac-q="${esc(r.question)}">${esc(r.question)}<span class="autocomplete-meta">${Number(r.answer_count||0)} ans</span></div>`).join('');
-    dd.classList.add('open');
-    qsa('.autocomplete-item',dd).forEach(item => { item.onclick = () => { $('prompt').value = item.getAttribute('data-ac-q'); closeAC(); submitPrompt(); }; });
-  }, 300);
-  function closeAC() { $('autocompleteDropdown')?.classList.remove('open'); }
-
-  // ═══════════ SETTINGS ═══════════
-  function initSettings() {
-    const panel = $('settingsPanel'), btn = $('settingsBtn'), bd = $('settingsBackdrop');
-    function setOpen(open, focusEl) {
-      panel.classList.toggle('open', open); bd.classList.toggle('visible', open); btn.setAttribute('aria-expanded', String(open));
-      panel.inert = !open;
-      if (open) qs('.anim-option',panel)?.focus(); else focusEl?.focus();
-    }
-    btn.onclick = () => setOpen(!panel.classList.contains('open'));
-    $('settingsClose').onclick = () => setOpen(false, btn);
-    bd.onclick = () => setOpen(false, btn);
-    document.addEventListener('keydown', e => { if (e.key === 'Escape' && panel.classList.contains('open')) setOpen(false, btn); });
-    panel.inert = true;
-
-    // Animation options
-    const animOpts = qsa('.anim-option', $('animSegment'));
-    function syncAnim() { animOpts.forEach(o => { const a = S.animMode === o.getAttribute('data-anim'); o.classList.toggle('active',a); o.setAttribute('aria-checked',String(a)); }); }
-    animOpts.forEach(o => { o.addEventListener('click', () => { S.animMode = o.getAttribute('data-anim'); localStorage.setItem('hi_anim',S.animMode); syncAnim(); }); o.addEventListener('keydown', e => { if (e.key==='Enter'||e.key===' ') { e.preventDefault(); o.click(); } }); });
-    syncAnim();
-
-    // Density options
-    const denOpts = qsa('.density-option', $('densitySegment'));
-    function syncDen() { denOpts.forEach(o => { const a = S.density === o.getAttribute('data-density'); o.classList.toggle('active',a); o.setAttribute('aria-checked',String(a)); }); document.documentElement.setAttribute('data-density',S.density); }
-    denOpts.forEach(o => { o.addEventListener('click', () => { S.density = o.getAttribute('data-density'); localStorage.setItem('hi_density',S.density); syncDen(); }); o.addEventListener('keydown', e => { if (e.key==='Enter'||e.key===' ') { e.preventDefault(); o.click(); } }); });
-    syncDen();
-
-    // Jump latest
-    $('jumpLatest').onclick = () => scrollBottom(true);
-    // Lightbox
-    $('lightbox').onclick = e => { if (e.target === $('lightbox')) closeLightbox(); };
-    $('lightboxClose').onclick = closeLightbox;
-    document.addEventListener('keydown', e => { if (e.key === 'Escape' && $('lightbox').classList.contains('open')) closeLightbox(); });
-  }
-
-  // ═══════════ COMMAND PALETTE ═══════════
-  const CMDS = [
-    { icon:'✦', label:'New chat', shortcut:'Ctrl+N', action: newChat },
-    { icon:'📋', label:'Copy best answer', action: async () => { const el=$('bestAnswerText'); if(!el){toast('No answer','bad');return;} try{await navigator.clipboard.writeText(el.innerText);toast('Copied','good');}catch{toast('Fail','bad');} }},
-    { icon:'✏', label:'Write an answer', action: () => $('writeAnswerBtn')?.click() },
-    { icon:'🔗', label:'Copy page URL', action: async () => { try{await navigator.clipboard.writeText(location.href);toast('URL copied','good');}catch{toast('Fail','bad');} }},
-    { icon:'⚙', label:'Open settings', action: () => $('settingsBtn').click() },
-    { icon:'↓', label:'Jump to latest', action: () => scrollBottom(true) },
-  ];
-  let cmdIdx = -1;
-  function openCmd() { $('cmdBackdrop').classList.add('open'); $('cmdInput').value = ''; $('cmdInput').focus(); cmdIdx = -1; renderCmd(''); }
-  function closeCmd() { $('cmdBackdrop').classList.remove('open'); $('prompt').focus(); }
-  function renderCmd(q) {
-    const list = $('cmdList'), lq = q.toLowerCase(), filt = lq ? CMDS.filter(c => c.label.toLowerCase().includes(lq)) : CMDS;
-    if (!filt.length) { list.innerHTML = '<div class="cmd-empty">No commands.</div>'; list._f = []; return; }
-    list.innerHTML = filt.map((c,i) => `<div class="cmd-item" role="option" data-ci="${i}" tabindex="-1"><span class="cmd-item-icon">${c.icon}</span><span class="cmd-item-label">${esc(c.label)}</span>${c.shortcut?`<span class="cmd-item-shortcut">${esc(c.shortcut)}</span>`:''}</div>`).join('');
-    list._f = filt;
-    qsa('.cmd-item', list).forEach((item, i) => { item.onclick = () => { closeCmd(); filt[i].action(); }; });
-  }
-  function initCmd() {
-    $('cmdBackdrop').addEventListener('click', e => { if (e.target === $('cmdBackdrop')) closeCmd(); });
-    $('cmdInput').addEventListener('input', () => { cmdIdx = -1; renderCmd($('cmdInput').value); });
-    $('cmdInput').addEventListener('keydown', e => {
-      const items = qsa('.cmd-item', $('cmdList'));
-      if (e.key==='ArrowDown') { e.preventDefault(); cmdIdx = Math.min(cmdIdx+1, items.length-1); items[cmdIdx]?.focus(); }
-      else if (e.key==='ArrowUp') { e.preventDefault(); cmdIdx = Math.max(cmdIdx-1,-1); cmdIdx<0 ? $('cmdInput').focus() : items[cmdIdx]?.focus(); }
-      else if (e.key==='Escape') closeCmd();
-      else if (e.key==='Enter' && items.length) items[0]?.click();
+
+    function updateVoteBtn(btn, aid, vid, conv) {
+      const answer = (conv.answers || []).find(a => a.id === aid);
+      const ver = answer?.versions?.find(v => v.id === vid);
+      if (!ver) return;
+      const myVote = ver.votes_by_client?.[S.clientId];
+      const cnt = Number(ver.votes || 0);
+      const countEl = qs('.vote-count-inner', btn.parentElement);
+      if (countEl) countEl.textContent = cnt;
+      const vu = myVote === 1, vd = myVote === -1;
+      btn.classList.toggle('voted-up', vu);
+      btn.classList.toggle('voted-down', vd);
+      const upLabel = `Upvote. Currently ${cnt} vote${cnt !== 1 ? 's' : ''}. ${vu ? 'You voted.' : 'Not voted.'}`;
+      if (btn.getAttribute('data-vote').endsWith('|1')) {
+        btn.setAttribute('aria-label', upLabel);
+        btn.setAttribute('aria-pressed', String(vu));
+      } else {
+        btn.setAttribute('aria-pressed', String(vd));
+      }
+    }
+
+    async function handleCopyAnswer(btn) {
+      const aid = btn.getAttribute('data-copy-answer');
+      const answers = S.conversation?.answers || [];
+      const answer = answers.find(a => a.id === aid);
+      const ver = activeVersion(answer);
+      if (!ver) return;
+      try {
+        await navigator.clipboard.writeText(ver.text || '');
+        toast('Answer copied', 'good');
+      } catch { toast('Could not copy', 'bad'); }
+    }
+
+    function handleAskFromCard(q) {
+      const text = String(q || '').trim();
+      if (!text || S.loading) return;
+      const p = $('prompt');
+      if (p) { p.value = text; autoGrow(p); }
+      submitPrompt();
+    }
+
+    function handleToggleVersions(btn) {
+      const id = btn.getAttribute('data-toggle-versions');
+      const p = $('vp-' + id);
+      if (!p) return;
+      const open = p.classList.toggle('open');
+      const arrow = qs('.arrow', btn);
+      if (arrow) arrow.style.transform = open ? 'rotate(90deg)' : '';
+      btn.setAttribute('aria-expanded', String(open));
+    }
+
+    function handleTogglePanel(toggleId, panelId) {
+      const toggle = $(toggleId), panel = $(panelId);
+      if (!toggle || !panel) return;
+      const open = panel.classList.toggle('open');
+      toggle.classList.toggle('open', open);
+      toggle.setAttribute('aria-expanded', String(open));
+    }
+
+    function handleProposeToggle(btn) {
+      const id = btn.getAttribute('data-propose');
+      const p = $('pp-' + id);
+      if (!p) return;
+      const open = p.classList.toggle('open');
+      btn.setAttribute('aria-expanded', String(open));
+      if (open) {
+        const ta = qs('textarea', p);
+        if (ta) setTimeout(() => ta.focus(), 80);
+      }
+    }
+
+    function handleProposeCancel(btn) {
+      const id = btn.getAttribute('data-cancel-propose');
+      const p = $('pp-' + id);
+      if (p) p.classList.remove('open');
+      const trigger = qs(`[data-propose="${id}"]`);
+      if (trigger) { trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); }
+    }
+
+    const handleSubmitProposal = debounceClick(async (btn) => {
+      const aid = btn.getAttribute('data-submit-proposal');
+      const box = $('pp-' + aid);
+      const ta = box ? qs('textarea', box) : null;
+      const text = ta ? ta.value.trim() : '';
+      if (!text) { toast('Empty proposal', 'bad'); return; }
+      if (!S.conversation) return;
+
+      btn.disabled = true;
+      const orig = btn.textContent;
+      btn.textContent = 'Saving…';
+      showStatus('Saving proposal…');
+
+      S.lastAction = () => handleSubmitProposal(btn);
+      const res = await callAPI('propose', {
+        conversation_id: S.conversation.id, answer_id: aid, text,
+      });
+      hideStatus(); btn.disabled = false; btn.textContent = orig;
+
+      if (res.ok) {
+        S.conversation = res.conversation;
+        save(); renderConversation(S.currentQuestion, false);
+        toast('Version proposed', 'good');
+      } else toast(res.error || 'Error', 'bad', S.lastAction);
     });
-  }
-
-  // ═══════════ KEYBOARD SHORTCUTS ═══════════
-  function initKeys() {
-    document.addEventListener('keydown', e => {
-      const ctrl = e.ctrlKey || e.metaKey;
-      if (ctrl && e.key === 'k') { e.preventDefault(); openCmd(); }
-      else if (ctrl && e.key === 'n') { e.preventDefault(); newChat(); }
-      else if (ctrl && e.key === 'Enter' && e.target.tagName === 'TEXTAREA') {
-        e.preventDefault();
-        if (e.target.id === 'writeTextarea') handleWriteSubmit();
-        else { const p = e.target.closest('.propose-panel'); if (p) qs('.propose-submit',p)?.click(); }
+
+    function handleWriteToggle() {
+      const p = $('writePanel');
+      const btn = $('writeAnswerBtn');
+      if (!p || !btn) return;
+      const open = p.classList.toggle('open');
+      btn.setAttribute('aria-expanded', String(open));
+      if (open) {
+        const ta = $('writeTextarea');
+        if (ta) setTimeout(() => ta.focus(), 100);
       }
+    }
+
+    function handleWriteCancel() {
+      const p = $('writePanel');
+      if (p) p.classList.remove('open');
+      const btn = $('writeAnswerBtn');
+      if (btn) { btn.setAttribute('aria-expanded', 'false'); btn.focus(); }
+    }
+
+    function handleWriteTab(mode) {
+      const editTab = $('writeTabEdit');
+      const previewTab = $('writeTabPreview');
+      const editorPane = $('writeEditorPane');
+      const previewPane = $('writePreviewPane');
+      if (!editTab || !previewTab || !editorPane || !previewPane) return;
+
+      if (mode === 'edit') {
+        editTab.classList.add('active'); editTab.setAttribute('aria-selected', 'true');
+        previewTab.classList.remove('active'); previewTab.setAttribute('aria-selected', 'false');
+        editorPane.style.display = ''; previewPane.style.display = 'none';
+        previewPane.classList.remove('active');
+        $('writeTextarea')?.focus();
+      } else {
+        previewTab.classList.add('active'); previewTab.setAttribute('aria-selected', 'true');
+        editTab.classList.remove('active'); editTab.setAttribute('aria-selected', 'false');
+        editorPane.style.display = 'none'; previewPane.style.display = '';
+        previewPane.classList.add('active');
+        const ta = $('writeTextarea');
+        previewPane.innerHTML = ta ? renderMarkdown(ta.value) : '<p style="color:var(--muted)">Nothing to preview.</p>';
+        bindCodeCopyButtons(previewPane);
+      }
+    }
+
+    const handleWriteSubmit = debounceClick(async () => {
+      const ta = $('writeTextarea');
+      const text = ta ? ta.value.trim() : '';
+      if (!text) { toast('Empty answer', 'bad'); return; }
+      if (!S.conversation) return;
+
+      const ws = $('writeSubmit');
+      if (ws) { ws.disabled = true; ws.textContent = 'Saving…'; }
+      showStatus('Saving answer…');
+
+      S.lastAction = handleWriteSubmit;
+      const res = await callAPI('answer', {
+        conversation_id: S.conversation.id,
+        text,
+        question: S.currentQuestion,
+      });
+      hideStatus();
+      if (ws) { ws.disabled = false; ws.textContent = 'Submit answer'; }
+
+      if (res.ok) {
+        S.conversation = res.conversation;
+        clearDraft();
+        save();
+        await renderConversation(S.currentQuestion, false);
+        toast('Answer saved', 'good');
+        // Focus new best answer
+        setTimeout(() => {
+          const el = $('bestAnswerText');
+          if (el) { el.setAttribute('tabindex', '-1'); el.focus(); }
+        }, 200);
+      } else toast(res.error || 'Error', 'bad', S.lastAction);
     });
-  }
-
-  // ═══════════ INIT ═══════════
-  async function init() {
-    updateAppHeight();
-    ['resize','orientationchange'].forEach(e => window.addEventListener(e, updateAppHeight));
-    if (window.visualViewport) { window.visualViewport.addEventListener('resize', updateAppHeight); window.visualViewport.addEventListener('scroll', updateAppHeight); }
-    if (matchMedia('(prefers-reduced-motion:reduce)').matches) S.animMode = 'none';
-
-    S.clientId = getClientId();
-    S.density = localStorage.getItem('hi_density') || 'comfortable';
-    document.documentElement.setAttribute('data-density', S.density);
-
-    $('chat').addEventListener('scroll', () => { S.atBottom = isNear(); if (S.atBottom) setJump(false); updateScrollProg(); }, { passive: true });
-    $('composeForm').addEventListener('submit', e => { e.preventDefault(); submitPrompt(); });
-    $('sendBtn').addEventListener('click', e => { e.preventDefault(); submitPrompt(); });
-    $('newChatBtn').addEventListener('click', newChat);
-    const prompt = $('prompt');
-    prompt.addEventListener('input', e => { autoGrow(e.target); debouncedAC(e.target.value.trim()); });
-    prompt.addEventListener('keydown', e => { if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); submitPrompt(); } if (e.key==='Escape') closeAC(); if (e.key==='ArrowDown') { const f = qs('.autocomplete-item',$('autocompleteDropdown')); if (f) { e.preventDefault(); f.focus(); } } });
-    document.addEventListener('click', e => { if (!e.target.closest('.compose-inner')) closeAC(); });
-
-    // Suggestion chips
-    qsa('.suggestion-chip').forEach(c => { c.addEventListener('click', () => { const q = c.getAttribute('data-q'); if (!q) return; prompt.value = q; autoGrow(prompt); submitPrompt(); }); });
-
-    // Pull to refresh (mobile)
-    let pullY = 0;
-    $('chat').addEventListener('touchstart', e => { pullY = $('chat').scrollTop === 0 ? e.touches[0].clientY : 0; }, {passive:true});
-    $('chat').addEventListener('touchend', e => { if (pullY && e.changedTouches[0].clientY - pullY > 80 && S.conversation) { showStatus('Refreshing…'); callAPI('get_conversation',{conversation_id:S.conversation.id}).then(r => { hideStatus(); if (r.ok&&r.conversation) { S.conversation=r.conversation; renderConversation(S.currentQuestion,false); toast('Refreshed','good'); } }); } pullY=0; }, {passive:true});
-
-    initSettings(); initCmd(); initKeys();
-
-    const d = window.__HI_INIT__ || {};
-    if (d.client_id) S.clientId = d.client_id;
-    updateWelcome();
-    await loadSaved();
-    prompt.focus();
-  }
-
-  init();
+
+    /* ═══════════════════════════════════════════════
+       AUTOCOMPLETE
+    ═══════════════════════════════════════════════ */
+    const debouncedAutocomplete = debounce(async (q) => {
+      if (!q || q.length < 4) { closeAutocomplete(); return; }
+      const res = await callAPI('search', { query: q, limit: 5 });
+      if (!res.ok || !res.results?.length) { closeAutocomplete(); return; }
+      showAutocomplete(res.results, q);
+    }, 300);
+
+    function showAutocomplete(results, q) {
+      const dd = $('autocompleteDropdown');
+      if (!dd) return;
+      dd.innerHTML = results.map((r, i) =>
+        `<div class="autocomplete-item" role="option" tabindex="-1" data-ac-q="${esc(r.question)}" id="ac-item-${i}">
+          <span class="autocomplete-match">${esc(r.question)}</span>
+          <span class="autocomplete-meta">${Number(r.answer_count || 0)} answer${Number(r.answer_count || 0) !== 1 ? 's' : ''}</span>
+        </div>`
+      ).join('');
+      dd.classList.add('open');
+
+      qsa('.autocomplete-item', dd).forEach(item => {
+        item.addEventListener('click', () => {
+          $('prompt').value = item.getAttribute('data-ac-q');
+          closeAutocomplete();
+          submitPrompt();
+        });
+      });
+    }
+    function closeAutocomplete() {
+      const dd = $('autocompleteDropdown');
+      if (dd) dd.classList.remove('open');
+    }
+
+    /* ═══════════════════════════════════════════════
+       SAVE / PERSIST
+    ═══════════════════════════════════════════════ */
+    function save() {
+      if (S.conversation) localStorage.setItem('hi_last_cid', S.conversation.id);
+    }
+
+    /* ═══════════════════════════════════════════════
+       API
+    ═══════════════════════════════════════════════ */
+    const inflightRequests = new Set();
+    async function callAPI(action, payload = {}) {
+      const key = action + ':' + JSON.stringify(payload);
+      // Only deduplicate safe read actions
+      if ((action === 'search' || action === 'get_conversation') && inflightRequests.has(key)) {
+        return { ok: false, error: 'Request in progress' };
+      }
+      inflightRequests.add(key);
+      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' };
+      } finally {
+        inflightRequests.delete(key);
+      }
+    }
+
+    /* ═══════════════════════════════════════════════
+       ASK / SUBMIT
+    ═══════════════════════════════════════════════ */
+    async function askQuestion(q) {
+      showStatusWithEscalation();
+      showTyping();
+      S.loading = true;
+      $('sendBtn').disabled = true;
+      closeAutocomplete();
+
+      S.lastAction = () => askQuestion(q);
+      const res = await callAPI('ask', { question: q });
+      removeTyping();
+      hideStatus();
+      S.loading = false;
+      $('sendBtn').disabled = false;
+
+      if (!res.ok) {
+        toast(res.error || 'Error', 'bad', S.lastAction);
+        return;
+      }
+      S.conversation = res.conversation;
+      S.currentQuestion = q;
+      S.relatedAnswers = Array.isArray(res.related) ? res.related : [];
+      save();
+      toast(res.matched ? '✓ Existing answer found' : '✓ New question created', 'good');
+      await renderConversation(q, true);
+    }
+
+    async function submitPrompt() {
+      const p = $('prompt');
+      const text = p.value.trim();
+      if (!text || S.loading) return;
+      p.value = '';
+      autoGrow(p);
+      await askQuestion(text);
+    }
+
+    function autoGrow(el) {
+      // Use 'auto' so browsers recalculate scrollHeight reliably, then
+      // clamp to a sensible min/max so the compose area can shrink back.
+      el.style.height = 'auto';
+      let h = Math.min(el.scrollHeight, 180);
+      if (h < 40) h = 40;
+      requestAnimationFrame(() => { el.style.height = h + 'px'; });
+    }
+
+    /* ═══════════════════════════════════════════════
+       LOAD SAVED CONVERSATION
+    ═══════════════════════════════════════════════ */
+    async function loadSaved() {
+      const id = localStorage.getItem('hi_last_cid');
+      if (!id) return;
+
+      // Show skeleton
+      const tr = $('transcript');
+      const wl = $('welcome');
+      wl.style.display = 'none';
+      tr.innerHTML = `
+        <div class="skeleton-wrap">
+          <div class="skeleton skeleton-bubble"></div>
+          <div class="skeleton skeleton-line long"></div>
+          <div class="skeleton skeleton-line medium"></div>
+          <div class="skeleton skeleton-line short"></div>
+        </div>`;
+
+      showStatus('Loading conversation…');
+      const res = await callAPI('get_conversation', { conversation_id: id });
+      hideStatus();
+
+      if (res.ok && res.conversation) {
+        S.conversation = res.conversation;
+        S.currentQuestion = res.conversation.question || '';
+        S.relatedAnswers = [];
+        renderConversation(S.currentQuestion, false);
+      } else {
+        tr.innerHTML = '';
+        wl.style.display = '';
+        updateWelcomeState();
+        localStorage.removeItem('hi_last_cid');
+      }
+    }
+
+    /* ═══════════════════════════════════════════════
+       NEW CHAT
+    ═══════════════════════════════════════════════ */
+    async function newChat() {
+      const hasContent = qsa('textarea').some(t => t.value.trim());
+      if (hasContent) {
+        const confirmed = await confirmModal('Start a new chat?', 'You have unsaved content. It will be lost.');
+        if (!confirmed) return;
+      }
+      S.conversation = null;
+      S.currentQuestion = '';
+      S.relatedAnswers = [];
+      S.atBottom = true;
+      localStorage.removeItem('hi_last_cid');
+      $('transcript').innerHTML = '';
+      const wl = $('welcome');
+      wl.style.display = '';
+      updateWelcomeState();
+      setJumpLatest(false);
+      $('prompt').value = '';
+      autoGrow($('prompt'));
+      history.replaceState({}, '', '/');
+      document.title = S.originalTitle;
+      $('prompt').focus();
+    }
+
+    /* ═══════════════════════════════════════════════
+       CONFIRM MODAL
+    ═══════════════════════════════════════════════ */
+    function confirmModal(title, msg) {
+      return new Promise(resolve => {
+        $('confirmTitle').textContent = title;
+        $('confirmMsg').textContent = msg;
+        $('confirmBackdrop').classList.add('open');
+        $('confirmOk').focus();
+
+        function cleanup(result) {
+          $('confirmBackdrop').classList.remove('open');
+          $('confirmOk').onclick = null;
+          $('confirmCancel').onclick = null;
+          resolve(result);
+        }
+        $('confirmOk').onclick = () => cleanup(true);
+        $('confirmCancel').onclick = () => cleanup(false);
+      });
+    }
+
+    /* ═══════════════════════════════════════════════
+       SETTINGS
+    ═══════════════════════════════════════════════ */
+    function initSettings() {
+      const panel = $('settingsPanel');
+      const btn = $('settingsBtn');
+      const backdrop = $('settingsBackdrop');
+
+      function setOpen(open, focusEl = null) {
+        panel.classList.toggle('open', open);
+        backdrop.classList.toggle('visible', open);
+        btn.setAttribute('aria-expanded', String(open));
+        panel.inert = !open;
+        if (open) {
+          // Focus first option inside
+          const first = qs('.anim-option', panel);
+          if (first) first.focus();
+        } else if (focusEl) {
+          focusEl.focus();
+        }
+      }
+
+      btn.onclick = () => setOpen(!panel.classList.contains('open'));
+      $('settingsClose').onclick = () => setOpen(false, btn);
+      backdrop.onclick = () => setOpen(false, btn);
+
+      document.addEventListener('keydown', e => {
+        if (e.key === 'Escape' && panel.classList.contains('open')) setOpen(false, btn);
+      });
+
+      // Anim segment
+      const animOpts = qsa('.anim-option', $('animSegment'));
+      function syncAnim() {
+        animOpts.forEach(opt => {
+          const active = S.animMode === opt.getAttribute('data-anim');
+          opt.classList.toggle('active', active);
+          opt.setAttribute('aria-checked', String(active));
+        });
+      }
+      animOpts.forEach(opt => {
+        opt.addEventListener('click', () => {
+          S.animMode = opt.getAttribute('data-anim');
+          localStorage.setItem('hi_anim', S.animMode);
+          syncAnim();
+        });
+        opt.addEventListener('keydown', e => {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); opt.click(); }
+        });
+      });
+
+      // Density segment
+      const densityOpts = qsa('.density-option', $('densitySegment'));
+      function syncDensity() {
+        densityOpts.forEach(opt => {
+          const active = S.density === opt.getAttribute('data-density');
+          opt.classList.toggle('active', active);
+          opt.setAttribute('aria-checked', String(active));
+        });
+        document.documentElement.setAttribute('data-density', S.density);
+      }
+      densityOpts.forEach(opt => {
+        opt.addEventListener('click', () => {
+          S.density = opt.getAttribute('data-density');
+          localStorage.setItem('hi_density', S.density);
+          syncDensity();
+        });
+        opt.addEventListener('keydown', e => {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); opt.click(); }
+        });
+      });
+
+      // Jump latest
+      const jump = $('jumpLatest');
+      if (jump) jump.onclick = () => scrollBottom(true);
+
+      // Lightbox
+      $('lightbox').onclick = e => { if (e.target === $('lightbox')) closeLightbox(); };
+      $('lightboxClose').onclick = closeLightbox;
+
+      // Initial sync
+      panel.inert = true;
+      syncAnim();
+      syncDensity();
+    }
+
+    /* ═══════════════════════════════════════════════
+       COMMAND PALETTE
+    ═══════════════════════════════════════════════ */
+    const COMMANDS = [
+      { icon: '✦', label: 'New chat', shortcut: 'Ctrl+N', action: newChat },
+      { icon: '📋', label: 'Copy best answer', action: async () => {
+        const el = $('bestAnswerText');
+        if (!el) { toast('No answer to copy', 'bad'); return; }
+        try { await navigator.clipboard.writeText(el.innerText); toast('Copied', 'good'); }
+        catch { toast('Could not copy', 'bad'); }
+      }},
+      { icon: '✏', label: 'Write an answer', action: () => {
+        const btn = $('writeAnswerBtn');
+        if (btn) btn.click();
+      }},
+      { icon: '🔗', label: 'Copy page URL', action: async () => {
+        try { await navigator.clipboard.writeText(location.href); toast('URL copied', 'good'); }
+        catch { toast('Could not copy', 'bad'); }
+      }},
+      { icon: '⚙', label: 'Open settings', action: () => {
+        $('settingsBtn').click();
+      }},
+      { icon: '↓', label: 'Jump to latest', action: () => scrollBottom(true) },
+    ];
+
+    let cmdFocusIdx = -1;
+    function openCommandPalette() {
+      $('cmdBackdrop').classList.add('open');
+      $('cmdInput').value = '';
+      $('cmdInput').focus();
+      cmdFocusIdx = -1;
+      renderCmdList('');
+    }
+    function closeCommandPalette() {
+      $('cmdBackdrop').classList.remove('open');
+      $('prompt').focus();
+    }
+    function renderCmdList(query) {
+      const list = $('cmdList');
+      const q = query.toLowerCase();
+      const filtered = q ? COMMANDS.filter(c => c.label.toLowerCase().includes(q)) : COMMANDS;
+      if (!filtered.length) {
+        list.innerHTML = '<div class="cmd-empty">No commands found.</div>';
+        return;
+      }
+      list.innerHTML = filtered.map((c, i) =>
+        `<div class="cmd-item" role="option" data-cmd-idx="${i}" tabindex="-1">
+          <span class="cmd-item-icon" aria-hidden="true">${c.icon}</span>
+          <span class="cmd-item-label">${esc(c.label)}</span>
+          ${c.shortcut ? `<span class="cmd-item-shortcut">${esc(c.shortcut)}</span>` : ''}
+        </div>`
+      ).join('');
+      list._filtered = filtered;
+
+      qsa('.cmd-item', list).forEach((item, i) => {
+        item.addEventListener('click', () => {
+          closeCommandPalette();
+          filtered[i].action();
+        });
+      });
+    }
+
+    function initCommandPalette() {
+      const backdrop = $('cmdBackdrop');
+      const input = $('cmdInput');
+      const list = $('cmdList');
+
+      backdrop.addEventListener('click', e => { if (e.target === backdrop) closeCommandPalette(); });
+      input.addEventListener('input', () => { cmdFocusIdx = -1; renderCmdList(input.value); });
+      input.addEventListener('keydown', e => {
+        const items = qsa('.cmd-item', list);
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          cmdFocusIdx = Math.min(cmdFocusIdx + 1, items.length - 1);
+          items[cmdFocusIdx]?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          cmdFocusIdx = Math.max(cmdFocusIdx - 1, -1);
+          if (cmdFocusIdx < 0) input.focus();
+          else items[cmdFocusIdx]?.focus();
+        } else if (e.key === 'Escape') {
+          closeCommandPalette();
+        } else if (e.key === 'Enter' && items.length) {
+          items[0]?.click();
+        }
+      });
+    }
+
+    /* ═══════════════════════════════════════════════
+       GLOBAL KEYBOARD
+    ═══════════════════════════════════════════════ */
+    function initKeyboard() {
+      document.addEventListener('keydown', e => {
+        const ctrl = e.ctrlKey || e.metaKey;
+
+        // Ctrl+K / Cmd+K → command palette
+        if (ctrl && e.key === 'k') { e.preventDefault(); openCommandPalette(); return; }
+
+        // Ctrl+N → new chat
+        if (ctrl && e.key === 'n') { e.preventDefault(); newChat(); return; }
+
+        // Ctrl+Enter in any textarea → submit that textarea
+        if (ctrl && e.key === 'Enter' && e.target.tagName === 'TEXTAREA') {
+          e.preventDefault();
+          if (e.target.id === 'writeTextarea') { handleWriteSubmit(); }
+          else {
+            // Propose textarea
+            const panel = e.target.closest('.propose-panel');
+            if (panel) {
+              const submitBtn = qs('.propose-submit', panel);
+              if (submitBtn) submitBtn.click();
+            }
+          }
+          return;
+        }
+      });
+    }
+
+    /* ═══════════════════════════════════════════════
+       SUGGESTION CHIPS
+    ═══════════════════════════════════════════════ */
+    function initSuggestionChips() {
+      qsa('.suggestion-chip').forEach(chip => {
+        chip.addEventListener('click', () => {
+          const q = chip.getAttribute('data-q');
+          if (!q) return;
+          $('prompt').value = q;
+          autoGrow($('prompt'));
+          submitPrompt();
+        });
+      });
+    }
+
+    /* ═══════════════════════════════════════════════
+       PULL TO REFRESH (mobile)
+    ═══════════════════════════════════════════════ */
+    function initPullToRefresh() {
+      const chat = $('chat');
+      let pullStart = 0;
+      chat.addEventListener('touchstart', e => {
+        if (chat.scrollTop === 0) pullStart = e.touches[0].clientY;
+        else pullStart = 0;
+      }, { passive: true });
+      chat.addEventListener('touchend', e => {
+        if (!pullStart) return;
+        const diff = e.changedTouches[0].clientY - pullStart;
+        if (diff > 80 && S.conversation) {
+          pullStart = 0;
+          showStatus('Refreshing…');
+          callAPI('get_conversation', { conversation_id: S.conversation.id }).then(res => {
+            hideStatus();
+            if (res.ok && res.conversation) {
+              S.conversation = res.conversation;
+              renderConversation(S.currentQuestion, false);
+              toast('Refreshed', 'good');
+            }
+          });
+        }
+        pullStart = 0;
+      }, { passive: true });
+    }
+
+    /* ═══════════════════════════════════════════════
+       INIT
+    ═══════════════════════════════════════════════ */
+    async function init() {
+      updateAppHeight();
+      window.addEventListener('resize', updateAppHeight);
+      window.addEventListener('orientationchange', updateAppHeight);
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener('resize', updateAppHeight);
+        window.visualViewport.addEventListener('scroll', updateAppHeight);
+      }
+
+      // Reduced motion override
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        S.animMode = 'none';
+      }
+
+      S.clientId = getClientId();
+      S.density = localStorage.getItem('hi_density') || 'comfortable';
+      document.documentElement.setAttribute('data-density', S.density);
+
+      const chat = $('chat');
+      chat.addEventListener('scroll', () => {
+        S.atBottom = isNearBottom();
+        if (S.atBottom) setJumpLatest(false);
+        updateScrollProgress();
+      }, { passive: true });
+
+      // Compose
+      $('composeForm').addEventListener('submit', e => { e.preventDefault(); submitPrompt(); });
+      $('sendBtn').addEventListener('click', e => { e.preventDefault(); submitPrompt(); });
+      $('newChatBtn').addEventListener('click', newChat);
+
+      const prompt = $('prompt');
+      prompt.addEventListener('input', e => {
+        autoGrow(e.target);
+        debouncedAutocomplete(e.target.value.trim());
+      });
+      prompt.addEventListener('keydown', e => {
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submitPrompt(); }
+        if (e.key === 'Escape') closeAutocomplete();
+        // Arrow down into autocomplete
+        if (e.key === 'ArrowDown') {
+          const first = qs('.autocomplete-item', $('autocompleteDropdown'));
+          if (first) { e.preventDefault(); first.focus(); }
+        }
+      });
+
+      // Click outside autocomplete
+      document.addEventListener('click', e => {
+        if (!e.target.closest('.compose-inner')) closeAutocomplete();
+      });
+
+      initSettings();
+      initCommandPalette();
+      initKeyboard();
+      initSuggestionChips();
+      initPullToRefresh();
+
+      // Server init data
+      const d = window.__HI_INIT__ || {};
+      if (d.client_id) S.clientId = d.client_id;
+
+      updateWelcomeState();
+
+      await loadSaved();
+      prompt.focus();
+    }
+
+    init();
   })();
   </script>
 </body>