/* =============================================================================
   IzeChat — Global persistent audio mini player
   -----------------------------------------------------------------------------
   Sits directly ABOVE the mobile bottom navigation (.tag_hdr_right: fixed,
   45px of content + the natively injected --ize-safe-bottom) and never over it.
   When that bar auto-hides on scroll-down it carries .wo-botnav-hidden, and the
   mini player rides down with it so no empty gap is left at the screen edge.

   On desktop .tag_hdr_right is not a bottom bar, so the player becomes a
   floating card in the corner instead of a full-width strip.

   Colours are the theme's own tokens (--main / --main-rgb / --header-background)
   and text is currentColor at reduced opacity, so light and dark both work with
   no theme-specific rules. Motion is transform/opacity only, and the sole
   animation — three equaliser bars — runs only while audio is actually playing.
   ========================================================================== */

.ize_mp {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: 8px;
	z-index: 1035;                 /* under modals (1050) and the side backdrop (1045) */
	display: flex;
	align-items: center;
	gap: 10px;
	/* The bottom padding is the seek strip's lane. Without it the strip — which is
	   absolutely positioned across the full width — would run under the lower edge
	   of the play/close buttons and steal taps meant for them. */
	padding: 7px 8px 14px 7px;
	border-radius: 15px;
	background: var(--header-background, #fff);
	border: 1px solid rgba(127,127,127,.16);
	box-shadow: 0 6px 22px rgba(17,24,39,.16), 0 2px 6px rgba(17,24,39,.08);
	/* Entrance/exit. Starts off-screen so the first paint is never a pop-in. */
	transform: translateY(calc(100% + 18px));
	opacity: 0;
	transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
	overflow: hidden;
}
.ize_mp.is-in { transform: translateY(0); opacity: 1; }

html:has(#night-mode-css) .ize_mp,
html.ize-dark .ize_mp {
	box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
	border-color: rgba(255,255,255,.08);
}

/* ---- placement against the bottom navigation ---- */
@media (max-width: 768px) {
	.ize_mp { bottom: calc(45px + var(--ize-safe-bottom, 0px) + 6px); }
	/* Nav bar auto-hidden on scroll-down → follow it down rather than leaving a
	   floating strip with a gap beneath it. */
	html:has(.tag_hdr_right.wo-botnav-hidden) .ize_mp.is-in {
		transform: translateY(calc(45px + var(--ize-safe-bottom, 0px)));
	}
	/* Reserve room so the last post is never trapped behind the player. 45px nav
	   + safe area is already reserved by container.phtml; this adds the player. */
	html.ize-mp-on body { padding-bottom: calc(45px + var(--ize-safe-bottom, 0px) + 66px) !important; }
}
@media (min-width: 769px) {
	.ize_mp {
		left: auto;
		right: 18px;
		bottom: calc(18px + var(--ize-safe-bottom, 0px));
		width: 360px;
		max-width: calc(100vw - 36px);
	}
}

/* ---- artwork chip ---- */
.ize_mp_art {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--main-rgb, 127,127,127), .14);
	color: var(--main);
}
.ize_mp_note { transition: opacity .18s ease, transform .18s ease; }
.ize_mp.is-playing .ize_mp_note { opacity: 0; transform: scale(.7); }

/* Three bars: the "this is playing" cue. Cheaper and calmer than a waveform at
   this size, and it stops dead the moment .is-playing is removed. */
.ize_mp_eq {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 2px;
	height: 15px;
	opacity: 0;
	transition: opacity .18s ease;
}
.ize_mp.is-playing .ize_mp_eq { opacity: 1; }
.ize_mp_eq i {
	display: block;
	width: 3px;
	height: 100%;
	border-radius: 2px;
	background: var(--main);
	transform: scaleY(.4);
	transform-origin: center;
}
.ize_mp.is-playing .ize_mp_eq i { animation: ize_mp_eq .9s ease-in-out infinite; }
.ize_mp.is-playing .ize_mp_eq i:nth-child(2) { animation-delay: -.3s; }
.ize_mp.is-playing .ize_mp_eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes ize_mp_eq {
	0%, 100% { transform: scaleY(.35); }
	50%      { transform: scaleY(1); }
}

