/* ==========================================================================
   Live demo — animated mock chat session with streamed, highlighted code.
   ========================================================================== */

.demo {
	padding: var(--space-32) var(--space-16);
}

.demo__window {
	max-width: var(--container-max);
	margin: 0 auto;
}

.demo__body {
	position: relative;
	gap: var(--space-12);
}

.demo__side {
	position: absolute;
	top: var(--space-12);
	right: var(--space-16);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	max-width: 40%;
}

.demo__line {
	gap: var(--space-8);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
}

.demo__prompt-sign {
	color: var(--color-accent);
}

.demo__command {
	color: var(--color-text);
	overflow-x: auto;
	white-space: nowrap;
}

.demo__user-line {
	color: var(--color-text);
}

.demo__user-prompt {
	color: var(--color-accent-secondary);
}

.demo__assistant-line {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

.demo__assistant-output {
	width: 100%;
}

.demo__assistant-prompt {
	color: var(--color-accent);
}

.demo__stream {
	color: var(--color-text);
	white-space: pre-wrap;
	word-break: break-word;
}

@media (max-width: 640px) {
	.demo__side {
		position: static;
		max-width: 100%;
		margin-bottom: var(--space-8);
	}
}