Update templates/index.html

templates/index.html

@@ -17,416 +17,618 @@
       --accent2: #a16eff;
       --good: #2dd4bf;
       --bad: #f87171;
+      --warn: #fbbf24;
       --shadow: 0 20px 60px rgba(0,0,0,.35);
       --r: 18px;
       --r2: 12px;
       --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --anim-speed: 1;
     }
-
-    * { box-sizing: border-box; }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      background: radial-gradient(circle at top, #161c2b 0%, var(--bg) 46%);
+      width: 100%; 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;
     }
-
     body::before {
       content: "";
-      position: fixed;
-      inset: 0;
+      position: fixed; inset: 0;
       background-image:
-        linear-gradient(rgba(108,131,255,.04) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(108,131,255,.04) 1px, transparent 1px);
+        linear-gradient(rgba(108,131,255,.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(108,131,255,.03) 1px, transparent 1px);
       background-size: 44px 44px;
       pointer-events: none;
-      opacity: .35;
+      opacity: .3;
     }
-
     #app {
-      position: relative;
-      z-index: 1;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
+      position: relative; z-index: 1;
+      height: 100%; display: flex; flex-direction: column;
     }
 
+    /* ─── Topbar ─── */
     #topbar {
-      height: 72px;
-      padding: 0 22px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      height: 56px;
+      padding: 0 16px;
+      display: flex; align-items: center; justify-content: space-between;
       border-bottom: 1px solid var(--border);
-      backdrop-filter: blur(12px);
-      background: rgba(11,14,20,.72);
+      backdrop-filter: blur(14px);
+      background: rgba(11,14,20,.78);
+      flex-shrink: 0;
     }
-
     .brand {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      min-width: 0;
+      display: flex; align-items: center; gap: 10px; min-width: 0;
     }
-
     .logo {
-      width: 36px;
-      height: 36px;
-      border-radius: 12px;
-      display: grid;
-      place-items: center;
+      width: 30px; height: 30px; border-radius: 10px;
+      display: grid; place-items: center; font-size: 15px;
       background: linear-gradient(135deg, var(--accent), var(--accent2));
-      box-shadow: 0 10px 24px rgba(108,131,255,.25);
+      box-shadow: 0 6px 18px rgba(108,131,255,.25);
       flex: 0 0 auto;
     }
-
     .brand-title {
-      font-weight: 800;
-      letter-spacing: -.03em;
-      font-size: 18px;
+      font-weight: 700; letter-spacing: -.03em; font-size: 15px;
     }
-
     .brand-sub {
-      margin-top: 2px;
-      color: var(--muted);
-      font-size: 12px;
-      font-family: var(--mono);
-    }
-
-    .top-actions {
-      display: flex;
-      align-items: center;
-      gap: 10px;
+      color: var(--muted); font-size: 11px; font-family: var(--mono);
+      margin-left: 2px;
     }
-
-    .pill {
-      border: 1px solid var(--border);
+    .top-actions { display: flex; align-items: center; gap: 6px; }
+    .top-btn {
+      border: 1px solid var(--border2);
       background: rgba(255,255,255,.03);
-      color: var(--text);
-      border-radius: 999px;
-      padding: 8px 12px;
-      font-size: 12px;
-      font-family: var(--mono);
-    }
-
-    .button {
-      border: 1px solid transparent;
-      border-radius: 12px;
-      padding: 10px 14px;
+      color: var(--muted);
+      border-radius: 10px;
+      padding: 6px 12px;
+      font: inherit; font-size: 12px;
       cursor: pointer;
-      font: inherit;
-      color: white;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
-      box-shadow: 0 10px 26px rgba(108,131,255,.2);
+      transition: all 180ms ease;
+      display: flex; align-items: center; gap: 5px;
     }
-
-    .button.secondary {
-      background: rgba(255,255,255,.04);
-      border-color: var(--border);
-      box-shadow: none;
+    .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; }
 
-    #chat {
-      flex: 1;
-      overflow-y: auto;
-      padding: 26px 18px 30px;
+    /* ─── Status bar ─── */
+    #statusbar {
+      height: 0; overflow: hidden;
+      transition: height 220ms ease, opacity 220ms ease;
+      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;
+    }
+    #statusbar.visible {
+      height: 32px; opacity: 1;
+      border-bottom-color: var(--border);
+    }
+    #statusbar .status-dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      margin-right: 8px; 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); }
     }
 
-    .wrap {
-      max-width: 980px;
-      margin: 0 auto;
+    /* ─── Chat area ─── */
+    #chat {
+      flex: 1; overflow-y: auto;
+      padding: 20px 14px 24px;
+      scroll-behavior: smooth;
     }
+    #chat::-webkit-scrollbar { width: 5px; }
+    #chat::-webkit-scrollbar-track { background: transparent; }
+    #chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 9px; }
+    .wrap { max-width: 760px; margin: 0 auto; }
 
+    /* ─── Welcome ─── */
     .welcome {
-      margin: 8vh auto 0;
-      max-width: 560px;
-      text-align: center;
-      padding: 28px 24px;
+      margin: 6vh auto 0; max-width: 480px; text-align: center;
+      padding: 24px 20px;
       border: 1px solid var(--border);
-      border-radius: 24px;
-      background: rgba(255,255,255,.03);
+      border-radius: 20px;
+      background: rgba(255,255,255,.025);
       box-shadow: var(--shadow);
+      animation: fadeUp 400ms ease both;
     }
-
     .welcome h1 {
-      margin: 0;
-      font-size: 28px;
-      letter-spacing: -.04em;
+      font-size: 22px; font-weight: 700; letter-spacing: -.03em;
+      line-height: 1.3;
     }
-
     .welcome p {
-      color: var(--muted);
-      line-height: 1.7;
-      margin: 12px 0 0;
+      color: var(--muted); line-height: 1.6; margin-top: 8px; font-size: 13px;
+    }
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
+    /* ─── Turns ─── */
     .turn {
-      display: flex;
-      gap: 12px;
-      margin: 0 0 18px;
+      display: flex; gap: 10px; margin-bottom: 6px;
       align-items: flex-start;
+      animation: fadeUp calc(280ms * var(--anim-speed)) ease both;
     }
-
-    .turn.user {
-      justify-content: flex-end;
-    }
-
+    .turn.user { justify-content: flex-end; }
     .avatar {
-      width: 34px;
-      height: 34px;
-      border-radius: 50%;
-      display: grid;
-      place-items: center;
-      font-size: 14px;
-      flex: 0 0 auto;
+      width: 28px; height: 28px; border-radius: 50%;
+      display: grid; place-items: center;
+      font-size: 12px; flex: 0 0 auto;
+      transition: transform 200ms ease;
     }
