From 98fd0de7bc326a5bec39653f585237cc237ef6b2 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Mon, 2 Mar 2026 12:41:02 +0500
Subject: [PATCH] fix: remove stale old-template fragment from chapterTmpl in
 ui.go

---
 scraper/internal/server/ui.go | 682 +++++++++++++---------------------
 1 file changed, 266 insertions(+), 416 deletions(-)

diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index f37aca8..8c9fa66 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -2109,15 +2109,73 @@ func (s *Server) handleBookChaptersPage(w http.ResponseWriter, r *http.Request)
 // ─── GET /books/{slug}/chapters/{n} — chapter reader ─────────────────────────
 
 const chapterTmpl = `
-<!-- ─── Sticky reader toolbar ────────────────────────────────────────────────
-     Uses <nav> with a descriptive aria-label so screen readers expose it as a
-     landmark. aria-hidden was previously misused here — removed.               -->
+<style>
+  /* ── Reader typography ──────────────────────────────────────────────────── */
+  #reader-body {
+    font-size: 1.0625rem;
+    line-height: 1.85;
+    color: #d4d4d8;
+  }
+  #reader-body p {
+    margin: 0 0 0.9em 0;
+  }
+  #reader-body p.tts-active {
+    background: rgba(251,191,36,0.10);
+    border-left: 2px solid #f59e0b;
+    margin-left: -0.75rem;
+    padding-left: calc(0.75rem - 2px);
+    border-radius: 0 4px 4px 0;
+    transition: background 0.15s;
+  }
+
+  /* ── Prevent sticky nav obscuring anchors ───────────────────────────────── */
+  #main-content { scroll-padding-top: 3.5rem; padding-bottom: 6rem; }
+
+  /* ── Audio state badges ─────────────────────────────────────────────────── */
+  .queue-badge {
+    display: inline-flex; align-items: center;
+    padding: 0.15em 0.55em;
+    border-radius: 9999px;
+    font-size: 0.6rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .queue-badge-idle        { background: #27272a; color: #52525b; }
+  .queue-badge-generating  { background: #78350f; color: #fbbf24; }
+  .queue-badge-ready       { background: #14532d; color: #4ade80; }
+  .queue-badge-playing     { background: #1e3a5f; color: #60a5fa; }
+  .queue-badge-paused      { background: #1c1917; color: #a8a29e; }
+  .queue-badge-error       { background: #450a0a; color: #f87171; }
+  .queue-badge-time        { text-transform: none; letter-spacing: 0; }
+
+  /* ── Seek bar ───────────────────────────────────────────────────────────── */
+  #seek-track { height: 2.5rem; cursor: pointer; touch-action: none; user-select: none; }
+  #seek-rail  { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3px; background: #3f3f46; border-radius: 9999px; overflow: hidden; pointer-events: none; }
+  #seek-fill  { position: absolute; left: 0; top: 0; height: 100%; background: #f59e0b; }
+  #seek-thumb { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: #fbbf24; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; transition: transform 0.1s; }
+  #seek-thumb:hover { transform: translateY(-50%) translateX(-50%) scale(1.3); }
+
+  /* ── Safe-area inset ────────────────────────────────────────────────────── */
+  #mini-player { padding-bottom: env(safe-area-inset-bottom, 0); }
+
+  /* ── Toggle switch ──────────────────────────────────────────────────────── */
+  .toggle-switch { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; flex-shrink: 0; }
+  .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
+  .toggle-track { position: absolute; inset: 0; background: #3f3f46; border-radius: 9999px; transition: background 0.2s; cursor: pointer; }
+  .toggle-track::after { content: ''; position: absolute; left: 0.2rem; top: 50%; transform: translateY(-50%); width: 0.85rem; height: 0.85rem; background: #fff; border-radius: 50%; transition: left 0.2s; }
+  .toggle-switch input:checked + .toggle-track { background: #f59e0b; }
+  .toggle-switch input:checked + .toggle-track::after { left: calc(100% - 0.2rem - 0.85rem); }
+  .toggle-switch input:focus-visible + .toggle-track { outline: 2px solid #f59e0b; outline-offset: 2px; }
+</style>
+
+<!-- ─── Sticky top toolbar ─────────────────────────────────────────────────── -->
 <nav id="reader-header" aria-label="Reader controls"
-     class="sticky top-0 z-50 bg-zinc-950 border-b border-zinc-800">
+     class="sticky top-0 z-50 bg-zinc-950/95 backdrop-blur border-b border-zinc-800/60">
+  <div class="max-w-2xl mx-auto px-3 flex items-center gap-1 h-12">
 
-  <div class="max-w-2xl mx-auto px-4 flex items-center gap-2 h-14">
-
-    <!-- Back to book list -->
+    <!-- Back to book -->
     <a href="/books/{{.Slug}}"
        hx-get="/books/{{.Slug}}"
        hx-target="#main-content"
@@ -2125,26 +2183,27 @@ const chapterTmpl = `
        hx-swap="innerHTML"
        title="Back to chapter list"
        aria-label="Back to chapter list"
-       class="flex-shrink-0 px-2 py-1.5 rounded-lg text-zinc-400 hover:text-amber-400 transition-colors text-xl leading-none no-underline">
+       class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-lg text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800 transition-colors text-lg no-underline">
       &#9776;
     </a>
 
-    <!-- Chapter title button — opens chapter list drawer -->
-    <button id="chapter-list-btn"
-            type="button"
-            onclick="toggleChapterList()"
-            aria-haspopup="listbox"
-            aria-expanded="false"
-            title="Jump to chapter"
-            class="flex-1 min-w-0 flex items-center justify-center gap-1.5 overflow-hidden bg-transparent border-none cursor-pointer py-1 px-1">
-      <span class="overflow-hidden text-ellipsis whitespace-nowrap text-[0.8125rem] text-zinc-400 max-w-full">{{.Title}}</span>
+    <!-- Chapter title (tappable — opens chapter list) -->
+    <button id="chapter-list-btn" type="button" onclick="toggleChapterList()"
+            aria-haspopup="listbox" aria-expanded="false"
+            class="flex-1 min-w-0 h-9 flex items-center justify-center px-2 bg-transparent border-none cursor-pointer">
+      <span class="text-xs text-zinc-500 truncate max-w-full leading-none">{{.Title}}</span>
     </button>
 
+    <!-- Chapter position -->
+    <span class="flex-shrink-0 text-xs text-zinc-600 tabular-nums">
+      {{.ChapterN}}{{if .AllChapters}} / {{len .AllChapters}}{{end}}
+    </span>
+
   </div>
 
