/**
 * Engagement OS — the engagement layer for full-viewport players.
 *
 * Portable by design: no framework, no WordPress, no theme selectors. Mount it
 * inside any positioned player stage (the WWP story/reel viewer, CPC's reels
 * shell) and it lays itself out inside that stage, not the page.
 *
 * Layout inside the stage (bottom-up, so nothing overlaps at any height):
 *   comment bar  — pinned to the bottom edge
 *   rail         — right edge, sitting ON the comment bar, growing upward
 *   info column  — left, above the comment bar, clear of the rail
 *   comments     — a sheet that slides up over the lower stage
 *
 * The layer itself ignores pointer events so a host's tap-to-advance and
 * hold-to-pause keep working everywhere that is not a control.
 */

.eos-layer {
	--eos-glass: rgba( 18, 18, 24, 0.62 );
	--eos-glass-strong: rgba( 18, 18, 24, 0.94 );
	--eos-border: rgba( 255, 255, 255, 0.16 );
	--eos-text: #e4e1ea;
	--eos-muted: #b9cacb;
	--eos-blue: #00f0ff;
	--eos-purple: #ad00ff;
	--eos-red: #ff3b5c;
	--eos-surface: #1f1f25;
	--eos-surface-low: #1b1b21;
	--eos-gutter: 12px;
	--eos-rail: 56px;
	--eos-bar: 46px;
	--eos-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--eos-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	font-family: var( --eos-font );
	color: var( --eos-text );
	-webkit-font-smoothing: antialiased;
}
.eos-layer *,
.eos-layer *::before,
.eos-layer *::after {
	box-sizing: border-box;
}
.eos-layer button,
.eos-layer input,
.eos-layer a {
	pointer-events: auto;
	font-family: inherit;
}
.eos-layer [hidden] {
	display: none !important;
}

/* Legibility scrim: the lower third darkens so white text reads on any frame. */
.eos-scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	background: linear-gradient( to bottom, rgba( 8, 8, 10, 0 ) 0%, rgba( 8, 8, 10, 0.55 ) 55%, rgba( 8, 8, 10, 0.85 ) 100% );
}

.eos-glass {
	background: var( --eos-glass );
	border: 1px solid var( --eos-border );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
}
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.eos-glass {
		background: var( --eos-glass-strong );
	}
}

/* --- rail --------------------------------------------------------------- */
.eos-rail {
	position: absolute;
	right: calc( var( --eos-gutter ) - 4px );
	bottom: calc( var( --eos-bar ) + var( --eos-gutter ) * 2 + env( safe-area-inset-bottom, 0px ) );
	width: var( --eos-rail );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.eos-act {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --eos-text );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.eos-act-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.5 );
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.eos-act:hover .eos-act-icon {
	background: var( --eos-border );
}
.eos-act:active .eos-act-icon {
	transform: scale( 0.92 );
}
.eos-act svg {
	width: 22px;
	height: 22px;
}
.eos-act-count {
	font-family: var( --eos-mono );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.8 );
}
.eos-like.is-on .eos-act-icon {
	color: var( --eos-red );
}
.eos-like.is-on svg path {
	fill: currentColor;
}
.eos-save.is-on .eos-act-icon {
	color: var( --eos-purple );
}
.eos-save.is-on svg path {
	fill: currentColor;
}
.eos-disc {
	position: relative;
	width: 46px;
	height: 46px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	/* Vinyl: near-black with fine grooves and a soft sheen. */
	background:
		radial-gradient( circle at 30% 25%, rgba( 255, 255, 255, 0.18 ), transparent 42% ),
		repeating-radial-gradient( circle, #111 0 1.2px, #1d1d22 1.2px 2.4px ),
		#0b0b0e;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.6 ), inset 0 0 0 1px rgba( 255, 255, 255, 0.12 );
	/* The record always rotates, paused or not. */
	animation: eos-spin 6s linear infinite;
}
/* The label art is the record's centre. A percentage of the record, so it
   scales with it wherever the record is drawn; 72% keeps the art readable at
   rail size while leaving a ring of grooves. */
.eos-disc img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72%;
	height: 72%;
	margin: -36% 0 0 -36%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.55 );
}
/* Spindle hole. */
.eos-disc::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: #0b0b0e;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.25 );
}
@keyframes eos-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* --- info column -------------------------------------------------------- */
.eos-info {
	position: absolute;
	left: var( --eos-gutter );
	right: calc( var( --eos-rail ) + var( --eos-gutter ) * 1.5 );
	bottom: calc( var( --eos-bar ) + var( --eos-gutter ) * 2 + env( safe-area-inset-bottom, 0px ) );
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eos-ad {
	position: relative;
	z-index: 0;
	max-width: 300px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 60px rgba( 0, 0, 0, 0.25 );
	/* Lighter than the other glass: the video should read through the ad. */
	background: rgba( 18, 18, 24, 0.34 );
	/* Waits beneath the creator lockup, then rises into place. */
	opacity: 0;
	transform: translateY( 70px );
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}
.eos-ad.is-in {
	opacity: 1;
	transform: translateY( 0 );
}
.eos-layer .eos-ad.is-in a,
.eos-layer .eos-ad.is-in button {
	pointer-events: auto;
}
.eos-layer .eos-ad:not( .is-in ) a,
.eos-layer .eos-ad:not( .is-in ) button {
	pointer-events: none;
}
.eos-ad::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to right, rgba( 0, 240, 255, 0.1 ), transparent );
	pointer-events: none;
}
.eos-ad-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 26px 8px 8px;
	color: var( --eos-text );
	text-decoration: none;
}
.eos-ad-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid var( --eos-border );
	background: #2a2930 center / cover no-repeat;
}
.eos-ad-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.eos-ad-label {
	font-family: var( --eos-mono );
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --eos-blue );
}
/* The teaser: two lines, then an ellipsis. */
.eos-ad-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
}
.eos-ad-cta {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	padding: 5px 9px;
	border-radius: 8px;
	border: 1px solid var( --eos-border );
	background: rgba( 27, 27, 33, 0.5 );
	font-family: var( --eos-mono );
	font-size: 11px;
	white-space: nowrap;
}
.eos-ad-close {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: var( --eos-text );
	font-size: 15px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}
