@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Monochrome IDE Theme - Always Dark */
:root {
	--background: oklch(0.98 0 0);
	--foreground: oklch(0.15 0 0);
	--card: oklch(0.97 0 0);
	--card-foreground: oklch(0.15 0 0);
	--popover: oklch(0.98 0 0);
	--popover-foreground: oklch(0.15 0 0);
	--primary: oklch(0.15 0 0);
	--primary-foreground: oklch(0.98 0 0);
	--secondary: oklch(0.92 0 0);
	--secondary-foreground: oklch(0.2 0 0);
	--muted: oklch(0.93 0 0);
	--muted-foreground: oklch(0.45 0 0);
	--accent: oklch(0.9 0 0);
	--accent-foreground: oklch(0.15 0 0);
	--destructive: oklch(0.5 0.15 25);
	--destructive-foreground: oklch(0.98 0 0);
	--border: oklch(0.85 0 0);
	--input: oklch(0.9 0 0);
	--ring: oklch(0.6 0 0);
	--chart-1: oklch(0.35 0 0);
	--chart-2: oklch(0.45 0 0);
	--chart-3: oklch(0.55 0 0);
	--chart-4: oklch(0.65 0 0);
	--chart-5: oklch(0.75 0 0);
	--radius: 0.375rem;
	--sidebar: oklch(0.95 0 0);
	--sidebar-foreground: oklch(0.2 0 0);
	--sidebar-primary: oklch(0.15 0 0);
	--sidebar-primary-foreground: oklch(0.98 0 0);
	--sidebar-accent: oklch(0.9 0 0);
	--sidebar-accent-foreground: oklch(0.15 0 0);
	--sidebar-border: oklch(0.85 0 0);
	--sidebar-ring: oklch(0.6 0 0);

	/* Custom tokens */
	--success: oklch(0.45 0.15 145);
	--warning: oklch(0.55 0.15 85);
	--info: oklch(0.45 0.1 250);
	--terminal: oklch(0.96 0 0);
	--terminal-foreground: oklch(0.2 0 0);
	--code-line-number: oklch(0.55 0 0);
}

.dark {
	--background: oklch(0.09 0 0);
	--foreground: oklch(0.9 0 0);
	--card: oklch(0.11 0 0);
	--card-foreground: oklch(0.9 0 0);
	--popover: oklch(0.13 0 0);
	--popover-foreground: oklch(0.9 0 0);
	--primary: oklch(0.95 0 0);
	--primary-foreground: oklch(0.09 0 0);
	--secondary: oklch(0.18 0 0);
	--secondary-foreground: oklch(0.85 0 0);
	--muted: oklch(0.15 0 0);
	--muted-foreground: oklch(0.6 0 0);
	--accent: oklch(0.2 0 0);
	--accent-foreground: oklch(0.9 0 0);
	--destructive: oklch(0.5 0.15 25);
	--destructive-foreground: oklch(0.95 0 0);
	--border: oklch(0.28 0 0);
	--input: oklch(0.15 0 0);
	--ring: oklch(0.4 0 0);
	--chart-1: oklch(0.7 0 0);
	--chart-2: oklch(0.6 0 0);
	--chart-3: oklch(0.5 0 0);
	--chart-4: oklch(0.4 0 0);
	--chart-5: oklch(0.3 0 0);
	--sidebar: oklch(0.07 0 0);
	--sidebar-foreground: oklch(0.85 0 0);
	--sidebar-primary: oklch(0.95 0 0);
	--sidebar-primary-foreground: oklch(0.09 0 0);
	--sidebar-accent: oklch(0.15 0 0);
	--sidebar-accent-foreground: oklch(0.9 0 0);
	--sidebar-border: oklch(0.24 0 0);
	--sidebar-ring: oklch(0.35 0 0);

	/* Custom tokens */
	--success: oklch(0.65 0.15 145);
	--warning: oklch(0.7 0.15 85);
	--info: oklch(0.6 0.1 250);
	--terminal: oklch(0.06 0 0);
	--terminal-foreground: oklch(0.75 0 0);
	--code-line-number: oklch(0.42 0 0);
}

