Update templates/index.html

templates/index.html

@@ -19,11 +19,8 @@
       --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; margin: 0; padding: 0; }
     html, body {
@@ -41,27 +38,23 @@
         linear-gradient(rgba(108,131,255,.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(108,131,255,.03) 1px, transparent 1px);
       background-size: 44px 44px;
-      pointer-events: none;
-      opacity: .3;
+      pointer-events: none; opacity: .3;
     }
     #app {
       position: relative; z-index: 1;
       height: 100%; display: flex; flex-direction: column;
     }
 
-    /* ─── Topbar ─── */
+    /* ── Topbar ── */
     #topbar {
-      height: 56px;
-      padding: 0 16px;
+      height: 56px; padding: 0 16px;
       display: flex; align-items: center; justify-content: space-between;
       border-bottom: 1px solid var(--border);
       backdrop-filter: blur(14px);
       background: rgba(11,14,20,.78);
       flex-shrink: 0;
     }
-    .brand {
-      display: flex; align-items: center; gap: 10px; min-width: 0;
-    }
+    .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
     .logo {
       width: 30px; height: 30px; border-radius: 10px;
       display: grid; place-items: center; font-size: 15px;
@@ -69,13 +62,8 @@
       box-shadow: 0 6px 18px rgba(108,131,255,.25);
       flex: 0 0 auto;
     }
-    .brand-title {
-      font-weight: 700; letter-spacing: -.03em; font-size: 15px;
-    }
-    .brand-sub {
-      color: var(--muted); font-size: 11px; font-family: var(--mono);
-      margin-left: 2px;
-    }
+    .brand-title { font-weight: 700; letter-spacing: -.03em; font-size: 15px; }
+    .brand-sub { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-left: 2px; }
     .top-actions { display: flex; align-items: center; gap: 6px; }
     .top-btn {
       border: 1px solid var(--border2);
@@ -95,7 +83,7 @@
     }
     .top-btn svg { width: 14px; height: 14px; }
 
-    /* ─── Status bar ─── */
+    /* ── Status bar ── */
     #statusbar {
       height: 0; overflow: hidden;
       transition: height 220ms ease, opacity 220ms ease;
@@ -104,13 +92,9 @@
       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);
+      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;
@@ -122,7 +106,7 @@
       50% { opacity: 1; transform: scale(1.1); }
     }
 
-    /* ─── Chat area ─── */
+    /* ── Chat area ── */
     #chat {
       flex: 1; overflow-y: auto;
       padding: 20px 14px 24px;
@@ -133,7 +117,7 @@
     #chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 9px; }
     .wrap { max-width: 760px; margin: 0 auto; }
 
-    /* ─── Welcome ─── */
+    /* ── Welcome ── */
     .welcome {
       margin: 6vh auto 0; max-width: 480px; text-align: center;
       padding: 24px 20px;
@@ -143,23 +127,18 @@
       box-shadow: var(--shadow);
       animation: fadeUp 400ms ease both;
     }
-    .welcome h1 {
-      font-size: 22px; font-weight: 700; letter-spacing: -.03em;
-      line-height: 1.3;
-    }
-    .welcome p {
-      color: var(--muted); line-height: 1.6; margin-top: 8px; font-size: 13px;
-    }
+    .welcome h1 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
+    .welcome p { color: var(--muted); line-height: 1.6; margin-top: 8px; font-size: 13px; }
     @keyframes fadeUp {
       from { opacity: 0; transform: translateY(12px); }
       to { opacity: 1; transform: translateY(0); }
     }
 
-    /* ─── Turns ─── */
+    /* ── Turns ── */
     .turn {
       display: flex; gap: 10px; margin-bottom: 6px;
       align-items: flex-start;
-      animation: fadeUp calc(280ms * var(--anim-speed)) ease both;
+      animation: fadeUp 280ms ease both;
     }
     .turn.user { justify-content: flex-end; }
     .avatar {
@@ -185,40 +164,31 @@
       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,.15), rgba(161,110,255,.12));
       border-color: rgba(108,131,255,.2);
       border-radius: 16px 16px 4px 16px;
     }