.eos-ad-close:hover {
	background: rgba( 0, 0, 0, 0.7 );
}

.eos-lockup {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.eos-avatar {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 2px;
	border-radius: 50%;
	border: 2px solid var( --eos-blue );
	color: inherit;
	text-decoration: none;
}
.eos-avatar img,
.eos-avatar span {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --eos-surface );
	font-weight: 700;
	font-size: 14px;
}
.eos-verified {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var( --eos-blue );
	border: 1px solid #131319;
	color: #08080a;
	display: flex;
	align-items: center;
	justify-content: center;
}
.eos-verified svg {
	width: 9px;
	height: 9px;
}
.eos-who {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.eos-name {
	display: block;
	color: inherit;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.7 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eos-name[href]:hover {
	text-decoration: underline;
}
.eos-sub {
	font-size: 12px;
	color: var( --eos-muted );
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.7 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eos-follow {
	flex: 0 0 auto;
	margin-left: 4px;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var( --eos-border );
	background: transparent;
	color: var( --eos-text );
	font-family: var( --eos-mono );
	font-size: 11px;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 12px );
	backdrop-filter: blur( 12px );
}
.eos-follow:hover {
	background: var( --eos-border );
}
.eos-follow.is-on {
	border-color: var( --eos-blue );
	color: var( --eos-blue );
}

.eos-caption {
	font-size: 13px;
	line-height: 1.4;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.8 );
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}

/* --- comment bar -------------------------------------------------------- */
.eos-bar {
	position: absolute;
	left: var( --eos-gutter );
	right: var( --eos-gutter );
	bottom: calc( var( --eos-gutter ) + env( safe-area-inset-bottom, 0px ) );
	height: var( --eos-bar );
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px 0 18px;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.4 );
	z-index: 3;
}
/* Host themes style every input; the bar must look the same everywhere. */
.eos-layer .eos-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	color: var( --eos-text );
	font-size: 14px;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}
.eos-input::placeholder {
	color: rgba( 255, 255, 255, 0.7 );
}
.eos-send {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --eos-muted );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.eos-send:hover,
.eos-send:focus-visible {
	color: var( --eos-blue );
}
.eos-send svg {
	width: 20px;
	height: 20px;
}

/* Tools show while the bar is empty; send takes their place once there is text. */
.eos-tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 2px;
}
.eos-tool {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --eos-muted );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s ease;
}
.eos-tool:hover,
.eos-tool:focus-visible {
	color: var( --eos-blue );
}
.eos-tool svg {
	width: 21px;
	height: 21px;
}
.eos-bar .eos-send {
	display: none;
}
.eos-bar.has-text .eos-send {
	display: flex;
}
.eos-bar.has-text .eos-tools {
	display: none;
}

