fix: homepage overlay blocker and carousel auto-advance

- Add pointer-events:none to ListeningMode fly-transition wrapper div in
  +layout.svelte so the exiting animation div never blocks page interaction
- Add pointer-events:auto to ListeningMode root div so it still captures
  all touch/click events correctly despite the parent being pointer-events:none
- Rewrite carousel auto-advance using $effect + autoAdvanceSeed pattern:
  replaces the stale-closure setInterval in resetAutoAdvance() with a
  reactive $effect that owns the interval and re-starts cleanly on manual
  navigation by bumping a seed counter

.gitea/workflows/release.yaml

@@ -171,6 +171,13 @@ jobs:
           SENTRY_ORG: libnovel
           SENTRY_PROJECT: ui
 
+      - name: Upload injected build (for docker-ui)
+        uses: actions/upload-artifact@v3
+        with:
+          name: ui-build-injected
+          path: build
+          retention-days: 1
+
       - name: Create GlitchTip release
         run: sentry-cli releases new ${{ steps.ver.outputs.version }}
         env:
@@ -226,6 +233,17 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Download injected build (debug IDs already embedded)
+        uses: actions/download-artifact@v3
+        with:
+          name: ui-build-injected
+          path: ui/build
+
+      - name: Allow build/ into Docker context (override .dockerignore)
+        run: |
+          grep -v '^build$' ui/.dockerignore > ui/.dockerignore.tmp
+          mv ui/.dockerignore.tmp ui/.dockerignore
+
       - uses: docker/setup-buildx-action@v3
 
       - name: Log in to Docker Hub
@@ -255,6 +273,7 @@ jobs:
             BUILD_VERSION=${{ steps.meta.outputs.version }}
             BUILD_COMMIT=${{ gitea.sha }}
             BUILD_TIME=${{ gitea.event.head_commit.timestamp }}
+            PREBUILT=1
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-ui:latest
           cache-to: type=inline
 

backend/internal/backend/handlers.go

@@ -904,6 +904,115 @@ func (s *Server) handleAudioStream(w http.ResponseWriter, r *http.Request) {
 	// on its next poll as soon as the MinIO object is present.
 }
 
+// handleAudioPreview handles GET /api/audio-preview/{slug}/{n}.
+//
+// CF AI voices are batch-only and can take 1-2+ minutes to generate a full
+// chapter. This endpoint generates only the FIRST chunk of text (~1 800 chars,
+// roughly 1-2 minutes of audio) so the client can start playing immediately
+// while the full audio is generated in the background by the runner.
+//
+// Fast path: if a preview object already exists in MinIO, redirects to its
+// presigned URL (no regeneration).
+//
+// Slow path: generates the first chunk via CF AI, streams the MP3 bytes to the
+// client, and simultaneously uploads to MinIO under a "_preview" key so future
+// requests hit the fast path.
+//
+// Only CF AI voices are expected here. Calling this with a Kokoro/PocketTTS
+// voice falls back to the normal audio-stream endpoint behaviour.
+//
+// Query params:
+//
+//	voice  (required — must be a cfai: voice)
+func (s *Server) handleAudioPreview(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 {
+		jsonError(w, http.StatusBadRequest, "invalid chapter")
+		return
+	}
+
+	voice := r.URL.Query().Get("voice")
+	if voice == "" {
+		voice = s.cfg.DefaultVoice
+	}
+
+	if s.deps.CFAI == nil {
+		jsonError(w, http.StatusServiceUnavailable, "cloudflare AI TTS not configured")
+		return
+	}
+
+	// Preview key: same as normal key with a "_preview" suffix before the extension.
+	// e.g. slug/1/cfai:luna_preview.mp3
+	previewKey := s.deps.AudioStore.AudioObjectKeyExt(slug, n, voice+"_preview", "mp3")
+
+	// ── Fast path: preview already in MinIO ──────────────────────────────────
+	if s.deps.AudioStore.AudioExists(r.Context(), previewKey) {
+		presignURL, err := s.deps.PresignStore.PresignAudio(r.Context(), previewKey, 1*time.Hour)
+		if err != nil {
+			s.deps.Log.Error("handleAudioPreview: PresignAudio failed", "slug", slug, "n", n, "err", err)
+			jsonError(w, http.StatusInternalServerError, "presign failed")
+			return
+		}
+		http.Redirect(w, r, presignURL, http.StatusFound)
+		return
+	}
+
+	// ── Slow path: generate first chunk + stream + save ──────────────────────
+
+	// Read the chapter text.
+	raw, err := s.deps.BookReader.ReadChapter(r.Context(), slug, n)
+	if err != nil {
+		s.deps.Log.Error("handleAudioPreview: ReadChapter failed", "slug", slug, "n", n, "err", err)
+		jsonError(w, http.StatusNotFound, "chapter not found")
+		return
+	}
+	text := stripMarkdown(raw)
+	if text == "" {
+		jsonError(w, http.StatusUnprocessableEntity, "chapter text is empty")
+		return
+	}
+
+	// Take only the first ~1 800 characters — one CF AI chunk, roughly 1-2 min.
+	const previewChars = 1800
+	firstChunk := text
+	if len([]rune(text)) > previewChars {
+		runes := []rune(text)
+		firstChunk = string(runes[:previewChars])
+		// Walk back to last sentence boundary (. ! ?) to avoid a mid-word cut.
+		for i := previewChars - 1; i > previewChars/2; i-- {
+			r := runes[i]
+			if r == '.' || r == '!' || r == '?' || r == '\n' {
+				firstChunk = string(runes[:i+1])
+				break
+			}
+		}
+	}
+
+	// Generate the preview chunk via CF AI.
+	mp3, err := s.deps.CFAI.GenerateAudio(r.Context(), firstChunk, voice)
+	if err != nil {
+		s.deps.Log.Error("handleAudioPreview: GenerateAudio failed", "slug", slug, "n", n, "voice", voice, "err", err)
+		jsonError(w, http.StatusInternalServerError, "tts generation failed")
+		return
+	}
+
+	// Upload to MinIO in the background so the next request hits the fast path.
+	go func() {
+		if uploadErr := s.deps.AudioStore.PutAudio(
+			context.Background(), previewKey, mp3,
+		); uploadErr != nil {
+			s.deps.Log.Error("handleAudioPreview: MinIO upload failed", "key", previewKey, "err", uploadErr)
+		}
+	}()
+
+	w.Header().Set("Content-Type", "audio/mpeg")
+	w.Header().Set("Content-Length", strconv.Itoa(len(mp3)))
+	w.Header().Set("Cache-Control", "no-store")
+	w.WriteHeader(http.StatusOK)
+	_, _ = w.Write(mp3)
+}
+
 // ── Translation ────────────────────────────────────────────────────────────────
 
 // supportedTranslationLangs is the set of target locales the backend accepts.

backend/internal/backend/handlers_textgen.go

@@ -371,6 +371,215 @@ func parseChapterTitlesJSON(raw string) []rawChapterTitle {
 	return out
 }
 
+// handleAdminTextGenChapterNamesAsync handles POST /api/admin/text-gen/chapter-names/async.
+//
+// Fire-and-forget variant: validates inputs, creates an ai_job record, spawns a
+// background goroutine, and returns HTTP 202 with {job_id} immediately. The
+// goroutine runs all batches, stores the proposed titles in the job payload, and
+// marks the job done/failed/cancelled when finished.
+//
+// The client can poll GET /api/admin/ai-jobs/{id} for progress, then call
+// POST /api/admin/text-gen/chapter-names/apply once the job is "done".
+func (s *Server) handleAdminTextGenChapterNamesAsync(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured (CFAI_ACCOUNT_ID/CFAI_API_TOKEN missing)")
+		return
+	}
+
+	var req textGenChapterNamesRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if strings.TrimSpace(req.Pattern) == "" {
+		jsonError(w, http.StatusBadRequest, "pattern is required")
+		return
+	}
+
+	// Load existing chapter list (use request context — just for validation).
+	allChapters, err := s.deps.BookReader.ListChapters(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "list chapters: "+err.Error())
+		return
+	}
+	if len(allChapters) == 0 {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("no chapters found for slug %q", req.Slug))
+		return
+	}
+
+	// Apply chapter range filter.
+	chapters := allChapters
+	if req.FromChapter > 0 || req.ToChapter > 0 {
+		filtered := chapters[:0]
+		for _, ch := range allChapters {
+			if req.FromChapter > 0 && ch.Number < req.FromChapter {
+				continue
+			}
+			if req.ToChapter > 0 && ch.Number > req.ToChapter {
+				break
+			}
+			filtered = append(filtered, ch)
+		}
+		chapters = filtered
+	}
+	if len(chapters) == 0 {
+		jsonError(w, http.StatusBadRequest, "no chapters in the specified range")
+		return
+	}
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+	maxTokens := req.MaxTokens
+	if maxTokens <= 0 {
+		maxTokens = 4096
+	}
+
+	// Index existing titles for old/new diff.
+	existing := make(map[int]string, len(chapters))
+	for _, ch := range chapters {
+		existing[ch.Number] = ch.Title
+	}
+
+	batches := chunkChapters(chapters, chapterNamesBatchSize)
+	totalBatches := len(batches)
+
+	if s.deps.AIJobStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "ai job store not configured")
+		return
+	}
+
+	jobPayload := fmt.Sprintf(`{"pattern":%q}`, req.Pattern)
+	jobID, createErr := s.deps.AIJobStore.CreateAIJob(r.Context(), domain.AIJob{
+		Kind:       "chapter-names",
+		Slug:       req.Slug,
+		Status:     domain.TaskStatusPending,
+		FromItem:   req.FromChapter,
+		ToItem:     req.ToChapter,
+		ItemsTotal: len(chapters),
+		Model:      string(model),
+		Payload:    jobPayload,
+		Started:    time.Now(),
+	})
+	if createErr != nil {
+		jsonError(w, http.StatusInternalServerError, "create ai job: "+createErr.Error())
+		return
+	}
+
+	jobCtx, jobCancel := context.WithCancel(context.Background())
+	registerCancelJob(jobID, jobCancel)
+
+	s.deps.Log.Info("admin: text-gen chapter-names async started",
+		"job_id", jobID, "slug", req.Slug,
+		"chapters", len(chapters), "batches", totalBatches, "model", model)
+
+	// Mark running before returning so the UI sees it immediately.
+	_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), jobID, map[string]any{
+		"status": string(domain.TaskStatusRunning),
+	})
+
+	systemPrompt := `You are a chapter title editor for a web novel platform. ` +
+		`The user provides a list of chapter numbers with their current titles, ` +
+		`and a naming pattern template. ` +
+		`Your job: produce one new title for every chapter, following the pattern exactly. ` +
+		`Pattern placeholders: {n} = the chapter number (integer), {scene} = a very short (2–5 word) scene hint derived from the existing title. ` +
+		`RULES: ` +
+		`1. Do NOT include the chapter number inside the title text — the {n} placeholder is already in the pattern. ` +
+		`2. Do NOT include any prefix like "Chapter X -" or "Chapter X:" inside the title field itself. ` +
+		`3. The "title" field in your JSON must be the fully-rendered string (e.g. if pattern is "Chapter {n}: {scene}", output "Chapter 3: The Bet"). ` +
+		`4. Respond ONLY with a raw JSON array — no prose, no markdown fences, no explanation. ` +
+		`5. Each element: {"number": <int>, "title": <string>}. ` +
+		`6. Output every chapter in the input list, in order. Do not skip any.`
+
+	// Capture all locals needed in the goroutine.
+	store := s.deps.AIJobStore
+	textGen := s.deps.TextGen
+	logger := s.deps.Log
+	capturedModel := model
+	capturedMaxTokens := maxTokens
+	capturedPattern := req.Pattern
+	capturedSlug := req.Slug
+
+	go func() {
+		defer deregisterCancelJob(jobID)
+		defer jobCancel()
+
+		var allResults []proposedChapterTitle
+		chaptersDone := 0
+
+		for i, batch := range batches {
+			if jobCtx.Err() != nil {
+				_ = store.UpdateAIJob(context.Background(), jobID, map[string]any{
+					"status":   string(domain.TaskStatusCancelled),
+					"finished": time.Now().Format(time.RFC3339),
+				})
+				return
+			}
+
+			var chapterListSB strings.Builder
+			for _, ch := range batch {
+				chapterListSB.WriteString(fmt.Sprintf("%d: %s\n", ch.Number, ch.Title))
+			}
+			userPrompt := fmt.Sprintf("Naming pattern: %s\n\nChapters:\n%s", capturedPattern, chapterListSB.String())
+
+			raw, genErr := textGen.Generate(jobCtx, cfai.TextRequest{
+				Model: capturedModel,
+				Messages: []cfai.TextMessage{
+					{Role: "system", Content: systemPrompt},
+					{Role: "user", Content: userPrompt},
+				},
+				MaxTokens: capturedMaxTokens,
+			})
+			if genErr != nil {
+				logger.Error("admin: text-gen chapter-names async batch failed",
+					"job_id", jobID, "batch", i+1, "err", genErr)
+				// Continue — skip errored batch rather than aborting.
+				continue
+			}
+
+			proposed := parseChapterTitlesJSON(raw)
+			for _, p := range proposed {
+				allResults = append(allResults, proposedChapterTitle{
+					Number:   p.Number,
+					OldTitle: existing[p.Number],
+					NewTitle: p.Title,
+				})
+			}
+			chaptersDone += len(batch)
+
+			_ = store.UpdateAIJob(context.Background(), jobID, map[string]any{
+				"items_done": chaptersDone,
+			})
+		}
+
+		// Persist results into payload so the UI can load them for review.
+		resultsJSON, _ := json.Marshal(allResults)
+		finalPayload := fmt.Sprintf(`{"pattern":%q,"slug":%q,"results":%s}`,
+			capturedPattern, capturedSlug, string(resultsJSON))
+
+		status := domain.TaskStatusDone
+		if jobCtx.Err() != nil {
+			status = domain.TaskStatusCancelled
+		}
+		_ = store.UpdateAIJob(context.Background(), jobID, map[string]any{
+			"status":     string(status),
+			"items_done": chaptersDone,
+			"finished":   time.Now().Format(time.RFC3339),
+			"payload":    finalPayload,
+		})
+		logger.Info("admin: text-gen chapter-names async done",
+			"job_id", jobID, "slug", capturedSlug,
+			"results", len(allResults), "status", string(status))
+	}()
+
+	writeJSON(w, http.StatusAccepted, map[string]any{"job_id": jobID})
+}
+
 // ── Apply chapter names ───────────────────────────────────────────────────────
 
 // applyChapterNamesRequest is the JSON body for POST /api/admin/text-gen/chapter-names/apply.

backend/internal/backend/server.go

@@ -180,6 +180,9 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	// Streaming audio: serves from MinIO if cached, else streams live TTS
 	// while simultaneously uploading to MinIO for future requests.
 	mux.HandleFunc("GET /api/audio-stream/{slug}/{n}", s.handleAudioStream)
+	// CF AI preview: generates only the first ~1 800-char chunk so the client
+	// can start playing immediately while the full audio is generated by the runner.
+	mux.HandleFunc("GET /api/audio-preview/{slug}/{n}", s.handleAudioPreview)
 
 	// Translation task creation (backend creates task; runner executes via LibreTranslate)
 	mux.HandleFunc("POST /api/translation/{slug}/{n}", s.handleTranslationGenerate)
@@ -203,6 +206,7 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	// Admin text generation endpoints (chapter names + book description)
 	mux.HandleFunc("GET /api/admin/text-gen/models", s.handleAdminTextGenModels)
 	mux.HandleFunc("POST /api/admin/text-gen/chapter-names", s.handleAdminTextGenChapterNames)
+	mux.HandleFunc("POST /api/admin/text-gen/chapter-names/async", s.handleAdminTextGenChapterNamesAsync)
 	mux.HandleFunc("POST /api/admin/text-gen/chapter-names/apply", s.handleAdminTextGenApplyChapterNames)
 	mux.HandleFunc("POST /api/admin/text-gen/description", s.handleAdminTextGenDescription)
 	mux.HandleFunc("POST /api/admin/text-gen/description/apply", s.handleAdminTextGenApplyDescription)

ui/Dockerfile

@@ -21,7 +21,11 @@ ENV PUBLIC_BUILD_VERSION=$BUILD_VERSION
 ENV PUBLIC_BUILD_COMMIT=$BUILD_COMMIT
 ENV PUBLIC_BUILD_TIME=$BUILD_TIME
 
-RUN npm run build
+# PREBUILT=1 skips npm run build — used in CI when the build/ directory has
+# already been compiled (and debug IDs injected) by a prior job.  The caller
+# must copy the pre-built build/ into the Docker context before building.
+ARG PREBUILT=0
+RUN [ "$PREBUILT" = "1" ] || npm run build
 
 # ── Runtime image ──────────────────────────────────────────────────────────────
 # adapter-node bundles most server-side code, but packages with dynamic

ui/src/app.css

@@ -189,6 +189,15 @@ html {
 	display: none;               /* Chrome / Safari / WebKit */
 }
 
