/**
 * Kababayan Connect Radio — mini-player styles.
 * Sticky bar at the bottom of every page once the listener tunes in.
 */

/* ============================================================
   Live-broadcast toast — slides in from the bottom-right when /now
   transitions to a live_* kind. Once per session per broadcast.
   ============================================================ */
.kbc-live-toast {
	position: fixed;
	right: 16px;
	bottom: calc( 110px + env( safe-area-inset-bottom, 0px ) );
	z-index: 95000;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 16px;
	min-width: 280px;
	max-width: 360px;
	background: linear-gradient(135deg, #CE1126, #a30d1d);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.35);
	cursor: pointer;
	font-family: var( --kbn-font-display, system-ui, sans-serif );
	animation: kbc-live-toast-in 320ms ease-out;
}
.kbc-live-toast.is-leaving { animation: kbc-live-toast-out 240ms ease-in forwards; }
.kbc-live-toast__dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
	animation: kbc-radio-live-pulse 1.6s infinite;
}
.kbc-live-toast__body { flex: 1; min-width: 0; }
.kbc-live-toast__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; opacity: 0.9; margin-bottom: 2px; }
.kbc-live-toast__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbc-live-toast__dismiss {
	background: rgba(255,255,255,0.18);
	color: #fff;
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}
.kbc-live-toast__dismiss:hover { background: rgba(255,255,255,0.3); }
@keyframes kbc-live-toast-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
@keyframes kbc-live-toast-out {
	to { transform: translateY(20px); opacity: 0; }
}
@media (max-width: 640px) {
	.kbc-live-toast { left: 12px; right: 12px; max-width: none; bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ); }
}

/* ============================================================
   On-air-now hero strip — homepage only, sits below the topbar.
   Width is constrained to the same --kbn-max-page container as
   the topbar so it lines up with the rest of the layout.
   Populated by radio-player.js from /kbc/v1/radio/now.
   ============================================================ */
/* Brand palette anchors:
 *   --kbn-flag-red   #CE1126  Philippines flag red (radio-only exception)
 *   --kbn-flag-blue  #0038A8  Philippines flag blue (system primary)
 *   --kbn-flag-blue-deep  #002878  darker shade for gradients
 *   --kbn-flag-red-deep   #a30d1d  darker shade for gradients
 * Red is reserved site-wide for the "Disputed" verification state, but
 * the radio "on-air" state is a temporal broadcast indicator, not a trust
 * claim — far enough apart in context that the reservation is bounded
 * here intentionally. See project_brand_palette.md. */
