.markdown-block--unstable {
	display: contents;
}

/* Streaming code block uses .code-block-wrapper styles */
.streaming-code-block .streaming-code-pre {
	background: transparent;
	padding: 0.5rem;
	margin: 0;
	overflow-x: visible;
	border-radius: 0;
	border: none;
	font-size: 0.875rem;
}

/* Base typography styles */
.markdown-content :global(p) {
	margin-block: 1rem;
	line-height: 1.75;
}

.markdown-content :global(:is(h1, h2, h3, h4, h5, h6):first-child) {
	margin-top: 0;
}

/* Headers with consistent spacing */
.markdown-content :global(h1) {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 1.5rem 0 0.75rem 0;
}

.markdown-content :global(h2) {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 1.25rem 0 0.5rem 0;
}

.markdown-content :global(h3) {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 1.5rem 0 0.5rem 0;
	line-height: 1.4;
}

.markdown-content :global(h4) {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0.75rem 0 0.25rem 0;
}

.markdown-content :global(h5) {
	font-size: 1rem;
	font-weight: 600;
	margin: 0.5rem 0 0.25rem 0;
}

.markdown-content :global(h6) {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0.5rem 0 0.25rem 0;
}

/* Text formatting */
.markdown-content :global(strong) {
	font-weight: 600;
}

.markdown-content :global(em) {
	font-style: italic;
}

.markdown-content :global(del) {
	text-decoration: line-through;
	opacity: 0.7;
}

/* Inline code */
.markdown-content :global(code:not(pre code)) {
	background: var(--muted);
	color: var(--muted-foreground);
	padding: 0.125rem 0.375rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
}

.markdown-content :global(pre) {
	display: inline;
	margin: 0 !important;
	overflow: hidden !important;
	background: var(--muted);
	overflow-x: auto;
	border-radius: 1rem;
	border: none;
	line-height: 1 !important;
}

.markdown-content :global(pre code) {
	padding: 0 !important;
	display: inline !important;
}

.markdown-content :global(code) {
	background: transparent;
	color: var(--code-foreground);
}

/* Links */
.markdown-content :global(a) {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
	overflow-wrap: anywhere;
	word-break: break-all;
}

.markdown-content :global(a:hover) {
	color: var(--primary);
}

/* Lists */
.markdown-content :global(ul) {
	list-style-type: disc;
	margin-inline-start: 1.5rem;
	margin-bottom: 1rem;
}

.markdown-content :global(ol) {
	list-style-type: decimal;
	margin-inline-start: 1.5rem;
	margin-bottom: 1rem;
}

.markdown-content :global(li) {
	margin-bottom: 0.25rem;
	padding-inline-start: 0.5rem;
}

.markdown-content :global(li::marker) {
	color: var(--muted-foreground);
}