+/* ── Hero carousel fade ─────────────────────────────────────────────── */
+@keyframes fade-in {
+	from { opacity: 0; }
+	to   { opacity: 1; }
+}
+.animate-fade-in {
+	animation: fade-in 0.4s ease-out forwards;
+}
+
 /* ── Navigation progress bar ───────────────────────────────────────── */
 @keyframes progress-bar {
 	0%   { width: 0%; opacity: 1; }

ui/src/lib/audio.svelte.ts

@@ -62,6 +62,13 @@ class AudioStore {
 	/** Pseudo-progress bar value 0–100 during generation */
 	progress = $state(0);
 
+	/**
+	 * True while playing a short CF AI preview clip (~1-2 min) and the full
+	 * audio is still being generated in the background.  Set to false once the
+	 * full audio URL has been swapped in.
+	 */
+	isPreview = $state(false);
+
 	// ── Playback state (kept in sync with the <audio> element) ─────────────
 	currentTime = $state(0);
 	duration = $state(0);

ui/src/lib/components/AudioPlayer.svelte

@@ -49,6 +49,7 @@
 	 */
 
 	import { audioStore } from '$lib/audio.svelte';
+	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 	import type { Voice } from '$lib/types';
@@ -98,6 +99,27 @@
 	/** Currently active sample <audio> element — one at a time. */
 	let sampleAudio = $state<HTMLAudioElement | null>(null);
 
+	// ── Chapter picker state ─────────────────────────────────────────────────
+	let showChapterPanel = $state(false);
+	let chapterSearch = $state('');
+	const filteredChapters = $derived(
+		chapterSearch.trim() === ''
+			? audioStore.chapters
+			: audioStore.chapters.filter((ch) =>
+					(ch.title || `Chapter ${ch.number}`)
+						.toLowerCase()
+						.includes(chapterSearch.toLowerCase()) ||
+					String(ch.number).includes(chapterSearch)
+			  )
+	);
+
+	function playChapter(chapterNumber: number) {
+		audioStore.autoStartChapter = chapterNumber;
+		showChapterPanel = false;
+		chapterSearch = '';
+		goto(`/books/${slug}/chapters/${chapterNumber}`);
+	}
+
 	/**
 	 * Human-readable label for a voice.
 	 * Kokoro: "af_bella" → "Bella (US F)"
@@ -256,11 +278,11 @@
 		}
 	});
 
-	// Close voice panel when user clicks outside (escape key).
+	// Close panels on Escape.
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
-			stopSample();
-			showVoicePanel = false;
+			if (showChapterPanel) { showChapterPanel = false; chapterSearch = ''; }
+			else { stopSample(); showVoicePanel = false; }
 		}
 	}
 
@@ -575,11 +597,14 @@
 
 			// Slow path: audio not yet in MinIO.
 			//
-			// For Kokoro / PocketTTS when presign has NOT already enqueued the runner:
-			// use the streaming endpoint — audio starts playing within seconds while
-			// generation runs and MinIO is populated concurrently.
-			// Skip when enqueued=true to avoid double-generation with the async runner.
-			if (!voice.startsWith('cfai:') && !presignResult.enqueued) {
+			// For Kokoro / PocketTTS: always use the streaming endpoint so audio
+			// starts playing within seconds. The stream handler checks MinIO first
+			// (fast redirect if already cached) and otherwise generates + uploads
+			// concurrently. Even if the async runner is already working on this
+			// chapter, the stream will redirect to MinIO the moment the runner
+			// finishes — no harmful double-generation occurs because the backend
+			// deduplications via AudioExists on the next request.
+			if (!voice.startsWith('cfai:')) {
 				// PocketTTS outputs raw WAV — skip the ffmpeg transcode entirely.
 				// WAV (PCM) is natively supported on all platforms including iOS Safari.
 				// Kokoro and CF AI output MP3 natively, so keep mp3 for those.
@@ -600,13 +625,17 @@
 				return;
 			}
 
-			// CF AI (batch-only) or already enqueued by presign: keep the traditional
-			// POST → poll → presign flow. For enqueued, we skip the POST and poll.
+			// CF AI voices: use preview/swap strategy.
+			// 1. Fetch a short ~1-2 min preview clip from the first text chunk
+			//    so playback starts immediately — no more waiting behind a spinner.
+			// 2. Meanwhile keep polling the full audio job; when it finishes,
+			//    swap the <audio> src to the full URL preserving currentTime.
 			audioStore.status = 'generating';
+			audioStore.isPreview = false;
 			startProgress();
 
-			// presignResult.enqueued=true means /api/presign/audio already POSTed on our
-			// behalf — skip the duplicate POST and go straight to polling.
+			// Kick off the full audio generation task in the background
+			// (presignResult.enqueued=true means the presign endpoint already did it).
 			if (!presignResult.enqueued) {
 				const res = await fetch(`/api/audio/${slug}/${chapter}`, {
 					method: 'POST',
@@ -615,7 +644,6 @@
 				});
 
 				if (res.status === 402) {
-					// Free daily limit reached — surface upgrade CTA
 					audioStore.status = 'idle';
 					stopProgress();
 					onProRequired?.();
@@ -625,37 +653,96 @@
 				if (!res.ok) throw new Error(`Generation failed: HTTP ${res.status}`);
 
 				if (res.status === 200) {
-					// Already cached — body is { status: 'done' }, no url needed.
+					// Already cached — fast path: presign and play directly.
 					await res.body?.cancel();
 					await finishProgress();
 					const doneUrl = await tryPresign(slug, chapter, voice);
 					if (!doneUrl.ready) throw new Error('Audio generated but presign returned 404');
+					audioStore.isPreview = false;
 					audioStore.audioUrl = doneUrl.url;
 					audioStore.status = 'ready';
 					maybeStartPrefetch();
 					return;
 				}
-				// 202: fall through to polling below.
+				// 202 accepted — fall through: start preview while runner generates
 			}
 
-			// Poll until the runner finishes generating.
-			const final = await pollAudioStatus(slug, chapter, voice);
-			if (final.status === 'failed') {
-				throw new Error(
-					`Generation failed: ${(final as { error?: string }).error ?? 'unknown error'}`
-				);
+			// Fetch the preview clip (first ~1-2 min chunk).
+			// Use an AbortController so we can cancel the background polling if the
+			// user navigates away or stops playback before the full audio is ready.
+			const previewAbort = new AbortController();
+			const qs = new URLSearchParams({ voice });
+			const previewUrl = `/api/audio-preview/${slug}/${chapter}?${qs}`;
+
+			try {
+				const previewRes = await fetch(previewUrl, { signal: previewAbort.signal });
+				if (previewRes.status === 402) {
+					audioStore.status = 'idle';
+					stopProgress();
+					onProRequired?.();
+					return;
+				}
+				if (!previewRes.ok) throw new Error(`Preview failed: HTTP ${previewRes.status}`);
+
+				// The backend responded with the MP3 bytes (or a redirect to MinIO).
+				// Build a blob URL so we can swap it out later without reloading the page.
+				const previewBlob = await previewRes.blob();
+				const previewBlobUrl = URL.createObjectURL(previewBlob);
+
+				audioStore.isPreview = true;
+				audioStore.audioUrl = previewBlobUrl;
+				audioStore.status = 'ready';
+				// Don't restore saved time here — preview is always from 0.
+				// Kick off prefetch of next chapter in the background.
+				maybeStartPrefetch();
+			} catch (previewErr: unknown) {
+				if (previewErr instanceof DOMException && previewErr.name === 'AbortError') return;
+				// Preview failed — fall through to the spinner (old behaviour).
+				// We'll wait for the full audio to finish instead.
+				audioStore.isPreview = false;
 			}
 
-			await finishProgress();
+			// Background: poll for full audio; when done, swap src preserving position.
+			try {
+				const final = await pollAudioStatus(slug, chapter, voice, 2000, previewAbort.signal);
+				if (final.status === 'failed') {
+					throw new Error(
+						`Generation failed: ${(final as { error?: string }).error ?? 'unknown error'}`
+					);
+				}
 
-			// Audio is ready in MinIO — always use a presigned URL for direct playback.
-			const doneUrl = await tryPresign(slug, chapter, voice);
-			if (!doneUrl.ready) throw new Error('Audio generated but presign returned 404');
-			audioStore.audioUrl = doneUrl.url;
-			audioStore.status = 'ready';
-			// Don't restore time for freshly generated audio — position is 0
-			// Immediately start pre-generating the next chapter in background.
-			maybeStartPrefetch();
+				await finishProgress();
+
+				const doneUrl = await tryPresign(slug, chapter, voice);
+				if (!doneUrl.ready) throw new Error('Audio generated but presign returned 404');
+
+				// Swap: save currentTime → update URL → seek to saved position.
+				const savedTime = audioStore.currentTime;
+				const blobUrlToRevoke = audioStore.audioUrl; // capture before overwrite
+				audioStore.isPreview = false;
+				audioStore.audioUrl = doneUrl.url;
+				// If we never started a preview (preview fetch failed), switch to ready now.
+				if (audioStore.status !== 'ready') audioStore.status = 'ready';
+				// The layout $effect will load the new src and auto-play from 0.
+				// We seek back to savedTime after a short delay to let the element
+				// attach the new source before accepting a seek.
+				if (savedTime > 0) {
+					setTimeout(() => {
+						audioStore.seekRequest = savedTime;
+					}, 300);
+				}
+				// Revoke the preview blob URL to free memory.
+				// (We need to wait until the new src is playing; 2 s is safe.)
+				setTimeout(() => {
+					if (blobUrlToRevoke.startsWith('blob:')) {
+						URL.revokeObjectURL(blobUrlToRevoke);
+					}
+				}, 2000);
+				maybeStartPrefetch();
+			} catch (pollErr: unknown) {
+				if (pollErr instanceof DOMException && pollErr.name === 'AbortError') return;
+				throw pollErr;
+			}
 		} catch (e) {
 			stopProgress();
 			audioStore.progress = 0;
@@ -722,6 +809,11 @@
 		}
 	}
 
+	function formatDuration(s: number): string {
+		if (!isFinite(s) || s <= 0) return '--:--';
+		return formatTime(s);
+	}
+
 	function formatTime(s: number): string {
 		if (!isFinite(s) || s < 0) return '0:00';
 		const m = Math.floor(s / 60);
@@ -925,7 +1017,7 @@
 					</button>
 					<!-- Time display -->
 					<span class="flex-1 text-xs text-center tabular-nums text-(--color-muted)">
-						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+						{formatTime(audioStore.currentTime)} / {formatDuration(audioStore.duration)}
 					</span>
 					<!-- Speed cycle -->
 					<button
@@ -959,21 +1051,29 @@
 </div>
 {:else}
 <!-- ── Standard player ─────────────────────────────────────────────────────── -->
-<div class="mt-6 p-4 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
-	<div class="flex items-center justify-between gap-2 mb-3">
-		<div class="flex items-center gap-2">
-			<svg class="w-4 h-4 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-				<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
-			</svg>
-			<span class="text-sm text-(--color-text) font-medium">{m.reader_audio_narration()}</span>
-		</div>
-
+<div class="p-4">
+	<div class="flex items-center justify-end gap-2 mb-3">
+		<!-- Chapter picker button -->
+		{#if audioStore.chapters.length > 0}
+			<Button
+				variant="ghost"
+				size="sm"
+				onclick={() => { showChapterPanel = !showChapterPanel; showVoicePanel = false; stopSample(); }}
+				class={cn('gap-1.5 text-xs', showChapterPanel ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : '')}
+				title="Browse chapters"
+			>
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/>
+				</svg>
+				Chapters
+			</Button>
+		{/if}
 		<!-- Voice selector button -->
 		{#if voices.length > 0}
 			<Button
 				variant="ghost"
 				size="sm"
-				onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; }}
+				onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; showChapterPanel = false; chapterSearch = ''; }}
 				class={cn('gap-1.5 text-xs', showVoicePanel ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : '')}
 				title={m.reader_change_voice()}
 			>
@@ -1054,6 +1154,79 @@
 		</div>
 	{/if}
 
+	<!-- ── Chapter picker overlay ────────────────────────────────────────── -->
+	{#if showChapterPanel && audioStore.chapters.length > 0}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="fixed inset-0 z-[60] flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<!-- Header -->
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+				<button
+					type="button"
+					onclick={() => { showChapterPanel = false; chapterSearch = ''; }}
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					aria-label="Close chapter picker"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+					</svg>
+				</button>
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Chapters</span>
+			</div>
+			<!-- Search -->
+			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+				<div class="relative">
+					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+					</svg>
+					<input
+						type="search"
+						placeholder="Search chapters…"
+						bind:value={chapterSearch}
+						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+					/>
+				</div>
+			</div>
+			<!-- Chapter list -->
+			<div class="flex-1 overflow-y-auto">
+				{#each filteredChapters as ch (ch.number)}
+					<button
+						type="button"
+						onclick={() => playChapter(ch.number)}
+						class={cn(
+							'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
+							ch.number === chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
+						)}
+					>
+						<!-- Chapter number badge (mirrors voice radio indicator) -->
+						<span class={cn(
+							'w-8 h-8 shrink-0 rounded-full border-2 flex items-center justify-center tabular-nums text-xs font-semibold transition-colors',
+							ch.number === chapter
+								? 'border-(--color-brand) bg-(--color-brand) text-(--color-surface)'
+								: 'border-(--color-border) text-(--color-muted)'
+						)}>{ch.number}</span>
+						<!-- Title -->
+						<span class={cn(
+							'flex-1 text-sm truncate',
+							ch.number === chapter ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)'
+						)}>{ch.title || `Chapter ${ch.number}`}</span>
+						<!-- Now-playing indicator -->
+						{#if ch.number === chapter}
+							<svg class="w-4 h-4 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M8 5v14l11-7z"/>
+							</svg>
+						{/if}
+					</button>
+				{/each}
+				{#if filteredChapters.length === 0}
+					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
 	{#if audioStore.isCurrentChapter(slug, chapter)}
 		<!-- ── This chapter is the active one ── -->
 
@@ -1105,7 +1278,7 @@
 					<span>{m.reader_paused()}</span>
 				{/if}
 					<span class="tabular-nums text-(--color-muted) opacity-60">
-						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+						{formatTime(audioStore.currentTime)} / {formatDuration(audioStore.duration)}
 					</span>
 				</div>
 			</div>

ui/src/lib/components/CommentsSection.svelte

@@ -241,311 +241,321 @@
 	const totalCount = $derived(
 		comments.reduce((n, c) => n + 1 + (c.replies?.length ?? 0), 0)
 	);
+
+	// ── Collapsed state ───────────────────────────────────────────────────────
+	// Hidden by default when there are no comments; expand on user tap.
+	let expanded = $state(false);
+	const hasComments = $derived(!loading && comments.length > 0);
+	// Auto-expand once comments load in
+	$effect(() => {
+		if (hasComments) expanded = true;
+	});
 </script>
 
 <div class="mt-10">
-	<!-- Header + sort controls -->
-	<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
-		<h2 class="text-base font-semibold text-(--color-text)">
+	{#if !expanded && !hasComments && !loading}
+		<!-- Collapsed: just a subtle link — no wasted real-estate for empty chapters -->
+		<button
+			type="button"
+			onclick={() => (expanded = true)}
+			class="flex items-center gap-1.5 text-sm text-(--color-muted) hover:text-(--color-text) transition-colors"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/>
+			</svg>
 			{m.comments_heading()}
-			{#if !loading && totalCount > 0}
-				<span class="text-(--color-muted) font-normal text-sm ml-1">({totalCount})</span>
-			{/if}
-		</h2>
-
-	<!-- Sort tabs -->
-	{#if !loading && comments.length > 0}
-		<div class="flex items-center gap-1 text-xs rounded-lg bg-(--color-surface-2)/60 p-1">
-			<Button
-				variant="ghost"
-				size="sm"
-				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'top' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
-				onclick={() => (sort = 'top')}
-			>{m.comments_top()}</Button>
-			<Button
-				variant="ghost"
-				size="sm"
-				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'new' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
-				onclick={() => (sort = 'new')}
-			>{m.comments_new()}</Button>
-		</div>
-	{/if}
-	</div>
-
-	<!-- Post form -->
-	<div class="mb-6">
-		{#if isLoggedIn}
-			<div class="flex flex-col gap-2">
-				<Textarea
-					bind:value={newBody}
-					placeholder={m.comments_placeholder()}
-					rows={3}
-				/>
-				<div class="flex items-center justify-between gap-3">
-					<span class={cn('text-xs tabular-nums', charOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
-						{charCount}/2000
-					</span>
-					<div class="flex items-center gap-3">
-						{#if postError}
-							<span class="text-xs text-(--color-danger)">{postError}</span>
-						{/if}
-						<Button
-							variant="default"
-							size="sm"
-							disabled={posting || !newBody.trim() || charOver}
-							onclick={postComment}
-						>
-							{posting ? m.comments_posting() : m.comments_submit()}
-						</Button>
-					</div>
-				</div>
-			</div>
-		{:else}
-		<p class="text-sm text-(--color-muted)">
-			<a href="/login" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.comments_login_link()}</a>
-				{m.comments_login_suffix()}
-			</p>
-		{/if}
-	</div>
-
-	<!-- Comment list -->
-	{#if loading}
-		<div class="flex flex-col gap-3">
-			{#each Array(3) as _}
-				<div class="rounded-lg bg-(--color-surface-2)/50 p-4 animate-pulse">
-					<div class="h-3 w-24 bg-(--color-surface-3) rounded mb-3"></div>
-					<div class="h-3 w-full bg-(--color-surface-3)/60 rounded mb-2"></div>
-					<div class="h-3 w-3/4 bg-(--color-surface-3)/60 rounded"></div>
-				</div>
-			{/each}
-		</div>
-	{:else if loadError}
-		<p class="text-sm text-(--color-danger)">{loadError}</p>
-	{:else if comments.length === 0}
-		<p class="text-sm text-(--color-muted)">{m.comments_empty()}</p>
+		</button>
 	{:else}
-		<div class="flex flex-col gap-3">
-			{#each comments as comment (comment.id)}
-				{@const myVote = myVotes[comment.id]}
-				{@const voting = votingIds.has(comment.id)}
-				{@const deleting = deletingIds.has(comment.id)}
-				{@const isOwner = isLoggedIn && currentUserId === comment.user_id}
+		<!-- Expanded: full comments section -->
 
-			<div class="rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/50 px-4 py-3 flex flex-col gap-2 {deleting ? 'opacity-50' : ''}">
-				<!-- Header -->
-				<div class="flex items-center gap-2 flex-wrap">
-					{#if avatarUrls[comment.user_id]}
-						<img src={avatarUrls[comment.user_id]} alt={comment.username} class="w-6 h-6 rounded-full object-cover flex-shrink-0" />
-					{:else}
-						<div class="w-6 h-6 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
-							<span class="text-[9px] font-semibold text-(--color-text) leading-none">{initials(comment.username)}</span>
-						</div>
-					{/if}
-					{#if comment.username}
-					<a href="/users/{comment.username}" class="text-sm font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{comment.username}</a>
-				{:else}
-					<span class="text-sm font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+		<!-- Header + sort controls -->
+		<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
+			<h2 class="text-base font-semibold text-(--color-text)">
+				{m.comments_heading()}
+				{#if !loading && totalCount > 0}
+					<span class="text-(--color-muted) font-normal text-sm ml-1">({totalCount})</span>
 				{/if}
-					<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
-					<span class="text-xs text-(--color-muted)">{formatDate(comment.created)}</span>
-				</div>
-
-				<!-- Body -->
-				<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
-
-				<!-- Actions row: votes + reply + delete -->
-				<div class="flex items-center gap-3 pt-1 flex-wrap">
-					<!-- Upvote -->
-				<Button
-					variant="ghost"
-					size="sm"
-					class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
-					disabled={voting}
-					onclick={() => vote(comment.id, 'up')}
-					title={m.comments_vote_up()}
-				>
-						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
-						</svg>
-						<span class="tabular-nums">{comment.upvotes ?? 0}</span>
-					</Button>
-
-					<!-- Downvote -->
-				<Button
-					variant="ghost"
-					size="sm"
-					class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
-					disabled={voting}
-					onclick={() => vote(comment.id, 'down')}
-					title={m.comments_vote_down()}
-				>
-						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
-						</svg>
-						<span class="tabular-nums">{comment.downvotes ?? 0}</span>
-					</Button>
-
-					<!-- Reply button -->
-					{#if isLoggedIn}
+			</h2>
+			{#if !loading && comments.length > 0}
+				<div class="flex items-center gap-1 text-xs rounded-lg bg-(--color-surface-2)/60 p-1">
 					<Button
 						variant="ghost"
 						size="sm"
-						class={cn('h-auto px-1 py-0 gap-1 text-xs', replyingTo === comment.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
-						onclick={() => {
-								if (replyingTo === comment.id) {
-									replyingTo = null;
-									replyBody = '';
-									replyError = '';
-								} else {
-									replyingTo = comment.id;
-									replyBody = '';
-									replyError = '';
-								}
-							}}
-						>
-							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
-							</svg>
-							{m.comments_reply()}
-						</Button>
-					{/if}
-
-					<!-- Delete (owner only) -->
-					{#if isOwner}
+						class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'top' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
+						onclick={() => (sort = 'top')}
+					>{m.comments_top()}</Button>
 					<Button
 						variant="ghost"
 						size="sm"
-						class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
-						disabled={deleting}
-						onclick={() => deleteComment(comment.id)}
-						title="Delete comment"
-					>
-							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-							</svg>
-							{m.comments_delete()}
-						</Button>
-					{/if}
+						class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'new' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
+						onclick={() => (sort = 'new')}
+					>{m.comments_new()}</Button>
 				</div>
+			{/if}
+		</div>
 
-				<!-- Inline reply form -->
-				{#if replyingTo === comment.id}
-			<div class="mt-1 flex flex-col gap-2 pl-2 border-l-2 border-(--color-border)">
+		<!-- Post form -->
+		<div class="mb-6">
+			{#if isLoggedIn}
+				<div class="flex flex-col gap-2">
 					<Textarea
-						bind:value={replyBody}
+						bind:value={newBody}
 						placeholder={m.comments_placeholder()}
-						rows={2}
+						rows={3}
 					/>
-					<div class="flex items-center justify-between gap-2">
-						<span class={cn('text-xs tabular-nums', replyCharOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
-							{replyCharCount}/2000
+					<div class="flex items-center justify-between gap-3">
+						<span class={cn('text-xs tabular-nums', charOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
+							{charCount}/2000
 						</span>
-						<div class="flex items-center gap-2">
-							{#if replyError}
-								<span class="text-xs text-(--color-danger)">{replyError}</span>
+						<div class="flex items-center gap-3">
+							{#if postError}
+								<span class="text-xs text-(--color-danger)">{postError}</span>
 							{/if}
 							<Button
-								variant="ghost"
+								variant="default"
 								size="sm"
-								class="text-(--color-muted) hover:text-(--color-text)"
-								onclick={() => { replyingTo = null; replyBody = ''; replyError = ''; }}
-							>{m.common_cancel()}</Button>
-								<Button
-									variant="default"
-									size="sm"
-									disabled={replyPosting || !replyBody.trim() || replyCharOver}
-									onclick={() => postReply(comment.id)}
-								>
-									{replyPosting ? m.comments_posting() : m.comments_reply()}
-								</Button>
-							</div>
+								disabled={posting || !newBody.trim() || charOver}
+								onclick={postComment}
+							>
+								{posting ? m.comments_posting() : m.comments_submit()}
+							</Button>
 						</div>
 					</div>
-				{/if}
+				</div>
+			{:else}
+				<p class="text-sm text-(--color-muted)">
+					<a href="/login" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.comments_login_link()}</a>
+					{m.comments_login_suffix()}
+				</p>
+			{/if}
+		</div>
 
-					<!-- Replies -->
-					{#if comment.replies && comment.replies.length > 0}
-				<div class="mt-1 flex flex-col gap-2 pl-3 border-l-2 border-(--color-border)/60">
-						{#each comment.replies as reply (reply.id)}
-							{@const replyVote = myVotes[reply.id]}
-							{@const replyVoting = votingIds.has(reply.id)}
-							{@const replyDeleting = deletingIds.has(reply.id)}
-							{@const replyIsOwner = isLoggedIn && currentUserId === reply.user_id}
+		<!-- Comment list -->
+		{#if loading}
+			<div class="flex flex-col gap-3">
+				{#each Array(3) as _}
+					<div class="rounded-lg bg-(--color-surface-2)/50 p-4 animate-pulse">
+						<div class="h-3 w-24 bg-(--color-surface-3) rounded mb-3"></div>
+						<div class="h-3 w-full bg-(--color-surface-3)/60 rounded mb-2"></div>
+						<div class="h-3 w-3/4 bg-(--color-surface-3)/60 rounded"></div>
+					</div>
+				{/each}
+			</div>
+		{:else if loadError}
+			<p class="text-sm text-(--color-danger)">{loadError}</p>
+		{:else}
+			<div class="flex flex-col gap-3">
+				{#each comments as comment (comment.id)}
+					{@const myVote = myVotes[comment.id]}
+					{@const voting = votingIds.has(comment.id)}
+					{@const deleting = deletingIds.has(comment.id)}
+					{@const isOwner = isLoggedIn && currentUserId === comment.user_id}
 
-							<div class="rounded-md bg-(--color-surface-2)/30 px-3 py-2.5 flex flex-col gap-1.5 {replyDeleting ? 'opacity-50' : ''}">
-								<!-- Reply header -->
-								<div class="flex items-center gap-2 flex-wrap">
-									{#if avatarUrls[reply.user_id]}
-										<img src={avatarUrls[reply.user_id]} alt={reply.username} class="w-5 h-5 rounded-full object-cover flex-shrink-0" />
-									{:else}
-										<div class="w-5 h-5 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
-											<span class="text-[8px] font-semibold text-(--color-text) leading-none">{initials(reply.username)}</span>
-										</div>
-									{/if}
-									{#if reply.username}
-									<a href="/users/{reply.username}" class="text-xs font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{reply.username}</a>
-								{:else}
-									<span class="text-xs font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
-								{/if}
-									<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
-									<span class="text-xs text-(--color-muted)">{formatDate(reply.created)}</span>
+					<div class={cn('rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/50 px-4 py-3 flex flex-col gap-2', deleting && 'opacity-50')}>
+						<!-- Header -->
+						<div class="flex items-center gap-2 flex-wrap">
+							{#if avatarUrls[comment.user_id]}
+								<img src={avatarUrls[comment.user_id]} alt={comment.username} class="w-6 h-6 rounded-full object-cover flex-shrink-0" />
+							{:else}
+								<div class="w-6 h-6 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
+									<span class="text-[9px] font-semibold text-(--color-text) leading-none">{initials(comment.username)}</span>
 								</div>
+							{/if}
+							{#if comment.username}
+								<a href="/users/{comment.username}" class="text-sm font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{comment.username}</a>
+							{:else}
+								<span class="text-sm font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+							{/if}
+							<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
+							<span class="text-xs text-(--color-muted)">{formatDate(comment.created)}</span>
+						</div>
 
-								<!-- Reply body -->
-								<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{reply.body}</p>
+						<!-- Body -->
+						<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
 
-								<!-- Reply actions -->
-								<div class="flex items-center gap-3 pt-0.5">
+						<!-- Actions row: votes + reply + delete -->
+						<div class="flex items-center gap-3 pt-1 flex-wrap">
 							<Button
 								variant="ghost"
 								size="sm"
-								class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
-								disabled={replyVoting}
-								onclick={() => vote(reply.id, 'up', comment.id)}
+								class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+								disabled={voting}
+								onclick={() => vote(comment.id, 'up')}
 								title={m.comments_vote_up()}
 							>
-										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
-										</svg>
-										<span class="tabular-nums">{reply.upvotes ?? 0}</span>
-									</Button>
+								<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
+								</svg>
+								<span class="tabular-nums">{comment.upvotes ?? 0}</span>
+							</Button>
 
 							<Button
 								variant="ghost"
 								size="sm"
-								class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
-								disabled={replyVoting}
-								onclick={() => vote(reply.id, 'down', comment.id)}
+								class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
+								disabled={voting}
+								onclick={() => vote(comment.id, 'down')}
 								title={m.comments_vote_down()}
 							>
-										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
-										</svg>
-										<span class="tabular-nums">{reply.downvotes ?? 0}</span>
-									</Button>
+								<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
+								</svg>
+								<span class="tabular-nums">{comment.downvotes ?? 0}</span>
+							</Button>
 
-									{#if replyIsOwner}
+							{#if isLoggedIn}
 								<Button
-										variant="ghost"
-										size="sm"
-										class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
-								disabled={replyDeleting}
-									onclick={() => deleteComment(reply.id, comment.id)}
-									title="Delete reply"
+									variant="ghost"
+									size="sm"
+									class={cn('h-auto px-1 py-0 gap-1 text-xs', replyingTo === comment.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+									onclick={() => {
+										if (replyingTo === comment.id) {
+											replyingTo = null; replyBody = ''; replyError = '';
+										} else {
+											replyingTo = comment.id; replyBody = ''; replyError = '';
+										}
+									}}
 								>
-										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-										</svg>
-										{m.comments_delete()}
-									</Button>
-									{/if}
-								</div>
-								</div>
-							{/each}
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+									</svg>
+									{m.comments_reply()}
+								</Button>
+							{/if}
+
+							{#if isOwner}
+								<Button
+									variant="ghost"
+									size="sm"
+									class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
+									disabled={deleting}
+									onclick={() => deleteComment(comment.id)}
+									title="Delete comment"
+								>
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+									</svg>
+									{m.comments_delete()}
+								</Button>
+							{/if}
 						</div>
-					{/if}
-				</div>
-			{/each}
-		</div>
+
+						<!-- Inline reply form -->
+						{#if replyingTo === comment.id}
+							<div class="mt-1 flex flex-col gap-2 pl-2 border-l-2 border-(--color-border)">
+								<Textarea
+									bind:value={replyBody}
+									placeholder={m.comments_placeholder()}
+									rows={2}
+								/>
+								<div class="flex items-center justify-between gap-2">
+									<span class={cn('text-xs tabular-nums', replyCharOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
+										{replyCharCount}/2000
+									</span>
+									<div class="flex items-center gap-2">
+										{#if replyError}
+											<span class="text-xs text-(--color-danger)">{replyError}</span>
+										{/if}
+										<Button
+											variant="ghost"
+											size="sm"
+											class="text-(--color-muted) hover:text-(--color-text)"
+											onclick={() => { replyingTo = null; replyBody = ''; replyError = ''; }}
+										>{m.common_cancel()}</Button>
+										<Button
+											variant="default"
+											size="sm"
+											disabled={replyPosting || !replyBody.trim() || replyCharOver}
+											onclick={() => postReply(comment.id)}
+										>
+											{replyPosting ? m.comments_posting() : m.comments_reply()}
+										</Button>
+									</div>
+								</div>
+							</div>
+						{/if}
+
+						<!-- Replies -->
+						{#if comment.replies && comment.replies.length > 0}
+							<div class="mt-1 flex flex-col gap-2 pl-3 border-l-2 border-(--color-border)/60">
+								{#each comment.replies as reply (reply.id)}
+									{@const replyVote = myVotes[reply.id]}
+									{@const replyVoting = votingIds.has(reply.id)}
+									{@const replyDeleting = deletingIds.has(reply.id)}
+									{@const replyIsOwner = isLoggedIn && currentUserId === reply.user_id}
+
+									<div class={cn('rounded-md bg-(--color-surface-2)/30 px-3 py-2.5 flex flex-col gap-1.5', replyDeleting && 'opacity-50')}>
+										<div class="flex items-center gap-2 flex-wrap">
+											{#if avatarUrls[reply.user_id]}
+												<img src={avatarUrls[reply.user_id]} alt={reply.username} class="w-5 h-5 rounded-full object-cover flex-shrink-0" />
+											{:else}
+												<div class="w-5 h-5 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
+													<span class="text-[8px] font-semibold text-(--color-text) leading-none">{initials(reply.username)}</span>
+												</div>
+											{/if}
+											{#if reply.username}
+												<a href="/users/{reply.username}" class="text-xs font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{reply.username}</a>
+											{:else}
+												<span class="text-xs font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+											{/if}
+											<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
+											<span class="text-xs text-(--color-muted)">{formatDate(reply.created)}</span>
+										</div>
+
+										<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{reply.body}</p>
+
+										<div class="flex items-center gap-3 pt-0.5">
+											<Button
+												variant="ghost"
+												size="sm"
+												class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+												disabled={replyVoting}
+												onclick={() => vote(reply.id, 'up', comment.id)}
+												title={m.comments_vote_up()}
+											>
+												<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+													<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
+												</svg>
+												<span class="tabular-nums">{reply.upvotes ?? 0}</span>
+											</Button>
+
+											<Button
+												variant="ghost"
+												size="sm"
+												class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
+												disabled={replyVoting}
+												onclick={() => vote(reply.id, 'down', comment.id)}
+												title={m.comments_vote_down()}
+											>
+												<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+													<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
+												</svg>
+												<span class="tabular-nums">{reply.downvotes ?? 0}</span>
+											</Button>
+
+											{#if replyIsOwner}
+												<Button
+													variant="ghost"
+													size="sm"
+													class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
+													disabled={replyDeleting}
+													onclick={() => deleteComment(reply.id, comment.id)}
+													title="Delete reply"
+												>
+													<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+														<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+													</svg>
+													{m.comments_delete()}
+												</Button>
+											{/if}
+										</div>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
 	{/if}
 </div>

ui/src/lib/components/ListeningMode.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { audioStore } from '$lib/audio.svelte';
 	import { cn } from '$lib/utils';
+	import { goto } from '$app/navigation';
 	import type { Voice } from '$lib/types';
 
 	interface Props {
 		/** Called when the user closes the overlay. */
 		onclose: () => void;
+		/** When true, open the chapter picker immediately on mount. */
+		openChapters?: boolean;
 	}
 
-	let { onclose }: Props = $props();
+	let { onclose, openChapters = false }: Props = $props();
 
 	// Voices come from the store (populated by AudioPlayer on mount/play)
 	const voices = $derived(audioStore.voices);
@@ -16,10 +19,99 @@
 	const pocketVoices = $derived(voices.filter((v) => v.engine === 'pocket-tts'));
 	const cfaiVoices   = $derived(voices.filter((v) => v.engine === 'cfai'));
 
-	let showVoicePanel = $state(false);
+	let showVoiceModal = $state(false);
+	// svelte-ignore state_referenced_locally
+	let showChapterModal = $state(openChapters && audioStore.chapters.length > 0);
+	let voiceSearch = $state('');
 	let samplePlayingVoice = $state<string | null>(null);
 	let sampleAudio: HTMLAudioElement | null = null;
 
+	// ── Pull-down-to-dismiss gesture ─────────────────────────────────────────
+	let dragY = $state(0);
+	let isDragging = $state(false);
+	let dragStartY = 0;
+	let dragStartTime = 0;
+	let overlayEl = $state<HTMLDivElement | null>(null);
+
+	// Register ontouchmove with passive:false so e.preventDefault() works.
+	// Svelte 5 does not support the |nonpassive modifier, so we use $effect.
+	$effect(() => {
+		if (!overlayEl) return;
+		overlayEl.addEventListener('touchmove', onTouchMove, { passive: false });
+		return () => overlayEl!.removeEventListener('touchmove', onTouchMove);
+	});
+
+	function onTouchStart(e: TouchEvent) {
+		// Don't hijack touches that start inside a scrollable element
+		const target = e.target as Element;
+		if (target.closest('.overflow-y-auto')) return;
+		// Don't activate if a modal is open (they handle their own scroll)
+		if (showVoiceModal || showChapterModal) return;
+
+		isDragging = true;
+		dragStartY = e.touches[0].clientY;
+		dragStartTime = Date.now();
+		dragY = 0;
+	}
+
+	function onTouchMove(e: TouchEvent) {
+		if (!isDragging) return;
+		const delta = e.touches[0].clientY - dragStartY;
+		// Only track downward movement
+		if (delta > 0) {
+			dragY = delta;
+			// Prevent page scroll while dragging the overlay down
+			e.preventDefault();
+		} else {
+			dragY = 0;
+		}
+	}
+
+	function onTouchEnd() {
+		if (!isDragging) return;
+		isDragging = false;
+
+		const elapsed = Date.now() - dragStartTime;
+		const velocity = dragY / Math.max(elapsed, 1); // px/ms
+
+		// Dismiss if dragged far enough (>130px) or flicked fast enough (>0.4px/ms)
+		if (dragY > 130 || velocity > 0.4) {
+			// Animate out: snap to bottom then close
+			dragY = window.innerHeight;
+			setTimeout(onclose, 220);
+		} else {
+			// Spring back to 0
+			dragY = 0;
+		}
+	}
+
+	// ── Voice search filtering ────────────────────────────────────────────────
+	const voiceSearchLower = $derived(voiceSearch.toLowerCase());
+	const filteredKokoro = $derived(kokoroVoices.filter((v) => voiceLabel(v).toLowerCase().includes(voiceSearchLower)));
+	const filteredPocket = $derived(pocketVoices.filter((v) => voiceLabel(v).toLowerCase().includes(voiceSearchLower)));
+	const filteredCfai   = $derived(cfaiVoices.filter((v) => voiceLabel(v).toLowerCase().includes(voiceSearchLower)));
+
+	// ── Chapter search ────────────────────────────────────────────────────────
+	let chapterSearch = $state('');
+
+	// Scroll the current chapter into view instantly (no animation) when the
+	// chapter modal opens. Applied to every chapter button; only scrolls when
+	// the chapter number matches the currently playing one. Runs once on mount
+	// before the browser paints so no scroll animation is ever visible.
+	function scrollIfActive(node: HTMLElement, isActive: boolean) {
+		if (isActive) node.scrollIntoView({ block: 'center', behavior: 'instant' });
+	}
+	const filteredChapters = $derived(
+		chapterSearch.trim() === ''
+			? audioStore.chapters
+			: audioStore.chapters.filter((ch) =>
+					(ch.title || `Chapter ${ch.number}`)
+						.toLowerCase()
+						.includes(chapterSearch.toLowerCase()) ||
+					String(ch.number).includes(chapterSearch)
+			  )
+	);
+
 	function voiceLabel(v: Voice | string): string {
 		if (typeof v === 'string') {
 			const found = voices.find((x) => x.id === v);
@@ -60,7 +152,15 @@
 	function selectVoice(voiceId: string) {
 		stopSample();
 		audioStore.voice = voiceId;
-		showVoicePanel = false;
+		showVoiceModal = false;
+		voiceSearch = '';
+	}
+
+	// ── Chapter click-to-play ─────────────────────────────────────────────────
+	function playChapter(chapterNumber: number) {
+		audioStore.autoStartChapter = chapterNumber;
+		onclose();
+		goto(`/books/${audioStore.slug}/chapters/${chapterNumber}`);
 	}
 
 	// ── Speed ────────────────────────────────────────────────────────────────
@@ -134,7 +234,8 @@
 	$effect(() => {
 		function onKey(e: KeyboardEvent) {
 			if (e.key === 'Escape') {
-				if (showVoicePanel) { showVoicePanel = false; }
+				if (showChapterModal) { showChapterModal = false; }
+				else if (showVoiceModal) { showVoiceModal = false; voiceSearch = ''; }
 				else { onclose(); }
 			}
 		}
@@ -146,123 +247,262 @@
 <!-- Full-screen listening mode overlay -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
+	bind:this={overlayEl}
 	class="fixed inset-0 z-60 flex flex-col overflow-hidden"
-	style="background: var(--color-surface);"
+	style="
+		background: var(--color-surface);
+		transform: translateY({dragY}px);
+		opacity: {Math.max(0, 1 - dragY / 500)};
+		transition: {isDragging ? 'none' : 'transform 0.32s cubic-bezier(0.32,0.72,0,1), opacity 0.32s ease'};
+		will-change: transform;
+		touch-action: pan-x;
+		pointer-events: auto;
+	"
+	ontouchstart={onTouchStart}
+	ontouchend={onTouchEnd}
 >
-	<!-- Blurred cover background -->
-	{#if audioStore.cover}
+
+	<!-- ── Full-bleed cover hero (top ~50% of screen) ────────────────────── -->
+	<div class="relative w-full shrink-0" style="height: 52svh; min-height: 220px; max-height: 380px;">
+		{#if audioStore.cover}
+			<!-- Full-bleed cover image -->
+			<img
+				src={audioStore.cover}
+				alt=""
+				class="absolute inset-0 w-full h-full object-cover"
+			/>
+		{:else}
+			<!-- Fallback when no cover -->
+			<div class="absolute inset-0 flex items-center justify-center bg-(--color-surface-2)">
+				<svg class="w-20 h-20 text-(--color-muted)/30" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V6h8v2z"/>
+				</svg>
+			</div>
+		{/if}
+		<!-- Top gradient: surface → transparent (for header legibility) -->
 		<div
-			class="absolute inset-0 bg-cover bg-center opacity-10 blur-2xl scale-110"
-			style="background-image: url('{audioStore.cover}');"
+			class="absolute inset-x-0 top-0 h-28 pointer-events-none"
+			style="background: linear-gradient(to bottom, var(--color-surface) 0%, transparent 100%);"
+			aria-hidden="true"
+		></div>
+		<!-- Bottom gradient: transparent → surface (seamless blend into controls) -->
+		<div
+			class="absolute inset-x-0 bottom-0 h-40 pointer-events-none"
+			style="background: linear-gradient(to top, var(--color-surface) 0%, transparent 100%);"
 			aria-hidden="true"
 		></div>
-	{/if}
 
-	<!-- Header bar -->
-	<div class="relative flex items-center justify-between px-4 py-3 shrink-0">
-		<button
-			type="button"
-			onclick={onclose}
-			class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
-			aria-label="Close listening mode"
-		>
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-			</svg>
-		</button>
-		<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Now Playing</span>
-		<!-- Voice selector button -->
-		<button
-			type="button"
-			onclick={() => (showVoicePanel = !showVoicePanel)}
-			class={cn(
-				'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
-				showVoicePanel
-					? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-					: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
-			)}
-		>
-			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
-			</svg>
-			<span class="max-w-[80px] truncate">{voiceLabel(audioStore.voice)}</span>
-		</button>
-	</div>
-
-	<!-- Voice panel (inline dropdown below header) -->
-	{#if showVoicePanel && voices.length > 0}
-		<div class="relative mx-4 mb-2 bg-(--color-surface-2) border border-(--color-border) rounded-xl p-3 z-10 overflow-y-auto max-h-56 shrink-0">
-			<div class="flex items-center justify-between mb-2">
-				<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider">Select Voice</p>
-				<button type="button" onclick={() => { stopSample(); showVoicePanel = false; }} class="text-(--color-muted) hover:text-(--color-text) transition-colors" aria-label="Close voice panel">
+		<!-- Header bar (sits over the top gradient) -->
+		<div class="relative z-10 flex items-center justify-between px-4 pt-3 pb-2">
+			<button
+				type="button"
+				onclick={onclose}
+				class="p-2 rounded-full text-(--color-text)/70 hover:text-(--color-text) hover:bg-black/20 transition-colors"
+				aria-label="Close listening mode"
+			>
+				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+				</svg>
+			</button>
+			<span class="text-xs font-semibold text-(--color-text)/60 uppercase tracking-wider">Now Playing</span>
+			<div class="flex items-center gap-2">
+				<!-- Chapters button -->
+				{#if audioStore.chapters.length > 0}
+					<button
+						type="button"
+						onclick={() => { showChapterModal = !showChapterModal; showVoiceModal = false; voiceSearch = ''; }}
+						class={cn(
+							'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
+							showChapterModal
+								? 'border-(--color-brand) bg-(--color-brand)/15 text-(--color-brand)'
+								: 'border-white/20 bg-black/25 text-(--color-text)/70 hover:text-(--color-text) backdrop-blur-sm'
+						)}
+						aria-label="Browse chapters"
+					>
+						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/>
+						</svg>
+						Chapters
+					</button>
+				{/if}
+				<!-- Voice selector button -->
+				<button
+					type="button"
+					onclick={() => { showVoiceModal = !showVoiceModal; showChapterModal = false; }}
+					class={cn(
+						'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
+						showVoiceModal
+							? 'border-(--color-brand) bg-(--color-brand)/15 text-(--color-brand)'
+							: 'border-white/20 bg-black/25 text-(--color-text)/70 hover:text-(--color-text) backdrop-blur-sm'
+					)}
+				>
 					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
 					</svg>
+					<span class="max-w-[80px] truncate">{voiceLabel(audioStore.voice)}</span>
 				</button>
 			</div>
-			{#each ([['Kokoro', kokoroVoices], ['Pocket TTS', pocketVoices], ['CF AI', cfaiVoices]] as [string, Voice[]][]) as [label, group]}
-				{#if group.length > 0}
-					<p class="text-[10px] text-(--color-muted) opacity-60 mb-1 mt-2 first:mt-0">{label}</p>
-					<div class="flex flex-wrap gap-1.5">
+		</div>
+
+		<!-- Track info (sits over the bottom gradient) -->
+		<div class="absolute inset-x-0 bottom-0 z-10 px-6 pb-3 text-center">
+			{#if audioStore.chapter > 0}
+				<p class="text-[10px] font-bold uppercase tracking-widest text-(--color-brand) mb-0.5">
+					Chapter {audioStore.chapter}
+				</p>
+			{/if}
+			<p class="text-lg font-bold text-(--color-text) leading-snug line-clamp-2">
+				{audioStore.chapterTitle || (audioStore.chapter > 0 ? `Chapter ${audioStore.chapter}` : '')}
+			</p>
+			<p class="text-sm text-(--color-text)/50 mt-0.5 truncate">{audioStore.bookTitle}</p>
+		</div>
+	</div>
+
+	<!-- Voice modal (full-screen overlay) -->
+	{#if showVoiceModal && voices.length > 0}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 z-70 flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<!-- Modal header -->
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+				<button
+					type="button"
+					onclick={() => { stopSample(); showVoiceModal = false; voiceSearch = ''; }}
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					aria-label="Close voice picker"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+					</svg>
+				</button>
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Select Voice</span>
+			</div>
+			<!-- Search input -->
+			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+				<div class="relative">
+					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+					</svg>
+					<input
+						type="search"
+						placeholder="Search voices…"
+						bind:value={voiceSearch}
+						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+					/>
+				</div>
+			</div>
+			<!-- Voice list -->
+			<div class="flex-1 overflow-y-auto">
+				{#each ([['Kokoro', filteredKokoro], ['Pocket TTS', filteredPocket], ['CF AI', filteredCfai]] as [string, Voice[]][]) as [label, group]}
+					{#if group.length > 0}
+						<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider px-4 py-2 sticky top-0 bg-(--color-surface) border-b border-(--color-border)/50">{label}</p>
 						{#each group as v (v.id)}
-							<div class="flex items-center rounded-lg border overflow-hidden text-xs
-								{audioStore.voice === v.id
-									? 'border-(--color-brand) bg-(--color-brand)/10'
-									: 'border-(--color-border) bg-(--color-surface-3)'}">
+							<div
+								class={cn(
+									'flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors',
+									audioStore.voice === v.id ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
+								)}
+							>
+								<button type="button" onclick={() => selectVoice(v.id)} class="flex-1 flex items-center gap-3 text-left">
+									<span class={cn(
+										'w-4 h-4 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors',
+										audioStore.voice === v.id ? 'border-(--color-brand) bg-(--color-brand)' : 'border-(--color-border)'
+									)}>
+										{#if audioStore.voice === v.id}
+											<svg class="w-2 h-2 text-(--color-surface)" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+										{/if}
+									</span>
+									<span class={cn('text-sm', audioStore.voice === v.id ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)')}>{voiceLabel(v)}</span>
+								</button>
 								<button
 									type="button"
-									onclick={() => selectVoice(v.id)}
-									class="px-2 py-1 font-medium transition-colors
-										{audioStore.voice === v.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)'}"
-								>{voiceLabel(v)}</button>
-								<button
-									type="button"
-									onclick={(e) => { e.stopPropagation(); playSample(v.id); }}
-									class="px-1.5 py-1 border-l border-(--color-border) transition-colors
-										{samplePlayingVoice === v.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)'}"
+									onclick={() => playSample(v.id)}
+									class={cn('shrink-0 p-2 rounded-full transition-colors', samplePlayingVoice === v.id ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)')}
 									title={samplePlayingVoice === v.id ? 'Stop sample' : 'Play sample'}
+									aria-label={samplePlayingVoice === v.id ? 'Stop sample' : 'Play sample'}
 								>
 									{#if samplePlayingVoice === v.id}
-										<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+										<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
 									{:else}
-										<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+										<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
 									{/if}
 								</button>
 							</div>
 						{/each}
-					</div>
+					{/if}
+				{/each}
+				{#if filteredKokoro.length === 0 && filteredPocket.length === 0 && filteredCfai.length === 0}
+					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No voices match "{voiceSearch}"</p>
 				{/if}
-			{/each}
+			</div>
 		</div>
 	{/if}
 
-	<!-- Scrollable body -->
-	<div class="relative flex-1 overflow-y-auto flex flex-col">
-
-		<!-- Cover art + track info -->
-		<div class="flex flex-col items-center px-8 pt-4 pb-6 shrink-0">
-			{#if audioStore.cover}
-				<img
-					src={audioStore.cover}
-					alt=""
-					class="w-40 h-56 object-cover rounded-xl shadow-2xl mb-5"
-				/>
-			{:else}
-				<div class="w-40 h-56 flex items-center justify-center bg-(--color-surface-2) rounded-xl shadow-2xl mb-5 border border-(--color-border)">
-					<svg class="w-16 h-16 text-(--color-muted)/40" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V6h8v2z"/>
+	<!-- Chapter modal (full-screen overlay) -->
+	{#if showChapterModal && audioStore.chapters.length > 0}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="absolute inset-0 z-70 flex flex-col" style="background: var(--color-surface);">
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+				<button
+					type="button"
+					onclick={() => { showChapterModal = false; }}
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					aria-label="Close chapter picker"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
 					</svg>
+				</button>
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Chapters</span>
+			</div>
+			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+				<div class="relative">
+					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+					</svg>
+					<input
+						type="search"
+						placeholder="Search chapters…"
+						bind:value={chapterSearch}
+						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+					/>
 				</div>
-			{/if}
-
-			<p class="text-base font-bold text-(--color-text) text-center leading-snug">
-				{audioStore.chapterTitle || (audioStore.chapter > 0 ? `Chapter ${audioStore.chapter}` : '')}
-			</p>
-			<p class="text-sm text-(--color-muted) text-center mt-0.5 truncate max-w-full">{audioStore.bookTitle}</p>
+			</div>
+			<div class="flex-1 overflow-y-auto">
+				{#each filteredChapters as ch (ch.number)}
+					<button
+						type="button"
+						onclick={() => playChapter(ch.number)}
+						use:scrollIfActive={ch.number === audioStore.chapter}
+						class={cn(
+							'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
+							ch.number === audioStore.chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
+						)}
+					>
+						<span class={cn(
+							'w-8 h-8 shrink-0 rounded-full border-2 flex items-center justify-center tabular-nums text-xs font-semibold transition-colors',
+							ch.number === audioStore.chapter ? 'border-(--color-brand) bg-(--color-brand) text-(--color-surface)' : 'border-(--color-border) text-(--color-muted)'
+						)}>{ch.number}</span>
+						<span class={cn('flex-1 text-sm truncate', ch.number === audioStore.chapter ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)')}>{ch.title || `Chapter ${ch.number}`}</span>
+						{#if ch.number === audioStore.chapter}
+							<svg class="w-4 h-4 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+						{/if}
+					</button>
+				{/each}
+				{#if filteredChapters.length === 0}
+					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
+				{/if}
+			</div>
 		</div>
+	{/if}
+
+	<!-- ── Controls area (bottom half) ───────────────────────────────────── -->
+	<div class="flex-1 flex flex-col justify-end px-6 pb-6 gap-0 shrink-0 overflow-hidden">
 
 		<!-- Seek bar -->
-		<div class="px-6 shrink-0">
+		<div class="shrink-0 mb-1">
 			<input
 				type="range"
 				aria-label="Seek"
@@ -270,22 +510,26 @@
 				max={audioStore.duration || 0}
 				value={audioStore.currentTime}
 				oninput={seek}
-				class="w-full h-1.5 accent-[--color-brand] cursor-pointer block"
+				class="w-full h-1.5 cursor-pointer block"
 				style="accent-color: var(--color-brand);"
 			/>
 			<div class="flex justify-between text-xs text-(--color-muted) tabular-nums mt-1">
 				<span>{formatTime(audioStore.currentTime)}</span>
+				<!-- Remaining time in centre -->
+				{#if audioStore.duration > 0}
+					<span class="text-(--color-muted)/60">−{formatTime(Math.max(0, audioStore.duration - audioStore.currentTime))}</span>
+				{/if}
 				<span>{formatTime(audioStore.duration)}</span>
 			</div>
 		</div>
 
 		<!-- Transport controls -->
-		<div class="flex items-center justify-center gap-4 px-6 pt-5 pb-2 shrink-0">
-			<!-- Prev chapter -->
+		<div class="flex items-center justify-between pt-3 pb-4 shrink-0">
+			<!-- Prev chapter — smaller, clearly secondary -->
 			{#if audioStore.chapter > 1 && audioStore.slug}
 				<a
 					href="/books/{audioStore.slug}/chapters/{audioStore.chapter - 1}"
-					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					class="p-2 rounded-full text-(--color-muted)/60 hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
 					title="Previous chapter"
 					aria-label="Previous chapter"
 				>
@@ -297,7 +541,7 @@
 				<div class="w-9 h-9"></div>
 			{/if}
 
-			<!-- Skip back 15s -->
+			<!-- Skip back 15s — medium -->
 			<button
 				type="button"
 				onclick={skipBack}
@@ -305,31 +549,32 @@
 				aria-label="Skip back 15 seconds"
 				title="Back 15s"
 			>
-				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+				<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
 					<text x="8.5" y="14.5" font-size="5" font-family="sans-serif" font-weight="bold" fill="currentColor">15</text>
 				</svg>
 			</button>
 
-			<!-- Play / Pause -->
+			<!-- Play / Pause — largest, centred -->
 			<button
 				type="button"
 				onclick={togglePlay}
-				class="w-16 h-16 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) transition-colors shadow-lg"
+				class="w-18 h-18 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) transition-colors shadow-xl"
+				style="width: 4.5rem; height: 4.5rem;"
 				aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
 			>
 				{#if audioStore.isPlaying}
-					<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
+					<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
 						<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
 					</svg>
 				{:else}
-					<svg class="w-7 h-7 ml-1" fill="currentColor" viewBox="0 0 24 24">
+					<svg class="w-8 h-8 ml-1" fill="currentColor" viewBox="0 0 24 24">
 						<path d="M8 5v14l11-7z"/>
 					</svg>
 				{/if}
 			</button>
 
-			<!-- Skip forward 30s -->
+			<!-- Skip forward 30s — medium -->
 			<button
 				type="button"
 				onclick={skipForward}
@@ -337,17 +582,17 @@
 				aria-label="Skip forward 30 seconds"
 				title="Forward 30s"
 			>
-				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+				<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/>
 					<text x="8.5" y="14.5" font-size="5" font-family="sans-serif" font-weight="bold" fill="currentColor">30</text>
 				</svg>
 			</button>
 
-			<!-- Next chapter -->
+			<!-- Next chapter — smaller, clearly secondary -->
 			{#if audioStore.nextChapter !== null && audioStore.slug}
 				<a
 					href="/books/{audioStore.slug}/chapters/{audioStore.nextChapter}"
-					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					class="p-2 rounded-full text-(--color-muted)/60 hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
 					title="Next chapter"
 					aria-label="Next chapter"
 				>
@@ -360,10 +605,10 @@
 			{/if}
 		</div>
 
-		<!-- Secondary controls: Speed · Auto-next · Sleep -->
-		<div class="flex items-center justify-center gap-3 px-6 py-3 shrink-0">
-			<!-- Speed -->
-			<div class="flex items-center gap-1 bg-(--color-surface-2) rounded-full px-2 py-1 border border-(--color-border)">
+		<!-- Secondary controls: unified single row — Speed · Auto · Sleep -->
+		<div class="flex items-center justify-center gap-2 shrink-0">
+			<!-- Speed — segmented pill -->
+			<div class="flex items-center gap-0.5 bg-(--color-surface-2) rounded-full px-1.5 py-1 border border-(--color-border)">
 				{#each SPEED_OPTIONS as s}
 					<button
 						type="button"
@@ -379,7 +624,7 @@
 				{/each}
 			</div>
 
-			<!-- Auto-next -->
+			<!-- Auto-next pill -->
 			<button
 				type="button"
 				onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
@@ -403,7 +648,7 @@
 				{/if}
 			</button>
 
-			<!-- Sleep timer -->
+			<!-- Sleep timer pill -->
 			<button
 				type="button"
 				onclick={cycleSleepTimer}
@@ -422,30 +667,5 @@
 			</button>
 		</div>
 
-		<!-- Chapter list -->
-		{#if audioStore.chapters.length > 0}
-			<div class="mx-4 mb-6 bg-(--color-surface-2) rounded-xl border border-(--color-border) overflow-hidden shrink-0">
-				<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider px-4 py-2.5 border-b border-(--color-border)">Chapters</p>
-				<div class="overflow-y-auto max-h-64">
-					{#each audioStore.chapters as ch (ch.number)}
-						<a
-							href="/books/{audioStore.slug}/chapters/{ch.number}"
-							onclick={onclose}
-							class="flex items-center gap-3 px-4 py-2.5 text-xs transition-colors hover:bg-(--color-surface-3)
-								{ch.number === audioStore.chapter ? 'text-(--color-brand) font-semibold bg-(--color-brand)/5' : 'text-(--color-muted)'}"
-						>
-							<span class="tabular-nums w-7 shrink-0 text-right opacity-50">{ch.number}</span>
-							<span class="flex-1 truncate">{ch.title || `Chapter ${ch.number}`}</span>
-							{#if ch.number === audioStore.chapter}
-								<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M8 5v14l11-7z"/>
-								</svg>
-							{/if}
-						</a>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
 	</div>
 </div>

ui/src/lib/server/cache.ts

@@ -20,7 +20,8 @@ function client(): Redis {
 		_client = new Redis(url, {
 			lazyConnect: false,
 			enableOfflineQueue: true,
-			maxRetriesPerRequest: 2
+			maxRetriesPerRequest: 1,
+			connectTimeout: 1500
 		});
 		_client.on('error', (err: Error) => {
 			console.error('[cache] Valkey error:', err.message);

ui/src/lib/server/pocketbase.ts

@@ -100,8 +100,8 @@ export interface User {
 let _token = '';
 let _tokenExp = 0;
 
-async function getToken(): Promise<string> {
-	if (_token && Date.now() < _tokenExp) return _token;
+async function getToken(forceRefresh = false): Promise<string> {
+	if (!forceRefresh && _token && Date.now() < _tokenExp) return _token;
 
 	log.debug('pocketbase', 'authenticating with admin credentials', { url: PB_URL, email: PB_EMAIL });
 
@@ -119,7 +119,9 @@ async function getToken(): Promise<string> {
 
 	const data = await res.json();
 	_token = data.token as string;
-	_tokenExp = Date.now() + 12 * 60 * 60 * 1000; // 12 hours
+	// PocketBase superuser tokens expire in ~1 hour by default.
+	// Cache for 50 minutes to stay safely within that window.
+	_tokenExp = Date.now() + 50 * 60 * 1000;
 	log.info('pocketbase', 'admin auth token refreshed', { url: PB_URL });
 	return _token;
 }
@@ -132,6 +134,18 @@ async function pbGet<T>(path: string): Promise<T> {
 		headers: { Authorization: `Bearer ${token}` }
 	});
 	if (!res.ok) {
+		// On 401/403, the token may have expired on the PocketBase side even if
+		// our local TTL hasn't fired yet. Force a refresh and retry once.
+		if (res.status === 401 || res.status === 403) {
+			const freshToken = await getToken(true);
+			const retry = await fetch(`${PB_URL}${path}`, {
+				headers: { Authorization: `Bearer ${freshToken}` }
+			});
+			if (retry.ok) return retry.json() as Promise<T>;
+			const retryBody = await retry.text().catch(() => '');
+			log.error('pocketbase', 'GET failed', { path, status: retry.status, body: retryBody });
+			throw new Error(`PocketBase GET ${path} failed: ${retry.status} — ${retryBody}`);
+		}
 		const body = await res.text().catch(() => '');
 		log.error('pocketbase', 'GET failed', { path, status: res.status, body });
 		throw new Error(`PocketBase GET ${path} failed: ${res.status} — ${body}`);
@@ -317,10 +331,46 @@ export async function invalidateBooksCache(): Promise<void> {
 		cache.invalidate(BOOKS_CACHE_KEY),
 		cache.invalidate(HOME_STATS_CACHE_KEY),
 		cache.invalidatePattern('books:recent:*'),
-		cache.invalidatePattern('books:recently-updated:*')
+		cache.invalidatePattern('books:recently-updated:*'),
+		cache.invalidatePattern('books:trending:*'),
+		cache.invalidatePattern('books:recs:*')
 	]);
 }
 
+/** Books sorted by ranking (lower = more popular). Excludes unranked (ranking=0). */
+export async function getTrendingBooks(limit = 8): Promise<Book[]> {
+	const key = `books:trending:${limit}`;
+	const cached = await cache.get<Book[]>(key);
+	if (cached) return cached;
+	const books = await listN<Book>('books', limit, 'ranking>0', '+ranking');
+	await cache.set(key, books, 15 * 60);
+	return books;
+}
+
+/**
+ * Books matching the given genres that the user hasn't read yet.
+ * The raw genre-query result is cached (shared across users); per-user slug
+ * exclusion is applied in memory afterwards.
+ */
+export async function getRecommendedBooks(
+	topGenres: string[],
+	excludeSlugs: Set<string>,
+	limit = 8
+): Promise<Book[]> {
+	if (topGenres.length === 0) return [];
+	const sortedGenres = [...topGenres].sort();
+	const key = `books:recs:${sortedGenres.join(':')}:${limit}`;
+	let books = await cache.get<Book[]>(key);
+	if (!books) {
+		const genreFilter = sortedGenres
+			.map((g) => `genres~"${g.replace(/"/g, '')}"`)
+			.join('||');
+		books = await listN<Book>('books', limit * 4, genreFilter, '+ranking');
+		await cache.set(key, books, 10 * 60);
+	}
+	return books.filter((b) => !excludeSlugs.has(b.slug)).slice(0, limit);
+}
+
 export async function getBook(slug: string): Promise<Book | null> {
 	return listOne<Book>('books', `slug="${slug}"`);
 }
@@ -1108,12 +1158,14 @@ export interface UserSession {
 }
 
 /**
- * Generate a short device fingerprint from user-agent + IP.
- * SHA-256 of the concatenation, first 16 hex chars.
+ * Generate a short device fingerprint from the user-agent alone.
+ * IP is intentionally excluded so that network changes (VPN, mobile data,
+ * home vs. office wifi) don't create duplicate sessions for the same device.
+ * SHA-256 of the user-agent string, first 16 hex chars.
  */
-function deviceFingerprint(userAgent: string, ip: string): string {
+function deviceFingerprint(userAgent: string, _ip?: string): string {
 	return createHash('sha256')
-		.update(`${userAgent}::${ip}`)
+		.update(userAgent)
 		.digest('hex')
 		.slice(0, 16);
 }
@@ -1140,12 +1192,13 @@ export async function upsertUserSession(
 	);
 
 	if (existing) {
-		// Touch last_seen and return the existing authSessionId
+		// Touch last_seen and update IP (may have changed due to network switch).
+		// Return the existing authSessionId so no new session row is created.
 		const token = await getToken();
 		await fetch(`${PB_URL}/api/collections/user_sessions/records/${existing.id}`, {
 			method: 'PATCH',
 			headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
-			body: JSON.stringify({ last_seen: new Date().toISOString() })
+			body: JSON.stringify({ last_seen: new Date().toISOString(), ip })
 		}).catch(() => {});
 		return { authSessionId: existing.session_id, recordId: existing.id };
 	}

ui/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import '../app.css';
 	import { page, navigating } from '$app/state';
 	import { goto } from '$app/navigation';
-	import { setContext } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
@@ -12,6 +12,7 @@
 	import * as m from '$lib/paraglide/messages.js';
 	import { locales, getLocale } from '$lib/paraglide/runtime.js';
 	import ListeningMode from '$lib/components/ListeningMode.svelte';
+	import { fly } from 'svelte/transition';
 
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 
@@ -33,21 +34,16 @@
 	];
 
 	// Chapter list drawer state for the mini-player
-	let chapterDrawerOpen = $state(false);
-	let activeChapterEl = $state<HTMLElement | null>(null);
 	let listeningModeOpen = $state(false);
+	let listeningModeChapters = $state(false);
 
-	function setIfActive(node: HTMLElement, isActive: boolean) {
-		if (isActive) activeChapterEl = node;
-		return {
-			update(nowActive: boolean) { if (nowActive) activeChapterEl = node; },
-			destroy() { if (activeChapterEl === node) activeChapterEl = null; }
-		};
-	}
+	// Build time formatted in the user's local timezone (populated on mount so
+	// SSR and CSR don't produce a mismatch — SSR renders nothing, hydration fills it in).
+	let buildTimeLocal = $state('');
 
 	$effect(() => {
-		if (chapterDrawerOpen && activeChapterEl) {
-			activeChapterEl.scrollIntoView({ block: 'center' });
+		if (env.PUBLIC_BUILD_TIME && env.PUBLIC_BUILD_TIME !== 'unknown') {
+			buildTimeLocal = new Date(env.PUBLIC_BUILD_TIME).toLocaleString();
 		}
 	});
 
@@ -161,15 +157,23 @@
 	});
 
 	// Handle toggle requests from AudioPlayer controller.
+	// IMPORTANT: isPlaying must be read inside untrack() so the effect only
+	// re-runs when toggleRequest increments, not every time isPlaying changes.
+	// Without untrack the effect subscribes to both toggleRequest AND isPlaying,
+	// causing an infinite play/pause loop: play() fires onplay → isPlaying=true
+	// → effect re-runs → sees isPlaying=true → calls pause() → onpause fires
+	// → isPlaying=false → effect re-runs → calls play() → …
 	$effect(() => {
 		// Read toggleRequest to subscribe; ignore value 0 (initial).
 		const _req = audioStore.toggleRequest;
 		if (!audioEl || _req === 0) return;
-		if (audioStore.isPlaying) {
-			audioEl.pause();
-		} else {
-			audioEl.play().catch(() => {});
-		}
+		untrack(() => {
+			if (audioStore.isPlaying) {
+				audioEl!.pause();
+			} else {
+				audioEl!.play().catch(() => {});
+			}
+		});
 	});
 
 	// Handle seek requests from AudioPlayer controller.
@@ -258,6 +262,11 @@
 		}, 2000) as unknown as number;
 	}
 
+	function formatDuration(s: number): string {
+		if (!isFinite(s) || s <= 0) return '--:--';
+		return formatTime(s);
+	}
+
 	function formatTime(s: number): string {
 		if (!isFinite(s) || s < 0) return '0:00';
 		const m = Math.floor(s / 60);
@@ -381,9 +390,12 @@
 			</a>
 
 			{#if page.data.book?.title && /\/books\/[^/]+\/chapters\//.test(page.url.pathname)}
-				<span class="text-(--color-muted) text-sm truncate min-w-0 flex-1 sm:flex-none sm:max-w-xs">
+				<a
+					href="/books/{page.data.book.slug}"
+					class="text-(--color-muted) hover:text-(--color-text) text-sm truncate min-w-0 flex-1 sm:flex-none sm:max-w-xs transition-colors"
+				>
 					{page.data.book.title}
-				</span>
+				</a>
 			{/if}
 
 			{#if data.user}
@@ -710,7 +722,9 @@
 		{/key}
 	</main>
 
-	<footer class="border-t border-(--color-border) mt-auto">
+	<footer class="border-t border-(--color-border) mt-auto"
+		class:hidden={/\/books\/[^/]+\/chapters\//.test(page.url.pathname)}
+	>
 		<div class="max-w-6xl mx-auto px-4 py-6 flex flex-col items-center gap-4 text-xs text-(--color-muted)">
 			<!-- Top row: site links -->
 			<nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
@@ -750,10 +764,9 @@
 		</div>
 		<!-- Build version / commit SHA / build time -->
 		{#snippet buildTime()}
-			{#if env.PUBLIC_BUILD_TIME && env.PUBLIC_BUILD_TIME !== 'unknown'}
-				{@const d = new Date(env.PUBLIC_BUILD_TIME)}
+			{#if buildTimeLocal}
 				<span class="text-(--color-muted)" title="Build time">
-					· {d.toUTCString().replace(' GMT', ' UTC').replace(/:\d\d /, ' ')}
+					· {buildTimeLocal}
 				</span>
 			{/if}
 		{/snippet}
@@ -778,52 +791,6 @@
 {#if audioStore.active}
 	<div class="fixed bottom-0 left-0 right-0 z-50 bg-(--color-surface) border-t border-(--color-border) shadow-2xl">
 
-		<!-- Chapter list drawer (slides up above the mini-bar) -->
-		{#if chapterDrawerOpen && audioStore.chapters.length > 0}
-			<div class="border-b border-(--color-border) bg-(--color-surface) flex justify-center md:justify-end md:pr-4">
-				<div class="w-full md:w-80 flex flex-col max-h-72">
-					<!-- Sticky header -->
-					<div class="flex items-center justify-between px-4 py-2 border-b border-(--color-border) shrink-0">
-						<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">{m.player_chapters()}</span>
-						<Button
-							variant="ghost"
-							size="icon"
-							onclick={() => (chapterDrawerOpen = false)}
-							aria-label={m.player_close_chapter_list()}
-							class="h-6 w-6 text-(--color-muted) hover:text-(--color-text)"
-						>
-							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-							</svg>
-						</Button>
-					</div>
-					<!-- Scrollable list -->
-					<div class="overflow-y-auto px-4">
-						{#each audioStore.chapters as ch (ch.number)}
-							<a
-								use:setIfActive={ch.number === audioStore.chapter}
-								href="/books/{audioStore.slug}/chapters/{ch.number}"
-								onclick={() => (chapterDrawerOpen = false)}
-								class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-(--color-text) {ch.number === audioStore.chapter
-									? 'text-(--color-brand) font-semibold'
-									: 'text-(--color-muted)'}"
-							>
-								<span class="tabular-nums text-(--color-muted) opacity-60 w-8 shrink-0 text-right">
-									{ch.number}
-								</span>
-								<span class="truncate">{ch.title || m.player_chapter_n({ n: String(ch.number) })}</span>
-								{#if ch.number === audioStore.chapter}
-									<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-										<path d="M8 5v14l11-7z"/>
-									</svg>
-								{/if}
-							</a>
-						{/each}
-					</div>
-				</div>
-			</div>
-		{/if}
-
 		<!-- Generation progress bar (sits at very top of the bar) -->
 		{#if audioStore.status === 'generating' || audioStore.status === 'loading'}
 			<div class="h-0.5 bg-(--color-surface-2)">
@@ -850,26 +817,23 @@
 
 		<div class="max-w-6xl mx-auto px-4 py-2 flex items-center gap-3">
 
-		<!-- Track info (click to open chapter list drawer) -->
+		<!-- Track info (click to open chapter list in listening mode) -->
 			<button
 				class="flex-1 min-w-0 text-left rounded px-1 -ml-1 hover:bg-(--color-surface-2) transition-colors"
-				onclick={() => { if (audioStore.chapters.length > 0) chapterDrawerOpen = !chapterDrawerOpen; }}
+				onclick={() => { if (audioStore.chapters.length > 0) { listeningModeChapters = true; listeningModeOpen = true; } }}
 				aria-label={audioStore.chapters.length > 0 ? m.player_toggle_chapter_list() : undefined}
 				title={audioStore.chapters.length > 0 ? m.player_chapter_list_label() : undefined}
 			>
-				{#if audioStore.chapterTitle}
-					<p class="text-xs text-(--color-text) truncate leading-tight">{audioStore.chapterTitle}</p>
-				{/if}
-				{#if audioStore.bookTitle}
-					<p class="text-xs text-(--color-muted) truncate leading-tight">{audioStore.bookTitle}</p>
-				{/if}
 				{#if audioStore.status === 'generating'}
 					<p class="text-xs text-(--color-brand) leading-tight">
 						{m.player_generating({ percent: String(Math.round(audioStore.progress)) })}
 					</p>
 				{:else if audioStore.status === 'ready'}
-					<p class="text-xs text-(--color-muted) tabular-nums leading-tight">
-						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+					<p class="text-xs text-(--color-muted) tabular-nums leading-tight flex items-center gap-1.5">
+						{formatTime(audioStore.currentTime)} / {formatDuration(audioStore.duration)}
+						{#if audioStore.isPreview}
+							<span class="px-1 py-0.5 rounded text-[10px] font-medium bg-(--color-brand)/15 text-(--color-brand) leading-none">preview</span>
+						{/if}
 					</p>
 				{:else if audioStore.status === 'loading'}
 					<p class="text-xs text-(--color-muted) leading-tight">{m.player_loading()}</p>
@@ -922,46 +886,6 @@
 					</svg>
 				</Button>
 
-				<!-- Speed control — fixed-width pill, kept as raw button -->
-				<button
-					onclick={cycleSpeed}
-					class="text-xs font-semibold text-(--color-text) hover:text-(--color-brand) transition-colors px-2 py-1 rounded bg-(--color-surface-2) hover:bg-(--color-surface-3) flex-shrink-0 tabular-nums w-12 text-center"
-					title={m.player_change_speed()}
-					aria-label={m.player_speed_label({ speed: String(audioStore.speed) })}
-				>
-					{audioStore.speed}×
-				</button>
-
-			<!-- Auto-next toggle — has absolute-positioned status dots, kept as raw button -->
-			<button
-				onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
-				class={cn(
-					'relative p-1.5 rounded flex-shrink-0 transition-colors',
-					audioStore.autoNext
-						? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25'
-						: 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)'
-				)}
-				title={audioStore.autoNext
-					? audioStore.nextStatus === 'prefetched'
-						? m.player_auto_next_ready({ n: String(audioStore.nextChapter) })
-						: audioStore.nextStatus === 'prefetching'
-							? m.player_auto_next_preparing({ n: String(audioStore.nextChapter) })
-							: m.player_auto_next_on()
-					: m.player_auto_next_off()}
-				aria-label={m.player_auto_next_aria({ state: audioStore.autoNext ? m.common_on() : m.common_off() })}
-				aria-pressed={audioStore.autoNext}
-			>
-				<!-- "skip to end" / auto-advance icon -->
-				<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
-				</svg>
-				<!-- Prefetch status dot -->
-				{#if audioStore.autoNext && audioStore.nextStatus === 'prefetching'}
-					<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-(--color-brand) animate-pulse"></span>
-				{:else if audioStore.autoNext && audioStore.nextStatus === 'prefetched'}
-					<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-green-400"></span>
-				{/if}
-			</button>
 			{:else if audioStore.status === 'generating'}
 				<!-- Spinner during generation -->
 				<svg class="w-6 h-6 text-(--color-brand) animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">
@@ -999,7 +923,7 @@
 			<Button
 				variant="ghost"
 				size="icon"
-				onclick={() => (listeningModeOpen = true)}
+				onclick={() => { listeningModeChapters = false; listeningModeOpen = true; }}
 				title="Listening mode"
 				aria-label="Open listening mode"
 				class="text-(--color-muted) hover:text-(--color-text) flex-shrink-0"
@@ -1025,9 +949,15 @@
 			</Button>
 		</div>
 	</div>
-
-	<!-- Listening mode full-screen overlay -->
-	{#if listeningModeOpen}
-		<ListeningMode onclose={() => (listeningModeOpen = false)} />
-	{/if}
+{/if}
+
+<!-- Listening mode — mounted at root level, independent of audioStore.active,
+     so closing/pausing audio never tears it down and loses context. -->
+{#if listeningModeOpen}
+	<div transition:fly={{ y: '100%', duration: 320, opacity: 1 }} style="pointer-events: none;">
+		<ListeningMode
+			onclose={() => { listeningModeOpen = false; listeningModeChapters = false; }}
+			openChapters={listeningModeChapters}
+		/>
+	</div>
 {/if}

ui/src/routes/+page.server.ts

@@ -4,15 +4,35 @@ import {
 	recentlyUpdatedBooks,
 	allProgress,
 	getHomeStats,
-	getSubscriptionFeed
+	getSubscriptionFeed,
+	getTrendingBooks,
+	getRecommendedBooks
 } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 import type { Book, Progress } from '$lib/server/pocketbase';
 
+function parseGenresLocal(genres: string[] | string | null | undefined): string[] {
+	if (!genres) return [];
+	if (Array.isArray(genres)) return genres;
+	try { return JSON.parse(genres) as string[]; } catch { return []; }
+}
+
+function computeStreak(progressList: Progress[]): number {
+	const days = new Set(
+		progressList.filter((p) => p.updated).map((p) => p.updated.slice(0, 10))
+	);
+	let streak = 0;
+	const today = new Date();
+	for (let i = 0; i < 365; i++) {
+		const d = new Date(today);
+		d.setUTCDate(d.getUTCDate() - i);
+		if (days.has(d.toISOString().slice(0, 10))) streak++;
+		else if (i > 0) break;
+	}
+	return streak;
+}
+
 export const load: PageServerLoad = async ({ locals }) => {
-	// Step 1: fetch progress + recent books + stats in parallel.
-	// We intentionally do NOT call listBooks() here — we only need books that
-	// appear in the user's progress list, which is a tiny subset of 15k books.
 	let recentBooks: Book[] = [];
 	let progressList: Progress[] = [];
 	let stats = { totalBooks: 0, totalChapters: 0 };
@@ -27,8 +47,9 @@ export const load: PageServerLoad = async ({ locals }) => {
 		log.error('home', 'failed to load home data', { err: String(e) });
 	}
 
-	// Step 2: fetch only the books we actually need for continue-reading.
-	// This is O(progress entries) instead of O(15k books).
+	const streak = computeStreak(progressList);
+
+	// Fetch only the books we need for continue-reading (avoid loading all books)
 	const progressSlugs = progressList.map((p) => p.slug);
 	const progressBooks = progressSlugs.length > 0
 		? await getBooksBySlugs(progressSlugs).catch(() => [] as Book[])
@@ -36,31 +57,65 @@ export const load: PageServerLoad = async ({ locals }) => {
 
 	const bookMap = new Map<string, Book>(progressBooks.map((b) => [b.slug, b]));
 
-	// Continue reading: progress entries joined with book data, most recent first
+	// All continue-reading entries joined with book data, most recent first
 	const continueReading = progressList
 		.filter((p) => bookMap.has(p.slug))
-		.slice(0, 6)
+		.slice(0, 8)
 		.map((p) => ({ book: bookMap.get(p.slug)!, chapter: p.chapter }));
 
-	// Recently updated: deduplicate against continueReading slugs
+	// Split into in-progress vs completed
+	const continueInProgress = continueReading.filter(
+		({ book, chapter }) => book.total_chapters === 0 || chapter < book.total_chapters
+	);
+	const continueCompleted = continueReading.filter(
+		({ book, chapter }) => book.total_chapters > 0 && chapter >= book.total_chapters
+	);
+
+	// Top genres from books the user has been reading
+	const genreFreq = new Map<string, number>();
+	for (const { book } of continueReading) {
+		for (const g of parseGenresLocal(book.genres)) {
+			genreFreq.set(g, (genreFreq.get(g) ?? 0) + 1);
+		}
+	}
+	const topGenres = [...genreFreq.entries()]
+		.sort((a, b) => b[1] - a[1])
+		.slice(0, 3)
+		.map(([g]) => g);
+
+	// Deduplicate recently-updated against in-progress slugs
 	const inProgressSlugs = new Set(continueReading.map((c) => c.book.slug));
 	const recentlyUpdated = recentBooks.filter((b) => !inProgressSlugs.has(b.slug)).slice(0, 6);
 
-	// Subscription feed — only when logged in
-	const subscriptionFeed = locals.user
-		? await getSubscriptionFeed(locals.user.id, 12).catch((e) => {
-				log.error('home', 'failed to load subscription feed', { err: String(e) });
-				return [] as Awaited<ReturnType<typeof getSubscriptionFeed>>;
-			})
-		: [];
+	// Fetch trending, recommendations, and subscription feed in parallel
+	const [trendingBooks, recommendedBooks, subscriptionFeed] = await Promise.all([
+		getTrendingBooks(8).catch(() => [] as Book[]),
+		topGenres.length > 0
+			? getRecommendedBooks(topGenres, inProgressSlugs, 8).catch(() => [] as Book[])
+			: Promise.resolve([] as Book[]),
+		locals.user
+			? getSubscriptionFeed(locals.user.id, 12).catch((e) => {
+					log.error('home', 'failed to load subscription feed', { err: String(e) });
+					return [] as Awaited<ReturnType<typeof getSubscriptionFeed>>;
+				})
+			: Promise.resolve([])
+	]);
+
+	// Strip books the user is already reading from trending (redundant)
+	const trendingFiltered = trendingBooks.filter((b) => !inProgressSlugs.has(b.slug));
 
 	return {
-		continueReading,
+		continueInProgress,
+		continueCompleted,
 		recentlyUpdated,
 		subscriptionFeed,
+		trendingBooks: trendingFiltered,
+		recommendedBooks,
+		topGenre: topGenres[0] ?? null,
 		stats: {
 			...stats,
-			booksInProgress: continueReading.length
+			booksInProgress: continueInProgress.length,
+			streak
 		}
 	};
 };

ui/src/routes/+page.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { audioStore } from '$lib/audio.svelte';
 	import type { PageData } from './$types';
 	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
-	// ── Section visibility (localStorage, Svelte 5 runes) ────────────────────────
-	type SectionId = 'recently-updated' | 'browse-genre' | 'from-following';
+	// ── Section visibility ────────────────────────────────────────────────────────
+	type SectionId = 'recently-updated' | 'browse-genre' | 'from-following' | 'trending' | 'because-you-read';
 	const SECTIONS_KEY = 'home_sections_v1';
 
-	const SECTION_LABELS: Record<SectionId, string> = {
-		'recently-updated': 'Recently Updated',
-		'browse-genre':     'Browse by Genre',
-		'from-following':   'From Following',
-	};
-
 	function loadHidden(): Set<SectionId> {
 		if (!browser) return new Set();
 		try {
@@ -38,6 +34,14 @@
 		if (browser) localStorage.setItem(SECTIONS_KEY, JSON.stringify([...next]));
 	}
 
+	const SECTION_LABELS = $derived<Record<SectionId, string>>({
+		'recently-updated': 'Recently Updated',
+		'browse-genre':     'Browse by Genre',
+		'from-following':   'From Following',
+		'trending':         'Trending Now',
+		'because-you-read': data.topGenre ? `Because you read ${data.topGenre}` : 'Recommendations',
+	});
+
 	const hiddenList = $derived(
 		(Object.keys(SECTION_LABELS) as SectionId[]).filter((id) => hidden.has(id))
 	);
@@ -51,8 +55,6 @@
 		} catch { return []; }
 	}
 
-	// Deduplicate recentlyUpdated by slug, keeping the first occurrence and
-	// counting how many times the same book appears (= new chapters added).
 	const dedupedRecent = $derived.by(() => {
 		const seen = new Map<string, { book: (typeof data.recentlyUpdated)[0]; count: number }>();
 		for (const book of data.recentlyUpdated) {
@@ -70,63 +72,186 @@
 		'Reincarnation', 'Sci-Fi', 'Horror', 'Slice of Life', 'Adventure',
 	];
 
-	// Hero = first continue-reading item; shelf = the rest
-	const heroBook = $derived(data.continueReading[0] ?? null);
-	const shelfBooks = $derived(data.continueReading.slice(1));
+	// ── Hero carousel ────────────────────────────────────────────────────────
+	const heroBooks  = $derived(data.continueInProgress);
+	let heroIndex    = $state(0);
+	const heroBook   = $derived(heroBooks[heroIndex] ?? null);
+	// Shelf shows remaining books not in the hero
+	const shelfBooks = $derived(
+		heroBooks.length > 1 ? heroBooks.filter((_, i) => i !== heroIndex) : []
+	);
+	const streak     = $derived(data.stats.streak ?? 0);
+
+	function heroPrev() {
+		heroIndex = (heroIndex - 1 + heroBooks.length) % heroBooks.length;
+		resetAutoAdvance();
+	}
+	function heroNext() {
+		heroIndex = (heroIndex + 1) % heroBooks.length;
+		resetAutoAdvance();
+	}
+	function heroDot(i: number) {
+		heroIndex = i;
+		resetAutoAdvance();
+	}
+
+	// Auto-advance carousel every 6 s when there are multiple books.
+	// We use a $state counter as a "restart token" so the $effect can be
+	// re-triggered by manual navigation without reading heroIndex (which would
+	// cause an infinite loop when the interval itself mutates heroIndex).
+	let autoAdvanceSeed = $state(0);
+
+	$effect(() => {
+		if (heroBooks.length <= 1) return;
+		// Subscribe to heroBooks.length and autoAdvanceSeed only — not heroIndex.
+		const len = heroBooks.length;
+		void autoAdvanceSeed; // track the seed
+		const id = setInterval(() => {
+			heroIndex = (heroIndex + 1) % len;
+		}, 6000);
+		return () => clearInterval(id);
+	});
+
+	function resetAutoAdvance() {
+		// Bump the seed to restart the interval after manual navigation.
+		autoAdvanceSeed++;
+	}
+
+	function playChapter(slug: string, chapter: number) {
+		audioStore.autoStartChapter = chapter;
+		goto(`/books/${slug}/chapters/${chapter}`);
+	}
 </script>
 
 <svelte:head>
 	<title>{m.home_title()}</title>
 </svelte:head>
 
-<!-- ── Hero resume card ──────────────────────────────────────────────────────── -->
+<!-- ── Hero carousel ──────────────────────────────────────────────────────────── -->
 {#if heroBook}
-<section class="mb-10">
-	<a
-		href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
-		class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all"
-	>
-		<!-- Cover -->
-		<div class="w-32 sm:w-44 shrink-0 aspect-[2/3] overflow-hidden">
-			{#if heroBook.book.cover}
-				<img src={heroBook.book.cover} alt={heroBook.book.title}
-					class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="eager" />
-			{:else}
-				<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
-					<svg class="w-10 h-10 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
-					</svg>
+<section class="mb-6">
+	<div class="relative">
+		<!-- Card -->
+		<div class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all">
+			<!-- Cover -->
+			<a href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
+				class="w-32 sm:w-44 shrink-0 aspect-[2/3] overflow-hidden block">
+				{#if heroBook.book.cover}
+					{#key heroIndex}
+						<img src={heroBook.book.cover} alt={heroBook.book.title}
+							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 animate-fade-in" loading="eager" />
+					{/key}
+				{:else}
+					<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+						<svg class="w-10 h-10 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+						</svg>
+					</div>
+				{/if}
+			</a>
+
+			<!-- Info -->
+			<div class="flex flex-col justify-between p-5 sm:p-7 min-w-0 flex-1">
+				<div>
+					<p class="text-xs font-semibold text-(--color-brand) uppercase tracking-widest mb-2">{m.home_continue_reading()}</p>
+					<h2 class="text-xl sm:text-2xl font-bold text-(--color-text) leading-snug line-clamp-2 mb-1">{heroBook.book.title}</h2>
+					{#if heroBook.book.author}
+						<p class="text-sm text-(--color-muted)">{heroBook.book.author}</p>
+					{/if}
+					{#if heroBook.book.summary}
+						<p class="hidden sm:block text-sm text-(--color-muted) mt-3 line-clamp-2 max-w-prose">{heroBook.book.summary}</p>
+					{/if}
 				</div>
+				<div class="flex items-center gap-3 mt-4 flex-wrap">
+					<a href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
+						class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors">
+						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+						{m.home_chapter_badge({ n: String(heroBook.chapter) })}
+					</a>
+					<button
+						type="button"
+						onclick={() => playChapter(heroBook!.book.slug, heroBook!.chapter)}
+						class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-(--color-surface-3) border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:border-(--color-brand)/40 font-semibold text-sm transition-colors"
+						title="Listen to narration"
+					>
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 9a3 3 0 114 2.83V17m0 0a2 2 0 11-4 0m4 0H9m9-8a9 9 0 11-18 0 9 9 0 0118 0z"/>
+						</svg>
+						Listen
+					</button>
+					{#if heroBook.book.total_chapters > 0 && heroBook.chapter < heroBook.book.total_chapters}
+						{@const ahead = heroBook.book.total_chapters - heroBook.chapter}
+						<span class="text-xs text-(--color-muted) hidden sm:inline">{ahead} chapters ahead</span>
+					{/if}
+					{#each parseGenres(heroBook.book.genres).slice(0, 2) as genre}
+						<span class="text-xs px-2 py-1 rounded-full bg-(--color-surface-3) text-(--color-muted)">{genre}</span>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Prev / Next arrow buttons (only when multiple books) -->
+			{#if heroBooks.length > 1}
+				<button
+					type="button"
+					onclick={heroPrev}
+					class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-(--color-surface)/80 border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors flex items-center justify-center backdrop-blur-sm z-10"
+					aria-label="Previous book"
+				>
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+					</svg>
+				</button>
+				<button
+					type="button"
+					onclick={heroNext}
+					class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-(--color-surface)/80 border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors flex items-center justify-center backdrop-blur-sm z-10"
+					aria-label="Next book"
+				>
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+					</svg>
+				</button>
 			{/if}
 		</div>
 
-		<!-- Info -->
-		<div class="flex flex-col justify-between p-5 sm:p-7 min-w-0">
-			<div>
-				<p class="text-xs font-semibold text-(--color-brand) uppercase tracking-widest mb-2">{m.home_continue_reading()}</p>
-				<h2 class="text-xl sm:text-2xl font-bold text-(--color-text) leading-snug line-clamp-2 mb-1">{heroBook.book.title}</h2>
-				{#if heroBook.book.author}
-					<p class="text-sm text-(--color-muted)">{heroBook.book.author}</p>
-				{/if}
-				{#if heroBook.book.summary}
-					<p class="hidden sm:block text-sm text-(--color-muted) mt-3 line-clamp-2 max-w-prose">{heroBook.book.summary}</p>
-				{/if}
-			</div>
-			<div class="flex items-center gap-3 mt-4 flex-wrap">
-				<span class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm group-hover:bg-(--color-brand-dim) transition-colors">
-					<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-					{m.home_chapter_badge({ n: String(heroBook.chapter) })}
-				</span>
-				{#each parseGenres(heroBook.book.genres).slice(0, 2) as genre}
-					<span class="text-xs px-2 py-1 rounded-full bg-(--color-surface-3) text-(--color-muted)">{genre}</span>
+		<!-- Dot indicators -->
+		{#if heroBooks.length > 1}
+			<div class="flex items-center justify-center gap-1.5 mt-2.5">
+				{#each heroBooks as _, i}
+					<button
+						type="button"
+						onclick={() => heroDot(i)}
+						aria-label="Go to book {i + 1}"
+						class="rounded-full transition-all duration-300 {i === heroIndex
+							? 'w-4 h-1.5 bg-(--color-brand)'
+							: 'w-1.5 h-1.5 bg-(--color-border) hover:bg-(--color-muted)'}"
+					></button>
 				{/each}
 			</div>
-		</div>
-	</a>
+		{/if}
+	</div>
 </section>
 {/if}
 
-<!-- ── Continue Reading shelf (remaining books) ──────────────────────────────── -->
+<!-- ── Streak widget ───────────────────────────────────────────────────────────── -->
+{#if streak > 0}
+<div class="mb-6 flex items-center gap-3 flex-wrap text-sm">
+	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
+		<svg class="w-4 h-4 text-orange-400" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
+		</svg>
+		<span class="font-semibold text-(--color-text)">{streak}</span>
+		<span class="text-(--color-muted)">day{streak !== 1 ? 's' : ''} reading</span>
+	</span>
+	{#if data.stats.booksInProgress > 0}
+		<span class="text-(--color-muted)">
+			<span class="font-semibold text-(--color-text)">{data.stats.booksInProgress}</span> {data.stats.booksInProgress === 1 ? 'book' : 'books'} in progress
+		</span>
+	{/if}
+</div>
+{/if}
+
+<!-- ── Continue Reading shelf ──────────────────────────────────────────────────── -->
 {#if shelfBooks.length > 0}
 <section class="mb-10">
 	<div class="flex items-baseline justify-between mb-3">
@@ -135,7 +260,56 @@
 	</div>
 	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
 		{#each shelfBooks as { book, chapter }}
-			<a href="/books/{book.slug}/chapters/{chapter}"
+			<div class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-32 sm:w-36">
+				<a href="/books/{book.slug}/chapters/{chapter}" class="block">
+					<div class="aspect-[2/3] overflow-hidden relative">
+						{#if book.cover}
+							<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+						{:else}
+							<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+								<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+							</div>
+						{/if}
+						<!-- Chapter badge -->
+						<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
+							{m.home_chapter_badge({ n: String(chapter) })}
+						</span>
+						<!-- Chapters ahead badge -->
+						{#if book.total_chapters > 0 && chapter < book.total_chapters}
+							<span class="absolute top-1.5 left-1.5 text-xs bg-black/60 text-white font-medium px-1.5 py-0.5 rounded">
+								{book.total_chapters - chapter} left
+							</span>
+						{/if}
+					</div>
+				</a>
+				<!-- Listen button (hover overlay) -->
+				<button
+					type="button"
+					onclick={() => playChapter(book.slug, chapter)}
+					class="absolute bottom-8 left-1.5 w-7 h-7 rounded-full bg-black/60 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+					title="Listen"
+					aria-label="Listen to chapter {chapter}"
+				>
+					<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+				</button>
+				<a href="/books/{book.slug}/chapters/{chapter}" class="p-2 block">
+					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+				</a>
+			</div>
+		{/each}
+	</div>
+</section>
+{/if}
+
+<!-- ── Completed shelf ────────────────────────────────────────────────────────── -->
+{#if data.continueCompleted.length > 0}
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">Completed</h2>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each data.continueCompleted as { book, chapter }}
+			<a href="/books/{book.slug}"
 				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-32 sm:w-36">
 				<div class="aspect-[2/3] overflow-hidden relative">
 					{#if book.cover}
@@ -145,12 +319,13 @@
 							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
 						</div>
 					{/if}
-					<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
-						{m.home_chapter_badge({ n: String(chapter) })}
-					</span>
+					<span class="absolute top-1.5 right-1.5 text-xs bg-green-600/90 text-white font-bold px-1.5 py-0.5 rounded">✓ Done</span>
 				</div>
 				<div class="p-2">
 					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					{#if book.total_chapters > 0}
+						<p class="text-xs text-(--color-muted) mt-0.5">{chapter} chapters</p>
+					{/if}
 				</div>
 			</a>
 		{/each}
@@ -184,6 +359,102 @@
 </section>
 {/if}
 
+<!-- ── Trending Now ───────────────────────────────────────────────────────────── -->
+{#if data.trendingBooks.length > 0 && !hidden.has('trending')}
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">Trending Now</h2>
+		<div class="flex items-center gap-3">
+			<a href="/catalogue" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
+			<button type="button" onclick={() => hide('trending')} title="Hide section"
+				class="text-(--color-muted) hover:text-(--color-text) transition-colors">
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+				</svg>
+			</button>
+		</div>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each data.trendingBooks as book}
+			{@const genres = parseGenres(book.genres)}
+			<a href="/books/{book.slug}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-36 sm:w-40">
+				<div class="aspect-[2/3] overflow-hidden relative">
+					{#if book.cover}
+						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+					{:else}
+						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+						</div>
+					{/if}
+					<span class="absolute top-1.5 left-1.5 text-xs bg-(--color-brand)/80 text-(--color-surface) font-bold px-1.5 py-0.5 rounded">#{book.ranking}</span>
+				</div>
+				<div class="p-2 flex flex-col gap-1">
+					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					{#if book.author}
+						<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
+					{/if}
+					{#if genres.length > 0}
+						<div class="flex flex-wrap gap-1 mt-auto pt-0.5">
+							{#each genres.slice(0, 2) as genre}
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</div>
+</section>
+{/if}
+
+<!-- ── Because you read [Genre] ──────────────────────────────────────────────── -->
+{#if data.recommendedBooks.length > 0 && data.topGenre && !hidden.has('because-you-read')}
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">
+			Because you read <span class="text-(--color-brand)">{data.topGenre}</span>
+		</h2>
+		<button type="button" onclick={() => hide('because-you-read')} title="Hide section"
+			class="text-(--color-muted) hover:text-(--color-text) transition-colors">
+			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+			</svg>
+		</button>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each data.recommendedBooks as book}
+			{@const genres = parseGenres(book.genres)}
+			<a href="/books/{book.slug}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-36 sm:w-40">
+				<div class="aspect-[2/3] overflow-hidden relative">
+					{#if book.cover}
+						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+					{:else}
+						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+						</div>
+					{/if}
+				</div>
+				<div class="p-2 flex flex-col gap-1">
+					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					{#if book.author}
+						<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
+					{/if}
+					{#if genres.length > 0}
+						<div class="flex flex-wrap gap-1 mt-auto pt-0.5">
+							{#each genres.slice(0, 2) as genre}
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</div>
+</section>
+{/if}
+
 <!-- ── Recently Updated ──────────────────────────────────────────────────────── -->
 {#if dedupedRecent.length > 0 && !hidden.has('recently-updated')}
 <section class="mb-10">
@@ -272,8 +543,8 @@
 </section>
 {/if}
 
-<!-- ── Empty state (no content at all) ──────────────────────────────────────── -->
-{#if data.continueReading.length === 0 && dedupedRecent.length === 0}
+<!-- ── Empty state ───────────────────────────────────────────────────────────── -->
+{#if data.continueInProgress.length === 0 && data.continueCompleted.length === 0 && dedupedRecent.length === 0}
 <div class="text-center py-20 text-(--color-muted)">
 	<p class="text-lg font-semibold text-(--color-text) mb-2">{m.home_empty_title()}</p>
 	<p class="text-sm mb-6">{m.home_empty_body()}</p>
@@ -301,8 +572,12 @@
 {/if}
 
 <!-- ── Stats footer ──────────────────────────────────────────────────────────── -->
-<div class="mt-6 pt-6 border-t border-(--color-border) flex items-center justify-center gap-6 text-sm text-(--color-muted)">
+<div class="mt-6 pt-6 border-t border-(--color-border) flex items-center justify-center gap-6 text-sm text-(--color-muted) flex-wrap">
 	<span><span class="font-semibold text-(--color-text)">{data.stats.totalBooks.toLocaleString()}</span> {m.home_stat_books()}</span>
 	<span class="w-px h-4 bg-(--color-border)"></span>
 	<span><span class="font-semibold text-(--color-text)">{data.stats.totalChapters.toLocaleString()}</span> {m.home_stat_chapters()}</span>
+	{#if streak > 0}
+		<span class="w-px h-4 bg-(--color-border)"></span>
+		<span><span class="font-semibold text-(--color-text)">{streak}</span> day streak 🔥</span>
+	{/if}
 </div>

ui/src/routes/admin/ai-jobs/+page.svelte

@@ -77,6 +77,92 @@
 		}
 	}
 
+	// ── Review & Apply (chapter-names jobs) ──────────────────────────────────────
+
+	interface ProposedTitle {
+		number: number;
+		old_title: string;
+		new_title: string;
+	}
+
+	interface ReviewState {
+		jobId: string;
+		slug: string;
+		pattern: string;
+		titles: ProposedTitle[];
+		loading: boolean;
+		error: string;
+		applying: boolean;
+		applyError: string;
+		applyDone: boolean;
+	}
+
+	let review = $state<ReviewState | null>(null);
+
+	async function openReview(job: AIJob) {
+		review = {
+			jobId: job.id,
+			slug: job.slug,
+			pattern: '',
+			titles: [],
+			loading: true,
+			error: '',
+			applying: false,
+			applyError: '',
+			applyDone: false
+		};
+
+		try {
+			const res = await fetch(`/api/admin/ai-jobs/${job.id}`);
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const data = await res.json();
+
+			let payload: { pattern?: string; slug?: string; results?: ProposedTitle[] } = {};
+			try {
+				payload = JSON.parse(data.payload ?? '{}');
+			} catch {
+				// ignore
+			}
+
+			review.pattern = payload.pattern ?? '';
+			review.titles = (payload.results ?? []).map((t: ProposedTitle) => ({ ...t }));
+			review.loading = false;
+		} catch (e) {
+			review.loading = false;
+			review.error = String(e);
+		}
+	}
+
+	function closeReview() {
+		review = null;
+	}
+
+	async function applyReview() {
+		if (!review || review.applying) return;
+		review.applying = true;
+		review.applyError = '';
+		review.applyDone = false;
+
+		const chapters = review.titles.map((t) => ({ number: t.number, title: t.new_title }));
+		try {
+			const res = await fetch('/api/admin/text-gen/chapter-names/apply', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({ slug: review.slug, chapters })
+			});
+			if (!res.ok) {
+				const body = await res.json().catch(() => ({}));
+				review.applyError = body.error ?? `Error ${res.status}`;
+			} else {
+				review.applyDone = true;
+			}
+		} catch {
+			review.applyError = 'Network error.';
+		} finally {
+			review.applying = false;
+		}
+	}
+
 	// ── Helpers ───────────────────────────────────────────────────────────────────
 	function statusColor(status: string) {
 		if (status === 'done') return 'text-green-400';
@@ -304,6 +390,14 @@
 											{cancellingId === job.id ? 'Cancelling…' : 'Cancel'}
 										</button>
 									{/if}
+									{#if job.kind === 'chapter-names' && job.status === 'done'}
+										<button
+											onclick={() => openReview(job)}
+											class="px-2 py-1 rounded text-xs font-medium bg-green-400/10 text-green-400 hover:bg-green-400/20 transition-colors"
+										>
+											Review
+										</button>
+									{/if}
 									{#if job.error_message}
 										<span
 											class="text-xs text-(--color-danger) max-w-[12rem] truncate"
@@ -324,3 +418,112 @@
 		</p>
 	{/if}
 </div>
+
+<!-- ── Review & Apply panel ──────────────────────────────────────────────────── -->
+{#if review}
+	<!-- Backdrop -->
+	<div
+		class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
+		onclick={closeReview}
+		role="presentation"
+	></div>
+
+	<!-- Panel -->
+	<div class="fixed inset-x-0 bottom-0 z-50 max-h-[85vh] overflow-hidden flex flex-col rounded-t-2xl bg-(--color-surface) border-t border-(--color-border) shadow-2xl sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-[min(900px,95vw)] sm:max-h-[85vh] sm:rounded-xl sm:border sm:shadow-2xl">
+		<!-- Panel header -->
+		<div class="flex items-center justify-between gap-4 px-5 py-4 border-b border-(--color-border) shrink-0">
+			<div>
+				<h2 class="text-base font-semibold text-(--color-text)">Review Chapter Names</h2>
+				<p class="text-xs text-(--color-muted) mt-0.5">
+					<span class="font-mono">{review.slug}</span>
+					{#if review.pattern}
+						· pattern: <span class="font-mono">{review.pattern}</span>
+					{/if}
+				</p>
+			</div>
+			<button
+				onclick={closeReview}
+				class="p-1.5 rounded-md text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+				aria-label="Close"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+		</div>
+
+		<!-- Body -->
+		<div class="flex-1 overflow-y-auto">
+			{#if review.loading}
+				<div class="flex items-center justify-center py-16 text-(--color-muted) text-sm">
+					Loading results…
+				</div>
+			{:else if review.error}
+				<div class="px-5 py-8 text-center">
+					<p class="text-(--color-danger) text-sm">{review.error}</p>
+				</div>
+			{:else if review.titles.length === 0}
+				<div class="px-5 py-8 text-center">
+					<p class="text-(--color-muted) text-sm">No results found in this job's payload.</p>
+				</div>
+			{:else}
+				<table class="w-full text-sm">
+					<thead class="sticky top-0 bg-(--color-surface) border-b border-(--color-border)">
+						<tr>
+							<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider w-16">#</th>
+							<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider w-1/2">Old Title</th>
+							<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider">New Title (editable)</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-(--color-border)">
+						{#each review.titles as title (title.number)}
+							<tr class="bg-(--color-surface) hover:bg-(--color-surface-2)/40 transition-colors">
+								<td class="px-4 py-2 text-xs text-(--color-muted) tabular-nums">{title.number}</td>
+								<td class="px-4 py-2 text-xs text-(--color-muted) max-w-0">
+									<span class="block truncate" title={title.old_title}>{title.old_title || '—'}</span>
+								</td>
+								<td class="px-4 py-2">
+									<input
+										type="text"
+										bind:value={title.new_title}
+										class="w-full px-2 py-1 rounded bg-(--color-surface-2) border border-(--color-border) text-xs text-(--color-text) focus:outline-none focus:ring-1 focus:ring-(--color-brand)"
+									/>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+
+		<!-- Footer -->
+		{#if !review.loading && !review.error && review.titles.length > 0}
+			<div class="px-5 py-4 border-t border-(--color-border) shrink-0 flex items-center justify-between gap-4">
+				<div class="text-xs text-(--color-muted)">
+					{review.titles.length} chapters
+				</div>
+				<div class="flex items-center gap-3">
+					{#if review.applyError}
+						<p class="text-xs text-(--color-danger)">{review.applyError}</p>
+					{/if}
+					{#if review.applyDone}
+						<p class="text-xs text-green-400">Applied successfully.</p>
+					{/if}
+					<button
+						onclick={closeReview}
+						class="px-3 py-1.5 rounded-md text-sm text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					>
+						Close
+					</button>
+					<button
+						onclick={applyReview}
+						disabled={review.applying || review.applyDone}
+						class="px-4 py-1.5 rounded-md text-sm font-medium bg-(--color-brand) text-black hover:bg-amber-300 disabled:opacity-50 transition-colors"
+					>
+						{review.applying ? 'Applying…' : review.applyDone ? 'Applied' : 'Apply All'}
+					</button>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

ui/src/routes/api/admin/ai-jobs/[id]/+server.ts

@@ -0,0 +1,31 @@
+/**
+ * GET /api/admin/ai-jobs/[id]
+ *
+ * Admin-only proxy to the Go backend's AI job detail endpoint.
+ * Returns the full job record including the payload field (which contains
+ * results for completed chapter-names jobs).
+ */
+
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { log } from '$lib/server/logger';
+import { backendFetch } from '$lib/server/scraper';
+
+export const GET: RequestHandler = async ({ params, locals }) => {
+	if (!locals.user || locals.user.role !== 'admin') {
+		throw error(403, 'Forbidden');
+	}
+
+	const { id } = params;
+
+	let res: Response;
+	try {
+		res = await backendFetch(`/api/admin/ai-jobs/${id}`, { method: 'GET' });
+	} catch (e) {
+		log.error('admin/ai-jobs/get', 'backend proxy error', { id, err: String(e) });
+		throw error(502, 'Could not reach backend');
+	}
+
+	const data = await res.json().catch(() => ({}));
+	return json(data, { status: res.status });
+};

ui/src/routes/api/admin/text-gen/chapter-names/async/+server.ts

@@ -0,0 +1,35 @@
+/**
+ * POST /api/admin/text-gen/chapter-names/async
+ *
+ * Fire-and-forget variant: forwards to the Go backend's async endpoint and
+ * returns {job_id} immediately (HTTP 202). The backend runs generation in the
+ * background; the client polls GET /api/admin/ai-jobs/{id} for progress and
+ * then reviews/applies via POST /api/admin/text-gen/chapter-names/apply.
+ */
+
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { log } from '$lib/server/logger';
+import { backendFetch } from '$lib/server/scraper';
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	if (!locals.user || locals.user.role !== 'admin') {
+		throw error(403, 'Forbidden');
+	}
+
+	const body = await request.text();
+	let res: Response;
+	try {
+		res = await backendFetch('/api/admin/text-gen/chapter-names/async', {
+			method: 'POST',
+			headers: { 'content-type': 'application/json' },
+			body
+		});
+	} catch (e) {
+		log.error('admin/text-gen/chapter-names/async', 'backend proxy error', { err: String(e) });
+		throw error(502, 'Could not reach backend');
+	}
+
+	const data = await res.json().catch(() => ({}));
+	return json(data, { status: res.status });
+};

ui/src/routes/api/export/[slug]/+server.ts

@@ -2,7 +2,11 @@ import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { backendFetch } from '$lib/server/scraper';
 
-export const GET: RequestHandler = async ({ params, url }) => {
+export const GET: RequestHandler = async ({ params, url, locals }) => {
+	if (!locals.isPro) {
+		error(403, 'EPUB download requires a Pro subscription');
+	}
+
 	const { slug } = params;
 	const from = url.searchParams.get('from');
 	const to = url.searchParams.get('to');

ui/src/routes/api/library/bulk-remove/+server.ts

@@ -0,0 +1,33 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { unsaveBook } from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';
+
+/**
+ * POST /api/library/bulk-remove
+ * Body: { slugs: string[] }
+ * Removes multiple books from the user's library at once.
+ */
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const body = await request.json().catch(() => null);
+	const slugs: unknown = body?.slugs;
+	if (!Array.isArray(slugs) || slugs.length === 0) {
+		error(400, 'slugs must be a non-empty array');
+	}
+	const validSlugs = (slugs as unknown[]).filter((s): s is string => typeof s === 'string');
+	if (validSlugs.length === 0) error(400, 'no valid slugs provided');
+
+	const results = await Promise.allSettled(
+		validSlugs.map((slug) => unsaveBook(locals.sessionId, slug, locals.user?.id))
+	);
+
+	const failed = results
+		.map((r, i) => (r.status === 'rejected' ? validSlugs[i] : null))
+		.filter(Boolean);
+
+	if (failed.length > 0) {
+		log.error('library', 'bulk-remove partial failure', { failed });
+	}
+
+	return json({ ok: true, removed: validSlugs.length - failed.length, failed });
+};

ui/src/routes/api/library/bulk-shelf/+server.ts

@@ -0,0 +1,44 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { updateBookShelf } from '$lib/server/pocketbase';
+import type { ShelfName } from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';
+
+const VALID_SHELVES: ShelfName[] = ['', 'plan_to_read', 'completed', 'dropped'];
+
+/**
+ * POST /api/library/bulk-shelf
+ * Body: { slugs: string[], shelf: ShelfName }
+ * Moves multiple books to the given shelf at once.
+ */
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const body = await request.json().catch(() => null);
+	const slugs: unknown = body?.slugs;
+	const shelf: unknown = body?.shelf;
+
+	if (!Array.isArray(slugs) || slugs.length === 0) {
+		error(400, 'slugs must be a non-empty array');
+	}
+	if (typeof shelf !== 'string' || !VALID_SHELVES.includes(shelf as ShelfName)) {
+		error(400, 'invalid shelf value');
+	}
+
+	const validSlugs = (slugs as unknown[]).filter((s): s is string => typeof s === 'string');
+	if (validSlugs.length === 0) error(400, 'no valid slugs provided');
+
+	const results = await Promise.allSettled(
+		validSlugs.map((slug) =>
+			updateBookShelf(locals.sessionId, slug, shelf as ShelfName, locals.user?.id)
+		)
+	);
+
+	const failed = results
+		.map((r, i) => (r.status === 'rejected' ? validSlugs[i] : null))
+		.filter(Boolean);
+
+	if (failed.length > 0) {
+		log.error('library', 'bulk-shelf partial failure', { failed, shelf });
+	}
+
+	return json({ ok: true, updated: validSlugs.length - failed.length, failed });
+};

ui/src/routes/books/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { invalidateAll } from '$app/navigation';
 	import type { PageData } from './$types';
 	import * as m from '$lib/paraglide/messages.js';
 
@@ -38,19 +39,143 @@
 		'': data.books.filter((b) => (shelfMap[b.slug] ?? '') === '').length,
 		plan_to_read: data.books.filter((b) => shelfMap[b.slug] === 'plan_to_read').length,
 		completed: data.books.filter((b) => shelfMap[b.slug] === 'completed').length,
-		dropped: data.books.filter((b) => shelfMap[b.slug] === 'dropped').length,
+		dropped: data.books.filter((b) => shelfMap[b.slug] === 'dropped').length
 	});
+
+	// ── Selection / bulk-action state ─────────────────────────────────────────
+	let selectMode = $state(false);
+	let selected = $state<Set<string>>(new Set());
+	let busy = $state(false);
+	let shelfPickerOpen = $state(false);
+
+	const selectedCount = $derived(selected.size);
+	const allVisibleSelected = $derived(
+		filteredBooks.length > 0 && filteredBooks.every((b) => selected.has(b.slug))
+	);
+
+	function enterSelectMode(slug: string) {
+		selectMode = true;
+		selected = new Set([slug]);
+	}
+
+	function exitSelectMode() {
+		selectMode = false;
+		selected = new Set();
+		shelfPickerOpen = false;
+	}
+
+	function toggleSelect(slug: string) {
+		const next = new Set(selected);
+		if (next.has(slug)) next.delete(slug);
+		else next.add(slug);
+		selected = next;
+		if (next.size === 0) exitSelectMode();
+	}
+
+	function toggleSelectAll() {
+		if (allVisibleSelected) {
+			selected = new Set();
+			exitSelectMode();
+		} else {
+			selected = new Set(filteredBooks.map((b) => b.slug));
+		}
+	}
+
+	// Long-press support (pointer events, works on desktop + mobile)
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	let longPressFired = false;
+
+	function onPointerDown(slug: string) {
+		if (selectMode) return;
+		longPressFired = false;
+		longPressTimer = setTimeout(() => {
+			longPressFired = true;
+			enterSelectMode(slug);
+		}, 500);
+	}
+
+	function onPointerUp() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	function onPointerCancel() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	// Prevent navigation click if long-press just fired
+	function onCardClick(e: MouseEvent, slug: string) {
+		if (selectMode) {
+			e.preventDefault();
+			toggleSelect(slug);
+			return;
+		}
+		if (longPressFired) {
+			e.preventDefault();
+			longPressFired = false;
+		}
+	}
+
+	// ── Bulk actions ──────────────────────────────────────────────────────────
+	async function bulkRemove() {
+		if (busy || selected.size === 0) return;
+		busy = true;
+		try {
+			await fetch('/api/library/bulk-remove', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slugs: [...selected] })
+			});
+			await invalidateAll();
+		} finally {
+			busy = false;
+			exitSelectMode();
+		}
+	}
+
+	async function bulkMoveShelf(shelf: Shelf) {
+		if (busy || selected.size === 0) return;
+		busy = true;
+		shelfPickerOpen = false;
+		try {
+			await fetch('/api/library/bulk-shelf', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slugs: [...selected], shelf })
+			});
+			await invalidateAll();
+		} finally {
+			busy = false;
+			exitSelectMode();
+		}
+	}
 </script>
 
 <svelte:head>
 	<title>{m.books_page_title()}</title>
 </svelte:head>
 
-<div class="mb-6">
-	<h1 class="text-2xl font-bold text-(--color-text)">{m.books_heading()}</h1>
-	<p class="text-(--color-muted) text-sm mt-1">
-		{m.books_count({ n: String(data.books?.length ?? 0), s: (data.books?.length ?? 0) !== 1 ? 's' : '' })}
-	</p>
+<div class="mb-6 flex items-start justify-between gap-4">
+	<div>
+		<h1 class="text-2xl font-bold text-(--color-text)">{m.books_heading()}</h1>
+		<p class="text-(--color-muted) text-sm mt-1">
+			{m.books_count({ n: String(data.books?.length ?? 0), s: (data.books?.length ?? 0) !== 1 ? 's' : '' })}
+		</p>
+	</div>
+	{#if selectMode}
+		<button
+			type="button"
+			onclick={exitSelectMode}
+			class="text-sm text-(--color-muted) hover:text-(--color-text) transition-colors pt-1"
+		>
+			Cancel
+		</button>
+	{/if}
 </div>
 
 {#if !data.books?.length}
@@ -63,22 +188,34 @@
 		</p>
 	</div>
 {:else}
-	<!-- Shelf tabs -->
-	<div class="flex gap-1 flex-wrap mb-4">
-		{#each (['all', '', 'plan_to_read', 'completed', 'dropped'] as const) as shelf}
-			{#if shelfCounts[shelf] > 0 || shelf === 'all'}
-				<button
-					type="button"
-					onclick={() => (activeShelf = shelf)}
-					class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
-						{activeShelf === shelf
-							? 'bg-(--color-brand) text-(--color-surface)'
-							: 'bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) border border-(--color-border)'}"
-				>
-					{shelfLabels[shelf]}{shelfCounts[shelf] !== data.books.length || shelf === 'all' ? ` (${shelfCounts[shelf]})` : ''}
-				</button>
-			{/if}
-		{/each}
+	<!-- Shelf tabs + select-all row -->
+	<div class="flex items-center gap-2 mb-4 flex-wrap">
+		{#if selectMode}
+			<button
+				type="button"
+				onclick={toggleSelectAll}
+				class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
+					bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) border border-(--color-border)"
+			>
+				{allVisibleSelected ? 'Deselect all' : 'Select all'}
+			</button>
+			<span class="text-sm text-(--color-muted)">{selectedCount} selected</span>
+		{:else}
+			{#each (['all', '', 'plan_to_read', 'completed', 'dropped'] as const) as shelf}
+				{#if shelfCounts[shelf] > 0 || shelf === 'all'}
+					<button
+						type="button"
+						onclick={() => (activeShelf = shelf)}
+						class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
+							{activeShelf === shelf
+								? 'bg-(--color-brand) text-(--color-surface)'
+								: 'bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) border border-(--color-border)'}"
+					>
+						{shelfLabels[shelf]}{shelfCounts[shelf] !== data.books.length || shelf === 'all' ? ` (${shelfCounts[shelf]})` : ''}
+					</button>
+				{/if}
+			{/each}
+		{/if}
 	</div>
 
 	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
@@ -86,18 +223,41 @@
 			{@const lastChapter = data.progressMap[book.slug]}
 			{@const genres = parseGenres(book.genres)}
 			{@const bookShelf = shelfMap[book.slug] ?? ''}
+			{@const isSelected = selected.has(book.slug)}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<a
 				href="/books/{book.slug}"
-				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
+				onclick={(e) => onCardClick(e, book.slug)}
+				onpointerdown={() => onPointerDown(book.slug)}
+				onpointerup={onPointerUp}
+				onpointercancel={onPointerCancel}
+				draggable="false"
+				class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-colors select-none
+					{isSelected
+						? 'border-(--color-brand) ring-2 ring-(--color-brand)/40'
+						: 'border-(--color-border) hover:bg-(--color-surface-3) hover:border-zinc-500'}"
 			>
+				<!-- Selection overlay -->
+				{#if selectMode}
+					<div class="absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors
+						{isSelected ? 'bg-(--color-brand) border-(--color-brand)' : 'bg-black/40 border-white/60'}">
+						{#if isSelected}
+							<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+							</svg>
+						{/if}
+					</div>
+				{/if}
+
 				<!-- Cover image -->
 				<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden">
 					{#if book.cover}
 						<img
 							src={book.cover}
 							alt={book.title}
-							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 {selectMode ? 'pointer-events-none' : ''}"
 							loading="lazy"
+							draggable="false"
 						/>
 					{:else}
 						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
@@ -148,3 +308,73 @@
 		{/each}
 	</div>
 {/if}
+
+<!-- Bulk action bar (sticky bottom, shown in selection mode) -->
+{#if selectMode}
+	<div class="fixed bottom-0 left-0 right-0 z-50 bg-(--color-surface-2) border-t border-(--color-border) px-4 py-3 flex items-center gap-3 shadow-lg">
+		<span class="text-sm text-(--color-muted) mr-auto">
+			{selectedCount} selected
+		</span>
+
+		<!-- Move to shelf picker -->
+		<div class="relative">
+			<button
+				type="button"
+				disabled={busy || selectedCount === 0}
+				onclick={() => (shelfPickerOpen = !shelfPickerOpen)}
+				class="px-3 py-2 rounded-lg text-sm font-medium transition-colors
+					bg-(--color-surface-3) text-(--color-text) border border-(--color-border)
+					hover:border-zinc-500 disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1.5"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+						d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+				</svg>
+				Move to shelf
+				<svg class="w-3.5 h-3.5 transition-transform {shelfPickerOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+				</svg>
+			</button>
+
+			{#if shelfPickerOpen}
+				<div class="absolute bottom-full mb-2 right-0 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl overflow-hidden min-w-[160px]">
+					{#each ([['', 'Reading'], ['plan_to_read', 'Plan to Read'], ['completed', 'Completed'], ['dropped', 'Dropped']] as const) as [val, label]}
+						<button
+							type="button"
+							onclick={() => bulkMoveShelf(val as Shelf)}
+							class="w-full text-left px-4 py-2.5 text-sm text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
+						>
+							{label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Remove button -->
+		<button
+			type="button"
+			disabled={busy || selectedCount === 0}
+			onclick={bulkRemove}
+			class="px-3 py-2 rounded-lg text-sm font-medium transition-colors
+				bg-red-500/10 text-red-400 border border-red-500/30
+				hover:bg-red-500/20 disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1.5"
+		>
+			{#if busy}
+				<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+				</svg>
+			{:else}
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+						d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+				</svg>
+			{/if}
+			Remove
+		</button>
+	</div>
+
+	<!-- Spacer so last row of cards isn't hidden behind the action bar -->
+	<div class="h-20"></div>
+{/if}

ui/src/routes/books/[slug]/+page.server.ts

@@ -64,8 +64,9 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 				lastChapter: null,
 				userRating: 0,
 				ratingAvg: { avg: 0, count: 0 },
-				isAdmin: locals.user?.role === 'admin',
-				isLoggedIn: !!locals.user,
+		isAdmin: locals.user?.role === 'admin',
+		isPro: locals.isPro,
+		isLoggedIn: !!locals.user,
 				currentUserId: locals.user?.id ?? '',
 				scraping: true,
 				taskId: body.task_id

ui/src/routes/books/[slug]/+page.svelte

@@ -326,7 +326,7 @@
 	let chapNamesPreview = $state<{ number: number; old_title: string; new_title: string; edited: string }[]>([]);
 	let chapNamesApplying = $state(false);
 	let chapNamesResult = $state<'applied' | 'error' | ''>('');
-	let chapNamesPattern = $state('Chapter {n}: {scene}');
+	let chapNamesPattern = $state('{scene}');
 	let chapNamesBatchProgress = $state('');
 	let chapNamesBatchWarnings = $state<string[]>([]);
 
@@ -342,7 +342,7 @@
 			const res = await fetch('/api/admin/text-gen/chapter-names', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ slug, pattern: chapNamesPattern.trim() || 'Chapter {n}: {scene}' })
+				body: JSON.stringify({ slug, pattern: chapNamesPattern.trim() || '{scene}' })
 			});
 			if (!res.ok) {
 				chapNamesResult = 'error';
@@ -633,22 +633,6 @@
 					{/if}
 				</div>
 
-				<!-- Summary with expand toggle -->
-				{#if book.summary}
-					<div class="mt-1">
-						<p class="text-(--color-muted) text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
-							{book.summary}
-						</p>
-						{#if book.summary.length > 220}
-							<button
-								onclick={() => (summaryExpanded = !summaryExpanded)}
-								class="text-xs text-(--color-brand)/70 hover:text-(--color-brand) mt-1 transition-colors"
-							>
-								{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
-							</button>
-						{/if}
-					</div>
-				{/if}
 
 				<!-- CTA buttons — desktop only -->
 				<div class="hidden sm:flex gap-2 mt-3 items-center flex-wrap">
@@ -825,6 +809,34 @@
 	</div>
 </div>
 
+<!-- ── Book description ──────────────────────────────────────────────────────── -->
+{#if book.summary}
+<div class="mb-6">
+	<div class="relative">
+		<p
+			class="text-(--color-muted) text-sm leading-7 break-words whitespace-pre-line {summaryExpanded ? '' : 'line-clamp-5'}"
+		>
+			{book.summary}
+		</p>
+		{#if !summaryExpanded && book.summary.length > 300}
+			<!-- gradient fade over the last line when collapsed -->
+			<div class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-(--color-surface) to-transparent pointer-events-none"></div>
+		{/if}
+	</div>
+	{#if book.summary.length > 300}
+		<button
+			onclick={() => (summaryExpanded = !summaryExpanded)}
+			class="mt-2 text-xs text-(--color-brand)/70 hover:text-(--color-brand) transition-colors inline-flex items-center gap-1"
+		>
+			{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
+			<svg class="w-3 h-3 transition-transform {summaryExpanded ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+			</svg>
+		</button>
+	{/if}
+</div>
+{/if}
+
 <!-- ══════════════════════════════════════════════════ Download row ══ -->
 {#if data.inLib && chapterList.length > 0}
 <div class="flex items-center gap-3 border border-(--color-border) rounded-xl px-4 py-3 mb-4">
@@ -835,13 +847,22 @@
 		<p class="text-sm font-medium text-(--color-text)">Download</p>
 		<p class="text-xs text-(--color-muted)">All {chapterList.length} chapters as EPUB</p>
 	</div>
-	<a
-		href="/api/export/{book.slug}"
-		download="{book.slug}.epub"
-		class="px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-sm font-medium text-(--color-muted) hover:text-(--color-text) hover:border-zinc-500 transition-colors flex-shrink-0"
-	>
-		.epub
-	</a>
+	{#if data.isPro}
+		<a
+			href="/api/export/{book.slug}"
+			download="{book.slug}.epub"
+			class="px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-sm font-medium text-(--color-muted) hover:text-(--color-text) hover:border-zinc-500 transition-colors flex-shrink-0"
+		>
+			.epub
+		</a>
+	{:else}
+		<a
+			href="/profile"
+			class="px-3 py-1.5 rounded-lg bg-(--color-brand)/15 border border-(--color-brand)/30 text-sm font-medium text-(--color-brand) hover:bg-(--color-brand)/25 transition-colors flex-shrink-0"
+		>
+			Pro
+		</a>
+	{/if}
 </div>
 {/if}
 
@@ -1135,7 +1156,7 @@
 					<input
 						type="text"
 						bind:value={chapNamesPattern}
-						placeholder="Chapter {'{n}'}: {'{scene}'}"
+						placeholder="{'{scene}'}"
 						class="w-full px-2 py-1.5 rounded bg-(--color-surface-3) border border-(--color-border) text-(--color-text) text-xs focus:outline-none focus:border-(--color-brand)"
 					/>
 					<div class="flex items-center gap-3 flex-wrap">

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -53,6 +53,8 @@
 	type ReadWidth   = 'narrow' | 'normal' | 'wide';
 	type ParaStyle   = 'spaced' | 'indented';
 	type PlayerStyle = 'standard' | 'compact';
+	/** Controls how many lines fit on a page by adjusting the container height offset. */
+	type PageLines   = 'less' | 'normal' | 'more';
 
 	interface LayoutPrefs {
 		readMode:    ReadMode;
@@ -61,12 +63,19 @@
 		paraStyle:   ParaStyle;
 		focusMode:   boolean;
 		playerStyle: PlayerStyle;
+		pageLines:   PageLines;
 	}
 
 	const LAYOUT_KEY = 'reader_layout_v1';
-	const LINE_HEIGHTS: Record<LineSpacing, number> = { compact: 1.55, normal: 1.85, relaxed: 2.2 };
-	const READ_WIDTHS:  Record<ReadWidth,   string>  = { narrow: '58ch', normal: '72ch', wide: 'min(90ch, 100%)' };
-	const DEFAULT_LAYOUT: LayoutPrefs = { readMode: 'scroll', lineSpacing: 'normal', readWidth: 'normal', paraStyle: 'spaced', focusMode: false, playerStyle: 'standard' };
+	const LINE_HEIGHTS:    Record<LineSpacing, number> = { compact: 1.55, normal: 1.85, relaxed: 2.2 };
+	const READ_WIDTHS:     Record<ReadWidth,   string> = { narrow: '58ch', normal: '72ch', wide: 'min(90ch, 100%)' };
+	/**
+	 * Extra rem subtracted from (or added to) the paginated container height.
+	 * Normal (0rem) keeps the existing calc(); Less (-4rem) makes the container
+	 * shorter so fewer lines fit per page; More (+4rem) grows it for more lines.
+	 */
+	const PAGE_LINES_OFFSET: Record<PageLines, string> = { less: '4rem', normal: '0rem', more: '-4rem' };
+	const DEFAULT_LAYOUT: LayoutPrefs = { readMode: 'scroll', lineSpacing: 'normal', readWidth: 'normal', paraStyle: 'spaced', focusMode: false, playerStyle: 'standard', pageLines: 'normal' };
 
 	function loadLayout(): LayoutPrefs {
 		if (!browser) return DEFAULT_LAYOUT;
@@ -114,8 +123,10 @@
 
 	$effect(() => {
 		if (layout.readMode !== 'paginated') { pageIndex = 0; totalPages = 1; return; }
-		// Re-run when html changes or container is bound
+		// Re-run when html, container refs, or mini-player visibility changes
+		// (mini-player adds pb-24 which reduces the available viewport height)
 		void html; void paginatedContainerEl; void paginatedContentEl;
+		void audioStore.active; void audioExpanded;
 		requestAnimationFrame(() => {
 			if (!paginatedContainerEl || !paginatedContentEl) return;
 			const h = paginatedContainerEl.clientHeight;
@@ -139,10 +150,14 @@
 		}
 	}
 
-	// Keyboard nav for paginated mode
+	// Keyboard nav for paginated mode + Escape to close settings overlay
 	$effect(() => {
 		if (!browser) return;
 		function onKey(e: KeyboardEvent) {
+			if (e.key === 'Escape' && settingsPanelOpen) {
+				settingsPanelOpen = false;
+				return;
+			}
 			if (layout.readMode !== 'paginated') return;
 			if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {
 				e.preventDefault();
@@ -287,6 +302,15 @@
 		html ? (html.replace(/<[^>]*>/g, '').match(/\S+/g)?.length ?? 0) : 0
 	);
 
+	// Strip scraper artifacts from chapter titles:
+	//  - Leading digit(s) prefixed before "Chapter" (e.g. "6Chapter 6 : ...")
+	//  - Everything after the first newline (often includes a scraped date)
+	const cleanTitle = $derived.by(() => {
+		let t = (data.chapter.title || '').split('\n')[0].trim();
+		t = t.replace(/^\d+(?=Chapter)/i, '').trim();
+		return t || `Chapter ${data.chapter.number}`;
+	});
+
 	// Audio panel: auto-open if this chapter is already loaded/playing in the store
 	// svelte-ignore state_referenced_locally
 	let audioExpanded = $state(
@@ -301,7 +325,7 @@
 </script>
 
 <svelte:head>
-	<title>{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })} — {data.book.title} — libnovel</title>
+	<title>{cleanTitle} — {data.book.title} — libnovel</title>
 </svelte:head>
 
 <!-- Reading progress bar (scroll mode, fixed at top of viewport) -->
@@ -364,8 +388,11 @@
 
 <!-- Chapter heading + meta + language switcher -->
 <div class="mb-6">
+	<p class="text-xs font-semibold text-(--color-brand) uppercase tracking-widest mb-1.5">
+		{m.reader_chapter_n({ n: String(data.chapter.number) })}
+	</p>
 	<h1 class="text-xl font-bold text-(--color-text) leading-snug">
-		{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
+		{cleanTitle}
 	</h1>
 	<div class="flex items-center flex-wrap gap-x-3 gap-y-1.5 mt-2">
 		{#if wordCount > 0}
@@ -375,6 +402,9 @@
 				~{Math.max(1, Math.round(wordCount / 200))} min
 			</p>
 		{/if}
+		{#if data.chapter.date_label}
+			<span class="text-(--color-muted) text-xs opacity-60">{data.chapter.date_label}</span>
+		{/if}
 
 		<!-- Language switcher (inline, compact) -->
 		{#if !data.isPreview}
@@ -471,18 +501,28 @@
 			</button>
 			{#if audioExpanded}
 				<div class="border border-t-0 border-(--color-border) rounded-b-lg overflow-hidden">
-					<AudioPlayer
-						slug={data.book.slug}
-						chapter={data.chapter.number}
-						chapterTitle={data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
-						bookTitle={data.book.title}
-						cover={data.book.cover}
-						nextChapter={data.next}
-						chapters={data.chapters}
-						voices={data.voices}
-						playerStyle={layout.playerStyle}
-						onProRequired={() => { audioProRequired = true; }}
-					/>
+					{#if audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number && audioStore.active}
+						<!-- Mini-player is already playing this chapter — don't duplicate controls -->
+						<div class="px-4 py-3 flex items-center gap-2 text-sm text-(--color-muted)">
+							<svg class="w-4 h-4 text-(--color-brand) shrink-0" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
+							</svg>
+							<span>Controls are in the player bar below.</span>
+						</div>
+					{:else}
+						<AudioPlayer
+							slug={data.book.slug}
+							chapter={data.chapter.number}
+							chapterTitle={cleanTitle}
+							bookTitle={data.book.title}
+							cover={data.book.cover}
+							nextChapter={data.next}
+							chapters={data.chapters}
+							voices={data.voices}
+							playerStyle={layout.playerStyle}
+							onProRequired={() => { audioProRequired = true; }}
+						/>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -513,7 +553,9 @@
 		role="none"
 		bind:this={paginatedContainerEl}
 		class="paginated-container mt-8"
-		style="height: {layout.focusMode ? 'calc(100svh - 8rem)' : 'calc(100svh - 26rem)'};"
+		style="height: {layout.focusMode
+			? 'calc(100svh - 8rem)'
+			: `calc(100svh - 26rem - ${PAGE_LINES_OFFSET[layout.pageLines]})`};"
 		onclick={handlePaginatedClick}
 	>
 		<div
@@ -607,65 +649,78 @@
 
 <!-- ── Focus mode floating nav ───────────────────────────────────────────── -->
 {#if layout.focusMode}
-<div class="fixed bottom-[4.5rem] left-1/2 -translate-x-1/2 z-50 flex items-center gap-2">
-	{#if data.prev}
-		<a
-			href="/books/{data.book.slug}/chapters/{data.prev}"
-			class="flex items-center gap-1 px-3 py-1.5 rounded-full bg-(--color-surface-2)/90 backdrop-blur border border-(--color-border) text-(--color-muted) hover:text-(--color-text) text-xs transition-colors shadow-md"
+<div class="fixed {audioStore.active ? 'bottom-[4.5rem]' : 'bottom-6'} left-1/2 -translate-x-1/2 z-50">
+	<div class="flex items-center divide-x divide-(--color-border) rounded-full bg-(--color-surface-2)/95 backdrop-blur border border-(--color-border) shadow-lg text-xs text-(--color-muted) overflow-hidden">
+		{#if data.prev}
+			<a
+				href="/books/{data.book.slug}/chapters/{data.prev}"
+				class="flex items-center gap-1 px-3 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
+				aria-label="Previous chapter"
+			>
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+				</svg>
+				{m.reader_chapter_n({ n: String(data.prev) })}
+			</a>
+		{/if}
+		<button
+			type="button"
+			onclick={() => setLayout('focusMode', false)}
+			class="flex items-center gap-1 px-3 py-2 hover:text-(--color-brand) hover:bg-(--color-surface-3) transition-colors"
+			aria-label="Exit focus mode"
 		>
 			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
 			</svg>
-			{m.reader_chapter_n({ n: String(data.prev) })}
-		</a>
-	{/if}
-	<button
-		type="button"
-		onclick={() => setLayout('focusMode', false)}
-		class="flex items-center gap-1 px-3 py-1.5 rounded-full bg-(--color-surface-2)/90 backdrop-blur border border-(--color-border) text-(--color-muted) hover:text-(--color-brand) text-xs transition-colors shadow-md"
-		aria-label="Exit focus mode"
-	>
-		<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-		</svg>
-		Exit focus
-	</button>
-	{#if data.next}
-		<a
-			href="/books/{data.book.slug}/chapters/{data.next}"
-			class="flex items-center gap-1 px-3 py-1.5 rounded-full bg-(--color-surface-2)/90 backdrop-blur border border-(--color-border) text-(--color-muted) hover:text-(--color-text) text-xs transition-colors shadow-md"
-		>
-			{m.reader_chapter_n({ n: String(data.next) })}
-			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-			</svg>
-		</a>
-	{/if}
+			Exit focus
+		</button>
+		{#if data.next}
+			<a
+				href="/books/{data.book.slug}/chapters/{data.next}"
+				class="flex items-center gap-1 px-3 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
+				aria-label="Next chapter"
+			>
+				{m.reader_chapter_n({ n: String(data.next) })}
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+				</svg>
+			</a>
+		{/if}
+	</div>
 </div>
 {/if}
 
-<!-- ── Reader settings bottom sheet ─────────────────────────────────────── -->
+<!-- ── Reader settings overlay ───────────────────────────────────────────── -->
 {#if settingsCtx}
 {#if settingsPanelOpen}
-<!-- Backdrop -->
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div role="none" class="fixed inset-0 z-40 bg-black/40" onclick={() => (settingsPanelOpen = false)}></div>
-
-<div class="fixed bottom-0 left-0 right-0 z-50 bg-(--color-surface-2) border-t border-(--color-border) rounded-t-2xl shadow-2xl flex flex-col max-h-[80dvh]">
-
-	<!-- Drag handle -->
-	<div class="flex justify-center pt-3 pb-1 shrink-0">
-		<div class="w-10 h-1 rounded-full bg-(--color-border)"></div>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0 z-50 flex flex-col"
+	style="background: var(--color-surface);"
+>
+	<!-- Header -->
+	<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+		<button
+			type="button"
+			onclick={() => (settingsPanelOpen = false)}
+			class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+			aria-label="Close settings"
+		>
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+			</svg>
+		</button>
+		<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Reader Settings</span>
 	</div>
 
 	<!-- Tab bar -->
-	<div class="flex gap-1 mx-4 mb-3 p-1 rounded-xl bg-(--color-surface-3) shrink-0">
+	<div class="flex gap-1 mx-4 mt-3 mb-1 p-1 rounded-xl bg-(--color-surface-2) shrink-0 border border-(--color-border)">
 		<button
 			type="button"
 			onclick={() => (settingsTab = 'reading')}
 			class="flex-1 py-1.5 rounded-lg text-xs font-semibold transition-colors
 				{settingsTab === 'reading'
-					? 'bg-(--color-surface-2) text-(--color-text) shadow-sm'
+					? 'bg-(--color-brand) text-(--color-surface)'
 					: 'text-(--color-muted) hover:text-(--color-text)'}"
 		>Reading</button>
 		<button
@@ -673,13 +728,13 @@
 			onclick={() => (settingsTab = 'listening')}
 			class="flex-1 py-1.5 rounded-lg text-xs font-semibold transition-colors
 				{settingsTab === 'listening'
-					? 'bg-(--color-surface-2) text-(--color-text) shadow-sm'
+					? 'bg-(--color-brand) text-(--color-surface)'
 					: 'text-(--color-muted) hover:text-(--color-text)'}"
 		>Listening</button>
 	</div>
 
 	<!-- Scrollable content -->
-	<div class="overflow-y-auto px-4 pb-6 flex flex-col gap-0">
+	<div class="flex-1 overflow-y-auto px-4 pb-6 flex flex-col gap-0 mt-2">
 
 		{#if settingsTab === 'reading'}
 
@@ -745,6 +800,25 @@
 					</div>
 				</div>
 
+				{#if layout.readMode === 'paginated'}
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-16 shrink-0">Lines</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['less', 'Few'], ['normal', 'Normal'], ['more', 'Many']] as const) as [v, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('pageLines', v)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.pageLines === v
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.pageLines === v}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+				{/if}
+
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-16 shrink-0">Spacing</span>
 					<div class="flex gap-1.5 flex-1">

ui/src/routes/catalogue/+page.svelte

@@ -591,7 +591,7 @@
 								<button
 									onclick={(e) => { e.preventDefault(); scrapeNovel(novel); }}
 									disabled={scraping[novel.slug]}
-									class="w-full text-xs px-2 py-1 rounded bg-amber-500/20 text-(--color-brand-dim) hover:bg-amber-500/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-amber-500/30"
+									class="w-full text-xs px-2 py-1 rounded bg-amber-500 text-zinc-900 font-semibold hover:bg-amber-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 								>
 									{scraping[novel.slug] ? m.catalogue_scraping_novel() : m.catalogue_scrape_novel_button()}
 								</button>
@@ -694,7 +694,7 @@
 							<button
 								onclick={() => scrapeNovel(novel)}
 								disabled={scraping[novel.slug]}
-								class="text-xs px-2.5 py-1 rounded bg-amber-500/20 text-(--color-brand-dim) hover:bg-amber-500/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-amber-500/30 whitespace-nowrap"
+								class="text-xs px-2.5 py-1 rounded bg-amber-500 text-zinc-900 font-semibold hover:bg-amber-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
 							>
 								{scraping[novel.slug] ? m.catalogue_scraping_novel() : m.catalogue_scrape_novel_button()}
 							</button>