Update templates/index.html

templates/index.html

@@ -195,7 +195,7 @@
 
     /* ── Turns ── */
     .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.new-turn { animation: fadeUp 380ms var(--ease-out) both; }
     .turn.user { justify-content: flex-end; }
     .avatar {
       width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
@@ -208,7 +208,7 @@
       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);
+      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 {
@@ -236,46 +236,43 @@
       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;
+      outline: none;
     }
     .best-answer-meta { margin-top: var(--space-1); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
 
     /* ── Shared Markdown Elements ── */
-    .bubble p, .best-answer-bubble p, .other-answer-text p { margin: 3px 0; white-space: normal; }
+    .md-body { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
+    .md-body 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 {
+    .md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
       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; }
+    .md-body h1 { font-size: 1.35em; font-weight: 800; }
+    .md-body h2 { font-size: 1.2em; font-weight: 700; }
+    .md-body h3 { font-size: 1.05em; font-weight: 700; color: var(--accent); }
+    .md-body h4 { font-size: .95em; font-weight: 700; }
+    .md-body h5, .md-body 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; }
+    .md-body ul, .md-body ol { margin: 3px 0 3px 18px; padding: 0; white-space: normal; }
+    .md-body li { margin: 1px 0; white-space: normal; }
 
     .task-item { list-style: none; margin-left: -18px; }
     .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 {
+    .md-body 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 {
+    .md-body 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 {
+    .md-body pre code {
       background: none; border: none; padding: 0; font-size: inherit;
     }
     .code-lang-label {
@@ -296,26 +293,38 @@
     .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; }
 
-    .bubble blockquote, .best-answer-bubble blockquote, .other-answer-text blockquote {
+    .md-body 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; }
+    .md-body hr { border: none; border-top: 1px solid var(--border2); margin: 8px 0; }
+    .md-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+    .md-body a[href^="http"]::after { content: " ↗"; font-size: .75em; opacity: .5; }
+    .md-body table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; white-space: normal; }
+    .md-body th, .md-body td { border: 1px solid var(--border2); padding: 6px 10px; text-align: left; }
+    .md-body 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-figure {
+      display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px;
+      margin: 8px 0; padding: 8px; max-width: min(100%, 520px);
+      border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.08);
+      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
+      box-shadow: var(--shadow-soft);
+    }
     .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;
+      display: block; max-width: 100%; max-height: 480px;
+      width: clamp(220px, 38vw, 420px); min-width: 0; height: auto;
+      border-radius: var(--radius-md); border: 1px solid var(--border);
+      background: rgba(0,0,0,.18); object-fit: contain; cursor: zoom-in;
+      transition: transform 180ms var(--ease-out), opacity 150ms ease, border-color 180ms var(--ease-out);
+    }
+    .md-img:hover { opacity: .94; transform: translateY(-1px); border-color: rgba(108,131,255,.28); }
+    .md-figcaption {
+      font-size: 11px; line-height: 1.45; color: var(--muted);
+      font-family: var(--mono);
     }
-    .md-img:hover { opacity: .9; }
     p.md-gap { min-height: 0.35em; margin: 0 !important; padding: 0; }
 
     .quality-dots { display: inline-flex; gap: 2px; align-items: center; margin-left: 4px; }
@@ -323,34 +332,47 @@
     .quality-dot.filled { background: var(--accent2); }
 
     /* ── Thinking Block ── */
-    .thinking-dropdown { margin: 6px 0; border-radius: var(--radius-md); overflow: hidden; }
+    .thinking-dropdown { margin: 8px 0; border-radius: var(--radius-md); overflow: hidden; }
     .thinking-summary {
       display: flex; align-items: center; gap: 8px; padding: 8px 12px;
       background: rgba(255,255,255,.04); border: 1px solid var(--border);
       border-radius: var(--radius-md); cursor: pointer; user-select: none;
       font-size: 12px; font-family: var(--mono); color: var(--muted);
-      transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
+      transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
       list-style: none;
     }
+    .thinking-summary .thinking-label { flex: 1; min-width: 0; }
     .thinking-summary:hover { background: rgba(255,255,255,.06); border-color: var(--border2); }
     .thinking-summary::-webkit-details-marker { display: none; }
     .thinking-summary .thinking-arrow {
       display: inline-block; transition: transform 200ms var(--ease-out); font-size: 10px;
     }
     details.thinking-dropdown[open] .thinking-arrow { transform: rotate(90deg); }
+    .thinking-dropdown.is-live .thinking-summary {
+      color: var(--text); border-color: rgba(108,131,255,.22); background: rgba(108,131,255,.05);
+    }
     .thinking-summary .thinking-spinner {
       width: 12px; height: 12px; border: 2px solid var(--border2);
       border-top-color: var(--accent); border-radius: 50%;
       animation: spin-thinking .8s linear infinite;
     }
     @keyframes spin-thinking { to { transform: rotate(360deg); } }
+    .thinking-body {
+      display: grid; grid-template-rows: 1fr; overflow: hidden;
+      transition: grid-template-rows 300ms var(--ease-out), opacity 260ms var(--ease-out);
+      opacity: 1;
+    }
+    .thinking-dropdown:not([open]) .thinking-body {
+      grid-template-rows: 0fr; opacity: 0;
+    }
     .thinking-content {
-      padding: 10px 14px; font-size: 13px; line-height: 1.6;
+      min-height: 0; padding: 10px 14px; font-size: 13px; line-height: 1.6;
       color: var(--muted); border: 1px solid var(--border); border-top: none;
       border-radius: 0 0 var(--radius-md) var(--radius-md);
-      background: rgba(255,255,255,.02); white-space: pre-wrap; word-break: break-word;
-      max-height: 400px; overflow-y: auto;
+      background: rgba(255,255,255,.02); max-height: min(38vh, 420px);
+      overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
     }
+    .thinking-dropdown.is-live .thinking-content { max-height: min(45vh, 560px); }
     .thinking-content p { color: var(--muted); }
 
     /* ── Vote ── */
@@ -464,7 +486,7 @@
     .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;
+      animation: fadeUp 260ms var(--ease-out) both; position: relative;
     }
     .other-answer-card.related {
       background: linear-gradient(180deg, rgba(108,131,255,.05), rgba(255,255,255,.02));
@@ -474,7 +496,7 @@
       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; }
