.cpc-action-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 0 1.25rem;
	color: #1f2933;
	font-size: 14px;
	line-height: 1.3;
}

.cpc-action-bar--direct {
	padding: 0 0.8rem 0.75rem;
	background: #111;
	color: #f7f7f7;
}

.cpc-action-bar--mvp {
	max-width: min(100%, 960px);
}

.cpc-action-bar--playlist {
	padding: 0 0.8rem 0.75rem;
	background: var(--cpc-playlist-surface, #111);
	color: var(--cpc-playlist-text, #f7f7f7);
}

.cpc-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 42px;
	height: 42px;
	min-height: 42px;
	padding: 0;
	border: 1px solid #cfd7df;
	border-radius: 999px;
	background: #fff;
	color: #18212b;
	font: inherit;
	cursor: pointer;
}

.cpc-action-button:hover,
.cpc-action-button:focus {
	border-color: #7a8da1;
	outline: none;
}

.cpc-action-button[aria-pressed="true"] {
	border-color: #0b67c2;
	background: #0b67c2;
	color: #fff;
}

.cpc-action-button[disabled] {
	cursor: not-allowed;
	opacity: 0.65;
}

.cpc-action-message {
	min-height: 1.3em;
	color: inherit;
	opacity: 0.8;
}

.cpc-action-icon {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
}

.cpc-action-bar--direct .cpc-action-button {
	border-color: #4b5563;
	background: #1f2937;
	color: #f9fafb;
}

.cpc-action-bar--direct .cpc-action-button[aria-pressed="true"] {
	border-color: #38bdf8;
	background: #0369a1;
}

.cpc-action-bar--playlist .cpc-action-button {
	border-color: rgb(255 255 255 / 28%);
	background: rgb(15 23 42 / 58%);
	color: #f9fafb;
	backdrop-filter: blur(8px);
}

.cpc-action-bar--playlist .cpc-action-button[aria-pressed="true"] {
	border-color: var(--cpc-playlist-accent, #38bdf8);
	background: rgb(15 23 42 / 68%);
	color: var(--cpc-playlist-accent, #38bdf8);
}

.cpc-playlist__stage .cpc-action-bar--playlist {
	position: absolute;
	right: max(0.75rem, env(safe-area-inset-right));
	bottom: max(4.5rem, env(safe-area-inset-bottom));
	z-index: 5;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff;
}

.cpc-playlist[data-cpc-actions-layout="horizontal"] .cpc-playlist__stage .cpc-action-bar--playlist {
	right: 50%;
	bottom: max(1rem, env(safe-area-inset-bottom));
	flex-direction: row;
	transform: translateX(50%);
}

.cpc-playlist__stage .cpc-action-bar--playlist .cpc-action-message {
	position: absolute;
	right: calc(100% + 0.5rem);
	bottom: 0;
	min-width: 9rem;
	padding: 0.35rem 0.55rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 45%);
	text-align: right;
	pointer-events: none;
}

.cpc-playlist {
	max-width: min(100%, 1080px);
	margin: 0 auto 1.5rem;
	background: var(--cpc-playlist-surface, #0b0f14);
	color: var(--cpc-playlist-text, #f8fafc);
}

.cpc-playlist--mvp-fallback {
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	margin-left: calc(50% - 50vw);
	background: #000;
}

.cpc-playlist__stage {
	position: relative;
	background: #000;
}

.cpc-playlist--mvp-fallback .cpc-playlist__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
}

.cpc-playlist__title {
	margin: 0;
	padding: 0.75rem 0.8rem;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.25;
	color: #f8fafc;
}

.cpc-playlist__media {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100svh - 2rem);
	background: #000;
	object-fit: contain;
	transition: opacity 0.18s ease, transform 0.18s ease;
	will-change: opacity, transform;
}

.cpc-playlist__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100svh - 2rem);
	background: #000;
	object-fit: contain;
	transition: opacity 0.18s ease, transform 0.18s ease;
	will-change: opacity, transform;
}

.cpc-playlist__media[hidden],
.cpc-playlist__image[hidden] {
	display: none;
}

.cpc-provider-shell {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	background: #000;
}

.cpc-provider-shell[data-cpc-provider-limited="1"] {
	background: #000;
}

.cpc-provider-shell[hidden] {
	display: none;
}

.cpc-provider-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.cpc-overlay-layer,
.cpc-engagement-layer,
.cpc-commerce-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cpc-overlay-layer {
	z-index: 3;
}

.cpc-engagement-layer {
	z-index: 4;
}

.cpc-commerce-layer {
	z-index: 5;
}

.cpc-provider-limit-note {
	position: absolute;
	left: 0.65rem;
	bottom: 0.65rem;
	z-index: 6;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
	background: rgb(15 23 42 / 74%);
	color: #fff;
	font-size: 0.68rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.cpc-playlist--mvp-fallback .cpc-playlist__media {
	height: 100svh;
	max-height: none;
	object-fit: contain;
}

.cpc-playlist--mvp-fallback .cpc-playlist__image {
	height: 100svh;
	max-height: none;
	object-fit: contain;
}

.cpc-playlist__music-credit {
	position: absolute;
	right: 5.25rem;
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: 0.75rem;
	z-index: 4;
	max-width: min(42rem, calc(100% - 6rem));
	padding: 0.45rem 0.65rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 38%);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.3;
	backdrop-filter: blur(8px);
	overflow-wrap: anywhere;
}

.cpc-playlist__music-credit[hidden] {
	display: none;
}

.cpc-playlist__current {
	position: absolute;
	right: 0.75rem;
	bottom: 1rem;
	left: 0.75rem;
	z-index: 4;
	padding: 0.65rem 0.8rem;
	border-radius: 8px;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--cpc-playlist-text, #e5e7eb);
	background: rgb(17 24 39 / 52%);
	backdrop-filter: blur(8px);
}

.cpc-playlist[data-cpc-show-current="0"] .cpc-playlist__current {
	display: none;
}