-    .turn.assistant .bubble {
-      border-radius: 4px 16px 16px 16px;
-    }
     .turn-meta {
       margin-top: 3px;
       font-size: 10px; color: var(--muted);
       font-family: var(--mono);
-      display: flex; gap: 6px; align-items: center;
-      flex-wrap: wrap;
+      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
     }
     .chip {
       border: 1px solid var(--border);
       border-radius: 999px;
       padding: 2px 7px;
       font-size: 9px;
-      text-transform: uppercase;
-      letter-spacing: .05em;
+      text-transform: uppercase; letter-spacing: .05em;
     }
     .chip.good { color: var(--good); border-color: rgba(45,212,191,.25); }
     .chip.muted { color: var(--muted); }
     .chip.warn { color: var(--warn); border-color: rgba(251,191,36,.25); }
     .chip.matched { color: var(--accent); border-color: rgba(108,131,255,.25); }
 
-    /* ─── Best answer bubble ─── */
-    .best-answer-wrap {
-      margin-top: 2px;
-    }
+    /* ── Best answer ── */
     .best-answer-bubble {
       border: 1px solid rgba(45,212,191,.15);
       border-radius: 4px 16px 16px 16px;
@@ -232,10 +202,8 @@
       display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
     }
 
-    /* ─── Vote row ─── */
-    .vote-row {
-      display: flex; gap: 4px; align-items: center; margin-top: 6px;
-    }
+    /* ── Vote ── */
+    .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);
@@ -249,8 +217,7 @@
     }
     .vote-btn:hover {
       border-color: rgba(108,131,255,.35);
-      color: var(--text);
-      background: rgba(108,131,255,.07);
+      color: var(--text); background: rgba(108,131,255,.07);
     }
     .vote-btn.voted-up {
       border-color: rgba(45,212,191,.5); color: var(--good);
@@ -261,6 +228,7 @@
       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);
@@ -276,9 +244,80 @@
       color: var(--text);
     }
 
-    /* ─── Expandable other answers ─── */
+    /* ── Write answer inline panel ── */
+    .write-answer-btn {
+      border: 1px solid rgba(45,212,191,.3);
+      background: rgba(45,212,191,.08);
+      color: var(--good);
+      border-radius: 10px;
+      padding: 8px 14px;
+      font: inherit; font-size: 12px; font-weight: 600;
+      cursor: pointer;
+      transition: all 180ms ease;
+      display: inline-flex; align-items: center; gap: 6px;
+      margin-top: 8px;
+    }
+    .write-answer-btn:hover {
+      background: rgba(45,212,191,.14);
+      border-color: rgba(45,212,191,.5);
+    }
+    .write-answer-btn svg { width: 14px; height: 14px; }
+
+    .write-panel {
+      max-height: 0; overflow: hidden;
+      transition: max-height 300ms ease, opacity 250ms ease, margin 200ms ease;
+      opacity: 0; margin-top: 0;
+    }
+    .write-panel.open {
+      max-height: 300px; opacity: 1; margin-top: 10px;
+    }
+    .write-textarea {
+      width: 100%;
+      min-height: 80px; max-height: 160px;
+      resize: vertical;
+      border: 1px solid var(--border2);
+      border-radius: 12px;
+      background: var(--panel);
+      color: var(--text);
+      font: inherit; font-size: 13px;
+      line-height: 1.55;
+      padding: 10px 12px;
+      outline: none;
+      transition: border-color 200ms ease;
+    }
+    .write-textarea:focus { border-color: rgba(45,212,191,.4); }
+    .write-textarea::placeholder { color: #5a6178; }
+    .write-actions {
+      display: flex; gap: 6px; margin-top: 6px;
+    }
+    .write-submit {
+      border: 1px solid rgba(45,212,191,.4);
+      background: rgba(45,212,191,.12);
+      color: var(--good);
+      border-radius: 8px;
+      padding: 6px 14px;
+      font: inherit; font-size: 12px; font-weight: 600;
+      cursor: pointer;
+      transition: all 160ms ease;
+    }
+    .write-submit:hover {
+      background: rgba(45,212,191,.2);
+      border-color: rgba(45,212,191,.6);
+    }
+    .write-submit:disabled { opacity: .4; cursor: not-allowed; }
+    .write-cancel {
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--muted);
+      border-radius: 8px;
+      padding: 6px 12px;
+      font: inherit; font-size: 12px;
+      cursor: pointer;
+    }
+
+    /* ── Other answers expandable ── */
     .other-answers-toggle {
-      margin-top: 6px;
+      margin-top: 8px;
       border: 1px solid var(--border);
       background: rgba(255,255,255,.02);
       color: var(--muted);
@@ -288,29 +327,22 @@
       cursor: pointer;
       transition: all 180ms ease;
       display: inline-flex; align-items: center; gap: 5px;
-      width: auto;
     }
     .other-answers-toggle:hover {
-      border-color: rgba(108,131,255,.3);
-      color: var(--text);
+      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-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;
+      opacity: 0; margin-top: 4px;
     }
