diff --git a/apps/chrome-extension/src/background/service-worker.ts b/apps/chrome-extension/src/background/service-worker.ts
index 937631bd2d7..166072e3050 100644
--- a/apps/chrome-extension/src/background/service-worker.ts
+++ b/apps/chrome-extension/src/background/service-worker.ts
@@ -501,7 +501,7 @@ const shouldAutoPipCaptureSource = (source: RecordingCaptureSource) =>
 	isWindowCaptureSource(source) && !isLikelyBrowserWindow(source);
 
 const isWebcamPreviewEnabled = (settings: ExtensionSettings) =>
-	settings.webcam.enabled && Boolean(settings.webcam.deviceId);
+	Boolean(settings.webcam.enabled);
 
 const shouldShowWebcamPreview = async (
 	settings: ExtensionSettings,
@@ -817,6 +817,29 @@ const broadcastOverlayHide = async () => {
 	pendingPreviewTabId = null;
 };
 
+const broadcastOverlayCountdown = async (
+	seconds: number,
+	durationMs: number,
+) => {
+	const tabs = await getTabs();
+	await Promise.all(
+		tabs.map((tab) => {
+			if (!canInjectIntoTab(tab) || tab.id === undefined) {
+				return undefined;
+			}
+			return sendOverlay(
+				tab.id,
+				{
+					type: "overlay-countdown",
+					seconds,
+					durationMs,
+				},
+				false,
+			).catch(() => undefined);
+		}),
+	);
+};
+
 const broadcastRecordingStatusToTabs = async (status: RecordingStatus) => {
 	const message: RecordingStatusBroadcast = {
 		target: "recording-status",
@@ -1621,6 +1644,15 @@ const handleRequest = async (
 			: { ok: false, error: response.error };
 	}
 
+	if (message.type === "toggle-microphone-mute") {
+		const response = await sendOffscreen({
+			target: "offscreen",
+			type: "toggle-microphone-mute",
+			muted: message.muted,
+		});
+		return response;
+	}
+
 	if (message.type === "open-options") {
 		chrome.tabs.create({ url: chrome.runtime.getURL("options.html") });
 		return { ok: true };
@@ -1737,17 +1769,7 @@ const handleRequest = async (
 	}
 
 	if (message.type === "show-countdown") {
-		// Relay the offscreen recorder's countdown to the recorded tab. Inject
-		// the overlay if it is not there yet; a tab that cannot host it (e.g. a
-		// chrome:// page) just shows nothing while the recorder waits out the
-		// same countdown, so the count is still kept out of the capture.
-		if (message.tabId !== undefined) {
-			void sendOverlay(message.tabId, {
-				type: "overlay-countdown",
-				seconds: message.seconds,
-				durationMs: message.durationMs,
-			}).catch(() => undefined);
-		}
+		await broadcastOverlayCountdown(message.seconds, message.durationMs);
 		return { ok: true };
 	}
 
diff --git a/apps/chrome-extension/src/content/blur-overlay.tsx b/apps/chrome-extension/src/content/blur-overlay.tsx
new file mode 100644
index 00000000000..3512d93360d
--- /dev/null
+++ b/apps/chrome-extension/src/content/blur-overlay.tsx
@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState } from "react";
+
+type HighlightRect = {
+	top: number;
+	left: number;
+	width: number;
+	height: number;
+};
+
+type BlurOverlayProps = {
+	active: boolean;
+	onDone: () => void;
+};
+
+const OVERLAY_ROOT_ID = "cap-extension-recorder-overlay";
+
+export function BlurOverlay({ active, onDone }: BlurOverlayProps) {
+	const [highlightRect, setHighlightRect] = useState<HighlightRect | null>(
+		null,
+	);
+	const rafRef = useRef<number | null>(null);
+
+	useEffect(() => {
+		if (!active) {
+			setHighlightRect(null);
+			return;
+		}
+
+		const handlePointerMove = (event: PointerEvent) => {
+			if (rafRef.current !== null) return;
+			rafRef.current = window.requestAnimationFrame(() => {
+				rafRef.current = null;
+				const target = document.elementFromPoint(
+					event.clientX,
+					event.clientY,
+				) as HTMLElement | null;
+
+				if (!target || target.closest(`#${OVERLAY_ROOT_ID}`)) {
+					setHighlightRect(null);
+					return;
+				}
+
+				const rect = target.getBoundingClientRect();
+				if (rect.width <= 0 || rect.height <= 0) {
+					setHighlightRect(null);
+					return;
+				}
+
+				setHighlightRect({
+					top: rect.top,
+					left: rect.left,
+					width: rect.width,
+					height: rect.height,
+				});
+			});
+		};
+
+		const handleClick = (event: MouseEvent) => {
+			const target = document.elementFromPoint(
+				event.clientX,
+				event.clientY,
+			) as HTMLElement | null;
+
+			if (!target || target.closest(`#${OVERLAY_ROOT_ID}`)) {
+				return;
+			}
+
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (target.dataset.capBlurred === "true") {
+				const orig = target.dataset.capOrigFilter ?? "";
+				if (orig) {
+					target.style.filter = orig;
+				} else {
+					target.style.removeProperty("filter");
+				}
+				target.style.removeProperty("user-select");
+				delete target.dataset.capBlurred;
+				delete target.dataset.capOrigFilter;
+			} else {
+				target.dataset.capOrigFilter = target.style.filter || "";
+				target.style.setProperty("filter", "blur(12px)", "important");
+				target.style.setProperty("user-select", "none", "important");
+				target.dataset.capBlurred = "true";
+			}
+		};
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				onDone();
+			}
+		};
+
+		window.addEventListener("pointermove", handlePointerMove, {
+			capture: true,
+			passive: true,
+		});
+		window.addEventListener("click", handleClick, {
+			capture: true,
+		});
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+
+		return () => {
+			if (rafRef.current !== null) {
+				window.cancelAnimationFrame(rafRef.current);
+				rafRef.current = null;
+			}
+			window.removeEventListener("pointermove", handlePointerMove, {
+				capture: true,
+			});
+			window.removeEventListener("click", handleClick, {
+				capture: true,
+			});
+			window.removeEventListener("keydown", handleKeyDown, { capture: true });
+		};
+	}, [active, onDone]);
+
+	if (!active || !highlightRect) return null;
+
+	return (
+		<div
+			className="cap-extension-blur-highlight"
+			style={{
+				top: `${highlightRect.top}px`,
+				left: `${highlightRect.left}px`,
+				width: `${highlightRect.width}px`,
+				height: `${highlightRect.height}px`,
+			}}
+			aria-hidden
+		>
+			<span className="cap-extension-blur-tooltip">Click to blur / unblur</span>
+		</div>
+	);
+}
diff --git a/apps/chrome-extension/src/content/overlay.css b/apps/chrome-extension/src/content/overlay.css
index 7456ae6ab53..2202cb47c88 100644
--- a/apps/chrome-extension/src/content/overlay.css
+++ b/apps/chrome-extension/src/content/overlay.css
@@ -266,6 +266,37 @@
 	border-radius: 0 0 6px;
 }
 
+.cap-extension-camera-dismiss-btn {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	z-index: 12;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	border: none;
+	border-radius: 50%;
+	background: rgba(18, 18, 23, 0.65);
+	color: #ffffff;
+	cursor: pointer;
+	opacity: 0;
+	pointer-events: none;
+	transition: all 140ms ease;
+	backdrop-filter: blur(8px);
+}
+
+.cap-extension-camera-window:hover .cap-extension-camera-dismiss-btn {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.cap-extension-camera-dismiss-btn:hover {
+	background: rgba(239, 68, 68, 0.9);
+	transform: scale(1.1);
+}
+
 .cap-extension-camera-iframe {
 	position: absolute;
 	inset: 0;
@@ -846,6 +877,377 @@
 	}
 }
 