.cpc-playlist__nav {
	position: absolute;
	top: 50%;
	z-index: 14;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 54px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 6px;
	background: rgb(15 23 42 / 72%);
	color: #f8fafc;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

.cpc-playlist__nav-stack {
	position: absolute;
	top: 50%;
	left: calc(100% + clamp(0.8rem, 1.6vw, 1.1rem));
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	transform: translateY(-50%);
	pointer-events: auto;
}

.cpc-playlist__nav-stack .cpc-playlist__nav {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
}

.cpc-playlist__nav:hover,
.cpc-playlist__nav:focus {
	background: rgb(15 23 42 / 92%);
	outline: none;
}

.cpc-playlist__nav:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.cpc-playlist__nav--prev {
	left: 0.75rem;
}

.cpc-playlist__nav--next {
	right: 0.75rem;
}

.cpc-playlist--reels .cpc-playlist__nav--prev {
	left: auto;
	right: auto;
}

.cpc-playlist--reels .cpc-playlist__nav--next {
	left: auto;
	right: auto;
}

.cpc-playlist[data-cpc-show-nav="0"] .cpc-playlist__nav {
	display: none;
}

/* Item transitions. The outgoing item is frozen into .cpc-transition-ghost
   (canvas frame over its thumbnail) and exits once the next item has its
   first frame - see beginPlaylistTransition(). --cpc-tms is the admin
   transition length (Overview -> Reels appearance). */
.cpc-transition-ghost {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	background: #000 center / cover no-repeat;
	will-change: opacity, transform, filter;
}
.cpc-transition-ghost canvas,
.cpc-transition-ghost img {
	display: block;
	width: 100%;
	height: 100%;
}
.cpc-transition-ghost.is-out-flow { animation: cpc-tx-flow-out var(--cpc-tms, 700ms) cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.cpc-transition-ghost.is-out-dissolve { animation: cpc-tx-fade-out var(--cpc-tms, 700ms) linear forwards; }
.cpc-transition-ghost.is-out-dip { animation: cpc-tx-dip-out var(--cpc-tms, 700ms) ease-in-out forwards; }
.cpc-transition-ghost.is-out-slide-next { animation: cpc-tx-push-next var(--cpc-tms, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cpc-transition-ghost.is-out-slide-prev { animation: cpc-tx-push-prev var(--cpc-tms, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cpc-playlist__stage.cpc-tx-in-flow > .cpc-playlist__media:not([hidden]),
.cpc-playlist__stage.cpc-tx-in-flow > .cpc-playlist__image:not([hidden]) { animation: cpc-tx-flow-in var(--cpc-tms, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1); }
.cpc-playlist__stage.cpc-tx-in-dip > .cpc-playlist__media:not([hidden]),
.cpc-playlist__stage.cpc-tx-in-dip > .cpc-playlist__image:not([hidden]),
.cpc-playlist__stage.cpc-tx-in-dip > .cpc-provider-shell:not([hidden]) { animation: cpc-tx-dip-in var(--cpc-tms, 700ms) ease-in-out; }
.cpc-playlist__stage.cpc-tx-in-slide-next > .cpc-playlist__media:not([hidden]),
.cpc-playlist__stage.cpc-tx-in-slide-next > .cpc-playlist__image:not([hidden]) { animation: cpc-tx-enter-next var(--cpc-tms, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1); }
.cpc-playlist__stage.cpc-tx-in-slide-prev > .cpc-playlist__media:not([hidden]),
.cpc-playlist__stage.cpc-tx-in-slide-prev > .cpc-playlist__image:not([hidden]) { animation: cpc-tx-enter-prev var(--cpc-tms, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes cpc-tx-flow-out {
	from { opacity: 1; transform: none; filter: none; }
	to { opacity: 0; transform: scale(1.08); filter: blur(6px); }
}
@keyframes cpc-tx-flow-in { from { transform: scale(1.05); } to { transform: none; } }
@keyframes cpc-tx-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cpc-tx-dip-out {
	0% { opacity: 1; filter: brightness(1); }
	50% { opacity: 1; filter: brightness(0); }
	51%, 100% { opacity: 0; filter: brightness(0); }
}
@keyframes cpc-tx-dip-in { 0%, 50% { filter: brightness(0); } 100% { filter: brightness(1); } }
/* Reels scroll vertically: next comes up from below, the old one leaves upward. */
@keyframes cpc-tx-push-next { to { transform: translateY(-100%); } }
@keyframes cpc-tx-push-prev { to { transform: translateY(100%); } }
@keyframes cpc-tx-enter-next { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cpc-tx-enter-prev { from { transform: translateY(-100%); } to { transform: none; } }

html.cpc-immersive-player-active {
	margin-top: 0 !important;
	overflow: hidden !important;
}

body.cpc-immersive-player-active {
	overflow: hidden !important;
}

html.cpc-immersive-player-active #wpadminbar,
body.cpc-immersive-player-active .site-header,
body.cpc-immersive-player-active .entry-header,
body.cpc-immersive-player-active .page-header,
body.cpc-immersive-player-active .post-thumbnail,
body.cpc-immersive-player-active .entry-title,
body.cpc-immersive-player-active .page-title,
body.cpc-immersive-player-active .posted-on,
body.cpc-immersive-player-active .entry-meta,
body.cpc-immersive-player-active .post-navigation,
body.cpc-immersive-player-active .nav-links,
body.cpc-immersive-player-active .author-info,
body.cpc-immersive-player-active .author-bio,
body.cpc-immersive-player-active .comments-area,
body.cpc-immersive-player-active #comments,
body.cpc-immersive-player-active #respond,
body.cpc-immersive-player-active header[role="banner"],
body.cpc-immersive-player-active .navbar,
body.cpc-immersive-player-active .tc-logo,
body.cpc-immersive-player-active .tc-navbar-brand,
body.cpc-immersive-player-active .header-shop-icon {
	display: none !important;
}

body.cpc-immersive-player-active .tc-page {
	top: 0 !important;
}

body.cpc-immersive-player-active .inner,
body.cpc-immersive-player-active .content-inner {
	padding-top: 0 !important;
}

body.cpc-immersive-player-active .cpc-playlist--mvp-fallback {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	width: 100vw;
	height: 100svh;
	margin: 0;
	max-width: none;
}

body.cpc-immersive-player-active .cpc-playlist--mvp-fallback .cpc-playlist__stage {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.cpc-playlist__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--cpc-playlist-tile-min-width, 180px), 1fr));
	gap: 1px;
	background: #1f2937;
}

.cpc-playlist[data-cpc-show-playlist="0"] .cpc-playlist__items {
	display: none;
}

.cpc-playlist--layout-list .cpc-playlist__items {
	grid-template-columns: 1fr;
}

.cpc-playlist__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: center;
	gap: 0.6rem;
	min-height: 64px;
	padding: 0.55rem;
	border: 0;
	background: var(--cpc-playlist-tile, #111827);
	color: var(--cpc-playlist-text, #f8fafc);
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.cpc-playlist__item:hover,
.cpc-playlist__item:focus,
.cpc-playlist__item.is-active {
	background: var(--cpc-playlist-tile-active, var(--cpc-playlist-accent, #1d4ed8));
	outline: none;
}

.cpc-playlist__item img {
	display: block;
	width: 72px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #020617;
}

.cpc-playlist__item span {
	overflow-wrap: anywhere;
}

@media (max-width: 782px) and (orientation: portrait) {
	.cpc-playlist {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.cpc-playlist__media {
		height: min(100svh, 720px);
		max-height: 100svh;
	}

	.cpc-playlist__image {
		height: min(100svh, 720px);
		max-height: 100svh;
	}

	.cpc-playlist__nav {
		width: 40px;
		height: 48px;
	}

	.cpc-playlist__items {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 960px) and (orientation: landscape) {
	.cpc-playlist {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.cpc-playlist__media {
		height: 100svh;
		max-height: 100svh;
	}

	.cpc-playlist__image {
		height: 100svh;
		max-height: 100svh;
	}
}

@media (max-width: 600px) {
	.cpc-action-bar {
		gap: 0.4rem;
	}

	.cpc-action-button {
		flex: 1 1 auto;
		min-width: 44%;
	}

	.cpc-playlist__stage .cpc-action-bar--playlist .cpc-action-button {
		flex: 0 0 auto;
		min-width: 42px;
	}
}

/* ── Milestone 8A: Reels App Shell ───────────────────────────────── */

.cpc-playlist--reels {
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	margin-left: calc(50% - 50vw);
	background: #000;
	--cpc-comments-entry-height: 3.65rem;
	--cpc-bottom-overlay-gap: 1.15rem;
	--cpc-reel-info-height: 5.65rem;
	--cpc-ad-overlay-gap: 0.85rem;
	--cpc-bottom-overlay-clearance: calc(
		var(--cpc-comments-entry-height) +
		var(--cpc-bottom-overlay-gap) +
		env(safe-area-inset-bottom)
	);
	--cpc-ad-overlay-clearance: calc(
		var(--cpc-bottom-overlay-clearance) +
		var(--cpc-reel-info-height) +
		var(--cpc-ad-overlay-gap)
	);
}

/* When the reels shell is active, the playlist becomes a fixed full-viewport layer */
body.cpc-reels-active .cpc-playlist--reels {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100svh;
	margin: 0;
	background: #000;
}

/* Desktop: row layout so the sidebar sits beside the centered column */
@media (min-width: 769px) {
	body.cpc-reels-active .cpc-playlist--reels {
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
	}
}

/* Stage: full height, 9:16 width on desktop */
.cpc-playlist--reels .cpc-playlist__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%;
	background: #000;
}

/* The reel frame is a true 9:16 box at every screen size: the largest 9:16
   rectangle that fits the viewport, centered. Tall phones get thin top/bottom
   bands; wide screens get side space for the arrows and playlist tray. */
body.cpc-reels-active .cpc-playlist--reels .cpc-playlist__stage {
	--cpc-reel-frame-h: var(--cpc-safe-vh, 100svh);
	width: min(100vw, calc(var(--cpc-reel-frame-h) * 9 / 16));
	height: min(var(--cpc-reel-frame-h), calc(100vw * 16 / 9));
	align-self: center;
}

@media (min-width: 769px) {
	body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-playlist="1"] .cpc-playlist__stage {
		width: min(calc(100vw - 260px), calc(var(--cpc-reel-frame-h) * 9 / 16));
		height: min(var(--cpc-reel-frame-h), calc((100vw - 260px) * 16 / 9));
	}
}

/* Media fills the stage */
.cpc-playlist--reels .cpc-playlist__media,
.cpc-playlist--reels .cpc-playlist__image {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.cpc-playlist--reels .cpc-playlist__title {
	display: none;
}

/* Sidebar playlist tray — hidden on mobile, visible on desktop */
.cpc-playlist--reels .cpc-playlist__items {
	display: none;
}

@media (min-width: 769px) {
	body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-playlist="1"] .cpc-playlist__items {
		display: grid;
		grid-template-columns: 1fr;
		flex: 0 0 260px;
		width: 260px;
		max-height: 100svh;
		overflow-y: auto;
		background: #111;
		align-content: start;
		overscroll-behavior: contain;
	}
}

/* Reels nav arrows live in an outer stack beside the frame; swipe/keyboard remain primary */
.cpc-playlist--reels .cpc-playlist__nav,
.cpc-playlist--reels .cpc-playlist__nav-stack {
	display: none;
}

body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav-stack {
	display: flex;
	/* Narrow viewports have no margin beside the full-width stage, and the
	   right edge is occupied by the tall icon rail. Float the skip arrows on
	   the LEFT edge, upper-middle, clear of the rail, comment bar and info. */
	left: max(0.7rem, env(safe-area-inset-left));
	right: auto;
	top: 38%;
	transform: translateY(-50%);
}

/* Desktop reels: keep skip arrows outside the centered 9:16 column and away
   from the right-side action rail. */
@media (min-width: 769px) {
	body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav-stack {
		left: auto;
		right: calc(100% + clamp(0.85rem, 2vw, 1.25rem));
		top: 50%;
	}
}

body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav {
	display: inline-flex;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: rgb(0 0 0 / 38%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
	body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav-stack {
		left: max(0.75rem, env(safe-area-inset-left));
		right: auto;
	}
}

/* Current-title overlay: keep left of the icon rail */
.cpc-playlist--reels .cpc-playlist__current {
	right: 4.5rem;
	bottom: max(1.5rem, env(safe-area-inset-bottom));
	left: max(0.75rem, env(safe-area-inset-left));
}

/* Music credit: keep left of the icon rail */
.cpc-playlist--reels .cpc-playlist__music-credit {
	right: 4.5rem;
}

/* Theme chrome suppression */
html.cpc-reels-active {
	overflow: hidden !important;
}

body.cpc-reels-active {
	overflow: hidden !important;
}

html.cpc-reels-active #wpadminbar,
body.cpc-reels-active .site-header,
body.cpc-reels-active header[role="banner"],
body.cpc-reels-active .site-navigation,
body.cpc-reels-active .main-navigation,
body.cpc-reels-active .entry-header,
body.cpc-reels-active .page-header,
body.cpc-reels-active .post-thumbnail,
body.cpc-reels-active .entry-title,
body.cpc-reels-active .page-title,
body.cpc-reels-active .posted-on,
body.cpc-reels-active .entry-meta,
body.cpc-reels-active .post-navigation,
body.cpc-reels-active .nav-links,
body.cpc-reels-active .author-info,
body.cpc-reels-active .author-bio,
body.cpc-reels-active .comments-area,
body.cpc-reels-active #comments,
body.cpc-reels-active #respond,
body.cpc-reels-active .navbar,
body.cpc-reels-active .tc-logo,
body.cpc-reels-active .tc-navbar-brand,
body.cpc-reels-active .header-shop-icon {
	display: none !important;
}

body.cpc-reels-active .tc-page {
	top: 0 !important;
}

body.cpc-reels-active .inner,
body.cpc-reels-active .content-inner {
	padding-top: 0 !important;
}

body.cpc-shared-fan-playlist-page {
	margin: 0;
	background: #000;
}

.cpc-shared-fan-playlist {
	min-height: 100svh;
	background: #000;
}

.cpc-shared-fan-playlist .cpc-playlist {
	margin: 0 auto;
}

/* ── Milestone 8B: Icon Overlay Rail ─────────────────────────────── */

/* Right-side vertical icon rail — sits on the stage */
.cpc-icon-rail {
	position: absolute;
	right: max(0.65rem, env(safe-area-inset-right));
	bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4rem));
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 0;
	margin: 0;
	list-style: none;
}


/* Horizontal layout option */
.cpc-playlist[data-cpc-actions-layout="horizontal"] .cpc-playlist__stage .cpc-icon-rail {
	flex-direction: row;
	right: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	transform: translateX(50%);
	gap: 0.85rem;
}

/* Individual icon button */
.cpc-icon-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-width: max(var(--cpc-rail-min-tap-target, 44px), var(--cpc-touch-target-min, 44px));
	min-height: max(var(--cpc-rail-min-tap-target, 44px), var(--cpc-touch-target-min, 44px));
	padding: 0;
	border: none;
	background: none;
	color: var(--cpc-rail-icon-color, #fff);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cpc-icon-btn:focus-visible {
	outline: 2px solid rgb(255 255 255 / 60%);
	outline-offset: 2px;
	border-radius: 4px;
}

.cpc-playlist.is-cpc-tv-focus-outline :where(button, a, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid rgb(125 211 252 / 92%);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px rgb(14 165 233 / 28%);
}

.cpc-playlist[data-cpc-safe-guides="1"] .cpc-playlist__stage::before {
	content: "";
	position: absolute;
	inset:
		var(--cpc-safe-guide-top, 12%)
		var(--cpc-safe-guide-side, 8%)
		var(--cpc-safe-guide-bottom, 18%)
		var(--cpc-safe-guide-side, 8%);
	z-index: 1;
	pointer-events: none;
	border: 1px dashed rgb(255 255 255 / 0%);
	border-radius: 16px;
	transition: border-color 0.18s ease;
}

.cpc-playlist[data-cpc-safe-guides="1"].is-cpc-tv-focus .cpc-playlist__stage::before,
.cpc-playlist[data-cpc-safe-guides="1"]:focus-within .cpc-playlist__stage::before {
	border-color: rgb(125 211 252 / 34%);
}

/* Frosted-glass circle behind each icon.
   Touch target (44px min) is on .cpc-icon-btn; the circle is visual only. */
.cpc-icon-btn__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cpc-rail-icon-size, 38px);
	height: var(--cpc-rail-icon-size, 38px);
	border-radius: 50%;
	background: var(--cpc-rail-icon-bg, rgb(0 0 0 / 40%));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.15s ease, transform 0.1s ease;
}

.cpc-icon-btn:hover .cpc-icon-btn__circle {
	background: rgb(0 0 0 / 60%);
	transform: scale(1.08);
}

.cpc-icon-btn:active .cpc-icon-btn__circle {
	transform: scale(0.95);
}

.cpc-icon-btn.is-disabled,
.cpc-icon-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Active/pressed state (like, favorite) */
.cpc-icon-btn[aria-pressed="true"] .cpc-icon-btn__circle {
	background: var(--cpc-playlist-accent, #38bdf8);
}

/* SVG icon sizing */
.cpc-icon-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}

/* Text label under the icon */
.cpc-icon-btn__label {
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1;
	color: var(--cpc-rail-icon-color, #fff);
	text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
	white-space: nowrap;
	text-align: center;
	min-width: 2rem;
	pointer-events: none;
}

/* Split rail into two clusters; reserve middle lane for nav arrows.
   JS marks the split anchor (default: after mute when share exists). */
/* The rail's primary/secondary split (after Mute) no longer adds a large gap;
   all rail buttons use the rail's uniform spacing. */
.cpc-icon-btn--split-anchor {
	margin-bottom: 0;
}

.cpc-icon-btn--split-anchor + .cpc-icon-btn {
	margin-top: 0;
}

/* Toast message that appears to the left of the rail */
.cpc-icon-rail__toast {
	position: absolute;
	right: calc(100% + 0.65rem);
	bottom: 0;
	padding: 0.35rem 0.65rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 60%);
	color: #fff;
	font-size: 0.82rem;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.cpc-icon-rail__toast.is-visible {
	opacity: 1;
}

/* ============================================================
   Milestone 9A — Comments drawer
   ============================================================ */

.cpc-comments-drawer {
	position: absolute;
	inset: 0;
	z-index: 18;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
	visibility: hidden;
}

.cpc-playlist.is-comments-open .cpc-comments-drawer {
	pointer-events: auto;
	visibility: visible;
}

.cpc-comments-drawer__panel {
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: 100%;
	padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 1rem;
	background: rgb(10 14 20 / 88%);
	color: #fff;
	box-shadow: -18px 0 38px rgb(0 0 0 / 32%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transform: translateX(105%);
	transition: transform 0.24s ease;
}

.cpc-playlist.is-comments-open .cpc-comments-drawer__panel {
	transform: translateX(0);
}

.cpc-comments-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.cpc-comments-drawer__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.2;
	color: inherit;
}

.cpc-comments-drawer__close {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.cpc-comments-drawer__status {
	min-height: 1.25rem;
	margin-bottom: 0.6rem;
	color: rgb(255 255 255 / 72%);
	font-size: 0.85rem;
}

.cpc-comments-drawer__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-right: 0.35rem;
	overscroll-behavior: contain;
}

.cpc-comment {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 0.65rem;
	margin-bottom: 1rem;
}

.cpc-comment__avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgb(255 255 255 / 12%);
	object-fit: cover;
}

.cpc-comment__author {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.82rem;
	line-height: 1.2;
	color: rgb(255 255 255 / 82%);
}

.cpc-comment__content {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.38;
	overflow-wrap: anywhere;
	color: #fff;
}

.cpc-comment__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 0.4rem;
}

.cpc-comment__actions button,
.cpc-comments-drawer__more,
.cpc-comments-drawer__cancel,
.cpc-comments-drawer__submit {
	border: 0;
	background: transparent;
	color: rgb(255 255 255 / 72%);
	font: inherit;
	font-size: 0.82rem;
	cursor: pointer;
}

.cpc-comment__badge {
	color: rgb(255 255 255 / 58%);
	font-size: 0.78rem;
	font-weight: 700;
}

.cpc-comment__replies {
	grid-column: 2;
	margin-top: 0.75rem;
	padding-left: 0.75rem;
	border-left: 1px solid rgb(255 255 255 / 18%);
}

.cpc-comments-drawer__more {
	align-self: center;
	margin: 0.25rem 0 0.75rem;
	padding: 0.45rem 0.75rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
}

.cpc-comments-drawer[data-cpc-live-mode="1"] .cpc-comments-drawer__status {
	color: rgb(182 226 255 / 88%);
}

.cpc-comment.is-cpc-live-queued,
.cpc-comment[hidden] {
	display: none;
}

.cpc-live-ack {
	margin: 0.35rem 0 0.75rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgb(125 211 252 / 28%);
	border-radius: 14px;
	background: rgb(14 116 144 / 22%);
	color: rgb(224 242 254 / 96%);
	font-size: 0.85rem;
	font-weight: 700;
}

.cpc-live-ack[hidden] {
	display: none;
}

.cpc-live-followup {
	margin: 0.5rem 0 0.75rem;
	padding: 0.75rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 16px;
	background: rgb(255 255 255 / 9%);
	box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

.cpc-live-followup__text {
	margin-bottom: 0.55rem;
	color: rgb(255 255 255 / 90%);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.35;
}

.cpc-live-followup__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0.35rem 0.8rem;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 92%);
	color: #0a0e14;
	font-size: 0.82rem;
	font-weight: 800;
	cursor: pointer;
}

.cpc-live-followup__button:disabled {
	cursor: default;
	opacity: 0.62;
}

.cpc-live-followup__disclosure {
	margin-top: 0.5rem;
	color: rgb(255 255 255 / 62%);
	font-size: 0.75rem;
	line-height: 1.35;
}

.cpc-comments-drawer__composer-tools {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.5rem;
}

.cpc-comments-drawer__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 32px;
	padding: 0 0.65rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}

.cpc-comments-drawer__form {
	flex: 0 0 auto;
	padding-top: 0.75rem;
	border-top: 1px solid rgb(255 255 255 / 14%);
}

.cpc-comments-drawer__replying {
	margin-bottom: 0.45rem;
	color: rgb(255 255 255 / 68%);
	font-size: 0.8rem;
}

.cpc-comments-drawer__form textarea {
	display: block;
	width: 100%;
	min-height: 74px;
	resize: vertical;
	padding: 0.65rem 0.75rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 14px;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	font: inherit;
	line-height: 1.35;
}

.cpc-comments-drawer__form textarea::placeholder {
	color: rgb(255 255 255 / 58%);
}

.cpc-comments-drawer__form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 0.55rem;
}

.cpc-comments-drawer__submit {
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background: #fff;
	color: #0a0e14;
	font-weight: 700;
}

.cpc-comments-drawer__submit:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.cpc-comments-drawer__login {
	display: inline-flex;
	justify-content: center;
	margin-top: 0.75rem;
	color: #fff;
}

.cpc-comments-entry {
	position: absolute;
	right: 0.85rem;
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	left: 0.85rem;
	z-index: 17;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
	background: rgb(2 6 12 / 62%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ── Engagement Chrome — delayed-reveal state machine ─────────────────── */

/* launch_clean: engagement surfaces start invisible */
.cpc-playlist--reels[data-cpc-chrome-state] .cpc-icon-rail,
.cpc-playlist--reels[data-cpc-chrome-state] [data-cpc-comments-entry] {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease;
}

/* dwell_reveal: fade both surfaces to full opacity */
.cpc-playlist--reels[data-cpc-chrome-state="dwell_reveal"] .cpc-icon-rail,
.cpc-playlist--reels[data-cpc-chrome-state="dwell_reveal"] [data-cpc-comments-entry] {
	opacity: 1;
	pointer-events: auto;
}

/* idle_dimmed: keep the rail discoverable, remove the reactive comment bar */
.cpc-playlist--reels[data-cpc-chrome-state="idle_dimmed"] .cpc-icon-rail {
	opacity: var(--cpc-chrome-dim-opacity, 0.6);
	pointer-events: auto;
	transition: opacity 2s ease;
}

.cpc-playlist--reels[data-cpc-chrome-state="idle_dimmed"] [data-cpc-comments-entry] {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.9s ease;
}

/* tap_resurfaced: spring back to full opacity */
.cpc-playlist--reels[data-cpc-chrome-state="tap_resurfaced"] .cpc-icon-rail,
.cpc-playlist--reels[data-cpc-chrome-state="tap_resurfaced"] [data-cpc-comments-entry] {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Notification Surface (Phase 2) ────────────────────────────────────── */

.cpc-notification-band {
	position: absolute;
	top: max(0.75rem, env(safe-area-inset-top));
	right: 0.85rem;
	left: 0.85rem;
	z-index: 18;
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 14px;
	background: rgb(2 6 12 / 55%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: rgb(255 255 255 / 92%);
	font-size: 0.88rem;
	line-height: 1.45;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cpc-notif-fade-seconds, 0.6s) ease;
	cursor: default;
}

.cpc-notification-band[data-cpc-notif-state="visible"] {
	opacity: 1;
	pointer-events: auto;
}

.cpc-notification-band[data-cpc-notif-state="dimmed"] {
	opacity: var(--cpc-notif-dim-opacity, 0.05);
	pointer-events: auto;
	transition: opacity 2s ease;
}

.cpc-notification-band[data-cpc-notif-state="resurfaced"] {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cpc-notification-band__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.1rem;
	opacity: 0.7;
}

.cpc-notification-band__text {
	flex: 1 1 auto;
}

.cpc-notification-band__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin: -0.18rem -0.25rem -0.18rem 0.1rem;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
	color: rgb(255 255 255 / 78%);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.cpc-notification-band__pause:hover,
.cpc-notification-band__pause:focus-visible {
	background: rgb(255 255 255 / 18%);
	color: #fff;
	outline: none;
}

/* ───────────────────────────────────────────────────────────────────────── */

.cpc-comments-entry__open {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	min-height: 36px;
	padding: 0 0.85rem;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 12%);
	color: rgb(255 255 255 / 82%);
	font: inherit;
	font-size: 0.92rem;
	text-align: left;
	cursor: pointer;
}

.cpc-comments-entry__prompt {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cpc-comments-entry__tools {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.cpc-comments-entry__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 0.5rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}

.cpc-comments-entry__tool--reactions {
	min-width: 28px;
	padding: 0 0.4rem;
	font-size: 0.9rem;
}

.cpc-reaction-pack-popover {
	position: absolute;
	right: 0.95rem;
	bottom: calc(var(--cpc-comments-entry-height, 3.25rem) + max(1rem, env(safe-area-inset-bottom)));
	z-index: 18;
	display: flex;
	gap: 0.4rem;
	max-width: min(86%, 360px);
	padding: 0.42rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
	background: rgb(2 6 12 / 70%);
	box-shadow: 0 14px 34px rgb(0 0 0 / 32%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.cpc-reaction-pack-popover__token {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.cpc-reaction-pack-popover__token:hover,
.cpc-reaction-pack-popover__token:focus-visible {
	background: rgb(255 255 255 / 18%);
	outline: none;
}

.cpc-comments-entry.is-drawer-open {
	opacity: 0;
	transform: translateY(0.4rem);
	pointer-events: none;
}

@media (max-width: 768px) {
	.cpc-comments-drawer {
		align-items: flex-end;
	}

	.cpc-comments-drawer__panel {
		width: 100%;
		height: min(78svh, 620px);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 38px rgb(0 0 0 / 36%);
		transform: translateY(105%);
	}

	.cpc-playlist.is-comments-open .cpc-comments-drawer__panel {
		transform: translateY(0);
	}

	.cpc-comments-entry {
		bottom: max(0.6rem, env(safe-area-inset-bottom));
	}

	.cpc-playlist.is-comments-keyboard-open .cpc-comments-drawer__panel {
		height: min(62svh, 500px);
		padding-bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + var(--cpc-comments-keyboard-offset, 0px));
	}

	.cpc-playlist.is-comments-keyboard-open .cpc-comments-entry {
		transform: translateY(calc(-1 * var(--cpc-comments-keyboard-offset, 0px)));
	}
}

/* ============================================================
   Milestone 8C — Creator / description reel-info overlay
   ============================================================ */

/* Container: anchored to the bottom-left of the stage,
   above the icon rail, below the nav buttons */
.cpc-reel-info {
	position: absolute;
	bottom: var(--cpc-bottom-overlay-clearance);
	left: 0;
	right: 4.5rem; /* leave room for icon rail */
	padding: 0.75rem 1rem;
	color: #fff;
	text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
	pointer-events: none; /* children re-enable as needed */
	z-index: 10;
}

/* ---- Creator row ---- */
.cpc-reel-info__creator {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
	pointer-events: auto;
}

.cpc-reel-info__avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid rgba(255,255,255,0.7);
	flex-shrink: 0;
}

.cpc-reel-info__name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
}

.cpc-reel-info__verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #38bdf8;
	color: #031021;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.cpc-reel-info__creator-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-left: auto;
}

.cpc-reel-info__follow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0 0.8rem;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 42%);
	background: rgb(15 23 42 / 56%);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	pointer-events: auto;
}

.cpc-reel-info__follow:hover,
.cpc-reel-info__follow:focus-visible {
	background: rgb(37 99 235 / 75%);
	color: #fff;
	text-decoration: none;
}

.cpc-reel-info__subscribe {
	background: rgb(56 189 248 / 26%);
}

.cpc-reel-info__subtitle,
.cpc-reel-info__audio,
.cpc-reel-info__meta {
	margin: 0 0 0.25rem;
	font-size: 0.78rem;
	line-height: 1.35;
	color: rgb(255 255 255 / 85%);
}

.cpc-reel-info__meta {
	color: rgb(255 255 255 / 72%);
}

/* ---- Title ---- */
.cpc-reel-info__title {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Description ---- */
.cpc-reel-info__description {
	margin: 0 0 0.3rem;
	font-size: 0.82rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: -webkit-line-clamp 0.2s;
}

.cpc-reel-info__description.is-empty {
	display: none;
}

.cpc-reel-info__chapters {
	display: none;
	pointer-events: auto;
	margin: 0.15rem 0 0.35rem;
}

.cpc-reel-info.has-chapters .cpc-reel-info__chapters {
	display: block;
}

.cpc-reel-info__chapters-label {
	display: inline-block;
	margin: 0 0 0.35rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.62;
}

.cpc-reel-info__chapter-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.cpc-reel-info__chapter {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
	background: rgb(15 23 42 / 56%);
	color: #fff;
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.cpc-reel-info__chapter-time {
	opacity: 0.72;
	font-variant-numeric: tabular-nums;
}

.cpc-reel-info__chapter.is-active {
	background: rgb(37 99 235 / 82%);
	border-color: rgb(96 165 250 / 65%);
}

/* Expanded state: show full description */
.cpc-reel-info.is-expanded .cpc-reel-info__description {
	-webkit-line-clamp: unset;
	display: block;
}

/* ---- Expand toggle ---- */
.cpc-reel-info__expand {
	display: none; /* shown by JS when description overflows */
	background: none;
	border: none;
	padding: 0;
	color: rgba(255,255,255,0.75);
	font-size: 1rem;
	cursor: pointer;
	pointer-events: auto;
	letter-spacing: 0.1em;
}

.cpc-reel-info.has-overflow .cpc-reel-info__expand {
	display: inline-block;
}

/* ============================================================
   Milestone 25C — Full-reel monetization panel
   ============================================================ */

.cpc-monetization-reel-panel {
	position: absolute;
	right: 4.75rem;
	bottom: var(--cpc-bottom-overlay-clearance);
	left: 1rem;
	z-index: 12;
	max-width: 20rem;
	padding: 0.85rem;
	color: #fff;
	background: rgb(15 23 42 / 62%);
	background: rgb(15 23 42 / var(--cpc-ad-panel-opacity, 62%));
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 1rem;
	box-shadow: 0 18px 48px rgb(0 0 0 / 36%);
	backdrop-filter: blur(16px);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--cpc-ad-transition-ms, 180ms) ease, transform var(--cpc-ad-transition-ms, 180ms) ease;
	pointer-events: auto;
}

.cpc-monetization-reel-panel.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cpc-monetization-reel-panel[hidden] {
	display: none;
}

.cpc-monetization-reel-panel__eyebrow,
.cpc-monetization-reel-panel__title,
.cpc-monetization-reel-panel__body {
	margin: 0;
}

.cpc-monetization-reel-panel__eyebrow {
	margin-bottom: 0.25rem;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #67e8f9;
}

.cpc-monetization-reel-panel__title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
}

.cpc-monetization-reel-panel__body {
	margin-top: 0.35rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgb(255 255 255 / 84%);
}

.cpc-monetization-reel-panel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.2rem;
	margin-top: 0.65rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: #2563eb;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 800;
	text-decoration: none;
}

.cpc-monetization-reel-panel__cta:hover {
	color: #fff;
	text-decoration: none;
	background: #1d4ed8;
}

.cpc-playlist__item--monetization span::before {
	content: "Ad ";
	color: #67e8f9;
	font-size: 0.75em;
	font-weight: 800;
	text-transform: uppercase;
}

.cpc-playlist.is-cpc-monetization-reel .cpc-action-bar,
.cpc-playlist.is-cpc-monetization-reel .cpc-icon-rail [data-cpc-action="like"],
.cpc-playlist.is-cpc-monetization-reel .cpc-icon-rail [data-cpc-action="favorite"],
.cpc-playlist.is-cpc-monetization-reel .cpc-icon-rail [data-cpc-action="comments"],
.cpc-playlist.is-cpc-monetization-reel .cpc-icon-rail [data-cpc-action="recall"],
.cpc-playlist.is-cpc-interruptive-ad--suppress-actions .cpc-action-bar,
.cpc-playlist.is-cpc-interruptive-ad--suppress-actions .cpc-icon-rail [data-cpc-action="like"],
.cpc-playlist.is-cpc-interruptive-ad--suppress-actions .cpc-icon-rail [data-cpc-action="favorite"],
.cpc-playlist.is-cpc-interruptive-ad--suppress-actions .cpc-icon-rail [data-cpc-action="comments"],
.cpc-playlist.is-cpc-interruptive-ad--suppress-actions .cpc-icon-rail [data-cpc-action="recall"],
.cpc-playlist.is-cpc-interruptive-ad--suppress-actions .cpc-comments-entry,
.cpc-playlist.is-cpc-monetization-reel .cpc-comments-entry {
	display: none;
}

.cpc-playlist.is-cpc-ad-mode--hide-notifications .cpc-notification-band {
	display: none;
}

.cpc-playlist.is-cpc-ad-mode--dim-chrome .cpc-icon-rail,
.cpc-playlist.is-cpc-ad-mode--dim-chrome .cpc-comments-entry {
	opacity: var(--cpc-ad-chrome-opacity, 0.22);
}

/* ============================================================
   Milestone 30H — Interruptive video ad runtime
   ============================================================ */

.cpc-interruptive-ad {
	position: absolute;
	inset: 0;
	z-index: 17;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.85rem;
	padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
	color: #fff;
	background: linear-gradient(180deg, rgb(2 6 23 / var(--cpc-ad-panel-opacity, 74%)) 0%, rgb(2 6 23 / 26%) 42%, rgb(2 6 23 / var(--cpc-ad-panel-opacity, 82%)) 100%);
	opacity: 0;
	transform: translateY(0.35rem);
	transition: opacity var(--cpc-ad-transition-ms, 180ms) ease, transform var(--cpc-ad-transition-ms, 180ms) ease;
	pointer-events: auto;
}

.cpc-interruptive-ad.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cpc-interruptive-ad[hidden] {
	display: none;
}

.cpc-interruptive-ad__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #000;
	overflow: hidden;
}

.cpc-interruptive-ad__media img,
.cpc-interruptive-ad__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpc-interruptive-ad__copy {
	max-width: min(25rem, calc(100% - 5rem));
	padding: 0.95rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 1rem;
	background: rgb(15 23 42 / 58%);
	box-shadow: 0 18px 48px rgb(0 0 0 / 34%);
	backdrop-filter: blur(16px);
}

.cpc-interruptive-ad__eyebrow,
.cpc-interruptive-ad__title,
.cpc-interruptive-ad__body {
	margin: 0;
}

.cpc-interruptive-ad__eyebrow {
	margin-bottom: 0.25rem;
	color: #67e8f9;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cpc-interruptive-ad__title {
	font-size: 1.05rem;
	font-weight: 850;
	line-height: 1.15;
}

.cpc-interruptive-ad__body {
	margin-top: 0.35rem;
	color: rgb(255 255 255 / 86%);
	font-size: 0.86rem;
	line-height: 1.35;
}

.cpc-interruptive-ad__controls {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: min(25rem, calc(100% - 5rem));
}

.cpc-interruptive-ad__countdown {
	min-width: 2.5rem;
	color: rgb(255 255 255 / 82%);
	font-size: 0.82rem;
	font-weight: 800;
	text-align: center;
}

.cpc-interruptive-ad__cta,
.cpc-interruptive-ad__skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.35rem;
	padding: 0 0.9rem;
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 850;
	text-decoration: none;
}

.cpc-interruptive-ad__cta {
	background: #2563eb;
	color: #fff;
}

.cpc-interruptive-ad__skip {
	background: rgb(15 23 42 / 62%);
	color: #fff;
	cursor: pointer;
}

.cpc-interruptive-ad__skip:disabled {
	opacity: 0.58;
	cursor: default;
}

@media (max-width: 520px) {
	.cpc-monetization-reel-panel {
		right: 4.35rem;
		bottom: calc(var(--cpc-bottom-overlay-clearance) + 0.65rem);
		left: 0.8rem;
		max-width: none;
		padding: 0.75rem;
	}
}

/* On non-reels standard layout: use subtle bottom-bar styling */
.cpc-playlist:not(.cpc-playlist--reels) .cpc-reel-info {
	position: static;
	padding: 0.5rem 0;
	color: inherit;
	text-shadow: none;
	right: auto;
	bottom: auto;
}

.cpc-playlist:not(.cpc-playlist--reels) .cpc-reel-info__title {
	font-size: 0.9rem;
	font-weight: 600;
}

/* Mobile: push info up to clear bottom controls */
@media (max-width: 600px) {
	.cpc-reel-info {
		bottom: calc(var(--cpc-bottom-overlay-clearance) + 0.55rem);
		right: 4.25rem;
		max-width: min(13.5rem, calc(100% - 5.5rem));
		padding: 0.35rem 0.5rem;
	}

	.cpc-reel-info__title {
		margin-bottom: 0.08rem;
		font-size: 0.64rem;
		line-height: 1.15;
		-webkit-line-clamp: 2;
	}

	.cpc-reel-info__description,
	.cpc-reel-info__subtitle,
	.cpc-reel-info__audio,
	.cpc-reel-info__meta {
		font-size: 0.58rem;
		line-height: 1.2;
	}

	.cpc-reel-info__description {
		-webkit-line-clamp: 1;
	}
}

/* ============================================================
   Run C2 — Overlay Runtime descriptors
   ============================================================ */

.cpc-overlay-root {
	position: absolute;
	inset: 0;
	z-index: 16;
	pointer-events: none;
}

.cpc-overlay-card {
	position: absolute;
	--cpc-overlay-opacity: 0.54;
	--cpc-overlay-blur: 14px;
	max-width: min(28rem, calc(100% - 6.5rem));
	padding: 0.7rem 0.85rem;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 14px;
	background: rgb(4 8 15 / var(--cpc-overlay-opacity));
	color: #fff;
	box-shadow: 0 14px 42px rgb(0 0 0 / 24%);
	text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
	backdrop-filter: blur(var(--cpc-overlay-blur));
	-webkit-backdrop-filter: blur(var(--cpc-overlay-blur));
	pointer-events: auto;
	overflow: hidden;
	opacity: 0;
	transform: translateY(0.35rem);
	transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.cpc-overlay-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgb(255 255 255 / 13%) 0%, rgb(255 255 255 / 0%) 52%);
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}

