/* ============================================================
   Prose / Markdown — canonical long-form rendering
   Mirrors design/system/components.css (.prose block).
   Import after tokens.css. Token-driven, theme-aware.

   Variants:
   - .prose            Default article scale (--text-base body)
   - .prose--compact   Chat / sidebar scale (--text-sm body)

   Legacy aliases (applied identically):
   - .markdown-view        (MarkdownView.razor)
   - .intercom-markdown    (IntercomOverlay chat bubbles)
   ============================================================ */

.prose,
.markdown-view,
.intercom-markdown {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-loose);
	color: var(--color-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.prose > :first-child,
.markdown-view > :first-child,
.intercom-markdown > :first-child { margin-top: 0; }

.prose > :last-child,
.markdown-view > :last-child,
.intercom-markdown > :last-child { margin-bottom: 0; }

/* ── Headings ─────────────────────────────────────────── */

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.markdown-view h1, .markdown-view h2, .markdown-view h3,
.markdown-view h4, .markdown-view h5, .markdown-view h6,
.intercom-markdown h1, .intercom-markdown h2, .intercom-markdown h3,
.intercom-markdown h4, .intercom-markdown h5, .intercom-markdown h6 {
	margin: var(--space-8) 0 var(--space-3);
	line-height: var(--leading-tight);
	color: var(--color-text);
}

.prose h1, .markdown-view h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold);     margin-top: 0; }
.prose h2, .markdown-view h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold);     margin-top: var(--space-9); }
.prose h3, .markdown-view h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.prose h4, .markdown-view h4 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
.prose h5, .markdown-view h5 { font-size: var(--text-lg);  font-weight: var(--weight-medium); }
.prose h6, .markdown-view h6 {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary);
}

/* Tighten when two headings are adjacent */
.prose h1 + h2, .prose h2 + h3, .prose h3 + h4, .prose h4 + h5, .prose h5 + h6,
.markdown-view h1 + h2, .markdown-view h2 + h3, .markdown-view h3 + h4,
.markdown-view h4 + h5, .markdown-view h5 + h6 { margin-top: var(--space-4); }

/* ── Paragraphs & inline ──────────────────────────────── */

.prose p,
.markdown-view p,
.intercom-markdown p {
	margin: 0 0 var(--space-5);
}

.prose strong, .markdown-view strong, .intercom-markdown strong {
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

.prose em, .markdown-view em, .intercom-markdown em { font-style: italic; }

.prose small, .markdown-view small {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/* ── Links ────────────────────────────────────────────── */

.prose a,
.markdown-view a,
.intercom-markdown a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.prose a:hover,
.markdown-view a:hover,
.intercom-markdown a:hover { color: var(--color-accent-hover); }

/* ── Lists ────────────────────────────────────────────── */

.prose ul, .prose ol,
.markdown-view ul, .markdown-view ol,
.intercom-markdown ul, .intercom-markdown ol {
	margin: 0 0 var(--space-5);
	padding-left: var(--space-7);
}

.prose ul, .markdown-view ul, .intercom-markdown ul { list-style: disc; }
.prose ol, .markdown-view ol, .intercom-markdown ol { list-style: decimal; }

.prose li, .markdown-view li, .intercom-markdown li {
	margin: var(--space-2) 0;
}

.prose li > ul, .prose li > ol,
.markdown-view li > ul, .markdown-view li > ol,
.intercom-markdown li > ul, .intercom-markdown li > ol {
	margin: var(--space-2) 0;
}

.prose li > p, .markdown-view li > p, .intercom-markdown li > p {
	margin: 0 0 var(--space-2);
}

.prose li input[type="checkbox"],
.markdown-view li input[type="checkbox"],
.intercom-markdown li input[type="checkbox"] {
	margin-right: var(--space-2);
	transform: translateY(1px);
	pointer-events: none;
}

/* ── Blockquote ───────────────────────────────────────── */

.prose blockquote,
.markdown-view blockquote,
.intercom-markdown blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-3) var(--space-6);
	border-left: 3px solid var(--color-accent);
	background: var(--color-accent-subtle);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--color-text-secondary);
}

.prose blockquote > :first-child,
.markdown-view blockquote > :first-child,
.intercom-markdown blockquote > :first-child { margin-top: 0; }

.prose blockquote > :last-child,
.markdown-view blockquote > :last-child,
.intercom-markdown blockquote > :last-child { margin-bottom: 0; }

/* ── Code ─────────────────────────────────────────────── */

.prose code, .prose pre, .prose kbd, .prose samp,
.markdown-view code, .markdown-view pre, .markdown-view kbd, .markdown-view samp,
.intercom-markdown code, .intercom-markdown pre, .intercom-markdown kbd, .intercom-markdown samp {
	font-family: var(--font-mono);
}

.prose :not(pre) > code,
.markdown-view :not(pre) > code,
.intercom-markdown :not(pre) > code {
	font-size: 0.9em;
	padding: 0.15em 0.4em;
	border-radius: var(--radius-xs);
	background: var(--color-surface-brushed);
	border: 1px solid var(--color-border-soft);
	color: var(--color-text);
}