@theme inline {
	--font-sans: var(--font-geist-sans), "Geist", "Geist Fallback";
	--font-mono: var(--font-geist-mono), "Geist Mono", "Geist Mono Fallback";
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);
	--color-success: var(--success);
	--color-warning: var(--warning);
	--color-info: var(--info);
	--color-terminal: var(--terminal);
	--color-terminal-foreground: var(--terminal-foreground);
}

@layer base {
	* {
		@apply border-border outline-ring/50;
	}
	body {
		@apply bg-background text-foreground;
	}
}

/* ── Mobile responsive: touch targets & safe areas ── */
@media (max-width: 767px) {
	/* Ensure touch targets meet 44px minimum */
	.mobile-touch-target {
		min-height: 44px;
		min-width: 44px;
	}

	/* Mobile overlay for sidebar drawer */
	.mobile-sidebar-overlay {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: oklch(0 0 0 / 0.5);
	}

	/* Mobile sidebar drawer */
	.mobile-sidebar-drawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 260px;
		transform: translateX(-100%);
		transition: transform 200ms ease-out;
	}

	.mobile-sidebar-drawer.open {
		transform: translateX(0);
	}
}

/* ── File viewer: Shiki code blocks ── */
.file-viewer-code pre {
	margin: 0;
	padding: 1rem;
	background: transparent;
	overflow-x: auto;
	font-family: var(--font-mono);
}

.file-viewer-code code {
	font-family: var(--font-mono);
	counter-reset: line;
}

.file-viewer-code code .line {
	display: inline-block;
	width: 100%;
	padding: 0 0.5rem;
}

.file-viewer-code code .line:hover {
	background: oklch(0.15 0 0);
}

.file-viewer-code code .line::before {
	counter-increment: line;
	content: counter(line);
	display: inline-block;
	width: 3.5ch;
	margin-right: 1.5ch;
	text-align: right;
	color: var(--code-line-number);
	user-select: none;
}

/* ── File viewer: Markdown rendering ── */
.markdown-body {
	color: oklch(0.85 0 0);
	font-family: var(--font-sans);
	font-size: 0.9rem;
	line-height: 1.7;
}

.markdown-body h1 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.markdown-body h2 {
	font-size: 1.35rem;
	font-weight: 600;
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--border);
}

.markdown-body h3 {
	font-size: 1.15rem;
	font-weight: 600;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
	font-size: 1rem;
	font-weight: 600;
	margin-top: 1.25rem;
	margin-bottom: 0.5rem;
}

.markdown-body p {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.markdown-body ul,
.markdown-body ol {
	margin-top: 0;
	margin-bottom: 0.75rem;
	padding-left: 1.75rem;
}

.markdown-body ul {
	list-style: disc;
}

.markdown-body ol {
	list-style: decimal;
}

.markdown-body li {
	margin-bottom: 0.25rem;
}

.markdown-body li > ul,
.markdown-body li > ol {
	margin-top: 0.25rem;
	margin-bottom: 0;
}

.markdown-body blockquote {
	margin: 0.75rem 0;
	padding: 0.25rem 1rem;
	border-left: 3px solid oklch(0.38 0 0);
	color: oklch(0.6 0 0);
}

.markdown-body hr {
	margin: 1.5rem 0;
	border: none;
	border-top: 1px solid var(--border);
}

.markdown-body strong {
	font-weight: 600;
	color: oklch(0.92 0 0);
}

.markdown-body em {
	font-style: italic;
}

.markdown-body del {
	text-decoration: line-through;
	color: oklch(0.55 0 0);
}

/* Task list checkboxes */
.markdown-body input[type="checkbox"] {
	margin-right: 0.4rem;
	accent-color: oklch(0.65 0.15 145);
}

/* ── Chat Mode: streaming cursor animation ── */
@keyframes chat-cursor {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.1;
	}
}

/* ── Chat Mode: shiki code blocks inside chat bubbles ── */
.chat-code-block pre {
	margin: 0;
	padding: 1rem;
	background: transparent;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	line-height: 1.6;
}

.chat-code-block code {
	font-family: var(--font-mono);
}

/* ── Chat Mode: markdown inside bubbles ── */
.chat-markdown {
	word-break: break-word;
	overflow-wrap: anywhere;
}

.chat-markdown > *:first-child {
	margin-top: 0;
}

.chat-markdown > *:last-child {
	margin-bottom: 0;
}