.cpc-overlay-card:hover {
	border-color: rgb(255 255 255 / 22%);
}

.cpc-overlay-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cpc-overlay-card[hidden] {
	display: none;
}

.cpc-overlay-card[data-cpc-overlay-position="bottom_left"] {
	left: max(0.75rem, env(safe-area-inset-left));
	right: auto;
	bottom: var(--cpc-bottom-overlay-clearance);
}

.cpc-overlay-card[data-cpc-overlay-position="bottom_center"] {
	left: 50%;
	bottom: var(--cpc-bottom-overlay-clearance);
	transform: translate(-50%, 0.35rem);
}

.cpc-overlay-card[data-cpc-overlay-position="bottom_center"].is-visible {
	transform: translate(-50%, 0);
}

.cpc-overlay-card[data-cpc-overlay-position="bottom_right"] {
	left: auto;
	right: max(4.75rem, env(safe-area-inset-right));
	bottom: var(--cpc-bottom-overlay-clearance);
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card[data-cpc-overlay-position="bottom_left"],
.cpc-playlist--reels .cpc-overlay-card--ambient-card[data-cpc-overlay-position="bottom_center"],
.cpc-playlist--reels .cpc-overlay-card--ambient-card[data-cpc-overlay-position="bottom_right"] {
	bottom: var(--cpc-ad-overlay-clearance);
}

.cpc-overlay-card[data-cpc-overlay-position="top"] {
	top: max(0.75rem, env(safe-area-inset-top));
	right: max(4.75rem, env(safe-area-inset-right));
	left: max(0.75rem, env(safe-area-inset-left));
	max-width: none;
}

.cpc-overlay-card__title {
	margin: 0 2rem 0.2rem 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
}

.cpc-overlay-card__eyebrow {
	margin: 0 2rem 0.24rem 0;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(56 189 248 / 94%);
}

.cpc-overlay-card__body {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.38;
	overflow-wrap: anywhere;
	color: rgb(255 255 255 / 88%);
}

.cpc-overlay-card__media {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 5.5rem;
	margin: 0 0 0.65rem;
	border-radius: 10px;
	background: rgb(255 255 255 / 8%);
}

.cpc-overlay-card__media--inline {
	margin-top: 0.65rem;
	margin-bottom: 0;
}

.cpc-overlay-card__media--background {
	position: absolute;
	inset: 0;
	z-index: -1;
	min-height: 0;
	margin: 0;
	border-radius: inherit;
	opacity: 0.48;
}

.cpc-overlay-card__media--background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(0 0 0 / 72%), rgb(0 0 0 / 24%));
}

