diff --git a/src/components/ai-edition/NewEditorShell.module.css b/src/components/ai-edition/NewEditorShell.module.css
index bb96cc6c..19928dbe 100644
--- a/src/components/ai-edition/NewEditorShell.module.css
+++ b/src/components/ai-edition/NewEditorShell.module.css
@@ -1,2212 +1,2280 @@
-/* Editor shell — 4-row grid: titlebar · workbench · handle · bottombar.
- * Mirrors design/openscreen-editor.html. Tokens come from
- * src/styles/design-tokens.css (light + dark via :root[data-theme="dark"]). */
-
-.app {
-	display: grid;
-	grid-template-rows: var(--titlebar-h) 1fr var(--handle-h) var(--bottom-h);
-	height: 100vh;
-	min-width: 1024px;
-	background: var(--bg);
-	color: var(--fg);
-	font-family: var(--font-body);
-	font-size: var(--fs-app);
-	line-height: 1.5;
-	overflow: hidden;
-	user-select: none;
-}
-
-.app[data-collapse~="left"] {
-	--panel-w-left: 0px;
-}
-.app[data-collapse~="left"] .leftRail,
-.app[data-collapse~="left"] .leftPanel,
-.app[data-collapse~="left"] .handleLeft {
-	display: none;
-}
-
-.app[data-collapse~="right"] {
-	--panel-w-right: 0px;
-}
-.app[data-collapse~="right"] .rightStack,
-.app[data-collapse~="right"] .rightRail,
-.app[data-collapse~="right"] .handleRight {
-	display: none;
-}
-
-.app[data-collapse~="bottom"] {
-	--bottom-h: 0px;
-}
-.app[data-collapse~="bottom"] .bottombar {
-	display: none;
-}
-.app[data-collapse~="bottom"] .handleBottom {
-	display: none;
-}
-
-/* ─── titlebar ──────────────────────────────────────────────────── */
-.titlebar {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-3);
-	padding-inline: var(--sp-4);
-	background: var(--bg);
-	border-bottom: 1px solid var(--border-soft);
-	min-width: 0;
-	/* ponytail: make the titlebar the drag region in Electron. The buttons
-	 * opt out via inline -webkit-app-region: no-drag (see Titlebar.tsx). */
-	-webkit-app-region: drag;
-	app-region: drag;
-}
-.titlebar button,
-.titlebar input,
-.titlebar select,
-.titlebar textarea,
-.titlebar .langSel,
-.titlebar .recorderBtn {
-	-webkit-app-region: no-drag;
-	app-region: no-drag;
-}
-.titlebar .lights {
-	display: inline-flex;
-	gap: 6px;
-	margin-right: var(--sp-3);
-}
-.titlebar .lights span {
-	width: 11px;
-	height: 11px;
-	border-radius: 50%;
-	border: 1px solid var(--overlay-border);
-}
-.titlebar .lights .r { background: var(--light-red); }
-.titlebar .lights .y { background: var(--light-yellow); }
-.titlebar .lights .g { background: var(--light-green); }
-
-.titlebar .brand {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	font-family: var(--font-display);
-	font-size: var(--fs-title);
-	font-weight: 500;
-	letter-spacing: -0.005em;
-	color: var(--fg);
-}
-.titlebar .brandMark {
-	width: 18px;
-	height: 18px;
-	border-radius: 5px;
-	background: var(--accent);
-	display: grid;
-	place-items: center;
-	color: var(--accent-on);
-	font: 600 11px/1 var(--font-display);
-}
-.titlebar .sep {
-	width: 1px;
-	height: 16px;
-	background: var(--border);
-}
-.titlebar .project {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-2);
-	font-size: var(--fs-app);
-	color: var(--muted);
-	min-width: 0;
-}
-.titlebar .projectName {
-	color: var(--fg-2);
-	font-weight: 500;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	max-width: 280px;
-	background: transparent;
-	border: 0;
-	padding: 2px 6px;
-	border-radius: var(--r-sm);
-	cursor: text;
-	font: inherit;
-	-webkit-app-region: no-drag;
-	app-region: no-drag;
-}
-.titlebar .projectName:hover:not(:disabled) {
-	background: var(--surface-3);
-}
-.titlebar .projectInput {
-	background: var(--surface);
-	color: var(--fg);
-	border: 1px solid var(--accent);
-	border-radius: var(--r-sm);
-	padding: 2px 6px;
-	font: 500 13px var(--font-body);
-	outline: none;
-	min-width: 200px;
-	max-width: 360px;
-	-webkit-app-region: no-drag;
-	app-region: no-drag;
-}
-.titlebar .saved {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-family: var(--font-mono);
-	font-size: var(--fs-app-sm);
-	color: var(--muted);
-}
-.titlebar .saved .dot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--success);
-}
-.titlebar .projActions {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-1);
-	margin-right: var(--sp-1);
-}
-.titlebar .right {
-	margin-left: auto;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-1);
-}
-.titlebar .iconBtn {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--muted);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.titlebar .iconBtn:hover {
-	background: var(--surface-3);
-	color: var(--fg);
-}
-.titlebar .iconBtn[aria-pressed="true"] {
-	background: var(--accent-soft);
-	color: var(--accent);
-}
-.titlebar .langSel {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	height: 26px;
-	padding: 0 6px;
-	background: transparent;
-	border: 1px solid var(--border-soft);
-	border-radius: var(--r-md);
-	color: var(--fg-2);
-	font: 500 var(--fs-app)/1 var(--font-display);
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.titlebar .langSel:hover {
-	background: var(--surface-3);
-	border-color: var(--border);
-	color: var(--fg);
-}
-.titlebar .recorderBtn {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	height: 26px;
-	padding: 0 10px 0 8px;
-	border-radius: var(--r-md);
-	background: var(--accent-soft);
-	color: var(--accent);
-	border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-	font: 500 var(--fs-app-sm)/1 var(--font-display);
-	letter-spacing: 0.01em;
-	cursor: pointer;
-}
-.titlebar .recorderBtn:hover {
-	background: color-mix(in oklch, var(--accent) 18%, var(--surface-3));
-}
-
-/* ─── workbench — 7 columns: rail · panel · handle · preview · handle · stack · rail */
-.workbench {
-	display: grid;
-	grid-template-columns:
-		var(--rail-w)
-		var(--panel-w-left)
-		var(--handle-w)
-		1fr
-		var(--handle-w)
-		var(--panel-w-right)
-		var(--rail-w);
-	min-height: 0;
-	background: var(--bg);
-	overflow: hidden;
-}
-.workbench > * {
-	min-height: 0;
-}
-.workbench > * + * {
-	border-left: 1px solid var(--border-soft);
-}
-
-.leftPanel {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	min-height: 0;
-}
-
-/* ─── rails — vertical icon strips ─────────────────────────────── */
-.rail {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-1);
-	padding: var(--sp-2) 0;
-	background: var(--bg);
-	min-width: 0;
-}
-.rail button {
-	width: 36px;
-	height: 36px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-md);
-	color: var(--muted);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-	position: relative;
-}
-.rail button:hover {
-	background: var(--surface-3);
-	color: var(--fg);
-}
-.rail button[aria-pressed="true"] {
-	color: var(--accent);
-	background: var(--accent-soft);
-}
-.rail button[aria-pressed="true"]::before {
-	content: "";
-	position: absolute;
-	left: -8px;
-	top: 8px;
-	bottom: 8px;
-	width: 3px;
-	border-radius: 2px;
-	background: var(--accent);
-}
-.rail .sepH {
-	width: 24px;
-	height: 1px;
-	background: var(--border);
-	margin: var(--sp-1) 0;
-}
-
-/* ─── panels (chat, transcript, etc.) ──────────────────────────── */
-.panel {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 0;
-	min-width: 0;
-	min-height: 0;
-	background: var(--bg);
-	overflow: hidden;
-}
-
-/* Direct children of .panel: panelHeader (auto), panelBody (1fr), chatInput (auto). */
-.panel > .panelHeader,
-.panel > .chatInput {
-	flex: 0 0 auto;
-}
-.panel > .panelBody {
-	flex: 1 1 0;
-}
-.panelHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: var(--sp-3) var(--sp-4);
-	border-bottom: 1px solid var(--border-soft);
-	min-height: 44px;
-}
-.panelHead h2 {
-	margin: 0;
-	font-family: var(--font-display);
-	font-size: 14px;
-	font-weight: 500;
-	letter-spacing: -0.005em;
-	color: var(--fg);
-}
-.panelHead .right {
-	margin-left: auto;
-	display: inline-flex;
-	gap: var(--sp-1);
-}
-.panelHead .iconBtn {
-	width: 24px;
-	height: 24px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--meta);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.panelHead .iconBtn:hover {
-	background: var(--surface-3);
-	color: var(--fg-2);
-}
-.panelBody {
-	overflow-y: auto;
-	padding: var(--sp-3) var(--sp-4);
-	scrollbar-width: thin;
-	scrollbar-color: var(--border) transparent;
-	min-height: 0;
-}
-.panelBody::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-.panelBody::-webkit-scrollbar-thumb {
-	background: var(--border);
-	border-radius: 4px;
-}
-.panelBody::-webkit-scrollbar-thumb:hover {
-	background: var(--border-hi);
-}
-
-/* ─── resize handles ───────────────────────────────────────────── */
-.handle {
-	background: transparent;
-	position: relative;
-	z-index: 2;
-	transition: background var(--motion-fast) var(--ease);
-	cursor: col-resize;
-}
-.handleRow {
-	cursor: row-resize;
-	grid-column: 1 / -1;
-	border-bottom: 1px solid var(--border);
-}
-.handle:hover,
-.handle.isDragging {
-	background: var(--surface-2);
-}
-.handle::before,
-.handle::after {
-	content: "";
-	position: absolute;
-	background: var(--dim);
-	border-radius: 1px;
-	opacity: 0.45;
-	transition: opacity var(--motion-fast) var(--ease);
-	pointer-events: none;
-}
-.handleCol::before,
-.handleCol::after {
-	left: 50%;
-	width: 1px;
-	height: 14px;
-	transform: translateX(-50%);
-}
-.handleCol::before { top: calc(50% - 16px); }
-.handleCol::after  { top: calc(50% + 2px); }
-.handleRow::before,
-.handleRow::after {
-	top: 50%;
-	height: 1px;
-	width: 14px;
-	transform: translateY(-50%);
-}
-.handleRow::before { left: calc(50% - 16px); }
-.handleRow::after  { left: calc(50% + 2px); }
-.handle:hover::before,
-.handle:hover::after,
-.handle.isDragging::before,
-.handle.isDragging::after {
-	opacity: 1;
-}
-.handle.isDragging {
-	background: var(--accent-soft);
-}
-
-/* ─── preview area ─────────────────────────────────────────────── */
-/* ponytail: the stage wrapper (in NewEditorShell.tsx) already provides the
-   padding that reserves room for the floating inspector, and .stage paints the
-   scene gradient. previewWrap is a single transparent, zero-padding centering
-   layer so the wallpaper card floats on that gradient — matching the design's
-   stage-wrap (one framed card, no surface slab, no double padding). It is also
-   the positioned ancestor for the timecode/badge overlays and the box the
-   frame measures for its contain-fit. */
-.previewWrap {
-	position: relative;
-	display: grid;
-	place-items: center;
-	width: 100%;
-	height: 100%;
-	min-width: 0;
-	min-height: 0;
-}
-.previewFrame {
-	position: relative;
-	aspect-ratio: 16 / 9;
-	max-width: 100%;
-	max-height: 100%;
-	width: 100%;
-	min-width: 0;
-	min-height: 0;
-	background:
-		radial-gradient(ellipse at 50% 35%,
-			var(--scene-sky-hi) 0%,
-			var(--scene-sky-mid) 35%,
-			var(--scene-foliage) 70%,
-			var(--scene-foliage-d) 100%);
-	/* ponytail: the wallpaper card is a floating, rounded surface (per the v4
-	   design's preview frame) — rounded corners + a layered drop shadow lift it
-	   off the scene gradient. The custom background (buildFrameStyle) fills this
-	   card; the video sits on top with its own padding so the wallpaper shows
-	   around it. */
-	border-radius: 16px;
-	box-shadow:
-		0 40px 90px -30px rgba(0, 0, 0, 0.75),
-		0 12px 28px -12px rgba(0, 0, 0, 0.5),
-		inset 0 0 0 1px rgba(255, 255, 255, 0.09);
-	overflow: hidden;
-	display: grid;
-	place-items: center;
-}
-.videoStage {
-	position: relative;
-	display: grid;
-	place-items: center;
-	min-width: 0;
-	min-height: 0;
-	overflow: visible;
-	z-index: 1;
-}
-.screenStage {
-	position: absolute;
-	overflow: hidden;
-	z-index: 1;
-	display: flex;
-}
-.screenStage > .container,
-.screenStage > div > .container {
-	width: 100%;
-	height: 100%;
-}
-.previewEmpty {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	color: var(--muted);
-	font-size: var(--fs-app);
-}
-.previewEmpty strong { color: var(--fg-2); }
-
-/* ─── preview empty state (no project / no asset) ───────────────── */
-.previewEmptyDrop {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.previewEmptyDropOverlay {
-	position: absolute;
-	inset: 0;
-	z-index: 10;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	border: 2px dashed var(--primary, #34B27B);
-	background: color-mix(in srgb, var(--primary, #34B27B) 10%, transparent);
-	border-radius: var(--r-sm);
-	pointer-events: none;
-}
-.previewEmptyDropIcon {
-	width: 40px;
-	height: 40px;
-	color: var(--primary, #34B27B);
-}
-.previewEmptyDropLabel {
-	font-size: var(--fs-app);
-	font-weight: 600;
-	color: var(--primary, #34B27B);
-}
-.previewEmptyInner {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-4);
-	padding: var(--sp-5);
-	text-align: center;
-	max-width: 28rem;
-}
-.previewEmptyLogo {
-	width: 64px;
-	height: 64px;
-	border-radius: var(--r-md);
-	opacity: 0.9;
-}
-.previewEmptyHeading {
-	display: flex;
-	flex-direction: column;
-	gap: var(--sp-1);
-}
-.previewEmptyTitle {
-	margin: 0;
-	font-size: 1.25rem;
-	font-weight: 600;
-	color: var(--fg-2);
-}
-.previewEmptyDescription {
-	margin: 0;
-	font-size: 0.875rem;
-	color: var(--muted);
-	line-height: 1.5;
-}
-.previewEmptyActions {
-	display: flex;
-	flex-direction: column;
-	gap: var(--sp-2);
-	width: 100%;
-	max-width: 18rem;
-}
-.previewEmptyPrimaryButton {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	padding: var(--sp-3) var(--sp-4);
-	border-radius: var(--r-sm);
-	background: var(--primary, #34B27B);
-	color: #fff;
-	border: none;
-	font-weight: 500;
-	font-size: 0.875rem;
-	cursor: pointer;
-	transition: background-color 120ms ease;
-}
-.previewEmptyPrimaryButton:hover {
-	filter: brightness(0.95);
-}
-.previewEmptySecondaryButton {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	padding: var(--sp-3) var(--sp-4);
-	border-radius: var(--r-sm);
-	background: var(--card);
-	color: var(--fg-2);
-	border: 1px solid var(--border);
-	font-weight: 500;
-	font-size: 0.875rem;
-	cursor: pointer;
-	transition: background-color 120ms ease;
-}
-.previewEmptySecondaryButton:hover {
-	background: var(--accent, rgba(255, 255, 255, 0.06));
-}
-.previewEmptyButtonIcon {
-	width: 16px;
-	height: 16px;
-}
-.previewEmptyHint {
-	margin: 0;
-	font-size: 0.75rem;
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.5));
-}
-.previewEmptyDragHint {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-1);
-	margin: 0;
-	font-size: 0.75rem;
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.4));
-}
-.previewEmptyDragHintIcon {
-	width: 12px;
-	height: 12px;
-}
-.previewEmptyDialog {
-	max-width: 24rem;
-	padding: var(--sp-5);
-	background: var(--bg);
-	border: 1px solid var(--border);
-}
-.previewEmptyDialogHeader {
-	margin-bottom: var(--sp-3);
-}
-.previewEmptyDialogHeaderInner {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-}
-.previewEmptyDialogLogo {
-	width: 36px;
-	height: 36px;
-	border-radius: var(--r-sm);
-	flex-shrink: 0;
-}
-.previewEmptyDialogTitle {
-	font-size: 1rem;
-	font-weight: 600;
-	color: var(--fg-2);
-	line-height: 1.2;
-}
-.previewEmptyDialogBody {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-2);
-	margin-bottom: var(--sp-4);
-	text-align: center;
-}
-.previewEmptyDialogIcon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	height: 40px;
-	border-radius: 9999px;
-	background: var(--card);
-	border: 1px solid var(--border);
-}
-.previewEmptyDialogAlertIcon {
-	width: 20px;
-	height: 20px;
-	color: var(--muted);
-}
-.previewEmptyDialogMessage {
-	margin: 0;
-	font-size: 0.875rem;
-	color: var(--muted);
-	line-height: 1.5;
-}
-.previewEmptyDialogClose {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-1);
-	width: 100%;
-	padding: var(--sp-2) var(--sp-3);
-	border-radius: var(--r-sm);
-	background: var(--card);
-	color: var(--fg-2);
-	border: 1px solid var(--border);
-	font-size: 0.875rem;
-	font-weight: 500;
-	cursor: pointer;
-}
-.previewEmptyDialogCloseIcon {
-	width: 14px;
-	height: 14px;
-}
-.previewPip {
-	position: absolute;
-	right: var(--sp-3);
-	bottom: var(--sp-3);
-	width: 120px;
-	aspect-ratio: 16 / 9;
-	border-radius: var(--r-sm);
-	background: linear-gradient(135deg, var(--pip-bg-1) 0%, var(--pip-bg-2) 50%, var(--pip-bg-3) 100%);
-	border: 2px solid var(--bg);
-	box-shadow: var(--elev-card);
-	overflow: hidden;
-	display: grid;
-	place-items: center;
-	color: var(--overlay-text);
-	font-family: var(--font-mono);
-	font-size: 9px;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}
-.previewFrame > .screenStage video {
-	position: relative;
-	z-index: 1;
-	/* Pixels come from the native canvas now; this <video> stays mounted (and
-	   playing) purely as the decode/playback-clock/metadata source. A plain
-	   descendant selector (not a fixed child-depth chain) is required here:
-	   VirtualPreview nests the actual <video> THREE levels down
-	   (.screenStage > .container > .videoFrame > video), not one or two —
-	   the previous `>` chain silently never matched, leaving this video
-	   fully visible (and on top of the native canvas) the whole time. */
-	visibility: hidden;
-}
-.pipCircle {
-	border-radius: 9999px !important;
-}
-.pipSquare {
-	border-radius: 0 !important;
-}
-.pipRounded {
-	border-radius: 18px !important;
-}
-
-/* Webcam overlay: real <video> driven by the cameraTrack. The slot is
-   transparent so clip-path / border-radius carve the camera without leaving
-   a rectangular placeholder peeking through. */
-.webcamSlot {
-	background: transparent;
-	overflow: hidden;
-	z-index: 2;
-	display: flex;
-}
-.webcamSlot .webcamVideo {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	/* Native canvas already draws the composited webcam PiP; this <video> stays
-	   mounted (playing) only to drive the camera's own decode/sync clock. The
-	   slot div itself stays visible/clickable for the drag-to-reposition hitbox. */
-	visibility: hidden;
-	display: block;
-}
-/* ─── transport bar (lives inside .timelineHead, next to the tool icons) ─ */
-.transport {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex: 1;
-	min-width: 0;
-}
-.transport .tbtn {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--fg-2);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	flex-shrink: 0;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.transport .tbtn:hover {
-	background: var(--surface-3);
-	color: var(--fg);
-}
-.transport .tbtn.play {
-	width: 28px;
-	height: 28px;
-	background: var(--fg);
-	color: var(--bg);
-	border-radius: 50%;
-}
-.transport .tbtn.play:hover {
-	background: var(--fg-2);
-}
-.transport .time {
-	font-family: var(--font-mono);
-	font-size: var(--fs-app-sm);
-	color: var(--fg);
-	letter-spacing: 0.02em;
-	min-width: 96px;
-	text-align: center;
-	flex-shrink: 0;
-}
-.transport .time .sep { color: var(--meta); margin-inline: 4px; }
-.transport .time .total { color: var(--muted); }
-.transport .spacer { flex: 1; }
-
-/* ─── right panel-stack (one pane visible at a time) ──────────── */
-.rightStack {
-	grid-column: 6;
-	display: grid;
-	min-width: 0;
-	min-height: 0;
-	background: var(--bg);
-}
-.pane {
-	display: none;
-	grid-template-rows: auto 1fr;
-	min-height: 0;
-}
-.pane.isActive {
-	display: grid;
-}
-.paneHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: 12px var(--sp-4);
-	/* Every pane wearing this header is rendered inside FloatingInspector, which
-	   floats its "Collapse inspector" button (right: 12, 26px wide) over the
-	   header's right edge — landing squarely on whatever sits there and
-	   swallowing its clicks. The Help button was the casualty: visible on every
-	   facet, and unclickable. Reserve the floated button its own lane instead. */
-	padding-right: 46px;
-	border-bottom: 1px solid var(--border-soft);
-	min-height: 44px;
-}
-.paneHead h2 {
-	margin: 0;
-	font-family: var(--font-display);
-	font-size: 14px;
-	font-weight: 500;
-	letter-spacing: -0.005em;
-	color: var(--fg);
-}
-.paneBody {
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding: 12px var(--sp-4);
-	scrollbar-width: thin;
-	scrollbar-color: var(--border) transparent;
-	min-height: 0;
-}
-
-/* ─── pane tabs (sub-nav inside a pane) ───────────────────────── */
-.paneTabs {
-	display: flex;
-	gap: 2px;
-	padding: 3px;
-	margin: 12px var(--sp-4);
-	background: var(--surface-warm);
-	border-radius: 10px;
-}
-.paneTabs button {
-	flex: 1;
-	padding: 7px 10px;
-	border: 0;
-	background: transparent;
-	border-radius: 7px;
-	font: 500 var(--fs-app-sm)/1 var(--font-body);
-	color: var(--muted);
-	cursor: pointer;
-	transition: background 150ms ease, color 150ms ease;
-}
-.paneTabs button.isActive {
-	background: var(--brand);
-	color: var(--accent-on);
-	box-shadow: 0 1px 2px rgba(22, 23, 29, 0.12);
-}
-.paneSection { display: none; }
-.paneSection.isActive { display: block; }
-
-/* ─── pane rows (label + control) ─────────────────────────────── */
-.paneRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 12px 14px;
-	margin: 8px var(--sp-4);
-	border: 1px solid var(--border);
-	border-radius: 10px;
-	background: var(--bg);
-}
-.paneRow .label { font: 500 var(--fs-app) var(--font-body); color: var(--fg-2); }
-.paneRow .info  { color: var(--meta); font-size: var(--fs-app-sm); margin-left: 4px; }
-.sectionLabel {
-	font: 500 var(--fs-app-sm) var(--font-body);
-	color: var(--fg-2);
-	margin: 4px var(--sp-4) 8px;
-}
-.uploadBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	margin: 0 var(--sp-4) 12px;
-	padding: 12px;
-	border: 1px dashed var(--border);
-	border-radius: 10px;
-	background: var(--bg);
-	color: var(--muted);
-	font: 500 var(--fs-app-sm) var(--font-body);
-	cursor: pointer;
-}
-.uploadBtn:hover { border-color: var(--success); color: var(--success); }
-.field {
-	display: grid;
-	grid-template-columns: 80px 1fr;
-	align-items: center;
-	gap: 8px;
-	padding: 4px var(--sp-4);
-}
-.field label {
-	font: 500 var(--fs-app-sm) var(--font-body);
-	color: var(--muted);
-}
-.field select,
-.field input {
-	width: 100%;
-	padding: 6px 8px;
-	font: 400 var(--fs-app-sm) var(--font-body);
-	color: var(--fg-2);
-	background: var(--surface);
-	border: 1px solid var(--border);
-	border-radius: 6px;
-	outline: none;
-}
-.field select:focus,
-.field input:focus { border-color: var(--brand); }
-.field select:disabled,
-.field input:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── bg thumb grid ────────────────────────────────────────────── */
-.bgGrid {
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 8px;
-	padding: 0 var(--sp-4) var(--sp-4);
-}
-.bgThumb {
-	aspect-ratio: 1/1;
-	border-radius: 10px;
-	border: 1px solid transparent;
-	cursor: pointer;
-	transition: transform 150ms ease, border-color 150ms ease;
-	background: var(--surface-2);
-}
-.bgThumb:hover { transform: translateY(-1px); }
-.bgThumb.isActive {
-	border-color: var(--brand);
-	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 70%);
-}
-
-/* ─── toggle (switch) ──────────────────────────────────────────── */
-.toggle {
-	width: 36px;
-	height: 20px;
-	border: 0;
-	padding: 0;
-	background: var(--border-hi);
-	border-radius: 9999px;
-	position: relative;
-	cursor: pointer;
-	transition: background 150ms ease;
-	flex-shrink: 0;
-}
-.toggle::after {
-	content: "";
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	width: 16px;
-	height: 16px;
-	background: var(--accent-on);
-	border-radius: 50%;
-	box-shadow: 0 1px 3px rgba(22, 23, 29, 0.2);
-	transition: transform 150ms ease;
-}
-.toggle.isOn { background: var(--brand); }
-.toggle.isOn::after { transform: translateX(16px); }
-.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── slider cell (effect) ─────────────────────────────────────── */
-.sliderGrid {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: 8px;
-	padding: 0 var(--sp-4) var(--sp-4);
-}
-.sliderCell {
-	border: 1px solid var(--border);
-	border-radius: 10px;
-	background: var(--bg);
-	padding: 10px 12px;
-	display: grid;
-	grid-template-rows: auto auto;
-	gap: 8px;
-}
-.sliderCell .head { display: flex; align-items: center; gap: 6px; }
-.sliderCell .label { font: 500 11px var(--font-body); color: var(--fg-2); }
-.sliderCell .val { font: 500 11px var(--font-mono); color: var(--brand); margin-left: auto; }
-.sliderCell input[type=range] {
-	width: 100%;
-	height: 4px;
-	background: var(--border-hi);
-	border-radius: 2px;
-	outline: none;
-	-webkit-appearance: none;
-	cursor: pointer;
-}
-.sliderCell input[type=range]::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	background: var(--brand);
-	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
-	cursor: pointer;
-}
-.sliderCell input[type=range]::-moz-range-thumb {
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	background: var(--brand);
-	border: 0;
-	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
-	cursor: pointer;
-}
-.sliderCell.full { grid-column: 1 / -1; }
-.sliderCell input[type=range]:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── cursor style grid ────────────────────────────────────────── */
-.cursorGrid {
-	display: grid;
-	grid-template-columns: repeat(5, 1fr);
-	gap: 6px;
-	padding: 0 var(--sp-4) var(--sp-4);
-}
-.cursorCell {
-	aspect-ratio: 1/1;
-	border: 1px solid var(--border);
-	border-radius: 8px;
-	background: var(--bg);
-	display: grid;
-	place-items: center;
-	cursor: pointer;
-	transition: border-color 150ms ease, box-shadow 150ms ease;
-	color: var(--muted);
-}
-.cursorCell:hover { border-color: var(--border-hi); color: var(--fg-2); }
-.cursorCell:disabled { opacity: 0.5; cursor: not-allowed; }
-.cursorCell:disabled:hover { border-color: var(--border); color: var(--muted); }
-.cursorCell.isActive {
-	border-color: var(--brand);
-	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 75%);
-}
-
-/* ─── chat strip + input ───────────────────────────────────────── */
-.chatStrip {
-	padding: var(--sp-3) var(--sp-4) var(--sp-2);
-	border-bottom: 1px solid var(--border-soft);
-	background: var(--bg);
-}
-.chatStripRow {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	margin-bottom: 6px;
-}
-.ctxPill {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	padding: 3px 9px 3px 7px;
-	border-radius: var(--r-pill);
-	background: var(--success-soft);
-	color: var(--success);
-	font-family: var(--font-mono);
-	font-size: 10.5px;
-	font-weight: 500;
-	letter-spacing: 0.02em;
-}
-.ctxPill .d {
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background: var(--success);
-}
-.stripActions {
-	margin-left: auto;
-	display: inline-flex;
-	gap: 2px;
-}
-.stripActions button {
-	width: 24px;
-	height: 24px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--meta);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.stripActions button:hover {
-	background: var(--surface-3);
-	color: var(--fg-2);
-}
-.stripActions button:disabled {
-	opacity: 0.4;
-	cursor: not-allowed;
-}
-.chatHint {
-	font-size: var(--fs-app-sm);
-	color: var(--muted);
-	letter-spacing: 0.005em;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.msg { margin-bottom: var(--sp-3); }
-.msgHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: 0 var(--sp-1);
-	margin-bottom: var(--sp-1);
-}
-.msgAuthor {
-	font-family: var(--font-mono);
-	font-size: 10px;
-	letter-spacing: 0.08em;
-	color: var(--meta);
-	text-transform: uppercase;
-}
-.msgHead .right {
-	margin-left: auto;
-	display: inline-flex;
-	gap: 2px;
-}
-.msgHead .right button {
-	width: 22px;
-	height: 22px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-xs);
-	color: var(--meta);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.msgHead .right button:hover {
-	background: var(--surface-3);
-	color: var(--fg-2);
-}
-.msgBubble {
-	padding: var(--sp-3) var(--sp-4);
-	border-radius: var(--r-md);
-	background: var(--bg);
-	border: 1px solid var(--border);
-	font-size: var(--fs-app);
-	color: var(--fg-2);
-	line-height: 1.5;
-}
-.msgBubble .msgAuthor { color: var(--accent); }
-
-.chatInput {
-	padding: var(--sp-2) var(--sp-4) var(--sp-3);
-	border-top: 1px solid var(--border-soft);
-	background: var(--bg);
-}
-.chatInput textarea {
-	width: 100%;
-	min-height: 36px;
-	max-height: 120px;
-	resize: none;
-	padding: 8px var(--sp-3);
-	border-radius: var(--r-md);
-	border: 1px solid var(--border);
-	background: var(--bg);
-	font-family: var(--font-body);
-	font-size: var(--fs-app);
-	line-height: 1.4;
-	color: var(--fg);
-	outline: none;
-	transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
-}
-.chatInput textarea::placeholder { color: var(--meta); }
-.chatInput textarea:focus {
-	border-color: var(--accent);
-	box-shadow: var(--focus-ring);
-}
-.chatInput .actions {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	margin-top: 6px;
-}
-.modelPicker {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	padding: 5px 4px 5px 10px;
-	border-radius: var(--r-pill);
-	background: var(--surface-2);
-	font-family: var(--font-mono);
-	font-size: 11px;
-	color: var(--fg-2);
-	letter-spacing: 0.01em;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease);
-	border: 0;
-}
-.modelPicker:hover { background: var(--surface-3); }
-.reasoningBtn {
-	display: inline-flex;
-	align-items: center;
-	background: transparent;
-	border: 0;
-	padding: 0;
-	cursor: pointer;
-}
-.chip {
-	padding: 5px 10px;
-	border-radius: var(--r-pill);
-	background: var(--success-soft);
-	color: var(--success);
-	font-size: 10.5px;
-	font-weight: 500;
-	letter-spacing: 0.01em;
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	transition: background var(--motion-fast) var(--ease);
-}
-.reasoningBtn:hover .chip { background: var(--success-soft); filter: brightness(1.1); }
-.chip .d {
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background: var(--success);
-}
-.sendBtn {
-	margin-left: auto;
-	width: 32px;
-	height: 32px;
-	display: grid;
-	place-items: center;
-	border-radius: 50%;
-	background: transparent;
-	color: var(--fg);
-	border: 0;
-	cursor: pointer;
-	transition: color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
-}
-.sendBtn:hover { color: var(--accent); transform: scale(1.05); }
-.sendBtn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-/* ─── transcript pane content ─────────────────────────────────── */
-.transcriptClipHead {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	padding: 0 4px 4px;
-	border-bottom: 1px solid var(--border-soft);
-	margin-bottom: 8px;
-}
-.transcriptClipHead .badge {
-	width: 22px;
-	height: 22px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--brand-soft);
-	color: var(--brand);
-	border-radius: var(--r-sm);
-	font: 700 12px/1 var(--font-mono);
-	flex-shrink: 0;
-}
-.transcriptClipHead .title {
-	font: 600 var(--fs-app)/1.2 var(--font-body);
-	color: var(--fg);
-	margin: 0;
-	padding: 0;
-}
-.transcriptClipHead .sub {
-	font: 400 11px/1.3 var(--font-mono);
-	color: var(--muted);
-	margin-top: 2px;
-}
-.transcriptFlow {
-	margin: 0;
-	padding: 0 4px;
-	font: 400 var(--fs-app-lg)/1.65 var(--font-body);
-	color: var(--fg);
-	text-wrap: pretty;
-}
-.transcriptFlow .tc {
-	display: inline-block;
-	margin: 0 4px;
-	padding: 1px 6px;
-	background: transparent;
-	color: var(--brand);
-	border-radius: var(--r-sm);
-	font: 500 11px/1.4 var(--font-mono);
-	vertical-align: middle;
-	white-space: nowrap;
-}
-
-
-/* ─── bottombar / timeline ─────────────────────────────────────── */
-.bottombar {
-	display: grid;
-	grid-template-columns: 1fr;
-	min-height: 0;
-	background: var(--bg);
-	overflow: hidden;
-}
-
-/* Region lanes (annotations / speed / zoom) inside the timeline body. */
-/* Lanes: fixed-width label column + one shared dnd-timeline surface column.
-   Both columns lay out 3 rows independently but with identical height (22px)
-   + gap (2px), so they line up without needing CSS grid row-spanning. */
-.lanes {
-	display: flex;
-	gap: 8px;
-	padding: 4px var(--sp-4) 2px;
-	flex-shrink: 0;
-	border-bottom: 1px solid var(--border-soft);
-}
-.laneLabelCol {
-	width: 64px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-.laneLabelCell {
-	height: 22px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 4px;
-}
-.laneLabel {
-	font: 600 10px/1 var(--font-mono);
-	color: var(--meta);
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-}
-.laneMeta {
-	font: 500 10.5px/1 var(--font-mono);
-	color: var(--muted);
-	min-width: 12px;
-	text-align: right;
-}
-.laneDelete {
-	width: 18px;
-	height: 18px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border: 0;
-	border-radius: var(--r-xs);
-	background: var(--danger-soft);
-	color: var(--danger);
-	font-size: 13px;
-	line-height: 1;
-	cursor: pointer;
-}
-.laneDelete:hover {
-	filter: brightness(0.95);
-}
-.laneSurface {
-	flex: 1;
-	min-width: 0;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-/* F2.6 — vertical snap-guide lines at both edges of the region being
-   dragged/resized. Spans the full lane stack (parity with T24 on the
-   clip timeline). */
-.laneSnapGuide {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 2px;
-	background: var(--danger);
-	box-shadow: 0 0 6px color-mix(in oklch, var(--danger) 60%, transparent);
-	pointer-events: none;
-	z-index: 14;
-}
-/* F2.6 — floating tooltip with the live start – end range (parity with
-   T25 on the clip timeline). */
-.laneDragTooltip {
-	position: absolute;
-	top: -20px;
-	height: 18px;
-	padding: 0 8px;
-	background: var(--surface);
-	border: 1px solid var(--border-soft);
-	border-radius: 9px;
-	color: var(--fg-2);
-	font: 500 10.5px/18px var(--font-mono);
-	letter-spacing: 0.02em;
-	white-space: nowrap;
-	pointer-events: none;
-	z-index: 15;
-	box-shadow: var(--elev-card-soft);
-}
-.laneTrackRow {
-	position: relative;
-	height: 24px;
-	background: var(--surface-1);
-	border: 1px solid var(--border-soft);
-	border-radius: var(--r-sm);
-	overflow: hidden;
-}
-.laneEmpty {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font: 500 11px/1 var(--font-body);
-	color: var(--muted);
-	opacity: 0.6;
-	pointer-events: none;
-}
-
-/* Lane pills: zoom / speed / annotation / skip. Flat wash fill + 1.5px frame
- * per the v4 design (design/OpenScreen Editor v4.dc.html pillStyle) — no
- * gradient, no tab caps. Selected pills gain an accent ring. */
-.zoomPill,
-.speedPill,
-.annotationPill,
-.skipPill {
-	--_pill: var(--accent);
-	--_wash: var(--accent-soft);
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	height: 22px;
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	padding: 0 8px 0 7px;
-	background: var(--_wash);
-	border: 1.5px solid var(--_pill);
-	border-radius: var(--r-sm);
-	color: var(--fg);
-	font: 600 11px/1 var(--font-display);
-	letter-spacing: 0.01em;
-	font-variant-numeric: tabular-nums;
-	white-space: nowrap;
-	overflow: hidden;
-	box-sizing: border-box;
-	pointer-events: auto;
-	cursor: pointer;
-	z-index: 2;
-}
-.zoomPill {
-	--_pill: var(--accent);
-	--_wash: var(--accent-soft);
-}
-.speedPill {
-	--_pill: var(--speed);
-	--_wash: var(--speed-wash);
-}
-.annotationPill {
-	--_pill: var(--annotation);
-	--_wash: var(--annotation-wash);
-}
-.skipPill {
-	--_pill: var(--danger);
-	--_wash: var(--danger-soft);
-}
-.lanePillSelected {
-	box-shadow: 0 0 0 3px color-mix(in oklch, var(--_pill) 35%, transparent);
-}
-.pillIcon {
-	width: 11px;
-	height: 11px;
-	flex-shrink: 0;
-	color: color-mix(in oklch, var(--_pill) 70%, var(--fg));
-}
-.pillValue {
-	color: var(--fg);
-	font-variant-numeric: tabular-nums;
-}
-
-.timelineHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: var(--sp-2) var(--sp-4);
-	border-bottom: 1px solid var(--border-soft);
-	min-height: 40px;
-}
-.timelineHead .viewTools {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding: 3px;
-	background: var(--surface-2);
-	border: 1px solid var(--border-soft);
-	border-radius: var(--r-sm);
-}
-.timelineHead .vtBtn {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 30px;
-	height: 30px;
-	padding: 0;
-	border: 0;
-	background: transparent;
-	color: var(--muted);
-	border-radius: var(--r-xs);
-	cursor: pointer;
-	transition: color 0.12s ease, background 0.12s ease;
-}
-.timelineHead .vtBtn:hover { color: var(--fg); background: var(--surface); }
-.timelineHead .vtBtn.isOn { color: var(--accent); background: var(--accent-wash); }
-.timelineHead .ratio {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	height: 30px;
-	padding: 0 10px;
-	font-family: var(--font-mono);
-	font-size: var(--fs-app-sm);
-	color: var(--muted);
-	letter-spacing: 0.02em;
-	background: transparent;
-	border: 0;
-	border-left: 1px solid var(--border-soft);
-	margin-left: 4px;
-	cursor: pointer;
-	border-radius: 0 var(--r-sm) var(--r-sm) 0;
-}
-.timelineHead .ratio:hover { color: var(--fg); }
-.timelineHead .hintRow {
-	margin-left: auto;
-	display: flex;
-	align-items: center;
-	gap: var(--sp-4);
-}
-.timelineHead .hint {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-family: var(--font-display);
-	font-size: 11.5px;
-	color: var(--muted);
-	letter-spacing: 0.005em;
-}
-.timelineHead .hint .kbd {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	height: 20px;
-	padding: 0 7px;
-	font-family: var(--font-mono);
-	font-size: 10.5px;
-	font-weight: 500;
-	color: var(--accent);
-	background: var(--accent-soft);
-	border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
-	border-radius: var(--r-xs);
-	letter-spacing: 0.02em;
-	white-space: nowrap;
-}
-.timelineBody {
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	flex: 1;
-	overflow: hidden;
-}
-.timelineBody :global(.timelinePaneWrap) {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-}
-.zoombar {
-	padding: 4px var(--sp-4) 8px;
-	background: var(--bg);
-	flex-shrink: 0;
-	border-top: 1px solid var(--border-soft);
-}
-
-/* T11 — Navigator strip. Moved to TimelinePane.module.css so the
-   className (applied via TimelinePane's own styles import) actually
-   matches the CSS. CSS modules' class hashes don't match across
-   files. The shape and the elements are unchanged from axcut's
-   .timeline-navigator / .timeline-navigator-window. */
-.zoombar .zoomTrack {
-	position: relative;
-	height: 18px;
-	width: 100%;
-}
-.zoombar .zoomFill {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	left: 0;
-	width: 100%;
-	height: 6px;
-	background: var(--accent);
-	border-radius: 3px;
-	pointer-events: none;
-}
-
-/* Radix Slider — visible two-handle range, design-aligned. */
-.sliderRoot {
-	position: relative;
-	display: flex;
-	align-items: center;
-	height: 18px;
-	width: 100%;
-	touch-action: none;
-	user-select: none;
-}
-.sliderTrack {
-	position: relative;
-	height: 6px;
-	width: 100%;
-	background: var(--surface-2);
-	border-radius: 3px;
-	overflow: hidden;
-}
-.sliderRange {
-	position: absolute;
-	height: 100%;
-	background: var(--accent);
-	border-radius: 3px;
-}
-.sliderThumb {
-	display: block;
-	width: 14px;
-	height: 14px;
-	background: var(--accent);
-	border: 1px solid var(--bg);
-	border-radius: 3px;
-	cursor: ew-resize;
-	transition: box-shadow var(--motion-fast) var(--ease);
-}
-.sliderThumb:hover,
-.sliderThumb:focus-visible {
-	outline: none;
-	box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
-}
-
-/* ─── modals ───────────────────────────────────────────────────── */
-.modal {
-	position: fixed;
-	inset: 0;
-	display: none;
-	z-index: 100;
-}
-.modal.isOpen { display: block; }
-.modalBackdrop {
-	position: absolute;
-	inset: 0;
-	background: var(--overlay-dark);
-	backdrop-filter: blur(4px);
-	-webkit-backdrop-filter: blur(4px);
-}
-.modalCard {
-	position: relative;
-	width: min(960px, 92vw);
-	max-height: 88vh;
-	margin: 6vh auto 0;
-	background: var(--bg);
-	border: 1px solid var(--border);
-	border-radius: var(--r-lg);
-	box-shadow: 0 24px 60px rgba(22, 23, 29, 0.5);
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	color: var(--fg);
-}
-.modalCard.wide { width: min(720px, 92vw); }
-.modalHead {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	padding: 20px 24px 12px;
-	gap: 16px;
-}
-.modalHead h2 {
-	margin: 0;
-	font: 600 20px/1.3 var(--font-display);
-	color: var(--fg);
-}
-.modalHead p {
-	margin: 4px 0 0;
-	font: 400 var(--fs-app)/1.5 var(--font-body);
-	color: var(--muted);
-}
-.modalHead .closeBtn {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--muted);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-}
-.modalHead .closeBtn:hover { background: var(--surface-3); color: var(--fg); }
-.modalBody {
-	padding: 8px 24px 24px;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	overflow: auto;
-}
-
-.btn {
-	height: 32px;
-	padding: 0 14px;
-	border-radius: var(--r-md);
-	font: 500 var(--fs-app)/1 var(--font-body);
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
-}
-.btnSecondary {
-	background: var(--surface);
-	color: var(--fg);
-	border: 1px solid var(--border);
-}
-.btnSecondary:hover { background: var(--surface-warm); border-color: var(--border-hi); }
-.btnPrimary {
-	background: var(--accent);
-	color: var(--accent-on);
-	border: 1px solid var(--accent);
-}
-.btnPrimary:hover { background: var(--brand-lo); }
-.btnPrimary:disabled {
-	background: var(--surface-2);
-	border-color: var(--border);
-	color: var(--muted);
-	cursor: not-allowed;
-}
-
-/* ─── Edit Clip modal — draggable source-range track ────────────── */
-.editClipRangeDragging {
-	box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-/* ─── media card (left panel media list) ───────────────────────── */
-.mediaList {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-.mediaCard {
-	display: flex;
-	flex-direction: column;
-	border-radius: var(--r-md);
-	overflow: hidden;
-	border: 1px solid var(--border-soft);
-	background: var(--bg);
-	cursor: pointer;
-	transition: border-color var(--motion-fast) var(--ease);
-}
-.mediaCard:hover { border-color: var(--brand); }
-.mediaCard .thumb {
-	aspect-ratio: 16 / 9;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: rgba(255, 255, 255, 0.95);
-}
-.thumbRed   { background: var(--danger); }
-.thumbGreen { background: var(--success); }
-.thumbAmber { background: var(--warn); }
-.thumbCyan  { background: var(--accent); }
-.mediaMeta {
-	padding: 8px 10px 10px;
-	background: var(--surface-2);
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-.mediaMeta .name {
-	font: var(--fs-app) var(--font-body);
-	color: var(--fg);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.mediaMeta .row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-.mediaMeta .timecode { font: 11px var(--font-mono); color: var(--muted); }
-.mediaMeta .size     { font: 11px var(--font-body);  color: var(--muted); }
-
-.importBtn {
-	margin: 8px var(--sp-3) 12px;
-	padding: 10px 12px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	border: 1px dashed var(--border-hi);
-	border-radius: var(--r-md);
-	background: transparent;
-	color: var(--muted);
-	font: var(--fs-app) var(--font-body);
-	font-weight: 500;
-	cursor: pointer;
-}
-.importBtn:hover { background: var(--surface-warm); color: var(--fg); border-color: var(--accent); }
-
-/* Custom range slider / progress bar */
-.scrubBar {
-	flex: 1;
-	min-width: 0;
-	position: relative;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-}
-.scrubTrack {
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 4px;
-	background: var(--border-hi);
-	border-radius: 9999px;
-	overflow: hidden;
-}
-.scrubProgress {
-	height: 100%;
-	background: var(--accent);
-	border-radius: 9999px;
-}
-.scrubInput {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	opacity: 0;
-	cursor: pointer;
-	z-index: 10;
-	margin: 0;
-}
-.scrubThumb {
-	position: absolute;
-	width: 10px;
-	height: 10px;
-	background: #ffffff;
-	border-radius: 50%;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-	pointer-events: none;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	opacity: 1;
-	transition: transform 100ms ease;
-}
-.scrubBar:hover .scrubThumb {
-	transform: translate(-50%, -50%) scale(1.2);
-}
-
-/* ─── AI provider settings (axcut parity) ────────────────────────── */
-
-.providerGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-.providerCard {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  background: var(--surface);
-  color: var(--fg-2);
-  cursor: pointer;
-  font: 500 13px/1.2 var(--font-body);
-  text-align: left;
-  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
-}
-.providerCard:hover { border-color: var(--border-hi); }
-.providerCard.active {
-  border-color: var(--accent);
-  background: var(--accent-soft);
-  color: var(--fg);
-}
-.providerCard .head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.providerCard .label {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--fg);
-}
-.providerCard .model {
-  font: 500 11px var(--font-mono);
-  color: var(--muted);
-  letter-spacing: 0.02em;
-  text-transform: lowercase;
-}
-.statusPill {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  font: 600 10px/1 var(--font-mono);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border: 1px solid transparent;
-}
-.statusPill.ready {
-  background: var(--success-soft, rgba(68, 175, 105, 0.18));
-  color: var(--success, #44af69);
-  border-color: color-mix(in srgb, var(--success, #44af69) 30%, transparent);
-}
-.statusPill.idle {
-  background: var(--surface-2);
-  color: var(--muted);
-  border-color: var(--border);
-}
-.statusPill.auth {
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
-}
-.statusPill.pat {
-  background: color-mix(in srgb, var(--warn) 18%, transparent);
-  color: var(--warn);
-  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
-}
-
-.providerForm {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.providerForm .title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.providerForm .title h3 {
-  margin: 0;
-  font: 600 16px var(--font-display);
-  color: var(--fg);
-}
-.providerForm .actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border-soft);
-  margin-top: 4px;
-}
-.providerForm .actionsLeft {
-  display: flex;
-  gap: 8px;
-}
-.dangerBtn {
-  background: color-mix(in srgb, var(--danger) 14%, transparent);
-  color: var(--danger);
-  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-}
-.dangerBtn:hover {
-  background: color-mix(in srgb, var(--danger) 22%, transparent);
-  color: var(--danger);
-}
-
-.authPanel {
-  padding: 14px 16px;
-  border: 1px solid var(--brand);
-  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
-  border-radius: var(--r-md);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.authPanel strong {
-  display: block;
-  font: 600 13px var(--font-body);
-  color: var(--fg);
-}
-.authPanel p {
-  margin: 4px 0 0;
-  font: 400 12px/1.45 var(--font-body);
-  color: var(--muted);
-}
-.authCodeRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.authCodeRow code {
-  flex: 1;
-  font: 600 18px/1 var(--font-mono);
-  letter-spacing: 0.18em;
-  padding: 10px 14px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  color: var(--fg);
-  user-select: all;
-}
-.linkBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 12px;
-  height: 32px;
-  border-radius: var(--r-md);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--fg);
-  font: 500 var(--fs-app) var(--font-body);
-  cursor: pointer;
-  text-decoration: none;
-}
-.linkBtn:hover { background: var(--surface-warm); border-color: var(--border-hi); }
-
-.errorRow {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: var(--r-md);
-  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
-  color: var(--danger);
-  font: 500 12px var(--font-body);
-}
-
-.iconBtn {
-  width: 28px;
-  height: 28px;
-  display: inline-grid;
-  place-items: center;
-  border-radius: var(--r-sm);
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--muted);
-  cursor: pointer;
-}
-.iconBtn:hover { background: var(--surface-3); color: var(--fg); }
-.iconBtn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.backBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  height: 28px;
-  border-radius: var(--r-sm);
-  background: transparent;
-  color: var(--fg);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  font: 500 12px var(--font-body);
-}
-.backBtn:hover { background: var(--surface-3); }
-.backBtn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── chat welcome (no provider connected) ──────────────────────── */
-/* .panelBody supplies the horizontal inset (var(--sp-3) var(--sp-4)); only the
-   top breathing room is ours, or the card sits twice as far in as the messages. */
-.chatWelcome {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--sp-3);
-  padding: var(--sp-2) 0 0;
-  text-align: left;
-}
-
-.chatWelcomeHero {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 6px;
-  padding: 4px 0 0;
-}
-
-.chatWelcomeIcon {
-  color: var(--accent);
-  margin-bottom: 4px;
-}
-
-.chatWelcomeTitle {
-  margin: 0;
-  font: 600 14px/1.3 var(--font-body);
-  color: var(--fg);
-  letter-spacing: -0.01em;
-}
-
-.chatWelcomeSubtitle {
-  margin: 0;
-  font: 400 12px/1.5 var(--font-body);
-  color: var(--muted);
-  max-width: 32ch;
-}
-
-/* Native list markers — no flex on the ul/li, or the items stop being
-   list-items and the markers vanish. padding-inline-start keeps them inside
-   the card in both writing directions. */
-.chatWelcomeFeatures {
-  /* explicit: the global reset sets list-style: none on every ul */
-  list-style: disc;
-  margin: 0;
-  padding: 10px 12px;
-  padding-inline-start: 26px;
-  background: var(--surface);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--r-md);
-  font: 400 12px/1.45 var(--font-body);
-  color: var(--fg-2);
-}
-.chatWelcomeFeatures li + li { margin-top: 6px; }
-.chatWelcomeFeatures li::marker { color: var(--accent); }
-
-.chatWelcomeCta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  height: 34px;
-  border-radius: var(--r-md);
-  background: var(--accent);
-  color: var(--accent-on);
-  border: 1px solid var(--accent);
-  font: 600 12.5px var(--font-body);
-  cursor: pointer;
-  transition: filter 120ms ease;
-}
-.chatWelcomeCta:hover { filter: brightness(0.95); }
-.chatWelcomeCta:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.chatWelcomeDisclaimer {
-  margin: 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  font: 400 10.5px/1.45 var(--font-body);
-  color: var(--muted);
-}
-
-.chatWelcomeDisclaimerIcon {
-  flex: 0 0 auto;
-  margin-top: 2px;
-  opacity: 0.8;
-}
+/* Editor shell — 4-row grid: titlebar · workbench · handle · bottombar.
+ * Mirrors design/openscreen-editor.html. Tokens come from
+ * src/styles/design-tokens.css (light + dark via :root[data-theme="dark"]). */
+
+.app {
+	display: grid;
+	grid-template-rows: var(--titlebar-h) 1fr var(--handle-h) var(--bottom-h);
+	height: 100vh;
+	min-width: 1024px;
+	background: var(--bg);
+	color: var(--fg);
+	font-family: var(--font-body);
+	font-size: var(--fs-app);
+	line-height: 1.5;
+	overflow: hidden;
+	user-select: none;
+}
+
+.app[data-collapse~="left"] {
+	--panel-w-left: 0px;
+}
+.app[data-collapse~="left"] .leftRail,
+.app[data-collapse~="left"] .leftPanel,
+.app[data-collapse~="left"] .handleLeft {
+	display: none;
+}
+
+.app[data-collapse~="right"] {
+	--panel-w-right: 0px;
+}
+.app[data-collapse~="right"] .rightStack,
+.app[data-collapse~="right"] .rightRail,
+.app[data-collapse~="right"] .handleRight {
+	display: none;
+}
+
+.app[data-collapse~="bottom"] {
+	--bottom-h: 0px;
+}
+.app[data-collapse~="bottom"] .bottombar {
+	display: none;
+}
+.app[data-collapse~="bottom"] .handleBottom {
+	display: none;
+}
+
+/* ─── titlebar ──────────────────────────────────────────────────── */
+.titlebar {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-3);
+	padding-inline: var(--sp-4);
+	background: var(--bg);
+	border-bottom: 1px solid var(--border-soft);
+	min-width: 0;
+	/* ponytail: make the titlebar the drag region in Electron. The buttons
+	 * opt out via inline -webkit-app-region: no-drag (see Titlebar.tsx). */
+	-webkit-app-region: drag;
+	app-region: drag;
+}
+.titlebar button,
+.titlebar input,
+.titlebar select,
+.titlebar textarea,
+.titlebar .langSel,
+.titlebar .recorderBtn {
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+}
+.titlebar .lights {
+	display: inline-flex;
+	gap: 6px;
+	margin-right: var(--sp-3);
+}
+.titlebar .lights span {
+	width: 11px;
+	height: 11px;
+	border-radius: 50%;
+	border: 1px solid var(--overlay-border);
+}
+.titlebar .lights .r { background: var(--light-red); }
+.titlebar .lights .y { background: var(--light-yellow); }
+.titlebar .lights .g { background: var(--light-green); }
+
+.titlebar .brand {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-family: var(--font-display);
+	font-size: var(--fs-title);
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	color: var(--fg);
+}
+.titlebar .brandMark {
+	width: 18px;
+	height: 18px;
+	border-radius: 5px;
+	background: var(--accent);
+	display: grid;
+	place-items: center;
+	color: var(--accent-on);
+	font: 600 11px/1 var(--font-display);
+}
+.titlebar .sep {
+	width: 1px;
+	height: 16px;
+	background: var(--border);
+}
+.titlebar .project {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-2);
+	font-size: var(--fs-app);
+	color: var(--muted);
+	min-width: 0;
+}
+.titlebar .projectName {
+	color: var(--fg-2);
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 280px;
+	background: transparent;
+	border: 0;
+	padding: 2px 6px;
+	border-radius: var(--r-sm);
+	cursor: text;
+	font: inherit;
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+}
+.titlebar .projectName:hover:not(:disabled) {
+	background: var(--surface-3);
+}
+.titlebar .projectInput {
+	background: var(--surface);
+	color: var(--fg);
+	border: 1px solid var(--accent);
+	border-radius: var(--r-sm);
+	padding: 2px 6px;
+	font: 500 13px var(--font-body);
+	outline: none;
+	min-width: 200px;
+	max-width: 360px;
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+}
+.titlebar .saved {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-family: var(--font-mono);
+	font-size: var(--fs-app-sm);
+	color: var(--muted);
+}
+.titlebar .saved .dot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--success);
+}
+.titlebar .projActions {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-1);
+	margin-right: var(--sp-1);
+}
+.titlebar .right {
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-1);
+}
+.titlebar .iconBtn {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.titlebar .iconBtn:hover {
+	background: var(--surface-3);
+	color: var(--fg);
+}
+.titlebar .iconBtn[aria-pressed="true"] {
+	background: var(--accent-soft);
+	color: var(--accent);
+}
+.titlebar .langSel {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 26px;
+	padding: 0 6px;
+	background: transparent;
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-md);
+	color: var(--fg-2);
+	font: 500 var(--fs-app)/1 var(--font-display);
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.titlebar .langSel:hover {
+	background: var(--surface-3);
+	border-color: var(--border);
+	color: var(--fg);
+}
+.titlebar .recorderBtn {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 26px;
+	padding: 0 10px 0 8px;
+	border-radius: var(--r-md);
+	background: var(--accent-soft);
+	color: var(--accent);
+	border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+	font: 500 var(--fs-app-sm)/1 var(--font-display);
+	letter-spacing: 0.01em;
+	cursor: pointer;
+}
+.titlebar .recorderBtn:hover {
+	background: color-mix(in oklch, var(--accent) 18%, var(--surface-3));
+}
+
+/* ─── workbench — 7 columns: rail · panel · handle · preview · handle · stack · rail */
+.workbench {
+	display: grid;
+	grid-template-columns:
+		var(--rail-w)
+		var(--panel-w-left)
+		var(--handle-w)
+		1fr
+		var(--handle-w)
+		var(--panel-w-right)
+		var(--rail-w);
+	min-height: 0;
+	background: var(--bg);
+	overflow: hidden;
+}
+.workbench > * {
+	min-height: 0;
+}
+.workbench > * + * {
+	border-left: 1px solid var(--border-soft);
+}
+
+.leftPanel {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	min-height: 0;
+}
+
+/* ─── rails — vertical icon strips ─────────────────────────────── */
+.rail {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-1);
+	padding: var(--sp-2) 0;
+	background: var(--bg);
+	min-width: 0;
+}
+.rail button {
+	width: 36px;
+	height: 36px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-md);
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+	position: relative;
+}
+.rail button:hover {
+	background: var(--surface-3);
+	color: var(--fg);
+}
+.rail button[aria-pressed="true"] {
+	color: var(--accent);
+	background: var(--accent-soft);
+}
+.rail button[aria-pressed="true"]::before {
+	content: "";
+	position: absolute;
+	left: -8px;
+	top: 8px;
+	bottom: 8px;
+	width: 3px;
+	border-radius: 2px;
+	background: var(--accent);
+}
+.rail .sepH {
+	width: 24px;
+	height: 1px;
+	background: var(--border);
+	margin: var(--sp-1) 0;
+}
+
+/* ─── panels (chat, transcript, etc.) ──────────────────────────── */
+.panel {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg);
+	overflow: hidden;
+}
+
+/* Direct children of .panel: panelHeader (auto), panelBody (1fr), chatInput (auto). */
+.panel > .panelHeader,
+.panel > .chatInput {
+	flex: 0 0 auto;
+}
+.panel > .panelBody {
+	flex: 1 1 0;
+}
+.panelHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: var(--sp-3) var(--sp-4);
+	border-bottom: 1px solid var(--border-soft);
+	min-height: 44px;
+}
+.panelHead h2 {
+	margin: 0;
+	font-family: var(--font-display);
+	font-size: 14px;
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	color: var(--fg);
+}
+.panelHead .right {
+	margin-left: auto;
+	display: inline-flex;
+	gap: var(--sp-1);
+}
+.panelHead .iconBtn {
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--meta);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.panelHead .iconBtn:hover {
+	background: var(--surface-3);
+	color: var(--fg-2);
+}
+.panelBody {
+	overflow-y: auto;
+	padding: var(--sp-3) var(--sp-4);
+	scrollbar-width: thin;
+	scrollbar-color: var(--border) transparent;
+	min-height: 0;
+}
+.panelBody::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+.panelBody::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border-radius: 4px;
+}
+.panelBody::-webkit-scrollbar-thumb:hover {
+	background: var(--border-hi);
+}
+
+/* ─── resize handles ───────────────────────────────────────────── */
+.handle {
+	background: transparent;
+	position: relative;
+	z-index: 2;
+	transition: background var(--motion-fast) var(--ease);
+	cursor: col-resize;
+}
+.handleRow {
+	cursor: row-resize;
+	grid-column: 1 / -1;
+	border-bottom: 1px solid var(--border);
+}
+.handle:hover,
+.handle.isDragging {
+	background: var(--surface-2);
+}
+.handle::before,
+.handle::after {
+	content: "";
+	position: absolute;
+	background: var(--dim);
+	border-radius: 1px;
+	opacity: 0.45;
+	transition: opacity var(--motion-fast) var(--ease);
+	pointer-events: none;
+}
+.handleCol::before,
+.handleCol::after {
+	left: 50%;
+	width: 1px;
+	height: 14px;
+	transform: translateX(-50%);
+}
+.handleCol::before { top: calc(50% - 16px); }
+.handleCol::after  { top: calc(50% + 2px); }
+.handleRow::before,
+.handleRow::after {
+	top: 50%;
+	height: 1px;
+	width: 14px;
+	transform: translateY(-50%);
+}
+.handleRow::before { left: calc(50% - 16px); }
+.handleRow::after  { left: calc(50% + 2px); }
+.handle:hover::before,
+.handle:hover::after,
+.handle.isDragging::before,
+.handle.isDragging::after {
+	opacity: 1;
+}
+.handle.isDragging {
+	background: var(--accent-soft);
+}
+
+/* ─── preview area ─────────────────────────────────────────────── */
+/* ponytail: the stage wrapper (in NewEditorShell.tsx) already provides the
+   padding that reserves room for the floating inspector, and .stage paints the
+   scene gradient. previewWrap is a single transparent, zero-padding centering
+   layer so the wallpaper card floats on that gradient — matching the design's
+   stage-wrap (one framed card, no surface slab, no double padding). It is also
+   the positioned ancestor for the timecode/badge overlays and the box the
+   frame measures for its contain-fit. */
+.previewWrap {
+	position: relative;
+	display: grid;
+	place-items: center;
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+}
+.previewFrame {
+	position: relative;
+	aspect-ratio: 16 / 9;
+	max-width: 100%;
+	max-height: 100%;
+	width: 100%;
+	min-width: 0;
+	min-height: 0;
+	background:
+		radial-gradient(ellipse at 50% 35%,
+			var(--scene-sky-hi) 0%,
+			var(--scene-sky-mid) 35%,
+			var(--scene-foliage) 70%,
+			var(--scene-foliage-d) 100%);
+	/* ponytail: the wallpaper card is a floating, rounded surface (per the v4
+	   design's preview frame) — rounded corners + a layered drop shadow lift it
+	   off the scene gradient. The custom background (buildFrameStyle) fills this
+	   card; the video sits on top with its own padding so the wallpaper shows
+	   around it. */
+	border-radius: 16px;
+	box-shadow:
+		0 40px 90px -30px rgba(0, 0, 0, 0.75),
+		0 12px 28px -12px rgba(0, 0, 0, 0.5),
+		inset 0 0 0 1px rgba(255, 255, 255, 0.09);
+	overflow: hidden;
+	display: grid;
+	place-items: center;
+}
+.videoStage {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-width: 0;
+	min-height: 0;
+	overflow: visible;
+	z-index: 1;
+}
+.screenStage {
+	position: absolute;
+	overflow: hidden;
+	z-index: 1;
+	display: flex;
+}
+.screenStage > .container,
+.screenStage > div > .container {
+	width: 100%;
+	height: 100%;
+}
+.previewEmpty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	color: var(--muted);
+	font-size: var(--fs-app);
+}
+.previewEmpty strong { color: var(--fg-2); }
+
+/* ─── preview empty state (no project / no asset) ───────────────── */
+.previewEmptyDrop {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.previewEmptyDropOverlay {
+	position: absolute;
+	inset: 0;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	border: 2px dashed var(--primary, #34B27B);
+	background: color-mix(in srgb, var(--primary, #34B27B) 10%, transparent);
+	border-radius: var(--r-sm);
+	pointer-events: none;
+}
+.previewEmptyDropIcon {
+	width: 40px;
+	height: 40px;
+	color: var(--primary, #34B27B);
+}
+.previewEmptyDropLabel {
+	font-size: var(--fs-app);
+	font-weight: 600;
+	color: var(--primary, #34B27B);
+}
+.previewEmptyInner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-4);
+	padding: var(--sp-5);
+	text-align: center;
+	max-width: 28rem;
+}
+.previewEmptyLogo {
+	width: 64px;
+	height: 64px;
+	border-radius: var(--r-md);
+	opacity: 0.9;
+}
+.previewEmptyHeading {
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-1);
+}
+.previewEmptyTitle {
+	margin: 0;
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--fg-2);
+}
+.previewEmptyDescription {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--muted);
+	line-height: 1.5;
+}
+.previewEmptyActions {
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-2);
+	width: 100%;
+	max-width: 18rem;
+}
+.previewEmptyPrimaryButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	padding: var(--sp-3) var(--sp-4);
+	border-radius: var(--r-sm);
+	background: var(--primary, #34B27B);
+	color: #fff;
+	border: none;
+	font-weight: 500;
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition: background-color 120ms ease;
+}
+.previewEmptyPrimaryButton:hover {
+	filter: brightness(0.95);
+}
+.previewEmptySecondaryButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	padding: var(--sp-3) var(--sp-4);
+	border-radius: var(--r-sm);
+	background: var(--card);
+	color: var(--fg-2);
+	border: 1px solid var(--border);
+	font-weight: 500;
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition: background-color 120ms ease;
+}
+.previewEmptySecondaryButton:hover {
+	background: var(--accent, rgba(255, 255, 255, 0.06));
+}
+.previewEmptyButtonIcon {
+	width: 16px;
+	height: 16px;
+}
+.previewEmptyHint {
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.5));
+}
+.previewEmptyDragHint {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-1);
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.4));
+}
+.previewEmptyDragHintIcon {
+	width: 12px;
+	height: 12px;
+}
+
+/* ─── preview media failure (PreviewErrorCard) ──────────────────── */
+/* Overlays the stage instead of replacing it: the native compositor is still
+   painting the last composed frame underneath, and leaving that frame visible is
+   what tells the user their project is fine (issue #395). Translucent, not
+   opaque, for the same reason. */
+.previewFailure {
+	position: absolute;
+	inset: 0;
+	z-index: 3;
+	display: grid;
+	place-items: center;
+	padding: var(--sp-4);
+	background: rgba(9, 9, 11, 0.72);
+	backdrop-filter: blur(2px);
+	/* The scrim is a fixed dark surface in BOTH themes, so the text on it must
+	   not follow the document theme. Light is the default (useTheme.ts), and
+	   there --fg-2 is #334155 — near-black on near-black. Pinned here rather
+	   than as a var() fallback per rule: --muted-foreground is always defined
+	   (design-tokens.css), so a fallback would never have fired. */
+	--fg-2: #f3f5f8;
+	--muted-foreground: rgba(255, 255, 255, 0.78);
+}
+.previewFailureCard {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-3);
+	max-width: min(38ch, 100%);
+	text-align: center;
+}
+.previewFailureIconRing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.05);
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.previewFailureIcon {
+	width: 20px;
+	height: 20px;
+	color: var(--muted-foreground);
+}
+.previewFailureTitle {
+	margin: 0;
+	font-size: 1.05rem;
+	font-weight: 600;
+	color: var(--fg-2);
+}
+.previewFailureDescription {
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.5;
+	color: var(--muted-foreground);
+}
+/* Selectable: it exists to be copied into a bug report, so it stays legible
+   rather than fading to decoration. */
+.previewFailureDetail {
+	margin: 0;
+	font-size: 0.6875rem;
+	font-family: var(--font-mono, ui-monospace, monospace);
+	color: rgba(255, 255, 255, 0.6);
+	user-select: text;
+	word-break: break-word;
+}
+.previewEmptyDialog {
+	max-width: 24rem;
+	padding: var(--sp-5);
+	background: var(--bg);
+	border: 1px solid var(--border);
+}
+.previewEmptyDialogHeader {
+	margin-bottom: var(--sp-3);
+}
+.previewEmptyDialogHeaderInner {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+}
+.previewEmptyDialogLogo {
+	width: 36px;
+	height: 36px;
+	border-radius: var(--r-sm);
+	flex-shrink: 0;
+}
+.previewEmptyDialogTitle {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--fg-2);
+	line-height: 1.2;
+}
+.previewEmptyDialogBody {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-2);
+	margin-bottom: var(--sp-4);
+	text-align: center;
+}
+.previewEmptyDialogIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 9999px;
+	background: var(--card);
+	border: 1px solid var(--border);
+}
+.previewEmptyDialogAlertIcon {
+	width: 20px;
+	height: 20px;
+	color: var(--muted);
+}
+.previewEmptyDialogMessage {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--muted);
+	line-height: 1.5;
+}
+.previewEmptyDialogClose {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-1);
+	width: 100%;
+	padding: var(--sp-2) var(--sp-3);
+	border-radius: var(--r-sm);
+	background: var(--card);
+	color: var(--fg-2);
+	border: 1px solid var(--border);
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+}
+.previewEmptyDialogCloseIcon {
+	width: 14px;
+	height: 14px;
+}
+.previewPip {
+	position: absolute;
+	right: var(--sp-3);
+	bottom: var(--sp-3);
+	width: 120px;
+	aspect-ratio: 16 / 9;
+	border-radius: var(--r-sm);
+	background: linear-gradient(135deg, var(--pip-bg-1) 0%, var(--pip-bg-2) 50%, var(--pip-bg-3) 100%);
+	border: 2px solid var(--bg);
+	box-shadow: var(--elev-card);
+	overflow: hidden;
+	display: grid;
+	place-items: center;
+	color: var(--overlay-text);
+	font-family: var(--font-mono);
+	font-size: 9px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}
+.previewFrame > .screenStage video {
+	position: relative;
+	z-index: 1;
+	/* Pixels come from the native canvas now; this <video> stays mounted (and
+	   playing) purely as the decode/playback-clock/metadata source. A plain
+	   descendant selector (not a fixed child-depth chain) is required here:
+	   VirtualPreview nests the actual <video> THREE levels down
+	   (.screenStage > .container > .videoFrame > video), not one or two —
+	   the previous `>` chain silently never matched, leaving this video
+	   fully visible (and on top of the native canvas) the whole time. */
+	visibility: hidden;
+}
+.pipCircle {
+	border-radius: 9999px !important;
+}
+.pipSquare {
+	border-radius: 0 !important;
+}
+.pipRounded {
+	border-radius: 18px !important;
+}
+
+/* Webcam overlay: real <video> driven by the cameraTrack. The slot is
+   transparent so clip-path / border-radius carve the camera without leaving
+   a rectangular placeholder peeking through. */
+.webcamSlot {
+	background: transparent;
+	overflow: hidden;
+	z-index: 2;
+	display: flex;
+}
+.webcamSlot .webcamVideo {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	/* Native canvas already draws the composited webcam PiP; this <video> stays
+	   mounted (playing) only to drive the camera's own decode/sync clock. The
+	   slot div itself stays visible/clickable for the drag-to-reposition hitbox. */
+	visibility: hidden;
+	display: block;
+}
+/* ─── transport bar (lives inside .timelineHead, next to the tool icons) ─ */
+.transport {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: 1;
+	min-width: 0;
+}
+.transport .tbtn {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--fg-2);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	flex-shrink: 0;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.transport .tbtn:hover {
+	background: var(--surface-3);
+	color: var(--fg);
+}
+.transport .tbtn.play {
+	width: 28px;
+	height: 28px;
+	background: var(--fg);
+	color: var(--bg);
+	border-radius: 50%;
+}
+.transport .tbtn.play:hover {
+	background: var(--fg-2);
+}
+.transport .time {
+	font-family: var(--font-mono);
+	font-size: var(--fs-app-sm);
+	color: var(--fg);
+	letter-spacing: 0.02em;
+	min-width: 96px;
+	text-align: center;
+	flex-shrink: 0;
+}
+.transport .time .sep { color: var(--meta); margin-inline: 4px; }
+.transport .time .total { color: var(--muted); }
+.transport .spacer { flex: 1; }
+
+/* ─── right panel-stack (one pane visible at a time) ──────────── */
+.rightStack {
+	grid-column: 6;
+	display: grid;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg);
+}
+.pane {
+	display: none;
+	grid-template-rows: auto 1fr;
+	min-height: 0;
+}
+.pane.isActive {
+	display: grid;
+}
+.paneHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: 12px var(--sp-4);
+	/* Every pane wearing this header is rendered inside FloatingInspector, which
+	   floats its "Collapse inspector" button (right: 12, 26px wide) over the
+	   header's right edge — landing squarely on whatever sits there and
+	   swallowing its clicks. The Help button was the casualty: visible on every
+	   facet, and unclickable. Reserve the floated button its own lane instead. */
+	padding-right: 46px;
+	border-bottom: 1px solid var(--border-soft);
+	min-height: 44px;
+}
+.paneHead h2 {
+	margin: 0;
+	font-family: var(--font-display);
+	font-size: 14px;
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	color: var(--fg);
+}
+.paneBody {
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 12px var(--sp-4);
+	scrollbar-width: thin;
+	scrollbar-color: var(--border) transparent;
+	min-height: 0;
+}
+
+/* ─── pane tabs (sub-nav inside a pane) ───────────────────────── */
+.paneTabs {
+	display: flex;
+	gap: 2px;
+	padding: 3px;
+	margin: 12px var(--sp-4);
+	background: var(--surface-warm);
+	border-radius: 10px;
+}
+.paneTabs button {
+	flex: 1;
+	padding: 7px 10px;
+	border: 0;
+	background: transparent;
+	border-radius: 7px;
+	font: 500 var(--fs-app-sm)/1 var(--font-body);
+	color: var(--muted);
+	cursor: pointer;
+	transition: background 150ms ease, color 150ms ease;
+}
+.paneTabs button.isActive {
+	background: var(--brand);
+	color: var(--accent-on);
+	box-shadow: 0 1px 2px rgba(22, 23, 29, 0.12);
+}
+.paneSection { display: none; }
+.paneSection.isActive { display: block; }
+
+/* ─── pane rows (label + control) ─────────────────────────────── */
+.paneRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 12px 14px;
+	margin: 8px var(--sp-4);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--bg);
+}
+.paneRow .label { font: 500 var(--fs-app) var(--font-body); color: var(--fg-2); }
+.paneRow .info  { color: var(--meta); font-size: var(--fs-app-sm); margin-left: 4px; }
+.sectionLabel {
+	font: 500 var(--fs-app-sm) var(--font-body);
+	color: var(--fg-2);
+	margin: 4px var(--sp-4) 8px;
+}
+.uploadBtn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	margin: 0 var(--sp-4) 12px;
+	padding: 12px;
+	border: 1px dashed var(--border);
+	border-radius: 10px;
+	background: var(--bg);
+	color: var(--muted);
+	font: 500 var(--fs-app-sm) var(--font-body);
+	cursor: pointer;
+}
+.uploadBtn:hover { border-color: var(--success); color: var(--success); }
+.field {
+	display: grid;
+	grid-template-columns: 80px 1fr;
+	align-items: center;
+	gap: 8px;
+	padding: 4px var(--sp-4);
+}
+.field label {
+	font: 500 var(--fs-app-sm) var(--font-body);
+	color: var(--muted);
+}
+.field select,
+.field input {
+	width: 100%;
+	padding: 6px 8px;
+	font: 400 var(--fs-app-sm) var(--font-body);
+	color: var(--fg-2);
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	outline: none;
+}
+.field select:focus,
+.field input:focus { border-color: var(--brand); }
+.field select:disabled,
+.field input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── bg thumb grid ────────────────────────────────────────────── */
+.bgGrid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 8px;
+	padding: 0 var(--sp-4) var(--sp-4);
+}
+.bgThumb {
+	aspect-ratio: 1/1;
+	border-radius: 10px;
+	border: 1px solid transparent;
+	cursor: pointer;
+	transition: transform 150ms ease, border-color 150ms ease;
+	background: var(--surface-2);
+}
+.bgThumb:hover { transform: translateY(-1px); }
+.bgThumb.isActive {
+	border-color: var(--brand);
+	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 70%);
+}
+
+/* ─── toggle (switch) ──────────────────────────────────────────── */
+.toggle {
+	width: 36px;
+	height: 20px;
+	border: 0;
+	padding: 0;
+	background: var(--border-hi);
+	border-radius: 9999px;
+	position: relative;
+	cursor: pointer;
+	transition: background 150ms ease;
+	flex-shrink: 0;
+}
+.toggle::after {
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 16px;
+	height: 16px;
+	background: var(--accent-on);
+	border-radius: 50%;
+	box-shadow: 0 1px 3px rgba(22, 23, 29, 0.2);
+	transition: transform 150ms ease;
+}
+.toggle.isOn { background: var(--brand); }
+.toggle.isOn::after { transform: translateX(16px); }
+.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── slider cell (effect) ─────────────────────────────────────── */
+.sliderGrid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 8px;
+	padding: 0 var(--sp-4) var(--sp-4);
+}
+.sliderCell {
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--bg);
+	padding: 10px 12px;
+	display: grid;
+	grid-template-rows: auto auto;
+	gap: 8px;
+}
+.sliderCell .head { display: flex; align-items: center; gap: 6px; }
+.sliderCell .label { font: 500 11px var(--font-body); color: var(--fg-2); }
+.sliderCell .val { font: 500 11px var(--font-mono); color: var(--brand); margin-left: auto; }
+.sliderCell input[type=range] {
+	width: 100%;
+	height: 4px;
+	background: var(--border-hi);
+	border-radius: 2px;
+	outline: none;
+	-webkit-appearance: none;
+	cursor: pointer;
+}
+.sliderCell input[type=range]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: var(--brand);
+	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
+	cursor: pointer;
+}
+.sliderCell input[type=range]::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: var(--brand);
+	border: 0;
+	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
+	cursor: pointer;
+}
+.sliderCell.full { grid-column: 1 / -1; }
+.sliderCell input[type=range]:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── cursor style grid ────────────────────────────────────────── */
+.cursorGrid {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 6px;
+	padding: 0 var(--sp-4) var(--sp-4);
+}
+.cursorCell {
+	aspect-ratio: 1/1;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background: var(--bg);
+	display: grid;
+	place-items: center;
+	cursor: pointer;
+	transition: border-color 150ms ease, box-shadow 150ms ease;
+	color: var(--muted);
+}
+.cursorCell:hover { border-color: var(--border-hi); color: var(--fg-2); }
+.cursorCell:disabled { opacity: 0.5; cursor: not-allowed; }
+.cursorCell:disabled:hover { border-color: var(--border); color: var(--muted); }
+.cursorCell.isActive {
+	border-color: var(--brand);
+	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 75%);
+}
+
+/* ─── chat strip + input ───────────────────────────────────────── */
+.chatStrip {
+	padding: var(--sp-3) var(--sp-4) var(--sp-2);
+	border-bottom: 1px solid var(--border-soft);
+	background: var(--bg);
+}
+.chatStripRow {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	margin-bottom: 6px;
+}
+.ctxPill {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 3px 9px 3px 7px;
+	border-radius: var(--r-pill);
+	background: var(--success-soft);
+	color: var(--success);
+	font-family: var(--font-mono);
+	font-size: 10.5px;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+}
+.ctxPill .d {
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--success);
+}
+.stripActions {
+	margin-left: auto;
+	display: inline-flex;
+	gap: 2px;
+}
+.stripActions button {
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--meta);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.stripActions button:hover {
+	background: var(--surface-3);
+	color: var(--fg-2);
+}
+.stripActions button:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+.chatHint {
+	font-size: var(--fs-app-sm);
+	color: var(--muted);
+	letter-spacing: 0.005em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.msg { margin-bottom: var(--sp-3); }
+.msgHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: 0 var(--sp-1);
+	margin-bottom: var(--sp-1);
+}
+.msgAuthor {
+	font-family: var(--font-mono);
+	font-size: 10px;
+	letter-spacing: 0.08em;
+	color: var(--meta);
+	text-transform: uppercase;
+}
+.msgHead .right {
+	margin-left: auto;
+	display: inline-flex;
+	gap: 2px;
+}
+.msgHead .right button {
+	width: 22px;
+	height: 22px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-xs);
+	color: var(--meta);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.msgHead .right button:hover {
+	background: var(--surface-3);
+	color: var(--fg-2);
+}
+.msgBubble {
+	padding: var(--sp-3) var(--sp-4);
+	border-radius: var(--r-md);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	font-size: var(--fs-app);
+	color: var(--fg-2);
+	line-height: 1.5;
+}
+.msgBubble .msgAuthor { color: var(--accent); }
+
+.chatInput {
+	padding: var(--sp-2) var(--sp-4) var(--sp-3);
+	border-top: 1px solid var(--border-soft);
+	background: var(--bg);
+}
+.chatInput textarea {
+	width: 100%;
+	min-height: 36px;
+	max-height: 120px;
+	resize: none;
+	padding: 8px var(--sp-3);
+	border-radius: var(--r-md);
+	border: 1px solid var(--border);
+	background: var(--bg);
+	font-family: var(--font-body);
+	font-size: var(--fs-app);
+	line-height: 1.4;
+	color: var(--fg);
+	outline: none;
+	transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
+}
+.chatInput textarea::placeholder { color: var(--meta); }
+.chatInput textarea:focus {
+	border-color: var(--accent);
+	box-shadow: var(--focus-ring);
+}
+.chatInput .actions {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	margin-top: 6px;
+}
+.modelPicker {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 5px 4px 5px 10px;
+	border-radius: var(--r-pill);
+	background: var(--surface-2);
+	font-family: var(--font-mono);
+	font-size: 11px;
+	color: var(--fg-2);
+	letter-spacing: 0.01em;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease);
+	border: 0;
+}
+.modelPicker:hover { background: var(--surface-3); }
+.reasoningBtn {
+	display: inline-flex;
+	align-items: center;
+	background: transparent;
+	border: 0;
+	padding: 0;
+	cursor: pointer;
+}
+.chip {
+	padding: 5px 10px;
+	border-radius: var(--r-pill);
+	background: var(--success-soft);
+	color: var(--success);
+	font-size: 10.5px;
+	font-weight: 500;
+	letter-spacing: 0.01em;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	transition: background var(--motion-fast) var(--ease);
+}
+.reasoningBtn:hover .chip { background: var(--success-soft); filter: brightness(1.1); }
+.chip .d {
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--success);
+}
+.sendBtn {
+	margin-left: auto;
+	width: 32px;
+	height: 32px;
+	display: grid;
+	place-items: center;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--fg);
+	border: 0;
+	cursor: pointer;
+	transition: color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
+}
+.sendBtn:hover { color: var(--accent); transform: scale(1.05); }
+.sendBtn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ─── transcript pane content ─────────────────────────────────── */
+.transcriptClipHead {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 0 4px 4px;
+	border-bottom: 1px solid var(--border-soft);
+	margin-bottom: 8px;
+}
+.transcriptClipHead .badge {
+	width: 22px;
+	height: 22px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--brand-soft);
+	color: var(--brand);
+	border-radius: var(--r-sm);
+	font: 700 12px/1 var(--font-mono);
+	flex-shrink: 0;
+}
+.transcriptClipHead .title {
+	font: 600 var(--fs-app)/1.2 var(--font-body);
+	color: var(--fg);
+	margin: 0;
+	padding: 0;
+}
+.transcriptClipHead .sub {
+	font: 400 11px/1.3 var(--font-mono);
+	color: var(--muted);
+	margin-top: 2px;
+}
+.transcriptFlow {
+	margin: 0;
+	padding: 0 4px;
+	font: 400 var(--fs-app-lg)/1.65 var(--font-body);
+	color: var(--fg);
+	text-wrap: pretty;
+}
+.transcriptFlow .tc {
+	display: inline-block;
+	margin: 0 4px;
+	padding: 1px 6px;
+	background: transparent;
+	color: var(--brand);
+	border-radius: var(--r-sm);
+	font: 500 11px/1.4 var(--font-mono);
+	vertical-align: middle;
+	white-space: nowrap;
+}
+
+
+/* ─── bottombar / timeline ─────────────────────────────────────── */
+.bottombar {
+	display: grid;
+	grid-template-columns: 1fr;
+	min-height: 0;
+	background: var(--bg);
+	overflow: hidden;
+}
+
+/* Region lanes (annotations / speed / zoom) inside the timeline body. */
+/* Lanes: fixed-width label column + one shared dnd-timeline surface column.
+   Both columns lay out 3 rows independently but with identical height (22px)
+   + gap (2px), so they line up without needing CSS grid row-spanning. */
+.lanes {
+	display: flex;
+	gap: 8px;
+	padding: 4px var(--sp-4) 2px;
+	flex-shrink: 0;
+	border-bottom: 1px solid var(--border-soft);
+}
+.laneLabelCol {
+	width: 64px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.laneLabelCell {
+	height: 22px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 4px;
+}
+.laneLabel {
+	font: 600 10px/1 var(--font-mono);
+	color: var(--meta);
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+.laneMeta {
+	font: 500 10.5px/1 var(--font-mono);
+	color: var(--muted);
+	min-width: 12px;
+	text-align: right;
+}
+.laneDelete {
+	width: 18px;
+	height: 18px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border: 0;
+	border-radius: var(--r-xs);
+	background: var(--danger-soft);
+	color: var(--danger);
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+}
+.laneDelete:hover {
+	filter: brightness(0.95);
+}
+.laneSurface {
+	flex: 1;
+	min-width: 0;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+/* F2.6 — vertical snap-guide lines at both edges of the region being
+   dragged/resized. Spans the full lane stack (parity with T24 on the
+   clip timeline). */
+.laneSnapGuide {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	background: var(--danger);
+	box-shadow: 0 0 6px color-mix(in oklch, var(--danger) 60%, transparent);
+	pointer-events: none;
+	z-index: 14;
+}
+/* F2.6 — floating tooltip with the live start – end range (parity with
+   T25 on the clip timeline). */
+.laneDragTooltip {
+	position: absolute;
+	top: -20px;
+	height: 18px;
+	padding: 0 8px;
+	background: var(--surface);
+	border: 1px solid var(--border-soft);
+	border-radius: 9px;
+	color: var(--fg-2);
+	font: 500 10.5px/18px var(--font-mono);
+	letter-spacing: 0.02em;
+	white-space: nowrap;
+	pointer-events: none;
+	z-index: 15;
+	box-shadow: var(--elev-card-soft);
+}
+.laneTrackRow {
+	position: relative;
+	height: 24px;
+	background: var(--surface-1);
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-sm);
+	overflow: hidden;
+}
+.laneEmpty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font: 500 11px/1 var(--font-body);
+	color: var(--muted);
+	opacity: 0.6;
+	pointer-events: none;
+}
+
+/* Lane pills: zoom / speed / annotation / skip. Flat wash fill + 1.5px frame
+ * per the v4 design (design/OpenScreen Editor v4.dc.html pillStyle) — no
+ * gradient, no tab caps. Selected pills gain an accent ring. */
+.zoomPill,
+.speedPill,
+.annotationPill,
+.skipPill {
+	--_pill: var(--accent);
+	--_wash: var(--accent-soft);
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 22px;
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 0 8px 0 7px;
+	background: var(--_wash);
+	border: 1.5px solid var(--_pill);
+	border-radius: var(--r-sm);
+	color: var(--fg);
+	font: 600 11px/1 var(--font-display);
+	letter-spacing: 0.01em;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+	overflow: hidden;
+	box-sizing: border-box;
+	pointer-events: auto;
+	cursor: pointer;
+	z-index: 2;
+}
+.zoomPill {
+	--_pill: var(--accent);
+	--_wash: var(--accent-soft);
+}
+.speedPill {
+	--_pill: var(--speed);
+	--_wash: var(--speed-wash);
+}
+.annotationPill {
+	--_pill: var(--annotation);
+	--_wash: var(--annotation-wash);
+}
+.skipPill {
+	--_pill: var(--danger);
+	--_wash: var(--danger-soft);
+}
+.lanePillSelected {
+	box-shadow: 0 0 0 3px color-mix(in oklch, var(--_pill) 35%, transparent);
+}
+.pillIcon {
+	width: 11px;
+	height: 11px;
+	flex-shrink: 0;
+	color: color-mix(in oklch, var(--_pill) 70%, var(--fg));
+}
+.pillValue {
+	color: var(--fg);
+	font-variant-numeric: tabular-nums;
+}
+
+.timelineHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: var(--sp-2) var(--sp-4);
+	border-bottom: 1px solid var(--border-soft);
+	min-height: 40px;
+}
+.timelineHead .viewTools {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 3px;
+	background: var(--surface-2);
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-sm);
+}
+.timelineHead .vtBtn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--muted);
+	border-radius: var(--r-xs);
+	cursor: pointer;
+	transition: color 0.12s ease, background 0.12s ease;
+}
+.timelineHead .vtBtn:hover { color: var(--fg); background: var(--surface); }
+.timelineHead .vtBtn.isOn { color: var(--accent); background: var(--accent-wash); }
+.timelineHead .ratio {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 30px;
+	padding: 0 10px;
+	font-family: var(--font-mono);
+	font-size: var(--fs-app-sm);
+	color: var(--muted);
+	letter-spacing: 0.02em;
+	background: transparent;
+	border: 0;
+	border-left: 1px solid var(--border-soft);
+	margin-left: 4px;
+	cursor: pointer;
+	border-radius: 0 var(--r-sm) var(--r-sm) 0;
+}
+.timelineHead .ratio:hover { color: var(--fg); }
+.timelineHead .hintRow {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: var(--sp-4);
+}
+.timelineHead .hint {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-family: var(--font-display);
+	font-size: 11.5px;
+	color: var(--muted);
+	letter-spacing: 0.005em;
+}
+.timelineHead .hint .kbd {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 20px;
+	padding: 0 7px;
+	font-family: var(--font-mono);
+	font-size: 10.5px;
+	font-weight: 500;
+	color: var(--accent);
+	background: var(--accent-soft);
+	border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
+	border-radius: var(--r-xs);
+	letter-spacing: 0.02em;
+	white-space: nowrap;
+}
+.timelineBody {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	flex: 1;
+	overflow: hidden;
+}
+.timelineBody :global(.timelinePaneWrap) {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+.zoombar {
+	padding: 4px var(--sp-4) 8px;
+	background: var(--bg);
+	flex-shrink: 0;
+	border-top: 1px solid var(--border-soft);
+}
+
+/* T11 — Navigator strip. Moved to TimelinePane.module.css so the
+   className (applied via TimelinePane's own styles import) actually
+   matches the CSS. CSS modules' class hashes don't match across
+   files. The shape and the elements are unchanged from axcut's
+   .timeline-navigator / .timeline-navigator-window. */
+.zoombar .zoomTrack {
+	position: relative;
+	height: 18px;
+	width: 100%;
+}
+.zoombar .zoomFill {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	width: 100%;
+	height: 6px;
+	background: var(--accent);
+	border-radius: 3px;
+	pointer-events: none;
+}
+
+/* Radix Slider — visible two-handle range, design-aligned. */
+.sliderRoot {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: 18px;
+	width: 100%;
+	touch-action: none;
+	user-select: none;
+}
+.sliderTrack {
+	position: relative;
+	height: 6px;
+	width: 100%;
+	background: var(--surface-2);
+	border-radius: 3px;
+	overflow: hidden;
+}
+.sliderRange {
+	position: absolute;
+	height: 100%;
+	background: var(--accent);
+	border-radius: 3px;
+}
+.sliderThumb {
+	display: block;
+	width: 14px;
+	height: 14px;
+	background: var(--accent);
+	border: 1px solid var(--bg);
+	border-radius: 3px;
+	cursor: ew-resize;
+	transition: box-shadow var(--motion-fast) var(--ease);
+}
+.sliderThumb:hover,
+.sliderThumb:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
+}
+
+/* ─── modals ───────────────────────────────────────────────────── */
+.modal {
+	position: fixed;
+	inset: 0;
+	display: none;
+	z-index: 100;
+}
+.modal.isOpen { display: block; }
+.modalBackdrop {
+	position: absolute;
+	inset: 0;
+	background: var(--overlay-dark);
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+}
+.modalCard {
+	position: relative;
+	width: min(960px, 92vw);
+	max-height: 88vh;
+	margin: 6vh auto 0;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: var(--r-lg);
+	box-shadow: 0 24px 60px rgba(22, 23, 29, 0.5);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	color: var(--fg);
+}
+.modalCard.wide { width: min(720px, 92vw); }
+.modalHead {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	padding: 20px 24px 12px;
+	gap: 16px;
+}
+.modalHead h2 {
+	margin: 0;
+	font: 600 20px/1.3 var(--font-display);
+	color: var(--fg);
+}
+.modalHead p {
+	margin: 4px 0 0;
+	font: 400 var(--fs-app)/1.5 var(--font-body);
+	color: var(--muted);
+}
+.modalHead .closeBtn {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+}
+.modalHead .closeBtn:hover { background: var(--surface-3); color: var(--fg); }
+.modalBody {
+	padding: 8px 24px 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	overflow: auto;
+}
+
+.btn {
+	height: 32px;
+	padding: 0 14px;
+	border-radius: var(--r-md);
+	font: 500 var(--fs-app)/1 var(--font-body);
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
+}
+.btnSecondary {
+	background: var(--surface);
+	color: var(--fg);
+	border: 1px solid var(--border);
+}
+.btnSecondary:hover { background: var(--surface-warm); border-color: var(--border-hi); }
+.btnPrimary {
+	background: var(--accent);
+	color: var(--accent-on);
+	border: 1px solid var(--accent);
+}
+.btnPrimary:hover { background: var(--brand-lo); }
+.btnPrimary:disabled {
+	background: var(--surface-2);
+	border-color: var(--border);
+	color: var(--muted);
+	cursor: not-allowed;
+}
+
+/* ─── Edit Clip modal — draggable source-range track ────────────── */
+.editClipRangeDragging {
+	box-shadow: 0 0 0 2px var(--accent-soft);
+}
+
+/* ─── media card (left panel media list) ───────────────────────── */
+.mediaList {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+.mediaCard {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--r-md);
+	overflow: hidden;
+	border: 1px solid var(--border-soft);
+	background: var(--bg);
+	cursor: pointer;
+	transition: border-color var(--motion-fast) var(--ease);
+}
+.mediaCard:hover { border-color: var(--brand); }
+.mediaCard .thumb {
+	aspect-ratio: 16 / 9;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgba(255, 255, 255, 0.95);
+}
+.thumbRed   { background: var(--danger); }
+.thumbGreen { background: var(--success); }
+.thumbAmber { background: var(--warn); }
+.thumbCyan  { background: var(--accent); }
+.mediaMeta {
+	padding: 8px 10px 10px;
+	background: var(--surface-2);
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.mediaMeta .name {
+	font: var(--fs-app) var(--font-body);
+	color: var(--fg);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mediaMeta .row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+.mediaMeta .timecode { font: 11px var(--font-mono); color: var(--muted); }
+.mediaMeta .size     { font: 11px var(--font-body);  color: var(--muted); }
+
+.importBtn {
+	margin: 8px var(--sp-3) 12px;
+	padding: 10px 12px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	border: 1px dashed var(--border-hi);
+	border-radius: var(--r-md);
+	background: transparent;
+	color: var(--muted);
+	font: var(--fs-app) var(--font-body);
+	font-weight: 500;
+	cursor: pointer;
+}
+.importBtn:hover { background: var(--surface-warm); color: var(--fg); border-color: var(--accent); }
+
+/* Custom range slider / progress bar */
+.scrubBar {
+	flex: 1;
+	min-width: 0;
+	position: relative;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+}
+.scrubTrack {
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 4px;
+	background: var(--border-hi);
+	border-radius: 9999px;
+	overflow: hidden;
+}
+.scrubProgress {
+	height: 100%;
+	background: var(--accent);
+	border-radius: 9999px;
+}
+.scrubInput {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+	z-index: 10;
+	margin: 0;
+}
+.scrubThumb {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: #ffffff;
+	border-radius: 50%;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	pointer-events: none;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	opacity: 1;
+	transition: transform 100ms ease;
+}
+.scrubBar:hover .scrubThumb {
+	transform: translate(-50%, -50%) scale(1.2);
+}
+
+/* ─── AI provider settings (axcut parity) ────────────────────────── */
+
+.providerGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.providerCard {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: var(--surface);
+  color: var(--fg-2);
+  cursor: pointer;
+  font: 500 13px/1.2 var(--font-body);
+  text-align: left;
+  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
+}
+.providerCard:hover { border-color: var(--border-hi); }
+.providerCard.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--fg);
+}
+.providerCard .head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.providerCard .label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--fg);
+}
+.providerCard .model {
+  font: 500 11px var(--font-mono);
+  color: var(--muted);
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+}
+.statusPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font: 600 10px/1 var(--font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+}
+.statusPill.ready {
+  background: var(--success-soft, rgba(68, 175, 105, 0.18));
+  color: var(--success, #44af69);
+  border-color: color-mix(in srgb, var(--success, #44af69) 30%, transparent);
+}
+.statusPill.idle {
+  background: var(--surface-2);
+  color: var(--muted);
+  border-color: var(--border);
+}
+.statusPill.auth {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+.statusPill.pat {
+  background: color-mix(in srgb, var(--warn) 18%, transparent);
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
+}
+
+.providerForm {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.providerForm .title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.providerForm .title h3 {
+  margin: 0;
+  font: 600 16px var(--font-display);
+  color: var(--fg);
+}
+.providerForm .actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-soft);
+  margin-top: 4px;
+}
+.providerForm .actionsLeft {
+  display: flex;
+  gap: 8px;
+}
+.dangerBtn {
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  color: var(--danger);
+  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
+}
+.dangerBtn:hover {
+  background: color-mix(in srgb, var(--danger) 22%, transparent);
+  color: var(--danger);
+}
+
+.authPanel {
+  padding: 14px 16px;
+  border: 1px solid var(--brand);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+  border-radius: var(--r-md);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.authPanel strong {
+  display: block;
+  font: 600 13px var(--font-body);
+  color: var(--fg);
+}
+.authPanel p {
+  margin: 4px 0 0;
+  font: 400 12px/1.45 var(--font-body);
+  color: var(--muted);
+}
+.authCodeRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.authCodeRow code {
+  flex: 1;
+  font: 600 18px/1 var(--font-mono);
+  letter-spacing: 0.18em;
+  padding: 10px 14px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  color: var(--fg);
+  user-select: all;
+}
+.linkBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 32px;
+  border-radius: var(--r-md);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  font: 500 var(--fs-app) var(--font-body);
+  cursor: pointer;
+  text-decoration: none;
+}
+.linkBtn:hover { background: var(--surface-warm); border-color: var(--border-hi); }
+
+.errorRow {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: var(--r-md);
+  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
+  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
+  color: var(--danger);
+  font: 500 12px var(--font-body);
+}
+
+.iconBtn {
+  width: 28px;
+  height: 28px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: var(--r-sm);
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.iconBtn:hover { background: var(--surface-3); color: var(--fg); }
+.iconBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.backBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  height: 28px;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  font: 500 12px var(--font-body);
+}
+.backBtn:hover { background: var(--surface-3); }
+.backBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── chat welcome (no provider connected) ──────────────────────── */
+/* .panelBody supplies the horizontal inset (var(--sp-3) var(--sp-4)); only the
+   top breathing room is ours, or the card sits twice as far in as the messages. */
+.chatWelcome {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--sp-3);
+  padding: var(--sp-2) 0 0;
+  text-align: left;
+}
+
+.chatWelcomeHero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+  padding: 4px 0 0;
+}
+
+.chatWelcomeIcon {
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+
+.chatWelcomeTitle {
+  margin: 0;
+  font: 600 14px/1.3 var(--font-body);
+  color: var(--fg);
+  letter-spacing: -0.01em;
+}
+
+.chatWelcomeSubtitle {
+  margin: 0;
+  font: 400 12px/1.5 var(--font-body);
+  color: var(--muted);
+  max-width: 32ch;
+}
+
+/* Native list markers — no flex on the ul/li, or the items stop being
+   list-items and the markers vanish. padding-inline-start keeps them inside
+   the card in both writing directions. */
+.chatWelcomeFeatures {
+  /* explicit: the global reset sets list-style: none on every ul */
+  list-style: disc;
+  margin: 0;
+  padding: 10px 12px;
+  padding-inline-start: 26px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md);
+  font: 400 12px/1.45 var(--font-body);
+  color: var(--fg-2);
+}
+.chatWelcomeFeatures li + li { margin-top: 6px; }
+.chatWelcomeFeatures li::marker { color: var(--accent); }
+
+.chatWelcomeCta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 34px;
+  border-radius: var(--r-md);
+  background: var(--accent);
+  color: var(--accent-on);
+  border: 1px solid var(--accent);
+  font: 600 12.5px var(--font-body);
+  cursor: pointer;
+  transition: filter 120ms ease;
+}
+.chatWelcomeCta:hover { filter: brightness(0.95); }
+.chatWelcomeCta:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.chatWelcomeDisclaimer {
+  margin: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font: 400 10.5px/1.45 var(--font-body);
+  color: var(--muted);
+}
+
+.chatWelcomeDisclaimerIcon {
+  flex: 0 0 auto;
+  margin-top: 2px;
+  opacity: 0.8;
+}
diff --git a/src/components/ai-edition/Preview.test.tsx b/src/components/ai-edition/Preview.test.tsx
index 294ad4c3..db84828b 100644
--- a/src/components/ai-edition/Preview.test.tsx
+++ b/src/components/ai-edition/Preview.test.tsx
@@ -12,27 +12,43 @@ vi.mock("@/native/client", () => ({
 }));
 
 // Stand-in for the real canvas (native compositor, editor settings, a live
