/* ── Inter font ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Dark-theme variables (mirrors the app exactly) ───── */

.ts-showcase {
	--ts-primary:                #6366f1;
	--ts-primary-hover:          #4f46e5;
	--ts-secondary:              #8b5cf6;
	--ts-secondary-transparent:  rgba(139, 92, 246, 0.52);
	--ts-success:                #10b981;
	--ts-success-hover:          #059669;
	--ts-success-transparent:    rgba(16, 185, 129, 0.52);
	--ts-warning:                #f59e0b;
	--ts-danger:                 #ef4444;
	--ts-danger-hover:           #dc2626;

	--ts-bg-primary:             #1e293b;
	--ts-bg-secondary:           #111827;
	--ts-bg-tertiary:            #374151;

	--ts-border-primary:         #4b5563;
	--ts-border-secondary:       #374151;

	--ts-text-primary:           #f3f4f6;
	--ts-text-secondary:         #9ca3af;
	--ts-text-tertiary:          #6b7280;

	--ts-font-heading:           "Inter", "Segoe UI", system-ui, sans-serif;
	--ts-font-body:              "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* root element */
	font-family: var(--ts-font-body);
	background-color: transparent;
	color: var(--ts-text-primary);
	color-scheme: dark;
	border-radius: 0.75rem;
	border: 1px solid var(--ts-border-primary);
	overflow: hidden;
	position: relative;
	line-height: 1.5;
	box-sizing: border-box;
}
.ts-showcase *, .ts-showcase *::before, .ts-showcase *::after {
	box-sizing: border-box;
}

/* ── Media player (audio or video) ────────────────────── */

.ts-media-container {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--ts-border-secondary);
	background-color: var(--ts-bg-primary);
}
.ts-media-container audio {
	width: 100%;
	height: 40px;
}
.ts-media-container video {
	width: 100%;
	max-height: 360px;
	border-radius: 0.375rem;
	background: #000;
	object-fit: contain;
}

/* ── Model selector ───────────────────────────────────── */

.ts-model-selector-wrap {
	padding: 0.75rem 1.5rem;
	background-color: var(--ts-bg-primary);
	border-bottom: 1px solid var(--ts-border-secondary);
}
.ts-model-select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background-color: var(--ts-bg-tertiary);
	color: var(--ts-text-primary);
	border: 1px solid var(--ts-border-secondary);
	border-radius: 0.5rem;
	font-family: var(--ts-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2rem;
}
.ts-model-select:hover,
.ts-model-select:focus {
	border-color: var(--ts-primary);
	outline: none;
}
.ts-model-select option {
	background-color: var(--ts-bg-tertiary);
	color: var(--ts-text-primary);
}

/* ── Model description ────────────────────────────────── */

.ts-model-description {
	padding: 0.75rem 1.5rem;
	background-color: var(--ts-bg-primary);
	border-bottom: 1px solid var(--ts-border-secondary);
	min-height: 1em;
}
.ts-model-description p {
	margin: 0;
	color: var(--ts-text-primary);
	font-size: 0.85rem;
	line-height: 1.5;
}

/* ── Toolbar ──────────────────────────────────────────── */

.ts-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.5rem 1.5rem;
	background-color: var(--ts-bg-primary);
	border-bottom: 1px solid var(--ts-border-secondary);
}
/* toggle: hidden checkbox + icon-button label (mirrors app) */
.ts-toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ts-toggle-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 34px;
	padding: 0 0.625rem;
	font-size: 0.8rem;
	font-family: var(--ts-font-body);
	border: 1px solid var(--ts-bg-tertiary);
	border-radius: 0.5rem;
	background-color: var(--ts-bg-tertiary);
	color: var(--ts-text-secondary);
	cursor: pointer;
	transition: all 0.2s ease;
	flex: none;
	white-space: nowrap;
}
.ts-toggle-label:hover,
.ts-toggle-input:checked + .ts-toggle-label {
	border-color: var(--ts-secondary);
}
.ts-toggle-input:checked + .ts-toggle-label {
	background-color: var(--ts-bg-primary);
	color: var(--ts-text-primary);
}

/* ── Editor scroll container ──────────────────────────── */

