/**
 * Floating audio dock — ported from #audio-dock in the Vercel design.
 * Scoped under #ij-audio-dock so bb-theme's Bootstrap base cannot restyle
 * the buttons and inputs, and so nothing leaks onto the page.
 */

#ij-audio-dock {
	--ija-green: var(--brand-green, #5ca701);
	--ija-green-dark: var(--brand-green-dark, #3f7401);
	--ija-soft: var(--color-success-soft, #eef7e4);
	--ija-text: var(--color-text, #2a2933);
	--ija-muted: var(--color-text-secondary, #486d84);
	--ija-border: var(--color-border, #eef2f5);
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 1300;
	width: min(232px, calc(100vw - 48px));
	box-sizing: border-box;
	padding: 14px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--ija-border);
	box-shadow: var(--shadow-overlay, 0 24px 64px rgba(17, 16, 22, 0.18));
	font-family: var(--font-sans, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
	color: var(--ija-text);
	line-height: 1.3;
	text-align: left;
}
#ij-audio-dock.is-open { width: min(330px, calc(100vw - 48px)); }
#ij-audio-dock.is-open.is-embed { width: min(380px, calc(100vw - 48px)); }
#ij-audio-dock [hidden] { display: none !important; }
#ij-audio-dock *, #ij-audio-dock *::before, #ij-audio-dock *::after { box-sizing: border-box; }

#ij-audio-dock button {
	margin: 0;
	border: 0;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
#ij-audio-dock button:focus-visible,
#ij-audio-dock .ij-audio-seek:focus-visible { outline: 2px solid var(--ija-green-dark); outline-offset: 2px; }
#ij-audio-dock svg { display: block; flex: none; }

/* ---------- Header rows ---------- */

#ij-audio-dock .ij-audio-peek,
#ij-audio-dock .ij-audio-head { display: flex; align-items: center; gap: 10px; }
#ij-audio-dock .ij-audio-head { gap: 8px; }

#ij-audio-dock .ij-audio-icon {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background: var(--ija-soft);
	color: var(--ija-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
#ij-audio-dock .ij-audio-icon svg { width: 16px; height: 16px; }

#ij-audio-dock .ij-audio-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ija-muted);
}

#ij-audio-dock .ij-audio-open {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 100px;
	background: var(--ija-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
#ij-audio-dock .ij-audio-open:hover { background: var(--ija-green-dark); }
#ij-audio-dock .ij-audio-open svg { width: 13px; height: 13px; }

#ij-audio-dock .ij-audio-min {
	margin-left: auto;
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 100px;
	background: transparent;
	color: var(--ija-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}
#ij-audio-dock .ij-audio-min:hover { background: var(--slate-100, #eef2f5); color: var(--ija-text); }
#ij-audio-dock .ij-audio-min svg { width: 14px; height: 14px; }

/* ---------- Custom player bar ---------- */

#ij-audio-dock .ij-audio-bar {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 5px;
	border-radius: 100px;
	background: var(--ija-green);
}

#ij-audio-dock .ij-audio-toggle {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 100px;
	background: #fff;
	color: var(--ija-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
#ij-audio-dock .ij-audio-toggle:hover { background: var(--slate-100, #eef2f5); }
#ij-audio-dock .ij-audio-toggle svg { width: 13px; height: 13px; }
#ij-audio-dock .ij-g-pause,
#ij-audio-dock.is-playing .ij-g-play { display: none; }
#ij-audio-dock.is-playing .ij-g-pause { display: block; }

#ij-audio-dock .ij-audio-wave {
	position: relative;
	display: block;
	overflow: hidden;
	flex: 1;
	min-width: 0;
	height: 24px;
}
#ij-audio-dock .ij-wave-base,
#ij-audio-dock .ij-wave-fill { display: flex; align-items: center; gap: 2px; height: 24px; }
#ij-audio-dock .ij-wave-base span,
#ij-audio-dock .ij-wave-fill span { flex: none; width: 2px; border-radius: 100px; background: #fff; }
#ij-audio-dock .ij-wave-fill span { background: var(--ija-text); }
#ij-audio-dock .ij-wave-clip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Transparent range input over the wave: drag/click/arrow keys seek. */
#ij-audio-dock .ij-audio-seek {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

#ij-audio-dock .ij-audio-clock {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.2px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@keyframes ijWaveBeat { 0%, 100% { transform: scaleY(0.72); } 50% { transform: scaleY(1); } }
#ij-audio-dock.is-playing .ij-wave-base span,
#ij-audio-dock.is-playing .ij-wave-fill span { animation: ijWaveBeat 900ms ease-in-out infinite; }
#ij-audio-dock.is-playing .ij-wave-base span:nth-child(3n),
#ij-audio-dock.is-playing .ij-wave-fill span:nth-child(3n) { animation-delay: 120ms; }
#ij-audio-dock.is-playing .ij-wave-base span:nth-child(3n+1),
#ij-audio-dock.is-playing .ij-wave-fill span:nth-child(3n+1) { animation-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
	#ij-audio-dock.is-playing .ij-wave-base span,
	#ij-audio-dock.is-playing .ij-wave-fill span { animation: none; }
}

#ij-audio-dock .ij-audio-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
#ij-audio-dock .ij-audio-chips button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--ija-border);
	border-radius: 100px;
	background: #fff;
	color: var(--ija-text);
	font-size: 12px;
	font-weight: 600;
}
#ij-audio-dock .ij-audio-chips button:hover { background: var(--slate-50, #f9fafb); }
#ij-audio-dock .ij-audio-chips svg { width: 13px; height: 13px; color: var(--ija-muted); }

/* ---------- Streaming embed ---------- */

#ij-audio-dock .ij-audio-embed { margin-top: 10px; border-radius: 12px; overflow: hidden; }
#ij-audio-dock .ij-audio-embed iframe { display: block; width: 100%; border: 0; border-radius: 12px; }

/* ---------- Phones (design's om-audio-mobile) ---------- */

@media (max-width: 560px) {
	#ij-audio-dock.is-collapsed {
		width: 56px;
		height: 56px;
		padding: 0;
		left: 16px;
		bottom: 16px;
		border: 0;
		border-radius: 100px;
		background: var(--ija-green);
		box-shadow: 0 10px 28px rgba(9, 13, 16, 0.24);
	}
	#ij-audio-dock.is-collapsed .ij-audio-peek { width: 56px; height: 56px; justify-content: center; gap: 0; }
	#ij-audio-dock.is-collapsed .ij-audio-peek > span { display: none; }
	#ij-audio-dock.is-collapsed .ij-audio-open { width: 56px; height: 56px; background: transparent; }
	#ij-audio-dock.is-collapsed .ij-audio-open svg { width: 18px; height: 18px; margin-left: 2px; }
	#ij-audio-dock.is-open,
	#ij-audio-dock.is-open.is-embed {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
		padding: 14px 16px 18px;
		z-index: 1310; /* the open sheet sits over the calculator's round button */
	}
}

@media print { #ij-audio-dock { display: none !important; } }