-  <!-- TTS status strip -->
+  <!-- TTS status strip (generating / buffering messages) -->
   <div id="tts-status-bar" hidden
-       class="px-4 py-0.5 bg-zinc-900 text-xs text-zinc-500 text-center"
+       class="px-4 py-0.5 bg-zinc-900/80 text-[0.7rem] text-zinc-500 text-center border-t border-zinc-800/40"
        aria-live="polite" aria-atomic="true">
     <span id="tts-status"></span>
   </div>
@@ -2167,53 +2226,125 @@ const chapterTmpl = `
          onclick="closeChapterList()"
          {{if eq .Number $.ChapterN}}data-current="1"{{end}}
          class="flex items-baseline gap-3 px-4 py-2 no-underline transition-colors hover:bg-zinc-800 {{if eq .Number $.ChapterN}}bg-zinc-800{{end}}">
-        <span class="flex-shrink-0 text-xs text-zinc-600 w-10 text-right" aria-hidden="true">{{.Number}}</span>
-        <span class="text-sm {{if eq .Number $.ChapterN}}text-amber-400 font-medium{{else}}text-zinc-300{{end}}">
+        <span class="flex-shrink-0 text-xs text-zinc-600 w-8 text-right tabular-nums">{{.Number}}</span>
+        <span class="text-sm {{if eq .Number $.ChapterN}}text-amber-400 font-medium{{else}}text-zinc-300{{end}} leading-snug">
           {{if .Title}}{{.Title}}{{else}}Chapter {{.Number}}{{end}}
         </span>
-        {{if eq .Number $.ChapterN}}<span class="ml-auto flex-shrink-0 text-[0.7rem] text-amber-500" aria-hidden="true">&#9654; now</span>{{end}}
+        {{if eq .Number $.ChapterN}}<span class="ml-auto flex-shrink-0 text-[0.65rem] text-amber-500/80">now</span>{{end}}
       </a>
       {{end}}
     </div>
   </div>
-
-  </div>
 </nav>
 
-<!-- ─── Chapter content ───────────────────────────────────────────────────── -->
-<main class="max-w-2xl mx-auto px-4 py-10">
+<!-- ─── Chapter content ────────────────────────────────────────────────────── -->
+<main class="max-w-[38rem] mx-auto px-5 pt-8 pb-4">
 
-  <h1 class="text-2xl font-bold text-zinc-100 mb-6 leading-snug">{{.Title}}</h1>
+  <!-- Chapter heading — smaller and secondary, not a huge h1 -->
+  <div class="mb-6">
+    <p class="text-xs font-medium text-amber-500/80 uppercase tracking-widest mb-1.5">Chapter {{.ChapterN}}</p>
+    <h1 class="text-xl font-bold text-zinc-100 leading-snug">{{.Title}}</h1>
+    {{if .ChapterDate}}<p class="text-xs text-zinc-600 mt-1">{{.ChapterDate}}</p>{{end}}
+  </div>
 
-  <article id="chapter-article" class="prose text-zinc-300 leading-relaxed text-[1.05rem]">
+  <article id="chapter-article" id="reader-body">
     {{.HTML}}
   </article>
 
+  <!-- Bottom chapter nav (inline, below content) -->
+  <div class="flex items-center justify-between gap-4 mt-10 pt-6 border-t border-zinc-800/50">
+    {{if .PrevN}}
+    <a href="/books/{{.Slug}}/chapters/{{.PrevN}}"
+       hx-get="/books/{{.Slug}}/chapters/{{.PrevN}}"
+       hx-target="#main-content" hx-push-url="true" hx-swap="innerHTML"
+       class="flex items-center gap-1.5 text-sm text-zinc-400 hover:text-amber-400 no-underline transition-colors">
+      ← Prev
+    </a>
+    {{else}}<span></span>{{end}}
+    {{if .NextN}}
+    <a href="/books/{{.Slug}}/chapters/{{.NextN}}"
+       hx-get="/books/{{.Slug}}/chapters/{{.NextN}}"
+       hx-target="#main-content" hx-push-url="true" hx-swap="innerHTML"
+       class="flex items-center gap-1.5 text-sm text-zinc-400 hover:text-amber-400 no-underline transition-colors">
+      Next →
+    </a>
+    {{else}}<span></span>{{end}}
+  </div>
 </main>
 
-<!-- ─── Compact audio player (fixed bottom) ─────────────────────────────── -->
-<aside id="mini-player"
-       aria-label="Audio player"
-       class="fixed bottom-0 left-0 right-0 z-60 bg-zinc-950 text-zinc-100">
+<!-- ─── Fixed bottom player ───────────────────────────────────────────────── -->
+<aside id="mini-player" aria-label="Audio player"
+       class="fixed bottom-0 left-0 right-0 z-60 bg-zinc-950/95 backdrop-blur border-t border-zinc-800/60">
 
-  <!-- Seek bar sits flush on top edge, full width -->
-  <div id="seek-track"
-       class="relative w-full cursor-pointer touch-none select-none"
-       style="display:none">
-    <div id="seek-rail" class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 bg-zinc-700 rounded-full overflow-hidden pointer-events-none">
-      <div id="seek-fill" class="absolute left-0 top-0 h-full bg-amber-500" style="width:0%"></div>
+  <!-- Seek track (full width, sits flush at top of player) -->
+  <div id="seek-track" style="display:none" class="relative w-full">
+    <div id="seek-rail">
+      <div id="seek-fill"></div>
     </div>
-    <div id="seek-thumb" class="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full bg-amber-400 shadow-md pointer-events-none -translate-x-1/2 transition-transform hover:scale-125" style="left:0%"></div>
+    <div id="seek-thumb" style="left:0%"></div>
   </div>
 
-  <!-- Time row (only when playing) -->
+  <!-- Time row -->
   <div id="seek-times" style="display:none"
        class="max-w-2xl mx-auto px-4 pt-1 flex items-center justify-between">
-    <span id="seek-cur" class="text-[0.65rem] tabular-nums text-zinc-500">0:00</span>
-    <span id="seek-tot" class="text-[0.65rem] tabular-nums text-zinc-600">0:00</span>
+    <span id="seek-cur" class="text-[0.6rem] tabular-nums text-zinc-600">0:00</span>
+    <span id="seek-tot" class="text-[0.6rem] tabular-nums text-zinc-700">0:00</span>
   </div>
 
-  <div class="border-t border-zinc-800"></div>
+  <!-- Main control row -->
+  <div class="max-w-2xl mx-auto px-3 py-2">
+    <div class="flex items-center gap-2 h-11">
+
+      <!-- Prev chapter -->
+      {{if .PrevN}}
+      <a href="/books/{{.Slug}}/chapters/{{.PrevN}}"
+         hx-get="/books/{{.Slug}}/chapters/{{.PrevN}}"
+         hx-target="#main-content" hx-push-url="true" hx-swap="innerHTML"
+         title="Previous chapter" aria-label="Previous chapter"
+         class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg text-zinc-600 hover:text-zinc-300 hover:bg-zinc-800 transition-colors no-underline text-sm">
+        ←
+      </a>
+      {{else}}<span class="flex-shrink-0 w-8"></span>{{end}}
+
+      <!-- Play / Pause -->
+      <button id="player-play-btn" type="button" onclick="ttsToggle()"
+              aria-label="Play / Pause"
+              class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-amber-500 hover:bg-amber-400 text-zinc-950 text-base border-none cursor-pointer transition-colors shadow-sm">
+        <span id="player-play-icon" aria-hidden="true">&#9654;</span>
+      </button>
+
+      <!-- Centre info -->
+      <div class="flex-1 min-w-0 flex flex-col justify-center px-1">
+        <div class="flex items-center gap-1.5">
+          <span id="player-title" class="text-xs font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
+          <span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
+          <!-- next-chapter prefetch badge -->
+          <span id="player-next-row" hidden>
+            <span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Settings -->
+      <button id="settings-btn" type="button" onclick="toggleSettings()"
+              aria-label="Reader settings" aria-haspopup="dialog"
+              class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg text-zinc-600 hover:text-amber-400 border-none cursor-pointer bg-transparent transition-colors text-base">
+        &#9881;
+      </button>
+
+      <!-- Next chapter -->
+      {{if .NextN}}
+      <a href="/books/{{.Slug}}/chapters/{{.NextN}}"
+         hx-get="/books/{{.Slug}}/chapters/{{.NextN}}"
+         hx-target="#main-content" hx-push-url="true" hx-swap="innerHTML"
+         title="Next chapter" aria-label="Next chapter"
+         class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg text-zinc-600 hover:text-zinc-300 hover:bg-zinc-800 transition-colors no-underline text-sm">
+        →
+      </a>
+      {{else}}<span class="flex-shrink-0 w-8"></span>{{end}}
+
+    </div>
+  </div>
 
   <!-- Settings panel (opens upward) -->
   <div id="settings-panel"
@@ -2221,6 +2352,7 @@ const chapterTmpl = `
        aria-label="Reader settings"
        hidden
        class="fixed inset-x-2 bottom-[4.5rem] top-4 overflow-y-auto sm:absolute sm:inset-x-auto sm:top-auto sm:bottom-[calc(100%+0.25rem)] sm:right-[max(0.5rem,calc(50%-32rem+0.5rem))] sm:w-80 sm:max-h-[80vh] bg-zinc-900 border border-zinc-800 rounded-xl p-4 shadow-2xl z-[100]">