-// <video>): it only has to report WHICH sources it was handed and let a test
-// fire the load failure for one of them, which is the entire contract Preview
-// owns.
+// <video>): it only has to report WHICH sources it was handed, let a test fire
+// the terminal failure and the recovery for one of them, and show what retry
+// token it was given — which is the entire contract Preview owns.
 vi.mock("./PreviewCanvas", () => ({
 	PreviewCanvas: ({
 		videoSources,
 		onVideoError,
+		onVideoRecovered,
+		retryToken,
 	}: {
 		videoSources: VideoSource[];
-		onVideoError?: (assetId: string) => void;
+		onVideoError?: (assetId: string, detail: string) => void;
+		onVideoRecovered?: (assetId: string) => void;
+		retryToken?: number;
 	}) => (
-		<div data-testid="preview-canvas" data-sources={videoSources.map((s) => s.id).join(",")}>
+		<div
+			data-testid="preview-canvas"
+			data-sources={videoSources.map((s) => s.id).join(",")}
+			data-retry-token={retryToken}
+		>
 			{videoSources.map((source) => (
-				<button
-					key={source.id}
-					type="button"
-					data-testid={`fail-${source.id}`}
-					onClick={() => onVideoError?.(source.id)}
-				>
-					{source.src}
-				</button>
+				<div key={source.id}>
+					<button
+						type="button"
+						data-testid={`fail-${source.id}`}
+						onClick={() => onVideoError?.(source.id, "MEDIA_ERR_DECODE (3)")}
+					>
+						{source.src}
+					</button>
+					<button
+						type="button"
+						data-testid={`recover-${source.id}`}
+						onClick={() => onVideoRecovered?.(source.id)}
+					>
+						recover
+					</button>
+				</div>
 			))}
 		</div>
 	),
@@ -56,13 +72,13 @@ function source(id: string): VideoSource {
 	return { id, src: `file:///tmp/${id}.mp4`, label: id };
 }
 
-function renderPreview(props: {
+function previewProps(props: {
 	videoSources: VideoSource[];
 	clips: AxcutClip[];
 	hasAsset?: boolean;
 	hasProject?: boolean;
 }) {
-	return render(
+	return (
 		<I18nProvider>
 			<Preview
 				hasProject={props.hasProject ?? true}
@@ -76,12 +92,21 @@ function renderPreview(props: {
 				onVideoElement={vi.fn()}
 				playing={false}
 			/>
-		</I18nProvider>,
+		</I18nProvider>
 	);
 }
 
+function renderPreview(props: Parameters<typeof previewProps>[0]) {
+	return render(previewProps(props));
+}
+
 const canvas = () => screen.queryByTestId("preview-canvas");
 const emptyState = () => screen.queryByText(/add a video to get started/i);
+const errorCard = () => screen.queryByTestId("preview-error-card");
+const click = (testId: string) =>
+	act(() => {
+		fireEvent.click(screen.getByTestId(testId));
+	});
 
 describe("Preview follows the timeline, not the asset list", () => {
 	afterEach(() => {
@@ -105,42 +130,6 @@ describe("Preview follows the timeline, not the asset list", () => {
 		expect(emptyState()).not.toBeInTheDocument();
 	});
 
-	// The dead asset can't even report a failure now, but should one arrive for a
-	// source that is no longer used, it must not blank a preview built from other
-	// sources entirely.
-	it("keeps rendering when the unreferenced asset is the only broken one", () => {
-		const { rerender } = renderPreview({
-			videoSources: [source("dangling")],
-			clips: [],
-		});
-		// No clips yet → fallback to every asset, so the dead one does mount and fail.
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-dangling"));
-		});
-		expect(emptyState()).toBeInTheDocument();
-
-		// A clip lands on a healthy asset: the preview is driven by that clip now,
-		// and the earlier failure of an asset nothing references is irrelevant.
-		rerender(
-			<I18nProvider>
-				<Preview
-					hasProject={true}
-					hasAsset={true}
-					videoSources={[source("dangling"), source("valid")]}
-					clips={[clip("clip_a", "valid", 0, 24.7)]}
-					seekTarget={null}
-					onTimeChange={vi.fn()}
-					onSeek={vi.fn()}
-					onLoadedMetadata={vi.fn()}
-					onVideoElement={vi.fn()}
-					playing={false}
-				/>
-			</I18nProvider>,
-		);
-
-		expect(canvas()).toHaveAttribute("data-sources", "valid");
-	});
-
 	// Mounting index 0 is VirtualPreview's own starting point, so the source list
 	// has to lead with the asset the playhead needs at 0:00 — not whatever order
 	// the assets happen to be stored in.
@@ -173,85 +162,164 @@ describe("Preview follows the timeline, not the asset list", () => {
 
 		expect(canvas()).toHaveAttribute("data-sources", "fresh_import");
 	});
+
+	// A clip landing on a healthy asset takes over the preview regardless of what
+	// happened to the asset that was mounted before it.
+	it("switches to the asset a new clip references", () => {
+		const { rerender } = renderPreview({ videoSources: [source("dangling")], clips: [] });
+		click("fail-dangling");
+
+		rerender(
+			previewProps({
+				videoSources: [source("dangling"), source("valid")],
+				clips: [clip("clip_a", "valid", 0, 24.7)],
+			}),
+		);
+
+		expect(canvas()).toHaveAttribute("data-sources", "valid");
+	});
 });
 
-describe("Preview still degrades to the empty state on a real failure", () => {
+// Issue #395. Every test below used to assert the opposite — that a media
+// failure collapsed the stage to the import screen. The intent was right (say
+// something, offer a way out); the verdict was wrong, because the failure is
+// recoverable, the project is intact, and the native canvas is still painting.
+describe("Preview keeps the stage when the media fails", () => {
 	afterEach(() => {
 		cleanup();
 		vi.clearAllMocks();
 	});
 
-	// The documented intent this fix must not regress: a truncated recording from
-	// a bad MediaRecorder capture is referenced by a clip, fails to load, and the
-	// user gets the import affordance rather than a broken preview.
-	it("shows the empty state when the clip's own asset fails to load", () => {
+	it("shows a retry card over the canvas instead of the empty state", () => {
 		renderPreview({
 			videoSources: [source("truncated")],
 			clips: [clip("clip_a", "truncated", 0, 60)],
 		});
+
+		click("fail-truncated");
+
 		expect(canvas()).toBeInTheDocument();
+		expect(errorCard()).toBeInTheDocument();
+		expect(emptyState()).not.toBeInTheDocument();
+	});
 
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-truncated"));
-		});
+	// The MediaError code is the one thing that makes a user's report actionable;
+	// it used to be discarded entirely.
+	it("puts the media error on the card", () => {
+		renderPreview({ videoSources: [source("truncated")], clips: [] });
+		click("fail-truncated");
 
-		expect(canvas()).not.toBeInTheDocument();
-		expect(emptyState()).toBeInTheDocument();
+		expect(errorCard()).toHaveTextContent("MEDIA_ERR_DECODE (3)");
 	});
 
-	// Per-source, not a global latch: one dead asset among several used by the
-	// timeline leaves the rest renderable (VirtualPreview draws its own overlay
-	// over the source that failed).
-	it("survives one broken source among several the timeline uses", () => {
+	// The whole point of the fix: a dead source is not a dead editor, and the
+	// stage must stay mounted no matter how many sources report failure.
+	it("keeps the canvas when every source the timeline uses fails", () => {
 		renderPreview({
 			videoSources: [source("broken"), source("healthy")],
 			clips: [clip("clip_a", "broken", 0, 10), clip("clip_b", "healthy", 10, 20)],
 		});
 
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-broken"));
+		click("fail-broken");
+		click("fail-healthy");
+
+		expect(canvas()).toBeInTheDocument();
+		expect(emptyState()).not.toBeInTheDocument();
+	});
+
+	// Self-healing: VirtualPreview reports a decoded frame, so the card must go —
+	// otherwise it outlives its own failure, which is the latch again in a
+	// quieter form.
+	it("drops the card when the source decodes again", () => {
+		renderPreview({ videoSources: [source("flaky")], clips: [] });
+
+		click("fail-flaky");
+		expect(errorCard()).toBeInTheDocument();
+
+		click("recover-flaky");
+		expect(errorCard()).not.toBeInTheDocument();
+	});
+
+	// …including when the healthy report comes from a DIFFERENT asset. Only one
+	// source is mounted at a time, so that report means the playhead has moved
+	// onto a clip that plays — and a "Preview stopped" card over a picture that
+	// is visibly fine is the #395 latch again, quieter. Scrubbing back onto the
+	// dead asset remounts it and brings the card back on its own.
+	it("drops the card when the playhead moves onto a healthy asset", () => {
+		renderPreview({
+			videoSources: [source("moved"), source("fresh")],
+			clips: [clip("clip_a", "moved", 0, 10), clip("clip_b", "fresh", 10, 20)],
 		});
+
+		click("fail-moved");
+		expect(errorCard()).toBeInTheDocument();
+
+		click("recover-fresh");
+		expect(errorCard()).not.toBeInTheDocument();
 		expect(canvas()).toBeInTheDocument();
+	});
+
+	it("bumps the retry token and clears the card when the user retries", () => {
+		renderPreview({ videoSources: [source("truncated")], clips: [] });
+		expect(canvas()).toHaveAttribute("data-retry-token", "0");
 
-		// …and only collapses once nothing is left to render.
+		click("fail-truncated");
 		act(() => {
-			fireEvent.click(screen.getByTestId("fail-healthy"));
+			fireEvent.click(screen.getByRole("button", { name: /try again/i }));
 		});
-		expect(canvas()).not.toBeInTheDocument();
-		expect(emptyState()).toBeInTheDocument();
+
+		expect(canvas()).toHaveAttribute("data-retry-token", "1");
+		expect(errorCard()).not.toBeInTheDocument();
+	});
+
+	// Taking the card's own advice — import a replacement — grows the source list
+	// without touching the dead <video>: it is not remounted, nothing re-fires
+	// `error`, and dropping the card here would leave a frozen stage with no
+	// explanation and no Retry button.
+	it("keeps the card when an unrelated source joins the timeline", () => {
+		const { rerender } = renderPreview({
+			videoSources: [source("moved")],
+			clips: [clip("clip_a", "moved", 0, 60)],
+		});
+		click("fail-moved");
+		expect(errorCard()).toBeInTheDocument();
+
+		rerender(
+			previewProps({
+				videoSources: [source("moved"), source("fresh")],
+				clips: [clip("clip_a", "moved", 0, 60), clip("clip_b", "fresh", 60, 90)],
+			}),
+		);
+
+		expect(errorCard()).toBeInTheDocument();
 	});
 
-	// The reset that made the old latch bearable: swapping the media out has to
-	// clear the recorded failures, or the empty state would outlive the file that
-	// caused it.
-	it("clears recorded failures when the source set changes", () => {
+	// Swapping the media out has to clear the failure, or the card would outlive
+	// the file that caused it.
+	it("clears the failure when the failed asset leaves the timeline", () => {
 		const { rerender } = renderPreview({
 			videoSources: [source("truncated")],
 			clips: [clip("clip_a", "truncated", 0, 60)],
 		});
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-truncated"));
-		});
-		expect(emptyState()).toBeInTheDocument();
+		click("fail-truncated");
+		expect(errorCard()).toBeInTheDocument();
 
 		rerender(
-			<I18nProvider>
-				<Preview
-					hasProject={true}
-					hasAsset={true}
-					videoSources={[source("replacement")]}
-					clips={[clip("clip_a", "replacement", 0, 60)]}
-					seekTarget={null}
-					onTimeChange={vi.fn()}
-					onSeek={vi.fn()}
-					onLoadedMetadata={vi.fn()}
-					onVideoElement={vi.fn()}
-					playing={false}
-				/>
-			</I18nProvider>,
+			previewProps({
+				videoSources: [source("replacement")],
+				clips: [clip("clip_a", "replacement", 0, 60)],
+			}),
 		);
 
 		expect(canvas()).toHaveAttribute("data-sources", "replacement");
+		expect(errorCard()).not.toBeInTheDocument();
+	});
+});
+
+describe("Preview shows the empty state only when there is nothing to show", () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
 	});
 
 	it("shows the empty state when the project has no asset at all", () => {
@@ -260,4 +328,33 @@ describe("Preview still degrades to the empty state on a real failure", () => {
 		expect(canvas()).not.toBeInTheDocument();
 		expect(emptyState()).toBeInTheDocument();
 	});
+
+	it("shows the empty state when the project has no usable source", () => {
+		renderPreview({ videoSources: [], clips: [] });
+
+		expect(canvas()).not.toBeInTheDocument();
+		expect(emptyState()).toBeInTheDocument();
+	});
+
+	it("shows the empty state when there is no project", () => {
+		renderPreview({ videoSources: [], clips: [], hasProject: false, hasAsset: false });
+
+		expect(emptyState()).not.toBeInTheDocument();
+		expect(screen.getByText(/no project open/i)).toBeInTheDocument();
+	});
+
+	// The guard for #395 itself: no failure, however reported, may reach the
+	// branch that tells a user with media loaded that they have none.
+	it("never reaches the empty state while the project has media", () => {
+		renderPreview({
+			videoSources: [source("a"), source("b")],
+			clips: [clip("clip_a", "a", 0, 10), clip("clip_b", "b", 10, 20)],
+		});
+
+		for (const id of ["a", "b"]) {
+			click(`fail-${id}`);
+			expect(emptyState()).not.toBeInTheDocument();
+			expect(canvas()).toBeInTheDocument();
+		}
+	});
 });
diff --git a/src/components/ai-edition/Preview.tsx b/src/components/ai-edition/Preview.tsx
index 03ab1d56..aaf04f2d 100644
--- a/src/components/ai-edition/Preview.tsx
+++ b/src/components/ai-edition/Preview.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { CameraFullscreenRegion, ZoomFocus } from "@/components/video-editor/types";
 import { useScopedT } from "@/contexts/I18nContext";
 import type {
@@ -12,6 +12,7 @@ import type { SpeedRegion } from "@/lib/ai-edition/timeline/speed";
 import { EditorEmptyState } from "./EditorEmptyState";
 import styles from "./NewEditorShell.module.css";
 import { PreviewCanvas } from "./PreviewCanvas";
+import { PreviewErrorCard } from "./PreviewErrorCard";
 import type { VideoSource } from "./VirtualPreview";
 
 type BlurData = NonNullable<AxcutAnnotationRegion["blurData"]>;
@@ -86,8 +87,10 @@ export function Preview({
 	// later moved or deleted, or one left behind when its clip was removed — and
 	// handing the asset list straight to the canvas made `videoSources[0]` (the
 	// source VirtualPreview mounts first) that dead asset: its <video> errored,
-	// latched the failure flag below, and collapsed the WHOLE preview to the
-	// empty state while every clip on the timeline was perfectly playable.
+	// and the whole preview collapsed to the empty state while every clip on the
+	// timeline was perfectly playable. (A media error no longer collapses
+	// anything — see below — but mounting an asset nothing references is still
+	// the wrong source to put the decode clock on.)
 	// Ordered by timeline position, so the first source mounted is the one the
 	// playhead actually needs at 0:00.
 	// The fallback is load-bearing: the first clip of a fresh import is minted
@@ -104,30 +107,64 @@ export function Preview({
 		return referenced.length > 0 ? referenced : videoSources;
 	}, [clips, videoSources]);
 
-	// ponytail: when the <video> fails to load (e.g. a truncated recording
-	// from a bad MediaRecorder capture), swap to the empty state so the user
-	// can import a different file instead of staring at a broken preview.
-	// Tracked PER SOURCE rather than as one global latch: with several clips on
-	// the timeline, a single dead asset must not blank a preview the other clips
-	// can still render — VirtualPreview already shows its own "could not be
-	// loaded" overlay for whichever source failed. Only when every source the
-	// timeline uses is dead is there nothing left to show.
-	// Resets when the set of preview sources changes (asset paths).
-	const [failedSourceIds, setFailedSourceIds] = useState<string[]>([]);
+	// ponytail: a media failure used to fall through to `EditorEmptyState`, and
+	// that is issue #395: ONE `error` event on the hidden <video> — including the
+	// MEDIA_ERR_ABORTED every cross-asset clip boundary produces by design —
+	// latched an id into a list that nothing short of a remount could clear, and
+	// the editor told a user whose project was perfectly intact to "add a video to
+	// get started". Ctrl+R or a trip through the Rec/Media stage was the only way
+	// back, because both unmount this component.
+	//
+	// Two things replace it. VirtualPreview now classifies the error and reloads
+	// the source itself, so a transient decode/network blip never reaches here at
+	// all. What does reach here is a source that gave up after those retries, and
+	// it is shown as a card OVER the still-mounted canvas — which goes on painting
+	// the last good frame, because the pixels come from the native compositor and
+	// the <video> is only a decode clock (see PreviewCanvas's header comment). The
+	// empty state is left answering exactly one question: is there anything in
+	// this project to show?
+	//
+	// One failure slot rather than a set: only ever ONE source is mounted
+	// (VirtualPreview indexes into `videoSources`), so the failure being reported
+	// is always the one the playhead needs, and any source reporting healthy means
+	// the mounted one is.
+	const [failure, setFailure] = useState<{ assetId: string; detail: string } | null>(null);
+	const [retryToken, setRetryToken] = useState(0);
+	// Dropped only when the FAILED asset itself leaves the timeline — not
+	// whenever the source list changes shape. Appending a replacement recording
+	// (which is the advice the card gives) grows the list without touching the
+	// dead <video>: it is not remounted, nothing re-fires `error`, and clearing
+	// here would take the card and its Retry button away from a stage that is
+	// still frozen. A same-id source whose URL changed does re-run the load
+	// algorithm, and the resulting recovery clears the failure on its own.
 	const sourceKey = previewSources.map((source) => `${source.id}::${source.src}`).join("|");
-	const previousSourceKeyRef = useRef<string | null>(null);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the source list's identity, read through previewSources
 	useEffect(() => {
-		if (previousSourceKeyRef.current !== sourceKey) {
-			previousSourceKeyRef.current = sourceKey;
-			setFailedSourceIds([]);
-		}
+		setFailure((prev) =>
+			prev && !previewSources.some((source) => source.id === prev.assetId) ? null : prev,
+		);
 	}, [sourceKey]);
-	const handleVideoError = useCallback((assetId: string) => {
-		setFailedSourceIds((prev) => (prev.includes(assetId) ? prev : [...prev, assetId]));
+	const handleVideoError = useCallback((assetId: string, detail: string) => {
+		setFailure({ assetId, detail });
+	}, []);
+	// The reported asset id is deliberately ignored. Exactly one source is mounted
+	// at a time (`videoSources[sourceIndex]` in VirtualPreview), and it is always
+	// the one the playhead needs — so ANY source reporting healthy means the stage
+	// is showing a real picture, whichever asset it belongs to. Matching the id
+	// against the failed one instead would keep "Preview stopped" pinned over a
+	// clip that is playing perfectly, until the user happened to scrub back to the
+	// dead one: a card outliving its failure, which is the latch of #395 again in
+	// a quieter form. Moving back onto the dead asset remounts it and earns a
+	// fresh retry cycle, so the card returns on its own if it should.
+	// Fires on every canplay, so on every seek: `setFailure(null)` against an
+	// already-null state is a React bail-out, and the healthy path costs nothing.
+	const handleVideoRecovered = useCallback(() => {
+		setFailure((prev) => (prev === null ? prev : null));
+	}, []);
+	const handleRetry = useCallback(() => {
+		setFailure(null);
+		setRetryToken((token) => token + 1);
 	}, []);
-	const allSourcesFailed =
-		previewSources.length > 0 &&
-		previewSources.every((source) => failedSourceIds.includes(source.id));
 
 	return (
 		<section
@@ -137,32 +174,41 @@ export function Preview({
 			data-current-time-sec={currentTimeSec.toFixed(3)}
 			data-is-playing={playing ? "true" : "false"}
 		>
-			{hasProject && hasAsset && previewSources.length > 0 && !allSourcesFailed ? (
-				<PreviewCanvas
-					videoSources={previewSources}
-					clips={clips}
-					zoomRegions={zoomRegions}
-					speedRegions={speedRegions}
-					cameraFullscreenRegions={cameraFullscreenRegions}
-					trimRanges={trimRanges}
-					selectedZoomRegionId={selectedZoomRegionId}
-					onZoomFocusChange={onZoomFocusChange}
-					onZoomFocusCommit={onZoomFocusCommit}
-					annotationRegions={annotationRegions}
-					selectedAnnotationId={selectedAnnotationId}
-					onSelectAnnotation={onSelectAnnotation}
-					onAnnotationPositionChange={onAnnotationPositionChange}
-					onAnnotationSizeChange={onAnnotationSizeChange}
-					onAnnotationBlurDataChange={onAnnotationBlurDataChange}
-					onAnnotationCommit={onAnnotationCommit}
-					seekTarget={seekTarget}
-					onTimeChange={onTimeChange}
-					onSeek={onSeek}
-					onLoadedMetadata={onLoadedMetadata}
-					onVideoElement={onVideoElement}
-					currentTimeSec={currentTimeSec}
-					onVideoError={handleVideoError}
-				/>
+			{hasProject && hasAsset && previewSources.length > 0 ? (
+				<>
+					<PreviewCanvas
+						videoSources={previewSources}
+						clips={clips}
+						zoomRegions={zoomRegions}
+						speedRegions={speedRegions}
+						cameraFullscreenRegions={cameraFullscreenRegions}
+						trimRanges={trimRanges}
+						selectedZoomRegionId={selectedZoomRegionId}
+						onZoomFocusChange={onZoomFocusChange}
+						onZoomFocusCommit={onZoomFocusCommit}
+						annotationRegions={annotationRegions}
+						selectedAnnotationId={selectedAnnotationId}
+						onSelectAnnotation={onSelectAnnotation}
+						onAnnotationPositionChange={onAnnotationPositionChange}
+						onAnnotationSizeChange={onAnnotationSizeChange}
+						onAnnotationBlurDataChange={onAnnotationBlurDataChange}
+						onAnnotationCommit={onAnnotationCommit}
+						seekTarget={seekTarget}
+						onTimeChange={onTimeChange}
+						onSeek={onSeek}
+						onLoadedMetadata={onLoadedMetadata}
+						onVideoElement={onVideoElement}
+						currentTimeSec={currentTimeSec}
+						onVideoError={handleVideoError}
+						onVideoRecovered={handleVideoRecovered}
+						retryToken={retryToken}
+					/>
+					{/* Sibling of the canvas, inside `.previewWrap` (already
+					    position: relative) — NOT inside VirtualPreview's `.videoFrame`,
+					    which carries the live zoom transform and would translate the
+					    Retry button off the stage at high zoom. */}
+					{failure ? <PreviewErrorCard detail={failure.detail} onRetry={handleRetry} /> : null}
+				</>
 			) : (
 				<EditorEmptyState hasProject={hasProject} />
 			)}
diff --git a/src/components/ai-edition/PreviewCanvas.tsx b/src/components/ai-edition/PreviewCanvas.tsx
index 86879fd1..3bf042a0 100644
--- a/src/components/ai-edition/PreviewCanvas.tsx
+++ b/src/components/ai-edition/PreviewCanvas.tsx
@@ -85,9 +85,14 @@ interface PreviewCanvasProps {
 	onLoadedMetadata: (sec: number, assetId: string) => void;
 	onVideoElement: (el: HTMLVideoElement | null) => void;
 	currentTimeSec: number;
-	/** Receives the id of the asset whose <video> failed — the caller decides per
-	 *  source whether anything is left to render (see Preview.tsx). */
-	onVideoError?: (assetId: string) => void;
+	/** Receives the id of the asset whose <video> gave up, plus the MediaError
+	 *  detail for the card. Transient failures are reloaded inside VirtualPreview
+	 *  and never reach here (see Preview.tsx). */
+	onVideoError?: (assetId: string, detail: string) => void;
+	/** The mounted source decoded a frame again — see VirtualPreview. */
+	onVideoRecovered?: (assetId: string) => void;
+	/** Bumped to force a reload of the mounted source (the Retry button). */
+	retryToken?: number;
 }
 
 // ponytail: fallback only — used until the active source's <video> reports
diff --git a/src/components/ai-edition/PreviewErrorCard.tsx b/src/components/ai-edition/PreviewErrorCard.tsx
new file mode 100644
index 00000000..0a1d90f3
--- /dev/null
+++ b/src/components/ai-edition/PreviewErrorCard.tsx
@@ -0,0 +1,47 @@
+// Shown over the preview when the decode clock gave up on the mounted source
+// (issue #395). Deliberately an overlay, not a replacement: the native
+// compositor keeps painting the last composed frame underneath, and that frame
+// is the evidence the project is intact — which is exactly what the old
+// behaviour (collapsing to the "add a video to get started" empty state)
+// destroyed along with the user's confidence.
+//
+// The copy does not claim to know WHY: the two causes we know of — a file that
+// moved and a file still being written — are indistinguishable from here
+// without a filesystem round trip, and guessing wrong is how an error message
+// sends someone re-importing media that was never gone.
+
+import { AlertCircle, RotateCcw } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import styles from "./NewEditorShell.module.css";
+
+interface PreviewErrorCardProps {
+	/** The MediaError, formatted — kept on screen because it is the one thing
+	 *  that makes a user's bug report actionable (see mediaError.ts). */
+	detail: string;
+	onRetry: () => void;
+}
+
+export function PreviewErrorCard({ detail, onRetry }: PreviewErrorCardProps) {
+	const t = useScopedT("editor");
+
+	return (
+		<div className={styles.previewFailure} role="alert" data-testid="preview-error-card">
+			<div className={styles.previewFailureCard}>
+				<div className={styles.previewFailureIconRing}>
+					<AlertCircle className={styles.previewFailureIcon} />
+				</div>
+				<h2 className={styles.previewFailureTitle}>{t("preview.mediaError.title")}</h2>
+				<p className={styles.previewFailureDescription}>{t("preview.mediaError.description")}</p>
+				<button type="button" onClick={onRetry} className={styles.previewEmptyPrimaryButton}>
+					<RotateCcw className={styles.previewEmptyButtonIcon} />
+					{t("preview.mediaError.retry")}
+				</button>
+				{detail ? (
+					<p className={styles.previewFailureDetail}>
+						{t("preview.mediaError.detail", { detail })}
+					</p>
+				) : null}
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
new file mode 100644
index 00000000..363308f1
--- /dev/null
+++ b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
@@ -0,0 +1,467 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { AxcutClip } from "@/lib/ai-edition/schema";
+import { RELOAD_WINDOW_MS, RETRY_DELAYS_MS } from "./mediaError";
+import { type VideoSource, VirtualPreview } from "./VirtualPreview";
+
+// Same hand-driven rAF as VirtualPreview.playback.test.tsx: the tick is a
+// subject here too (it must go quiet while a reload is in flight), so frames are
+// run one at a time rather than by the browser.
+let frameCallbacks: FrameRequestCallback[] = [];
+
+beforeEach(() => {
+	frameCallbacks = [];
+	vi.useFakeTimers();
+	vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+		frameCallbacks.push(cb);
+		return frameCallbacks.length;
+	});
+	vi.stubGlobal("cancelAnimationFrame", () => {
+		// Frames are drained by `tick()`, never scheduled, so there is nothing to
+		// cancel — the stub only exists so the effect's cleanup has something to call.
+	});
+	// Every case here deliberately provokes the logging the fix added; silence it
+	// so a passing run stays readable.
+	for (const level of ["debug", "warn", "error"] as const) {
+		vi.spyOn(console, level).mockImplementation(() => {
+			// swallowed on purpose
+		});
+	}
+});
+
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+	vi.useRealTimers();
+	vi.restoreAllMocks();
+});
+
+function tick() {
+	const pending = frameCallbacks;
+	frameCallbacks = [];
+	act(() => {
+		for (const cb of pending) cb(0);
+	});
+}
+
+function advance(ms: number) {
+	act(() => {
+		vi.advanceTimersByTime(ms);
+	});
+}
+
+function clip(id: string, assetId: string, timelineStartSec: number): AxcutClip {
+	return {
+		id,
+		assetId,
+		sourceStartSec: 0,
+		sourceEndSec: 10,
+		timelineStartSec,
+		timelineEndSec: timelineStartSec + 10,
+		wordRefs: [],
+		origin: "user",
+		reason: "",
+	};
+}
+
+/** A `<video>` jsdom will not drive: the test owns its clock, and load/play/pause
+ *  are recorded rather than performed (jsdom implements none of them). */
+function driveVideo(element: HTMLVideoElement) {
+	let currentTime = 0;
+	let paused = true;
+	let error: { code: number; message: string } | null = null;
+	Object.defineProperty(element, "currentTime", {
+		configurable: true,
+		get: () => currentTime,
+		set: (next: number) => {
+			currentTime = next;
+		},
+	});
+	Object.defineProperty(element, "paused", { configurable: true, get: () => paused });
+	Object.defineProperty(element, "readyState", { configurable: true, get: () => 4 });
+	Object.defineProperty(element, "duration", { configurable: true, get: () => 10 });
+	Object.defineProperty(element, "error", { configurable: true, get: () => error });
+	element.load = vi.fn(() => {
+		// What the real load() does to the position, and why the resume point
+		// cannot be read off the element after a failure.
+		currentTime = 0;
+	});
+	element.play = vi.fn(() => {
+		paused = false;
+		return Promise.resolve();
+	});
+	element.pause = vi.fn(() => {
+		paused = true;
+	});
+	return {
+		play: () => {
+			paused = false;
+		},
+		seekTo: (next: number) => {
+			currentTime = next;
+		},
+		/** Fire an `error` event carrying a real MediaError code. */
+		fail: (code: number | null, message = `code ${code}`) => {
+			error = code === null ? null : { code, message };
+			act(() => {
+				fireEvent.error(element);
+			});
+		},
+		loadedMetadata: () => {
+			error = null;
+			act(() => {
+				fireEvent.loadedMetadata(element);
+			});
+		},
+		get currentTime() {
+			return currentTime;
+		},
+		get loadCalls() {
+			return (element.load as ReturnType<typeof vi.fn>).mock.calls.length;
+		},
+		get pauseCalls() {
+			return (element.pause as ReturnType<typeof vi.fn>).mock.calls.length;
+		},
+		get playCalls() {
+			return (element.play as ReturnType<typeof vi.fn>).mock.calls.length;
+		},
+	};
+}
+
+const SOURCES: VideoSource[] = [{ id: "a1", src: "file:///tmp/a1.mp4", label: "a1" }];
+
+function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)], sources: VideoSource[] = SOURCES) {
+	const onVideoError = vi.fn<(assetId: string, detail: string) => void>();
+	const onVideoRecovered = vi.fn<(assetId: string) => void>();
+	const onTimeChange = vi.fn<(timeSec: number) => void>();
+	let seekRequestId = 0;
+	let activeSources = sources;
+	const tree = (
+		retryToken: number,
+		seekTarget: { timeSec: number; requestId: number } | null = null,
+	) => (
+		<VirtualPreview
+			videoSources={activeSources}
+			clips={clips}
+			onTimeChange={onTimeChange}
+			onVideoError={onVideoError}
+			onVideoRecovered={onVideoRecovered}
+			retryToken={retryToken}
+			seekTarget={seekTarget}
+		/>
+	);
+	const view = render(tree(0));
+	const element = view.container.querySelector("video");
+	if (!element) throw new Error("no <video> rendered");
+	const video = driveVideo(element as HTMLVideoElement);
+	// How the real app resolves its first clip: metadata arrives, the component
+	// seeks to its current virtual time, and that seek names the active clip.
+	video.loadedMetadata();
+	onVideoRecovered.mockClear();
+	return {
+		view,
+		video,
+		element: element as HTMLVideoElement,
+		onVideoError,
+		onVideoRecovered,
+		onTimeChange,
+		bumpRetryToken: (token: number) => view.rerender(tree(token)),
+		/** Re-point the mounted asset at a different file, keeping its id. */
+		repointSourceTo: (src: string) =>
+			act(() => {
+				activeSources = activeSources.map((source) => ({ ...source, src }));
+				view.rerender(tree(0));
+			}),
+		/** Move the playhead the way the shell does — a new seekTarget requestId. */
+		scrubTo: (timeSec: number) =>
+			act(() => {
+				seekRequestId += 1;
+				view.rerender(tree(0, { timeSec, requestId: seekRequestId }));
+			}),
+	};
+}
+
+describe("VirtualPreview media-error recovery (issue #395)", () => {
+	// THE bug. A cross-asset clip boundary remounts the keyed <video> mid-load and
+	// Chromium reports MEDIA_ERR_ABORTED for it — ordinary, expected, and it used
+	// to be enough to collapse the whole preview for the rest of the session.
+	it("ignores an aborted load entirely", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(1);
+		advance(5_000);
+
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(0);
+		expect(video.pauseCalls).toBe(0);
+	});
+
+	it("reloads the source after a decode failure instead of reporting it", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(3);
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(0);
+
+		advance(RETRY_DELAYS_MS[0]);
+		expect(video.loadCalls).toBe(1);
+		expect(onVideoError).not.toHaveBeenCalled();
+	});
+
+	// The resume point has to be resolved from the playhead at reload time:
+	// `video.currentTime` reads 0 after load(), so trusting the element would
+	// silently rewind the user to the start of the clip.
+	it("comes back at the playhead, not at zero", () => {
+		const { video } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+
+		video.fail(3);
+		advance(RETRY_DELAYS_MS[0]);
+		expect(video.currentTime).toBe(0); // load() reset it
+
+		video.loadedMetadata();
+		expect(video.currentTime).toBeCloseTo(4, 5);
+		// …and playback resumes, because it was playing when the failure hit.
+		expect(video.playCalls).toBeGreaterThan(0);
+	});
+
+	// …and "at reload time" is the load-bearing half. Resolving it when the error
+	// fired, or from the last position sampled off the element, both give 4 here —
+	// only reading the live playhead when the timer runs gives 7.
+	it("honours a scrub made during the backoff", () => {
+		const { video, scrubTo } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+
+		video.fail(3);
+		scrubTo(7);
+		advance(RETRY_DELAYS_MS[0]);
+
+		video.loadedMetadata();
+		expect(video.currentTime).toBeCloseTo(7, 5);
+	});
+
+	// An `error` does not fire `pause`, so `v.paused` — the gate the rest of the
+	// tick relies on — is still false while the decoder is dead. Without its own
+	// guard the tick would keep taking clip-boundary decisions on a frozen clock
+	// and clobber the seek queued for the reload.
+	it("stops steering the timeline while a reload is in flight", () => {
+		const clips = [clip("clip_1", "a1", 0), clip("clip_2", "a1", 10)];
+		const { video, onTimeChange } = mount(clips);
+
+		video.play();
+		video.seekTo(9.96); // the frame where the boundary advance would fire
+		video.fail(3);
+		onTimeChange.mockClear();
+
+		tick();
+
+		expect(onTimeChange).not.toHaveBeenCalled();
+		expect(video.currentTime).toBe(9.96);
+	});
+
+	it("gives up after the retry budget and reports the media error", () => {
+		const { video, onVideoError } = mount();
+
+		for (const delay of RETRY_DELAYS_MS) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length);
+
+		video.fail(3);
+		advance(5_000);
+
+		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_DECODE (3) — code 3");
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length); // no further reload
+		expect(video.pauseCalls).toBe(1); // transport told, once, on the way out
+	});
+
+	it("gives an unsupported source exactly one look", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(4);
+		advance(RETRY_DELAYS_MS[0]);
+		expect(video.loadCalls).toBe(1);
+		expect(onVideoError).not.toHaveBeenCalled();
+
+		video.fail(4);
+		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_SRC_NOT_SUPPORTED (4) — code 4");
+	});
+
+	// THE long-session guarantee, and the answer to "can a user run out of
+	// recoveries?". The budget counts reloads inside a window, so it empties by
+	// itself: hiccups spaced minutes apart — which is what a seek storm across
+	// an editing session looks like — each get the full budget. A lifetime
+	// counter would have made this third failure terminal.
+	it("gives a later failure the full budget again once the window has emptied", () => {
+		const { video, onVideoError } = mount();
+
+		for (const delay of RETRY_DELAYS_MS) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length);
+
+		advance(RELOAD_WINDOW_MS + 1_000);
+
+		video.fail(3);
+		advance(RETRY_DELAYS_MS[0]);
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length + 1);
+	});
+
+	// The livelock this fix originally shipped with. `loadedmetadata` only means
+	// the container header parsed — a truncated recording re-fires it on every
+	// reload — so re-arming the budget there handed it back faster than failures
+	// could spend it: a 400 ms reload loop, forever, and the user never saw the
+	// card. Progress past the failure point, not a completed load, is the signal.
+	it("still gives up on a file that reloads cleanly and fails at the same spot", () => {
+		const { video, onVideoError } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+
+		// Three rounds of "the header parses, the data does not".
+		for (let round = 0; round < RETRY_DELAYS_MS.length + 1; round += 1) {
+			video.fail(3);
+			advance(5_000);
+			video.loadedMetadata(); // header fine, decoder willing
+			video.seekTo(4); // …and straight back to the byte that killed it
+			tick();
+		}
+
+		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_DECODE (3) — code 3");
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length);
+	});
+
+	it("treats an error with no MediaError as transient", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(null);
+		advance(RETRY_DELAYS_MS[0]);
+
+		expect(video.loadCalls).toBe(1);
+		expect(onVideoError).not.toHaveBeenCalled();
+	});
+
+	// The user's lever: it must work even from the terminal state, and even while
+	// a backoff is pending.
+	it("reloads immediately when the retry token is bumped", () => {
+		const { video, onVideoError, bumpRetryToken } = mount();
+
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+		const loadsBefore = video.loadCalls;
+
+		act(() => bumpRetryToken(1));
+		advance(0);
+
+		expect(video.loadCalls).toBe(loadsBefore + 1);
+	});
+
+	// Field regression, caught by breaking a real recording: once the card is up,
+	// playback getting past the failure point must NOT hand the budget back. It
+	// used to, so the next bad spot started the whole retry cycle again — three
+	// full episodes for one broken file.
+	it("does not re-arm itself after it has given up", () => {
+		const { video, onVideoError } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+		const loadsAtGiveUp = video.loadCalls;
+
+		// Playback carries on past where it died — the shape that used to re-arm.
+		video.seekTo(6);
+		tick();
+		video.fail(3);
+		advance(5_000);
+
+		expect(video.loadCalls).toBe(loadsAtGiveUp);
+		expect(onVideoError).toHaveBeenCalledTimes(2); // still terminal, no new cycle
+	});
+
+	// The other half: a file failing FAST does not get to loop quietly. Three
+	// failures inside one window is not "an occasional hiccup", and the user is
+	// told once — and stays told, because the window emptying afterwards must
+	// not restart the cycle behind the card.
+	it("reaches the card on a burst inside the window, and stays there", () => {
+		const { video, onVideoError } = mount();
+
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+		const loadsAtGiveUp = video.loadCalls;
+
+		// Long enough for every reload to age out of the window.
+		advance(RELOAD_WINDOW_MS * 3);
+		video.fail(3);
+		advance(5_000);
+
+		expect(video.loadCalls).toBe(loadsAtGiveUp);
+		expect(onVideoError).toHaveBeenCalledTimes(2);
+	});
+
+	// The element is keyed on the asset id alone, so pointing an asset at a new
+	// file reloads the SAME element — and a budget spent on the old file must not
+	// be charged to the new one. Nothing in the app re-points an asset today, but
+	// it is the shape a "relink the moved file" flow would take, and this is the
+	// component's own contract rather than the app's current use of it.
+	it("gives a re-pointed source a fresh budget", () => {
+		const { video, onVideoError, repointSourceTo } = mount();
+
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+
+		repointSourceTo("file:///tmp/a1-restored.mp4");
+		onVideoError.mockClear();
+		const loadsBefore = video.loadCalls;
+
+		video.fail(3);
+		advance(RETRY_DELAYS_MS[0]);
+
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(loadsBefore + 1);
+	});
+
+	// A reload scheduled for an element that is going away must never fire: the
+	// <video> is keyed on the asset id, so the timer can outlive its element.
+	it("does not reload an unmounted element", () => {
+		const { view, video } = mount();
+
+		video.fail(3);
+		// Assert the cancellation itself: `reloadActiveSource` bails on a null
+		// videoRef anyway, so a surviving timer would still leave loadCalls at 0
+		// and prove nothing about the cleanup this test exists for.
+		expect(vi.getTimerCount()).toBe(1);
+		view.unmount();
+		expect(vi.getTimerCount()).toBe(0);
+		advance(5_000);
+
+		expect(video.loadCalls).toBe(0);
+	});
+});
diff --git a/src/components/ai-edition/VirtualPreview.module.css b/src/components/ai-edition/VirtualPreview.module.css
index 41eb59b5..78d84a06 100644
--- a/src/components/ai-edition/VirtualPreview.module.css
+++ b/src/components/ai-edition/VirtualPreview.module.css
@@ -35,18 +35,6 @@
 	max-height: none;
 }
 
-.overlay {
-	position: absolute;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--muted-foreground);
-	font-size: 0.875rem;
-	background: var(--card);
-	padding: 0.75rem 1.25rem;
-	border-radius: 0.5rem;
-}
-
 .controls {
 	display: flex;
 	align-items: center;
diff --git a/src/components/ai-edition/VirtualPreview.seekStorm.test.tsx b/src/components/ai-edition/VirtualPreview.seekStorm.test.tsx
new file mode 100644
index 00000000..bb0d97cb
--- /dev/null
+++ b/src/components/ai-edition/VirtualPreview.seekStorm.test.tsx
@@ -0,0 +1,150 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { AxcutClip } from "@/lib/ai-edition/schema";
+import { type VideoSource, VirtualPreview } from "./VirtualPreview";
+
+// The root cause of issue #395, in a test.
+//
+// Dragging the playhead publishes a new time every rAF, the shell mints a
+// seekTarget per publish, and this component used to turn each one into a
+// `currentTime` write — ~60 demuxer seeks a second on a 1080p H.264 file the
+// native compositor is decoding at the same time. Chromium eventually fails
+// one (`PIPELINE_ERROR_READ: FFmpegDemuxer: demuxer seek failed`, observed on a
+// file ffmpeg decodes end to end without a defect), and on main any media error
+// emptied the editor.
+
+afterEach(cleanup);
+
+const SOURCES: VideoSource[] = [{ id: "a1", src: "file:///tmp/a1.mp4", label: "a1" }];
+const CLIPS: AxcutClip[] = [
+	{
+		id: "clip_1",
+		assetId: "a1",
+		sourceStartSec: 0,
+		sourceEndSec: 10,
+		timelineStartSec: 0,
+		timelineEndSec: 10,
+		wordRefs: [],
+		origin: "user",
+		reason: "",
+	},
+];
+
+/** A `<video>` that behaves like a real one on the only axis this file tests:
+ *  a `currentTime` write starts a seek, and the element stays `seeking` until
+ *  the browser says otherwise. */
+function driveVideo(element: HTMLVideoElement) {
+	let currentTime = 0;
+	let seeking = false;
+	const writes: number[] = [];
+	Object.defineProperty(element, "currentTime", {
+		configurable: true,
+		get: () => currentTime,
+		set: (next: number) => {
+			currentTime = next;
+			seeking = true;
+			writes.push(next);
+		},
+	});
+	Object.defineProperty(element, "seeking", { configurable: true, get: () => seeking });
+	Object.defineProperty(element, "paused", { configurable: true, get: () => true });
+	Object.defineProperty(element, "readyState", { configurable: true, get: () => 4 });
+	Object.defineProperty(element, "duration", { configurable: true, get: () => 10 });
+	element.play = vi.fn(() => Promise.resolve());
+	element.pause = vi.fn();
+	return {
+		writes,
+		get currentTime() {
+			return currentTime;
+		},
+		/** What the browser does when the demuxer is done. */
+		finishSeek: () => {
+			seeking = false;
+			act(() => {
+				fireEvent.seeked(element);
+			});
+		},
+	};
+}
+
+function mount() {
+	let requestId = 0;
+	const tree = (seekTarget: { timeSec: number; requestId: number } | null) => (
+		<VirtualPreview videoSources={SOURCES} clips={CLIPS} seekTarget={seekTarget} />
+	);
+	const view = render(tree(null));
+	const element = view.container.querySelector("video");
+	if (!element) throw new Error("no <video> rendered");
+	const video = driveVideo(element as HTMLVideoElement);
+	act(() => {
+		fireEvent.loadedMetadata(element);
+	});
+	video.writes.length = 0;
+	return {
+		video,
+		/** One rAF-throttled scrub publish, the way the shell emits them. */
+		scrubTo: (timeSec: number) =>
+			act(() => {
+				requestId += 1;
+				view.rerender(tree({ timeSec, requestId }));
+			}),
+	};
+}
+
+describe("VirtualPreview keeps one demuxer seek in flight (issue #395 root cause)", () => {
+	it("does not stack a seek onto an element that is still seeking", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(2);
+		expect(video.writes).toEqual([2]); // demuxer busy from here
+
+		scrubTo(4);
+		scrubTo(6);
+		scrubTo(8);
+
+		// Three more scrub publishes, no extra seeks: this is the storm that made
+		// the demuxer fail.
+		expect(video.writes).toEqual([2]);
+	});
+
+	it("applies the newest target once the demuxer is free, not the queued ones", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(2);
+		scrubTo(4);
+		scrubTo(6);
+		scrubTo(8);
+
+		video.finishSeek();
+
+		// The last position the user asked for — the intermediate ones were never
+		// destinations, and replaying them would be the storm again, delayed.
+		expect(video.writes).toEqual([2, 8]);
+		expect(video.currentTime).toBe(8);
+	});
+
+	it("stops seeking once the playhead settles", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(5);
+		video.finishSeek();
+		expect(video.writes).toEqual([5]);
+
+		// The drag ended on the position already reached: nothing more to do.
+		scrubTo(5);
+		video.finishSeek();
+		expect(video.writes).toEqual([5]);
+	});
+
+	it("still serves an ordinary seek immediately when nothing is in flight", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(3);
+		video.finishSeek();
+		scrubTo(7);
+
+		expect(video.writes).toEqual([3, 7]);
+	});
+});
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index c3eb6cbb..0df2ff1e 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -23,6 +23,13 @@ import {
 	computeZoomPreviewTransform,
 	IDENTITY_ZOOM_TRANSFORM,
 } from "@/lib/ai-edition/timeline/zoom-preview";
+import {
+	describeMediaError,
+	formatMediaError,
+	mediaErrorDisposition,
+	pruneReloads,
+	retryDelayMs,
+} from "./mediaError";
 import styles from "./VirtualPreview.module.css";
 
 export interface VideoSource {
@@ -63,8 +70,20 @@ interface VirtualPreviewProps {
 	videoStyle?: React.CSSProperties;
 	/** Called with the id of the asset that failed, not as a bare "the preview is
 	 *  broken" signal: only ONE source is mounted at a time (`activeSource`), so
-	 *  the caller has no other way to tell which of its sources is dead. */
-	onVideoError?: (assetId: string) => void;
+	 *  the caller has no other way to tell which of its sources is dead.
+	 *  Fires only once the retry budget below is spent — a transient decode or
+	 *  network blip is reloaded here and never reaches the caller. `detail`
+	 *  carries the MediaError code for the card and for bug reports. */
+	onVideoError?: (assetId: string, detail: string) => void;
+	/** The mounted source produced a frame again — after a reload, or simply
+	 *  because the playhead moved onto a healthy asset. The caller needs this to
+	 *  drop a failure it is showing; without it, a card outlives its failure and
+	 *  we are back to a latch, only quieter. */
+	onVideoRecovered?: (assetId: string) => void;
+	/** Bumped by the caller's Retry button. A user-initiated reload always runs:
+	 *  it cancels any pending backoff and starts the budget over, because the
+	 *  user clicked knowing something changed (they put the file back). */
+	retryToken?: number;
 	/** Crop of the active clip, as fractions (0-1) of the source frame. Absent/
 	 * identity ({x:0,y:0,width:1,height:1}) renders the full frame, unchanged
 	 * from before crop support existed. */
@@ -89,6 +108,8 @@ export function VirtualPreview({
 	onVideoElement,
 	videoStyle,
 	onVideoError,
+	onVideoRecovered,
+	retryToken,
 	cropRegion,
 	clockRef,
 }: VirtualPreviewProps) {
@@ -117,7 +138,26 @@ export function VirtualPreview({
 	const videoFrameRef = useRef<HTMLDivElement | null>(null);
 
 	const isProgrammaticSeekRef = useRef(false);
+	// The seek that arrived while another was still running (see applySourceTime).
+	const pendingScrubTargetRef = useRef<number | null>(null);
 	const pendingSeekRef = useRef<{ sourceTimeSec: number; play: boolean } | null>(null);
+	// When each AUTOMATIC reload happened. The budget is "reloads inside
+	// RELOAD_WINDOW_MS", so it expires by itself: a dead file burns it in
+	// seconds, while the occasional transient across a long editing session
+	// never accumulates. A lifetime count could not tell those apart and would
+	// eventually show a card on healthy media (see mediaError.ts).
+	const reloadsRef = useRef<number[]>([]);
+	// Set when we stop trying, so an expiring window cannot restart the cycle
+	// behind the card. Cleared only by Retry or a media change.
+	const gaveUpRef = useRef(false);
+	const retryTimerRef = useRef<number | null>(null);
+	// True from the moment a reload is scheduled until the element produces
+	// metadata again. Read by the rAF tick, which must not steer a dead decoder.
+	const recoveringRef = useRef(false);
+	// The last position read off a healthy element. `video.currentTime` is 0
+	// after load(), and 0 after a load that failed before decoding a frame, so
+	// it cannot be the fallback resume point — that is a silent rewind.
+	const lastGoodSourceTimeRef = useRef(0);
 	// Which clip the rAF tick below believes is currently playing — set
 	// whenever a seek unambiguously resolves one (via locateVirtualPosition,
 	// timeline position → clip). Passed back into locateSourcePosition so
@@ -218,6 +258,18 @@ export function VirtualPreview({
 				clockRef.current.playbackRate = v.playbackRate;
 				clockRef.current.virtualTimeSec = virtualTimeSecRef.current;
 			}
+			// A reload is in flight: the decoder is dead and `currentTime` is
+			// frozen (or already reset to 0), so every decision below — trim
+			// skipping, the clip-boundary advance, the unmapped-position
+			// fallback — would be taken on a lie, and the seeks two of them fire
+			// would clobber the resume queued for the reload. Deliberately BELOW
+			// the clock publish: the webcam overlay freezes on the last good
+			// position rather than jumping. Note this cannot ride on `v.paused`,
+			// the gate the rest of the tick uses — an `error` does not fire
+			// `pause`, so a failure mid-playback leaves `paused` false.
+			if (recoveringRef.current) {
+				return;
+			}
 			const activeSourceId = videoSourcesRef.current[sourceIndexRef.current]?.id;
 			// Trims only trim ahead during actual playback — scrubbing/paused seeks are
 			// intentionally NOT clamped, so the user can navigate freely into a trim while
@@ -270,7 +322,14 @@ export function VirtualPreview({
 			// in a separate rAF effect). Cheap; <video>.readyState >= 2 guards
 			// against drawing a black frame into the cursor overlay.
 			if (v.readyState >= 2) {
-				setSourceTimeSec(v.currentTime);
+				// One read, three uses: `currentTime` is a live accessor into the
+				// media pipeline and this block runs 60×/s.
+				const sourceTime = v.currentTime;
+				setSourceTimeSec(sourceTime);
+				// Sampled here, where the decoder is known good, because this is
+				// where a reload has to put the playhead back if it cannot
+				// resolve one from the timeline.
+				lastGoodSourceTimeRef.current = sourceTime;
 			}
 			// À L'ARRÊT, le `<video>` ne pilote PLUS la position de la timeline.
 			//
@@ -419,6 +478,39 @@ export function VirtualPreview({
 		frame.style.transform = `translate(${transform.translateXPercent}%, ${transform.translateYPercent}%) scale(${transform.scale})`;
 	}, [zoomRegions, virtualTimeSec]);
 
+	/**
+	 * Write a source position onto the element with AT MOST ONE demuxer seek in
+	 * flight; a target that arrives while one is running replaces the queue and
+	 * is applied on `seeked`. Latest wins — an intermediate scrub position is
+	 * never a destination the user asked to see.
+	 *
+	 * This is the root cause of #395, not a mitigation of it. Dragging the
+	 * playhead makes V4Timeline publish a new time every rAF (it already
+	 * coalesces pointermove to that, "to avoid IPC flooding"), the shell mints a
+	 * seekTarget per publish, and this component turned each one into a
+	 * `currentTime` write: ~60 demuxer seeks a second on a 1080p H.264 file that
+	 * the native compositor is decoding at the same time. Chromium eventually
+	 * fails one — `PIPELINE_ERROR_READ: FFmpegDemuxer: demuxer seek failed`,
+	 * reproduced on a file ffmpeg decodes end to end without a single defect —
+	 * and before this branch, any media error emptied the editor.
+	 */
+	const applySourceTime = useCallback((video: HTMLVideoElement, sourceTimeSec: number) => {
+		if (!Number.isFinite(sourceTimeSec)) return;
+		if (Math.abs(video.currentTime - sourceTimeSec) <= 0.01) {
+			pendingScrubTargetRef.current = null;
+			return;
+		}
+		if (video.seeking) {
+			pendingScrubTargetRef.current = sourceTimeSec;
+			return;
+		}
+		pendingScrubTargetRef.current = null;
+		// Flagged at the moment of the ACTUAL write: a deferred target must not
+		// have its flag consumed by a frame on which no seek happened.
+		isProgrammaticSeekRef.current = true;
+		video.currentTime = sourceTimeSec;
+	}, []);
+
 	const seekToVirtualTime = useCallback(
 		(nextVirtualTimeSec: number, preservePlayback = false, forceResume = false) => {
 			const position = locateVirtualPosition(clips, nextVirtualTimeSec);
@@ -466,11 +558,20 @@ export function VirtualPreview({
 			const video = videoRef.current;
 			if (!video) return;
 
-			isProgrammaticSeekRef.current = true;
-			updateVirtualTime(position.virtualTimeSec);
-			if (Math.abs(video.currentTime - position.sourceTimeSec) > 0.01) {
-				video.currentTime = position.sourceTimeSec;
+			if (pendingSeekRef.current) {
+				// A load is in flight (a reload, or a source that has just been
+				// swapped in), so the seek below is a no-op — assigning
+				// `currentTime` before metadata only sets the default playback
+				// start position, and `onLoadedMetadata` is about to apply the
+				// queued resume over the top of it. Re-aim that resume instead:
+				// it is older intent than the gesture the user just made.
+				pendingSeekRef.current = {
+					sourceTimeSec: position.sourceTimeSec,
+					play: shouldContinuePlayback,
+				};
 			}
+			updateVirtualTime(position.virtualTimeSec);
+			applySourceTime(video, position.sourceTimeSec);
 			if (shouldContinuePlayback) {
 				// A rejection here means playback never actually started, so the browser
 				// never fired 'play' — nothing to reconcile, just avoid an unhandled
@@ -480,18 +581,127 @@ export function VirtualPreview({
 				});
 			}
 		},
-		[clips, videoSources, sourceIndex, updateVirtualTime],
+		[applySourceTime, clips, videoSources, sourceIndex, updateVirtualTime],
 	);
 
-	const seekToSourceTime = useCallback((sourceTimeSec: number) => {
-		const video = videoRef.current;
-		if (!video) return;
-		isProgrammaticSeekRef.current = true;
-		if (Math.abs(video.currentTime - sourceTimeSec) > 0.01) {
-			video.currentTime = sourceTimeSec;
+	const seekToSourceTime = useCallback(
+		(sourceTimeSec: number) => {
+			const video = videoRef.current;
+			if (!video) return;
+			// A load is in flight, so this write would be a no-op that
+			// `onLoadedMetadata` then overwrites — re-aim the queued resume instead.
+			if (pendingSeekRef.current) {
+				pendingSeekRef.current = { sourceTimeSec, play: pendingSeekRef.current.play };
+				return;
+			}
+			applySourceTime(video, sourceTimeSec);
+		},
+		[applySourceTime],
+	);
+
+	/**
+	 * Re-run the media load algorithm on the mounted element after a delay, and
+	 * queue the position to come back to. Everything is read through refs, so the
+	 * callback is stable and the scheduled work always sees current state.
+	 */
+	const reloadActiveSource = useCallback((play: boolean, delayMs: number) => {
+		if (retryTimerRef.current !== null) {
+			window.clearTimeout(retryTimerRef.current);
+			retryTimerRef.current = null;
 		}
+		recoveringRef.current = true;
+		setLoadState("loading");
+		retryTimerRef.current = window.setTimeout(() => {
+			retryTimerRef.current = null;
+			const video = videoRef.current;
+			if (!video) return;
+			// Resolved HERE rather than when the error fired: the user can scrub
+			// during the backoff, and the position they left the playhead on is
+			// the one that has to come back. An asset switch queued in the
+			// meantime is newer intent still, so it wins outright.
+			if (!pendingSeekRef.current) {
+				const position = locateVirtualPosition(clipsRef.current, virtualTimeSecRef.current);
+				// `locateVirtualPosition` answers for whatever clip the playhead
+				// is on, which after a boundary advance can belong to a DIFFERENT
+				// asset — its source time would be a meaningless offset into the
+				// file we are about to reload. The mounted source is read from the
+				// same two mirrors the rAF tick uses, rather than kept in a third.
+				const clipIsOnThisSource =
+					position?.clip.assetId === videoSourcesRef.current[sourceIndexRef.current]?.id;
+				if (position && clipIsOnThisSource) {
+					// The rAF resumes against this; leaving it stale would resolve
+					// the next tick against the clip we were on before the failure.
+					activeClipIdRef.current = position.clip.id;
+				}
+				const resumeSec =
+					position && clipIsOnThisSource ? position.sourceTimeSec : lastGoodSourceTimeRef.current;
+				pendingSeekRef.current = {
+					sourceTimeSec: Number.isFinite(resumeSec) ? resumeSec : 0,
+					play,
+				};
+			}
+			// The restore itself rides the cross-asset path `onLoadedMetadata`
+			// already implements — one resume path in this component, not two.
+			//
+			// load() and nothing else: per spec it unconditionally re-runs the
+			// media load algorithm. Re-assigning `src` first (the obvious
+			// alternative) starts a SECOND load that aborts the first, which
+			// surfaces as a spurious MEDIA_ERR_ABORTED.
+			video.load();
+		}, delayMs);
 	}, []);
 
+	/** The element is loaded again, so the reload is over and any failure the
+	 *  caller is showing can go. Note what this does NOT do: re-arm the retry
+	 *  budget. `loadedmetadata`/`canplay` prove the container header parsed and
+	 *  the decoder is willing — not that the bytes that killed us are readable.
+	 *  A truncated recording (intact header, unreadable data — the case the error
+	 *  card exists for) re-fires both on every reload, so re-arming here would
+	 *  hand back the budget faster than failures could spend it: a 400 ms reload
+	 *  loop, forever, with nothing ever shown to the user. Getting PAST the
+	 *  failure point is the only honest evidence, and the rAF tick below owns it. */
+	const markSourceLoaded = useCallback(() => {
+		recoveringRef.current = false;
+		const id = videoSourcesRef.current[sourceIndexRef.current]?.id;
+		if (id) onVideoRecovered?.(id);
+	}, [onVideoRecovered]);
+
+	// Reload bookkeeping belongs to the MOUNTED MEDIA, so it is keyed on the URL
+	// as well as the asset id — the element is keyed on the id alone (see the
+	// <video> below), so re-pointing an asset at a different file re-runs the
+	// load algorithm on the SAME element, and a budget spent on the old file
+	// must not be charged to the new one. Nothing re-points an asset today; the
+	// relink this card's copy invites would be the first, and it is the exact
+	// case where a fresh budget is the whole point.
+	// The cleanup matters for the swap that IS reachable: a reload scheduled for
+	// the old element must never fire against its replacement. React runs it
+	// before any queued macrotask can.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the mounted media changes
+	useEffect(() => {
+		reloadsRef.current = [];
+		gaveUpRef.current = false;
+		recoveringRef.current = false;
+		return () => {
+			if (retryTimerRef.current !== null) {
+				window.clearTimeout(retryTimerRef.current);
+				retryTimerRef.current = null;
+			}
+		};
+	}, [activeSourceKey, activeSource?.src]);
+
+	// The caller's Retry button. Same path as an automatic reload so the two
+	// cannot drift, but with a fresh budget and no delay: the user clicked
+	// because they know something changed.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: the token bump IS the request
+	useEffect(() => {
+		if (!retryToken) return;
+		// Deliberately does NOT record a reload: the user's click must not spend
+		// one of the recoveries it is meant to restore.
+		reloadsRef.current = [];
+		gaveUpRef.current = false;
+		reloadActiveSource(false, 0);
+	}, [retryToken]);
+
 	// BUG corrigé : cet effet listait `seekToVirtualTime`/`seekToSourceTime` en dépendances
 	// — mais `seekToVirtualTime` change d'identité (nouveau `useCallback`) à chaque fois que
 	// `sourceIndex` change, y compris quand CE MÊME effet vient de le faire changer (switch
@@ -518,7 +728,10 @@ export function VirtualPreview({
 	}, [seekTarget]);
 
 	return (
-		<div className={styles.container}>
+		// The load state no longer paints anything here (Preview owns failure UI
+		// now), but it is still the honest read of what the decode clock is doing —
+		// worth one attribute for tests and for a screenshot in a bug report.
+		<div className={styles.container} data-load-state={loadState}>
 			{activeSource ? (
 				<>
 					<div ref={videoFrameRef} className={styles.videoFrame}>
@@ -542,6 +755,7 @@ export function VirtualPreview({
 							playsInline
 							onLoadedMetadata={(e) => {
 								setLoadState("ready");
+								markSourceLoaded();
 								// ponytail: forward the raw duration (possibly NaN for
 								// MediaRecorder WebMs) to the parent. handleLoadedMetadata
 								// falls back to a 60s seed when it isn't finite so the
@@ -575,20 +789,85 @@ export function VirtualPreview({
 									seekToVirtualTime(virtualTimeSec);
 								}
 							}}
+							onSeeked={(e) => {
+								// The demuxer is free again: apply the newest target that
+								// arrived while it was busy, if the playhead has moved on.
+								const queued = pendingScrubTargetRef.current;
+								if (queued !== null) {
+									pendingScrubTargetRef.current = null;
+									applySourceTime(e.currentTarget, queued);
+								}
+							}}
 							onWaiting={() => setLoadState("loading")}
-							onCanPlay={() => setLoadState("ready")}
+							onCanPlay={() => {
+								setLoadState("ready");
+								markSourceLoaded();
+							}}
 							onError={(e) => {
+								const el = e.currentTarget;
+								const description = describeMediaError(el.error);
+								// An element whose source was torn out from under it reports a
+								// "load failure" that says nothing about the media (Chromium
+								// calls it "Empty src attribute"). Never act on that.
+								const hasSource = Boolean(el.getAttribute("src")) || Boolean(el.currentSrc);
+								const nowMs = Date.now();
+								reloadsRef.current = pruneReloads(reloadsRef.current, nowMs);
+								const reloadsInWindow = reloadsRef.current.length;
+								const disposition = hasSource
+									? mediaErrorDisposition(description.code, reloadsInWindow, gaveUpRef.current)
+									: "ignore";
+								const detail = formatMediaError(description);
+								// The code is the whole diagnosis, and it used to be thrown
+								// away — which is why issue #395 could only ever be reported
+								// as "the preview disappeared". Keep it, whatever we decide.
+								const context = {
+									assetId: activeSource.id,
+									src: activeSource.src,
+									detail,
+									networkState: el.networkState,
+									readyState: el.readyState,
+									currentTime: el.currentTime,
+									reloadsInWindow,
+									gaveUp: gaveUpRef.current,
+									disposition,
+								};
+								if (disposition === "ignore") {
+									// Routine: every cross-asset clip boundary remounts this
+									// element mid-load. `debug`, not `warn` — this fires during
+									// ordinary playback and must not read as a problem.
+									console.debug(
+										"[preview] ignoring a <video> error from a cancelled load",
+										context,
+									);
+									return;
+								}
+								if (disposition === "retry") {
+									console.warn("[preview] <video> failed, reloading", context);
+									reloadsRef.current.push(nowMs);
+									// Deliberately no pause(): a 400 ms reload should be a blip
+									// the user never sees, and pausing here would flip the
+									// shell's transport for it. What keeps the rAF from
+									// steering the dead decoder in the meantime is
+									// `recoveringRef`, set by reloadActiveSource.
+									reloadActiveSource(!el.paused, retryDelayMs(reloadsInWindow));
+									return;
+								}
 								// ponytail: don't blindly advance to the next source — if
 								// the failed source owns the current virtual clip, the
 								// next sourceIndex will seekToVirtualTime right back into
 								// the same failed asset, looping. Fail the preview.
+								console.error("[preview] <video> failed for good", context);
 								pendingSeekRef.current = null;
+								recoveringRef.current = false;
+								// Latched so an expiring window cannot restart the cycle behind
+								// the card. Only Retry or a media change lifts it.
+								gaveUpRef.current = true;
 								setLoadState("error");
 								// An 'error' doesn't itself fire 'pause', so make sure the shell's
 								// transport state (single source of truth, see NewEditorShell's
 								// own play/pause/ended listener) actually learns playback stopped.
-								e.currentTarget.pause();
-								onVideoError?.(activeSource.id);
+								el.pause();
+								onVideoError?.(activeSource.id, detail);
 							}}
 							onEnded={() => {
 								// BUG corrigé : ce handler stoppait TOUJOURS la lecture dès que le
@@ -626,14 +905,14 @@ export function VirtualPreview({
 							// handles clip-end advancement, so dropping the event
 							// handler here is safe.
 						/>
-						{/* Plus d'overlay « Loading preview… » : il reflétait l'état du <video>
-						    CACHÉ (source horloge/audio), pas la preview RÉELLE — le canvas natif,
-						    qui montre déjà une image valide pendant que le <video> re-seek. Il
-						    recouvrait donc une bonne image à chaque scrub, pour rien. On garde
-						    seulement l'erreur, qui, elle, signale un vrai échec de chargement. */}
-						{loadState === "error" && (
-							<div className={styles.overlay}>Video preview could not be loaded.</div>
-						)}
+						{/* Plus d'overlay ici du tout. « Loading preview… » reflétait l'état du
+						    <video> CACHÉ (source horloge/audio), pas la preview RÉELLE — le canvas
+						    natif, qui montre déjà une image valide pendant que le <video> re-seek.
+						    L'overlay d'erreur, lui, est parti chez Preview (#395) : il vivait dans
+						    .videoFrame, sur lequel l'effet de zoom écrit `style.transform`, donc à
+						    3× il partait hors cadre ; il n'était pas traduit ; et surtout il ne
+						    proposait rien — l'échec est désormais une carte avec un bouton
+						    Réessayer, rendue au-dessus de la dernière image composée. */}
 					</div>
 					{/* The native D3D canvas already draws the recorded-cursor sprite as part
 					    of the composited frame (same cursor sidecar file, single source of
diff --git a/src/components/ai-edition/mediaError.test.ts b/src/components/ai-edition/mediaError.test.ts
new file mode 100644
index 00000000..cfdd7c80
--- /dev/null
+++ b/src/components/ai-edition/mediaError.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+import {
+	describeMediaError,
+	formatMediaError,
+	mediaErrorDisposition,
+	pruneReloads,
+	RELOAD_WINDOW_MS,
+	RETRY_DELAYS_MS,
+	retryDelayMs,
+} from "./mediaError";
+
+describe("describeMediaError", () => {
+	it("names a known code", () => {
+		expect(describeMediaError({ code: 3, message: "PIPELINE_ERROR_DECODE" })).toEqual({
+			code: 3,
+			name: "MEDIA_ERR_DECODE",
+			message: "PIPELINE_ERROR_DECODE",
+		});
+	});
+
+	// An `error` event can arrive with no MediaError attached; the caller still has to
+	// decide something, so this must not throw or produce `undefined` fields.
+	it("survives a missing error object", () => {
+		expect(describeMediaError(null)).toEqual({
+			code: null,
+			name: "MEDIA_ERR_UNKNOWN",
+			message: "",
+		});
+		expect(describeMediaError({ code: 99 }).name).toBe("MEDIA_ERR_UNKNOWN");
+	});
+
+	it("formats a line a bug report can carry", () => {
+		expect(formatMediaError(describeMediaError({ code: 2, message: "boom" }))).toBe(
+			"MEDIA_ERR_NETWORK (2) — boom",
+		);
+		expect(formatMediaError(describeMediaError({ code: 2 }))).toBe("MEDIA_ERR_NETWORK (2)");
+		expect(formatMediaError(describeMediaError(null))).toBe("MEDIA_ERR_UNKNOWN");
+	});
+});
+
+describe("mediaErrorDisposition", () => {
+	// THE regression (issue #395): a cancelled load is not a broken file. Every
+	// cross-asset clip boundary remounts the <video> and every reload calls load() on
+	// a possibly-loading element, so acting on code 1 — even just counting it — is what
+	// let a healthy editor talk itself into an error screen.
+	it("always ignores MEDIA_ERR_ABORTED, at any attempt count", () => {
+		for (const attempts of [0, 1, 2, 3, 99]) {
+			expect(mediaErrorDisposition(1, attempts)).toBe("ignore");
+		}
+	});
+
+	it("retries a decode or network failure, then gives up", () => {
+		for (const code of [2, 3]) {
+			expect(mediaErrorDisposition(code, 0)).toBe("retry");
+			expect(mediaErrorDisposition(code, 1)).toBe("retry");
+			expect(mediaErrorDisposition(code, 2)).toBe("fatal");
+		}
+	});
+
+	// A recording the capture process is still writing reports as "unsupported", so the
+	// code gets one look — but only one, because it is also what a genuinely unplayable
+	// file reports and re-reading that is pure latency.
+	it("gives an unsupported source exactly one retry", () => {
+		expect(mediaErrorDisposition(4, 0)).toBe("retry");
+		expect(mediaErrorDisposition(4, 1)).toBe("fatal");
+	});
+
+	it("treats an unknown failure as transient", () => {
+		expect(mediaErrorDisposition(null, 0)).toBe("retry");
+		expect(mediaErrorDisposition(null, RETRY_DELAYS_MS.length)).toBe("fatal");
+	});
+
+	// The budget counts reloads inside a window, so a long session cannot
+	// exhaust it: the confirmed cause of #395 is our own seek storm, which
+	// recurs across an editing session and heals every time. A lifetime count
+	// would eventually show a card on media a 400 ms reload always repairs.
+	it("is fatal only once the window is full", () => {
+		expect(mediaErrorDisposition(3, RETRY_DELAYS_MS.length - 1)).toBe("retry");
+		expect(mediaErrorDisposition(3, RETRY_DELAYS_MS.length)).toBe("fatal");
+	});
+
+	// Without this, a dead file reloads every time the window empties, flashes
+	// back on the metadata that always parses, and loses the card behind it.
+	it("stays fatal once it has given up, however empty the window", () => {
+		expect(mediaErrorDisposition(3, 0, true)).toBe("fatal");
+		expect(mediaErrorDisposition(2, 0, true)).toBe("fatal");
+	});
+
+	// …but never for a cancelled load, even then. Making code 1 terminal is
+	// exactly how #395 would come back through the side door.
+	it("still ignores an aborted load after giving up", () => {
+		expect(mediaErrorDisposition(1, 99, true)).toBe("ignore");
+	});
+});
+
+describe("pruneReloads", () => {
+	it("keeps only what is still inside the window", () => {
+		const now = 1_000_000;
+		const timestamps = [
+			now - RELOAD_WINDOW_MS - 1, // expired
+			now - RELOAD_WINDOW_MS, // expired, boundary is exclusive
+			now - RELOAD_WINDOW_MS + 1,
+			now,
+		];
+		expect(pruneReloads(timestamps, now)).toEqual([now - RELOAD_WINDOW_MS + 1, now]);
+		expect(pruneReloads([], now)).toEqual([]);
+	});
+});
+
+describe("retryDelayMs", () => {
+	it("backs off, then holds at the last delay", () => {
+		expect(retryDelayMs(0)).toBe(RETRY_DELAYS_MS[0]);
+		expect(retryDelayMs(1)).toBe(RETRY_DELAYS_MS[1]);
+		expect(retryDelayMs(50)).toBe(RETRY_DELAYS_MS[RETRY_DELAYS_MS.length - 1]);
+	});
+});
diff --git a/src/components/ai-edition/mediaError.ts b/src/components/ai-edition/mediaError.ts
new file mode 100644
index 00000000..3cf4ced8
--- /dev/null
+++ b/src/components/ai-edition/mediaError.ts
@@ -0,0 +1,112 @@
+// What to do about an HTMLMediaElement `error` event in the preview.
+//
+// Split out of VirtualPreview's `onError` so the decision table is testable
+// without a DOM. The absence of that table is issue #395: ANY error event, of
+// any kind, was treated as "this asset is dead", and one such event collapsed
+// the whole preview to the "add a video to get started" empty state for the
+// rest of the session.
+//
+// MEDIA_ERR_ABORTED is the one we must never act on. It is what a *cancelled*
+// load looks like, and the preview cancels loads as a matter of course: the
+// <video> is keyed on `activeSource.id`, so every cross-asset clip boundary
+// remounts it mid-fetch, and our own reload calls load() on an element that may
+// still be loading. Counting those against a failure budget is how a healthy
+// editor talks itself into an error screen.
+
+export const MEDIA_ERROR_NAMES: Record<number, string> = {
+	1: "MEDIA_ERR_ABORTED",
+	2: "MEDIA_ERR_NETWORK",
+	3: "MEDIA_ERR_DECODE",
+	4: "MEDIA_ERR_SRC_NOT_SUPPORTED",
+};
+
+/** Delayed rather than immediate: the failure we actually measured is a demuxer
+ *  that could not keep up (see VirtualPreview's `applySourceTime`), and an
+ *  instant re-read arrives while it is still saturated. */
+export const RETRY_DELAYS_MS = [400, 1200] as const;
+
+/** A recording that is still being written reports as "unsupported" too, so
+ *  code 4 gets one cheap look before we believe the browser that the file is
+ *  unusable. */
+export const UNSUPPORTED_RETRY_BUDGET = 1;
+
+/**
+ * The budget is spent by reloads inside a SLIDING WINDOW, not over the lifetime
+ * of the mounted media. That distinction is the whole design:
+ *
+ * - a genuinely dead file burns the budget in seconds (400 ms + 1200 ms of
+ *   backoff and a moment of decode), so the user reaches the card almost at
+ *   once, which is what they need;
+ * - a healthy file hit by the occasional transient — the confirmed cause of
+ *   #395 was our own seek storm, which recurs across an editing session and
+ *   recovers every time — never accumulates, because the window empties between
+ *   hiccups. A lifetime count could not tell those apart: it would show a card
+ *   after enough ordinary editing, on media a 400 ms reload heals every time.
+ *
+ * A window also removes the need to "re-arm" anything on recovery, which is the
+ * mechanism that kept getting this wrong: it expires by itself.
+ */
+export const RELOAD_WINDOW_MS = 30_000;
+
+export interface MediaErrorDescription {
+	code: number | null;
+	name: string;
+	message: string;
+}
+
+/** Typed structurally rather than as `MediaError` so this module carries no DOM
+ *  dependency and its test can run in the default node environment. */
+export function describeMediaError(
+	error: { readonly code?: number; readonly message?: string } | null | undefined,
+): MediaErrorDescription {
+	const code = typeof error?.code === "number" ? error.code : null;
+	return {
+		code,
+		name: (code !== null ? MEDIA_ERROR_NAMES[code] : undefined) ?? "MEDIA_ERR_UNKNOWN",
+		message: error?.message ?? "",
+	};
+}
+
+/** One line for the console and for the error card — the code is what makes a
+ *  user's bug report actionable, since we cannot reproduce their decoder. */
+export function formatMediaError(description: MediaErrorDescription): string {
+	const label =
+		description.code === null ? description.name : `${description.name} (${description.code})`;
+	return description.message ? `${label} — ${description.message}` : label;
+}
+
+/** The reload timestamps still inside the window. The single definition of what
+ *  "recent" means: the caller keeps the returned array and reads its length, so
+ *  there is no second copy of this predicate to drift from. The caller owns the
+ *  clock, which keeps this module pure and testable in the node environment. */
+export function pruneReloads(timestamps: readonly number[], nowMs: number): number[] {
+	return timestamps.filter((at) => nowMs - at < RELOAD_WINDOW_MS);
+}
+
+export type MediaErrorDisposition = "ignore" | "retry" | "fatal";
+
+/**
+ * `reloadsInWindow` counts only AUTOMATIC reloads: a user pressing Retry clears
+ * the history, because they clicked knowing something changed.
+ *
+ * A null code (an error event carrying no MediaError) rides the full budget —
+ * we know nothing, so we try.
+ */
+export function mediaErrorDisposition(
+	code: number | null,
+	reloadsInWindow: number,
+	hasGivenUp = false,
+): MediaErrorDisposition {
+	if (code === 1) return "ignore";
+	// Once the card is up, the window expiring must not quietly start the cycle
+	// again: a dead file would reload every 30 s, flash back to a picture on the
+	// metadata that always parses, and lose the card. Only Retry or a media
+	// change lifts this.
+	if (hasGivenUp) return "fatal";
+	const budget = code === 4 ? UNSUPPORTED_RETRY_BUDGET : RETRY_DELAYS_MS.length;
+	return reloadsInWindow < budget ? "retry" : "fatal";
+}
+
+export function retryDelayMs(reloadsInWindow: number): number {
+	return RETRY_DELAYS_MS[Math.min(reloadsInWindow, RETRY_DELAYS_MS.length - 1)];
+}
diff --git a/src/i18n/locales/ar/editor.json b/src/i18n/locales/ar/editor.json
index b472ea7d..80dedcf6 100644
--- a/src/i18n/locales/ar/editor.json
+++ b/src/i18n/locales/ar/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "معاينة الفيديو",
-		"webcamPreview": "معاينة كاميرا الويب (اسحب لتغيير الموضع)"
+		"webcamPreview": "معاينة كاميرا الويب (اسحب لتغيير الموضع)",
+		"mediaError": {
+			"title": "توقّفت المعاينة",
+			"description": "تعذّر فك ترميز الفيديو. قد يكون الملف تالفًا، أو ما زال قيد الكتابة، أو لم يعد في المكان الذي يتوقعه المشروع — مشروعك نفسه سليم.",
+			"retry": "إعادة المحاولة",
+			"detail": "التفاصيل: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "تعليق توضيحي",
diff --git a/src/i18n/locales/en/editor.json b/src/i18n/locales/en/editor.json
index 10d8ef61..42980355 100644
--- a/src/i18n/locales/en/editor.json
+++ b/src/i18n/locales/en/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Video preview",
-		"webcamPreview": "Webcam preview (drag to reposition)"
+		"webcamPreview": "Webcam preview (drag to reposition)",
+		"mediaError": {
+			"title": "Preview stopped",
+			"description": "The video couldn't be decoded. The file may be damaged, still being written, or no longer where the project expects it — your project itself is intact.",
+			"retry": "Try again",
+			"detail": "Details: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Annotation",
diff --git a/src/i18n/locales/es/editor.json b/src/i18n/locales/es/editor.json
index 1b8dadaf..0e052ad7 100644
--- a/src/i18n/locales/es/editor.json
+++ b/src/i18n/locales/es/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Vista previa del vídeo",
-		"webcamPreview": "Vista previa de la webcam (arrastra para reubicar)"
+		"webcamPreview": "Vista previa de la webcam (arrastra para reubicar)",
+		"mediaError": {
+			"title": "Vista previa detenida",
+			"description": "No se pudo decodificar el vídeo. El archivo puede estar dañado, aún escribiéndose, o ya no estar donde el proyecto lo espera; tu proyecto está intacto.",
+			"retry": "Reintentar",
+			"detail": "Detalles: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Anotación",
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
index 333298dd..5df6ab06 100644
--- a/src/i18n/locales/fr/editor.json
+++ b/src/i18n/locales/fr/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Aperçu vidéo",
-		"webcamPreview": "Aperçu webcam (glisser pour repositionner)"
+		"webcamPreview": "Aperçu webcam (glisser pour repositionner)",
+		"mediaError": {
+			"title": "Aperçu interrompu",
+			"description": "La vidéo n'a pas pu être décodée. Le fichier est peut-être endommagé, en cours d'écriture, ou plus à l'emplacement attendu — votre projet, lui, est intact.",
+			"retry": "Réessayer",
+			"detail": "Détails : {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Annotation",
diff --git a/src/i18n/locales/it/editor.json b/src/i18n/locales/it/editor.json
index 0d4df5c7..c19fc354 100644
--- a/src/i18n/locales/it/editor.json
+++ b/src/i18n/locales/it/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Anteprima video",
-		"webcamPreview": "Anteprima webcam (trascina per riposizionare)"
+		"webcamPreview": "Anteprima webcam (trascina per riposizionare)",
+		"mediaError": {
+			"title": "Anteprima interrotta",
+			"description": "Non è stato possibile decodificare il video. Il file potrebbe essere danneggiato, ancora in scrittura o non più dove il progetto lo cerca: il progetto è intatto.",
+			"retry": "Riprova",
+			"detail": "Dettagli: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Annotazione",
diff --git a/src/i18n/locales/ja-JP/editor.json b/src/i18n/locales/ja-JP/editor.json
index 3b48038c..51664049 100644
--- a/src/i18n/locales/ja-JP/editor.json
+++ b/src/i18n/locales/ja-JP/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "動画プレビュー",
-		"webcamPreview": "ウェブカメラのプレビュー（ドラッグで位置変更）"
+		"webcamPreview": "ウェブカメラのプレビュー（ドラッグで位置変更）",
+		"mediaError": {
+			"title": "プレビューを停止しました",
+			"description": "動画をデコードできませんでした。ファイルが破損しているか、まだ書き込み中か、プロジェクトが参照している場所にない可能性があります。プロジェクト自体は損なわれていません。",
+			"retry": "再試行",
+			"detail": "詳細: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "注釈",
diff --git a/src/i18n/locales/ko-KR/editor.json b/src/i18n/locales/ko-KR/editor.json
index dabd1475..f2ebcdc0 100644
--- a/src/i18n/locales/ko-KR/editor.json
+++ b/src/i18n/locales/ko-KR/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "영상 미리보기",
-		"webcamPreview": "웹캠 미리보기 (끌어서 위치 변경)"
+		"webcamPreview": "웹캠 미리보기 (끌어서 위치 변경)",
+		"mediaError": {
+			"title": "미리보기가 중단되었습니다",
+			"description": "영상을 디코딩할 수 없습니다. 파일이 손상되었거나, 아직 저장 중이거나, 프로젝트가 기대한 위치에 없을 수 있습니다. 프로젝트 자체는 그대로입니다.",
+			"retry": "다시 시도",
+			"detail": "세부 정보: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "주석",
diff --git a/src/i18n/locales/pt-BR/editor.json b/src/i18n/locales/pt-BR/editor.json
index d65fd23d..c5ab7154 100644
--- a/src/i18n/locales/pt-BR/editor.json
+++ b/src/i18n/locales/pt-BR/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Pré-visualização do vídeo",
-		"webcamPreview": "Pré-visualização da webcam (arraste para reposicionar)"
+		"webcamPreview": "Pré-visualização da webcam (arraste para reposicionar)",
+		"mediaError": {
+			"title": "Pré-visualização interrompida",
+			"description": "Não foi possível decodificar o vídeo. O arquivo pode estar danificado, ainda sendo gravado ou não estar mais onde o projeto espera — seu projeto continua intacto.",
+			"retry": "Tentar novamente",
+			"detail": "Detalhes: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Anotação",
diff --git a/src/i18n/locales/ru/editor.json b/src/i18n/locales/ru/editor.json
index 11eeda92..881ea68d 100644
--- a/src/i18n/locales/ru/editor.json
+++ b/src/i18n/locales/ru/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Предпросмотр видео",
-		"webcamPreview": "Предпросмотр камеры (перетащите, чтобы переместить)"
+		"webcamPreview": "Предпросмотр камеры (перетащите, чтобы переместить)",
+		"mediaError": {
+			"title": "Предпросмотр остановлен",
+			"description": "Не удалось декодировать видео. Файл может быть повреждён, ещё записываться или больше не находиться там, где его ожидает проект — сам проект не пострадал.",
+			"retry": "Повторить",
+			"detail": "Подробности: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Аннотация",
diff --git a/src/i18n/locales/tr/editor.json b/src/i18n/locales/tr/editor.json
index b0a42ca3..dfe1832f 100644
--- a/src/i18n/locales/tr/editor.json
+++ b/src/i18n/locales/tr/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Video önizlemesi",
-		"webcamPreview": "Web kamerası önizlemesi (taşımak için sürükleyin)"
+		"webcamPreview": "Web kamerası önizlemesi (taşımak için sürükleyin)",
+		"mediaError": {
+			"title": "Önizleme durdu",
+			"description": "Video çözümlenemedi. Dosya bozulmuş, hâlâ yazılıyor ya da projenin beklediği yerde olmayabilir — projeniz olduğu gibi duruyor.",
+			"retry": "Yeniden dene",
+			"detail": "Ayrıntılar: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Açıklama",
diff --git a/src/i18n/locales/vi/editor.json b/src/i18n/locales/vi/editor.json
index 2e61a7c4..ee17bc1b 100644
--- a/src/i18n/locales/vi/editor.json
+++ b/src/i18n/locales/vi/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Xem trước video",
-		"webcamPreview": "Xem trước webcam (kéo để đổi vị trí)"
+		"webcamPreview": "Xem trước webcam (kéo để đổi vị trí)",
+		"mediaError": {
+			"title": "Xem trước đã dừng",
+			"description": "Không thể giải mã video. Tệp có thể đã hỏng, vẫn đang được ghi, hoặc không còn ở nơi dự án mong đợi — dự án của bạn vẫn nguyên vẹn.",
+			"retry": "Thử lại",
+			"detail": "Chi tiết: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Chú thích",
diff --git a/src/i18n/locales/zh-CN/editor.json b/src/i18n/locales/zh-CN/editor.json
index 2e52b942..41be4e22 100644
--- a/src/i18n/locales/zh-CN/editor.json
+++ b/src/i18n/locales/zh-CN/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "视频预览",
-		"webcamPreview": "摄像头预览（拖动可重新定位）"
+		"webcamPreview": "摄像头预览（拖动可重新定位）",
+		"mediaError": {
+			"title": "预览已停止",
+			"description": "无法解码该视频。文件可能已损坏、仍在写入中，或已不在项目预期的位置——你的项目本身完好无损。",
+			"retry": "重试",
+			"detail": "详细信息：{{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "批注",
diff --git a/src/i18n/locales/zh-TW/editor.json b/src/i18n/locales/zh-TW/editor.json
index 032bb91e..de53c867 100644
--- a/src/i18n/locales/zh-TW/editor.json
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "影片預覽",
-		"webcamPreview": "攝影機預覽（拖曳可重新定位）"
+		"webcamPreview": "攝影機預覽（拖曳可重新定位）",
+		"mediaError": {
+			"title": "預覽已停止",
+			"description": "無法解碼此影片。檔案可能已損毀、仍在寫入中，或已不在專案預期的位置——你的專案本身完好無缺。",
+			"retry": "重試",
+			"detail": "詳細資訊：{{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "註解",
diff --git a/technical-documentation/architecture/preview.md b/technical-documentation/architecture/preview.md
index 666207c5..0a83ac5f 100644
--- a/technical-documentation/architecture/preview.md
+++ b/technical-documentation/architecture/preview.md
@@ -237,6 +237,60 @@ the decoder swap, awaits `setActiveClip`, and re-reads the live transport *now*
 (not from a captured `isPlaying`) before resuming — so a user pause that lands
 in the middle of a clip transition is honoured, not silently undone.
 
+## When the decode clock fails
+
+The hidden `<video>` is a clock and an audio source, not the picture — the
+pixels come from the native canvas. So its failing is not the preview failing,
+and the invariant since [#395](https://github.com/getopenscreen/openscreen/issues/395)
+is: **a media error can never render `EditorEmptyState`**. That component now
+answers exactly one question — is there anything in this project to show? — and
+`Preview.tsx`'s render condition (`hasProject && hasAsset && previewSources.length > 0`)
+takes no failure input at all.
+
+What replaced it, in two layers:
+
+- **Classify, then reload**
+  ([`mediaError.ts`](../../src/components/ai-edition/mediaError.ts), applied in
+  `VirtualPreview`'s `onError`). `MEDIA_ERR_ABORTED` is ignored outright and
+  never counted: the `<video>` is keyed on `activeSource.id`, so every
+  cross-asset clip boundary remounts it mid-load and Chromium reports exactly
+  that. `MEDIA_ERR_SRC_NOT_SUPPORTED` gets one retry (a recording the capture
+  process is still writing reports as unsupported); everything else — including
+  an `error` event carrying no `MediaError` — rides `RETRY_DELAYS_MS`. The
+  reload is a plain `load()`: re-assigning `src` first would start a second load
+  that aborts the first and emit a spurious abort. The budget is re-armed by
+  **playing past the position the failure happened at** (tracked in the rAF
+  tick). Both obvious alternatives are wrong: never re-arming makes the third
+  transient failure of a long session terminal — #395 with a longer fuse — while
+  re-arming when the reload *completes* is worse still, because
+  `loadedmetadata`/`canplay` prove the header parsed and the decoder is willing,
+  not that the bytes that killed us are readable. A truncated recording re-fires
+  both on every reload, so that version loops at 400 ms forever and never
+  surfaces the card at all.
+- **Resume through the existing path.** The reload queues `pendingSeekRef` and
+  lets `onLoadedMetadata` restore position and playback — the same path a
+  cross-asset seek uses, so the component has one resume path rather than two.
+  The position is resolved **at reload time**, not when the error fired, because
+  the user can scrub during the backoff: it comes from `locateVirtualPosition`
+  against the live playhead, guarded by an `assetId` check (that function
+  answers for whatever clip the playhead is on, which after a boundary advance
+  can belong to a different asset), and falls back to a source time sampled
+  while the decoder was known good. `video.currentTime` is *not* usable here —
+  it reads 0 after `load()`.
+
+While a reload is in flight the rAF tick returns early (`recoveringRef`),
+publishing the clock but taking no decision. This cannot ride on the `v.paused`
+gate the rest of the tick uses: an `error` does not fire `pause`, so a failure
+during playback leaves `paused` false, and the tick would go on making
+trim/boundary decisions against a frozen clock and clobber the queued resume.
+
+Only once the budget is spent does `Preview` hear about it, and it renders
+`PreviewErrorCard` **over** the still-mounted canvas — the last composed frame
+stays visible, which is the evidence the project is intact. The card carries the
+`MediaError` code, because a user's report is otherwise unactionable: the reason
+#395 could only ever be described as "the preview disappeared" is that the code
+was thrown away.
+
 ## Known gaps
 
 - **Live preview is video-only.** `crates/compositor/src/live.rs` (1628 lines) handles only