-
+    .avatar:hover { transform: scale(1.1); }
     .avatar.user {
       background: linear-gradient(135deg, #1f2b63, #2d1d58);
-      border: 1px solid rgba(108,131,255,.25);
+      border: 1px solid rgba(108,131,255,.2);
     }
-
     .avatar.assistant {
       background: linear-gradient(135deg, #163d34, #183c54);
-      border: 1px solid rgba(45,212,191,.25);
+      border: 1px solid rgba(45,212,191,.2);
     }
-
     .bubble {
-      max-width: min(760px, calc(100vw - 120px));
+      max-width: min(620px, calc(100vw - 100px));
       border: 1px solid var(--border);
-      border-radius: 18px;
-      padding: 14px 16px;
-      line-height: 1.65;
-      white-space: pre-wrap;
-      word-break: break-word;
+      border-radius: 16px;
+      padding: 10px 14px;
+      line-height: 1.6; font-size: 14px;
+      white-space: pre-wrap; word-break: break-word;
       background: rgba(255,255,255,.03);
+      transition: border-color 200ms ease;
     }
-
     .turn.user .bubble {
-      background: linear-gradient(135deg, rgba(108,131,255,.18), rgba(161,110,255,.16));
-      border-color: rgba(108,131,255,.24);
-      border-radius: 18px 18px 6px 18px;
-      box-shadow: 0 10px 28px rgba(108,131,255,.1);
+      background: linear-gradient(135deg, rgba(108,131,255,.15), rgba(161,110,255,.12));
+      border-color: rgba(108,131,255,.2);
+      border-radius: 16px 16px 4px 16px;
     }
-
     .turn.assistant .bubble {
-      background: rgba(255,255,255,.035);
-      border-radius: 6px 18px 18px 18px;
+      border-radius: 4px 16px 16px 16px;
     }
-
-    .meta {
-      margin-top: 6px;
-      font-size: 11px;
-      color: var(--muted);
+    .turn-meta {
+      margin-top: 3px;
+      font-size: 10px; color: var(--muted);
       font-family: var(--mono);
-      display: flex;
+      display: flex; gap: 6px; align-items: center;
       flex-wrap: wrap;
-      gap: 8px;
-      align-items: center;
     }
-
     .chip {
       border: 1px solid var(--border);
       border-radius: 999px;
-      padding: 3px 8px;
-      font-size: 10px;
+      padding: 2px 7px;
+      font-size: 9px;
       text-transform: uppercase;
-      letter-spacing: .06em;
+      letter-spacing: .05em;
     }
-
-    .chip.good { color: var(--good); }
+    .chip.good { color: var(--good); border-color: rgba(45,212,191,.25); }
     .chip.muted { color: var(--muted); }
-    .chip.bad { color: var(--bad); }
+    .chip.warn { color: var(--warn); border-color: rgba(251,191,36,.25); }
+    .chip.matched { color: var(--accent); border-color: rgba(108,131,255,.25); }
 
-    .answer-card {
-      margin-top: 10px;
-      padding: 14px;
-      border: 1px solid var(--border);
-      border-radius: 18px;
-      background: rgba(255,255,255,.03);
+    /* ─── Best answer bubble ─── */
+    .best-answer-wrap {
+      margin-top: 2px;
     }
-
-    .answer-top {
-      display: flex;
-      gap: 12px;
-      align-items: flex-start;
+    .best-answer-bubble {
+      border: 1px solid rgba(45,212,191,.15);
+      border-radius: 4px 16px 16px 16px;
+      padding: 10px 14px;
+      background: rgba(45,212,191,.04);
+      line-height: 1.6; font-size: 14px;
+      white-space: pre-wrap; word-break: break-word;
     }
-
-    .answer-main {
-      flex: 1;
-      min-width: 0;
+    .best-answer-meta {
+      margin-top: 4px;
+      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
     }
 
-    .answer-head {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      align-items: center;
-      margin-bottom: 10px;
+    /* ─── Vote row ─── */
+    .vote-row {
+      display: flex; gap: 4px; align-items: center; margin-top: 6px;
+    }
+    .vote-btn {
+      border: 1px solid var(--border2);
+      background: rgba(255,255,255,.02);
       color: var(--muted);
-      font-family: var(--mono);
-      font-size: 11px;
+      border-radius: 8px;
+      padding: 4px 9px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
+      transition: all 160ms ease;
+      display: inline-flex; align-items: center; gap: 3px;
     }
-
-    .answer-text {
-      white-space: pre-wrap;
-      word-break: break-word;
-      line-height: 1.7;
-      font-size: 14px;
+    .vote-btn:hover {
+      border-color: rgba(108,131,255,.35);
+      color: var(--text);
+      background: rgba(108,131,255,.07);
     }
-
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      margin-top: 12px;
+    .vote-btn.voted-up {
+      border-color: rgba(45,212,191,.5); color: var(--good);
+      background: rgba(45,212,191,.08);
     }
-
-    .mini {
+    .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(.94); }
+    .action-btn {
       border: 1px solid var(--border2);
       background: rgba(255,255,255,.02);
-      color: var(--text);
-      border-radius: 999px;
-      padding: 7px 10px;
-      font: inherit;
-      font-size: 12px;
+      color: var(--muted);
+      border-radius: 8px;
+      padding: 4px 9px;
+      font: inherit; font-size: 11px;
       cursor: pointer;
+      transition: all 160ms ease;
     }
-
-    .mini:hover {
-      border-color: rgba(108,131,255,.4);
-      background: rgba(108,131,255,.08);
+    .action-btn:hover {
+      border-color: rgba(108,131,255,.35);
+      color: var(--text);
     }
 
-    .mini.voted-up {
-      border-color: rgba(45,212,191,.6);
-      color: var(--good);
+    /* ─── Expandable other answers ─── */
+    .other-answers-toggle {
+      margin-top: 6px;
+      border: 1px solid var(--border);
+      background: rgba(255,255,255,.02);
+      color: var(--muted);
+      border-radius: 10px;
+      padding: 6px 12px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
+      transition: all 180ms ease;
+      display: inline-flex; align-items: center; gap: 5px;
+      width: auto;
     }
-
-    .mini.voted-down {
-      border-color: rgba(248,113,113,.6);
-      color: var(--bad);
+    .other-answers-toggle:hover {
+      border-color: rgba(108,131,255,.3);
+      color: var(--text);
+    }
+    .other-answers-toggle .arrow {
+      display: inline-block;
+      transition: transform 200ms ease;
+      font-size: 10px;
+    }
+    .other-answers-toggle.open .arrow {
+      transform: rotate(90deg);
+    }
+    .other-answers-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 300ms ease, opacity 200ms ease;
+      opacity: 0;
+      margin-top: 4px;
+    }
+    .other-answers-panel.open {
+      max-height: 2000px; opacity: 1;
+    }
+    .other-answer-card {
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 10px 12px;
+      margin-top: 6px;
+      background: rgba(255,255,255,.02);
+      animation: fadeUp 200ms ease both;
+    }
+    .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 {
-      margin-top: 12px;
+    /* ─── Versions inside other answers ─── */
+    .versions-toggle {
+      margin-top: 4px;
+      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 ease;
+    }
+    .versions-toggle:hover { color: var(--text); }
+    .versions-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 280ms ease, opacity 180ms ease;
+      opacity: 0;
       border-left: 2px solid var(--border2);
-      padding-left: 12px;
-      display: none;
+      padding-left: 10px;
+      margin-top: 4px;
+    }
+    .versions-panel.open {
+      max-height: 1500px; opacity: 1;
+    }
+    .version-card {
+      border: 1px solid var(--border);
+      background: rgba(255,255,255,.02);
+      border-radius: 10px;
+      padding: 8px 10px;
+      margin-top: 4px;
+      animation: fadeUp 180ms ease 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: 4px;
+    }
+    .version-text {
+      font-size: 12px; line-height: 1.55;
+      white-space: pre-wrap; word-break: break-word;
     }
 
-    .versions.open {
-      display: block;
+    /* ─── Propose version ─── */
+    .propose-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 280ms ease, opacity 200ms ease;
+      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: 10px;
+      background: var(--panel);
+      color: var(--text);
+      font: inherit; font-size: 13px;
+      line-height: 1.55;
+      padding: 8px 10px;
+      outline: none;
+      transition: border-color 200ms ease;
+    }
+    .propose-textarea:focus {
+      border-color: rgba(108,131,255,.4);
+    }
+    .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: 8px;
+      padding: 5px 12px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
+      transition: all 160ms ease;
+    }
+    .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: 8px;
+      padding: 5px 10px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
     }
 
-    .version {
-      margin-top: 10px;
+    /* ─── Typing indicator ─── */
+    .typing-indicator {
+      display: flex; gap: 10px; margin-bottom: 6px;
+      align-items: flex-start;
+      animation: fadeUp 250ms ease both;
+    }
+    .typing-dots {
+      display: flex; gap: 4px; align-items: center;
+      padding: 12px 16px;
       border: 1px solid var(--border);
-      background: rgba(255,255,255,.025);
-      border-radius: 14px;
-      padding: 12px;
+      border-radius: 4px 16px 16px 16px;
+      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; }
     }
 
-    .version .meta {
-      margin-top: 0;
-      margin-bottom: 8px;
+    /* ─── Diffusion effect ─── */
+    .diffusion-text {
+      filter: blur(4px);
+      opacity: .4;
+      transition: filter 600ms ease, opacity 600ms ease;
+    }
+    .diffusion-text.revealed {
+      filter: blur(0);
+      opacity: 1;
     }
 
+    /* ─── Composer ─── */
     .compose {
       border-top: 1px solid var(--border);
-      background: rgba(11,14,20,.84);
+      background: rgba(11,14,20,.85);
       backdrop-filter: blur(14px);
-      padding: 16px 18px 18px;
+      padding: 10px 14px 14px;
+      flex-shrink: 0;
     }
-
     .compose-inner {
-      max-width: 980px;
+      max-width: 760px;
       margin: 0 auto;
       border: 1px solid var(--border2);
-      border-radius: 18px;
-      padding: 12px 12px 10px;
+      border-radius: 14px;
+      padding: 8px 10px 6px;
       background: var(--panel);
-      box-shadow: var(--shadow);
+      box-shadow: 0 8px 32px rgba(0,0,0,.25);
+      transition: border-color 200ms ease;
+    }
+    .compose-inner:focus-within {
+      border-color: rgba(108,131,255,.3);
     }
-
     #prompt {
       width: 100%;
-      min-height: 56px;
-      max-height: 240px;
-      resize: vertical;
-      border: none;
-      outline: none;
+      min-height: 40px; max-height: 180px;
+      resize: none;
+      border: none; outline: none;
       background: transparent;
       color: var(--text);
-      font: inherit;
-      line-height: 1.65;
-      padding: 2px 2px 8px;
-      white-space: pre-wrap;
+      font: inherit; font-size: 14px;
+      line-height: 1.55;
+      padding: 2px 2px 4px;
     }
-
-    #prompt::placeholder {
-      color: #6f768a;
-    }
-
+    #prompt::placeholder { color: #5a6178; }
     .compose-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
+      display: flex; align-items: center; justify-content: space-between;
+      gap: 8px;
       border-top: 1px solid var(--border);
-      padding-top: 10px;
+      padding-top: 6px;
     }
-
     .hint {
-      color: var(--muted);
-      font-size: 11px;
+      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;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      box-shadow: 0 4px 14px rgba(108,131,255,.2);
+      transition: transform 140ms ease, box-shadow 140ms ease;
+    }
+    .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;
+    }
 
-    .send {
-      min-width: 102px;
+    /* ─── Settings panel ─── */
+    #settingsPanel {
+      position: fixed;
+      top: 56px; right: 0;
+      width: 260px;
+      background: var(--panel);
+      border: 1px solid var(--border2);
+      border-radius: 0 0 0 16px;
+      box-shadow: var(--shadow);
+      z-index: 100;
+      transform: translateX(100%);
+      transition: transform 250ms cubic-bezier(.4,0,.2,1);
+      padding: 14px 16px;
+    }
+    #settingsPanel.open {
+      transform: translateX(0);
+    }
+    .settings-title {
+      font-size: 12px; font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: .06em;
+      color: var(--muted);
+      margin-bottom: 12px;
+    }
+    .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;
+    }
+    .toggle {
+      width: 36px; height: 20px;
+      border-radius: 999px;
+      background: rgba(255,255,255,.1);
+      border: 1px solid var(--border2);
+      cursor: pointer;
+      position: relative;
+      transition: background 200ms ease;
+      flex-shrink: 0;
+    }
+    .toggle.on {
+      background: rgba(108,131,255,.35);
+      border-color: rgba(108,131,255,.5);
+    }
+    .toggle::after {
+      content: "";
+      position: absolute;
+      top: 2px; left: 2px;
+      width: 14px; height: 14px;
+      border-radius: 50%;
+      background: var(--text);
+      transition: transform 200ms ease;
+    }
+    .toggle.on::after {
+      transform: translateX(16px);
     }
 
+    /* ─── Toast ─── */
     #toast {
       position: fixed;
-      left: 50%;
-      bottom: 96px;
-      transform: translateX(-50%) translateY(16px);
-      opacity: 0;
-      pointer-events: none;
-      transition: 220ms ease;
+      left: 50%; bottom: 80px;
+      transform: translateX(-50%) translateY(12px);
+      opacity: 0; pointer-events: none;
+      transition: all 200ms cubic-bezier(.4,0,.2,1);
       z-index: 50;
-      background: rgba(17,21,29,.96);
+      background: rgba(17,21,29,.95);
       border: 1px solid var(--border2);
-      border-radius: 999px;
-      padding: 10px 16px;
+      border-radius: 10px;
+      padding: 8px 14px;
       color: var(--text);
-      font-family: var(--mono);
-      font-size: 12px;
+      font-family: var(--mono); font-size: 11px;
       box-shadow: var(--shadow);
       white-space: nowrap;
+      backdrop-filter: blur(10px);
     }
-
     #toast.show {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
+      opacity: 1; transform: translateX(-50%) translateY(0);
     }
+    #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.good { border-color: rgba(45,212,191,.45); color: var(--good); }
-    #toast.bad { border-color: rgba(248,113,113,.45); color: var(--bad); }
+    /* ─── No-answer placeholder ─── */
+    .no-answer-bubble {
+      border-style: dashed !important;
+      color: var(--muted);
+    }
 
-    @media (max-width: 720px) {
-      #topbar { padding: 0 14px; }
+    /* ─── Responsive ��── */
+    @media (max-width: 600px) {
+      #topbar { padding: 0 10px; }
       .brand-sub { display: none; }
-      .pill { display: none; }
-      .bubble { max-width: calc(100vw - 96px); }
-      .turn { gap: 8px; }
-      .welcome { margin-top: 4vh; }
+      .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 16px 16px; }
     }
   </style>
 </head>
@@ -437,36 +639,73 @@
         <div class="logo">🧠</div>
         <div>
           <div class="brand-title">Human Intelligence</div>
-          <div class="brand-sub">anonymous · answer-engine chat</div>
+          <div class="brand-sub">community answers</div>
         </div>
       </div>
       <div class="top-actions">
-        <div class="pill">Anonymous mode</div>
-        <button class="button secondary" id="newQuestionBtn">New question</button>
+        <button class="top-btn" id="newChatBtn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          New chat
+        </button>
+        <button class="top-btn" id="settingsBtn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <div id="statusbar">
+      <span class="status-dot"></span>
+      <span id="statusText">Thinking…</span>
+    </div>
+
+    <div id="settingsPanel">
+      <div class="settings-title">Appearance</div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">None</div>
+          <div class="setting-desc">Instant display</div>
+        </div>
+        <div class="toggle" id="togNone" data-anim="none"></div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">AI typing</div>
+          <div class="setting-desc">Typed letter by letter</div>
+        </div>
+        <div class="toggle" id="togAI" data-anim="ai"></div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Human typing</div>
+          <div class="setting-desc">Irregular human speed</div>
+        </div>
+        <div class="toggle" id="togHuman" data-anim="human"></div>
+      </div>
+      <div class="setting-row">
+        <div>
+          <div class="setting-label">Diffusion</div>
+          <div class="setting-desc">Blur-to-clear reveal</div>
+        </div>
+        <div class="toggle" id="togDiffusion" data-anim="diffusion"></div>
       </div>
     </div>
 
     <div id="chat">
       <div class="wrap">
         <div class="welcome" id="welcome">
-          <h1>Ask a question. Answers appear right here.</h1>
-          <p>
-            The app searches existing conversation objects behind the scenes,
-            but the view stays in one continuous chat. If an answer exists,
-            it shows up here. If not, you can write the first one.
-          </p>
+          <h1>Ask anything. Get human answers.</h1>
+          <p>Questions are matched to existing conversations. If no answer exists yet, the community writes one.</p>
         </div>
-
         <div id="transcript"></div>
       </div>
     </div>
 
     <div class="compose">
       <div class="compose-inner">
-        <textarea id="prompt" placeholder="Ask a question..."></textarea>
+        <textarea id="prompt" rows="1" placeholder="Ask a question…"></textarea>
         <div class="compose-row">
-          <div class="hint" id="hint">Press Enter to send · Shift+Enter for newline</div>
-          <button class="button send" id="sendBtn">Ask</button>
+          <div class="hint" id="hint">Enter to send · Shift+Enter newline</div>
+          <button class="send-btn" id="sendBtn">Ask</button>
         </div>
       </div>
     </div>
@@ -480,235 +719,244 @@
 
   <script>
     (() => {
+      /* ── State ── */
       const S = {
         clientId: null,
         conversation: null,
         currentQuestion: "",
         loading: false,
+        animMode: localStorage.getItem("hi_anim") || "none",
       };
+      const $ = id => document.getElementById(id);
 
-      const $ = (id) => document.getElementById(id);
-
+      /* ── Client ID ── */
       function getClientId() {
         let id = localStorage.getItem("hi_client_id");
         if (!id) {
-          id = (crypto.randomUUID ? crypto.randomUUID() : String(Date.now() + Math.random()))
-            .replace(/-/g, "")
-            .slice(0, 16);
+          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);
         }
         return id;
       }
 
+      /* ── Toast ── */
       function toast(msg, kind = "") {
         const t = $("toast");
         t.textContent = msg;
-        t.className = "";
-        t.classList.add("show");
+        t.className = "show";
         if (kind) t.classList.add(kind);
-        clearTimeout(t._timer);
-        t._timer = setTimeout(() => {
-          t.className = "";
-        }, 2200);
+        clearTimeout(t._t);
+        t._t = setTimeout(() => { t.className = ""; }, 2000);
       }
 
-      function escapeHtml(s) {
-        return String(s)
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/\n/g, "<br>");
+      /* ── Status bar ── */
+      function showStatus(text) {
+        $("statusText").textContent = text;
+        $("statusbar").classList.add("visible");
+      }
+      function hideStatus() {
+        $("statusbar").classList.remove("visible");
       }
 
+      /* ── Helpers ── */
+      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>"); }
       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;
-        }
+          return new Date(iso).toLocaleString([], { month:"short", day:"numeric", hour:"2-digit", minute:"2-digit" });
+        } catch { return iso; }
+      }
+      function scrollBottom() {
+        const c = $("chat");
+        requestAnimationFrame(() => { c.scrollTop = c.scrollHeight; });
       }
 