+    .other-answers-panel.open { max-height: 3000px; opacity: 1; }
     .other-answer-card {
       border: 1px solid var(--border);
       border-radius: 12px;
@@ -320,8 +352,7 @@
       animation: fadeUp 200ms ease both;
     }
     .other-answer-head {
-      display: flex; gap: 6px; flex-wrap: wrap;
-      align-items: center;
+      display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
       color: var(--muted); font-family: var(--mono); font-size: 10px;
       margin-bottom: 6px;
     }
@@ -330,7 +361,7 @@
       white-space: pre-wrap; word-break: break-word;
     }
 
-    /* ─── Versions inside other answers ─── */
+    /* ── Versions ── */
     .versions-toggle {
       margin-top: 4px;
       color: var(--muted); font-size: 10px;
@@ -345,18 +376,14 @@
       transition: max-height 280ms ease, opacity 180ms ease;
       opacity: 0;
       border-left: 2px solid var(--border2);
-      padding-left: 10px;
-      margin-top: 4px;
-    }
-    .versions-panel.open {
-      max-height: 1500px; opacity: 1;
+      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;
+      padding: 8px 10px; margin-top: 4px;
       animation: fadeUp 180ms ease both;
     }
     .version-head {
@@ -369,16 +396,13 @@
       white-space: pre-wrap; word-break: break-word;
     }
 
-    /* ─── Propose version ─── */
+    /* ── 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;
+      opacity: 0; margin-top: 6px;
     }
+    .propose-panel.open { max-height: 400px; opacity: 1; }
     .propose-textarea {
       width: 100%;
       min-height: 60px; max-height: 140px;
@@ -393,13 +417,9 @@
       outline: none;
       transition: border-color 200ms ease;
     }
-    .propose-textarea:focus {
-      border-color: rgba(108,131,255,.4);
-    }
+    .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-actions { display: flex; gap: 6px; margin-top: 6px; }
     .propose-submit {
       border: 1px solid rgba(108,131,255,.3);
       background: rgba(108,131,255,.1);
@@ -414,9 +434,7 @@
       background: rgba(108,131,255,.18);
       border-color: rgba(108,131,255,.5);
     }
-    .propose-submit:disabled {
-      opacity: .5; cursor: not-allowed;
-    }
+    .propose-submit:disabled { opacity: .5; cursor: not-allowed; }
     .propose-cancel {
       border: 1px solid var(--border);
       background: transparent;
@@ -427,7 +445,7 @@
       cursor: pointer;
     }
 
-    /* ─── Typing indicator ─── */
+    /* ── Typing indicator ── */
     .typing-indicator {
       display: flex; gap: 10px; margin-bottom: 6px;
       align-items: flex-start;
@@ -441,8 +459,7 @@
       background: rgba(255,255,255,.03);
     }
     .typing-dots span {
-      width: 6px; height: 6px;
-      border-radius: 50%;
+      width: 6px; height: 6px; border-radius: 50%;
       background: var(--muted);
       animation: typingBounce 1.1s ease infinite;
     }
@@ -453,18 +470,14 @@
       30% { transform: translateY(-5px); opacity: 1; }
     }
 