.prose pre,
.markdown-view pre,
.intercom-markdown pre {
	margin: var(--space-6) 0;
	padding: var(--space-5);
	border-radius: var(--radius-sm);
	background: var(--color-surface-brushed);
	border: 1px solid var(--color-border-soft);
	overflow-x: auto;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.prose pre code,
.markdown-view pre code,
.intercom-markdown pre code {
	background: transparent;
	border: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
	white-space: pre;
}

/* ── Tables ───────────────────────────────────────────── */

.prose table,
.markdown-view table,
.intercom-markdown table {
	width: 100%;
	margin: var(--space-6) 0;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.prose th, .prose td,
.markdown-view th, .markdown-view td,
.intercom-markdown th, .intercom-markdown td {
	padding: var(--space-3) var(--space-5);
	border-bottom: 1px solid var(--color-border-soft);
	text-align: left;
	vertical-align: top;
}

.prose thead th,
.markdown-view thead th,
.intercom-markdown thead th {
	font-weight: var(--weight-semibold);
	color: var(--color-text-secondary);
	border-bottom: 1px solid var(--color-border-paper);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var(--text-xs);
}

.prose tbody tr:last-child td,
.markdown-view tbody tr:last-child td,
.intercom-markdown tbody tr:last-child td { border-bottom: none; }

/* ── Horizontal rule, media ───────────────────────────── */

.prose hr,
.markdown-view hr,
.intercom-markdown hr {
	margin: var(--space-8) 0;
	border: none;
	border-top: 1px solid var(--color-border-soft);
}

.prose img, .prose video,
.markdown-view img, .markdown-view video,
.intercom-markdown img, .intercom-markdown video {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	margin: var(--space-6) 0;
}

.prose figure, .markdown-view figure, .intercom-markdown figure {
	margin: var(--space-6) 0;
}

.prose figcaption,
.markdown-view figcaption,
.intercom-markdown figcaption {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	text-align: center;
}

/* ============================================================
   Compact variant — Chat, Intercom, narrow sidebars
   ============================================================ */

.prose--compact,
.intercom-markdown {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.prose--compact h1, .prose--compact h2, .prose--compact h3,
.prose--compact h4, .prose--compact h5, .prose--compact h6,
.intercom-markdown h1, .intercom-markdown h2, .intercom-markdown h3,
.intercom-markdown h4, .intercom-markdown h5, .intercom-markdown h6 {
	margin: var(--space-5) 0 var(--space-2);
}

.prose--compact h1, .intercom-markdown h1 {
	font-size: var(--text-xl); font-weight: var(--weight-semibold); margin-top: 0;
}
.prose--compact h2, .intercom-markdown h2 {
	font-size: var(--text-lg); font-weight: var(--weight-semibold);
}
.prose--compact h3, .intercom-markdown h3 {
	font-size: var(--text-base); font-weight: var(--weight-semibold);
}
.prose--compact h4, .intercom-markdown h4 {
	font-size: var(--text-sm); font-weight: var(--weight-semibold);
	text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary);
}
.prose--compact h5, .prose--compact h6,
.intercom-markdown h5, .intercom-markdown h6 {
	font-size: var(--text-sm); font-weight: var(--weight-medium);
}

.prose--compact p, .intercom-markdown p { margin: 0 0 var(--space-3); }

.prose--compact ul, .prose--compact ol,
.intercom-markdown ul, .intercom-markdown ol {
	margin: 0 0 var(--space-3);
	padding-left: var(--space-6);
}

.prose--compact li, .intercom-markdown li { margin: var(--space-1) 0; }

.prose--compact blockquote, .intercom-markdown blockquote {
	margin: var(--space-3) 0;
	padding: var(--space-2) var(--space-4);
}

.prose--compact pre, .intercom-markdown pre {
	margin: var(--space-3) 0;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-xs);
}

.prose--compact table, .intercom-markdown table {
	margin: var(--space-3) 0;
	font-size: var(--text-xs);
}

.prose--compact th, .prose--compact td,
.intercom-markdown th, .intercom-markdown td {
	padding: var(--space-2) var(--space-3);
}

.prose--compact hr, .intercom-markdown hr { margin: var(--space-4) 0; }
.prose--compact img, .intercom-markdown img { margin: var(--space-3) 0; }

/* ============================================================
   Chat user-bubble overrides (accent background → invert)
   ============================================================ */

.chat__msg--user .prose,
.chat__msg--user .prose--compact,
.chat__msg--user .intercom-markdown {
	color: var(--color-accent-text);
}

.chat__msg--user .prose a,
.chat__msg--user .prose--compact a,
.chat__msg--user .intercom-markdown a {
	color: var(--color-accent-text);
	text-decoration-color: rgba(255, 255, 255, 0.6);
}

.chat__msg--user .prose :not(pre) > code,
.chat__msg--user .prose--compact :not(pre) > code,
.chat__msg--user .intercom-markdown :not(pre) > code,
.chat__msg--user .prose pre,
.chat__msg--user .prose--compact pre,
.chat__msg--user .intercom-markdown pre {
	background: rgba(0, 0, 0, 0.2);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--color-accent-text);
}

.chat__msg--user .prose blockquote,
.chat__msg--user .prose--compact blockquote,
.chat__msg--user .intercom-markdown blockquote {
	border-left-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-accent-text);
}