.cpc-overlay-card__media-node {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
	object-fit: cover;
}

.cpc-overlay-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.65rem;
}

.cpc-overlay-card__action,
.cpc-overlay-card__link,
.cpc-overlay-card__close {
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.cpc-overlay-card__action,
.cpc-overlay-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.42rem 0.78rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 16%);
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 700;
	transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 160ms ease,
	            box-shadow 160ms ease;
}

.cpc-overlay-card__action:hover,
.cpc-overlay-card__link:hover {
	background: rgb(255 255 255 / 28%);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgb(0 0 0 / 28%);
}

.cpc-overlay-card__action:active,
.cpc-overlay-card__link:active {
	transform: scale(0.93);
	background: rgb(255 255 255 / 18%);
	box-shadow: none;
	transition-duration: 100ms;
}

.cpc-overlay-card__action--save-for-later,
.cpc-overlay-card__action--watch-later,
.cpc-overlay-card__action--interested {
	background: rgb(255 255 255 / 12%);
}

.cpc-overlay-card__action--subscribe,
.cpc-overlay-card__action--unlock,
.cpc-overlay-card__action--shop,
.cpc-overlay-card__action--tip-creator,
.cpc-overlay-card__action--visit-store,
.cpc-overlay-card__action--open-product {
	background: rgb(56 189 248 / 24%);
}