-    /* ─── Diffusion effect ─── */
+    /* ── Diffusion ── */
     .diffusion-text {
-      filter: blur(4px);
-      opacity: .4;
+      filter: blur(4px); opacity: .4;
       transition: filter 600ms ease, opacity 600ms ease;
     }
-    .diffusion-text.revealed {
-      filter: blur(0);
-      opacity: 1;
-    }
+    .diffusion-text.revealed { filter: blur(0); opacity: 1; }
 
-    /* ─── Composer ─── */
+    /* ── Composer (questions only) ── */
     .compose {
       border-top: 1px solid var(--border);
       background: rgba(11,14,20,.85);
@@ -473,8 +486,7 @@
       flex-shrink: 0;
     }
     .compose-inner {
-      max-width: 760px;
-      margin: 0 auto;
+      max-width: 760px; margin: 0 auto;
       border: 1px solid var(--border2);
       border-radius: 14px;
       padding: 8px 10px 6px;
@@ -482,9 +494,7 @@
       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);
-    }
+    .compose-inner:focus-within { border-color: rgba(108,131,255,.3); }
     #prompt {
       width: 100%;
       min-height: 40px; max-height: 180px;
@@ -503,13 +513,9 @@
       border-top: 1px solid var(--border);
       padding-top: 6px;
     }
-    .hint {
-      color: var(--muted); font-size: 10px;
-      font-family: var(--mono);
-    }
+    .hint { color: var(--muted); font-size: 10px; font-family: var(--mono); }
     .send-btn {
-      border: none;
-      border-radius: 10px;
+      border: none; border-radius: 10px;
       padding: 7px 16px;
       cursor: pointer;
       font: inherit; font-size: 13px; font-weight: 600;
@@ -523,12 +529,9 @@
       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-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
 
-    /* ─── Settings panel ─── */
+    /* ── Settings panel ── */
     #settingsPanel {
       position: fixed;
       top: 56px; right: 0;
@@ -542,15 +545,11 @@
       transition: transform 250ms cubic-bezier(.4,0,.2,1);
       padding: 14px 16px;
     }
-    #settingsPanel.open {
-      transform: translateX(0);
-    }
+    #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;
+      text-transform: uppercase; letter-spacing: .06em;
+      color: var(--muted); margin-bottom: 12px;
     }
     .setting-row {
       display: flex; align-items: center; justify-content: space-between;
@@ -558,12 +557,8 @@
       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;
-    }
+    .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;
@@ -580,18 +575,15 @@
     }
     .toggle::after {
       content: "";
-      position: absolute;
-      top: 2px; left: 2px;
+      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);
-    }
+    .toggle.on::after { transform: translateX(16px); }
 
-    /* ─── Toast ─── */
+    /* ── Toast ── */
     #toast {
       position: fixed;
       left: 50%; bottom: 80px;
@@ -609,19 +601,12 @@
       white-space: nowrap;
       backdrop-filter: blur(10px);
     }
-    #toast.show {
-      opacity: 1; transform: translateX(-50%) translateY(0);
-    }
+    #toast.show { 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); }
 
-    /* ─── No-answer placeholder ─── */
-    .no-answer-bubble {
-      border-style: dashed !important;
-      color: var(--muted);
-    }
+    .no-answer-bubble { border-style: dashed !important; color: var(--muted); }
 