/* ---- body (tap target → back to the source post) ---- */
.ize_mp_body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 0;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
}
.ize_mp_body:hover,
.ize_mp_body:focus { text-decoration: none; color: inherit; }
.ize_mp_body:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.ize_mp_body:active { opacity: .7; }

.ize_mp_txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ize_mp_title {
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ize_mp_sub {
	font-size: 11px;
	line-height: 13px;
	opacity: .58;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	white-space: nowrap;
}
.ize_mp.is-error .ize_mp_sub { color: #e74c3c; opacity: 1; }

/* Metadata swap when the track changes. */
.ize_mp.is-swap .ize_mp_txt { animation: ize_mp_swap .26s ease; }
@keyframes ize_mp_swap {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* ---- controls ---- */
.ize_mp_play,
.ize_mp_close {
	flex-shrink: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: transform .14s cubic-bezier(.34,1.56,.64,1), background .15s ease;
}
.ize_mp_play {
	position: relative;
	width: 40px;
	height: 40px;
	background: var(--main);
	color: var(--main-color);
}
.ize_mp_play:hover { background: var(--main-hover); }
.ize_mp_play:active { transform: scale(.92); }
.ize_mp_play svg { position: absolute; transition: opacity .16s ease, transform .16s ease; }
.ize_mp_ico_pause { opacity: 0; transform: scale(.6); }
.ize_mp.is-playing .ize_mp_ico_play  { opacity: 0; transform: scale(.6); }
.ize_mp.is-playing .ize_mp_ico_pause { opacity: 1; transform: scale(1); }
/* Buffering reads on the button rather than replacing it, so the control is
   never taken away while the network catches up. */
.ize_mp.is-buffering .ize_mp_play { animation: ize_mp_pulse 1.1s ease-in-out infinite; }
@keyframes ize_mp_pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.ize_mp_close {
	width: 34px;
	height: 34px;
	color: inherit;
	opacity: .5;
}
.ize_mp_close:hover { opacity: 1; background: rgba(127,127,127,.14); }
.ize_mp_close:active { transform: scale(.9); }
.ize_mp_play:focus-visible,
.ize_mp_close:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

/* ---- progress / seek strip along the bottom edge ---- */
.ize_mp_seek {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 14px;                  /* finger-sized target for a 3px line */
	display: flex;
	align-items: flex-end;
}
.ize_mp_bar {
	width: 100%;
	height: 3px;
	background: rgba(127,127,127,.22);
}
.ize_mp_bar_fill {
	height: 100%;
	width: 0;
	background: var(--main);
	transition: width .12s linear;
}
.ize_mp.is-seeking .ize_mp_bar_fill { transition: none; }
.ize_mp_range {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	opacity: 0;
	cursor: pointer;
	touch-action: pan-y;
}
.ize_mp_range:disabled { cursor: default; }
.ize_mp_range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ize_mp_range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 14px; }
.ize_mp_range::-moz-range-track { height: 100%; background: transparent; }
.ize_mp_range::-moz-range-thumb { width: 22px; height: 14px; border: 0; background: transparent; }
.ize_mp_seek:focus-within .ize_mp_bar { background: rgba(var(--main-rgb, 127,127,127), .45); }

/* ---- "here it is" pulse on the source card after tapping the mini player ---- */
.ize-ap-spotlight {
	animation: ize_ap_spotlight 1.7s ease;
}
@keyframes ize_ap_spotlight {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--main-rgb, 127,127,127), 0); }
	18%, 62% { box-shadow: 0 0 0 3px rgba(var(--main-rgb, 127,127,127), .45); }
}

@media (prefers-reduced-motion: reduce) {
	.ize_mp,
	.ize_mp_play,
	.ize_mp_close,
	.ize_mp_play svg,
	.ize_mp_note,
	.ize_mp_eq,
	.ize_mp_bar_fill { transition: none; }
	.ize_mp.is-playing .ize_mp_eq i,
	.ize_mp.is-buffering .ize_mp_play,
	.ize_mp.is-swap .ize_mp_txt,
	.ize-ap-spotlight { animation: none; }
	.ize_mp.is-playing .ize_mp_eq i { transform: scaleY(.7); }
}