+    .other-answer-text { font-size: 13px; line-height: 1.6; }
 
     /* ── Preview lines ── */
     .preview-block { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
@@ -513,7 +535,7 @@
     .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;
+      animation: fadeUp 220ms var(--ease-out) both;
     }
     .version-head {
       font-size: 10px; color: var(--muted); font-family: var(--mono);
@@ -551,7 +573,7 @@
     /* ── Typing indicator ── */
     .typing-indicator {
       display: flex; gap: 10px; margin-bottom: 6px; align-items: flex-start;
-      animation: fadeUp 250ms var(--ease-out) both;
+      animation: fadeUp 320ms var(--ease-out) both;
     }
     .typing-dots {
       display: flex; gap: 4px; align-items: center; padding: 12px 16px;
@@ -685,10 +707,15 @@
     }
     .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 {
+    .anim-preview::after {
       content: ""; position: absolute; inset: 0;
       background: linear-gradient(90deg, var(--accent), var(--accent2));
-      animation: anim-preview-slide 1s ease infinite alternate;
+      opacity: .4;
+      animation: anim-preview-slide var(--anim-preview-duration, 1000ms) var(--anim-preview-ease, ease) infinite alternate;
+    }
+    .anim-option.active .anim-preview::after { opacity: 1; }
+    .anim-option.anim-static .anim-preview::after {
+      animation: none; transform: translateX(-38%); opacity: .2;
     }
     @keyframes anim-preview-slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
 
@@ -968,8 +995,19 @@
       animMode: localStorage.getItem('hi_anim') || 'none',
       density: localStorage.getItem('hi_density') || 'comfortable',
       lastAction: null, originalTitle: document.title,
+      routeConversationId: '',
+      renderSessionId: 0,
+      rendering: false,
     };
 
+    const MOTION = Object.freeze({
+      none: { chunkDelay: 0, chunkSize: 6, previewDuration: 0, previewEase: 'linear' },
+      ai: { chunkDelay: 26, chunkSize: 3, previewDuration: 650, previewEase: 'cubic-bezier(.33,.84,.42,1)' },
+      human: { chunkDelay: 44, chunkSize: 2, previewDuration: 980, previewEase: 'cubic-bezier(.22,.61,.36,1)' },
+      diffusion: { chunkDelay: 66, chunkSize: 1, previewDuration: 1320, previewEase: 'cubic-bezier(.25,.46,.45,.94)' },
+      'diffusion-v2': { chunkDelay: 90, chunkSize: 1, previewDuration: 1760, previewEase: 'cubic-bezier(.16,.84,.27,.99)' },
+    });
+
     /* ═══════════════════════════════════════════
        UTILITIES
     ═══════════════════════════════════════════ */
@@ -1004,6 +1042,25 @@
         try { await fn(...a); } finally { setTimeout(() => { blocked = false; }, ms); }
       };
     }