.kbc-onair {
	display: flex;
	align-items: stretch;
	max-width: var( --kbn-max-page );
	margin: 8px auto 0;
	background: #CE1126; /* Philippines flag red — radio on-air state */
	color: #fff;
	font-family: var( --kbn-font-display, system-ui, sans-serif );
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.kbc-onair[hidden] { display: none; }
.kbc-onair__badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 8px 18px;
	/* Flag blue on the badge segment so the strip carries both flag colours
	   side-by-side (red main + blue badge) — distinctly Filipino, not just
	   generic broadcast-red. */
	background: linear-gradient(90deg, #002878 0%, #0038A8 70%, transparent 100%);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.kbc-onair__main {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 16px;
	color: #fff;
	text-decoration: none;
	min-width: 0;
	cursor: pointer;
}
.kbc-onair__main:hover { background: rgba(255,255,255,0.04); }
.kbc-onair__avatar {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: #6e0a17 center/cover no-repeat; /* dark flag-red shade as placeholder */
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.kbc-onair__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.kbc-onair__sep {
	font-size: 14px;
	opacity: 0.45;
	flex-shrink: 0;
}
.kbc-onair__slot {
	font-size: 12.5px;
	font-weight: 500;
	opacity: 0.85;
	white-space: nowrap;
	flex-shrink: 0;
}
@media (max-width: 900px) {
	.kbc-onair { margin: 6px 16px 0; }
	.kbc-onair__badge { padding: 6px 12px; font-size: 11px; }
	.kbc-onair__main { padding: 5px 12px; gap: 10px; }
	.kbc-onair__sep, .kbc-onair__slot { display: none; }
}
@media (max-width: 480px) {
	.kbc-onair { margin: 4px 12px 0; }
	.kbc-onair__avatar { width: 30px; height: 30px; }
	.kbc-onair__title { font-size: 13px; }
}

.kbc-radio-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90000;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: center;
	padding: 10px 16px;
	/* Honour iOS safe-area-inset (home-bar gap) and Android nav gestures. */
	padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	background: var( --kbn-ink );
	color: var( --kbn-canvas );
	box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
	font-family: var( --kbn-font, system-ui, sans-serif );
	font-size: 13.5px;
	/* Disable iOS double-tap zoom on the bar so taps register instantly. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
/* Thumb slot. Holds the live YT iframe at small size in Listen mode
   (animated preview). When user switches to Watch, the iframe escapes to
   the floating panel and the slot shows a STATIC thumbnail (the video's
   own YouTube poster image) underneath so the bar never looks empty. */
.kbc-radio-bar__thumb {
	position: relative;
	width: 160px;
	height: 90px;
	border-radius: 4px;
	overflow: hidden;
	background: #000 center/cover no-repeat;
	flex-shrink: 0;
}
.kbc-radio-bar__meta {
	min-width: 0;
	flex: 1;
	overflow: hidden;
}
.kbc-radio-bar__title-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.kbc-radio-bar__title {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Live-broadcast dot — pulses flag-red ONLY when an actual live event is on
   air (kind=live_*). Stays hidden during scheduled programming + filler so
   it never lies about the broadcast state. */
.kbc-radio-bar__live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #CE1126;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(206,17,38,0.7);
	animation: kbc-radio-live-pulse 1.6s infinite;
}
.kbc-radio-bar__live-dot[hidden] { display: none; }
@keyframes kbc-radio-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(206,17,38,0.7); }
	70%  { box-shadow: 0 0 0 8px rgba(206,17,38,0); }
	100% { box-shadow: 0 0 0 0 rgba(206,17,38,0); }
}
.kbc-radio-bar__sub {
	font-size: 12px;
	opacity: 0.75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kbc-radio-bar__chips {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.kbc-radio-chip {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.kbc-radio-chip:hover { opacity: 0.85; }
.kbc-radio-chip--fb { background: #1877f2; }
.kbc-radio-chip--ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.kbc-radio-bar__btn {
	/* 44×44 = iOS Human Interface Guidelines minimum tap target. */
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.08);
	color: var( --kbn-canvas );
	cursor: pointer;
	font-size: 16px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}
.kbc-radio-bar__btn:hover { background: rgba(255,255,255,0.18); }
.kbc-radio-bar__btn[disabled] { cursor: not-allowed; }
.kbc-radio-bar__close { background: transparent; border-color: transparent; opacity: 0.7; }
.kbc-radio-bar__close:hover { opacity: 1; }

/* Listen / Watch pill — segmented control sized for one-handed mobile use. */
.kbc-radio-bar__modes {
	display: inline-flex;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255,255,255,0.06);
}
.kbc-radio-bar__mode-btn {
	border: 0;
	background: transparent;
	color: rgba(255,255,255,0.7);
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.kbc-radio-bar__mode-btn.is-active {
	background: #0038A8; /* Philippines flag blue — same as site-wide primary blue */
	color: #fff;
	font-weight: 600;
}
@media (max-width: 640px) {
	.kbc-radio-bar__mode-btn { padding: 6px 10px; font-size: 12px; }
}

/* YouTube iframe lives BEHIND the cover-art in audio mode (z-index:1) —
   still rendered, still plays. When user picks Watch, .is-video escapes
   the thumb slot via position:fixed and floats above the bar at full size. */
.kbc-radio-bar__yt {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
}
/* iframe target slot — also serves as the layout reference for the
   branded overlay strip stacked on top. */
.kbc-radio-bar__yt-iframe { position: absolute; inset: 0; }
.kbc-radio-bar__yt iframe {
	width: 100% !important; height: 100% !important;
	border: 0; display: block;
	/* Suppress all YouTube hover tooltips, end-screen suggestions, "Watch
	   on YouTube" links, etc. We expose our own play/pause/mode controls
	   in the bar and our own fullscreen via the maximize button, so the
	   iframe never needs to receive pointer events. */
	pointer-events: none;
}

/* Custom Kababayan Connect brand strip — overlaid at the bottom of the
   player to cover YouTube's persistent watermark and signal that this is
   our custom radio player. */
.kbc-radio-bar__brand {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 4px 8px;
	background: linear-gradient( to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4) 60%, transparent );
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	pointer-events: none;
	z-index: 5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* In small thumb mode the strip is tighter — just enough to hide the YT logo. */
.kbc-radio-bar__yt:not(.is-video) .kbc-radio-bar__brand {
	font-size: 9px;
	padding: 2px 6px;
	letter-spacing: 0.02em;
}

/* Native fullscreen styling — fill the viewport. */
.kbc-radio-bar__yt:fullscreen,
.kbc-radio-bar__yt:-webkit-full-screen { width: 100vw; height: 100vh; right: 0; bottom: 0; border-radius: 0; }
.kbc-radio-bar__yt:fullscreen .kbc-radio-bar__brand { font-size: 16px; padding: 12px 20px; }
.kbc-radio-bar__yt.is-video {
	position: fixed;
	inset: auto;
	right: 16px;
	bottom: calc( 92px + env( safe-area-inset-bottom, 0px ) );
	width: 360px;
	height: 200px;
	border-radius: 6px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.45);
	z-index: 90001;
}
@media (max-width: 640px) {
	.kbc-radio-bar__thumb { width: 96px; height: 54px; }
	.kbc-radio-bar__yt.is-video { width: 92vw; right: 4vw; height: calc( 92vw * 9 / 16 ); }
}

/* "Tap to unmute" pulsing cue ─ shown until the user unmutes the player
   for the first time. */
.kbc-radio-bar__btn[data-kbc="mute"].is-pulsing::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid #fff;
	animation: kbc-radio-mute-pulse 1.4s infinite;
	pointer-events: none;
}
.kbc-radio-bar__btn[data-kbc="mute"] { position: relative; }
@keyframes kbc-radio-mute-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); opacity: 1; }
	70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); opacity: 0.4; }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; }
}

