/* Preamble — author's note framing a chat dump */
.chat-preamble {
	background: var(--fg-muted-1);
	border-left: 4px solid var(--accent-color);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 2.5rem;
	border-radius: 0.5rem;
	font-style: italic;
	color: var(--fg-muted-5);
}
.chat-preamble::before {
	content: "Preamble";
	display: block;
	font-style: normal;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--accent-color);
	margin-bottom: 0.4rem;
}
.chat-preamble > *:first-of-type { margin-top: 0; }
.chat-preamble > *:last-child { margin-bottom: 0; }

/* Chat thread layout */
.chat-thread {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 2rem 0;
}

.chat-turn {
	padding: 0.875rem 1.25rem;
	border-radius: 1.125rem;
	line-height: 1.55;
}
.chat-turn > *:first-child { margin-top: 0; }
.chat-turn > *:last-child { margin-bottom: 0; }

/* User turn: right-aligned accent bubble */
.chat-user {
	align-self: flex-end;
	background: var(--accent-color);
	color: var(--fg-contrast);
	max-width: 80%;
	border-bottom-right-radius: 0.375rem;
}
.chat-user a { color: inherit; text-decoration: underline; }
.chat-user code {
	background: rgb(255 255 255 / 0.15);
	color: inherit;
}
.chat-user blockquote {
	border-left-color: rgb(255 255 255 / 0.4);
	color: inherit;
}

/* Assistant turn: flows as plain page content (no bubble) */
.chat-assistant {
	align-self: stretch;
	background: transparent;
	max-width: 100%;
	padding: 0.25rem 0;
	border-radius: 0;
}
/* Tighten headings inside the user bubble so they don't dominate */
.chat-user h2 { font-size: 1.25rem; margin-top: 1.25rem; }
.chat-user h3 { font-size: 1.1rem; margin-top: 1rem; }
.chat-user h4 { font-size: 1rem; }

@media (max-width: 600px) {
	.chat-user { max-width: 92%; }
}