/**
 * Facebook-style story viewer (child theme).
 * Loaded only when Customizer -> Stories -> Story player is "Enhanced".
 */

html.kcs-open,
html.kcs-open body {
	overflow: hidden;
}

.kcs-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.92 );
	backdrop-filter: blur( 6px );
}
.kcs-viewer[hidden] {
	display: none !important;
}

/* 9:16 column on desktop, full-bleed on phones. container-type lets the text
   overlays scale with the stage using cqh units instead of viewport units. */
.kcs-stage {
	position: relative;
	width: min( 100vw, 56.25vh );
	height: min( 100dvh, 177.78vw );
	max-height: 100dvh;
	overflow: hidden;
	background: #000;
	border-radius: 14px;
	container-type: size;
}
@media ( max-width: 700px ) {
	.kcs-stage {
		width: 100vw;
		height: 100dvh;
		border-radius: 0;
	}
}

/* --- media --- */
.kcs-media {
	position: absolute;
	inset: 0;
}
.kcs-video,
.kcs-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- text overlays ---
   Authored on a 424x713 canvas with centre origin, which is why every node is
   offset by -50%,-50% before its own scale/rotate is applied. */
.kcs-texts {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.kcs-text {
	position: absolute;
	margin: 0;
	line-height: 1.15;
	white-space: pre-wrap;
	word-break: break-word;
	transform-origin: center center;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.45 );
}
.kcs-text.has-bg {
	padding: 0 0.5em 0.12em;
	border-radius: 8px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-shadow: none;
}

/* --- progress bars --- */
.kcs-bars {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 4;
	display: flex;
	gap: 4px;
}
.kcs-bar {
	flex: 1 1 0;
	height: 3px;
	border-radius: 3px;
	background: rgba( 255, 255, 255, 0.35 );
	overflow: hidden;
}
.kcs-fill {
	display: block;
	width: 0;
	height: 100%;
	background: #fff;
}