+    function getMotion(mode = S.animMode) { return MOTION[mode] || MOTION.none; }
+    function shouldAnimateResponses() { return S.animMode !== 'none'; }
+    function beginRenderSession() { S.renderSessionId += 1; S.rendering = true; return S.renderSessionId; }
+    function isRenderSessionActive(id) { return id === S.renderSessionId; }
+    function finishRenderSession(id) { if (isRenderSessionActive(id)) S.rendering = false; }
+    function cancelActiveRender() { S.renderSessionId += 1; S.rendering = false; removeTyping(); }
+    function stripEdgeBlankLines(text) {
+      return String(text || '')
+        .replace(/^\s*\n+/, '')
+        .replace(/\n+\s*$/, '')
+        .trimEnd();
+    }
+    function normalizeConversationPath(conversationId = '') {
+      return conversationId ? `/q/${conversationId}` : '/';
+    }
+    function isNearScrollEnd(el, threshold = 28) {
+      if (!el) return true;
+      return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    }
 
     /* ═══════════════════════════════════════════
        TOAST / STATUS
@@ -1057,9 +1114,14 @@
         /!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)|\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
         (m, imgAlt, imgSrc, linkText, linkHref) => {
           const idx = tokens.length;
-          tokens.push(imgSrc !== undefined
-            ? `<img class="md-img" src="${imgSrc}" alt="${esc(imgAlt)}" loading="lazy">`
-            : `<a href="${linkHref}" target="_blank" rel="noopener noreferrer">${esc(linkText)}</a>`);
+          if (imgSrc !== undefined) {
+            const caption = String(imgAlt || '').trim();
+            tokens.push(
+              `<figure class="md-figure"><img class="md-img" src="${esc(imgSrc)}" alt="${esc(caption)}" loading="lazy">${caption ? `<figcaption class="md-figcaption">${esc(caption)}</figcaption>` : ''}</figure>`
+            );
+          } else {
+            tokens.push(`<a href="${esc(linkHref)}" target="_blank" rel="noopener noreferrer">${esc(linkText)}</a>`);
+          }
           return `\x00${idx}\x00`;
         }
       );
@@ -1090,27 +1152,28 @@
      * Returns { segments: [ {type:'text'|'thinking', content:string} ] }
      */
     function extractThinkingBlocks(md) {
+      const source = String(md || '');
       const segments = [];
       const openTag = '<|thinking|>';
       const closeTag = '</|thinking|>';
       let cursor = 0;
-      while (cursor < md.length) {
-        const openIdx = md.indexOf(openTag, cursor);
+      while (cursor < source.length) {
+        const openIdx = source.indexOf(openTag, cursor);
         if (openIdx === -1) {
-          segments.push({ type: 'text', content: md.slice(cursor) });
+          segments.push({ type: 'text', content: source.slice(cursor) });
           break;
         }
         if (openIdx > cursor) {
-          segments.push({ type: 'text', content: md.slice(cursor, openIdx) });
+          segments.push({ type: 'text', content: source.slice(cursor, openIdx) });
         }
-        const closeIdx = md.indexOf(closeTag, openIdx + openTag.length);
+        const closeIdx = source.indexOf(closeTag, openIdx + openTag.length);
         if (closeIdx === -1) {
           // Unclosed thinking block — treat rest as thinking
-          segments.push({ type: 'thinking', content: md.slice(openIdx + openTag.length) });
-          cursor = md.length;
+          segments.push({ type: 'thinking', content: source.slice(openIdx + openTag.length) });
+          cursor = source.length;
           break;
         }
-        segments.push({ type: 'thinking', content: md.slice(openIdx + openTag.length, closeIdx) });
+        segments.push({ type: 'thinking', content: source.slice(openIdx + openTag.length, closeIdx) });
         cursor = closeIdx + closeTag.length;
       }
       return segments;
@@ -1218,7 +1281,7 @@
         out.push(`<p>${renderInlineMarkdown(raw)}</p>`);
       }
       closeLists(); closeQuote(); closeTable();
-      if (inCode) out.push(`<div class="code-block-wrapper"><pre><code>${codeBuf.join('\n')}</code></pre></div>`);
+      if (inCode) out.push(`<div class="code-block-wrapper"><pre><code>${esc(codeBuf.join('\n'))}</code></pre></div>`);
       return out.join('');
     }
 
