/*
 * SSPS Waveform Player
 * Dark-background player with a canvas waveform visualization as the scrubber.
 * Colors driven by --ssps-wf-bg, --ssps-wf-accent, --ssps-wf-text; each
 * falls back to sensible defaults so the player looks good out of the box.
 */

/* ── Container ─────────────────────────────────────────────────────────── */

.ssps-wf {
	position: relative;
	display: block;
	background: var(--ssps-wf-bg, #1c1c2a);
	border-radius: 8px;
	padding: 1rem 1.25rem 1.1rem;
	margin: 0 0 1.5rem;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;
	color: var(--ssps-wf-text, #e8e8f0);
	overflow: hidden;
}

/* ── Episode title ─────────────────────────────────────────────────────── */

.ssps-wf__title {
	margin: 0 0 0.65em;
	font-size: 0.875em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--ssps-wf-text, #e8e8f0);
	opacity: 0.9;
}

/* ── Controls row ──────────────────────────────────────────────────────── */

.ssps-wf__row {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/* ── Shared button reset ───────────────────────────────────────────────── */

.ssps-wf__btn {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: var(--ssps-wf-text, #e8e8f0);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.1s;
}

.ssps-wf__btn:hover,
.ssps-wf__btn:focus-visible {
	opacity: 0.65;
	outline: none;
}

/* ── Play / Pause ──────────────────────────────────────────────────────── */

.ssps-wf__btn--play,
.ssps-wf__btn--pause {
	width: 2em;
	height: 2em;
	border: 2px solid var(--ssps-wf-text, #e8e8f0) !important;
	border-radius: 50%;
	padding: 0.35em;
	transition: background 0.1s, opacity 0.1s;
}

.ssps-wf__btn--play svg,
.ssps-wf__btn--pause svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ssps-wf__btn--play svg {
	transform: translateX(0.08em);
}

.ssps-wf__btn--play:hover,
.ssps-wf__btn--pause:hover,
.ssps-wf__btn--play:focus-visible,
.ssps-wf__btn--pause:focus-visible {
	background: var(--ssps-wf-text, #e8e8f0);
	color: var(--ssps-wf-bg, #1c1c2a);
	opacity: 1;
}

/* ── Skip buttons ──────────────────────────────────────────────────────── */

.ssps-wf__btn--rwd,
.ssps-wf__btn--fwd {
	font-size: 0.75em;
	opacity: 0.7;
	letter-spacing: -0.01em;
}

.ssps-wf__btn--rwd:hover,
.ssps-wf__btn--fwd:hover {
	opacity: 1;
}

/* ── Waveform wrapper — flex-grows to fill available space ─────────────── */

.ssps-wf__wave-wrap {
	flex: 1;
	min-width: 60px;
	height: 52px;
	cursor: pointer;
	position: relative;
}

/* ── Canvas — stretched to fill the wrapper ────────────────────────────── */

.ssps-wf__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Fallback track (shown when Web Audio API unavailable) ─────────────── */

.ssps-wf__fallback-track {
	position: absolute;
	inset: 50% 0 auto;
	transform: translateY(-50%);
	height: 3px;
	background: rgba(232, 232, 240, 0.2);
	border-radius: 2px;
}

.ssps-wf__fallback-fill {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 0%;
	background: var(--ssps-wf-accent, #a78bfa);
	border-radius: 2px;
}

/* ── Loading spinner (audio waiting state) ─────────────────────────────── */

.ssps-wf__loader {
	position: absolute;
	inset: 50% 0 auto;
	transform: translateY(-50%);
	height: 2px;
	width: 30%;
	background: var(--ssps-wf-accent, #a78bfa);
	opacity: 0.6;
	animation: ssps-wf-loading 1.1s ease-in-out infinite alternate;
}

@keyframes ssps-wf-loading {
	from { left: 0;   width: 25%; }
	to   { left: 75%; width: 25%; }
}

/* ── Time display ──────────────────────────────────────────────────────── */

.ssps-wf__time {
	white-space: nowrap;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	opacity: 0.8;
	letter-spacing: 0.01em;
}

/* ── Speed button ──────────────────────────────────────────────────────── */

.ssps-wf__btn--speed {
	font-size: 0.75em;
	min-width: 2.4em;
	text-align: center;
	opacity: 0.7;
}

.ssps-wf__btn--speed:hover {
	opacity: 1;
}

/* ── Error state ───────────────────────────────────────────────────────── */

.ssps-wf__error {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.6;
}

/* ── Utility ───────────────────────────────────────────────────────────── */

.ssps-wf--hidden {
	display: none !important;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media only screen and (max-width: 480px) {
	.ssps-wf__btn--rwd,
	.ssps-wf__btn--fwd,
	.ssps-wf__btn--speed {
		display: none;
	}
}