/**
 * YouTube Transcript Tool — front-end styles.
 * Responsive, mobile-first, with automatic dark mode support.
 *
 * Every selector below is scoped under `.ytt-widget` (rather than
 * written as a bare class) specifically so it out-specifies typical
 * theme/page-builder rules that target plain elements like `a` or
 * `button` — otherwise the host theme's own link/heading styles can
 * silently win over inherited values (e.g. a link's font-size),
 * since inheritance always loses to any rule that matches the
 * element directly, regardless of that rule's specificity.
 */

.ytt-widget {
	--ytt-bg: #ffffff;
	--ytt-surface: #f7f8fa;
	--ytt-border: #e2e4e9;
	--ytt-text: #1a1d23;
	--ytt-text-muted: #6b7280;
	--ytt-primary: #d92d20;
	--ytt-primary-hover: #b42318;
	--ytt-primary-contrast: #ffffff;
	--ytt-accent: #eef2ff;
	--ytt-mark-bg: #ffe58a;
	--ytt-radius: 12px;
	--ytt-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);

	box-sizing: border-box;
	max-width: 820px;
	margin: 0 auto;
	padding: 24px;
	background: var(--ytt-bg);
	border: 1px solid var(--ytt-border);
	border-radius: var(--ytt-radius);
	box-shadow: var(--ytt-shadow);
	color: var(--ytt-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

@media (prefers-color-scheme: dark) {
	.ytt-widget {
		--ytt-bg: #16181d;
		--ytt-surface: #1e2128;
		--ytt-border: #2b2f38;
		--ytt-text: #e6e8eb;
		--ytt-text-muted: #9aa1ac;
		--ytt-primary: #ff5c4d;
		--ytt-primary-hover: #ff7a6d;
		--ytt-primary-contrast: #16181d;
		--ytt-accent: #232840;
		--ytt-mark-bg: #7a5b00;
	}
}

.ytt-widget *,
.ytt-widget *::before,
.ytt-widget *::after {
	box-sizing: inherit;
}

/*
 * The [hidden] attribute is how every show/hide toggle in this widget
 * works. Without this rule, any element below that also sets its own
 * `display` (e.g. flex, for centering content) would silently win
 * over the browser's default `[hidden] { display: none }` — same
 * specificity, but author styles beat the user-agent stylesheet
 * regardless of specificity. This keeps [hidden] authoritative.
 */
.ytt-widget [hidden] {
	display: none !important;
}

.ytt-widget .ytt-label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.4;
	margin: 0 0 8px;
}

.ytt-widget .ytt-input-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ytt-widget .ytt-url-input {
	flex: 1 1 260px;
	min-width: 0;
	padding: 12px 14px;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid var(--ytt-border);
	border-radius: 8px;
	background: var(--ytt-surface);
	color: var(--ytt-text);
}

.ytt-widget .ytt-url-input:focus {
	outline: 2px solid var(--ytt-primary);
	outline-offset: 1px;
}

.ytt-widget .ytt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 18px;
	font-size: 0.95rem;
	line-height: 1.3;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
	white-space: nowrap;
	text-decoration: none;
}

.ytt-widget .ytt-btn:active {
	transform: translateY(1px);
}

.ytt-widget .ytt-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ytt-widget .ytt-btn-primary {
	background: var(--ytt-primary);
	color: var(--ytt-primary-contrast);
}

.ytt-widget .ytt-btn-primary:hover:not(:disabled) {
	background: var(--ytt-primary-hover);
	color: var(--ytt-primary-contrast);
}

.ytt-widget .ytt-btn-secondary {
	background: var(--ytt-surface);
	color: var(--ytt-text);
	border-color: var(--ytt-border);
}

.ytt-widget .ytt-btn-secondary:hover:not(:disabled) {
	background: var(--ytt-accent);
	color: var(--ytt-text);
}

.ytt-widget .ytt-spinner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	color: var(--ytt-text-muted);
	font-size: 0.95rem;
	line-height: 1.4;
}