-      function scrollToBottom() {
-        const chat = $("chat");
-        chat.scrollTop = chat.scrollHeight;
+      /* ── Appearance animation ── */
+      async function animateText(el, text) {
+        const mode = S.animMode;
+        if (mode === "ai") {
+          el.innerHTML = "";
+          for (let i = 0; i < text.length; i++) {
+            el.innerHTML = nl2br(text.slice(0, i + 1));
+            scrollBottom();
+            await sleep(12 + Math.random() * 8);
+          }
+        } else if (mode === "human") {
+          el.innerHTML = "";
+          for (let i = 0; i < text.length; i++) {
+            el.innerHTML = nl2br(text.slice(0, i + 1));
+            scrollBottom();
+            const ch = text[i];
+            let d = 25 + Math.random() * 55;
+            if (ch === " ") d += Math.random() * 30;
+            if (".!?".includes(ch)) d += 120 + Math.random() * 180;
+            if (",;:".includes(ch)) d += 40 + Math.random() * 60;
+            if (Math.random() < .03) d += 200 + Math.random() * 300;
+            await sleep(d);
+          }
+        } else if (mode === "diffusion") {
+          el.innerHTML = `<span class="diffusion-text">${nl2br(text)}</span>`;
+          scrollBottom();
+          await sleep(80);
+          el.querySelector(".diffusion-text").classList.add("revealed");
+        } else {
+          el.innerHTML = nl2br(text);
+        }
+      }
+      function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+      /* ── Typing indicator ── */
+      function showTyping() {
+        removeTyping();
+        const h = `<div class="typing-indicator" id="typingInd">
+          <div class="avatar assistant">✦</div>
+          <div class="typing-dots"><span></span><span></span><span></span></div>
+        </div>`;
+        $("transcript").insertAdjacentHTML("beforeend", h);
+        scrollBottom();
+      }
+      function removeTyping() {
+        const el = $("typingInd");
+        if (el) el.remove();
       }
 
+      /* ── Active version logic ── */
       function activeVersion(answer) {
-        const versions = answer?.versions || [];
-        if (!versions.length) return null;
-        const id = answer.active_version;
-        let found = versions.find(v => v.id === id);
-        if (found) return found;
-        return [...versions].sort((a, b) => {
-          const av = Number(a.votes || 0);
-          const bv = Number(b.votes || 0);
-          if (bv !== av) return bv - av;
-          return String(b.created_at || "").localeCompare(String(a.created_at || ""));
+        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));
+          if (d !== 0) return d;
+          return String(b.created_at||"").localeCompare(String(a.created_at||""));
         })[0];
       }
