/**
 * Sticky player chrome (Design A5) — floating mini bar, progress, app surfaces.
 *
 * @package Vandadcast
 */

#vandadcast-sticky-root.vandadcast-sticky--chrome {
	--vc-player-chrome-radius: 16px;
	padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px));
	padding-block-end: max(0.65rem, env(safe-area-inset-bottom, 0px));
	gap: 0.35rem;
}

#vandadcast-sticky-root.vandadcast-sticky--chrome.is-visible {
	box-shadow: none;
}

.vandadcast-sticky--chrome .vandadcast-sticky__mini {
	position: relative;
	border-radius: var(--vc-player-chrome-radius);
	border: 1px solid var(--vc-color-border, color-mix(in srgb, CanvasText 12%, transparent));
	border-block-start: 1px solid var(--vc-color-border, color-mix(in srgb, CanvasText 12%, transparent));
	background: color-mix(in srgb, var(--vc-color-surface, Canvas) 88%, transparent);
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	box-shadow:
		0 12px 40px color-mix(in srgb, CanvasText 16%, transparent),
		0 0 0 1px color-mix(in srgb, #fff 8%, transparent) inset;
	overflow: hidden;
}

.vandadcast-sticky--chrome .vandadcast-sticky__mini-progress {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 2;
	height: 3px;
	background: color-mix(in srgb, var(--vc-color-text, CanvasText) 10%, transparent);
	pointer-events: none;
}

.vandadcast-sticky--chrome .vandadcast-sticky__mini-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(
		90deg,
		var(--vc-color-primary, var(--vandadcast-player-primary)),
		var(--vc-color-accent, var(--vandadcast-player-accent))
	);
	border-radius: 0 2px 2px 0;
	transition: width 0.12s linear;
}

.vandadcast-sticky--chrome .vandadcast-sticky__inner {
	padding: 0.6rem 0.75rem;
	padding-block-start: calc(0.6rem + 3px);
}

.vandadcast-sticky--chrome .vandadcast-sticky__art {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	box-shadow: 0 4px 14px color-mix(in srgb, CanvasText 12%, transparent);
}

.vandadcast-sticky--chrome .vandadcast-sticky__art img {
	width: 48px;
	height: 48px;
}

.vandadcast-sticky--chrome .vandadcast-sticky__title {
	font-size: 0.92rem;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.vandadcast-sticky--chrome .vandadcast-sticky__hint {
	font-size: 0.74rem;
	color: var(--vc-color-muted, color-mix(in srgb, CanvasText 62%, transparent));
}

.vandadcast-sticky--chrome .vandadcast-sticky__play-toggle {
	width: 3rem;
	height: 3rem;
	min-width: 48px;
	min-height: 48px;
	background: var(--vc-color-primary, var(--vandadcast-player-primary));
	box-shadow: 0 6px 20px color-mix(in srgb, var(--vc-color-primary, var(--vandadcast-player-primary)) 40%, transparent);
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.vandadcast-sticky--chrome .vandadcast-sticky__play-toggle:hover,
.vandadcast-sticky--chrome .vandadcast-sticky__play-toggle:focus-visible {
	transform: scale(1.04);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--vc-color-primary, var(--vandadcast-player-primary)) 48%, transparent);
	outline: none;
}

.vandadcast-sticky--chrome .vandadcast-sticky__expand-panel {
	border-radius: var(--vc-player-chrome-radius) var(--vc-player-chrome-radius) 0 0;
	border: 1px solid var(--vc-color-border, color-mix(in srgb, CanvasText 12%, transparent));
	border-block-end: 0;
	background: color-mix(in srgb, var(--vc-color-surface, Canvas) 92%, transparent);
	backdrop-filter: blur(20px) saturate(1.2);
	-webkit-backdrop-filter: blur(20px) saturate(1.2);
	box-shadow: 0 -4px 24px color-mix(in srgb, CanvasText 8%, transparent);
}

.vandadcast-sticky--chrome .vandadcast-sticky__expand-art img {
	border-radius: 12px;
	box-shadow: 0 16px 40px color-mix(in srgb, CanvasText 18%, transparent);
	border: 0;
}

.vandadcast-sticky--chrome .vandadcast-sticky__seek {
	accent-color: var(--vc-color-primary, var(--vandadcast-player-primary));
	height: 6px;
	min-height: 6px;
	border-radius: 999px;
}

.vandadcast-sticky--chrome .vandadcast-sticky__seek-wrap {
	margin-block-end: 0.85rem;
}

.vandadcast-sticky--chrome .vandadcast-sticky__skip {
	border-color: color-mix(in srgb, var(--vc-color-primary, var(--vandadcast-player-primary)) 45%, transparent);
	color: var(--vc-color-primary, var(--vandadcast-player-primary));
}

.vandadcast-sticky--chrome .vandadcast-sticky__rate {
	border-radius: 999px;
	font-weight: 700;
	background: color-mix(in srgb, var(--vc-color-primary, var(--vandadcast-player-primary)) 8%, var(--vc-color-surface, Canvas));
}

/* Podcast Zone — centered floating player */
body.vandadcast-podcast-zone #vandadcast-sticky-root.vandadcast-sticky--chrome {
	padding-inline: max(var(--vc-zone-pad, 1rem), env(safe-area-inset-left, 0px)) max(var(--vc-zone-pad, 1rem), env(safe-area-inset-right, 0px));
}

body.vandadcast-podcast-zone .vandadcast-sticky--chrome .vandadcast-sticky__mini,
body.vandadcast-podcast-zone .vandadcast-sticky--chrome .vandadcast-sticky__expand-panel {
	max-width: var(--vc-zone-max, 1120px);
	margin-inline: auto;
	width: 100%;
}

body.vandadcast-podcast-zone.vandadcast-zone-app-dark .vandadcast-sticky--chrome .vandadcast-sticky__mini,
body.vandadcast-podcast-zone.vandadcast-zone-app-dark .vandadcast-sticky--chrome .vandadcast-sticky__expand-panel {
	background: color-mix(in srgb, var(--vc-color-surface, #151c26) 94%, transparent);
	border-color: var(--vc-color-border, color-mix(in srgb, #e8edf5 12%, transparent));
	box-shadow:
		0 16px 48px color-mix(in srgb, #000 45%, transparent),
		0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset;
}

body.vandadcast-player-on {
	padding-block-end: calc(var(--vc-player-h-mini, 3.5rem) + var(--vc-safe-bottom, 0px) + 1.15rem);
}

@media (min-width: 721px) {
	.vandadcast-sticky--chrome .vandadcast-sticky__inner {
		padding: 0.65rem 1rem;
		padding-block-start: calc(0.65rem + 3px);
		max-width: min(1120px, 100%);
		margin-inline: auto;
	}

	.vandadcast-sticky--chrome .vandadcast-sticky__audio {
		border-radius: 999px;
		overflow: hidden;
		filter: drop-shadow(0 2px 8px color-mix(in srgb, CanvasText 8%, transparent));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vandadcast-sticky--chrome .vandadcast-sticky__mini-progress-fill,
	.vandadcast-sticky--chrome .vandadcast-sticky__play-toggle {
		transition: none;
	}
}