+
     <!-- hidden native select keeps existing JS working unchanged -->
     <select id="tts-voice" class="sr-only" aria-hidden="true" tabindex="-1">
       {{range .Voices}}
@@ -2228,7 +2360,7 @@ const chapterTmpl = `
       {{end}}
     </select>
 
-    <div class="mb-3.5">
+    <div class="mb-4">
       <span class="block text-xs text-zinc-500 mb-2">Voice</span>
       <div id="voice-grid" class="grid grid-cols-2 gap-1.5 max-h-64 sm:max-h-48 overflow-y-auto pr-0.5">
         {{range .Voices}}
@@ -2246,170 +2378,26 @@ const chapterTmpl = `
       </div>
     </div>
 
-    <label class="block mb-3.5">
+    <label class="block mb-4">
       <span class="block text-xs text-zinc-500 mb-1.5">Speed — <span id="tts-speed-label">1.0×</span></span>
-      <input id="tts-speed" type="range"
-             min="0.5" max="2" step="0.1" value="1"
+      <input id="tts-speed" type="range" min="0.5" max="2" step="0.1" value="1"
              class="w-full accent-amber-500 cursor-pointer" />
     </label>
-    <label class="flex items-center justify-between gap-3 cursor-pointer select-none mb-2.5">
+
+    <label class="flex items-center justify-between gap-3 cursor-pointer select-none mb-3">
       <span class="text-sm text-zinc-300">Auto-play next chapter</span>
-      <span class="toggle-switch">
-        <input id="tts-autoplay" type="checkbox" />
-        <span class="toggle-track"></span>
-      </span>
+      <span class="toggle-switch"><input id="tts-autoplay" type="checkbox" /><span class="toggle-track"></span></span>
     </label>
     <label class="flex items-center justify-between gap-3 cursor-pointer select-none">
       <span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
-      <span class="toggle-switch">
-        <input id="tts-autoscroll" type="checkbox" checked />
-        <span class="toggle-track"></span>
-      </span>
+      <span class="toggle-switch"><input id="tts-autoscroll" type="checkbox" checked /><span class="toggle-track"></span></span>
     </label>
   </div>
 
-  <div class="max-w-2xl mx-auto px-3 py-2 flex flex-col gap-0">
-
-    <!-- Single control row -->
-    <div class="flex items-center gap-1.5 h-12">
-
-      <!-- Prev chapter -->
-      {{if .PrevN}}
-      <a href="/books/{{.Slug}}/chapters/{{.PrevN}}"
-         hx-get="/books/{{.Slug}}/chapters/{{.PrevN}}"
-         hx-target="#main-content"
-         hx-push-url="true"
-         hx-swap="innerHTML"
-         title="Previous chapter"
-         aria-label="Previous chapter"
-         class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 text-base transition-colors no-underline">
-        &#8592;
-      </a>
-      {{else}}
-      <span class="flex-shrink-0 w-10"></span>
-      {{end}}
-
-      <!-- Play/Pause -->
-      <button id="player-play-btn"
-              type="button"
-              onclick="ttsToggle()"
-              aria-label="Play/Pause"
-              class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-amber-400 text-base border-none cursor-pointer transition-colors">
-        <span id="player-play-icon" aria-hidden="true">&#9654;</span>
-      </button>
-
-      <!-- Chapter title + state badge -->
-      <div class="flex-1 min-w-0 flex items-center gap-2 px-1">
-        <span id="player-title" class="text-[0.8rem] font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
-        <span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
-      </div>
-
-      <!-- Next prefetch badge -->
-      <div id="player-next-row" hidden class="flex-shrink-0 flex items-center gap-1">
-        <span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
-      </div>
-
-      <!-- Settings -->
-      <button id="settings-btn"
-              type="button"
-              onclick="toggleSettings()"
-              aria-label="Reader settings"
-              aria-haspopup="dialog"
-              class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl bg-transparent border-none cursor-pointer text-zinc-500 hover:text-amber-400 transition-colors">
-        &#9881;
-      </button>
-
-      <!-- Next chapter -->
-      {{if .NextN}}
-      <a href="/books/{{.Slug}}/chapters/{{.NextN}}"
-         hx-get="/books/{{.Slug}}/chapters/{{.NextN}}"
-         hx-target="#main-content"
-         hx-push-url="true"
-         hx-swap="innerHTML"
-         title="Next chapter"
-         aria-label="Next chapter"
-         class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 text-base transition-colors no-underline">
-        &#8594;
-      </a>
-      {{else}}
-      <span class="flex-shrink-0 w-10"></span>
-      {{end}}
-
-    </div>
-
-  </div>
-
-  <!-- Hidden native audio (no controls — we drive it entirely from JS) -->
+  <!-- Hidden native audio -->
   <audio id="tts-audio-native" preload="none" style="display:none"></audio>