-
-      function answerScore(answer) {
-        const v = activeVersion(answer);
-        if (!v) return 0;
-        return Number(v.votes || 0);
+      function answerScore(a) {
+        const v = activeVersion(a);
+        return v ? Number(v.votes||0) : 0;
       }
-
-      function sortedAnswers(conversation) {
-        return [...(conversation?.answers || [])].sort((a, b) => {
-          const sa = answerScore(a);
-          const sb = answerScore(b);
-          if (sb !== sa) return sb - sa;
-          return String(b.created_at || "").localeCompare(String(a.created_at || ""));
+      function sortedAnswers(conv) {
+        return [...(conv?.answers||[])].sort((a,b) => {
+          const d = answerScore(b) - answerScore(a);
+          if (d !== 0) return d;
+          return String(b.created_at||"").localeCompare(String(a.created_at||""));
         });
       }
 
-      function setComposerLabel() {
-        const hasConv = !!S.conversation;
-        const answers = S.conversation?.answers || [];
-        const prompt = $("prompt");
-        const sendBtn = $("sendBtn");
-
-        if (!hasConv) {
-          prompt.placeholder = "Ask a question...";
-          sendBtn.textContent = "Ask";
-          $("hint").textContent = "Press Enter to ask · Shift+Enter for newline";
-          return;
-        }
-
-        if (!answers.length) {
-          prompt.placeholder = "Write the first answer...";
-          sendBtn.textContent = "Answer";
-          $("hint").textContent = "Press Enter to answer · Shift+Enter for newline";
-          return;
+      /* ── Composer label ── */
+      function setComposer() {
+        const p = $("prompt"), b = $("sendBtn"), h = $("hint");
+        if (!S.conversation) {
+          p.placeholder = "Ask a question…";
+          b.textContent = "Ask";
+          h.textContent = "Enter to send · Shift+Enter newline";
+        } else {
+          p.placeholder = "Write an answer (optional)…";
+          b.textContent = "Answer";
+          h.textContent = "Enter to answer · Shift+Enter newline";
         }
+      }
 
-        prompt.placeholder = "Add another answer...";
-        sendBtn.textContent = "Answer";
-        $("hint").textContent = "Press Enter to answer · Shift+Enter for newline";
+      /* ── Render helpers ── */
+      function renderVoteRow(answerId, ver) {
+        const vu = ver.votes_by_client && ver.votes_by_client[S.clientId] === 1;
+        const vd = ver.votes_by_client && ver.votes_by_client[S.clientId] === -1;
+        return `<div class="vote-row">
+          <button class="vote-btn ${vu?"voted-up":""}" data-vote="${answerId}|${ver.id}|1">▲ ${Number(ver.votes||0)}</button>
+          <button class="vote-btn ${vd?"voted-down":""}" data-vote="${answerId}|${ver.id}|-1">▼</button>
+        </div>`;
       }
 
-      function renderEmptyAnswerPlaceholder(assistantText) {
+      function renderVersions(answer) {
+        const active = activeVersion(answer);
+        const others = (answer.versions||[]).filter(v => v.id !== active?.id);
+        if (!others.length) return "";
         return `
-          <div class="turn assistant">
-            <div class="avatar assistant">✦</div>
-            <div>
-              <div class="bubble" style="border-style:dashed;">
-                ${escapeHtml(assistantText || "No answer yet. You can write one.")}
-              </div>
-              <div class="meta">
-                <span class="chip muted">open answer turn</span>
-                <span>Write the first answer below.</span>
+          <button class="versions-toggle" data-toggle-versions="${answer.id}">
+            <span class="arrow">▶</span> ${others.length} version${others.length>1?"s":""}
+          </button>
+          <div class="versions-panel" id="vp-${answer.id}">
+            ${others.map(v => `
+              <div class="version-card">
+                <div class="version-head">
+                  <span>${esc(v.author||"Anonymous")}</span>
+                  <span>·</span>
+                  <span>${fmtTime(v.created_at)}</span>
+                  <span>·</span>
+                  <span>votes: ${Number(v.votes||0)}</span>
+                </div>
+                <div class="version-text">${nl2br(v.text||"")}</div>
+                ${renderVoteRow(answer.id, v)}
               </div>
-            </div>
-          </div>
-        `;
+            `).join("")}
+          </div>`;
       }
 
-      function renderAnswerCard(answer, idx) {
-        const active = activeVersion(answer);
-        if (!active) return "";
-
-        const others = (answer.versions || []).filter(v => v.id !== active.id);
+      function renderPropose(answerId) {
+        return `
+          <button class="action-btn" data-propose="${answerId}">Propose version</button>
+          <div class="propose-panel" id="pp-${answerId}">
+            <textarea class="propose-textarea" placeholder="Write a better version…" rows="3"></textarea>
+            <div class="propose-actions">
+              <button class="propose-submit" data-submit-proposal="${answerId}">Submit</button>
+              <button class="propose-cancel" data-cancel-propose="${answerId}">Cancel</button>
+            </div>
+          </div>`;
+      }
 
-        const versionsPanel = others.length ? `
-          <button class="mini" type="button" data-toggle-versions="${answer.id}">
-            Show versions (${others.length})
+      function renderOtherAnswers(answers) {
+        if (answers.length <= 1) return "";
+        const others = answers.slice(1);
+        return `
+          <button class="other-answers-toggle" id="otherAnswersToggle">
+            <span class="arrow">▶</span> ${others.length} other answer${others.length>1?"s":""}
           </button>
-          <div class="versions" id="versions-${answer.id}">
-            ${others.map(v => {
-              const up = Number(v.votes || 0);
-              const votedUp = v.votes_by_client && v.votes_by_client[S.clientId] === 1;
-              const votedDown = v.votes_by_client && v.votes_by_client[S.clientId] === -1;
+          <div class="other-answers-panel" id="otherAnswersPanel">
+            ${others.map((a, idx) => {
+              const v = activeVersion(a);
+              if (!v) return "";
               return `
-                <div class="version">
-                  <div class="meta">
-                    <span>version ${escapeHtml(v.id.slice(0, 6))}</span>
-                    <span>·</span>
-                    <span>${escapeHtml(v.author || "Anonymous")}</span>
+                <div class="other-answer-card">
+                  <div class="other-answer-head">
+                    <span>${esc(v.author||"Anonymous")}</span>
                     <span>·</span>
                     <span>${fmtTime(v.created_at)}</span>
-                    <span>·</span>
-                    <span>votes: ${up}</span>
-                    ${v.id === active.id ? `<span class="chip good">active</span>` : ""}
                   </div>
-                  <div class="answer-text">${escapeHtml(v.text || "")}</div>
-                  <div class="actions">
-                    <button class="mini ${votedUp ? "voted-up" : ""}" type="button"
-                      data-vote="${answer.id}|${v.id}|1">▲ Upvote</button>
-                    <button class="mini ${votedDown ? "voted-down" : ""}" type="button"
-                      data-vote="${answer.id}|${v.id}|-1">▼ Downvote</button>
+                  <div class="other-answer-text">${nl2br(v.text||"")}</div>
+                  ${renderVoteRow(a.id, v)}
+                  <div style="margin-top:4px;display:flex;gap:4px;flex-wrap:wrap;">
+                    ${renderVersions(a)}
+                    ${renderPropose(a.id)}
                   </div>
-                </div>
-              `;
+                </div>`;
             }).join("")}
-          </div>
-        ` : "";
-
-        const activeVotedUp = active.votes_by_client && active.votes_by_client[S.clientId] === 1;
-        const activeVotedDown = active.votes_by_client && active.votes_by_client[S.clientId] === -1;
-
-        return `
-          <div class="answer-card" data-answer-id="${answer.id}">
-            <div class="answer-top">
-              <div class="avatar assistant">🧑</div>
-              <div class="answer-main">
-                <div class="answer-head">
-                  <span>answer ${idx + 1}</span>
-                  <span>·</span>
-                  <span>${escapeHtml(active.author || "Anonymous")}</span>
-                  <span>·</span>
-                  <span>${fmtTime(active.created_at)}</span>
-                  <span class="chip good">active</span>
-                </div>
-                <div class="bubble">
-                  <div class="answer-text">${escapeHtml(active.text || "")}</div>
-                </div>
-                <div class="actions">
-                  <button class="mini ${activeVotedUp ? "voted-up" : ""}" type="button"
-                    data-vote="${answer.id}|${active.id}|1">▲ ${Number(active.votes || 0)}</button>
-                  <button class="mini ${activeVotedDown ? "voted-down" : ""}" type="button"
-                    data-vote="${answer.id}|${active.id}|-1">▼</button>
-                  <button class="mini" type="button" data-propose="${answer.id}">Propose version</button>
-                </div>
-                ${versionsPanel}
-                <div class="versions" id="propose-${answer.id}" style="display:none; margin-top:12px;">
-                  <textarea class="mini-proposal" rows="4" placeholder="Propose a better version..."></textarea>
-                  <div class="actions">
-                    <button class="mini" type="button" data-submit-proposal="${answer.id}">Submit version</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        `;
+          </div>`;
       }
 
-      function renderConversation(questionText) {
-        const transcript = $("transcript");
-        const welcome = $("welcome");
-        transcript.innerHTML = "";
+      /* ── Main render ── */
+      async function renderConversation(questionText, doAnimate) {
+        const tr = $("transcript");
+        const wl = $("welcome");
+        tr.innerHTML = "";
 
         if (!S.conversation) {
-          welcome.style.display = "block";
-          setComposerLabel();
+          wl.style.display = "block";
+          setComposer();
           return;
         }
-
-        welcome.style.display = "none";
+        wl.style.display = "none";
 
         const q = questionText || S.conversation.question || "";
-        transcript.insertAdjacentHTML("beforeend", `
+        tr.insertAdjacentHTML("beforeend", `
           <div class="turn user">
             <div>
-              <div class="bubble">${escapeHtml(q)}</div>
-              <div class="meta">
+              <div class="bubble">${nl2br(q)}</div>
+              <div class="turn-meta">
                 <span class="chip muted">question</span>
                 <span>${fmtTime(S.conversation.created_at)}</span>
               </div>
@@ -718,94 +966,136 @@
         `);
 
         const answers = sortedAnswers(S.conversation);
+
         if (!answers.length) {
-          transcript.insertAdjacentHTML("beforeend", renderEmptyAnswerPlaceholder(
-            S.conversation.assistant_text || "No answer yet. You can write one."
-          ));
+          tr.insertAdjacentHTML("beforeend", `
+            <div class="turn assistant">
+              <div class="avatar assistant">✦</div>
+              <div>
+                <div class="bubble no-answer-bubble">No answer yet. You can write one below.</div>
+                <div class="turn-meta"><span class="chip warn">awaiting answer</span></div>
+              </div>
+            </div>
+          `);
         } else {
-          answers.forEach((answer, idx) => {
-            transcript.insertAdjacentHTML("beforeend", renderAnswerCard(answer, idx));
-          });
+          const best = answers[0];
+          const bv = activeVersion(best);
+          if (bv) {
+            tr.insertAdjacentHTML("beforeend", `
+              <div class="turn assistant">
+                <div class="avatar assistant">✦</div>
+                <div class="best-answer-wrap">
+                  <div class="best-answer-bubble" id="bestAnswerText"></div>
+                  <div class="best-answer-meta turn-meta">
+                    <span class="chip good">best answer</span>
+                    <span>${esc(bv.author||"Anonymous")}</span>
+                    <span>·</span>
+                    <span>${fmtTime(bv.created_at)}</span>
+                  </div>
+                  ${renderVoteRow(best.id, bv)}
+                  <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">
+                    ${renderVersions(best)}
+                    ${renderPropose(best.id)}
+                  </div>
+                  ${renderOtherAnswers(answers)}
+                </div>
+              </div>
+            `);
+
+            if (doAnimate) {
+              await animateText($("bestAnswerText"), bv.text || "");
+            } else {
+              $("bestAnswerText").innerHTML = nl2br(bv.text || "");
+            }
+          }
         }
 
-        setComposerLabel();
-        bindDynamicHandlers();
-        scrollToBottom();
+        setComposer();
+        bindHandlers();
+        scrollBottom();
       }
 
-      function bindDynamicHandlers() {
+      /* ── Bind dynamic handlers ── */
+      function bindHandlers() {
+        document.querySelectorAll("[data-vote]").forEach(btn => {
+          btn.onclick = async () => {
+            if (!S.conversation) return;
+            const [aid, vid, d] = btn.getAttribute("data-vote").split("|");
+            btn.style.transform = "scale(.9)";
+            const res = await callAPI("vote", {
+              conversation_id: S.conversation.id,
+              answer_id: aid, version_id: vid, delta: Number(d),
+            });
+            btn.style.transform = "";
+            if (res.ok) {
+              S.conversation = res.conversation;
+              localStorage.setItem("hi_last_cid", S.conversation.id);
+              renderConversation(S.currentQuestion, false);
+            } else {
+              toast(res.error || "Error", "bad");
+            }
+          };
+        });
+
         document.querySelectorAll("[data-toggle-versions]").forEach(btn => {
           btn.onclick = () => {
             const id = btn.getAttribute("data-toggle-versions");
-            const panel = document.getElementById(`versions-${id}`);
+            const panel = $("vp-" + id);
             if (!panel) return;
-            panel.classList.toggle("open");
-            btn.textContent = panel.classList.contains("open")
-              ? "Hide versions"
-              : `Show versions (${(S.conversation?.answers || []).find(a => a.id === id)?.versions?.length - 1 || 0})`;
+            const open = panel.classList.toggle("open");
+            btn.querySelector(".arrow").style.transform = open ? "rotate(90deg)" : "";
           };
         });
 
+        const oaToggle = $("otherAnswersToggle");
+        if (oaToggle) {
+          oaToggle.onclick = () => {
+            const panel = $("otherAnswersPanel");
+            if (!panel) return;
+            const open = panel.classList.toggle("open");
+            oaToggle.classList.toggle("open", open);
+          };
+        }
+
         document.querySelectorAll("[data-propose]").forEach(btn => {
           btn.onclick = () => {
             const id = btn.getAttribute("data-propose");
-            const box = document.getElementById(`propose-${id}`);
-            if (!box) return;
-            box.style.display = box.style.display === "none" ? "block" : "none";
+            const panel = $("pp-" + id);
+            if (!panel) return;
+            panel.classList.toggle("open");
           };
         });
 
-        document.querySelectorAll("[data-submit-proposal]").forEach(btn => {
-          btn.onclick = async () => {
-            const answerId = btn.getAttribute("data-submit-proposal");
-            const box = document.getElementById(`propose-${answerId}`);
-            const textarea = box ? box.querySelector("textarea") : null;
-            const text = textarea ? textarea.value.trim() : "";
-            if (!text) {
-              toast("Empty proposal", "bad");
-              return;
-            }
-            if (!S.conversation) return;
-
-            btn.disabled = true;
-            const old = btn.textContent;
-            btn.textContent = "Submitting...";
-
-            const res = await callBackend("propose", {
-              conversation_id: S.conversation.id,
-              answer_id: answerId,
-              text,
-            });
-
-            btn.disabled = false;
-            btn.textContent = old;
-
-            if (res.ok) {
-              S.conversation = res.conversation;
-              localStorage.setItem("hi_last_conversation_id", S.conversation.id);
-              renderConversation(S.currentQuestion);
-              toast("Version saved", "good");
-            } else {
-              toast(res.error || "Error", "bad");
-            }
+        document.querySelectorAll("[data-cancel-propose]").forEach(btn => {
+          btn.onclick = () => {
+            const id = btn.getAttribute("data-cancel-propose");
+            const panel = $("pp-" + id);
+            if (panel) panel.classList.remove("open");
           };
         });
 
-        document.querySelectorAll("[data-vote]").forEach(btn => {
+        document.querySelectorAll("[data-submit-proposal]").forEach(btn => {
           btn.onclick = async () => {
+            const aid = btn.getAttribute("data-submit-proposal");
+            const panel = $("pp-" + aid);
+            const ta = panel ? panel.querySelector("textarea") : null;
+            const text = ta ? ta.value.trim() : "";
+            if (!text) { toast("Empty proposal", "bad"); return; }
             if (!S.conversation) return;
-            const [answerId, versionId, delta] = btn.getAttribute("data-vote").split("|");
-            const res = await callBackend("vote", {
+            btn.disabled = true;
+            const orig = btn.textContent;
+            btn.textContent = "Saving…";
+            const res = await callAPI("propose", {
               conversation_id: S.conversation.id,
-              answer_id: answerId,
-              version_id: versionId,
-              delta: Number(delta),
+              answer_id: aid, text,
             });
-
+            btn.disabled = false;
+            btn.textContent = orig;
             if (res.ok) {
               S.conversation = res.conversation;
-              localStorage.setItem("hi_last_conversation_id", S.conversation.id);
-              renderConversation(S.currentQuestion);
+              localStorage.setItem("hi_last_cid", S.conversation.id);
+              renderConversation(S.currentQuestion, false);
+              toast("Version proposed", "good");
             } else {
               toast(res.error || "Error", "bad");
             }
@@ -813,135 +1103,135 @@
         });
       }
 
-      async function callBackend(action, payload = {}) {
-        const body = {
-          action,
-          client_id: S.clientId,
-          ...payload,
-        };
-
+      /* ── API ── */
+      async function callAPI(action, payload = {}) {
         const resp = await fetch("/api", {
           method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Client-Id": S.clientId,
-          },
-          body: JSON.stringify(body),
+          headers: { "Content-Type": "application/json", "X-Client-Id": S.clientId },
+          body: JSON.stringify({ action, client_id: S.clientId, ...payload }),
         });
-
-        return await resp.json();
+        return resp.json();
       }
 
-      async function askQuestion(question) {
-        const res = await callBackend("ask", { question });
-        if (!res.ok) {
-          toast(res.error || "Error", "bad");
-          return;
-        }
-
+      /* ── Ask ── */
+      async function askQuestion(q) {
+        showStatus("Searching for answers…");
+        showTyping();
+        const res = await callAPI("ask", { question: q });
+        removeTyping();
+        hideStatus();
+        if (!res.ok) { toast(res.error||"Error","bad"); return; }
         S.conversation = res.conversation;
-        S.currentQuestion = question;
-        localStorage.setItem("hi_last_conversation_id", S.conversation.id);
-
-        if (res.matched) {
-          toast("Existing answer found", "good");
-        } else {
-          toast("New conversation created", "good");
-        }
-
-        renderConversation(question);
+        S.currentQuestion = q;
+        localStorage.setItem("hi_last_cid", S.conversation.id);
+        if (res.matched) toast("Matched existing answer","good");
+        else toast("New question created","good");
+        await renderConversation(q, true);
       }
 
+      /* ── Answer ── */
       async function postAnswer(text) {
         if (!S.conversation) return;
-
-        const res = await callBackend("answer", {
-          conversation_id: S.conversation.id,
-          text,
-        });
-
-        if (!res.ok) {
-          toast(res.error || "Error", "bad");
-          return;
-        }
-
+        showStatus("Saving answer…");
+        const res = await callAPI("answer", { conversation_id: S.conversation.id, text });
+        hideStatus();
+        if (!res.ok) { toast(res.error||"Error","bad"); return; }
         S.conversation = res.conversation;
-        localStorage.setItem("hi_last_conversation_id", S.conversation.id);
-        renderConversation(S.currentQuestion);
-        toast("Answer saved", "good");
+        localStorage.setItem("hi_last_cid", S.conversation.id);
+        renderConversation(S.currentQuestion, false);
+        toast("Answer saved","good");
       }
 
+      /* ── Submit ── */
       async function submitPrompt() {
-        const input = $("prompt");
-        const text = input.value.trim();
+        const p = $("prompt");
+        const text = p.value.trim();
         if (!text) return;
-
-        input.value = "";
-        autoGrow(input);
-
-        if (!S.conversation) {
-          await askQuestion(text);
-          return;
-        }
-
-        await postAnswer(text);
+        p.value = "";
+        autoGrow(p);
+        $("sendBtn").disabled = true;
+        if (!S.conversation) await askQuestion(text);
+        else await postAnswer(text);
+        $("sendBtn").disabled = false;
       }
 
-      function autoGrow(node) {
-        node.style.height = "auto";
-        node.style.height = Math.min(node.scrollHeight, 240) + "px";
+      function autoGrow(el) {
+        el.style.height = "auto";
+        el.style.height = Math.min(el.scrollHeight, 180) + "px";
       }
 
-      async function loadSavedConversation() {
-        const savedId = localStorage.getItem("hi_last_conversation_id");
-        if (!savedId) return;
-
-        const res = await callBackend("get_conversation", { conversation_id: savedId });
+      /* ── Load saved ── */
+      async function loadSaved() {
+        const id = localStorage.getItem("hi_last_cid");
+        if (!id) return;
+        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 || "";
-          renderConversation(S.currentQuestion);
+          renderConversation(S.currentQuestion, false);
         }
       }
 
-      function newQuestion() {
+      /* ── New chat ── */
+      function newChat() {
         S.conversation = null;
         S.currentQuestion = "";
-        localStorage.removeItem("hi_last_conversation_id");
+        localStorage.removeItem("hi_last_cid");
         $("transcript").innerHTML = "";
         $("welcome").style.display = "block";
         $("prompt").value = "";
-        setComposerLabel();
+        setComposer();
         $("prompt").focus();
       }
 
-      function init() {
-        S.clientId = getClientId();
-
-        $("sendBtn").addEventListener("click", submitPrompt);
-        $("newQuestionBtn").addEventListener("click", newQuestion);
-
-        $("prompt").addEventListener("input", (e) => autoGrow(e.target));
-        $("prompt").addEventListener("keydown", (e) => {
-          if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            submitPrompt();
+      /* ── Settings ── */
+      function initSettings() {
+        const panel = $("settingsPanel");
+        $("settingsBtn").onclick = () => {
+          panel.classList.toggle("open");
+        };
+        document.addEventListener("click", e => {
+          if (!panel.contains(e.target) && e.target !== $("settingsBtn") && !$("settingsBtn").contains(e.target)) {
+            panel.classList.remove("open");
           }
         });
 
-        const initData = window.__HI_INIT__ || {};
-        if (initData.client_id) {
-          S.clientId = initData.client_id;
+        const toggles = ["togNone","togAI","togHuman","togDiffusion"];
+        function updateToggles() {
+          toggles.forEach(id => {
+            const el = $(id);
+            const m = el.getAttribute("data-anim");
+            el.classList.toggle("on", S.animMode === m);
+          });
         }
-
-        loadSavedConversation().then(() => {
-          if (!S.conversation) {
-            setComposerLabel();
-            $("prompt").focus();
-          }
+        toggles.forEach(id => {
+          $(id).onclick = () => {
+            S.animMode = $(id).getAttribute("data-anim");
+            localStorage.setItem("hi_anim", S.animMode);
+            updateToggles();
+          };
         });
+        updateToggles();
       }
 
+      /* ── Init ── */
+      function init() {
+        S.clientId = getClientId();
+        $("sendBtn").onclick = submitPrompt;
+        $("newChatBtn").onclick = newChat;
+        $("prompt").addEventListener("input", e => autoGrow(e.target));
+        $("prompt").addEventListener("keydown", e => {
+          if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitPrompt(); }
+        });
+        initSettings();
+        const d = window.__HI_INIT__ || {};
+        if (d.client_id) S.clientId = d.client_id;
+        loadSaved().then(() => {
+          if (!S.conversation) { setComposer(); $("prompt").focus(); }
+        });
+      }
       init();
     })();
   </script>