.ytt-widget .ytt-spinner-circle {
	width: 18px;
	height: 18px;
	border: 3px solid var(--ytt-border);
	border-top-color: var(--ytt-primary);
	border-radius: 50%;
	animation: ytt-spin 0.8s linear infinite;
}

@keyframes ytt-spin {
	to {
		transform: rotate(360deg);
	}
}

.ytt-widget .ytt-error {
	margin-top: 20px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #fef3f2;
	border: 1px solid #fda29b;
	color: #b42318;
	font-size: 0.92rem;
	line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
	.ytt-widget .ytt-error {
		background: #3a1a17;
		border-color: #7a2e26;
		color: #ffb4a8;
	}
}

.ytt-widget .ytt-result {
	margin-top: 24px;
}

.ytt-widget .ytt-video-preview {
	margin-bottom: 14px;
}

.ytt-widget .ytt-video-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ytt-surface);
	border: 1px solid var(--ytt-border);
}

.ytt-widget .ytt-video-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.ytt-widget .ytt-play-btn {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 68px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.ytt-widget .ytt-play-btn:hover,
.ytt-widget .ytt-play-btn:focus-visible {
	transform: scale(1.08);
}

.ytt-widget .ytt-play-btn svg {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.ytt-widget .ytt-video-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ytt-widget .ytt-video-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
}

.ytt-widget .ytt-video-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 16px;
}

.ytt-widget .ytt-video-channel {
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--ytt-text-muted);
}

.ytt-widget .ytt-watch-link {
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--ytt-primary);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.ytt-widget .ytt-watch-link:hover {
	text-decoration: underline;
}

.ytt-widget .ytt-video-title {
	font-size: 1.25rem;
	line-height: 1.35;
	font-weight: 600;
	margin: 0;
	word-break: break-word;
}

.ytt-widget .ytt-stats {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}

.ytt-widget .ytt-stat {
	flex: 1 1 120px;
	background: var(--ytt-surface);
	border: 1px solid var(--ytt-border);
	border-radius: 10px;
	padding: 12px 14px;
	text-align: center;
}

.ytt-widget .ytt-stat-value {
	display: block;
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 700;
}

.ytt-widget .ytt-stat-label {
	display: block;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--ytt-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.ytt-widget .ytt-toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.ytt-widget .ytt-search-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ytt-widget .ytt-search-input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--ytt-border);
	border-radius: 8px;
	background: var(--ytt-surface);
	color: var(--ytt-text);
	font-size: 0.95rem;
	line-height: 1.4;
}

.ytt-widget .ytt-search-input:focus {
	outline: 2px solid var(--ytt-primary);
	outline-offset: 1px;
}

.ytt-widget .ytt-search-count {
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--ytt-text-muted);
	white-space: nowrap;
}

.ytt-widget .ytt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ytt-widget .ytt-transcript-box {
	border: 1px solid var(--ytt-border);
	border-radius: 10px;
	background: var(--ytt-surface);
	max-height: 480px;
	overflow-y: auto;
	padding: 18px;
}

.ytt-widget .ytt-transcript-text {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-size: 0.98rem;
	line-height: 1.7;
}

.ytt-widget .ytt-transcript-text p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
}

.ytt-widget .ytt-transcript-text mark {
	background: var(--ytt-mark-bg);
	color: inherit;
	font-size: inherit;
	border-radius: 3px;
	padding: 0 2px;
}

.ytt-widget .ytt-transcript-text mark.ytt-mark-active {
	outline: 2px solid var(--ytt-primary);
}

@media (max-width: 600px) {
	.ytt-widget {
		padding: 16px;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.ytt-widget .ytt-input-row {
		flex-direction: column;
	}

	.ytt-widget .ytt-btn {
		width: 100%;
	}

	.ytt-widget .ytt-actions .ytt-btn {
		flex: 1 1 calc(50% - 8px);
	}
}