-    /* ─── Responsive ─── */
     @media (max-width: 600px) {
       #topbar { padding: 0 10px; }
       .brand-sub { display: none; }
@@ -661,31 +646,19 @@
     <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><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><div class="setting-label">AI typing</div><div class="setting-desc">Fast character stream</div></div>
         <div class="toggle" id="togAI" data-anim="ai"></div>
       </div>
       <div class="setting-row">
-        <div>
-          <div class="setting-label">Human typing</div>
-          <div class="setting-desc">Irregular human speed</div>
-        </div>
+        <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><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>
@@ -694,7 +667,7 @@
       <div class="wrap">
         <div class="welcome" id="welcome">
           <h1>Ask anything. Get human answers.</h1>
-          <p>Questions are matched to existing conversations. If no answer exists yet, the community writes one.</p>
+          <p>Type a question below. If a matching answer exists, it appears instantly. Otherwise, anyone can write the first answer.</p>
         </div>
         <div id="transcript"></div>
       </div>
@@ -704,7 +677,7 @@
       <div class="compose-inner">
         <textarea id="prompt" rows="1" placeholder="Ask a question…"></textarea>
         <div class="compose-row">
-          <div class="hint" id="hint">Enter to send · Shift+Enter newline</div>
+          <div class="hint" id="hint">Enter to ask · Shift+Enter newline</div>
           <button class="send-btn" id="sendBtn">Ask</button>
         </div>
       </div>
@@ -713,13 +686,10 @@
 
   <div id="toast"></div>
 
-  <script>
-    window.__HI_INIT__ = {{ init_json | safe }};
-  </script>
+  <script>window.__HI_INIT__ = {{ init_json | safe }};</script>
 
   <script>
     (() => {
-      /* ── State ── */
       const S = {
         clientId: null,
         conversation: null,
@@ -729,7 +699,6 @@
       };
       const $ = id => document.getElementById(id);
 
-      /* ── Client ID ── */
       function getClientId() {
         let id = localStorage.getItem("hi_client_id");
         if (!id) {
@@ -740,7 +709,6 @@
         return id;
       }
 
-      /* ── Toast ── */
       function toast(msg, kind = "") {
         const t = $("toast");
         t.textContent = msg;
@@ -750,7 +718,6 @@
         t._t = setTimeout(() => { t.className = ""; }, 2000);
       }
 
-      /* ── Status bar ── */
       function showStatus(text) {
         $("statusText").textContent = text;
         $("statusbar").classList.add("visible");
@@ -759,23 +726,21 @@
         $("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; }
+        try { 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 sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
 
-      /* ── Appearance animation ── */
       async function animateText(el, text) {
         const mode = S.animMode;
         if (mode === "ai") {
@@ -807,61 +772,36 @@
           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);
+        $("transcript").insertAdjacentHTML("beforeend", `
+          <div class="typing-indicator" id="typingInd">
+            <div class="avatar assistant">✦</div>
+            <div class="typing-dots"><span></span><span></span><span></span></div>
+          </div>`);
         scrollBottom();
       }
-      function removeTyping() {
-        const el = $("typingInd");
-        if (el) el.remove();
-      }
+      function removeTyping() { const el = $("typingInd"); if (el) el.remove(); }
 
-      /* ── Active version logic ── */
       function activeVersion(answer) {
         const v = answer?.versions || [];
         if (!v.length) return null;
         let f = v.find(x => x.id === answer.active_version);
         if (f) return f;
         return [...v].sort((a, b) => {
-          const d = (Number(b.votes||0)) - (Number(a.votes||0));
-          if (d !== 0) return d;
-          return String(b.created_at||"").localeCompare(String(a.created_at||""));
+          const d = Number(b.votes||0) - Number(a.votes||0);
+          return d !== 0 ? d : String(b.created_at||"").localeCompare(String(a.created_at||""));
         })[0];
       }
-      function answerScore(a) {
-        const v = activeVersion(a);
-        return v ? Number(v.votes||0) : 0;
-      }
+      function answerScore(a) { const v = activeVersion(a); return v ? Number(v.votes||0) : 0; }
       function sortedAnswers(conv) {
-        return [...(conv?.answers||[])].sort((a,b) => {
+        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||""));
+          return d !== 0 ? d : String(b.created_at||"").localeCompare(String(a.created_at||""));
         });
       }
 
-      /* ── 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";
-        }
-      }
-
       /* ── Render helpers ── */
       function renderVoteRow(answerId, ver) {
         const vu = ver.votes_by_client && ver.votes_by_client[S.clientId] === 1;
@@ -873,8 +813,8 @@
       }
 
       function renderVersions(answer) {
-        const active = activeVersion(answer);
-        const others = (answer.versions||[]).filter(v => v.id !== active?.id);
+        const act = activeVersion(answer);
+        const others = (answer.versions||[]).filter(v => v.id !== act?.id);
         if (!others.length) return "";
         return `
           <button class="versions-toggle" data-toggle-versions="${answer.id}">
@@ -884,16 +824,13 @@
             ${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>${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>
-            `).join("")}
+              </div>`).join("")}
           </div>`;
       }
 
@@ -909,6 +846,41 @@
           </div>`;
       }
 
+      function renderWriteAnswer() {
+        return `
+          <button class="write-answer-btn" id="writeAnswerBtn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+            Write an answer
+          </button>
+          <div class="write-panel" id="writePanel">
+            <textarea class="write-textarea" id="writeTextarea" placeholder="Write your answer here…" rows="4"></textarea>
+            <div class="write-actions">
+              <button class="write-submit" id="writeSubmit">Submit answer</button>
+              <button class="write-cancel" id="writeCancel">Cancel</button>
+            </div>
+          </div>`;
+      }
+
+      function renderAnswerBlock(answer, idx, isBest) {
+        const v = activeVersion(answer);
+        if (!v) return "";
+        const 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";
+        return `
+          <div ${bubbleId} class="${bubbleClass}">${isBest ? "" : nl2br(v.text||"")}</div>
+          <div class="turn-meta" style="margin-top:4px;">
+            ${label}
+            <span>${esc(v.author||"Anonymous")}</span><span>·</span>
+            <span>${fmtTime(v.created_at)}</span>
+          </div>
+          ${renderVoteRow(answer.id, v)}
+          <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">
+            ${renderVersions(answer)}
+            ${renderPropose(answer.id)}
+          </div>`;
+      }
+
       function renderOtherAnswers(answers) {
         if (answers.length <= 1) return "";
         const others = answers.slice(1);
@@ -917,19 +889,19 @@
             <span class="arrow">▶</span> ${others.length} other answer${others.length>1?"s":""}
           </button>
           <div class="other-answers-panel" id="otherAnswersPanel">
-            ${others.map((a, idx) => {
+            ${others.map((a, i) => {
               const v = activeVersion(a);
               if (!v) return "";
               return `
                 <div class="other-answer-card">
                   <div class="other-answer-head">
-                    <span>${esc(v.author||"Anonymous")}</span>
-                    <span>·</span>
+                    <span class="chip muted">answer ${i + 2}</span>
+                    <span>${esc(v.author||"Anonymous")}</span><span>·</span>
                     <span>${fmtTime(v.created_at)}</span>
                   </div>
                   <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;">
+                  <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;">
                     ${renderVersions(a)}
                     ${renderPropose(a.id)}
                   </div>
@@ -946,12 +918,13 @@
 
         if (!S.conversation) {
           wl.style.display = "block";
-          setComposer();
           return;
         }
         wl.style.display = "none";
 
         const q = questionText || S.conversation.question || "";
+
+        // Question bubble
         tr.insertAdjacentHTML("beforeend", `
           <div class="turn user">
             <div>
@@ -962,61 +935,53 @@
               </div>
             </div>
             <div class="avatar user">U</div>
-          </div>
-        `);
+          </div>`);
 
         const answers = sortedAnswers(S.conversation);
 
         if (!answers.length) {
+          // No answers yet — show placeholder + write button
           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="bubble no-answer-bubble">No answer yet. Be the first to write one.</div>
                 <div class="turn-meta"><span class="chip warn">awaiting answer</span></div>
+                ${renderWriteAnswer()}
               </div>
-            </div>
-          `);
+            </div>`);
         } else {
+          // Best answer + write more + other answers
           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>
+          tr.insertAdjacentHTML("beforeend", `
+            <div class="turn assistant">
+              <div class="avatar assistant">✦</div>
+              <div style="min-width:0;flex:1;">
+                ${renderAnswerBlock(best, 0, true)}
+                ${renderWriteAnswer()}
+                ${renderOtherAnswers(answers)}
               </div>
-            `);
+            </div>`);
 
+          // Animate best answer text
+          const bestV = activeVersion(best);
+          if (bestV) {
+            const el = $("bestAnswerText");
             if (doAnimate) {
-              await animateText($("bestAnswerText"), bv.text || "");
+              await animateText(el, bestV.text || "");
             } else {
-              $("bestAnswerText").innerHTML = nl2br(bv.text || "");
+              el.innerHTML = nl2br(bestV.text || "");
             }
           }
         }
 