/* Nested lists */
.markdown-content :global(ul ul) {
	list-style-type: circle;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.markdown-content :global(ol ol) {
	list-style-type: lower-alpha;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

/* Task lists */
.markdown-content :global(.task-list-item) {
	list-style: none;
	margin-inline-start: 0;
	padding-inline-start: 0;
}

.markdown-content :global(.task-list-item-checkbox) {
	margin-right: 0.5rem;
	margin-top: 0.125rem;
}

/* Blockquotes */
.markdown-content :global(blockquote) {
	border-left: 4px solid var(--border);
	padding: 0.5rem 1rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--muted-foreground);
	background: var(--muted);
	border-radius: 0 0.375rem 0.375rem 0;
}

/* Tables */
.markdown-content :global(table) {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	overflow: hidden;
}

.markdown-content :global(th) {
	background: hsl(var(--muted) / 0.3);
	border: 1px solid var(--border);
	padding: 0.5rem 0.75rem;
	text-align: left;
	font-weight: 600;
}

.markdown-content :global(td) {
	border: 1px solid var(--border);
	padding: 0.5rem 0.75rem;
}

.markdown-content :global(tr:nth-child(even)) {
	background: hsl(var(--muted) / 0.1);
}

/* User message markdown should keep table borders visible on light primary backgrounds */
div.markdown-user-content :global(table),
div.markdown-user-content :global(th),
div.markdown-user-content :global(td),
div.markdown-user-content :global(.table-wrapper) {
	border-color: currentColor;
}

/* Horizontal rules */
.markdown-content :global(hr) {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1.5rem 0;
}

/* Images */
.markdown-content :global(img) {
	border-radius: 0.5rem;
	box-shadow:
		0 1px 3px 0 rgb(0 0 0 / 0.1),
		0 1px 2px -1px rgb(0 0 0 / 0.1);
	margin: 1.5rem 0;
	max-width: 100%;
	height: auto;
}

/* Code blocks */

.markdown-content :global(.code-block-wrapper) {
	margin: 1.5rem 0;
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
	background: var(--code-background);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	min-height: var(--min-message-height);
	max-height: var(--max-message-height);
}

.markdown-content:global(.dark) :global(.code-block-wrapper) {
	border-color: color-mix(in oklch, var(--border) 20%, transparent);
}

/* Scroll container for code blocks (both streaming and completed) */
.markdown-content :global(.code-block-scroll-container),
.streaming-code-scroll-container {
	min-height: var(--min-message-height);
	max-height: var(--max-message-height);
	overflow-y: auto;
	overflow-x: auto;
	padding: 3rem 1rem 1rem;
	line-height: 1.3;
}

.full-height-code-blocks :global(.code-block-wrapper) {
	max-height: none;
}

.full-height-code-blocks :global(.code-block-scroll-container),
.full-height-code-blocks .streaming-code-scroll-container {
	max-height: none;
	overflow-y: visible;
}

.markdown-content :global(.code-block-header) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem 0;
	font-size: 0.875rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.markdown-content :global(.code-language) {
	color: var(--color-foreground);
	font-weight: 500;
	font-family:
		ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
		'Liberation Mono', Menlo, monospace;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

.markdown-content :global(.code-block-actions) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.markdown-content :global(.copy-code-btn),
.markdown-content :global(.preview-code-btn) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	color: var(--code-foreground);
	cursor: pointer;
	transition: all 0.2s ease;
}

.markdown-content :global(.copy-code-btn:hover),
.markdown-content :global(.preview-code-btn:hover) {
	transform: scale(1.05);
}

.markdown-content :global(.copy-code-btn:active),
.markdown-content :global(.preview-code-btn:active) {
	transform: scale(0.95);
}

.markdown-content :global(.code-block-wrapper pre) {
	background: transparent;
	margin: 0;
	border-radius: 0;
	border: none;
	font-size: 0.875rem;
}

/* Mentions and hashtags */
.markdown-content :global(.mention) {
	color: hsl(var(--primary));
	font-weight: 500;
	text-decoration: none;
}

.markdown-content :global(.mention:hover) {
	text-decoration: underline;
}

.markdown-content :global(.hashtag) {
	color: hsl(var(--primary));
	font-weight: 500;
	text-decoration: none;
}

.markdown-content :global(.hashtag:hover) {
	text-decoration: underline;
}

/* Advanced table enhancements */
.markdown-content :global(table) {
	transition: all 0.2s ease;
}

.markdown-content :global(table:hover) {
	box-shadow:
		0 4px 6px -1px rgb(0 0 0 / 0.1),
		0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.markdown-content :global(th:hover),
.markdown-content :global(td:hover) {
	background: var(--muted);
}

/* Disable hover effects when rendering user messages */
.markdown-user-content :global(a),
.markdown-user-content :global(a:hover) {
	color: inherit;
}

.markdown-user-content :global(table:hover) {
	box-shadow: none;
}

.markdown-user-content :global(th:hover),
.markdown-user-content :global(td:hover) {
	background: inherit;
}

/* Enhanced blockquotes */
.markdown-content :global(blockquote) {
	transition: all 0.2s ease;
	position: relative;
}

.markdown-content :global(blockquote:hover) {
	border-left-width: 6px;
	background: var(--muted);
	transform: translateX(2px);
}

.markdown-content :global(blockquote::before) {
	content: '"';
	position: absolute;
	top: -0.5rem;
	left: 0.5rem;
	font-size: 3rem;
	color: var(--muted-foreground);
	font-family: serif;
	line-height: 1;
}

/* Enhanced images */
.markdown-content :global(img) {
	transition: all 0.3s ease;
	cursor: pointer;
}

.markdown-content :global(img:hover) {
	transform: scale(1.02);
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Image zoom overlay */
.markdown-content :global(.image-zoom-overlay) {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	cursor: pointer;
}

.markdown-content :global(.image-zoom-overlay img) {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 0.5rem;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Enhanced horizontal rules */
.markdown-content :global(hr) {
	border: none;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--border), transparent);
	margin: 2rem 0;
	position: relative;
}

.markdown-content :global(hr::after) {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1rem;
	height: 1rem;
	background: var(--border);
	border-radius: 50%;
}

/* Scrollable tables */
.markdown-content :global(.table-wrapper) {
	overflow-x: auto;
	margin: 1.5rem 0;
	border-radius: 0.5rem;
	border: 1px solid var(--border);
}

.markdown-content :global(.table-wrapper table) {
	margin: 0;
	border: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.markdown-content :global(h1) {
		font-size: 1.5rem;
	}

	.markdown-content :global(h2) {
		font-size: 1.25rem;
	}

	.markdown-content :global(h3) {
		font-size: 1.125rem;
	}

	.markdown-content :global(table) {
		font-size: 0.875rem;
	}

	.markdown-content :global(th),
	.markdown-content :global(td) {
		padding: 0.375rem 0.5rem;
	}

	.markdown-content :global(.table-wrapper) {
		margin: 0.5rem -1rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
	.markdown-content :global(blockquote:hover) {
		background: var(--muted);
	}
}

/* Image load error fallback */
.markdown-content :global(.image-load-error) {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1.5rem 0;
	padding: 1.5rem;
	border-radius: 0.5rem;
	background: var(--muted);
	border: 1px dashed var(--border);
}

.markdown-content :global(.image-error-content) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	color: var(--muted-foreground);
	text-align: center;
}

.markdown-content :global(.image-error-content svg) {
	opacity: 0.5;
}

.markdown-content :global(.image-error-text) {
	font-size: 0.875rem;
}

.markdown-content :global(.image-error-link) {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--primary);
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.markdown-content :global(.image-error-link:hover) {
	background: var(--muted);
	border-color: var(--primary);
}

/* Mermaid diagrams */
.markdown-content :global(pre.mermaid) {
	background: transparent;
	border: none;
	padding: 0;
	text-align: center;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.15s ease;
	position: relative;
}

/* Hide mermaid code text until rendered - prevents flash */
.markdown-content :global(pre.mermaid:not([data-mermaid-rendered])),
.markdown-content :global(pre.mermaid[data-mermaid-rendered]:not(:has(svg))) {
	display: none;
}

.markdown-content :global(pre.mermaid:hover) {
	opacity: 0.85;
}

.markdown-content :global(pre.mermaid svg) {
	max-width: 90%;
	margin: 0 auto;
	height: auto;
	display: block;
	padding: 3rem 1rem;
}

/* Mermaid block wrapper - matches code block styling */
.markdown-content :global(.mermaid-block-wrapper) {
	margin: 1.5rem 0;
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
	background: var(--code-background);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	position: relative;
	min-height: var(--min-message-height);
	max-height: var(--max-message-height);
}

.markdown-content:global(.dark) :global(.mermaid-block-wrapper) {
	border-color: color-mix(in oklch, var(--border) 20%, transparent);
}

.markdown-content :global(.mermaid-scroll-container) {
	min-height: 350px;
	max-height: var(--max-message-height);
	overflow-y: auto;
	overflow-x: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem 1rem;
}

.full-height-code-blocks :global(.mermaid-block-wrapper) {
	max-height: none;
}

.full-height-code-blocks :global(.mermaid-scroll-container) {
	max-height: none;
	overflow-y: visible;
}

/* Mermaid block uses same header styling as code blocks */
.markdown-content :global(.mermaid-block-wrapper .code-block-header) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem 0;
	font-size: 0.875rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.markdown-content :global(.mermaid-block-wrapper .code-block-actions) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Mermaid pre element - remove default margins */
.markdown-content :global(.mermaid-block-wrapper pre.mermaid) {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

/* Mermaid SVG should be bigger */
.markdown-content :global(.mermaid-block-wrapper pre.mermaid svg) {
	width: unset !important;
	height: auto;
	display: block;
	padding: 3rem 1rem;
}

/* Streaming mermaid block - empty preview box */
.mermaid-streaming-block {
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mermaid-loading-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--muted-foreground);
}

.mermaid-loading-text {
	font-size: 0.875rem;
	font-style: italic;
}
