feat: listening settings panel + compact player style

- AudioPlayer: add 'compact' playerStyle prop — slim seekable player with
  progress bar, skip ±15/30s, play/pause circle button, and speed cycle
- Chapter reader settings gear panel: new Listening section with player
  style picker (Standard/Compact), speed control (0.75–2×), auto-next
  toggle, and sleep timer — all persisted in reader_layout_v1 localStorage
- audioStore.speed/autoNext/sleep now accessible directly from settings
  panel without opening the audio player

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/lib/components/AudioPlayer.svelte

@@ -69,6 +69,8 @@
 		voices?: Voice[];
 		/** Called when the server returns 402 (free daily limit reached). */
 		onProRequired?: () => void;
+		/** Visual style of the player card. 'standard' = full controls; 'compact' = slim seekable player. */
+		playerStyle?: 'standard' | 'compact';
 	}
 
 	let {
@@ -80,7 +82,8 @@
 		nextChapter = null,
 		chapters = [],
 		voices = [],
-		onProRequired = undefined
+		onProRequired = undefined,
+		playerStyle = 'standard'
 	}: Props = $props();
 
 	// ── Derived: voices grouped by engine ──────────────────────────────────
@@ -738,6 +741,24 @@
 		if (m > 0) return `${m}m`;
 		return `${s}s`;
 	}
+
+	// ── Compact player helpers ─────────────────────────────────────────────────
+	const playPct = $derived(
+		audioStore.duration > 0 ? (audioStore.currentTime / audioStore.duration) * 100 : 0
+	);
+
+	const SPEED_OPTIONS = [0.75, 1, 1.25, 1.5, 2] as const;
+	function cycleSpeed() {
+		const idx = SPEED_OPTIONS.indexOf(audioStore.speed as (typeof SPEED_OPTIONS)[number]);
+		audioStore.speed = SPEED_OPTIONS[(idx + 1) % SPEED_OPTIONS.length];
+	}
+
+	function seekFromCompactBar(e: MouseEvent) {
+		if (audioStore.duration <= 0) return;
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		audioStore.seekRequest = pct * audioStore.duration;
+	}
 </script>
 
 <svelte:window onkeydown={handleKeyDown} />
@@ -788,6 +809,121 @@
 	</div>
 {/snippet}
 
+{#if playerStyle === 'compact'}
+<!-- ── Compact player ──────────────────────────────────────────────────────── -->
+<div class="mt-4 p-3 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
+	{#if audioStore.isCurrentChapter(slug, chapter)}
+		{#if audioStore.status === 'idle' || audioStore.status === 'error'}
+			{#if audioStore.status === 'error'}
+				<p class="text-(--color-danger) text-xs mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
+			{/if}
+			<Button variant="default" size="sm" onclick={handlePlay}>
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+				{m.reader_play_narration()}
+			</Button>
+
+		{:else if audioStore.status === 'loading'}
+			<div class="flex items-center gap-2 text-xs text-(--color-muted)">
+				<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+				</svg>
+				{m.player_loading()}
+			</div>
+
+		{:else if audioStore.status === 'generating'}
+			<div class="space-y-1.5">
+				<div class="flex items-center justify-between text-xs text-(--color-muted)">
+					<span>{m.reader_generating_narration()}</span>
+					<span class="tabular-nums">{Math.round(audioStore.progress)}%</span>
+				</div>
+				<div class="w-full h-1 bg-(--color-surface-3) rounded-full overflow-hidden">
+					<div class="h-full bg-(--color-brand) rounded-full transition-none" style="width: {audioStore.progress}%"></div>
+				</div>
+			</div>
+
+		{:else if audioStore.status === 'ready'}
+			<div class="space-y-2">
+				<!-- Seekable progress bar -->
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<div
+					class="w-full h-1.5 bg-(--color-surface-3) rounded-full overflow-hidden cursor-pointer group"
+					onclick={seekFromCompactBar}
+				>
+					<div class="h-full bg-(--color-brand) rounded-full transition-none" style="width: {playPct}%"></div>
+				</div>
+				<!-- Controls row -->
+				<div class="flex items-center gap-2">
+					<!-- Skip back 15s -->
+					<button
+						type="button"
+						onclick={() => { audioStore.seekRequest = Math.max(0, audioStore.currentTime - 15); }}
+						class="text-(--color-muted) hover:text-(--color-text) transition-colors flex-shrink-0"
+						title="-15s"
+					>
+						<svg class="w-4 h-4" 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"/>
+						</svg>
+					</button>
+					<!-- Play/pause -->
+					<button
+						type="button"
+						onclick={() => { audioStore.toggleRequest++; }}
+						class="w-8 h-8 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) transition-colors flex-shrink-0"
+					>
+						{#if audioStore.isPlaying}
+							<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+						{:else}
+							<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+						{/if}
+					</button>
+					<!-- Skip forward 30s -->
+					<button
+						type="button"
+						onclick={() => { audioStore.seekRequest = Math.min(audioStore.duration || 0, audioStore.currentTime + 30); }}
+						class="text-(--color-muted) hover:text-(--color-text) transition-colors flex-shrink-0"
+						title="+30s"
+					>
+						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6v4l5-5-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8h-2z"/>
+						</svg>
+					</button>
+					<!-- Time display -->
+					<span class="flex-1 text-xs text-center tabular-nums text-(--color-muted)">
+						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+					</span>
+					<!-- Speed cycle -->
+					<button
+						type="button"
+						onclick={cycleSpeed}
+						class="text-xs font-medium text-(--color-muted) hover:text-(--color-text) flex-shrink-0 tabular-nums transition-colors"
+						title="Playback speed"
+					>
+						{audioStore.speed}×
+					</button>
+				</div>
+			</div>
+		{/if}
+
+	{:else if audioStore.active}
+		<div class="flex items-center justify-between gap-3">
+			<p class="text-xs text-(--color-muted)">
+				{m.reader_now_playing({ title: audioStore.chapterTitle || `Ch.${audioStore.chapter}` })}
+			</p>
+			<Button variant="secondary" size="sm" class="flex-shrink-0" onclick={startPlayback}>
+				{m.reader_load_this_chapter()}
+			</Button>
+		</div>
+
+	{:else}
+		<Button variant="default" size="sm" onclick={handlePlay}>
+			<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+			{m.reader_play_narration()}
+		</Button>
+	{/if}
+</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">
@@ -1026,3 +1162,4 @@
 		</Button>
 	{/if}
 </div>
+{/if}