-        setComposer();
         bindHandlers();
         scrollBottom();
       }
 
-      /* ── Bind dynamic handlers ── */
+      /* ── Bind handlers ── */
       function bindHandlers() {
+        // Votes
         document.querySelectorAll("[data-vote]").forEach(btn => {
           btn.onclick = async () => {
             if (!S.conversation) return;
@@ -1029,78 +994,115 @@
             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");
-            }
+              save(); renderConversation(S.currentQuestion, false);
+            } else toast(res.error||"Error","bad");
           };
         });
 
+        // Toggle versions
         document.querySelectorAll("[data-toggle-versions]").forEach(btn => {
           btn.onclick = () => {
             const id = btn.getAttribute("data-toggle-versions");
-            const panel = $("vp-" + id);
-            if (!panel) return;
-            const open = panel.classList.toggle("open");
+            const p = $("vp-" + id);
+            if (!p) return;
+            const open = p.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);
-          };
-        }
+        // Other answers toggle
+        const oat = $("otherAnswersToggle");
+        if (oat) oat.onclick = () => {
+          const p = $("otherAnswersPanel");
+          if (!p) return;
+          const open = p.classList.toggle("open");
+          oat.classList.toggle("open", open);
+        };
 
+        // Propose toggle
         document.querySelectorAll("[data-propose]").forEach(btn => {
           btn.onclick = () => {
-            const id = btn.getAttribute("data-propose");
-            const panel = $("pp-" + id);
-            if (!panel) return;
-            panel.classList.toggle("open");
+            const p = $("pp-" + btn.getAttribute("data-propose"));
+            if (p) p.classList.toggle("open");
           };
         });
