:root {
	--pulse-cc-icon-color: #3f3f46;
	--pulse-cc-active-icon-color: #18181b;
	--pulse-cc-background: transparent;
	--pulse-cc-active-background: #f3f4f6;
	--pulse-cc-border: 1px solid transparent;
	--pulse-cc-active-border: 1px solid #e5e7eb;
	--pulse-cc-hover-brightness: 1.06;
	--pulse-cc-overlay-background: rgba(0, 0, 0, 0.42);
	--pulse-cc-overlay-padding: 0.22rem;
	--pulse-cc-overlay-border-radius: 999px;
	--pulse-cc-overlay-backdrop-filter: blur(6px);
	/* Status badge text is always dark — the badge has a frosted-glass white
	   background so dark text is legible in both light and dark themes. */
	--pulse-vtt-text-color: #2b2b2b;
}

@media (prefers-color-scheme: dark) {
	:root {
		--pulse-cc-icon-color: #f4f4f5;
		--pulse-cc-active-icon-color: #ffffff;
		--pulse-cc-active-background: #2f2f2f;
		--pulse-cc-active-border: 1px solid #3f3f46;
		--pulse-cc-hover-brightness: 1.1;
	}
}

html[data-theme-mode='light'],
html[data-theme='light'] {
	--pulse-cc-icon-color: #f3f3f3;
	--pulse-cc-active-icon-color: #383838;
	--pulse-cc-background: transparent;
	--pulse-cc-active-background: #f3f3f3;
	--pulse-cc-border: 1px solid transparent;
	--pulse-cc-active-border: 1px solid #f3f3f3;
	--pulse-cc-hover-brightness: 1.06;
}

html[data-theme-mode='dark'],
html[data-theme='dark'] {
	--pulse-cc-icon-color: #0f0f0f;
	--pulse-cc-active-icon-color: #d4d4d4;
	--pulse-cc-background: transparent;
	--pulse-cc-active-background: #2b2b2b;
	--pulse-cc-border: 1px solid transparent;
	--pulse-cc-active-border: 1px solid #2b2b2b;
	--pulse-cc-hover-brightness: 1.1;
}

.pulse-cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pulse-cc-gap, 0px);
	width: var(--pulse-cc-size, 28px);
	height: var(--pulse-cc-size, 28px);
	padding: 0;
	margin: 0;
	border-radius: var(--pulse-cc-radius, 8px);
	box-sizing: border-box;
	border: var(--pulse-cc-border);
	background: var(--pulse-cc-background);
	color: var(--pulse-cc-icon-color);
	cursor: pointer;
	line-height: 1;
	transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}
.pulse-cc-btn:hover {
	filter: brightness(var(--pulse-cc-hover-brightness));
}

.pulse-cc-btn--active {
	color: var(--pulse-cc-active-icon-color);
	background: var(--pulse-cc-active-background);
	border: var(--pulse-cc-active-border);
}

.pulse-cc-btn .pulse-cc-icon,
.pulse-cc-btn .pulse-cc-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pulse-cc-btn .pulse-cc-icon svg {
	width: var(--pulse-cc-icon-size, 18px);
	height: var(--pulse-cc-icon-size, 18px);
	display: block;
}

.pulse-cc-host {
	position: absolute;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pulse-cc-overlay-padding);
	border-radius: var(--pulse-cc-overlay-border-radius);
	background: var(--pulse-cc-overlay-background);
	backdrop-filter: var(--pulse-cc-overlay-backdrop-filter);
}

.pulse-vtt-status {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	right: 0.6rem;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: auto;
	margin-top: 0;
	font-size: 0.85rem;
	line-height: 1.2;
	color: var(--pulse-vtt-text-color);
	pointer-events: none;
	transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

.video-block[data-pulse-vtt-controls-visible='false'] .pulse-vtt-status {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.2rem);
}

.video-block[data-pulse-vtt-controls-visible='true'] .pulse-vtt-status {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pulse-vtt-status__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	background: rgba(255, 255, 255, 0.28);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(2, 6, 23, 0.1);
	backdrop-filter: blur(10px);
	transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
	pointer-events: auto;
}

.pulse-vtt-status__link:hover {
	background: rgba(255, 255, 255, 0.38);
	border-color: rgba(148, 163, 184, 0.35);
	transform: translateY(-1px);
}

.pulse-vtt-status__link[aria-disabled='true'] {
	opacity: 0.55;
	cursor: wait;
	pointer-events: none;
}

.pulse-vtt-status__bar {
	display: none;
	position: relative;
	height: 4px;
	width: 100%;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 8px 16px rgba(2, 6, 23, 0.08);
}

.pulse-vtt-status__fill {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
	transition: width 0.24s ease;
}

.video-block {
	position: relative;
}

/* When the CC button is injected directly into the video control bar (not inside the
   overlay host), inherit the bar's text color so the icon matches the other buttons. */
.video-block .flex .pulse-cc-btn:not(.pulse-cc-host .pulse-cc-btn) {
	color: inherit;
}

.video-block .flex .pulse-cc-btn:not(.pulse-cc-host .pulse-cc-btn):hover {
	filter: none;
	opacity: 0.8;
}