/* Push the page up so the fixed bar doesn't cover footer content. */
body:has( .kbc-radio-bar ) { padding-bottom: 84px; }

/* Top-bar Livestream button. Philippines flag red gradient + inline play
   icon. Paired with .kbn-btn--live in the topbar. The flag red is a
   bounded exception to the site-wide "red = disputed only" rule —
   broadcast on-air state is temporal, not a trust claim. */
.kbn-btn--live {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #CE1126, #a30d1d) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.kbn-btn--live:hover { filter: brightness(1.08); }
.kbn-btn--live__icon {
	flex-shrink: 0;
	display: inline-block;
}
@keyframes kbc-radio-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
	70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Tablet (640–960): tighten gap. */
@media (max-width: 960px) {
	.kbc-radio-bar { gap: 8px; padding: 10px 14px; }
}

/* Mobile (<640): drop sub-line + expand link, slimmer art. */
@media (max-width: 640px) {
	.kbc-radio-bar { gap: 6px; padding: 8px 10px; }
	.kbc-radio-bar__art { width: 44px; height: 44px; }
	.kbc-radio-bar__sub { display: none; }
	.kbc-radio-bar__chips { margin-top: 2px; }
	.kbc-radio-bar__expand { display: none; }
	.kbc-radio-bar__btn { width: 40px; height: 40px; font-size: 15px; }
}

/* Tiny phones (<420): hide the mode pill so the bar fits comfortably.
   The /live/ page still has the audio/video toggle. */
@media (max-width: 420px) {
	.kbc-radio-bar__modes { display: none; }
	.kbc-radio-bar__art { display: none; }
}