.cpc-overlay-card__close {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	padding: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 12%);
	font-size: 1.15rem;
	line-height: 1;
	transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), background 160ms ease;
}

.cpc-overlay-card__close:hover {
	background: rgb(255 255 255 / 22%);
	transform: scale(1.1);
}

.cpc-overlay-card__close:active {
	transform: scale(0.88) rotate(90deg);
	background: rgb(255 255 255 / 16%);
	transition-duration: 100ms;
}

.cpc-overlay-card--admin-ticker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.cpc-overlay-card--admin-ticker .cpc-overlay-card__body {
	font-weight: 650;
}

.cpc-overlay-card--music-credit {
	max-width: min(20rem, calc(100% - 6.5rem));
	padding: 0.55rem 0.7rem;
	border-color: rgb(255 255 255 / 11%);
	box-shadow: 0 8px 28px rgb(0 0 0 / 30%), 0 0 0 1px rgb(255 255 255 / 6%) inset;
}

.cpc-overlay-card--music-credit .cpc-overlay-card__title {
	margin: 0 0 0.22rem 0;
	font-size: 0.82rem;
	font-weight: 600;
}

.cpc-overlay-card--music-credit .cpc-overlay-card__title::before {
	content: "\266A\00A0";
	opacity: 0.65;
}

