diff --git a/ui/src/lib/components/ListeningMode.svelte b/ui/src/lib/components/ListeningMode.svelte
index 8863cff..9155d0d 100644
--- a/ui/src/lib/components/ListeningMode.svelte
+++ b/ui/src/lib/components/ListeningMode.svelte
@@ -26,6 +26,56 @@
 	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;
+
+	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)));
@@ -187,7 +237,20 @@
 
 <!-- Full-screen listening mode overlay -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="fixed inset-0 z-60 flex flex-col overflow-hidden" style="background: var(--color-surface);">
+<div
+	class="fixed inset-0 z-60 flex flex-col overflow-hidden"
+	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;
+	"
+	ontouchstart={onTouchStart}
+	ontouchmove|nonpassive={onTouchMove}
+	ontouchend={onTouchEnd}
+>
 
 	<!-- ── Full-bleed cover hero (top ~50% of screen) ────────────────────── -->
 	<div class="relative w-full shrink-0" style="height: 52svh; min-height: 220px; max-height: 380px;">
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index c0057ab..dd37474 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.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();
 
@@ -953,8 +954,10 @@
 <!-- Listening mode — mounted at root level, independent of audioStore.active,
      so closing/pausing audio never tears it down and loses context. -->
 {#if listeningModeOpen}
-	<ListeningMode
-		onclose={() => { listeningModeOpen = false; listeningModeChapters = false; }}
-		openChapters={listeningModeChapters}
-	/>
+	<div transition:fly={{ y: '100%', duration: 320, opacity: 1 }}>
+		<ListeningMode
+			onclose={() => { listeningModeOpen = false; listeningModeChapters = false; }}
+			openChapters={listeningModeChapters}
+		/>
+	</div>
 {/if}