.eos-palette {
	position: absolute;
	right: var( --eos-gutter );
	bottom: calc( var( --eos-bar ) + var( --eos-gutter ) * 1.6 + env( safe-area-inset-bottom, 0px ) );
	z-index: 4;
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 2px;
	padding: 8px;
	border-radius: 14px;
	pointer-events: auto;
	box-shadow: 0 18px 60px rgba( 0, 0, 0, 0.45 );
}
.eos-emoji {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.eos-emoji:hover {
	background: var( --eos-border );
}

/* --- comments sheet ----------------------------------------------------- */
.eos-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 62%;
	display: flex;
	flex-direction: column;
	border-radius: 18px 18px 0 0;
	border-bottom: 0;
	pointer-events: auto;
	transform: translateY( 100% );
	transition: transform 0.25s ease;
	z-index: 2;
}
/* The playlist picker is also an .eos-sheet; only the comments sheet opens here. */
.eos-layer.is-sheet .eos-sheet:not( .eos-picker ) {
	transform: translateY( 0 );
}
.eos-layer.is-sheet .eos-rail,
.eos-layer.is-sheet .eos-info {
	opacity: 0;
	pointer-events: none;
}
.eos-layer.is-sheet .eos-rail button,
.eos-layer.is-sheet .eos-info a,
.eos-layer.is-sheet .eos-info button {
	pointer-events: none;
}
.eos-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px 8px;
	font-family: var( --eos-mono );
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --eos-muted );
}
.eos-sheet-close {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var( --eos-border );
	color: var( --eos-text );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.eos-sheet-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 14px calc( var( --eos-bar ) + var( --eos-gutter ) * 2 );
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.eos-comment {
	display: flex;
	gap: 10px;
	padding: 8px 0;
}
.eos-comment-av {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --eos-surface );
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}
.eos-comment-name {
	font-size: 12px;
	font-weight: 700;
	color: var( --eos-muted );
}
.eos-comment-text {
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.eos-empty {
	padding: 18px 0;
	text-align: center;
	color: var( --eos-muted );
	font-size: 13px;
}

/* --- extra rail actions --- */
.eos-gift.is-buy .eos-act-icon {
	color: #39ff14;
}
.eos-gift.is-buy .eos-act-count {
	color: #39ff14;
	font-weight: 700;
}
.eos-labelfollow.is-on .eos-act-icon {
	color: var( --eos-blue );
}

/* --- playlist picker (same sheet as comments) --- */
.eos-layer.is-picker .eos-picker {
	transform: translateY( 0 );
}
.eos-layer.is-picker .eos-rail,
.eos-layer.is-picker .eos-info,
.eos-layer.is-picker .eos-bar {
	opacity: 0;
	pointer-events: none;
}
.eos-layer.is-picker .eos-rail button,
.eos-layer.is-picker .eos-info a,
.eos-layer.is-picker .eos-info button,
.eos-layer.is-picker .eos-bar button,
.eos-layer.is-picker .eos-bar input {
	pointer-events: none;
}
.eos-picker {
	z-index: 4;
}
.eos-picker-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 10px;
	overscroll-behavior: contain;
}
.eos-picker-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 6px;
	border: 0;
	border-bottom: 1px solid var( --eos-border );
	background: transparent;
	color: var( --eos-text );
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}
.eos-picker-check {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid var( --eos-border );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #08080a;
}
.eos-picker-row.is-on .eos-picker-check {
	background: var( --eos-blue );
	border-color: var( --eos-blue );
}
.eos-picker-check svg {
	width: 14px;
	height: 14px;
}
.eos-picker-new {
	display: flex;
	gap: 8px;
	padding: 10px 14px calc( 14px + env( safe-area-inset-bottom, 0px ) );
}
.eos-picker-new .eos-input {
	height: 40px;
	padding: 0 14px !important;
	border: 1px solid var( --eos-border ) !important;
	border-radius: 999px !important;
}
.eos-picker-create {
	flex: 0 0 auto;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var( --eos-blue );
	color: #08080a;
	font-family: var( --eos-mono );
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

/* Many actions on the rail: tighten the spacing on tall-but-narrow stages. */
.eos-rail {
	gap: 10px;
}

/* Short stages (landscape phones, small desktop windows): tighter rail, one-line caption. */
@container ( max-height: 560px ) {
	.eos-rail {
		gap: 8px;
	}
	.eos-act-icon {
		width: 36px;
		height: 36px;
	}
	.eos-disc,
	.eos-ad {
		display: none;
	}
	.eos-caption {
		-webkit-line-clamp: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.eos-ad {
		transition: opacity 0.2s ease;
		transform: none;
	}
	.eos-sheet {
		transition: none;
	}
}