.cpc-overlay-card__credit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.cpc-overlay-card__credit-text {
	flex: 1;
	min-width: 0;
	font-size: 0.76rem;
	font-weight: 500;
	color: rgb(255 255 255 / 58%);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpc-overlay-card__credit-avatar {
	flex-shrink: 0;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid rgb(255 255 255 / 22%);
	box-shadow: 0 2px 8px rgb(0 0 0 / 42%), 0 0 0 1px rgb(255 255 255 / 8%) inset;
	background: rgb(255 255 255 / 8%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.cpc-overlay-card--ambient-card {
	border-color: rgb(83 149 255 / 42%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(64 129 255 / 20%) inset;
}

.cpc-overlay-card--ambient-card .cpc-overlay-card__action {
	background: rgb(64 129 255 / 28%);
}

.cpc-overlay-card--ambient-subscription-card,
.cpc-overlay-card--ambient-unlock-card {
	border-color: rgb(147 51 234 / 46%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(147 51 234 / 22%) inset;
}

.cpc-overlay-card--ambient-subscription-card .cpc-overlay-card__eyebrow,
.cpc-overlay-card--ambient-unlock-card .cpc-overlay-card__eyebrow {
	color: rgb(196 181 253 / 96%);
}

.cpc-overlay-card--ambient-creator-merch,
.cpc-overlay-card--ambient-shop,
.cpc-overlay-card--ambient-limited-offer,
.cpc-overlay-card--ambient-auction-card {
	border-color: rgb(245 158 11 / 44%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(245 158 11 / 20%) inset;
}

.cpc-overlay-card--ambient-creator-merch .cpc-overlay-card__eyebrow,
.cpc-overlay-card--ambient-limited-offer .cpc-overlay-card__eyebrow,
.cpc-overlay-card--ambient-auction-card .cpc-overlay-card__eyebrow {
	color: rgb(251 191 36 / 96%);
}

.cpc-overlay-card--ambient-sponsor-card,
.cpc-overlay-card--ambient-sponsor {
	border-color: rgb(16 185 129 / 44%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(16 185 129 / 20%) inset;
}

.cpc-overlay-card--ambient-sponsor-card .cpc-overlay-card__eyebrow,
.cpc-overlay-card--ambient-sponsor .cpc-overlay-card__eyebrow {
	color: rgb(52 211 153 / 96%);
}

.cpc-overlay-card--ambient-creator-promo {
	border-color: rgb(244 63 94 / 44%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(244 63 94 / 20%) inset;
}

.cpc-overlay-card--ambient-creator-promo .cpc-overlay-card__eyebrow {
	color: rgb(251 113 133 / 96%);
}

.cpc-overlay-card--ambient-affiliate {
	border-color: rgb(6 182 212 / 44%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(6 182 212 / 20%) inset;
}

.cpc-overlay-card--ambient-affiliate .cpc-overlay-card__eyebrow {
	color: rgb(34 211 238 / 96%);
}

.cpc-overlay-card--ambient-announcement {
	border-color: rgb(100 116 139 / 46%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(148 163 184 / 18%) inset;
}

.cpc-overlay-card--ambient-announcement .cpc-overlay-card__eyebrow {
	color: rgb(203 213 225 / 95%);
}

.cpc-overlay-card--ambient-cross-platform-promo {
	border-color: rgb(217 70 239 / 44%);
	box-shadow: 0 16px 42px rgb(0 0 0 / 30%), 0 0 0 1px rgb(217 70 239 / 20%) inset;
}

.cpc-overlay-card--ambient-cross-platform-promo .cpc-overlay-card__eyebrow {
	color: rgb(232 121 249 / 96%);
}

.cpc-playlist:not(.cpc-playlist--reels) .cpc-overlay-root {
	position: static;
}

.cpc-playlist:not(.cpc-playlist--reels) .cpc-overlay-card {
	position: static;
	max-width: none;
	margin: 0.75rem;
	text-shadow: none;
}

@media (max-width: 600px) {
	.cpc-overlay-card {
		max-width: calc(100% - 5.25rem);
		padding: 0.6rem 0.7rem;
		border-radius: 12px;
	}

	.cpc-overlay-card[data-cpc-overlay-position="top"] {
		right: max(4.25rem, env(safe-area-inset-right));
	}

	.cpc-overlay-card[data-cpc-overlay-position="bottom_right"] {
		right: max(4.25rem, env(safe-area-inset-right));
	}

	.cpc-playlist__nav-stack {
		left: calc(100% + 0.75rem);
		right: auto;
		gap: 0.65rem;
	}

	/* Compact rail for mobile phones */
	.cpc-icon-rail {
		gap: 0.5rem;
	}

	.cpc-icon-btn__circle {
		width: 34px;
		height: 34px;
	}

	.cpc-icon-btn svg {
		width: 15px;
		height: 15px;
	}

	.cpc-icon-btn__label {
		font-size: 0.58rem;
		min-width: 1.8rem;
	}

	/* Reels nav arrows — smaller circles on phone */
	body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
}

@media (max-width: 768px) {
	.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-playlist__nav-stack {
		left: max(0.75rem, env(safe-area-inset-left));
		right: auto;
	}
}

/* Compact rail sits above the comment bar and below top notification cards. */
.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-icon-rail {
	top: auto;
	bottom: calc(var(--cpc-bottom-overlay-clearance) + 0.6rem);
	transform: none;
	gap: 0.55rem;
	max-height: calc(100% - var(--cpc-bottom-overlay-clearance) - 5rem);
}

/* Short 9:16 frames (most phones): smaller buttons so every action still fits. */
.cpc-playlist--reels.cpc-playlist--short-reels-rail .cpc-icon-rail {
	gap: 0.4rem;
}

.cpc-playlist--reels.cpc-playlist--short-reels-rail .cpc-icon-btn__circle {
	width: 34px;
	height: 34px;
}

.cpc-playlist--reels.cpc-playlist--short-reels-rail .cpc-icon-btn__circle svg {
	width: 18px;
	height: 18px;
}


.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-icon-rail [data-cpc-action="follow"],
.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-icon-rail [data-cpc-action="subscribe"],
.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-icon-rail [data-cpc-action="unlock"],
.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-icon-rail [data-cpc-action="tip"],
.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-icon-rail [data-cpc-action="product_cta"] {
	display: none;
}

.cpc-playlist--reels.cpc-playlist--compact-reels-rail .cpc-playlist__nav-stack {
	left: calc(100% + 0.75rem);
	right: auto;
}

@media (max-width: 768px) {
	body.cpc-reels-active .cpc-playlist--reels.cpc-playlist--compact-reels-rail[data-cpc-show-nav="1"] .cpc-playlist__nav-stack {
		left: max(0.75rem, env(safe-area-inset-left));
		right: auto;
	}
}

/* Final reels safe-lane override: nav controls must not share the right rail. */
body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav-stack,
body.cpc-reels-active .cpc-playlist--reels.cpc-playlist--compact-reels-rail[data-cpc-show-nav="1"] .cpc-playlist__nav-stack {
	left: max(0.75rem, env(safe-area-inset-left));
	right: auto;
	top: 50%;
	gap: 0.8rem;
}

@media (min-width: 769px) {
	body.cpc-reels-active .cpc-playlist--reels[data-cpc-show-nav="1"] .cpc-playlist__nav-stack,
	body.cpc-reels-active .cpc-playlist--reels.cpc-playlist--compact-reels-rail[data-cpc-show-nav="1"] .cpc-playlist__nav-stack {
		left: auto;
		right: calc(100% + clamp(0.85rem, 2vw, 1.25rem));
	}
}

@media (max-width: 520px) {
	.cpc-overlay-card {
		max-width: min(14rem, calc(100% - 5.5rem));
		padding: 0.55rem 0.65rem;
	}

	.cpc-overlay-card__title {
		font-size: 0.76rem;
		line-height: 1.18;
	}

	.cpc-overlay-card__body {
		font-size: 0.66rem;
		line-height: 1.24;
	}

	.cpc-overlay-card[data-cpc-overlay-position="bottom_left"],
	.cpc-overlay-card[data-cpc-overlay-position="bottom_center"],
	.cpc-overlay-card[data-cpc-overlay-position="bottom_right"] {
		bottom: calc(var(--cpc-bottom-overlay-clearance) + 0.65rem);
	}
}

.cpc-playlist:not(.cpc-playlist--allow-download) .cpc-playlist__media::-webkit-media-controls-download-button,
.cpc-direct-video:not(.cpc-direct-video--allow-download) .cpc-direct-video__media::-webkit-media-controls-download-button {
	display: none !important;
}

.cpc-playlist__media::-webkit-media-controls-overflow-button {
	display: none !important;
}

.cpc-playlist__media::-webkit-media-controls-picture-in-picture-button {
	display: none !important;
}


/* =========================================================
   ENGAGEMENT OPTIONS SHEET  (z-index 20)
   ========================================================= */

.cpc-options-sheet,
.cpc-share-sheet {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 85%;
	overflow-y: auto;
	border-radius: 20px 20px 0 0;
	background: rgba(18, 18, 24, 0.62);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: none;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 0.875rem;
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	-webkit-overflow-scrolling: touch;
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.cpc-options-sheet,
	.cpc-share-sheet {
		background: rgba(18, 18, 24, 0.94);
	}
}

.cpc-options-sheet.is-open,
.cpc-share-sheet.is-open {
	transform: translateY(0);
}

.cpc-share-sheet {
	z-index: 21;
}

.cpc-share-sheet__summary {
	padding: 0.75rem 1rem 0.35rem;
}

.cpc-share-sheet__summary-title {
	margin: 0 0 0.2rem;
	font-size: 0.98rem;
	font-weight: 700;
}

.cpc-share-sheet__summary-desc {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.35;
	opacity: 0.72;
}

.cpc-options-sheet__handle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cpc-options-sheet__title {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0;
}

.cpc-options-sheet__close {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0.25rem;
	opacity: 0.7;
	line-height: 1;
	font-size: 1.25rem;
}

.cpc-options-sheet__close:hover,
.cpc-options-sheet__close:focus {
	opacity: 1;
}

.cpc-options-sheet__group {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cpc-options-sheet__group:last-child {
	border-bottom: none;
}

.cpc-options-sheet__group-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	padding: 0.25rem 1rem 0.1rem;
	margin: 0;
}

.cpc-options-sheet__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0.65rem 1rem;
	text-align: left;
	font-size: 0.875rem;
	transition: background 0.15s;
}

.cpc-options-sheet__item:hover,
.cpc-options-sheet__item:focus {
	background: rgba(255, 255, 255, 0.08);
	outline: none;
}

.cpc-options-sheet__item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	opacity: 0.8;
	fill: currentColor;
}

.cpc-options-sheet__item-text {
	flex: 1;
}

/* Explore Later tab picker */
.cpc-explore-tab-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.5rem 1rem 0.75rem;
}

.cpc-explore-tab-btn {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	border-radius: 16px;
	padding: 0.3rem 0.75rem;
	font-size: 0.8rem;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.cpc-explore-tab-btn:hover,
.cpc-explore-tab-btn:focus {
	background: rgba(255, 255, 255, 0.22);
	outline: none;
}

.cpc-explore-tab-btn.is-selected {
	background: rgba(255, 255, 255, 0.28);
	border-color: rgba(255, 255, 255, 0.5);
	font-weight: 600;
}

.cpc-explore-tab-btn--save-now {
	background: rgba(99, 179, 237, 0.22);
	border-color: rgba(99, 179, 237, 0.5);
}

.cpc-explore-tab-btn--save-now:hover {
	background: rgba(99, 179, 237, 0.35);
}

.cpc-explore-saved-confirm {
	padding: 0.4rem 1rem 0.65rem;
	font-size: 0.82rem;
	color: rgba(99, 237, 150, 0.95);
	display: none;
}

.cpc-explore-saved-confirm.is-visible {
	display: block;
}

/* =========================================================
   RECALL QUEUE DRAWER  (z-index 22)
   ========================================================= */

.cpc-recall-drawer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 22;
	max-height: 75%;
	overflow-y: auto;
	border-radius: 0 0 20px 20px;
	background: rgba(18, 18, 24, 0.62);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: none;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 0.875rem;
	transform: translateY(-100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	-webkit-overflow-scrolling: touch;
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.cpc-recall-drawer {
		background: rgba(18, 18, 24, 0.94);
	}
}

.cpc-recall-drawer.is-open {
	transform: translateY(0);
}

.cpc-recall-drawer__handle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cpc-recall-drawer__title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin: 0;
}

.cpc-recall-drawer__close {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0.25rem;
	opacity: 0.7;
	line-height: 1;
	font-size: 1.25rem;
}

.cpc-recall-drawer__close:hover {
	opacity: 1;
}

.cpc-recall-tabs {
	display: flex;
	gap: 0;
	overflow-x: auto;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cpc-recall-tabs::-webkit-scrollbar {
	display: none;
}

.cpc-recall-tab-btn {
	flex-shrink: 0;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 0.5rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.cpc-recall-tab-btn.is-active {
	color: #fff;
	border-bottom-color: #fff;
}

.cpc-recall-tab-btn:hover {
	color: rgba(255, 255, 255, 0.9);
}

.cpc-recall-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpc-recall-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cpc-recall-item:last-child {
	border-bottom: none;
}

.cpc-recall-item__thumb {
	width: 56px;
	height: 36px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.1);
}

.cpc-recall-item__thumb-placeholder {
	width: 56px;
	height: 36px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.cpc-recall-item__body {
	flex: 1;
	min-width: 0;
}

.cpc-recall-item__title {
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0.15rem;
}

.cpc-recall-item__meta {
	font-size: 0.72rem;
	opacity: 0.55;
}

.cpc-recall-item__actions {
	display: flex;
	gap: 0.35rem;
	flex-shrink: 0;
}

.cpc-recall-item__action-btn {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 0.2rem 0.35rem;
	font-size: 0.75rem;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}

.cpc-recall-item__action-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.cpc-recall-empty {
	padding: 1.5rem 1rem;
	text-align: center;
	opacity: 0.5;
	font-size: 0.82rem;
	line-height: 1.6;
}

.cpc-recall-loading {
	padding: 1rem;
	text-align: center;
	opacity: 0.5;
	font-size: 0.82rem;
}

/* ── 9D: Comment vote buttons ────────────────────────────────────────────── */
.cpc-comment__votes {
	display: inline-flex;
	gap: 0.5rem;
	margin-left: 0.75rem;
}

.cpc-vote-btn {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 0.78rem;
	opacity: 0.6;
	padding: 0 0.2rem;
	transition: opacity 0.15s;
}

.cpc-vote-btn:hover,
.cpc-vote-btn.is-active {
	opacity: 1;
	color: #63b3ed;
}

.cpc-vote-btn.is-active {
	font-weight: 700;
}

.cpc-vote-count {
	font-variant-numeric: tabular-nums;
}

/* ── 9D: Comment notify toggle ───────────────────────────────────────────── */
.cpc-comments-drawer__notify {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	opacity: 0.7;
	margin: 0.4rem 0.75rem 0.5rem;
	cursor: pointer;
}

.cpc-comments-drawer__notify[hidden] {
	display: none;
}

.cpc-comments-drawer__notify input[type="checkbox"] {
	accent-color: #63b3ed;
}

/* ── Engagement OS visual system — WWP/CPC reels reference ─────────────── */
.cpc-playlist--reels {
	--cpc-engagement-obsidian: #08080a;
	--cpc-engagement-surface: rgb(18 18 24 / 62%);
	--cpc-engagement-surface-solid: rgb(18 18 24 / 94%);
	--cpc-engagement-border: rgb(255 255 255 / 16%);
	--cpc-engagement-cyan: #00f0ff;
	--cpc-engagement-purple: #ad00ff;
	--cpc-engagement-green: #39ff14;
	--cpc-engagement-muted: #b9cacb;
	--cpc-engagement-font: "Hanken Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-family: var(--cpc-engagement-font);
}

/* Rail backdrop: a dark pill behind the whole rail plus darker buttons so the
   icons stay legible over bright footage. Scoped to the rail only. */
.cpc-playlist--reels .cpc-icon-rail {
	/* --cpc-rail-backdrop-alpha (0–1) and --cpc-rail-backdrop-blur come from the
	   super-admin "Reels appearance" sliders; these are the defaults. */
	--cpc-rail-alpha: var(--cpc-rail-backdrop-alpha, 0.46);
	--cpc-rail-blur: var(--cpc-rail-backdrop-blur, 10px);
	--cpc-rail-surface: rgb(8 8 12 / min(0.95, calc(0.4 + var(--cpc-rail-alpha) * 0.8)));
	right: max(0.5rem, env(safe-area-inset-right));
	gap: 0.75rem;
}

/* Drawn as a pseudo-element so the backdrop never changes the rail's size or position. */
.cpc-playlist--reels .cpc-icon-rail::before {
	content: "";
	position: absolute;
	inset: -0.5rem -0.3rem;
	z-index: -1;
	border-radius: 999px;
	background: linear-gradient(180deg, rgb(0 0 0 / calc(var(--cpc-rail-alpha) * 0.65)), rgb(0 0 0 / var(--cpc-rail-alpha)));
	box-shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 8px 28px rgb(0 0 0 / calc(var(--cpc-rail-alpha) * 0.75));
	backdrop-filter: blur(var(--cpc-rail-blur)) saturate(120%);
	-webkit-backdrop-filter: blur(var(--cpc-rail-blur)) saturate(120%);
	pointer-events: none;
}

.cpc-playlist--reels .cpc-icon-btn__circle {
	width: 40px;
	height: 40px;
	border: 1px solid rgb(255 255 255 / 22%);
	background: var(--cpc-rail-icon-bg, var(--cpc-rail-surface));
	box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
	backdrop-filter: blur(calc(var(--cpc-rail-blur) + 8px));
	-webkit-backdrop-filter: blur(calc(var(--cpc-rail-blur) + 8px));
}

.cpc-playlist--reels .cpc-icon-rail .cpc-icon-btn__label {
	text-shadow: 0 1px 2px rgb(0 0 0 / 90%), 0 0 6px rgb(0 0 0 / 70%);
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.cpc-playlist--reels .cpc-icon-rail::before {
		background: rgb(0 0 0 / 58%);
	}

	.cpc-playlist--reels .cpc-icon-btn__circle {
		background: var(--cpc-rail-icon-bg, rgb(8 8 12 / 92%));
	}
}

.cpc-playlist--reels .cpc-icon-btn:hover .cpc-icon-btn__circle,
.cpc-playlist--reels .cpc-icon-btn:focus-visible .cpc-icon-btn__circle {
	color: var(--cpc-engagement-cyan);
	border-color: rgb(0 240 255 / 52%);
	background: rgb(18 18 24 / 78%);
}

.cpc-playlist--reels .cpc-icon-btn[aria-pressed="true"] .cpc-icon-btn__circle {
	color: var(--cpc-engagement-obsidian);
	border-color: rgb(0 240 255 / 78%);
	background: var(--cpc-engagement-cyan);
	box-shadow: 0 0 18px rgb(0 240 255 / 28%);
}

.cpc-playlist--reels .cpc-icon-btn__label {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.61rem;
	font-weight: 600;
	letter-spacing: 0.035em;
}

.cpc-playlist--reels .cpc-reel-info {
	right: 4.75rem;
	padding: 0.6rem 1rem 0.75rem;
	background: linear-gradient(90deg, rgb(8 8 10 / 36%), rgb(8 8 10 / 0%));
	border-radius: 0 14px 14px 0;
}

.cpc-playlist--reels .cpc-reel-info__creator {
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}

.cpc-playlist--reels .cpc-reel-info__avatar {
	width: 2.25rem;
	height: 2.25rem;
	padding: 2px;
	border: 2px solid var(--cpc-engagement-cyan);
	background: var(--cpc-engagement-obsidian);
	box-shadow: 0 0 14px rgb(0 240 255 / 20%);
}

.cpc-playlist--reels .cpc-reel-info__name {
	font-size: 0.94rem;
	font-weight: 750;
}

.cpc-playlist--reels .cpc-reel-info__verified {
	background: var(--cpc-engagement-cyan);
	color: var(--cpc-engagement-obsidian);
}

.cpc-playlist--reels .cpc-reel-info__subtitle,
.cpc-playlist--reels .cpc-reel-info__audio,
.cpc-playlist--reels .cpc-reel-info__meta {
	color: var(--cpc-engagement-muted);
}

.cpc-playlist--reels .cpc-reel-info__follow,
.cpc-playlist--reels .cpc-reel-info__subscribe {
	border-color: var(--cpc-engagement-border);
	background: var(--cpc-engagement-surface);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card {
	max-width: min(280px, calc(100% - 5.5rem));
	padding: 0.55rem 0.65rem;
	border-color: var(--cpc-engagement-border);
	border-radius: 12px;
	background: var(--cpc-engagement-surface);
	box-shadow: 0 18px 60px rgb(0 0 0 / 35%), 0 0 0 1px rgb(0 240 255 / 9%) inset;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card::before {
	background: linear-gradient(90deg, rgb(0 240 255 / 10%), transparent 72%);
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card .cpc-overlay-card__eyebrow {
	color: var(--cpc-engagement-cyan);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.58rem;
	letter-spacing: 0.12em;
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card .cpc-overlay-card__title {
	font-size: 0.82rem;
	line-height: 1.2;
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card .cpc-overlay-card__body {
	font-size: 0.72rem;
	line-height: 1.3;
}

.cpc-playlist--reels .cpc-overlay-card--ambient-card .cpc-overlay-card__action,
.cpc-playlist--reels .cpc-overlay-card--ambient-card .cpc-overlay-card__link {
	min-height: 2rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--cpc-engagement-border);
	border-radius: 8px;
	background: rgb(18 18 24 / 82%);
	font-size: 0.7rem;
}

.cpc-playlist--reels .cpc-comments-entry {
	right: 1rem;
	bottom: max(0.5rem, env(safe-area-inset-bottom));
	left: 1rem;
	height: 48px;
	min-height: 48px;
	box-sizing: border-box;
	gap: 0.4rem;
	padding: 0.3rem 0.4rem;
	border-color: var(--cpc-engagement-border);
	background: var(--cpc-engagement-surface);
	box-shadow: 0 8px 28px rgb(0 0 0 / 32%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.cpc-playlist--reels .cpc-comments-entry__open {
	min-width: 0;
	min-height: 38px;
	padding-inline: 0.8rem;
	background: transparent;
	color: rgb(255 255 255 / 76%);
	font-size: 0.86rem;
}

.cpc-playlist--reels .cpc-comments-entry__tools {
	flex: 0 0 auto;
	gap: 0.25rem;
}

.cpc-playlist--reels .cpc-comments-entry__tool {
	min-width: 36px;
	height: 36px;
	padding-inline: 0.42rem;
	border-color: transparent;
	background: transparent;
}

.cpc-playlist--reels .cpc-comments-entry__tool:hover,
.cpc-playlist--reels .cpc-comments-entry__tool:focus-visible {
	color: var(--cpc-engagement-cyan);
	border-color: var(--cpc-engagement-border);
	background: rgb(255 255 255 / 8%);
}

.cpc-playlist--reels .cpc-comments-entry__tool[hidden],
.cpc-playlist--reels .cpc-comments-drawer__tool[hidden] {
	display: none;
}

.cpc-playlist--reels .cpc-comments-drawer__panel {
	border-left: 1px solid var(--cpc-engagement-border);
	background: var(--cpc-engagement-surface-solid);
}

@media (max-width: 520px) {
	.cpc-playlist--reels {
		--cpc-comments-entry-height: 3.5rem;
		--cpc-reel-info-height: 5.25rem;
	}

	.cpc-playlist--reels .cpc-reel-info {
		right: 4.35rem;
		padding-right: 0.45rem;
	}

	.cpc-playlist--reels .cpc-comments-entry {
		right: 0.75rem;
		left: 0.75rem;
	}

	.cpc-playlist--reels .cpc-comments-entry__tool {
		min-width: 34px;
		width: 34px;
		height: 34px;
		padding: 0;
	}
}

@media (max-width: 768px) {
	.cpc-playlist--reels .cpc-icon-rail [data-cpc-action="follow"],
	.cpc-playlist--reels .cpc-icon-rail [data-cpc-action="subscribe"],
	.cpc-playlist--reels .cpc-icon-rail [data-cpc-action="unlock"],
	.cpc-playlist--reels .cpc-icon-rail [data-cpc-action="tip"],
	.cpc-playlist--reels .cpc-icon-rail [data-cpc-action="product_cta"] {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpc-playlist--reels .cpc-icon-btn__circle,
	.cpc-playlist--reels .cpc-overlay-card,
	.cpc-playlist--reels .cpc-comments-entry {
		transition: none;
	}
}

/* ── 12A/12B: Report dialog ─────────────────────────────────────── */
.cpc-report-dialog {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
}

.cpc-report-dialog[hidden] {
	display: none;
}

.cpc-report-dialog__panel {
	width: 100%;
	max-width: 480px;
	max-height: 85%;
	overflow-y: auto;
	padding: 0.9rem 1rem 1.1rem;
	border-radius: 20px 20px 0 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: none;
	background: rgba(18, 18, 24, 0.94);
	color: #fff;
	font-size: 0.875rem;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
}

.cpc-report-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.cpc-report-dialog__title {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
}

.cpc-report-dialog__close,
.cpc-report-dialog__cancel {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: rgb(255 255 255 / 80%);
	font: inherit;
	cursor: pointer;
}

.cpc-report-dialog__prompt {
	margin: 0 0 0.4rem;
	color: rgb(255 255 255 / 72%);
}

.cpc-report-dialog__reasons {
	display: grid;
	gap: 0.15rem;
	margin-bottom: 0.6rem;
}

.cpc-report-dialog__reason {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 40px;
	padding: 0 0.4rem;
	border-radius: 10px;
	cursor: pointer;
}

.cpc-report-dialog__reason:hover,
.cpc-report-dialog__reason:focus-within {
	background: rgba(255, 255, 255, 0.08);
}

.cpc-report-dialog__details {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font: inherit;
	resize: vertical;
}

.cpc-report-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

.cpc-report-dialog__submit {
	min-height: 44px;
	padding: 0 1.1rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #0a0e14;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.cpc-report-dialog__submit:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.cpc-report-dialog__status {
	margin: 0.6rem 0 0;
	color: rgb(255 255 255 / 80%);
}

.cpc-report-dialog__status:empty {
	display: none;
}

.cpc-report-dialog__login a {
	color: #fff;
	font-weight: 700;
}

.cpc-comment__report {
	opacity: 0.6;
}

.cpc-comment__report:hover,
.cpc-comment__report:focus-visible {
	opacity: 1;
}

@media (min-width: 768px) {
	.cpc-report-dialog {
		align-items: center;
	}

	.cpc-report-dialog__panel {
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 20px;
	}
}

/* ── 11C: Access request widget ─────────────────────────────────── */
.cpc-access-request {
	display: grid;
	gap: 0.6rem;
	max-width: 520px;
	padding: 1rem;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 12px;
}

.cpc-access-request__title {
	margin: 0;
	font-weight: 700;
}

.cpc-access-request textarea {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
}

.cpc-access-request button {
	min-height: 44px;
	cursor: pointer;
}

/* ── 13: Discovery lists (rankings, featured, my library) ───────── */
.cpc-discovery {
	margin: 1.5rem 0;
}

.cpc-discovery__title {
	margin: 0 0 0.75rem;
}

.cpc-discovery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

ol.cpc-discovery__grid {
	counter-reset: cpc-rank;
}

ol.cpc-discovery__grid > .cpc-discovery__card {
	counter-increment: cpc-rank;
}

ol.cpc-discovery__grid > .cpc-discovery__card::before {
	content: counter(cpc-rank);
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	z-index: 1;
	min-width: 1.6rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.cpc-discovery__card {
	position: relative;
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.cpc-discovery__card a {
	display: grid;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.cpc-discovery__card img,
.cpc-discovery__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	object-fit: cover;
	background: rgba(127, 127, 127, 0.18);
}

.cpc-discovery__name {
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cpc-discovery__card a:hover .cpc-discovery__name,
.cpc-discovery__card a:focus-visible .cpc-discovery__name {
	text-decoration: underline;
}

.cpc-discovery__meta {
	opacity: 0.72;
	font-size: 0.85em;
}

.cpc-discovery__progress {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: rgba(127, 127, 127, 0.25);
	overflow: hidden;
}

.cpc-discovery__progress > span {
	display: block;
	height: 100%;
	background: currentColor;
}

.cpc-discovery__list {
	margin: 0;
	padding-left: 1.2rem;
}

/* Slides must not spill over the page while the old item leaves. */
.cpc-playlist__stage.cpc-tx-in-slide-next,
.cpc-playlist__stage.cpc-tx-in-slide-prev {
	overflow: hidden;
}

/* --- Reels progress scrubber ---
   A hairline on the bottom edge, under the comment bar; grows into a
   draggable bar with a time readout on hover/touch. See initReelScrubber(). */
.cpc-scrubber {
	position: absolute;
	left: 0;
	right: 0;
	bottom: env(safe-area-inset-bottom, 0px);
	z-index: 18;
	height: 14px;
	display: flex;
	align-items: flex-end;
	cursor: pointer;
	touch-action: none;
	outline: none;
}
.cpc-scrubber[hidden] { display: none; }
.cpc-scrubber__track {
	position: relative;
	width: 100%;
	height: 3px;
	background: rgb(255 255 255 / 22%);
	transition: height 0.15s ease;
}
.cpc-scrubber__buffer,
.cpc-scrubber__fill {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform: scaleX(0);
}
.cpc-scrubber__buffer { background: rgb(255 255 255 / 28%); }
.cpc-scrubber__fill { background: var(--cpc-scrubber-color, #fff); }
.cpc-scrubber__thumb {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--cpc-scrubber-color, #fff);
	box-shadow: 0 1px 6px rgb(0 0 0 / 45%);
	transform: scale(0);
	transition: transform 0.15s ease;
}
.cpc-scrubber__time {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	padding: 3px 10px;
	border-radius: 999px;
	background: rgb(0 0 0 / 62%);
	-webkit-backdrop-filter: blur(8px);
	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;
}
.cpc-scrubber:hover .cpc-scrubber__track,
.cpc-scrubber:focus-visible .cpc-scrubber__track,
.cpc-scrubber.is-scrubbing .cpc-scrubber__track { height: 6px; }
.cpc-scrubber:hover .cpc-scrubber__thumb,
.cpc-scrubber:focus-visible .cpc-scrubber__thumb,
.cpc-scrubber.is-scrubbing .cpc-scrubber__thumb { transform: scale(1); }
.cpc-scrubber:hover .cpc-scrubber__time,
.cpc-scrubber:focus-visible .cpc-scrubber__time,
.cpc-scrubber.is-scrubbing .cpc-scrubber__time { opacity: 1; }

/* Room for the scrubber under the comment bar. */
.cpc-playlist--reels.cpc-playlist--has-scrubber .cpc-comments-entry {
	bottom: calc(max(0.5rem, env(safe-area-inset-bottom)) + 12px);
}

/* Tap-to-play/pause feedback in the middle of the reel. */
.cpc-play-flash {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 9;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 50%;
	background: rgb(0 0 0 / 45%) center / 30px no-repeat;
	opacity: 0;
	pointer-events: none;
}
.cpc-play-flash.is-play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z' fill='%23fff'/%3E%3C/svg%3E"); }
.cpc-play-flash.is-pause { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1' fill='%23fff'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1' fill='%23fff'/%3E%3C/svg%3E"); }
.cpc-play-flash.is-visible { animation: cpc-play-flash 0.7s ease-out forwards; }
@keyframes cpc-play-flash {
	0% { opacity: 1; transform: scale(0.85); }
	100% { opacity: 0; transform: scale(1.25); }
}