feat: add chapter announcing setting to audio player

When enabled, the Web Speech API speaks the upcoming chapter number and
title (e.g. 'Chapter 12 — The Final Battle') between auto-next chapters,
giving an audible cue before the next narration begins.

- AudioStore.announceChapter ( boolean, default false)
- PBUserSettings.announce_chapter persisted to PocketBase
- GET/PUT /api/settings includes announceChapter field
- +layout.server.ts loads + defaults the field
- +layout.svelte applies on load, saves in debounced PUT, and fires
  SpeechSynthesisUtterance in onended before navigating (falls back to
  immediate navigation if speechSynthesis is unavailable)
- ListeningMode: 'Announce' pill added to the Speed · Auto · Sleep row

ui/src/lib/components/ListeningMode.svelte

@@ -618,8 +618,8 @@
 			{/if}
 		</div>
 
-		<!-- Secondary controls: unified single row — Speed · Auto · Sleep -->
-		<div class="flex items-center justify-center gap-2 shrink-0">
+		<!-- Secondary controls: unified single row — Speed · Auto · Announce · Sleep -->
+		<div class="flex items-center justify-center gap-2 shrink-0 flex-wrap">
 			<!-- 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}
@@ -661,6 +661,25 @@
 				{/if}
 			</button>
 
+			<!-- Announce chapter pill (only meaningful when auto-next is on) -->
+			<button
+				type="button"
+				onclick={() => (audioStore.announceChapter = !audioStore.announceChapter)}
+				class={cn(
+					'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors',
+					audioStore.announceChapter
+						? 'border-(--color-brand) bg-(--color-brand)/15 text-(--color-brand)'
+						: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+				)}
+				aria-pressed={audioStore.announceChapter}
+				title={audioStore.announceChapter ? 'Chapter announcing on' : 'Chapter announcing off'}
+			>
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
+				</svg>
+				Announce
+			</button>
+
 			<!-- Sleep timer pill -->
 			<button
 				type="button"