-
         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");
+            const p = $("pp-" + btn.getAttribute("data-cancel-propose"));
+            if (p) p.classList.remove("open");
           };
         });
 
+        // Submit proposal
         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 box = $("pp-" + aid);
+            const ta = box ? box.querySelector("textarea") : null;
             const text = ta ? ta.value.trim() : "";
-            if (!text) { toast("Empty proposal", "bad"); return; }
+            if (!text) { toast("Empty proposal","bad"); return; }
             if (!S.conversation) return;
             btn.disabled = true;
             const orig = btn.textContent;
             btn.textContent = "Saving…";
             const res = await callAPI("propose", {
-              conversation_id: S.conversation.id,
-              answer_id: aid, text,
+              conversation_id: S.conversation.id, answer_id: aid, text,
             });
-            btn.disabled = false;
-            btn.textContent = orig;
+            btn.disabled = false; btn.textContent = orig;
             if (res.ok) {
               S.conversation = res.conversation;
-              localStorage.setItem("hi_last_cid", S.conversation.id);
-              renderConversation(S.currentQuestion, false);
-              toast("Version proposed", "good");
-            } else {
-              toast(res.error || "Error", "bad");
-            }
+              save(); renderConversation(S.currentQuestion, false);
+              toast("Version proposed","good");
+            } else toast(res.error||"Error","bad");
           };
         });
+
+        // Write answer toggle
+        const wab = $("writeAnswerBtn");
+        if (wab) wab.onclick = () => {
+          const p = $("writePanel");
+          if (p) {
+            p.classList.toggle("open");
+            if (p.classList.contains("open")) {
+              const ta = $("writeTextarea");
+              if (ta) setTimeout(() => ta.focus(), 100);
+            }
+          }
+        };
+
+        // Cancel write
+        const wc = $("writeCancel");
+        if (wc) wc.onclick = () => {
+          const p = $("writePanel");
+          if (p) p.classList.remove("open");
+        };
+
+        // Submit answer
+        const ws = $("writeSubmit");
+        if (ws) ws.onclick = async () => {
+          const ta = $("writeTextarea");
+          const text = ta ? ta.value.trim() : "";
+          if (!text) { toast("Empty answer","bad"); return; }
+          if (!S.conversation) return;
+          ws.disabled = true;
+          const orig = ws.textContent;
+          ws.textContent = "Saving…";
+          showStatus("Saving answer…");
+          const res = await callAPI("answer", {
+            conversation_id: S.conversation.id, text,
+          });
+          hideStatus();
+          ws.disabled = false; ws.textContent = orig;
+          if (res.ok) {
+            S.conversation = res.conversation;
+            save(); renderConversation(S.currentQuestion, false);
+            toast("Answer saved","good");
+          } else toast(res.error||"Error","bad");
+        };
+      }
+
+      function save() {
+        if (S.conversation) localStorage.setItem("hi_last_cid", S.conversation.id);
       }
 
       /* ── API ── */