-
 </aside>
 
-<style>
-  /* Paragraph TTS highlight */
-  #chapter-article p {
-    border-radius: 0.375rem;
-    margin-left: -0.5rem;
-    padding-left: 0.5rem;
-    transition: background 0.15s;
-  }
-  #chapter-article p.tts-active {
-    background: rgba(251,191,36,0.13);
-    border-left: 2px solid #f59e0b;
-    padding-left: calc(0.5rem - 2px);
-  }
-
-  /* Prevent sticky nav from obscuring anchor targets */
-  #main-content { scroll-padding-top: 3.5rem; padding-bottom: 7rem; }
-  #chapter-article { font-size: 1.0625rem; line-height: 1.8; }
-  #chapter-article p + p { margin-top: 0; }
-
-  /* Audio state badges */
-  .queue-badge {
-    display: inline-block;
-    padding: 0.1em 0.5em;
-    border-radius: 9999px;
-    font-size: 0.65rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-  .queue-badge-idle        { background: #27272a; color: #71717a; }
-  .queue-badge-generating  { background: #78350f; color: #fbbf24; }
-  .queue-badge-ready       { background: #14532d; color: #4ade80; }
-  .queue-badge-playing     { background: #1e3a5f; color: #60a5fa; }
-  .queue-badge-paused      { background: #1c1917; color: #d6d3d1; }
-  .queue-badge-error       { background: #450a0a; color: #f87171; }
-  .queue-badge-time        { text-transform: none; letter-spacing: 0; }
-
-  /* Seek bar — tall hit-area, thin visual rail via inner element */
-  #seek-track {
-    height: 2.5rem;
-  }
-  /* Safe-area inset for notched phones */
-  #mini-player { padding-bottom: env(safe-area-inset-bottom, 0); }
-
-  /* Toggle switch */
-  .toggle-switch { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; flex-shrink: 0; }
-  .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
-  .toggle-track {
-    position: absolute; inset: 0;
-    background: #3f3f46; border-radius: 9999px;
-    transition: background 0.2s;
-    cursor: pointer;
-  }
-  .toggle-track::after {
-    content: '';
-    position: absolute; left: 0.2rem; top: 50%; transform: translateY(-50%);
-    width: 0.85rem; height: 0.85rem;
-    background: #fff; border-radius: 50%;
-    transition: left 0.2s;
-  }
-  .toggle-switch input:checked + .toggle-track { background: #f59e0b; }
-  .toggle-switch input:checked + .toggle-track::after { left: calc(100% - 0.2rem - 0.85rem); }
-  .toggle-switch input:focus-visible + .toggle-track { outline: 2px solid #f59e0b; outline-offset: 2px; }
-</style>
-
 <script>
 (function () {
   var NEXT_N    = {{.NextN}};
@@ -2418,7 +2406,7 @@ const chapterTmpl = `
   var CHAPTER_N = {{.ChapterN}};
   var COVER_URL = '{{.Cover}}';
 
-  // ── reading progress ─────────────────────────────────────────────────────────
+  // ── reading progress ──────────────────────────────────────────────────────
   (function saveProgress() {
     try {
       var p = JSON.parse(localStorage.getItem('reading_progress') || '{}');
@@ -2430,19 +2418,16 @@ const chapterTmpl = `
     } catch(_) {}
   })();
 
-  // ── Teardown previous chapter's script instance ───────────────────────────────
-  // Each HTMX swap re-runs this IIFE on the same persistent audio element.
-  // We use a global generation counter so stale closures become no-ops immediately.
+  // ── generation counter (stale-closure guard) ──────────────────────────────
   window.__ttsGen = (window.__ttsGen || 0) + 1;
   var myGen = window.__ttsGen;
   function stale() { return window.__ttsGen !== myGen; }
 
-  // Remove the previous chapter's htmx:beforeSwap listener before adding our own.
   if (window.__ttsBeforeSwap) {
     document.body.removeEventListener('htmx:beforeSwap', window.__ttsBeforeSwap);
   }
 
-  // ── DOM refs ─────────────────────────────────────────────────────────────────
+  // ── DOM refs ──────────────────────────────────────────────────────────────
   var audio           = document.getElementById('tts-audio-native');
   var statusEl        = document.getElementById('tts-status');
   var statusBar       = document.getElementById('tts-status-bar');
@@ -2469,7 +2454,7 @@ const chapterTmpl = `
   var seekTot         = document.getElementById('seek-tot');
   var seekTimes       = document.getElementById('seek-times');
 
-  // ── badge helper ─────────────────────────────────────────────────────────────
+  // ── badge helper ──────────────────────────────────────────────────────────
   var BADGE_CLASSES = ['queue-badge-idle','queue-badge-generating','queue-badge-ready',
                        'queue-badge-playing','queue-badge-paused','queue-badge-error',
                        'queue-badge-time'];
@@ -2479,7 +2464,7 @@ const chapterTmpl = `
     el.textContent = state;
   }
 
-  // ── time formatter ────────────────────────────────────────────────────────────
+  // ── time formatter ────────────────────────────────────────────────────────
   function fmtTime(s) {
     if (!isFinite(s) || s < 0) return '0:00';
     var m = Math.floor(s / 60);
@@ -2487,7 +2472,7 @@ const chapterTmpl = `
     return m + ':' + (sec < 10 ? '0' : '') + sec;
   }
 
-  // ── seek bar ──────────────────────────────────────────────────────────────────
+  // ── seek bar ──────────────────────────────────────────────────────────────
   function showSeek()  { seekTrack.style.display = ''; seekTimes.style.display = ''; }
   function hideSeek()  { seekTrack.style.display = 'none'; seekTimes.style.display = 'none'; }
 
@@ -2513,43 +2498,27 @@ const chapterTmpl = `
   }
   (function attachSeek() {
     var dragging = false;
-    seekTrack.addEventListener('mousedown', function(e) {
-      dragging = true;
-      seekFromEvent(e);
-      e.preventDefault();
-    });
-    seekTrack.addEventListener('touchstart', function(e) {
-      dragging = true;
-      seekFromEvent(e);
-    }, { passive: true });
-    document.addEventListener('mousemove', function(e) {
-      if (dragging) seekFromEvent(e);
-    });
-    document.addEventListener('touchmove', function(e) {
-      if (dragging) { seekFromEvent(e); e.preventDefault(); }
-    }, { passive: false });
-    document.addEventListener('mouseup', function(e) {
-      if (dragging) { seekFromEvent(e); dragging = false; }
-    });
-    document.addEventListener('touchend', function() { dragging = false; });
+    seekTrack.addEventListener('mousedown', function(e) { dragging = true; seekFromEvent(e); e.preventDefault(); });
+    seekTrack.addEventListener('touchstart', function(e) { dragging = true; seekFromEvent(e); }, { passive: true });
+    document.addEventListener('mousemove',  function(e) { if (dragging) seekFromEvent(e); });
+    document.addEventListener('touchmove',  function(e) { if (dragging) { seekFromEvent(e); e.preventDefault(); } }, { passive: false });
+    document.addEventListener('mouseup',    function(e) { if (dragging) { seekFromEvent(e); dragging = false; } });
+    document.addEventListener('touchend',   function()  { dragging = false; });
   })();
 
-  // ── status strip ─────────────────────────────────────────────────────────────
+  // ── status strip ──────────────────────────────────────────────────────────
   function setStatus(text) {
     statusEl.textContent = text;
     statusBar.style.display = text ? '' : 'none';
   }
 
-  // ── panel toggles (chapter list / settings) ───────────────────────────────────
-  window.closeChapterList = function () {
-    chapterListPanel.style.display = 'none';
-  };
+  // ── panel toggles ─────────────────────────────────────────────────────────
+  window.closeChapterList = function () { chapterListPanel.style.display = 'none'; };
   window.toggleChapterList = function () {
     var open = chapterListPanel.style.display !== 'none';
     settingsPanel.style.display = 'none';
-    if (open) {
-      closeChapterList();
-    } else {
+    if (open) { closeChapterList(); }
+    else {
       chapterListPanel.style.display = 'block';
       var cur = chapterListPanel.querySelector('[data-current="1"]');
       if (cur) cur.scrollIntoView({ block: 'center' });
@@ -2560,10 +2529,8 @@ const chapterTmpl = `
     closeChapterList();
     settingsPanel.style.display = open ? 'none' : 'block';
   };
-  // Re-register the document click-outside handler each swap by replacing via a named ref.
-  if (window.__ttsClickOutside) {
-    document.removeEventListener('click', window.__ttsClickOutside);
-  }
+
+  if (window.__ttsClickOutside) document.removeEventListener('click', window.__ttsClickOutside);
   window.__ttsClickOutside = function (e) {
     if (stale()) { document.removeEventListener('click', window.__ttsClickOutside); return; }
     var sb = document.getElementById('settings-btn');
@@ -2579,54 +2546,33 @@ const chapterTmpl = `
   };
   document.addEventListener('click', window.__ttsClickOutside);
 
-  // ── localStorage settings ─────────────────────────────────────────────────────
-  var LS_SPEED      = 'tts_speed';
-  var LS_VOICE      = 'tts_voice';
-  var LS_AUTONEXT   = 'tts_autonext';
-  var LS_AUTOSCROLL = 'tts_autoscroll';
-
+  // ── localStorage settings ─────────────────────────────────────────────────
+  var LS_SPEED = 'tts_speed', LS_VOICE = 'tts_voice', LS_AUTONEXT = 'tts_autonext', LS_AUTOSCROLL = 'tts_autoscroll';
   (function loadSettings() {
     var spd = localStorage.getItem(LS_SPEED);
-    if (spd !== null) {
-      speedSlider.value = spd;
-      speedLabel.textContent = parseFloat(spd).toFixed(1) + '\u00D7';
-    }
+    if (spd !== null) { speedSlider.value = spd; speedLabel.textContent = parseFloat(spd).toFixed(1) + '\u00D7'; }
     var vc = localStorage.getItem(LS_VOICE);
-    if (vc !== null) {
-      var opt = voiceSel.querySelector('option[value="' + vc + '"]');
-      if (opt) voiceSel.value = vc;
-    }
+    if (vc !== null) { var opt = voiceSel.querySelector('option[value="' + vc + '"]'); if (opt) voiceSel.value = vc; }
     var an = localStorage.getItem(LS_AUTONEXT);
     if (an !== null) autoplayChk.checked = an === 'true';
     var as = localStorage.getItem(LS_AUTOSCROLL);
     if (as !== null) autoscrollChk.checked = as !== 'false';
   })();
-
   speedSlider.addEventListener('input', function () {
     if (stale()) return;
     speedLabel.textContent = parseFloat(speedSlider.value).toFixed(1) + '\u00D7';
     localStorage.setItem(LS_SPEED, speedSlider.value);
     prefetchFired = false;
   });
-  voiceSel.addEventListener('change', function () {
-    if (stale()) return;
-    localStorage.setItem(LS_VOICE, voiceSel.value);
-    prefetchFired = false;
-  });
-  autoplayChk.addEventListener('change', function () {
-    if (stale()) return;
-    localStorage.setItem(LS_AUTONEXT, autoplayChk.checked ? 'true' : 'false');
-  });
-  autoscrollChk.addEventListener('change', function () {
-    if (stale()) return;
-    localStorage.setItem(LS_AUTOSCROLL, autoscrollChk.checked ? 'true' : 'false');
-  });
+  voiceSel.addEventListener('change', function () { if (stale()) return; localStorage.setItem(LS_VOICE, voiceSel.value); prefetchFired = false; });
+  autoplayChk.addEventListener('change', function () { if (stale()) return; localStorage.setItem(LS_AUTONEXT, autoplayChk.checked ? 'true' : 'false'); });
+  autoscrollChk.addEventListener('change', function () { if (stale()) return; localStorage.setItem(LS_AUTOSCROLL, autoscrollChk.checked ? 'true' : 'false'); });
 
-  // ── paragraph indexing (highlight only) ──────────────────────────────────────
+  // ── paragraph indexing ────────────────────────────────────────────────────
   var paras      = Array.prototype.slice.call((article || {querySelectorAll: function(){return[];}}).querySelectorAll('p'));
   var activePara = null;
 
-  // ── auto-scroll pause on user interaction ────────────────────────────────────
+  // ── auto-scroll pause on user interaction ─────────────────────────────────
   var autoScrollEnabled = true;
   var autoScrollTimer   = null;
   function resetAutoScrollTimer() {
@@ -2634,10 +2580,10 @@ const chapterTmpl = `
     clearTimeout(autoScrollTimer);
     autoScrollTimer = setTimeout(function () { autoScrollEnabled = true; }, 3000);
   }
-  document.addEventListener('wheel',      resetAutoScrollTimer, { passive: true });
-  document.addEventListener('touchmove',  resetAutoScrollTimer, { passive: true });
+  document.addEventListener('wheel',     resetAutoScrollTimer, { passive: true });
+  document.addEventListener('touchmove', resetAutoScrollTimer, { passive: true });
   document.addEventListener('keydown', function (e) {
-    var scrollKeys = { ArrowUp: 1, ArrowDown: 1, PageUp: 1, PageDown: 1, Home: 1, End: 1, ' ': 1 };
+    var scrollKeys = { ArrowUp:1, ArrowDown:1, PageUp:1, PageDown:1, Home:1, End:1, ' ':1 };
     if (scrollKeys[e.key]) resetAutoScrollTimer();
   });
 
@@ -2650,14 +2596,13 @@ const chapterTmpl = `
     }
   }
 
-  // ── UI state helpers ──────────────────────────────────────────────────────────
+  // ── UI state helpers ──────────────────────────────────────────────────────
   function setPlayIcon(icon) { playerPlayIcon.innerHTML = icon; }
 
   function setGenerating() {
     setPlayIcon('\u231B');
     playerPlayBtn.disabled = true;
-    voiceSel.disabled    = true;
-    speedSlider.disabled = true;
+    voiceSel.disabled = true; speedSlider.disabled = true;
     setBadge(playerStateBadge, 'generating');
     playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N + '\u00a0— generating\u2026';
     setStatus('Generating audio\u2026');
@@ -2667,8 +2612,7 @@ const chapterTmpl = `
     if (stale()) return;
     setPlayIcon('&#9646;&#9646;');
     playerPlayBtn.disabled = false;
-    voiceSel.disabled    = false;
-    speedSlider.disabled = false;
+    voiceSel.disabled = false; speedSlider.disabled = false;
     setBadge(playerStateBadge, 'playing');
     playerStateBadge.textContent = '0%';
     playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N;
@@ -2680,7 +2624,6 @@ const chapterTmpl = `
     if (stale()) return;
     setPlayIcon('&#9654;');
     setBadge(playerStateBadge, 'paused');
-    // Keep showing current % while paused.
     var pct = (audio.duration && isFinite(audio.duration))
       ? Math.round((audio.currentTime / audio.duration) * 100) : 0;
     playerStateBadge.textContent = pct + '%';
@@ -2692,15 +2635,11 @@ const chapterTmpl = `
     highlightPara(-1);
     setPlayIcon('&#9654;');
     playerPlayBtn.disabled = false;
-    voiceSel.disabled    = false;
-    speedSlider.disabled = false;
+    voiceSel.disabled = false; speedSlider.disabled = false;
     setBadge(playerStateBadge, 'idle');
-    // Show how long TTS generation took, if we have a timestamp.
     if (genStartTime > 0) {
       var elapsed = Math.round((Date.now() - genStartTime) / 1000);
-      var label = elapsed >= 60
-        ? Math.floor(elapsed / 60) + 'm ' + (elapsed % 60) + 's'
-        : elapsed + 's';
+      var label = elapsed >= 60 ? Math.floor(elapsed/60) + 'm ' + (elapsed%60) + 's' : elapsed + 's';
       playerStateBadge.textContent = label;
       playerStateBadge.classList.add('queue-badge-time');
       genStartTime = 0;
@@ -2714,38 +2653,33 @@ const chapterTmpl = `
     highlightPara(-1);
     setPlayIcon('&#9654;');
     playerPlayBtn.disabled = false;
-    voiceSel.disabled    = false;
-    speedSlider.disabled = false;
+    voiceSel.disabled = false; speedSlider.disabled = false;
     setBadge(playerStateBadge, 'error');
     playerTitle.textContent = 'Error';
     setStatus('Error: ' + msg);
     hideSeek();
   }
 
-  // ── next-chapter prefetch display ────────────────────────────────────────────
+  // ── next-chapter prefetch display ─────────────────────────────────────────
   function setNextState(state) {
     if (!NEXT_N) { playerNextRow.hidden = true; return; }
     playerNextRow.hidden = false;
     setBadge(playerNextBadge, state);
   }
 
-  // ── server-side audio generation ─────────────────────────────────────────────
+  // ── server-side audio generation ──────────────────────────────────────────
   var currentAudioCtrl = null;
-  var genStartTime     = 0; // Date.now() when generation began
+  var genStartTime     = 0;
 
   function generateAudio(chapterN, cb) {
-    if (currentAudioCtrl) { currentAudioCtrl.abort(); }
+    if (currentAudioCtrl) currentAudioCtrl.abort();
     var ctrl = new AbortController();
     currentAudioCtrl = ctrl;
     genStartTime = Date.now();
-
     fetch('/ui/audio/' + SLUG + '/' + chapterN, {
-      method:  'POST',
+      method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        voice: voiceSel.value,
-        speed: parseFloat(speedSlider.value)
-      }),
+      body: JSON.stringify({ voice: voiceSel.value, speed: parseFloat(speedSlider.value) }),
       signal: ctrl.signal
     })
     .then(function (res) {
@@ -2763,65 +2697,44 @@ const chapterTmpl = `
     });
   }
 
-  // ── next-chapter prefetch at 80% ─────────────────────────────────────────────
+  // ── next-chapter prefetch at 80% ──────────────────────────────────────────
   var prefetchFired = false;
-  var prefetchedUrl = null; // resolved proxy URL for the next chapter, if ready
+  var prefetchedUrl = null;
 
-  // ── audio event handlers (named so they can be removed on next swap) ──────────
   function onTimeUpdate() {
     if (stale()) { audio.removeEventListener('timeupdate', onTimeUpdate); return; }
     updateSeek();
-    // Live % progress in the badge while playing.
     if (audio.duration && isFinite(audio.duration) && !audio.paused) {
       playerStateBadge.textContent = Math.round((audio.currentTime / audio.duration) * 100) + '%';
     }
-    if (!NEXT_N || prefetchFired || !audio.duration || !isFinite(audio.duration)) {
-    } else if (audio.currentTime / audio.duration >= 0.8) {
+    if (NEXT_N && !prefetchFired && audio.duration && isFinite(audio.duration) &&
+        audio.currentTime / audio.duration >= 0.8) {
       prefetchFired = true;
       setNextState('generating');
       fetch('/ui/audio/' + SLUG + '/' + NEXT_N, {
-        method:  'POST',
+        method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ voice: voiceSel.value, speed: parseFloat(speedSlider.value) })
       })
       .then(function (res) { return res.ok ? res.json() : Promise.reject(res.status); })
-      .then(function (data) {
-        if (!stale()) {
-          prefetchedUrl = (data && data.url) ? data.url : null;
-          setNextState('ready');
-        }
-      })
+      .then(function (data) { if (!stale()) { prefetchedUrl = (data && data.url) ? data.url : null; setNextState('ready'); } })
       .catch(function () { if (!stale()) setNextState('error'); });
     }
-    // paragraph highlight
     if (paras.length === 0 || !audio.duration || !isFinite(audio.duration)) return;
-    var idx = Math.min(
-      Math.floor((audio.currentTime / audio.duration) * paras.length),
-      paras.length - 1
-    );
+    var idx = Math.min(Math.floor((audio.currentTime / audio.duration) * paras.length), paras.length - 1);
     if (!activePara || activePara !== paras[idx]) highlightPara(idx);
   }
 
-  function onCanPlay() {
-    if (stale()) { audio.removeEventListener('canplay', onCanPlay); return; }
-    if (audio.paused) {
-      audio.play().then(setPlaying).catch(function (e) { setError(e.message); });
-    }
-  }
-  function onWaiting()  { if (!stale()) setStatus('Buffering\u2026'); }
-  function onPlaying()  { if (!stale()) setPlaying(); }
-  function onPause()    { if (!stale() && !audio.ended) setPaused(); }
+  function onCanPlay()    { if (stale()) { audio.removeEventListener('canplay', onCanPlay); return; } if (audio.paused) audio.play().then(setPlaying).catch(function(e){ setError(e.message); }); }
+  function onWaiting()    { if (!stale()) setStatus('Buffering\u2026'); }
+  function onPlaying()    { if (!stale()) setPlaying(); }
+  function onPause()      { if (!stale() && !audio.ended) setPaused(); }
   function onAudioError() { if (!stale()) setError('audio error'); }
-
   function onEnded() {
     if (stale()) { audio.removeEventListener('ended', onEnded); return; }
     audio.src = '';
     prefetchFired = false;
-    if (autoplayChk.checked && NEXT_N) {
-      goNextChapter();
-    } else {
-      setStopped();
-    }
+    if (autoplayChk.checked && NEXT_N) goNextChapter(); else setStopped();
   }
 
   audio.addEventListener('canplay',    onCanPlay);
@@ -2833,48 +2746,29 @@ const chapterTmpl = `
   audio.addEventListener('timeupdate', onTimeUpdate);
   audio.addEventListener('ended',      onEnded);
 
-  // ── auto-next ────────────────────────────────────────────────────────────────
+  // ── auto-next ─────────────────────────────────────────────────────────────
   function goNextChapter() {
     if (!NEXT_N) return;
-
-    // If audio was already pre-generated, play it directly without a page
-    // navigation.  This keeps the existing audio context alive so the browser
-    // doesn't block autoplay on a locked screen where a user interaction was
-    // already granted for the current chapter.
     if (prefetchedUrl) {
-      var url = prefetchedUrl;
-      prefetchedUrl = null;
-      audio.src = url;
-      audio.load();
-      // Update Media Session so lock-screen shows the next chapter.
-      if ('mediaSession' in navigator && navigator.mediaSession.metadata) {
+      var url = prefetchedUrl; prefetchedUrl = null;
+      audio.src = url; audio.load();
+      if ('mediaSession' in navigator && navigator.mediaSession.metadata)
         navigator.mediaSession.metadata.title = 'Ch.\u00a0' + NEXT_N;
-      }
-      // audio.play() is called by onCanPlay once the element is ready.
       return;
     }
-
-    // Fall back to HTMX navigation (audio not ready yet).
     var nextURL = '/books/' + SLUG + '/chapters/' + NEXT_N;
     try { localStorage.setItem('tts_autostart', '1'); } catch(_) {}
-    htmx.ajax('GET', nextURL, {
-      target:  '#main-content',
-      swap:    'innerHTML',
-      pushURL: nextURL
-    });
+    htmx.ajax('GET', nextURL, { target: '#main-content', swap: 'innerHTML', pushURL: nextURL });
   }
 
-  // ── stop / cleanup ────────────────────────────────────────────────────────────
   function stop() {
     if (currentAudioCtrl) { currentAudioCtrl.abort(); currentAudioCtrl = null; }
-    audio.pause();
-    audio.src = '';
-    prefetchFired = false;
-    prefetchedUrl = null;
+    audio.pause(); audio.src = '';
+    prefetchFired = false; prefetchedUrl = null;
     setStopped();
   }
 
-  // ── Media Session API (lock-screen controls + background playback) ────────────
+  // ── Media Session ─────────────────────────────────────────────────────────
   function registerMediaSession() {
     if (!('mediaSession' in navigator)) return;
     navigator.mediaSession.metadata = new MediaMetadata({
@@ -2883,63 +2777,36 @@ const chapterTmpl = `
       album:  'libnovel',
       artwork: COVER_URL ? [{ src: COVER_URL, sizes: '512x512', type: 'image/jpeg' }] : []
     });
-    navigator.mediaSession.setActionHandler('play',  function() {
-      audio.play().then(setPlaying).catch(function(){});
-    });
-    navigator.mediaSession.setActionHandler('pause', function() {
-      audio.pause(); setPaused();
-    });
+    navigator.mediaSession.setActionHandler('play',  function() { audio.play().then(setPlaying).catch(function(){}); });
+    navigator.mediaSession.setActionHandler('pause', function() { audio.pause(); setPaused(); });
     navigator.mediaSession.setActionHandler('stop',  function() { stop(); });
-    if (NEXT_N) {
-      navigator.mediaSession.setActionHandler('nexttrack', function() {
-        try { localStorage.setItem('tts_autostart', '1'); } catch(_) {}
-        window.location.href = '/books/' + SLUG + '/chapters/' + NEXT_N;
-      });
-    }
-    if (PREV_N) {
-      navigator.mediaSession.setActionHandler('previoustrack', function() {
-        window.location.href = '/books/' + SLUG + '/chapters/' + PREV_N;
-      });
-    }
-    // seekto handler so lock-screen scrubbing works
-    navigator.mediaSession.setActionHandler('seekto', function(d) {
-      if (isFinite(d.seekTime)) { audio.currentTime = d.seekTime; updateSeek(); }
-    });
+    if (NEXT_N) navigator.mediaSession.setActionHandler('nexttrack', function() { try { localStorage.setItem('tts_autostart','1'); } catch(_){} window.location.href = '/books/'+SLUG+'/chapters/'+NEXT_N; });
+    if (PREV_N) navigator.mediaSession.setActionHandler('previoustrack', function() { window.location.href = '/books/'+SLUG+'/chapters/'+PREV_N; });
+    navigator.mediaSession.setActionHandler('seekto', function(d) { if (isFinite(d.seekTime)) { audio.currentTime = d.seekTime; updateSeek(); } });
   }
 
-  // ── main entry point ─────────────────────────────────────────────────────────
   function startAudio() {
     setGenerating();
     highlightPara(0);
     generateAudio(CHAPTER_N, function (url) {
       if (stale()) return;
-      audio.src = url;
-      audio.load();
+      audio.src = url; audio.load();
       registerMediaSession();
     });
   }
 
   window.ttsToggle = function () {
     if (audio.src) {
-      if (audio.paused) {
-        audio.play().then(setPlaying).catch(function (e) { setError(e.message); });
-      } else {
-        audio.pause();
-      }
+      if (audio.paused) audio.play().then(setPlaying).catch(function(e){ setError(e.message); });
+      else audio.pause();
       return;
     }
     startAudio();
   };
 
-  // ── cleanup on next HTMX swap ────────────────────────────────────────────────
-  window.__ttsBeforeSwap = function () {
-    // Invalidate this generation so all stale() checks short-circuit.
-    window.__ttsGen++;
-    stop();
-  };
+  window.__ttsBeforeSwap = function () { window.__ttsGen++; stop(); };
   document.body.addEventListener('htmx:beforeSwap', window.__ttsBeforeSwap);
 
-  // ── auto-start: localStorage signal (from auto-next) or ?autoplay=1 ──────────
   var _autostart = false;
   try { _autostart = localStorage.getItem('tts_autostart') === '1'; } catch(_) {}
   if (_autostart) {
@@ -2951,54 +2818,39 @@ const chapterTmpl = `
     setTimeout(startAudio, 100);
   }
 
-  // ── init next-chapter display ────────────────────────────────────────────────
-  if (NEXT_N) { setNextState('idle'); }
+  if (NEXT_N) setNextState('idle');
 
-  // ── double-tap left/right to navigate chapters ───────────────────────────────
-  if (window.__ttsDoubleTap) {
-    document.removeEventListener('touchend', window.__ttsDoubleTap);
-  }
+  // ── double-tap left/right to navigate ────────────────────────────────────
+  if (window.__ttsDoubleTap) document.removeEventListener('touchend', window.__ttsDoubleTap);
   (function initDoubleTap() {
-    var lastTap  = 0;
-    var lastSide = '';
-    var THRESHOLD = 300;
-    var INTERACTIVE = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'LABEL'];
-
+    var lastTap = 0, lastSide = '';
+    var THRESHOLD   = 300;
+    var INTERACTIVE = ['A','BUTTON','INPUT','SELECT','TEXTAREA','LABEL'];
     window.__ttsDoubleTap = function (e) {
       if (stale()) { document.removeEventListener('touchend', window.__ttsDoubleTap); return; }
       var el = e.target;
-      while (el && el !== document.body) {
-        if (INTERACTIVE.indexOf(el.tagName) !== -1) return;
-        el = el.parentElement;
-      }
+      while (el && el !== document.body) { if (INTERACTIVE.indexOf(el.tagName) !== -1) return; el = el.parentElement; }
       var touch = e.changedTouches[0];
       var side  = touch.clientX < window.innerWidth / 2 ? 'left' : 'right';
       var now   = Date.now();
       var gap   = now - lastTap;
       if (gap < THRESHOLD && side === lastSide) {
         lastTap = 0; lastSide = '';
-        if (side === 'right' && NEXT_N) window.location.href = '/books/' + SLUG + '/chapters/' + NEXT_N;
-        else if (side === 'left' && PREV_N) window.location.href = '/books/' + SLUG + '/chapters/' + PREV_N;
-      } else {
-        lastTap = now; lastSide = side;
-      }
+        if (side === 'right' && NEXT_N) window.location.href = '/books/'+SLUG+'/chapters/'+NEXT_N;
+        else if (side === 'left' && PREV_N) window.location.href = '/books/'+SLUG+'/chapters/'+PREV_N;
+      } else { lastTap = now; lastSide = side; }
     };
     document.addEventListener('touchend', window.__ttsDoubleTap, { passive: true });
   }());
 }());
 
-// ── Voice card picker ─────────────────────────────────────────────────────────
+// ── Voice card picker ─────────────────────────────────────────────────────
 window.selectVoice = function (btn) {
   var voiceSel = document.getElementById('tts-voice');
   var grid     = document.getElementById('voice-grid');
   if (!voiceSel || !grid) return;
-
-  // Update hidden select so voiceSel.value works in the existing TTS code.
   voiceSel.value = btn.dataset.voice;
-  // Persist to localStorage using same key as the TTS IIFE.
   try { localStorage.setItem('tts_voice', btn.dataset.voice); } catch(_) {}
-
-  // Swap active styling across all cards.
   grid.querySelectorAll('.voice-btn').forEach(function (b) {
     var active = b === btn;
     b.classList.toggle('border-amber-500', active);
@@ -3009,8 +2861,6 @@ window.selectVoice = function (btn) {
     b.classList.toggle('text-zinc-300',    !active);
   });
 };
-
-// On page load, sync voice grid selection to the restored localStorage value.
 (function syncVoiceGrid() {
   var voiceSel = document.getElementById('tts-voice');
   var grid     = document.getElementById('voice-grid');