/**
 * Web scanner inside the shared cc-scan modal shell.
 */

#cc-scan-root.cc-scan--web .cc-scan__panel {
	width: 100%;
	max-width: min(1040px, calc(100vw - 24px));
	height: min(920px, calc(100dvh - 24px));
	max-height: min(920px, calc(100dvh - 24px));
}

#cc-scan-root.cc-scan--web.cc-scan--handoff .cc-scan__panel {
	max-width: min(440px, calc(100vw - 24px));
	height: auto;
	max-height: min(920px, calc(100dvh - 24px));
}

#cc-scan-root.cc-scan--web .cc-scan__phase--capture {
	flex: 1 1 auto;
	min-height: 0;
}

#cc-scan-root.cc-scan--web .cc-scan__iframe-wrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #0a0c0f;
}

html:not([data-theme="dark"]) #cc-scan-root.cc-scan {
	--cc-scan-bg-deep: #efebe4;
	--cc-scan-bg-panel: #ffffff;
	--cc-scan-surface: #f8f6f2;
	--cc-scan-surface2: #f0ebe3;
	--cc-scan-text: #1c1917;
	--cc-scan-muted: #6b655e;
	--cc-scan-accent: #2563eb;
	--cc-scan-accent-hover: #1d4ed8;
	--cc-scan-accent-soft: rgba(37, 99, 235, 0.14);
	--cc-scan-success: #15803d;
	--cc-scan-success-dim: rgba(21, 128, 61, 0.12);
	--cc-scan-danger: #dc2626;
	--cc-scan-warn: #d97706;
}

html:not([data-theme="dark"]) #cc-scan-root.cc-scan .cc-scan__backdrop {
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(56, 189, 248, 0.1) 0%, transparent 45%),
		radial-gradient(90% 70% at 100% 60%, rgba(99, 102, 168, 0.08) 0%, transparent 50%),
		radial-gradient(100% 80% at 50% 0%, #ebe4d8 0%, #efebe4 55%);
}

html:not([data-theme="dark"]) #cc-scan-root.cc-scan .cc-scan__panel {
	border-color: rgba(28, 25, 23, 0.12);
	box-shadow:
		0 0 0 1px rgba(28, 25, 23, 0.04) inset,
		0 24px 80px rgba(28, 25, 23, 0.16),
		0 0 120px rgba(56, 189, 248, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html:not([data-theme="dark"]) #cc-scan-root.cc-scan--web .cc-scan__iframe-wrap,
html:not([data-theme="dark"]) #cc-scan-root.cc-scan--web .cc-scan__iframe {
	background: #f5f1ea;
}

#cc-scan-root.cc-scan--web .cc-scan__iframe-wrap[hidden],
#cc-scan-root.cc-scan--web .cc-scan__phase--handoff .cc-scan__iframe-wrap,
#cc-scan-root.cc-scan--web .cc-scan__phase--handoff [data-capture-ui] {
	display: none !important;
}

#cc-scan-root.cc-scan--web .cc-scan__iframe {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	border: 0;
	display: block;
	background: #0a0c0f;
}

@media (min-width: 861px) {
	#cc-scan-root.cc-scan--web .cc-scan__panel {
		height: auto;
		max-height: min(920px, calc(100dvh - 24px));
	}

	#cc-scan-root.cc-scan--web .cc-scan__phase--capture {
		flex: 0 1 auto;
	}

	#cc-scan-root.cc-scan--web .cc-scan__iframe-wrap {
		flex: 0 1 auto;
		overflow: auto;
	}

	#cc-scan-root.cc-scan--web .cc-scan__iframe {
		flex: none;
		height: 640px;
		min-height: 0;
		max-height: min(860px, calc(100dvh - 120px));
	}
}

@media (max-width: 640px) {
	#cc-scan-root.cc-scan--web .cc-scan__shell {
		padding: 0;
		align-items: stretch;
	}

	#cc-scan-root.cc-scan--web .cc-scan__panel {
		max-width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}