@@ -1113,46 +1115,34 @@
         return resp.json();
       }
 
-      /* ── Ask ── */
+      /* ── Ask (input bar is ONLY for asking) ── */
       async function askQuestion(q) {
         showStatus("Searching for answers…");
         showTyping();
+        S.loading = true;
+        $("sendBtn").disabled = true;
         const res = await callAPI("ask", { question: q });
         removeTyping();
         hideStatus();
+        S.loading = false;
+        $("sendBtn").disabled = false;
         if (!res.ok) { toast(res.error||"Error","bad"); return; }
         S.conversation = res.conversation;
         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");
+        save();
+        toast(res.matched ? "Existing answer found" : "New question created", "good");
         await renderConversation(q, true);
       }
 
-      /* ── Answer ── */
-      async function postAnswer(text) {
-        if (!S.conversation) 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_cid", S.conversation.id);
-        renderConversation(S.currentQuestion, false);
-        toast("Answer saved","good");
-      }
-
-      /* ── Submit ── */
       async function submitPrompt() {
         const p = $("prompt");
         const text = p.value.trim();
-        if (!text) return;
+        if (!text || S.loading) return;
         p.value = "";
         autoGrow(p);
-        $("sendBtn").disabled = true;
-        if (!S.conversation) await askQuestion(text);
-        else await postAnswer(text);
-        $("sendBtn").disabled = false;
+        // Always ask a new question — even if a conversation is loaded,
+        // because the input bar is ONLY for questions
+        await askQuestion(text);
       }
 
       function autoGrow(el) {
@@ -1160,7 +1150,6 @@
         el.style.height = Math.min(el.scrollHeight, 180) + "px";
       }
 
-      /* ── Load saved ── */
       async function loadSaved() {
         const id = localStorage.getItem("hi_last_cid");
         if (!id) return;
@@ -1174,7 +1163,6 @@
         }
       }
 
-      /* ── New chat ── */
       function newChat() {
         S.conversation = null;
         S.currentQuestion = "";
@@ -1182,38 +1170,31 @@
         $("transcript").innerHTML = "";
         $("welcome").style.display = "block";
         $("prompt").value = "";
-        setComposer();
         $("prompt").focus();
       }
 
       /* ── Settings ── */
       function initSettings() {
         const panel = $("settingsPanel");
-        $("settingsBtn").onclick = () => {
-          panel.classList.toggle("open");
-        };
+        $("settingsBtn").onclick = () => panel.classList.toggle("open");
         document.addEventListener("click", e => {
-          if (!panel.contains(e.target) && e.target !== $("settingsBtn") && !$("settingsBtn").contains(e.target)) {
+          if (!panel.contains(e.target) && e.target !== $("settingsBtn") && !$("settingsBtn").contains(e.target))
             panel.classList.remove("open");
-          }
         });
-
-        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);
+        const ids = ["togNone","togAI","togHuman","togDiffusion"];
+        function sync() {
+          ids.forEach(id => {
+            $(id).classList.toggle("on", S.animMode === $(id).getAttribute("data-anim"));
           });
         }
-        toggles.forEach(id => {
+        ids.forEach(id => {
           $(id).onclick = () => {
             S.animMode = $(id).getAttribute("data-anim");
             localStorage.setItem("hi_anim", S.animMode);
-            updateToggles();
+            sync();
           };
         });
-        updateToggles();
+        sync();
       }
 
       /* ── Init ── */
@@ -1229,7 +1210,7 @@
         const d = window.__HI_INIT__ || {};
         if (d.client_id) S.clientId = d.client_id;
         loadSaved().then(() => {
-          if (!S.conversation) { setComposer(); $("prompt").focus(); }
+          $("prompt").focus();
         });
       }
       init();