+.cap-extension-active-recording-container {
+	position: fixed;
+	z-index: 2147483647;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	pointer-events: auto;
+	touch-action: none;
+	user-select: none;
+	font-family:
+		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+		"Segoe UI", sans-serif;
+	font-size: 13px;
+	line-height: 1;
+	isolation: isolate;
+	animation: cap-extension-badge-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cap-extension-active-recording-container.is-dragging {
+	cursor: grabbing;
+}
+
+.cap-extension-recording-badge {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 48px;
+	padding: 4px 12px 4px 6px;
+	border: 1.5px solid rgba(18, 18, 23, 0.12);
+	border-radius: 9999px;
+	background: rgba(255, 255, 255, 0.98);
+	box-shadow:
+		0 14px 34px rgba(0, 0, 0, 0.18),
+		0 3px 10px rgba(0, 0, 0, 0.1);
+	color: #18181b;
+	cursor: grab;
+	backdrop-filter: blur(24px);
+	transition:
+		transform 140ms ease,
+		box-shadow 140ms ease,
+		border-color 140ms ease;
+}
+
+.cap-extension-recording-badge.is-counting {
+	width: 48px;
+	height: 48px;
+	padding: 0;
+	justify-content: center;
+	border-color: #ef4444;
+	box-shadow:
+		0 0 0 4px rgba(239, 68, 68, 0.2),
+		0 14px 34px rgba(0, 0, 0, 0.18);
+}
+
+.cap-extension-badge-countdown-ring {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}
+
+.cap-extension-badge-countdown-number {
+	font-size: 22px;
+	font-weight: 800;
+	color: #ef4444;
+	line-height: 1;
+	animation: cap-extension-countdown-pop 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes cap-extension-countdown-pop {
+	0% {
+		transform: scale(0.6);
+		opacity: 0.5;
+	}
+	50% {
+		transform: scale(1.15);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+.cap-extension-recording-badge:hover {
+	transform: scale(1.05);
+	border-color: rgba(18, 18, 23, 0.25);
+	box-shadow:
+		0 18px 42px rgba(0, 0, 0, 0.22),
+		0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.cap-extension-recording-badge.is-active {
+	border-color: #3b82f6;
+	box-shadow:
+		0 0 0 3px rgba(59, 130, 246, 0.25),
+		0 14px 34px rgba(0, 0, 0, 0.18);
+}
+
+.cap-extension-recording-badge-icon-wrap {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+}
+
+.cap-extension-recording-badge-logo {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	object-fit: contain;
+}
+
+.cap-extension-recording-badge-icon-wrap .cap-extension-control-bar-dot {
+	position: absolute;
+	right: -1px;
+	bottom: -1px;
+	width: 10px;
+	height: 10px;
+	border: 2px solid #fff;
+	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
+}
+
+.cap-extension-recording-badge-time {
+	font-size: 13px;
+	font-weight: 700;
+	font-variant-numeric: tabular-nums;
+	color: #18181b;
+	white-space: nowrap;
+}
+
+.cap-extension-recording-badge-time.is-warning {
+	color: #e5484d;
+}
+
+.cap-extension-recording-badge::before {
+	content: "";
+	position: absolute;
+	top: -8px;
+	bottom: -8px;
+	left: -8px;
+	right: -8px;
+	z-index: -1;
+	pointer-events: auto;
+}
+
+.cap-extension-vertical-dock {
+	position: absolute;
+	left: 0;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+	width: 48px;
+	padding: 6px;
+	border: 1px solid rgba(18, 18, 23, 0.12);
+	border-radius: 28px;
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow:
+		0 20px 48px rgba(0, 0, 0, 0.22),
+		0 6px 14px rgba(0, 0, 0, 0.08);
+	backdrop-filter: blur(28px);
+	animation: cap-extension-dock-slide-up 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cap-extension-vertical-dock::before {
+	content: "";
+	position: absolute;
+	top: -12px;
+	bottom: -12px;
+	left: -12px;
+	right: -12px;
+	z-index: -1;
+	pointer-events: auto;
+}
+
+.cap-extension-active-recording-container.opens-up
+	.cap-extension-vertical-dock {
+	bottom: calc(100% + 8px);
+	transform-origin: bottom center;
+}
+
+.cap-extension-active-recording-container.opens-down
+	.cap-extension-vertical-dock {
+	top: calc(100% + 8px);
+	transform-origin: top center;
+}
+
+.cap-extension-dock-btn {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border: none;
+	border-radius: 50%;
+	background: rgba(18, 18, 23, 0.05);
+	color: #27272a;
+	cursor: pointer;
+	transition: all 140ms ease;
+}
+
+.cap-extension-dock-btn:hover {
+	background: rgba(18, 18, 23, 0.1);
+	transform: scale(1.08);
+}
+
+.cap-extension-dock-btn:active {
+	transform: scale(0.96);
+}
+
+.cap-extension-dock-btn.is-stop {
+	background: #ef4444;
+	color: #ffffff;
+	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+}
+
+.cap-extension-dock-btn.is-stop:hover {
+	background: #dc2626;
+	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
+}
+
+.cap-extension-dock-btn.is-pause {
+	background: rgba(18, 18, 23, 0.07);
+	color: #18181b;
+}
+
+.cap-extension-dock-btn.is-pause.is-paused {
+	background: #eab308;
+	color: #ffffff;
+}
+
+.cap-extension-dock-btn.is-blur.is-active {
+	background: #3b82f6;
+	color: #ffffff;
+	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+.cap-extension-dock-btn.is-pen.is-active {
+	background: #8b5cf6;
+	color: #ffffff;
+	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+}
+
+.cap-extension-dock-btn.is-camera.is-active {
+	background: rgba(34, 197, 94, 0.14);
+	color: #16a34a;
+}
+
+.cap-extension-dock-btn.is-mic.is-muted {
+	background: rgba(239, 68, 68, 0.14);
+	color: #dc2626;
+}
+
+.cap-extension-dock-btn.is-collapse {
+	background: transparent;
+	color: #a1a1aa;
+}
+
+.cap-extension-dock-btn.is-collapse:hover {
+	background: rgba(18, 18, 23, 0.06);
+	color: #18181b;
+}
+
+.cap-extension-dock-btn::after {
+	content: attr(data-tooltip);
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%) scale(0.9);
+	padding: 4px 10px;
+	border-radius: 8px;
+	background: #18181b;
+	color: #ffffff;
+	font-size: 11px;
+	font-weight: 500;
+	white-space: nowrap;
+	pointer-events: none;
+	opacity: 0;
+	transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
+	z-index: 20;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.cap-extension-active-recording-container.tooltip-left
+	.cap-extension-dock-btn::after {
+	right: calc(100% + 10px);
+}
+
+.cap-extension-active-recording-container.tooltip-right
+	.cap-extension-dock-btn::after {
+	left: calc(100% + 10px);
+}
+
+.cap-extension-dock-btn:hover::after {
+	opacity: 1;
+	transform: translateY(-50%) scale(1);
+}
+
+@keyframes cap-extension-dock-slide-up {
+	from {
+		opacity: 0;
+		transform: translateY(12px) scale(0.92);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.cap-extension-blur-highlight {
+	position: fixed;
+	z-index: 2147483646;
+	box-sizing: border-box;
+	border: 2px dashed #3b82f6;
+	border-radius: 6px;
+	background: rgba(59, 130, 246, 0.12);
+	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+	pointer-events: none;
+	animation: cap-extension-fade-in 140ms ease;
+}
+
+.cap-extension-blur-tooltip {
+	position: absolute;
+	top: -24px;
+	left: 0;
+	padding: 2px 8px;
+	border-radius: 6px;
+	background: #18181b;
+	color: #ffffff;
+	font-size: 11px;
+	font-weight: 500;
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+@keyframes cap-extension-badge-in {
+	from {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes cap-extension-popover-in {
+	from {
+		opacity: 0;
+		transform: translateY(-6px) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+@keyframes cap-extension-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
 /* The drawing surface sits above the recorder panel's backdrop (so drawing
    works even while the panel that hosts the "Ready to record" bar is open) but
    below the floating bars and the draw toolbar (which stay at the maximum
diff --git a/apps/chrome-extension/src/content/overlay.tsx b/apps/chrome-extension/src/content/overlay.tsx
index 1a55d5a6e75..f7f2946cef4 100644
--- a/apps/chrome-extension/src/content/overlay.tsx
+++ b/apps/chrome-extension/src/content/overlay.tsx
@@ -1,12 +1,4 @@
-import {
-	Circle,
-	FlipHorizontal,
-	Maximize2,
-	PictureInPicture,
-	RectangleHorizontal,
-	Square,
-	X,
-} from "lucide-react";
+import { X } from "lucide-react";
 import {
 	type PointerEvent as ReactPointerEvent,
 	useCallback,
@@ -56,10 +48,6 @@ import { replayStartupMessages, setStartupMessages } from "./startup-messages";
 const ROOT_ID = "cap-extension-recorder-overlay";
 const WINDOW_PADDING = 20;
 const BAR_HEIGHT = 52;
-// The iframe tokens are readable from the host page DOM (they sit in the
-// iframe src), so token checks alone cannot authenticate window messages.
-// Frames we embed always run on the extension origin; require it too.
-const EXTENSION_ORIGIN = new URL(chrome.runtime.getURL("")).origin;
 const createSecureToken = () => {
 	if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
 	const bytes = new Uint8Array(16);
@@ -73,12 +61,6 @@ const PREVIEW_TOKEN = createSecureToken();
 const PREVIEW_URL = chrome.runtime.getURL("camera-preview.html");
 const PREVIEW_SRC = `${PREVIEW_URL}#${encodeURIComponent(PREVIEW_TOKEN)}`;
 const PREVIEW_ERROR_DELAY_MS = 1200;
-const PANEL_TOKEN = createSecureToken();
-const PANEL_URL = chrome.runtime.getURL("popup.html");
-const PANEL_SRC = `${PANEL_URL}#${encodeURIComponent(PANEL_TOKEN)}`;
-const PANEL_WIDTH = 300;
-const PANEL_DEFAULT_HEIGHT = 460;
-const PANEL_MARGIN = 16;
 const CAMERA_MIN_SIZE = 120;
 const CAMERA_MAX_SIZE = 420;
 const CAMERA_RESIZE_CORNERS = ["nw", "ne", "sw", "se"] as const;
@@ -96,7 +78,7 @@ let overlayTokensRegistration: Promise<boolean> | null = null;
 
 const ensureOverlayTokensRegistered = () => {
 	overlayTokensRegistration ??= Promise.all(
-		[PREVIEW_TOKEN, PANEL_TOKEN].map((token) =>
+		[PREVIEW_TOKEN].map((token) =>
 			sendServiceWorkerMessage({
 				target: "service-worker",
 				type: "register-overlay-token",
@@ -321,15 +303,10 @@ const connectCameraPreview = async (
 		offer: toSessionDescriptionInit(peer.localDescription),
 	});
 
-	if (!response.ok) {
-		peer.close();
-		throw new Error(response.error);
-	}
-	if (!response.answer) {
+	if (!response.ok || !response.answer) {
 		peer.close();
-		throw new Error("Camera preview did not return an answer.");
+		throw new Error(response.ok ? "Missing camera answer" : response.error);
 	}
-
 	await peer.setRemoteDescription(response.answer);
 	return {
 		peer,
@@ -337,212 +314,6 @@ const connectCameraPreview = async (
 	};
 };
 
-type PanelFrameMessage =
-	| {
-			source: "cap-extension-panel";
-			token: string;
-			type: "size";
-			height: number;
-	  }
-	| {
-			source: "cap-extension-panel";
-			token: string;
-			type: "dismiss";
-	  };
-
-const isPanelFrameMessage = (value: unknown): value is PanelFrameMessage => {
-	if (!value || typeof value !== "object") return false;
-	const candidate = value as Partial<PanelFrameMessage>;
-	if (
-		candidate.source !== "cap-extension-panel" ||
-		candidate.token !== PANEL_TOKEN
-	) {
-		return false;
-	}
-	if (candidate.type === "dismiss") return true;
-	return (
-		candidate.type === "size" &&
-		typeof candidate.height === "number" &&
-		Number.isFinite(candidate.height)
-	);
-};
-
-function RecorderPanelOverlay({
-	onDismiss,
-	onOpenChange,
-}: {
-	onDismiss: () => void;
-	onOpenChange: (open: boolean) => void;
-}) {
-	const [open, setOpen] = useState(false);
-	const [pageVisible, setPageVisible] = useState(
-		() => document.visibilityState === "visible",
-	);
-	const [contentHeight, setContentHeight] = useState(PANEL_DEFAULT_HEIGHT);
-	const [viewportHeight, setViewportHeight] = useState(
-		() => window.innerHeight,
-	);
-	const [tokenReady, setTokenReady] = useState(false);
-	const startupReplayedRef = useRef(false);
-
-	useEffect(() => {
-		onOpenChange(open);
-	}, [onOpenChange, open]);
-
-	useEffect(() => {
-		if (!open || tokenReady) return;
-		let disposed = false;
-		void ensureOverlayTokensRegistered().then((registered) => {
-			if (!disposed && registered) setTokenReady(true);
-		});
-		return () => {
-			disposed = true;
-		};
-	}, [open, tokenReady]);
-
-	// The open flag lives in chrome.storage.session so the panel follows the
-	// user across tabs: opening or closing it anywhere applies everywhere.
-	useEffect(() => {
-		let disposed = false;
-
-		const syncPanelState = () => {
-			loadSharedUiState()
-				.then((state) => {
-					if (!disposed) setOpen(state.panelOpen);
-				})
-				.catch(() => undefined);
-		};
-
-		const handleStorageChange = (
-			changes: Record<string, chrome.storage.StorageChange>,
-			areaName: string,
-		) => {
-			if (areaName === "session" && changes[SHARED_UI_STATE_KEY]) {
-				syncPanelState();
-			}
-		};
-
-		syncPanelState();
-		chrome.storage.onChanged.addListener(handleStorageChange);
-		return () => {
-			disposed = true;
-			chrome.storage.onChanged.removeListener(handleStorageChange);
-		};
-	}, []);
-
-	useEffect(() => {
-		const handleVisibility = () =>
-			setPageVisible(document.visibilityState === "visible");
-		document.addEventListener("visibilitychange", handleVisibility);
-		return () =>
-			document.removeEventListener("visibilitychange", handleVisibility);
-	}, []);
-
-	const closePanel = useCallback(() => {
-		setOpen(false);
-		onDismiss();
-		void updateSharedUiState((current) => ({
-			...current,
-			panelOpen: false,
-			updatedAt: Date.now(),
-		})).catch(() => undefined);
-	}, [onDismiss]);
-
-	useEffect(() => {
-		const handleMessage = (
-			message: unknown,
-			_sender: chrome.runtime.MessageSender,
-			sendResponse: (response?: unknown) => void,
-		) => {
-			if (!isOverlayMessage(message)) return false;
-			if (message.type === "overlay-panel-toggle") {
-				sendResponse({ ok: true });
-				// Flip the shared flag; every tab (this one included) follows the
-				// storage change. Reopening also resurfaces a dismissed ready bar.
-				void updateSharedUiState((current) => ({
-					...current,
-					panelOpen: !current.panelOpen,
-					readyBarDismissed: current.panelOpen
-						? current.readyBarDismissed
-						: false,
-					updatedAt: Date.now(),
-				}))
-					.then((state) => setOpen(state.panelOpen))
-					.catch(() => undefined);
-				return false;
-			}
-			if (message.type === "overlay-panel-hide") {
-				sendResponse({ ok: true });
-				closePanel();
-				return false;
-			}
-			return false;
-		};
-
-		chrome.runtime.onMessage.addListener(handleMessage);
-		if (!startupReplayedRef.current) {
-			startupReplayedRef.current = true;
-			replayStartupMessages(handleMessage);
-		}
-		return () => chrome.runtime.onMessage.removeListener(handleMessage);
-	}, [closePanel]);
-
-	useEffect(() => {
-		const handleFrameMessage = (event: MessageEvent<unknown>) => {
-			if (event.origin !== EXTENSION_ORIGIN) return;
-			if (!isPanelFrameMessage(event.data)) return;
-			if (event.data.type === "size") {
-				setContentHeight(Math.max(320, Math.ceil(event.data.height)));
-				return;
-			}
-			closePanel();
-		};
-
-		window.addEventListener("message", handleFrameMessage);
-		return () => window.removeEventListener("message", handleFrameMessage);
-	}, [closePanel]);
-
-	useEffect(() => {
-		if (!open) return;
-		const handleResize = () => setViewportHeight(window.innerHeight);
-		handleResize();
-		window.addEventListener("resize", handleResize);
-		return () => window.removeEventListener("resize", handleResize);
-	}, [open]);
-
-	// Only the tab on screen renders the iframe; hidden tabs keep just the
-	// shared flag so the panel reappears instantly when they come forward.
-	// The iframe also waits for its token registration so the panel page can
-	// verify it was embedded by this extension.
-	if (!open || !pageVisible || !tokenReady) return null;
-
-	const height = Math.min(contentHeight, viewportHeight - PANEL_MARGIN * 2);
-
-	return (
-		<>
-			<button
-				type="button"
-				className="cap-extension-panel-backdrop"
-				aria-label="Dismiss Cap recorder"
-				onClick={closePanel}
-			/>
-			<div
-				className="cap-extension-panel"
-				role="dialog"
-				aria-label="Cap recorder"
-				style={{ width: `${PANEL_WIDTH}px`, height: `${height}px` }}
-			>
-				<iframe
-					src={PANEL_SRC}
-					title="Cap recorder"
-					allow="camera; microphone; autoplay"
-					className="cap-extension-panel-iframe"
-				/>
-			</div>
-		</>
-	);
-}
-
 function OverlayApp() {
 	const [extensionSettings, setExtensionSettings] =
 		useState<ExtensionSettings | null>(null);
@@ -562,7 +333,6 @@ function OverlayApp() {
 	const [previewError, setPreviewError] = useState<string | null>(null);
 	const [showPreviewError, setShowPreviewError] = useState(false);
 	const [iframeReady, setIframeReady] = useState(false);
-	const [pipSupported, setPipSupported] = useState(false);
 	const [parentPipActive, setParentPipActive] = useState(false);
 	const [framePipActive, setFramePipActive] = useState(false);
 	const [previewOpen, setPreviewOpen] = useState(false);
@@ -598,9 +368,7 @@ function OverlayApp() {
 	const lastFrameSavedAtRef = useRef(0);
 	const startupReplayedRef = useRef(false);
 	const webcam = extensionSettings?.webcam ?? null;
-	const previewEnabled = Boolean(
-		webcam?.enabled && webcam.deviceId && previewOpen,
-	);
+	const previewEnabled = Boolean(webcam?.enabled && previewOpen);
 	const isInPictureInPicture = parentPipActive || framePipActive;
 	const parentPipSupported =
 		typeof document !== "undefined" && document.pictureInPictureEnabled;
@@ -685,13 +453,6 @@ function OverlayApp() {
 		postPreviewMessage,
 	]);
 
-	const handleRecorderPanelDismiss = useCallback(() => {
-		void sendServiceWorkerMessage({
-			target: "service-worker",
-			type: "close-extension-ui",
-		}).catch(() => undefined);
-	}, []);
-
 	const applyWebcamSettings = useCallback(
 		(getNext: (current: WebcamSettings) => WebcamSettings) => {
 			setExtensionSettings((current) => {
@@ -869,6 +630,31 @@ function OverlayApp() {
 		};
 	}, []);
 
+	useEffect(() => {
+		let disposed = false;
+		const syncSharedUi = () => {
+			loadSharedUiState()
+				.then((state) => {
+					if (!disposed) setRecorderPanelOpen(state.panelOpen);
+				})
+				.catch(() => undefined);
+		};
+		syncSharedUi();
+		const handleStorageChange = (
+			changes: Record<string, chrome.storage.StorageChange>,
+			areaName: string,
+		) => {
+			if (areaName === "session" && changes[SHARED_UI_STATE_KEY]) {
+				syncSharedUi();
+			}
+		};
+		chrome.storage.onChanged.addListener(handleStorageChange);
+		return () => {
+			disposed = true;
+			chrome.storage.onChanged.removeListener(handleStorageChange);
+		};
+	}, []);
+
 	useEffect(() => {
 		let disposed = false;
 
@@ -931,6 +717,31 @@ function OverlayApp() {
 
 			sendResponse({ ok: true });
 
+			if (message.type === "overlay-panel-toggle") {
+				void updateSharedUiState((current) => ({
+					...current,
+					panelOpen: !current.panelOpen,
+					readyBarDismissed: current.panelOpen
+						? current.readyBarDismissed
+						: false,
+					updatedAt: Date.now(),
+				}))
+					.then((state) => setRecorderPanelOpen(state.panelOpen))
+					.catch(() => undefined);
+				return false;
+			}
+
+			if (message.type === "overlay-panel-hide") {
+				void updateSharedUiState((current) => ({
+					...current,
+					panelOpen: false,
+					updatedAt: Date.now(),
+				}))
+					.then((state) => setRecorderPanelOpen(state.panelOpen))
+					.catch(() => undefined);
+				return false;
+			}
+
 			if (message.type === "overlay-hide") {
 				recordingPreviewActiveRef.current = false;
 				setRecordingPreviewActive(false);
@@ -1352,7 +1163,6 @@ function OverlayApp() {
 				return false;
 			}
 
-			setPipSupported(event.supported);
 			setFramePipActive(event.active);
 			return false;
 		};
@@ -1383,7 +1193,6 @@ function OverlayApp() {
 			setLivePreviewReady(false);
 			setPreviewError(null);
 			setShowPreviewError(false);
-			setPipSupported(false);
 			setFramePipActive(false);
 			postPreviewMessage({
 				source: "cap-extension-overlay",
@@ -1620,20 +1429,6 @@ function OverlayApp() {
 		}));
 	}, [applyWebcamSettings]);
 
-	const updateSize = useCallback(() => {
-		applyWebcamSettings((current) => ({
-			...current,
-			size: current.size <= 230 ? 400 : 230,
-		}));
-	}, [applyWebcamSettings]);
-
-	const updateMirror = useCallback(() => {
-		applyWebcamSettings((current) => ({
-			...current,
-			mirror: !current.mirror,
-		}));
-	}, [applyWebcamSettings]);
-
 	const handleTogglePictureInPicture = useCallback(() => {
 		const video = pipVideoRef.current;
 		if (video && document.pictureInPictureElement === video) {
@@ -1724,94 +1519,6 @@ function OverlayApp() {
 					className="cap-extension-camera-shell"
 					style={{ borderRadius }}
 				>
-					<div className="cap-extension-camera-bar">
-						<div
-							data-controls
-							className="cap-extension-camera-controls"
-							role="toolbar"
-							aria-label="Camera preview controls"
-							onPointerDown={(event) => event.stopPropagation()}
-							onClick={(event) => event.stopPropagation()}
-							onKeyDown={(event) => {
-								if (event.key === "Escape") {
-									event.stopPropagation();
-									handleClose();
-								}
-							}}
-						>
-							<button
-								type="button"
-								className="cap-extension-camera-control"
-								aria-label="Close camera preview"
-								title="Close"
-								onClick={handleClose}
-							>
-								<X size={22} aria-hidden />
-							</button>
-							<button
-								type="button"
-								className={classNames(
-									"cap-extension-camera-control",
-									webcam.size > 230 && "is-active",
-								)}
-								aria-label="Resize camera preview"
-								title="Resize"
-								onClick={updateSize}
-							>
-								<Maximize2 size={22} aria-hidden />
-							</button>
-							<button
-								type="button"
-								className={classNames(
-									"cap-extension-camera-control",
-									webcam.shape !== "round" && "is-active",
-								)}
-								aria-label="Change camera preview shape"
-								title="Shape"
-								onClick={updateShape}
-							>
-								{webcam.shape === "round" ? (
-									<Circle size={22} aria-hidden />
-								) : null}
-								{webcam.shape === "square" ? (
-									<Square size={22} aria-hidden />
-								) : null}
-								{webcam.shape === "full" ? (
-									<RectangleHorizontal size={22} aria-hidden />
-								) : null}
-							</button>
-							<button
-								type="button"
-								className={classNames(
-									"cap-extension-camera-control",
-									webcam.mirror && "is-active",
-								)}
-								aria-label="Mirror camera preview"
-								title="Mirror"
-								onClick={updateMirror}
-							>
-								<FlipHorizontal size={22} aria-hidden />
-							</button>
-							<button
-								type="button"
-								className={classNames(
-									"cap-extension-camera-control",
-									isInPictureInPicture && "is-active",
-								)}
-								aria-label="Toggle Picture in Picture"
-								title={
-									parentPipSupported || pipSupported
-										? "Picture in Picture"
-										: "Picture in Picture is blocked on this page"
-								}
-								disabled={!parentPipSupported && !pipSupported}
-								onClick={handleTogglePictureInPicture}
-							>
-								<PictureInPicture size={22} aria-hidden />
-							</button>
-						</div>
-					</div>
-
 					<div
 						ref={cameraFrameRef}
 						className={classNames(
@@ -1826,6 +1533,19 @@ function OverlayApp() {
 							borderRadius,
 						}}
 					>
+						<button
+							type="button"
+							className="cap-extension-camera-dismiss-btn"
+							aria-label="Close camera preview"
+							title="Close camera"
+							data-controls
+							onClick={(e) => {
+								e.stopPropagation();
+								handleClose();
+							}}
+						>
+							<X size={14} aria-hidden />
+						</button>
 						{lastPreviewFrame ? (
 							<img
 								src={lastPreviewFrame.dataUrl}
@@ -1908,11 +1628,49 @@ function OverlayApp() {
 				disablePictureInPicture={false}
 				controlsList="nodownload nofullscreen noremoteplayback"
 			/>
-			<RecorderPanelOverlay
-				onDismiss={handleRecorderPanelDismiss}
-				onOpenChange={setRecorderPanelOpen}
+			<RecordingBarOverlay
+				recorderPanelOpen={recorderPanelOpen}
+				webcam={webcam}
+				microphone={extensionSettings?.microphone ?? null}
+				onToggleWebcam={() => {
+					if (!webcam) return;
+					const nextEnabled = !webcam.enabled;
+					previewDismissedRef.current = !nextEnabled;
+					setRecordingPreviewActive(nextEnabled);
+					setPreviewOpen(nextEnabled);
+					if (!nextEnabled) {
+						stopLocalPreview();
+					}
+					applyWebcamSettings((current) => ({
+						...current,
+						enabled: nextEnabled,
+					}));
+				}}
+				onUpdateWebcamShape={updateShape}
+				onToggleMicrophone={() => {
+					if (!extensionSettings) return;
+					const nextEnabled = !extensionSettings.microphone.enabled;
+					setExtensionSettings((current) => {
+						if (!current) return current;
+						return {
+							...current,
+							microphone: { ...current.microphone, enabled: nextEnabled },
+						};
+					});
+					void saveSettings({
+						...extensionSettings,
+						microphone: {
+							...extensionSettings.microphone,
+							enabled: nextEnabled,
+						},
+					}).catch(() => undefined);
+					void sendServiceWorkerMessage({
+						target: "service-worker",
+						type: "toggle-microphone-mute",
+						muted: !nextEnabled,
+					}).catch(() => undefined);
+				}}
 			/>
-			<RecordingBarOverlay recorderPanelOpen={recorderPanelOpen} />
 			<CountdownOverlay />
 			<ConfirmOverlay />
 			{isDragging ? (
diff --git a/apps/chrome-extension/src/content/recording-bar.tsx b/apps/chrome-extension/src/content/recording-bar.tsx
index 6a1e46ee76a..3367398c8c3 100644
--- a/apps/chrome-extension/src/content/recording-bar.tsx
+++ b/apps/chrome-extension/src/content/recording-bar.tsx
@@ -1,4 +1,16 @@
-import { GripVertical, Pause, Pencil, Play, Square, X } from "lucide-react";
+import {
+	ChevronDown,
+	EyeOff,
+	Mic,
+	MicOff,
+	Pause,
+	Pencil,
+	Play,
+	Square,
+	Video,
+	VideoOff,
+	X,
+} from "lucide-react";
 import {
 	type PointerEvent as ReactPointerEvent,
 	useCallback,
@@ -26,18 +38,18 @@ import {
 	updateSharedUiState,
 } from "../shared/storage";
 import type {
+	MicrophoneSettings,
 	OverlayPosition,
 	RecordingPlan,
 	RecordingStatus,
 	SharedRecordingState,
+	WebcamSettings,
 } from "../shared/types";
+import { BlurOverlay } from "./blur-overlay";
 import { DrawingOverlay } from "./drawing-overlay";
 
 const EDGE_PADDING = 16;
 const BOTTOM_OFFSET = 28;
-// Live updates arrive via status broadcasts and the session-storage mirror;
-// this poll only reconciles drift, so it can be slow instead of hammering the
-// service worker (and through it the offscreen document) from every tab.
 const POLL_INTERVAL_MS = 5000;
 const WARNING_THRESHOLD_MS = 60_000;
 const LOGO_URL = chrome.runtime.getURL("icons/icon-48.png");
@@ -52,6 +64,11 @@ type BarControl = "stop-recording" | "pause-recording" | "resume-recording";
 
 type RecordingBarOverlayProps = {
 	recorderPanelOpen: boolean;
+	webcam?: WebcamSettings | null;
+	microphone?: MicrophoneSettings | null;
+	onToggleWebcam?: () => void;
+	onUpdateWebcamShape?: () => void;
+	onToggleMicrophone?: () => void;
 };
 
 const toBarStatus = (status: RecordingStatus | undefined): BarStatus | null => {
@@ -77,8 +94,6 @@ const toOverlayPosition = (position: {
 	updatedAt: Date.now(),
 });
 
-// The timer derives from wall-clock deltas against the shared status, so as
-// long as every tab holds the same status object their clocks read the same.
 const currentDurationMs = (status: BarStatus, now: number) =>
 	status.phase === "recording"
 		? status.durationMs + Math.max(0, now - status.updatedAt)
@@ -86,11 +101,17 @@ const currentDurationMs = (status: BarStatus, now: number) =>
 
 export function RecordingBarOverlay({
 	recorderPanelOpen,
+	webcam,
+	microphone,
+	onToggleWebcam,
+	onUpdateWebcamShape,
+	onToggleMicrophone,
 }: RecordingBarOverlayProps) {
 	const [status, setStatus] = useState<BarStatus | null>(null);
 	const [plan, setPlan] = useState<RecordingPlan | null>(null);
 	const [signedIn, setSignedIn] = useState(false);
 	const [readyDismissed, setReadyDismissed] = useState(false);
+	const [countdownValue, setCountdownValue] = useState<number | null>(null);
 	const [position, setPosition] = useState<{ x: number; y: number } | null>(
 		null,
 	);
@@ -99,13 +120,20 @@ export function RecordingBarOverlay({
 	const [isDragging, setIsDragging] = useState(false);
 	const [busy, setBusy] = useState(false);
 	const [drawing, setDrawing] = useState(false);
+	const [blurActive, setBlurActive] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
 	const [now, setNow] = useState(() => Date.now());
 	const dragOffsetRef = useRef({ x: 0, y: 0 });
+	const dragDistanceRef = useRef(0);
+	const dragStartPosRef = useRef({ x: 0, y: 0 });
+	const isPointerDownRef = useRef(false);
 	const barRef = useRef<HTMLDivElement>(null);
 	const planRef = useRef<RecordingPlan | null>(null);
 	const positionRef = useRef<{ x: number; y: number } | null>(null);
 	const positionModeRef = useRef<"active" | "ready" | null>(null);
 	const recorderPanelOpenRef = useRef(false);
+	const countdownIntervalRef = useRef<number | null>(null);
+	const hoverTimeoutRef = useRef<number | null>(null);
 
 	useEffect(() => {
 		planRef.current = plan;
@@ -154,10 +182,6 @@ export function RecordingBarOverlay({
 		recorderPanelOpenRef.current = recorderPanelOpen;
 	}, [recorderPanelOpen, refresh]);
 
-	// chrome.storage.session is the cross-tab source of truth for both the
-	// recording state and the shared UI flags; the storage change events reach
-	// every tab (including backgrounded ones), which keeps each bar in lockstep
-	// without per-tab polling round-trips.
 	useEffect(() => {
 		let disposed = false;
 
@@ -227,11 +251,6 @@ export function RecordingBarOverlay({
 	useEffect(() => {
 		const handleVisibility = () => {
 			if (document.visibilityState !== "visible") return;
-			// Recompute the clock immediately so the first painted frame after a
-			// tab switch already shows the right time, then reconcile from the
-			// session-storage mirror: reading storage does not wake the service
-			// worker, unlike a get-recording-status round trip, and the slow
-			// poll below still corrects any drift while the bar is active.
 			setNow(Date.now());
 			loadSharedRecordingState()
 				.then((state) => applySharedState(state))
@@ -243,65 +262,101 @@ export function RecordingBarOverlay({
 	}, [applySharedState]);
 
 	useEffect(() => {
+		const clearCountdownTimer = () => {
+			if (countdownIntervalRef.current !== null) {
+				window.clearInterval(countdownIntervalRef.current);
+				countdownIntervalRef.current = null;
+			}
+		};
+
 		const handleMessage = (message: unknown) => {
 			if (isRecordingStatusBroadcast(message)) {
 				applyResponse(message.status);
 				if (!planRef.current) refresh();
 				return false;
 			}
-			if (!isOverlayMessage(message)) return false;
-			refresh();
+			if (isOverlayMessage(message)) {
+				if (message.type === "overlay-countdown") {
+					clearCountdownTimer();
+					setCountdownValue(message.seconds);
+					let cur = message.seconds;
+					const perNum = message.durationMs / message.seconds;
+					countdownIntervalRef.current = window.setInterval(() => {
+						cur -= 1;
+						if (cur <= 0) {
+							clearCountdownTimer();
+							setCountdownValue(null);
+							return;
+						}
+						setCountdownValue(cur);
+					}, perNum);
+					return false;
+				}
+				if (message.type === "overlay-hide") {
+					clearCountdownTimer();
+					setCountdownValue(null);
+					refresh();
+					return false;
+				}
+				refresh();
+				return false;
+			}
 			return false;
 		};
 		chrome.runtime.onMessage.addListener(handleMessage);
-		return () => chrome.runtime.onMessage.removeListener(handleMessage);
+		return () => {
+			clearCountdownTimer();
+			chrome.runtime.onMessage.removeListener(handleMessage);
+		};
 	}, [applyResponse, refresh]);
 
-	const active = status !== null;
-	// The "Ready to record" bar only makes sense once the user can actually
-	// start a recording, which requires being signed in.
+	const active = status !== null || countdownValue !== null;
 	const ready = signedIn && !active && recorderPanelOpen && !readyDismissed;
 	const visible = active || ready;
 
-	// Drawing is reachable only from a visible bar, so once the bar hides
-	// (recording stopped and the ready bar dismissed) tear the canvas down too
-	// rather than leaving an invisible surface armed to swallow page clicks.
 	useEffect(() => {
-		if (!visible) setDrawing(false);
+		if (!visible) {
+			setDrawing(false);
+			setBlurActive(false);
+			setIsExpanded(false);
+		}
 	}, [visible]);
 
 	useEffect(() => {
-		if (!active) return;
+		if (status === null) return;
 		setNow(Date.now());
 		const interval = window.setInterval(() => setNow(Date.now()), 500);
 		return () => window.clearInterval(interval);
-	}, [active]);
+	}, [status]);
 
 	useEffect(() => {
-		if (!active) return;
+		if (status === null) return;
 		const interval = window.setInterval(() => {
 			if (document.visibilityState === "visible") refresh();
 		}, POLL_INTERVAL_MS);
 		return () => window.clearInterval(interval);
-	}, [active, refresh]);
-
-	const clampToViewport = useCallback((value: { x: number; y: number }) => {
-		const rect = barRef.current?.getBoundingClientRect();
-		const width = rect?.width ?? 360;
-		const height = rect?.height ?? 64;
-		const maxX = Math.max(
-			EDGE_PADDING,
-			window.innerWidth - width - EDGE_PADDING,
-		);
-		const maxY = Math.max(
-			EDGE_PADDING,
-			window.innerHeight - height - EDGE_PADDING,
-		);
-		return {
-			x: Math.min(Math.max(value.x, EDGE_PADDING), maxX),
-			y: Math.min(Math.max(value.y, EDGE_PADDING), maxY),
-		};
-	}, []);
+	}, [status, refresh]);
+
+	const clampToViewport = useCallback(
+		(value: { x: number; y: number }) => {
+			const rect = barRef.current?.getBoundingClientRect();
+			const width = rect?.width ?? (active ? 60 : 380);
+			const height = rect?.height ?? (active ? 60 : 64);
+			const maxX = Math.max(
+				EDGE_PADDING,
+				window.innerWidth - width - EDGE_PADDING,
+			);
+			const maxY = Math.max(
+				EDGE_PADDING,
+				window.innerHeight - height - EDGE_PADDING,
+			);
+			return {
+				x: Math.min(Math.max(value.x, EDGE_PADDING), maxX),
+				y: Math.min(Math.max(value.y, EDGE_PADDING), maxY),
+			};
+		},
+		[active],
+	);
 
 	useEffect(() => {
 		if (!visible || isDragging) return;
@@ -324,7 +379,7 @@ export function RecordingBarOverlay({
 					(active
 						? {
 								x: EDGE_PADDING,
-								y: (window.innerHeight - rect.height) / 2,
+								y: window.innerHeight - 90,
 							}
 						: {
 								x: (window.innerWidth - rect.width) / 2,
@@ -354,12 +409,9 @@ export function RecordingBarOverlay({
 	const handlePointerDown = useCallback(
 		(event: ReactPointerEvent<HTMLDivElement>) => {
 			if ((event.target as HTMLElement).closest("[data-controls]")) return;
-			event.preventDefault();
-			event.stopPropagation();
-			// Capture the pointer so the drag survives the cursor crossing
-			// iframes (for example the camera preview) on the page.
-			event.currentTarget.setPointerCapture(event.pointerId);
-			setIsDragging(true);
+			isPointerDownRef.current = true;
+			dragDistanceRef.current = 0;
+			dragStartPosRef.current = { x: event.clientX, y: event.clientY };
 			dragOffsetRef.current = {
 				x: event.clientX - (position?.x ?? EDGE_PADDING),
 				y: event.clientY - (position?.y ?? EDGE_PADDING),
@@ -369,16 +421,27 @@ export function RecordingBarOverlay({
 	);
 
 	useEffect(() => {
-		if (!isDragging) return;
 		const handlePointerMove = (event: PointerEvent) => {
-			setPosition(
-				clampToViewport({
-					x: event.clientX - dragOffsetRef.current.x,
-					y: event.clientY - dragOffsetRef.current.y,
-				}),
+			if (!isPointerDownRef.current) return;
+			const dist = Math.hypot(
+				event.clientX - dragStartPosRef.current.x,
+				event.clientY - dragStartPosRef.current.y,
 			);
+			dragDistanceRef.current = dist;
+			if (dist > 4) {
+				setIsDragging(true);
+				setPosition(
+					clampToViewport({
+						x: event.clientX - dragOffsetRef.current.x,
+						y: event.clientY - dragOffsetRef.current.y,
+					}),
+				);
+			}
 		};
-		const handlePointerUp = () => {
+
+		const handlePointerUp = (_event: PointerEvent) => {
+			if (!isPointerDownRef.current) return;
+			isPointerDownRef.current = false;
 			setIsDragging(false);
 			const nextPosition = positionRef.current;
 			if (!nextPosition) return;
@@ -389,6 +452,7 @@ export function RecordingBarOverlay({
 				.then((state) => setPersistedBarPosition(state.recordingBarPosition))
 				.catch(() => undefined);
 		};
+
 		window.addEventListener("pointermove", handlePointerMove);
 		window.addEventListener("pointerup", handlePointerUp);
 		window.addEventListener("pointercancel", handlePointerUp);
@@ -397,7 +461,35 @@ export function RecordingBarOverlay({
 			window.removeEventListener("pointerup", handlePointerUp);
 			window.removeEventListener("pointercancel", handlePointerUp);
 		};
-	}, [clampToViewport, isDragging]);
+	}, [clampToViewport]);
+
+	useEffect(() => {
+		return () => {
+			if (hoverTimeoutRef.current !== null) {
+				window.clearTimeout(hoverTimeoutRef.current);
+			}
+		};
+	}, []);
+
+	const handleMouseEnter = useCallback(() => {
+		if (isDragging) return;
+		if (hoverTimeoutRef.current !== null) {
+			window.clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+		setIsExpanded(true);
+	}, [isDragging]);
+
+	const handleMouseLeave = useCallback(() => {
+		if (isDragging) return;
+		if (hoverTimeoutRef.current !== null) {
+			window.clearTimeout(hoverTimeoutRef.current);
+		}
+		hoverTimeoutRef.current = window.setTimeout(() => {
+			setIsExpanded(false);
+			hoverTimeoutRef.current = null;
+		}, 450);
+	}, [isDragging]);
 
 	const sendControl = useCallback(
 		(type: BarControl) => {
@@ -443,7 +535,7 @@ export function RecordingBarOverlay({
 
 	if (!visible) return null;
 
-	if (status === null) {
+	if (status === null && countdownValue === null) {
 		return (
 			<>
 				<div
@@ -481,17 +573,61 @@ export function RecordingBarOverlay({
 							</span>
 						</div>
 					</div>
+
 					<div className="cap-extension-control-bar-divider" aria-hidden />
+
 					<div className="cap-extension-control-bar-actions" data-controls>
 						<button
 							type="button"
-							className="cap-extension-control-bar-pill is-start"
-							disabled={busy}
-							onClick={startRecording}
+							className={classNames(
+								"cap-extension-control-bar-icon-button",
+								blurActive && "is-active",
+							)}
+							aria-label="Blur content on page"
+							title={blurActive ? "Exit blur mode" : "Blur content"}
+							onClick={() => setBlurActive((prev) => !prev)}
 						>
-							<Play size={14} fill="currentColor" strokeWidth={0} aria-hidden />
-							Start recording
+							<EyeOff size={17} aria-hidden />
 						</button>
+
+						{onToggleWebcam ? (
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-control-bar-icon-button",
+									webcam?.enabled && "is-active",
+								)}
+								aria-label={webcam?.enabled ? "Camera on" : "Camera off"}
+								title={webcam?.enabled ? "Camera enabled" : "Camera disabled"}
+								onClick={onToggleWebcam}
+							>
+								{webcam?.enabled ? (
+									<Video size={17} aria-hidden />
+								) : (
+									<VideoOff size={17} aria-hidden />
+								)}
+							</button>
+						) : null}
+
+						{onToggleMicrophone ? (
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-control-bar-icon-button",
+									microphone?.enabled && "is-active",
+								)}
+								aria-label={microphone?.enabled ? "Mic unmuted" : "Mic muted"}
+								title={microphone?.enabled ? "Mic unmuted" : "Mic muted"}
+								onClick={onToggleMicrophone}
+							>
+								{microphone?.enabled ? (
+									<Mic size={17} aria-hidden />
+								) : (
+									<MicOff size={17} aria-hidden />
+								)}
+							</button>
+						) : null}
+
 						<button
 							type="button"
 							className={classNames(
@@ -503,8 +639,19 @@ export function RecordingBarOverlay({
 							title="Draw on the page"
 							onClick={toggleDrawing}
 						>
-							<Pencil size={18} aria-hidden />
+							<Pencil size={17} aria-hidden />
 						</button>
+
+						<button
+							type="button"
+							className="cap-extension-control-bar-pill is-start"
+							disabled={busy}
+							onClick={startRecording}
+						>
+							<Play size={13} fill="currentColor" strokeWidth={0} aria-hidden />
+							Start recording
+						</button>
+
 						<button
 							type="button"
 							className="cap-extension-control-bar-icon-button is-quiet"
@@ -512,125 +659,274 @@ export function RecordingBarOverlay({
 							title="Hide bar"
 							onClick={dismissReadyBar}
 						>
-							<X size={20} aria-hidden />
+							<X size={18} aria-hidden />
 						</button>
 					</div>
 				</div>
+				<BlurOverlay active={blurActive} onDone={() => setBlurActive(false)} />
 				<DrawingOverlay active={drawing} onClose={stopDrawing} />
 			</>
 		);
 	}
 
-	const isPaused = status.phase === "paused";
+	const isPaused = status?.phase === "paused";
 	const maxMs =
 		plan && !plan.isPro && plan.maxRecordingSeconds !== null
 			? plan.maxRecordingSeconds * 1000
 			: null;
-	const durationMs = currentDurationMs(status, now);
+	const durationMs = status ? currentDurationMs(status, now) : 0;
 	const displayMs =
 		maxMs !== null ? Math.max(0, maxMs - durationMs) : durationMs;
 	const isWarning = maxMs !== null && displayMs <= WARNING_THRESHOLD_MS;
-	const actionsOpenLeft =
-		position !== null && position.x > window.innerWidth / 2;
+	const dockOpensUp = position === null || position.y > 340;
+	const tooltipOnRight = position !== null && position.x < 120;
 
 	return (
 		<>
 			<div
 				ref={barRef}
+				role="toolbar"
+				aria-label="Active recording controls"
 				className={classNames(
-					"cap-extension-recording-rail",
+					"cap-extension-active-recording-container",
 					isDragging && "is-dragging",
-					actionsOpenLeft && "opens-left",
+					isExpanded && "is-expanded",
+					dockOpensUp ? "opens-up" : "opens-down",
+					tooltipOnRight ? "tooltip-right" : "tooltip-left",
 				)}
-				role="toolbar"
-				aria-label="Cap recording controls"
 				style={{
 					left: `${position?.x ?? EDGE_PADDING}px`,
 					top: position ? `${position.y}px` : "50%",
 					visibility: position ? "visible" : "hidden",
 				}}
 				onPointerDown={handlePointerDown}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
 			>
-				<div
-					className={classNames(
-						"cap-extension-recording-rail-timer",
-						isWarning && "is-warning",
-					)}
-					data-drag-handle
-					title="Drag recording controls"
-				>
-					<GripVertical
-						className="cap-extension-recording-rail-grip"
-						size={14}
-						aria-hidden
-					/>
-					<span
-						className={classNames(
-							"cap-extension-control-bar-dot",
-							isPaused ? "is-paused" : "is-recording",
-						)}
-						aria-hidden
-					/>
-					<span
-						className="cap-extension-recording-rail-time"
-						data-recording-time
-					>
-						{formatDuration(displayMs)}
-					</span>
-				</div>
-				<button
-					type="button"
-					className="cap-extension-control-bar-pill is-stop is-compact"
-					aria-label="Stop recording"
-					title="Stop recording"
-					disabled={busy}
-					data-controls
-					onClick={() => sendControl("stop-recording")}
-				>
-					<Square size={12} fill="currentColor" strokeWidth={0} aria-hidden />
-				</button>
-				<div
-					className="cap-extension-recording-rail-actions"
-					data-controls
-					data-recording-actions
-				>
-					<button
-						type="button"
-						className="cap-extension-control-bar-icon-button is-compact"
-						aria-label={isPaused ? "Resume recording" : "Pause recording"}
-						title={isPaused ? "Resume" : "Pause"}
-						disabled={busy}
-						data-recording-pause
-						onClick={() =>
-							sendControl(isPaused ? "resume-recording" : "pause-recording")
-						}
+				{isExpanded && status !== null ? (
+					<div
+						className="cap-extension-vertical-dock"
+						role="toolbar"
+						aria-label="Recording controls"
+						data-controls
 					>
-						{isPaused ? (
-							<Play size={16} fill="currentColor" strokeWidth={0} aria-hidden />
-						) : (
-							<Pause
-								size={16}
+						<button
+							type="button"
+							className="cap-extension-dock-btn is-stop"
+							aria-label="End recording"
+							data-tooltip="End recording"
+							disabled={busy}
+							onClick={() => sendControl("stop-recording")}
+						>
+							<Square
+								size={14}
 								fill="currentColor"
 								strokeWidth={0}
 								aria-hidden
 							/>
+						</button>
+
+						<button
+							type="button"
+							className={classNames(
+								"cap-extension-dock-btn is-pause",
+								isPaused && "is-paused",
+							)}
+							aria-label={isPaused ? "Resume recording" : "Pause recording"}
+							data-tooltip={isPaused ? "Resume" : "Pause"}
+							disabled={busy}
+							onClick={() =>
+								sendControl(isPaused ? "resume-recording" : "pause-recording")
+							}
+						>
+							{isPaused ? (
+								<Play
+									size={15}
+									fill="currentColor"
+									strokeWidth={0}
+									aria-hidden
+								/>
+							) : (
+								<Pause
+									size={15}
+									fill="currentColor"
+									strokeWidth={0}
+									aria-hidden
+								/>
+							)}
+						</button>
+
+						<button
+							type="button"
+							className={classNames(
+								"cap-extension-dock-btn is-blur",
+								blurActive && "is-active",
+							)}
+							aria-label={blurActive ? "Done blurring" : "Blur content"}
+							data-tooltip={blurActive ? "Done blurring" : "Blur content"}
+							onClick={() => {
+								const next = !blurActive;
+								setBlurActive(next);
+								if (next && !isPaused) {
+									sendControl("pause-recording");
+								} else if (!next && isPaused) {
+									sendControl("resume-recording");
+								}
+								setIsExpanded(false);
+							}}
+						>
+							<EyeOff size={16} aria-hidden />
+						</button>
+
+						<button
+							type="button"
+							className={classNames(
+								"cap-extension-dock-btn is-pen",
+								drawing && "is-active",
+							)}
+							aria-label="Draw on page"
+							data-tooltip="Draw / Pen"
+							onClick={toggleDrawing}
+						>
+							<Pencil size={15} aria-hidden />
+						</button>
+
+						{onToggleWebcam ? (
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-dock-btn is-camera",
+									webcam?.enabled && "is-active",
+								)}
+								aria-label={webcam?.enabled ? "Camera on" : "Camera off"}
+								data-tooltip={
+									webcam?.enabled
+										? onUpdateWebcamShape
+											? `Camera: ${webcam.shape} (Click to change shape)`
+											: "Camera on"
+										: "Camera off"
+								}
+								onClick={() => {
+									if (webcam?.enabled && onUpdateWebcamShape) {
+										onUpdateWebcamShape();
+									} else if (onToggleWebcam) {
+										onToggleWebcam();
+									}
+								}}
+								onContextMenu={(e) => {
+									e.preventDefault();
+									if (onToggleWebcam) onToggleWebcam();
+								}}
+							>
+								{webcam?.enabled ? (
+									<Video size={16} aria-hidden />
+								) : (
+									<VideoOff size={16} aria-hidden />
+								)}
+							</button>
+						) : null}
+
+						{onToggleMicrophone ? (
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-dock-btn is-mic",
+									microphone?.enabled && "is-active",
+									!microphone?.enabled && "is-muted",
+								)}
+								aria-label={
+									microphone?.enabled ? "Mute microphone" : "Unmute microphone"
+								}
+								data-tooltip={microphone?.enabled ? "Mic unmuted" : "Mic muted"}
+								onClick={onToggleMicrophone}
+							>
+								{microphone?.enabled ? (
+									<Mic size={16} aria-hidden />
+								) : (
+									<MicOff size={16} aria-hidden />
+								)}
+							</button>
+						) : null}
+
+						<button
+							type="button"
+							className="cap-extension-dock-btn is-collapse"
+							aria-label="Collapse menu"
+							data-tooltip="Collapse"
+							onClick={() => setIsExpanded(false)}
+						>
+							<ChevronDown size={16} aria-hidden />
+						</button>
+					</div>
+				) : null}
+
+				<button
+					type="button"
+					className={classNames(
+						"cap-extension-recording-badge",
+						countdownValue !== null && "is-counting",
+						isPaused && "is-paused",
+						isExpanded && "is-active",
+					)}
+					aria-label={
+						isExpanded ? "Close recording menu" : "Open recording menu"
+					}
+					title={isExpanded ? "Close menu" : "Recording menu"}
+					onClick={(e) => {
+						e.stopPropagation();
+						if (dragDistanceRef.current < 5) {
+							setIsExpanded((c) => !c);
+						}
+					}}
+				>
+					<div className="cap-extension-recording-badge-icon-wrap">
+						{countdownValue !== null ? (
+							<div className="cap-extension-badge-countdown-ring">
+								<span className="cap-extension-badge-countdown-number">
+									{countdownValue}
+								</span>
+							</div>
+						) : (
+							<>
+								<img
+									className="cap-extension-recording-badge-logo"
+									src={LOGO_URL}
+									alt=""
+									draggable={false}
+								/>
+								<span
+									className={classNames(
+										"cap-extension-control-bar-dot",
+										isPaused ? "is-paused" : "is-recording",
+									)}
+									aria-hidden
+								/>
+							</>
 						)}
-					</button>
-					<button
-						type="button"
-						className={classNames(
-							"cap-extension-control-bar-icon-button is-compact",
-							drawing && "is-active",
-						)}
-						aria-label="Draw on the page"
-						aria-pressed={drawing}
-						title="Draw on the page"
-						onClick={toggleDrawing}
-					>
-						<Pencil size={16} aria-hidden />
-					</button>
-				</div>
+					</div>
+
+					{countdownValue === null && status ? (
+						<span
+							className={classNames(
+								"cap-extension-recording-badge-time",
+								isWarning && "is-warning",
+							)}
+						>
+							{formatDuration(displayMs)}
+						</span>
+					) : null}
+				</button>
 			</div>
+
+			<BlurOverlay
+				active={blurActive}
+				onDone={() => {
+					setBlurActive(false);
+					if (status?.phase === "paused") {
+						sendControl("resume-recording");
+					}
+				}}
+			/>
 			<DrawingOverlay active={drawing} onClose={stopDrawing} />
 		</>
 	);
diff --git a/apps/chrome-extension/src/offscreen/recorder.ts b/apps/chrome-extension/src/offscreen/recorder.ts
index 4889d624613..6173df09647 100644
--- a/apps/chrome-extension/src/offscreen/recorder.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.ts
@@ -294,8 +294,11 @@ const disconnectCameraPreviews = () => {
 };
 
 const getCameraPreviewStream = async (settings: WebcamSettings) => {
+	const videoTrack = cameraPreviewStream?.getVideoTracks()[0];
 	if (
 		cameraPreviewStream?.active &&
+		videoTrack &&
+		videoTrack.readyState === "live" &&
 		cameraPreviewDeviceId === settings.deviceId
 	) {
 		return cameraPreviewStream;
@@ -377,38 +380,39 @@ const broadcastCaptureSource = (source: RecordingCaptureSource) => {
 	);
 };
 
-const getVideoConstraint = (webcam: WebcamSettings) =>
-	webcam.deviceId && webcam.deviceId !== DEFAULT_CAMERA_DEVICE_ID
-		? {
-				deviceId: { exact: webcam.deviceId },
-			}
-		: true;
-
-const shouldRetryDefaultCamera = (webcam: WebcamSettings, error: unknown) =>
-	webcam.deviceId !== null &&
-	webcam.deviceId !== DEFAULT_CAMERA_DEVICE_ID &&
-	error instanceof DOMException &&
-	(error.name === "NotFoundError" || error.name === "OverconstrainedError");
-
 const getCameraMediaStream = async (
 	webcam: WebcamSettings,
 	audio: boolean | MediaTrackConstraints,
 ) => {
-	try {
-		return await navigator.mediaDevices.getUserMedia({
-			video: getVideoConstraint(webcam),
+	const constraints: MediaStreamConstraints[] = [];
+	if (webcam.deviceId && webcam.deviceId !== DEFAULT_CAMERA_DEVICE_ID) {
+		constraints.push({
+			video: { deviceId: { exact: webcam.deviceId } },
 			audio,
 		});
-	} catch (error) {
-		if (!shouldRetryDefaultCamera(webcam, error)) {
-			throw error;
-		}
-
-		return navigator.mediaDevices.getUserMedia({
-			video: true,
+		constraints.push({
+			video: { deviceId: { ideal: webcam.deviceId } },
 			audio,
 		});
 	}
+	constraints.push({
+		video: true,
+		audio,
+	});
+
+	let lastError: unknown = null;
+	for (const constraint of constraints) {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia(constraint);
+			const videoTrack = stream.getVideoTracks()[0];
+			if (videoTrack && videoTrack.readyState === "live") {
+				return stream;
+			}
+		} catch (error) {
+			lastError = error;
+		}
+	}
+	throw lastError ?? new Error("Failed to acquire camera stream");
 };
 
 const tabCaptureConstraints = (streamId: string, includeAudio: boolean) =>
@@ -501,8 +505,8 @@ const getMicrophoneStream = async (
 // amplitude (time-domain, 0..1) that counts as sound. A muted/dead device
 // flat-lines near 0; a working mic's noise floor clears this threshold, so it
 // only flags an effectively-silent input.
-const MIC_PROBE_WINDOW_MS = 1200;
-const MIC_PROBE_SAMPLE_INTERVAL_MS = 50;
+const MIC_PROBE_WINDOW_MS = 250;
+const MIC_PROBE_SAMPLE_INTERVAL_MS = 20;
 const MIC_SOUND_MIN_PEAK = 0.0015;
 
 // Opens the selected mic and listens for any signal so the recorder can warn
@@ -1701,6 +1705,21 @@ const handleRequest = async (
 		return { ok: true, micProbe: await probeMicrophone(message.microphone) };
 	}
 
+	if (message.type === "toggle-microphone-mute") {
+		const recording = activeRecording;
+		if (recording) {
+			for (const stream of recording.streams) {
+				for (const track of stream.getAudioTracks()) {
+					track.enabled = !message.muted;
+				}
+			}
+			for (const track of recording.recordingStream.getAudioTracks()) {
+				track.enabled = !message.muted;
+			}
+		}
+		return { ok: true };
+	}
+
 	return { ok: true, status };
 };
 
diff --git a/apps/chrome-extension/src/preview/camera-preview.tsx b/apps/chrome-extension/src/preview/camera-preview.tsx
index 87d80b36285..da7741383f1 100644
--- a/apps/chrome-extension/src/preview/camera-preview.tsx
+++ b/apps/chrome-extension/src/preview/camera-preview.tsx
@@ -247,7 +247,7 @@ function App() {
 	const sessionCounterRef = useRef(0);
 	const autoPictureInPictureRef = useRef(false);
 	const autoPictureInPictureEnabledRef = useRef(false);
-	const previewEnabled = Boolean(settings?.enabled && settings.deviceId);
+	const previewEnabled = Boolean(settings?.enabled);
 	const isPictureInPictureSupported =
 		typeof document !== "undefined" && document.pictureInPictureEnabled;
 
@@ -486,6 +486,13 @@ function App() {
 				streamRef.current = stream;
 				activeDeviceRef.current = settings.deviceId;
 
+				for (const track of stream.getVideoTracks()) {
+					track.addEventListener("unmute", () => {
+						void videoRef.current?.play().catch(() => undefined);
+						publishPreviewFrame();
+					});
+				}
+
 				if (videoRef.current) {
 					videoRef.current.srcObject = stream;
 					if (autoPictureInPictureEnabledRef.current) {
@@ -621,6 +628,10 @@ function App() {
 					}
 				}}
 				onLoadedData={publishPreviewFrame}
+				onCanPlay={() => {
+					void videoRef.current?.play().catch(() => undefined);
+					publishPreviewFrame();
+				}}
 				onPlaying={publishPreviewFrame}
 			/>
 			{isPictureInPictureSupported && !isInPictureInPicture ? (
diff --git a/apps/chrome-extension/src/shared/types.ts b/apps/chrome-extension/src/shared/types.ts
index a92eec470f0..38c265d1a9a 100644
--- a/apps/chrome-extension/src/shared/types.ts
+++ b/apps/chrome-extension/src/shared/types.ts
@@ -296,7 +296,12 @@ export type OffscreenRequest =
 	| AcknowledgeErrorRequest
 	| RetryUploadRequest
 	| EnumerateDevicesRequest
-	| ProbeMicrophoneRequest;
+	| ProbeMicrophoneRequest
+	| {
+			target: "offscreen";
+			type: "toggle-microphone-mute";
+			muted: boolean;
+	  };
 
 export type OffscreenResponse =
 	| {
@@ -394,6 +399,11 @@ export type ServiceWorkerRequest =
 			target: "service-worker";
 			type: "close-webcam-preview";
 	  }
+	| {
+			target: "service-worker";
+			type: "toggle-microphone-mute";
+			muted: boolean;
+	  }
 	| {
 			target: "service-worker";
 			type: "connect-camera-preview";