/*
 * BOT — three-medium demo sequencer styles (index-new.html).
 * Text chat → Audio (waveform) → Video avatar, sliding panels.
 * Loads after css/main.css and css/avatar.css.
 */
.stage-viewport {
	position: relative;
	overflow: hidden;
}
.stage-track {
	display: flex;
	width: 300%;
	transition: transform 0.7s var(--ease-out);
}
.panel {
	width: 33.3333%;
	flex-shrink: 0;
	height: 480px;
	background: #000;
}

/* Panel 1 — text chat */
.panel-text {
	display: flex;
	flex-direction: column;
	background: var(--surface);
}
.panel-text .chat-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Panel 2 — audio call */
.panel-audio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}
#wave-canvas {
	width: 72%;
	height: 140px;
	display: block;
}
.audio-status {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.audio-status span { color: var(--text); font-weight: 500; }
.cv-controls-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Panel 3 — video avatar (left-placed) + live transcript on the right */
.panel-video {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
}
.panel-video .cv-frame { flex-shrink: 0; }
.video-chat {
	flex: 1;
	min-width: 0;
	max-height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-self: stretch;
	justify-content: flex-start;
	padding-top: var(--space-1);
}
.video-chat .msg { max-width: 92%; }

/* Mode chips double as sync indicators / switches */
button.mono-chip {
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
button.mono-chip:hover { border-color: var(--text-secondary); }
button.mono-chip.on {
	background: var(--text);
	color: #000;
	border-color: var(--text);
}

@media (max-width: 768px) {
	.panel { height: 440px; }
	#wave-canvas { width: 84%; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
	.stage-track { transition: none; }
	button.mono-chip { transition: none; }
}