@@ -1227,20 +1290,19 @@
      * Returns HTML with <details> dropdowns for each thinking block.
      * `thinkingDuration` is the number of seconds to display (null = still thinking).
      */
+    function renderThinkingDropdownHtml(thinkingText, label = 'Thoughts') {
+      const content = stripEdgeBlankLines(thinkingText);
+      if (!content) return '';
+      return `<details class="thinking-dropdown"><summary class="thinking-summary"><span class="thinking-arrow" aria-hidden="true">▶</span><span class="thinking-label">${esc(label)}</span></summary><div class="thinking-body"><div class="thinking-content md-body">${renderMarkdown(content)}</div></div></details>`;
+    }
+
     function renderMarkdownWithThinking(md) {
-      const segments = extractThinkingBlocks(md);
-      return segments.map(seg => {
-        if (seg.type === 'thinking') {
-          const trimmed = seg.content.trim();
-          if (!trimmed) return '';
-          const thinkingHtml = renderMarkdown(trimmed);
-          return `<details class="thinking-dropdown">
-            <summary class="thinking-summary"><span class="thinking-arrow" aria-hidden="true">▶</span> <span>thought</span></summary>
-            <div class="thinking-content">${thinkingHtml}</div>
-          </details>`;
-        }
-        const trimmed = seg.content.trim();
-        return trimmed ? renderMarkdown(trimmed) : '';
+      return extractThinkingBlocks(md).map(seg => {
+        const cleaned = stripEdgeBlankLines(seg.content);
+        if (!cleaned) return '';
+        return seg.type === 'thinking'
+          ? renderThinkingDropdownHtml(cleaned)
+          : renderMarkdown(cleaned);
       }).join('');
     }
 
@@ -1313,106 +1375,112 @@
     /* ═══════════════════════════════════════════
        ANIMATE TEXT (chunked autoregressive)
     ═══════════════════════════════════════════ */
-    async function animateText(el, text) {
-      if (!el) return;
-      const mode = S.animMode;
-      const delays = { none:0, ai:18, human:30, diffusion:50, 'diffusion-v2':70 };
-      const delay = delays[mode] ?? 0;
-
-      const segments = extractThinkingBlocks(text);
-
-      if (mode === 'none') {
-        el.innerHTML = renderMarkdownWithThinking(text, null);
+    function setThinkingOpen(details, open) {
+      details._internalToggle = true;
+      details.open = open;
+      requestAnimationFrame(() => { details._internalToggle = false; });
+    }
+    async function waitForRenderDelay(ms, renderId) {
+      if (ms <= 0) return isRenderSessionActive(renderId);
+      await sleep(ms);
+      return isRenderSessionActive(renderId);
+    }
+    async function animateText(el, text, renderId) {
+      if (!el) return false;
+      const motion = getMotion();
+      if (motion.chunkDelay === 0) {
+        renderMarkdownInto(el, text, true);
         finalizeThinkingBlocks(el);
-        bindCodeCopyButtons(el);
-        return;
+        return true;
       }
 
       el.innerHTML = '';
+      for (const seg of extractThinkingBlocks(text)) {
+        if (!isRenderSessionActive(renderId)) return false;
+        const cleaned = stripEdgeBlankLines(seg.content);
+        if (!cleaned) continue;
 
-      for (const seg of segments) {
         if (seg.type === 'thinking') {
-          await animateThinkingBlock(el, seg.content, delay);
-        } else {
-          const textContainer = document.createElement('div');
-          el.appendChild(textContainer);
-          await animateMarkdownChunked(textContainer, seg.content, delay);
+          const ok = await animateThinkingBlock(el, cleaned, motion, renderId);
+          if (!ok) return false;
+          continue;
         }
+
+        const textContainer = document.createElement('div');
+        el.appendChild(textContainer);
+        const ok = await animateMarkdownChunked(textContainer, cleaned, motion, renderId);
+        if (!ok) return false;
       }
 
       finalizeThinkingBlocks(el);
-      bindCodeCopyButtons(el);
+      return isRenderSessionActive(renderId);
     }
 
+    async function animateThinkingBlock(parentEl, thinkingText, motion, renderId) {
+      if (!thinkingText || !isRenderSessionActive(renderId)) return false;
 
-    /**
-     * Animate a thinking block: show a "thinking…" dropdown that updates
-     * in real-time, then when complete, display final duration.
-     */
-    async function animateThinkingBlock(parentEl, thinkingText, delay) {
       const details = document.createElement('details');
-      details.className = 'thinking-dropdown';
-      details.open = true; // start opened
-
-      const summary = document.createElement('summary');
-      summary.className = 'thinking-summary';
-      summary.innerHTML = `<span class="thinking-spinner" aria-hidden="true"></span> <span class="thinking-label">thinking…</span>`;
-
-      const contentDiv = document.createElement('div');
-      contentDiv.className = 'thinking-content';
-
-      details.appendChild(summary);
-      details.appendChild(contentDiv);
+      details.className = 'thinking-dropdown is-live';
+      details.innerHTML = `<summary class="thinking-summary"><span class="thinking-spinner" aria-hidden="true"></span><span class="thinking-label">Thinking…</span></summary><div class="thinking-body"><div class="thinking-content md-body"></div></div>`;
       parentEl.appendChild(details);
+      bindRichContent(details);
+      setThinkingOpen(details, true);
       scrollBottom();
 
+      const contentDiv = qs('.thinking-content', details);
       const startTime = performance.now();
-
-      await animateMarkdownChunked(contentDiv, thinkingText.trim(), delay);
+      const ok = await animateMarkdownChunked(contentDiv, thinkingText, motion, renderId, () => {
+        if (details._followContent !== false) contentDiv.scrollTop = contentDiv.scrollHeight;
+      });
+      if (!ok || !isRenderSessionActive(renderId)) return false;
 
       const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+      details.classList.remove('is-live');
+      const summary = qs('.thinking-summary', details);
+      if (summary) {
+        summary.innerHTML = `<span class="thinking-arrow" aria-hidden="true">▶</span><span class="thinking-label">Thoughts • ${elapsed}s</span>`;
+      }
 
-      summary.innerHTML = `<span class="thinking-arrow" aria-hidden="true">▶</span> <span>thinking for ${elapsed}s</span>`;
-      details.open = false; // auto-close after finishing
+      if (!details._userToggled && details.open) {
+        const shouldKeepGoing = await waitForRenderDelay(900, renderId);
+        if (!shouldKeepGoing || !isRenderSessionActive(renderId)) return false;
+        if (!details._userToggled) setThinkingOpen(details, false);
+      }
+
+      return true;
     }
 
-    /**
-     * Animate markdown by splitting it into small line-based chunks
-     * and rendering progressively, so it feels autoregressive.
-     */
-    async function animateMarkdownChunked(el, mdText, delay) {
-      if (!mdText.trim()) return;
+    async function animateMarkdownChunked(el, mdText, motion, renderId, afterChunk = null) {
+      const cleaned = stripEdgeBlankLines(mdText);
+      if (!cleaned) return true;
 
-      const lines = mdText.replace(/\r\n/g,'\n').split('\n');
+      const lines = cleaned.replace(/\r\n/g,'\n').split('\n');
       let buffer = '';
-      // We'll accumulate lines and re-render periodically
-      // Chunk size: 1-3 lines at a time for natural feel
-      const chunkSize = delay > 40 ? 1 : delay > 15 ? 2 : 3;
 
-      for (let i = 0; i < lines.length; i += chunkSize) {
-        const chunk = lines.slice(i, i + chunkSize).join('\n');
+      for (let i = 0; i < lines.length; i += motion.chunkSize) {
+        if (!isRenderSessionActive(renderId)) return false;
+        const chunk = lines.slice(i, i + motion.chunkSize).join('\n');
         buffer += (buffer ? '\n' : '') + chunk;
 
-        // Render current buffer
-        const html = renderMarkdown(buffer);
-        el.innerHTML = html;
-        bindCodeCopyButtons(el);
+        renderMarkdownInto(el, buffer, false);
+        afterChunk?.();
         scrollBottom();
 
-        if (delay > 0 && i + chunkSize < lines.length) {
-          await sleep(delay);
+        if (i + motion.chunkSize < lines.length) {
+          const stillActive = await waitForRenderDelay(motion.chunkDelay, renderId);
+          if (!stillActive) return false;
         }
       }
+      return true;
     }
 
-    /**
-     * After all animation is done, finalize any thinking blocks
-     * that might still show spinners (for non-animated renders).
-     */
-    function finalizeThinkingBlocks(el) {
-      // For statically rendered thinking blocks, we just need to make sure
-      // the duration is set. This is handled in renderMarkdownWithThinking
-      // for instant mode. For animated mode, animateThinkingBlock handles it.
+    function finalizeThinkingBlocks(ctx = document) {
+      bindThinkingDropdowns(ctx);
+      qsa('.thinking-dropdown', ctx).forEach(details => {
+        details.classList.remove('is-live');
+        const label = qs('.thinking-label', details);
+        if (label && !label.textContent.trim()) label.textContent = 'Thoughts';
+      });
     }
 
     /* ═══════════════════════════════════════════
@@ -1458,6 +1526,43 @@
         });
       });
     }
+    function bindThinkingDropdowns(ctx = document) {
+      qsa('.thinking-dropdown', ctx).forEach(details => {
+        if (details._thinkingBound) return;
+        details._thinkingBound = true;
+        details._userToggled = false;
+        details._followContent = true;
+
+        const content = qs('.thinking-content', details);
+        if (content) {
+          content.addEventListener('scroll', () => {
+            details._followContent = isNearScrollEnd(content, 32);
+          }, { passive: true });
+        }
+        details.addEventListener('toggle', () => {
+          if (details._internalToggle) return;
+          details._userToggled = true;
+        });
+      });
+    }
+    function bindImageLightboxes(ctx = document) {
+      qsa('.md-img', ctx).forEach(img => {
+        if (img._lightboxBound) return;
+        img._lightboxBound = true;
+        img.addEventListener('click', () => openLightbox(img.currentSrc || img.src, img.alt));
+      });
+    }
+    function bindRichContent(ctx = document) {
+      bindCodeCopyButtons(ctx);
+      bindImageLightboxes(ctx);
+      bindThinkingDropdowns(ctx);
+    }
+    function renderMarkdownInto(el, text, withThinking = true) {
+      if (!el) return;
+      el.innerHTML = withThinking ? renderMarkdownWithThinking(text) : renderMarkdown(text);
+      bindRichContent(el);
+      if (withThinking) finalizeThinkingBlocks(el);
+    }
 
     /* ═══════════════════════════════════════════
        ANSWER HELPERS
@@ -1550,7 +1655,7 @@
           <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 id="writePreviewPane" role="tabpanel" aria-labelledby="writeTabPreview" class="write-preview md-body"></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>
@@ -1564,7 +1669,7 @@
       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 bubbleClass = isBest ? 'best-answer-bubble md-body' : 'bubble md-body';
       const glowClass = isBest ? 'answer-new-glow' : '';
       return `
         <div ${bubbleId} class="${bubbleClass} ${glowClass}" tabindex="-1">${isBest ? '' : renderMarkdownWithThinking(rawText)}</div>
@@ -1595,7 +1700,7 @@
                 <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">${renderMarkdownWithThinking(v.text||'')}</div>
+              <div class="other-answer-text md-body">${renderMarkdownWithThinking(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)}
@@ -1637,19 +1742,20 @@
        MAIN RENDER
     ═══════════════════════════════════════════ */
     async function renderConversation(questionText, doAnimate) {
+      const renderId = beginRenderSession();
       const tr=$('transcript'), wl=$('welcome');
       const frag = document.createDocumentFragment();
 
       if (!S.conversation) {
         wl.style.display=''; tr.replaceChildren();
         setJumpLatest(false); document.title=S.originalTitle;
-        updateWelcomeState(); return;
+        updateWelcomeState(); finishRenderSession(renderId); return;
       }
 
       wl.style.display='none';
       const q = questionText||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}`);
+      if (S.conversation.id) history.replaceState({cid:S.conversation.id},'', normalizeConversationPath(S.conversation.id));
 
       const isNew = !S.conversation.created_at || (Date.now()-new Date(S.conversation.created_at).getTime())<10000;
       const questionNote = isNew
@@ -1686,24 +1792,29 @@
       }
 
       tr.replaceChildren(frag);
+      bindRichContent(tr);
 
       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 = renderMarkdownWithThinking(bestV.text||'');
-            bindCodeCopyButtons(el);
+          if (doAnimate && shouldAnimateResponses()) {
+            const completed = await animateText(el, bestV.text||'', renderId);
+            if (!completed) return;
+          } else if (el && isRenderSessionActive(renderId)) {
+            renderMarkdownInto(el, bestV.text||'', true);
+            finalizeThinkingBlocks(el);
           }
         }
       }
+      if (!isRenderSessionActive(renderId)) return;
 
       const rm = $('relatedMount');
       if (rm && S.relatedAnswers.length) rm.innerHTML = renderRelated(S.relatedAnswers);
 
+      bindRichContent(tr);
       bindHandlers(); scrollBottom(); restoreDraft();
+      finishRenderSession(renderId);
     }
 
     /* ═══════════════════════════════════════════
@@ -1768,8 +1879,6 @@
         if (e.target.closest('#writeSubmit')) { await handleWriteSubmit(); return; }
         if (e.target.closest('#writeTabEdit')) { handleWriteTab('edit'); return; }
         if (e.target.closest('#writeTabPreview')) { handleWriteTab('preview'); return; }
-        const img = e.target.closest('.md-img');
-        if (img) { openLightbox(img.src, img.alt); return; }
       });
 
       tr.addEventListener('input', e => {
@@ -1780,8 +1889,9 @@
           updateCharCount(ta,'writeCharCur',5000);
           saveDraft(ta.value);
           const preview=$('writePreviewPane');
-          if (preview?.classList.contains('write-preview') && !preview.style.display?.includes('none'))
-            preview.innerHTML = renderMarkdown(ta.value);
+          if (preview?.classList.contains('write-preview') && !preview.style.display?.includes('none')) {
+            renderMarkdownInto(preview, ta.value, true);
+          }
         } else {
           const panel = ta.closest('.propose-panel');
           if (panel) {
@@ -1925,8 +2035,12 @@
         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);
+        previewPane.innerHTML = '';
+        if (ta) {
+          renderMarkdownInto(previewPane, ta.value, true);
+        } else {
+          previewPane.innerHTML = '<p style="color:var(--muted)">Nothing to preview.</p>';
+        }
       }
     }
 
@@ -2000,6 +2114,7 @@
        ASK / SUBMIT
     ═══════════════════════════════════════════ */
     async function askQuestion(q) {
+      cancelActiveRender();
       showStatusWithEscalation(); showTyping();
       S.loading=true; $('sendBtn').disabled=true; closeAutocomplete();
       S.lastAction=()=>askQuestion(q);
@@ -2009,7 +2124,7 @@
       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);
+      await renderConversation(q, shouldAnimateResponses());
     }
 
     async function submitPrompt() {
@@ -2027,8 +2142,7 @@
     /* ═══════════════════════════════════════════
        LOAD SAVED
     ═══════════════════════════════════════════ */
-    async function loadSaved() {
-      const id=localStorage.getItem('hi_last_cid'); if(!id) return;
+    function showConversationSkeleton() {
       const tr=$('transcript'), wl=$('welcome');
       wl.style.display='none';
       tr.innerHTML=`<div class="skeleton-wrap">
@@ -2036,13 +2150,50 @@
         <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…');
+    }
+    async function loadConversationById(id, opts = {}) {
+      const {
+        clearLocalOnMissing = false,
+        replaceHistoryOnMissing = false,
+        showMissingToast = false,
+        showSkeleton = true,
+        statusText = 'Loading conversation…',
+      } = opts;
+      if (!id) return false;
+
+      cancelActiveRender();
+      if (showSkeleton) showConversationSkeleton();
+      showStatus(statusText);
       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'); }
+        S.relatedAnswers=[]; save();
+        await renderConversation(S.currentQuestion,false);
+        return true;
+      }
+
+      S.conversation = null; S.currentQuestion = ''; S.relatedAnswers = [];
+      $('transcript').innerHTML=''; $('welcome').style.display='';
+      updateWelcomeState();
+      if(clearLocalOnMissing) localStorage.removeItem('hi_last_cid');
+      if(replaceHistoryOnMissing) history.replaceState({},'',normalizeConversationPath());
+      if(showMissingToast) toast('Conversation not found','bad');
+      return false;
+    }
+    async function loadInitialConversation() {
+      if (S.routeConversationId) {
+        const fromRoute = await loadConversationById(S.routeConversationId, {
+          replaceHistoryOnMissing: true,
+          showMissingToast: true,
+        });
+        if (fromRoute) return;
+      }
+
+      const savedId = localStorage.getItem('hi_last_cid');
+      if (savedId) {
+        await loadConversationById(savedId, { clearLocalOnMissing: true });
+      }
     }
 
     /* ═══════════════════════════════════════════
@@ -2052,11 +2203,13 @@
       if(qsa('textarea').some(t=>t.value.trim())){
         if(!await confirmModal('Start a new chat?','You have unsaved content. It will be lost.')) return;
       }
+      cancelActiveRender();
       S.conversation=null; S.currentQuestion=''; S.relatedAnswers=[]; S.atBottom=true;
+      S.routeConversationId='';
       localStorage.removeItem('hi_last_cid');
       $('transcript').innerHTML=''; $('welcome').style.display='';
       updateWelcomeState(); setJumpLatest(false); $('prompt').value='';
-      autoGrow($('prompt')); history.replaceState({},'','/');
+      autoGrow($('prompt')); history.replaceState({},'',normalizeConversationPath());
       document.title=S.originalTitle; $('prompt').focus();
     }
 
@@ -2089,10 +2242,30 @@
       // 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=>{
+          const mode = o.getAttribute('data-anim');
+          const active = S.animMode===mode;
+          const motion = getMotion(mode);
+          o.classList.toggle('active',active);
+          o.classList.toggle('anim-static', mode==='none');
+          o.setAttribute('aria-checked',String(active));
+          o.style.setProperty('--anim-preview-duration', `${Math.max(motion.previewDuration, 1)}ms`);
+          o.style.setProperty('--anim-preview-ease', motion.previewEase);
+        });
+      }
+      async function applyAnimMode(mode) {
+        if (!mode || mode === S.animMode) return;
+        const hadActiveRender = S.rendering;
+        S.animMode=mode;
+        localStorage.setItem('hi_anim',S.animMode);
+        syncAnim();
+        if (S.conversation && hadActiveRender) {
+          cancelActiveRender();
+          await renderConversation(S.currentQuestion, shouldAnimateResponses());
+        }
       }
       animOpts.forEach(o=>{
-        o.addEventListener('click',()=>{S.animMode=o.getAttribute('data-anim');localStorage.setItem('hi_anim',S.animMode);syncAnim();});
+        o.addEventListener('click',async ()=>{ await applyAnimMode(o.getAttribute('data-anim')); });
         o.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();o.click();}});
       });
 
@@ -2197,14 +2370,15 @@
     function initPullToRefresh(){
       const chat=$('chat'); let pullStart=0;
       chat.addEventListener('touchstart',e=>{pullStart=chat.scrollTop===0?e.touches[0].clientY:0;},{passive:true});
-      chat.addEventListener('touchend',e=>{
+      chat.addEventListener('touchend',async e=>{
         if(!pullStart) return;
         if(e.changedTouches[0].clientY-pullStart>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;
+          const ok = await loadConversationById(S.conversation.id, {
+            showSkeleton: false,
+            statusText: 'Refreshing…',
           });
+          if (ok) toast('Refreshed','good');
         }
         pullStart=0;
       },{passive:true});
@@ -2250,11 +2424,12 @@
 
       const d=window.__HI_INIT__||{};
       if(d.client_id) S.clientId=d.client_id;
-      updateWelcomeState(); await loadSaved(); prompt.focus();
+      S.routeConversationId = String(d.conversation_id || '').trim();
+      updateWelcomeState(); await loadInitialConversation(); prompt.focus();
     }
 
     init();
   })();
   </script>
 </body>
-</html>
+</html>