.ts-editor-scroll {
	max-height: 600px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--ts-bg-primary);
	padding: 1rem 1.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--ts-border-primary) var(--ts-bg-primary);
}
.ts-editor-scroll::-webkit-scrollbar {
	width: 6px;
}
.ts-editor-scroll::-webkit-scrollbar-track {
	background: var(--ts-bg-primary);
}
.ts-editor-scroll::-webkit-scrollbar-thumb {
	background-color: var(--ts-border-primary);
	border-radius: 3px;
}

/* ── Editor ───────────────────────────────────────────── */

.ts-editor {
	position: relative;
	outline: none;
	padding-right: 0;
}

/* ── Segment ──────────────────────────────────────────── */

.ts-segment {
	cursor: pointer;
	padding: 0.375rem 0.5rem;
	margin-bottom: 0.7em;
	border-radius: 0.375rem;
	background-color: var(--ts-bg-tertiary);
	border: 1px solid transparent;
	transition: all 0.2s ease;
	display: block;
	position: relative;
	white-space: pre-wrap;
	word-break: break-word;
	min-height: 2.43em;
	color: var(--ts-text-primary);
	line-height: 2em;
	scroll-margin-top: 30vh;
	font-family: var(--ts-font-body);
	font-size: 1rem;
	outline: none;
}

/* Speaker label — top left inside segment */
.ts-segment[data-speaker]::before {
	content: attr(data-speaker);
	color: var(--speaker-color, #c084fc);
	font-size: 1.05rem;
	font-weight: 700;
	display: block;
	margin-bottom: 0.25em;
	pointer-events: none;
	user-select: none;
}

/* When no speaker, reserve top space for the timestamp pill */
.ts-segment[pretty-time]:not([data-speaker]) {
	padding-top: 1.6rem;
}

/* Timestamps pill — top left when no speaker */
.ts-segment[pretty-time]:not([data-speaker])::after {
	content: attr(pretty-time) " - " attr(pretty-end-time);
	color: var(--ts-text-secondary);
	font-size: 0.65rem;
	font-family: monospace;
	padding: 0.05em 0;
	border-radius: 9999px;
	line-height: 1.4;
	position: absolute;
	top: 0.375rem;
	left: 0.5rem;
	pointer-events: none;
	user-select: none;
}

/* Timestamps pill — top right when speaker is present */
.ts-segment[data-speaker][pretty-time]::after {
	content: attr(pretty-time) " - " attr(pretty-end-time);
	color: var(--ts-text-secondary);
	font-size: 0.65rem;
	font-family: monospace;
	padding: 0.05em 0;
	border-radius: 9999px;
	line-height: 1.4;
	position: absolute;
	top: 0.85rem;
	right: 0.5rem;
	pointer-events: none;
	user-select: none;
}

/* hover */
.ts-segment:hover {
	background-color: var(--ts-border-secondary);
	border-color: var(--ts-primary);
}

/* currently playing */
.ts-segment.playing {
	background-color: var(--ts-success);
	color: white;
	border-color: var(--ts-success);
}
.ts-segment.playing::before,
.ts-segment.playing::after {
	color: white !important;
}

/* scrolled-into-view flash */
.ts-segment.scrolled-into-view {
	outline: 1px solid var(--ts-primary);
	animation: ts-border-anim 3.5s ease-in-out;
	transition: 0.3s ease-in-out;
}

@keyframes ts-border-anim {
	from { border-color: var(--ts-primary); }
	to   { border-color: transparent; }
}

/* ── Buttons ──────────────────────────────────────────── */

.ts-btn {
	padding: 0.375rem 0.75rem;
	border: none;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-family: var(--ts-font-body);
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	line-height: 1.4;
}
.ts-btn-primary       { background-color: var(--ts-primary);    color: white; }
.ts-btn-primary:hover { background-color: var(--ts-primary-hover); }

.ts-btn-success       { background-color: var(--ts-success);    color: white; }
.ts-btn-success:hover { background-color: var(--ts-success-hover); }

/* jump button */
.ts-jump-btn {
	font-size: 0.8rem;
	height: 34px;
	padding: 0 0.625rem;
}