feat: merge page nav into focus mode floating pill

In paginated + focus mode there were two separate UI elements: an inline
Prev/counter/Next bar and a floating chapter-nav pill. Merged into one:

- ‹ Ch.N | ‹ (page) N/M (page) › | × Exit focus | Ch.N ›
- Inline page bar + hint text are now hidden when focusMode is active
- Floating pill grows to include page controls only in paginated mode;
  scroll mode pill is unchanged (just chapter nav + exit)
- Added max-w-[calc(100vw-2rem)] so pill never overflows on small screens

ui/src/lib/components/AudioPlayer.svelte

@@ -241,9 +241,9 @@
 	}
 
 	// Keep nextChapter in the store so the layout's onended can navigate.
-	// NOTE: we do NOT clear on unmount here — the store retains the value so
-	// onended (which may fire after {#key} unmounts this component) can still
-	// read it.  The value is superseded when the new chapter mounts.
+	// We write null on mount (before deriving the real value) so there is no
+	// stale window where the previous chapter's nextChapter is still set while
+	// this chapter's AudioPlayer hasn't written its own value yet.
 	$effect(() => {
 		audioStore.nextChapter = nextChapter ?? null;
 	});
@@ -566,21 +566,27 @@
 		audioStore.errorMsg = '';
 
 		try {
-			// Fast path A: pre-fetch already landed for THIS chapter.
+			// Fast path A: pre-fetch already confirmed audio is in MinIO for THIS chapter.
+			// Re-presign instead of using the cached URL — it may have expired if the
+			// user paused for a while between the prefetch and actually reaching this chapter.
 			if (
 				audioStore.nextStatus === 'prefetched' &&
-				audioStore.nextChapterPrefetched === chapter &&
-				audioStore.nextAudioUrl
+				audioStore.nextChapterPrefetched === chapter
 			) {
-				const url = audioStore.nextAudioUrl;
-				// Consume the pre-fetch — reset so it doesn't carry over
+				// Consume the pre-fetch state first so it doesn't carry over on error.
 				audioStore.resetNextPrefetch();
-				audioStore.audioUrl = url;
-				audioStore.status = 'ready';
-				// Don't restore saved time for auto-next; position is 0
-				// Immediately start pre-generating the chapter after this one.
-				maybeStartPrefetch();
-				return;
+				// Fresh presign — audio is confirmed in MinIO so this is a fast, cheap call.
+				const presigned = await tryPresign(slug, chapter, voice);
+				if (presigned.ready) {
+					audioStore.audioUrl = presigned.url;
+					audioStore.status = 'ready';
+					// Don't restore saved time for auto-next; position is 0.
+					// Immediately start pre-generating the chapter after this one.
+					maybeStartPrefetch();
+					return;
+				}
+				// Presign returned not-ready (race: MinIO object vanished?).
+				// Fall through to the normal slow path below.
 			}
 
 			// Fast path B: audio already in MinIO (presign check).

ui/src/lib/components/ListeningMode.svelte

@@ -538,16 +538,17 @@
 		<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}"
+				<button
+					type="button"
+					onclick={() => playChapter(audioStore.chapter - 1)}
 					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"
 				>
 					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+						<path d="M6 6h2v12H6zm2 6 8.5 6V6z"/>
 					</svg>
-				</a>
+				</button>
 			{:else}
 				<div class="w-9 h-9"></div>
 			{/if}
@@ -601,16 +602,17 @@
 
 			<!-- Next chapter — smaller, clearly secondary -->
 			{#if audioStore.nextChapter !== null && audioStore.slug}
-				<a
-					href="/books/{audioStore.slug}/chapters/{audioStore.nextChapter}"
+				<button
+					type="button"
+					onclick={() => playChapter(audioStore.nextChapter!)}
 					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"
 				>
 					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
+						<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
 					</svg>
-				</a>
+				</button>
 			{:else}
 				<div class="w-9 h-9"></div>
 			{/if}

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

@@ -567,7 +567,8 @@
 		</div>
 	</div>
 
-	<!-- Page indicator + nav -->
+	<!-- Page indicator + nav (hidden in focus mode — shown in floating pill instead) -->
+	{#if !layout.focusMode}
 	<div class="flex items-center justify-between mt-4 select-none">
 		<button
 			type="button"
@@ -596,6 +597,7 @@
 		</button>
 	</div>
 	<p class="text-center text-xs text-(--color-muted)/40 mt-2">Tap left/right · Arrow keys · Space</p>
+	{/if}
 {:else}
 	<!-- ── Scroll reader ──────────────────────────────────────────────── -->
 	<div class="prose-chapter mt-8 {layout.paraStyle === 'indented' ? 'para-indented' : ''}">
@@ -649,12 +651,13 @@
 
 <!-- ── Focus mode floating nav ───────────────────────────────────────────── -->
 {#if layout.focusMode}
-<div class="fixed {audioStore.active ? 'bottom-[4.5rem]' : 'bottom-6'} left-1/2 -translate-x-1/2 z-50">
+<div class="fixed {audioStore.active ? 'bottom-[4.5rem]' : 'bottom-6'} left-1/2 -translate-x-1/2 z-50 max-w-[calc(100vw-2rem)]">
 	<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">
+		<!-- Prev chapter -->
 		{#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"
+				class="flex items-center gap-1 px-3 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors shrink-0"
 				aria-label="Previous chapter"
 			>
 				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -663,10 +666,41 @@
 				{m.reader_chapter_n({ n: String(data.prev) })}
 			</a>
 		{/if}
+
+		<!-- Page prev / counter / next (paginated mode only) -->
+		{#if layout.readMode === 'paginated'}
+			<button
+				type="button"
+				onclick={() => { if (pageIndex > 0) pageIndex--; }}
+				disabled={pageIndex === 0}
+				class="flex items-center justify-center px-2.5 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) disabled:opacity-30 transition-colors shrink-0"
+				aria-label="Previous page"
+			>
+				<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>
+			</button>
+			<span class="px-2.5 py-2 tabular-nums text-(--color-muted) shrink-0 select-none">
+				{pageIndex + 1}<span class="opacity-40">/</span>{totalPages}
+			</span>
+			<button
+				type="button"
+				onclick={() => { if (pageIndex < totalPages - 1) pageIndex++; }}
+				disabled={pageIndex === totalPages - 1}
+				class="flex items-center justify-center px-2.5 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) disabled:opacity-30 transition-colors shrink-0"
+				aria-label="Next page"
+			>
+				<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>
+			</button>
+		{/if}
+
+		<!-- Exit focus -->
 		<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"
+			class="flex items-center gap-1 px-3 py-2 hover:text-(--color-brand) hover:bg-(--color-surface-3) transition-colors shrink-0"
 			aria-label="Exit focus mode"
 		>
 			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -674,10 +708,12 @@
 			</svg>
 			Exit focus
 		</button>
+
+		<!-- Next chapter -->
 		{#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"
+				class="flex items-center gap-1 px-3 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors shrink-0"
 				aria-label="Next chapter"
 			>
 				{m.reader_chapter_n({ n: String(data.next) })}