/* --- header --- */
.kcs-head {
	position: absolute;
	top: 22px;
	left: 10px;
	right: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	pointer-events: none;
}
.kcs-who {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.kcs-avatar {
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba( 255, 255, 255, 0.9 );
	flex: 0 0 auto;
}
.kcs-name {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.6 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kcs-close {
	pointer-events: auto;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.4 );
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.kcs-close:hover {
	background: rgba( 0, 0, 0, 0.65 );
}

/* --- tap zones ---
   Deliberately below the header (z-index 3 vs 5) so the close button stays
   clickable, and transparent so they never obscure the slide. */
.kcs-tap {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32%;
	z-index: 3;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kcs-tap-prev {
	left: 0;
}
.kcs-tap-next {
	right: 0;
	width: 68%;
}

/* --- paused --- */
.kcs-viewer.is-paused .kcs-bars,
.kcs-viewer.is-paused .kcs-head {
	opacity: 0.25;
	transition: opacity 0.2s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.kcs-fill {
		transition: none !important;
	}
}

/* --- audio slide ---
   ID3 cover art is square; the stage is 9:16. Rather than letterbox, the art is
   also painted blurred and over-scaled behind itself to fill the frame. */
.kcs-audio-bg {
	position: absolute;
	inset: -10%;
	background-size: cover;
	background-position: center;
	filter: blur( 34px ) saturate( 1.3 ) brightness( 0.55 );
	transform: scale( 1.15 );
}
.kcs-audio-art {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: min( 72%, 340px );
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.55 );
}
.kcs-audio-track {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 12%;
	text-align: center;
	color: #fff;
	font-weight: 600;
	font-size: 2.1cqh;
	line-height: 1.3;
	text-shadow: 0 2px 14px rgba( 0, 0, 0, 0.7 );
}
.kcs-audio-slide,
.kcs-audio {
	display: none;
}

/* --- playback controls ---
   z-index 6 puts them above the tap zones (3) and the header (5) so a click
   here never advances the slide. */
.kcs-ctrls {
	position: absolute;
	right: 10px;
	bottom: 12px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 6px;
	border-radius: 999px;
	/* Glass, not a slab: the video stays visible through the volume pill. */
	background: rgba( 18, 18, 24, 0.22 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	-webkit-backdrop-filter: blur( 14px ) saturate( 1.4 );
	backdrop-filter: blur( 14px ) saturate( 1.4 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
	transition: opacity 0.45s ease;
}
/* Fades after 5s without a touch or mouse move; any interaction brings it back.
   Stays up while paused, when it is needed to resume. */
.kcs-ctrls.is-idle {
	opacity: 0;
}
.kcs-ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}
.kcs-ctrl:hover {
	background: rgba( 255, 255, 255, 0.18 );
}

/* Volume stays narrow so it never crowds a phone stage. */
.kcs-vol {
	width: 84px;
	height: 4px;
	accent-color: #fff;
	cursor: pointer;
}
@media ( max-width: 480px ) {
	.kcs-vol {
		width: 60px;
	}
}

/* Controls must stay usable while paused, so they are exempt from the
   dimming applied to the bars and header. */
.kcs-viewer.is-paused .kcs-ctrls {
	opacity: 1;
}

/* --- story background layer (image or animation) ---
   Sits behind the media so an audio slide, or any slide with transparent
   media, can have a custom backdrop instead of flat colour. */
.kcs-bg-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}
.kcs-bg-layer video,
.kcs-bg-layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kcs-media {
	z-index: 1;
}

.kcs-toast {
	position: absolute;
	left: 50%;
	bottom: 74px;
	transform: translateX( -50% );
	z-index: 7;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.75 );
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
	pointer-events: none;
}

/* --- reel footprint ---
   Same viewer, wider stage. Reels run longer and carry comments/likes, so they
   get more room than a story without becoming a second component. */
.kcs-viewer.is-reel .kcs-stage {
	width: min( 100vw, 72vh );
	height: min( 100dvh, 138.9vw );
}
@media ( max-width: 700px ) {
	.kcs-viewer.is-reel .kcs-stage {
		width: 100vw;
		height: 100dvh;
	}
}

/* Music credit — the attribution half of the cross-promotion deal, so it sits
   above the tap zones and is always clickable through to the artist. */
.kcs-music-credit {
	position: absolute;
	left: 12px;
	bottom: 14px;
	z-index: 6;
	max-width: 58%;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.45 );
	backdrop-filter: blur( 8px );
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.kcs-music-credit:hover { background: rgba( 0, 0, 0, 0.7 ); }

/* A YouTube slide is an iframe, so it needs the same box as .kcs-video but
   NOT object-fit, which does nothing to an iframe's own content. The player
   letterboxes inside the frame instead - correct for a Short, whose 9:16 is
   already the stage's shape, and honest for a 16:9 video that genuinely does
   not fill a phone screen. border:0 because an iframe brings one. */
.kcs-youtube {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	background: #000;
}

/* --- waiting for a sequence --------------------------------------------
   The sequence endpoint takes ~3s on this install, because WordPress
   bootstrap here does (31 active plugins; /wp-json/ alone is ~3s). Without
   this the tap does nothing at all for three seconds, which is how "stories
   don't work" was reported - the stories were fine, the silence was not.

   A fixed overlay rather than a spinner on the card: the card may be
   half-scrolled off, and the point is to say the TAP LANDED. */
.kcs-loading::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba( 0, 0, 0, 0.45 );
	backdrop-filter: blur( 2px );
	pointer-events: none;
}
.kcs-loading::before {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100001;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid rgba( 255, 255, 255, 0.25 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: kcs-spin 0.8s linear infinite;
	pointer-events: none;
}
@keyframes kcs-spin { to { transform: rotate( 360deg ); } }

/* Reduced motion gets a steady ring rather than none at all - the point is
   to show the tap landed, and a missing indicator loses that entirely. */
@media ( prefers-reduced-motion: reduce ) {
	.kcs-loading::before { animation: none; border-top-color: rgba( 255, 255, 255, 0.7 ); }
}

/* A slide whose media is gone. Legible on the slide's own background, which
   is usually the King demo import's #94959c. */
.kcs-unavailable {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	text-align: center;
	font: 500 14px/1.5 system-ui, -apple-system, sans-serif;
	color: rgba( 255, 255, 255, 0.82 );
	background: rgba( 0, 0, 0, 0.45 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.7 );
}

/* --- engagement layer (engagement-os.css) ---
   The layer owns the lower stage and the right edge, so the playback
   controls move up under the header, and the duplicate share button and
   music credit give way to the rail's share and spinning disc. */
.kcs-viewer.has-eos .kcs-head {
	justify-content: flex-end;
}
/* Playback pill: top-right, under the close button. The top-left corner
   belongs to the label chip (.kcs-corner). */
.kcs-viewer.has-eos .kcs-ctrls {
	/* Below the label chip (46 + 62px), so the two never touch. */
	top: 116px;
	bottom: auto;
	right: 10px;
	left: auto;
	padding-top: 6px;
	padding-bottom: 6px;
}
.kcs-viewer.has-eos .kcs-share,
.kcs-viewer.has-eos .kcs-music-credit,
.kcs-viewer.has-eos .kcs-who {
	display: none;
}

/* --- corner chip ---
   Our record label (or the current ad) holds the top-left corner on every
   slide, all the time — the corner where YouTube's embed draws its own tags.
   Flush with the left edge and starting high enough that nothing of the
   embed's tag shows around it. */
.kcs-corner {
	position: absolute;
	top: 46px;
	left: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 62px;
	max-width: 210px;
	padding: 0 16px 0 12px;
	border-radius: 0 999px 999px 0;
	background: rgba( 18, 18, 24, 0.3 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-left: 0;
	-webkit-backdrop-filter: blur( 14px ) saturate( 1.4 );
	backdrop-filter: blur( 14px ) saturate( 1.4 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
	color: #fff;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.kcs-viewer .kcs-corner.has-content {
	opacity: 1;
	pointer-events: auto;
}
.kcs-corner-art {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.5 );
	animation: eos-spin 6s linear infinite;
}
.kcs-corner.is-ad .kcs-corner-art {
	border-radius: 8px;
	animation: none;
}
.kcs-corner-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.kcs-corner-kicker {
	font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #00f0ff;
}
.kcs-corner-name {
	font-size: 12px;
	font-weight: 700;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* --- rolling ---
   The incoming slide slides in from the direction of the swipe: stories
   sideways, reels vertically. */
.kcs-stage.roll-left .kcs-media { animation: kcs-roll-left 0.38s cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.kcs-stage.roll-right .kcs-media { animation: kcs-roll-right 0.38s cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.kcs-stage.roll-up .kcs-media { animation: kcs-roll-up 0.38s cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.kcs-stage.roll-down .kcs-media { animation: kcs-roll-down 0.38s cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
@keyframes kcs-roll-left { from { transform: translateX( 100% ); } to { transform: none; } }
@keyframes kcs-roll-right { from { transform: translateX( -100% ); } to { transform: none; } }
@keyframes kcs-roll-up { from { transform: translateY( 100% ); } to { transform: none; } }
@keyframes kcs-roll-down { from { transform: translateY( -100% ); } to { transform: none; } }
@media ( prefers-reduced-motion: reduce ) {
	.kcs-stage[class*="roll-"] .kcs-media { animation: none; }
}

/* --- ad between reels --- */
.kcs-ad-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.kcs-ad-slide-bg {
	position: absolute;
	inset: -10%;
	background: center / cover no-repeat;
	filter: blur( 34px ) saturate( 1.3 ) brightness( 0.5 );
	transform: scale( 1.1 );
}
.kcs-ad-slide-card {
	position: relative;
	width: min( 82%, 340px );
	padding: 22px 20px 20px;
	border-radius: 20px;
	text-align: center;
	color: #e4e1ea;
	background: rgba( 18, 18, 24, 0.45 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
	box-shadow: 0 18px 60px rgba( 0, 0, 0, 0.45 );
	font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.kcs-ad-slide-img {
	width: 132px;
	height: 132px;
	border-radius: 16px;
	object-fit: cover;
	display: block;
	margin: 0 auto 14px;
}
.kcs-ad-slide-label {
	font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #00f0ff;
}
.kcs-ad-slide-title {
	margin: 6px 0 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.kcs-ad-slide-cta {
	position: relative;
	z-index: 7;
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: #00f0ff;
	color: #08080a;
	font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.kcs-ad-slide-hint {
	position: absolute;
	bottom: 26px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 12px;
	color: rgba( 255, 255, 255, 0.7 );
}
/* The engagement rail, info column and comment bar step aside for the ad. */
.kcs-viewer.is-ad-slide .eos-rail,
.kcs-viewer.is-ad-slide .eos-info,
.kcs-viewer.is-ad-slide .eos-bar,
.kcs-viewer.is-ad-slide .eos-scrim {
	display: none;
}

/* Release badges in the chip's kicker: World Premiere and Exclusive in gold,
   Remix in red. Each badge is its own word; the separator stays neutral. */
.kcs-corner-kicker.has-badges {
	color: rgba( 255, 255, 255, 0.55 );
	font-weight: 700;
	letter-spacing: 0.16em;
}
.kcs-corner-kicker .is-gold {
	color: #f5c542;
	background: linear-gradient( 90deg, #fbe29a 0%, #f5c542 45%, #d99a1e 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow( 0 0 4px rgba( 245, 197, 66, 0.35 ) );
}
.kcs-corner-kicker .is-red {
	color: #ff3b3b;
	text-shadow: 0 0 6px rgba( 255, 59, 59, 0.45 );
}

/* --- transitions between slides ---
   The outgoing slide stays on top as .kcs-media-out, still playing, and
   exits once the incoming one has started (see swapMedia() in the viewer).
   --kcs-tms is the Customizer's transition length. */
.kcs-media-out {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	will-change: opacity, transform, filter;
}
.kcs-media-out.tx-flow { animation: kcs-flow-out var( --kcs-tms, 700ms ) cubic-bezier( 0.4, 0, 0.2, 1 ) forwards; }
.kcs-media.tx-in-flow { animation: kcs-flow-in var( --kcs-tms, 700ms ) cubic-bezier( 0.2, 0.7, 0.2, 1 ); }
.kcs-media-out.tx-dissolve { animation: kcs-dissolve-out var( --kcs-tms, 700ms ) linear forwards; }
.kcs-media-out.tx-dip { animation: kcs-dip-out var( --kcs-tms, 700ms ) ease-in-out forwards; }
.kcs-media.tx-in-dip { animation: kcs-dip-in var( --kcs-tms, 700ms ) ease-in-out; }
.kcs-media-out.tx-push-left { animation: kcs-push-left var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ) forwards; }
.kcs-media-out.tx-push-right { animation: kcs-push-right var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ) forwards; }
.kcs-media-out.tx-push-up { animation: kcs-push-up var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ) forwards; }
.kcs-media-out.tx-push-down { animation: kcs-push-down var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ) forwards; }
.kcs-media.tx-in-push-left { animation: kcs-roll-left var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.kcs-media.tx-in-push-right { animation: kcs-roll-right var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.kcs-media.tx-in-push-up { animation: kcs-roll-up var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.kcs-media.tx-in-push-down { animation: kcs-roll-down var( --kcs-tms, 380ms ) cubic-bezier( 0.2, 0.8, 0.2, 1 ); }

@keyframes kcs-flow-out {
	from { opacity: 1; transform: none; filter: none; }
	to { opacity: 0; transform: scale( 1.08 ); filter: blur( 6px ); }
}
@keyframes kcs-flow-in {
	from { transform: scale( 1.05 ); }
	to { transform: none; }
}
@keyframes kcs-dissolve-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kcs-dip-out {
	0% { opacity: 1; filter: brightness( 1 ); }
	50% { opacity: 1; filter: brightness( 0 ); }
	51%, 100% { opacity: 0; filter: brightness( 0 ); }
}
@keyframes kcs-dip-in {
	0%, 50% { filter: brightness( 0 ); }
	100% { filter: brightness( 1 ); }
}
@keyframes kcs-push-left { to { transform: translateX( -100% ); } }
@keyframes kcs-push-right { to { transform: translateX( 100% ); } }
@keyframes kcs-push-up { to { transform: translateY( -100% ); } }
@keyframes kcs-push-down { to { transform: translateY( 100% ); } }

/* Text overlays wait for their slide, then fade in with it. */
.kcs-texts { transition: opacity var( --kcs-tms, 700ms ) ease; }
.kcs-texts.is-waiting { opacity: 0; transition: none; }

/* The "Read the story" end card: the video's 16:9 thumbnail shown whole and
   sharp near the top, over a softened fill of the same image. Fill blur and
   dimming come from Customizer -> Stories; the scale hides blurred edges. */
.kcs-outro-bg {
	position: absolute;
	inset: 0;
	background: #000 center / cover no-repeat;
	filter: blur( var( --kcs-outro-blur, 6px ) ) brightness( var( --kcs-outro-dim, 0.85 ) ) saturate( 1.15 );
	transform: scale( 1.08 );
}
.kcs-outro-art {
	position: absolute;
	left: 8%;
	top: 14%;
	width: 84%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.55 ), 0 0 0 1px rgba( 255, 255, 255, 0.08 );
}
/* Slide text sits under the media layer everywhere else (the engagement
   caption carries the title); on the end card it IS the content. */
/* Lifted clear of the engagement bar, which covers the lower quarter. */
.kcs-viewer.is-outro .kcs-texts { z-index: 4; transform: translateY( -20% ); }
.kcs-viewer.is-outro .kcs-text.is-cta { pointer-events: auto; cursor: pointer; font-weight: 700; border-radius: 999px; box-shadow: 0 6px 24px rgba( 212, 168, 75, 0.35 ); }
.kcs-viewer.is-outro .kcs-text.is-cta:hover { background-color: var( --wwp-gold-hi, #f6d27a ) !important; }

/* --- progress scrubber ---
   A hairline on the bottom edge, in the gutter under the comment bar; grows
   into a draggable bar with a time readout on hover/touch. */
.kcs-scrubber {
	position: absolute;
	left: 0;
	right: 0;
	bottom: env( safe-area-inset-bottom, 0px );
	z-index: 7;
	height: 11px;
	display: flex;
	align-items: flex-end;
	cursor: pointer;
	touch-action: none;
	outline: none;
}
.kcs-scrubber[hidden] { display: none; }
.kcs-scrubber-track {
	position: relative;
	width: 100%;
	height: 3px;
	background: rgba( 255, 255, 255, 0.22 );
	transition: height 0.15s ease;
}
.kcs-scrubber-fill {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform: scaleX( 0 );
	background: var( --wwp-gold, #d4a84b );
}
.kcs-scrubber-thumb {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var( --wwp-gold-hi, #f6d27a );
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.5 );
	transform: scale( 0 );
	transition: transform 0.15s ease;
}
.kcs-scrubber-time {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX( -50% );
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.62 );
	backdrop-filter: blur( 8px );
	color: #fff;
	font: 600 12px/1.3 system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.kcs-scrubber:hover .kcs-scrubber-track,
.kcs-scrubber:focus-visible .kcs-scrubber-track,
.kcs-scrubber.is-scrubbing .kcs-scrubber-track { height: 6px; }
.kcs-scrubber:hover .kcs-scrubber-thumb,
.kcs-scrubber:focus-visible .kcs-scrubber-thumb,
.kcs-scrubber.is-scrubbing .kcs-scrubber-thumb { transform: scale( 1 ); }
.kcs-scrubber:hover .kcs-scrubber-time,
.kcs-scrubber:focus-visible .kcs-scrubber-time,
.kcs-scrubber.is-scrubbing .kcs-scrubber-time { opacity: 1; }

/* Shared chat dock (CPC): launcher chip below the header row. */
.kcs-stage .cpc-chat { --cpc-chat-launch-top: 72px; }