@import "tailwindcss";

/* ═══════════════════════════════════════════════
   Zosma Cowork — Design Tokens (Brand / website-matched)
   Mirrors zosma.ai's own scheme:
     Light: cool near-white neutrals  ·  Dark: neutral charcoal
     Accent: #017cf3 → hsl(210 99% 48%)  — Zosma brand blue
     Accent-2: #3080ff → hsl(217 100% 59%) — gradient/secondary
   Fonts: Chakra Petch (display) · Space Grotesk (mono/accent)
   Glass, elevated floating panels, generous rounded edges.
   ═══════════════════════════════════════════════ */

/* ── Brand constants (shared across themes) ── */
:root {
	--brand: 210 99% 48%;
	--brand-2: 217 100% 59%;
}

/* ── Light mode (default — no data-theme attr) ── */
:root {
	--background: 210 24% 98%;
	--foreground: 214 32% 10%;
	--card: 0 0% 100%;
	--card-foreground: 214 32% 12%;
	--popover: 0 0% 100%;
	--popover-foreground: 214 32% 12%;
	--primary: 210 99% 48%;
	--primary-foreground: 0 0% 100%;
	--secondary: 210 20% 95%;
	--secondary-foreground: 214 28% 22%;
	--muted: 213 20% 94%;
	--muted-foreground: 214 12% 40%;
	--accent: 210 60% 94%;
	--accent-foreground: 214 36% 22%;
	--destructive: 0 72% 52%;
	--destructive-foreground: 0 0% 98%;
	--border: 214 20% 88%;
	--input: 214 20% 88%;
	--ring: 210 99% 48%;
	--radius: 0.9rem;
	--font-sans: "Chakra Petch", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
	--font-chakra: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-space-grotesk: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	--font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;

	/* ── Elevation / glass depth (per-theme) ── */
	--elev-bg: 0 0% 100%;
	--elev-border: 214 22% 86%;
	--elev-highlight: 0 0% 100%;
	--elev-shadow: 214 40% 30%;
	--elev-glass-blur: 14px;
	--elev-glass-alpha: 0.72;
	--aurora-1: 210 99% 48%;
	--aurora-2: 217 100% 59%;
	--aurora-alpha: 0.1;

	/* ── Chat layout ── */
	--chat-user-bg: 210 22% 95%;
	--chat-user-fg: 214 32% 10%;
	--chat-assistant-bg: 0 0% 100%;
	--chat-assistant-fg: 214 32% 10%;
	--chat-system-bg: 210 20% 92%;
	--chat-system-fg: 214 12% 40%;
	--chat-avatar-user-bg: 210 99% 48%;
	--chat-avatar-user-fg: 0 0% 100%;
	--chat-avatar-assistant-bg: 210 18% 86%;
	--chat-avatar-assistant-fg: 214 32% 12%;

	/* ── Status bar ── */
	--status-bg: 210 24% 95%;
	--status-divider: 214 20% 88%;
	--status-active-fg: 210 99% 48%;

	/* ── Tool execution blocks ── */
	--tool-running-bg: 210 99% 48% / 0.12;
	--tool-running-fg: 210 99% 44%;
	--tool-running-border: 210 99% 48% / 0.45;
	--tool-complete-bg: 142 60% 40% / 0.08;
	--tool-complete-fg: 142 60% 40%;
	--tool-complete-border: 142 60% 40% / 0.2;
	--tool-error-bg: 0 72% 52% / 0.08;
	--tool-error-fg: 0 72% 52%;
	--tool-error-border: 0 72% 52% / 0.2;
	--tool-timeline-line: 214 20% 88%;

	/* ── Diff colors ── */
	--diff-added-bg: 142 60% 40% / 0.08;
	--diff-added-fg: 142 60% 40%;
	--diff-removed-bg: 0 72% 52% / 0.08;
	--diff-removed-fg: 0 72% 52%;
	--diff-context-fg: 214 12% 40%;
	--diff-hunk-fg: 210 99% 48%;

	/* ── Subtle backgrounds ── */
	--success-subtle: 142 60% 40% / 0.06;
	--error-subtle: 0 72% 52% / 0.06;

	/* ── Sidebar ── */
	--sidebar-background: 210 26% 96%;
	--sidebar-foreground: 214 32% 14%;
	--sidebar-accent: 210 60% 92%;
	--sidebar-accent-foreground: 214 32% 20%;
	--sidebar-border: 214 20% 88%;
}

/* ── Dark mode via OS (only when no manual data-theme set) ── */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--background: 220 10% 9%;
		--foreground: 0 0% 98%;
		--card: 220 9% 12%;
		--card-foreground: 0 0% 96%;
		--popover: 220 9% 12%;
		--popover-foreground: 0 0% 96%;
		--primary: 210 100% 60%;
		--primary-foreground: 220 30% 8%;
		--secondary: 220 8% 16%;
		--secondary-foreground: 0 0% 92%;
		--muted: 220 8% 15%;
		--muted-foreground: 220 6% 60%;
		--accent: 220 8% 20%;
		--accent-foreground: 0 0% 96%;
		--destructive: 0 62% 55%;
		--destructive-foreground: 0 0% 98%;
		--border: 220 8% 18%;
		--input: 220 8% 18%;
		--ring: 210 100% 60%;

		--elev-bg: 220 9% 13%;
		--elev-border: 220 8% 22%;
		--elev-highlight: 210 30% 80%;
		--elev-shadow: 220 40% 2%;
		--elev-glass-blur: 16px;
		--elev-glass-alpha: 0.6;
		--aurora-1: 210 100% 56%;
		--aurora-2: 217 100% 62%;
		--aurora-alpha: 0.14;

		--chat-user-bg: 220 8% 14%;
		--chat-user-fg: 0 0% 96%;
		--chat-assistant-bg: 220 10% 9%;
		--chat-assistant-fg: 0 0% 96%;
		--chat-system-bg: 220 8% 16%;
		--chat-system-fg: 220 6% 60%;
		--chat-avatar-user-bg: 210 100% 56%;
		--chat-avatar-user-fg: 0 0% 100%;
		--chat-avatar-assistant-bg: 220 8% 20%;
		--chat-avatar-assistant-fg: 0 0% 92%;

		--status-bg: 220 9% 10%;
		--status-divider: 220 8% 18%;
		--status-active-fg: 210 100% 64%;

		--tool-running-bg: 210 100% 60% / 0.15;
		--tool-running-fg: 210 100% 68%;
		--tool-running-border: 210 100% 60% / 0.32;
		--tool-complete-bg: 142 60% 45% / 0.1;
		--tool-complete-fg: 142 60% 55%;
		--tool-complete-border: 142 60% 45% / 0.25;
		--tool-error-bg: 0 62% 55% / 0.1;
		--tool-error-fg: 0 62% 60%;
		--tool-error-border: 0 62% 55% / 0.25;
		--tool-timeline-line: 220 8% 18%;

		--diff-added-bg: 142 60% 45% / 0.1;
		--diff-added-fg: 142 60% 55%;
		--diff-removed-bg: 0 62% 55% / 0.1;
		--diff-removed-fg: 0 62% 60%;
		--diff-context-fg: 220 6% 60%;
		--diff-hunk-fg: 210 100% 68%;

		--success-subtle: 142 60% 45% / 0.08;
		--error-subtle: 0 62% 55% / 0.08;

		--sidebar-background: 220 9% 10%;
		--sidebar-foreground: 0 0% 90%;
		--sidebar-accent: 220 8% 18%;
		--sidebar-accent-foreground: 0 0% 96%;
		--sidebar-border: 220 8% 16%;
	}
}

/* ── Manual light mode override ── */
[data-theme="light"] {
	--background: 210 24% 98%;
	--foreground: 214 32% 10%;
	--card: 0 0% 100%;
	--card-foreground: 214 32% 12%;
	--popover: 0 0% 100%;
	--popover-foreground: 214 32% 12%;
	--primary: 210 99% 48%;
	--primary-foreground: 0 0% 100%;
	--secondary: 210 20% 95%;
	--secondary-foreground: 214 28% 22%;
	--muted: 213 20% 94%;
	--muted-foreground: 214 12% 40%;
	--accent: 210 60% 94%;
	--accent-foreground: 214 36% 22%;
	--destructive: 0 72% 52%;
	--destructive-foreground: 0 0% 98%;
	--border: 214 20% 88%;
	--input: 214 20% 88%;
	--ring: 210 99% 48%;

	--elev-bg: 0 0% 100%;
	--elev-border: 214 22% 86%;
	--elev-highlight: 0 0% 100%;
	--elev-shadow: 214 40% 30%;
	--elev-glass-blur: 14px;
	--elev-glass-alpha: 0.72;
	--aurora-1: 210 99% 48%;
	--aurora-2: 217 100% 59%;
	--aurora-alpha: 0.1;

	--chat-user-bg: 210 22% 95%;
	--chat-user-fg: 214 32% 10%;
	--chat-assistant-bg: 0 0% 100%;
	--chat-assistant-fg: 214 32% 10%;
	--chat-system-bg: 210 20% 92%;
	--chat-system-fg: 214 12% 40%;
	--chat-avatar-user-bg: 210 99% 48%;
	--chat-avatar-user-fg: 0 0% 100%;
	--chat-avatar-assistant-bg: 210 18% 86%;
	--chat-avatar-assistant-fg: 214 32% 12%;

	--status-bg: 210 24% 95%;
	--status-divider: 214 20% 88%;
	--status-active-fg: 210 99% 48%;

	--tool-running-bg: 210 99% 48% / 0.12;
	--tool-running-fg: 210 99% 44%;
	--tool-running-border: 210 99% 48% / 0.45;
	--tool-complete-bg: 142 60% 40% / 0.08;
	--tool-complete-fg: 142 60% 40%;
	--tool-complete-border: 142 60% 40% / 0.2;
	--tool-error-bg: 0 72% 52% / 0.08;
	--tool-error-fg: 0 72% 52%;
	--tool-error-border: 0 72% 52% / 0.2;
	--tool-timeline-line: 214 20% 88%;

	--diff-added-bg: 142 60% 40% / 0.08;
	--diff-added-fg: 142 60% 40%;
	--diff-removed-bg: 0 72% 52% / 0.08;
	--diff-removed-fg: 0 72% 52%;
	--diff-context-fg: 214 12% 40%;
	--diff-hunk-fg: 210 99% 48%;

	--success-subtle: 142 60% 40% / 0.06;
	--error-subtle: 0 72% 52% / 0.06;

	--sidebar-background: 210 26% 96%;
	--sidebar-foreground: 214 32% 14%;
	--sidebar-accent: 210 60% 92%;
	--sidebar-accent-foreground: 214 32% 20%;
	--sidebar-border: 214 20% 88%;
}

/* ── Manual dark mode override ── */
[data-theme="dark"] {
	--background: 220 10% 9%;
	--foreground: 0 0% 98%;
	--card: 220 9% 12%;
	--card-foreground: 0 0% 96%;
	--popover: 220 9% 12%;
	--popover-foreground: 0 0% 96%;
	--primary: 210 100% 60%;
	--primary-foreground: 220 30% 8%;
	--secondary: 220 8% 16%;
	--secondary-foreground: 0 0% 92%;
	--muted: 220 8% 15%;
	--muted-foreground: 220 6% 60%;
	--accent: 220 8% 20%;
	--accent-foreground: 0 0% 96%;
	--destructive: 0 62% 55%;
	--destructive-foreground: 0 0% 98%;
	--border: 220 8% 18%;
	--input: 220 8% 18%;
	--ring: 210 100% 60%;

	--elev-bg: 220 9% 13%;
	--elev-border: 220 8% 22%;
	--elev-highlight: 210 30% 80%;
	--elev-shadow: 220 40% 2%;
	--elev-glass-blur: 16px;
	--elev-glass-alpha: 0.6;
	--aurora-1: 210 100% 56%;
	--aurora-2: 217 100% 62%;
	--aurora-alpha: 0.14;

	--chat-user-bg: 220 8% 14%;
	--chat-user-fg: 0 0% 96%;
	--chat-assistant-bg: 220 10% 9%;
	--chat-assistant-fg: 0 0% 96%;
	--chat-system-bg: 220 8% 16%;
	--chat-system-fg: 220 6% 60%;
	--chat-avatar-user-bg: 210 100% 56%;
	--chat-avatar-user-fg: 0 0% 100%;
	--chat-avatar-assistant-bg: 220 8% 20%;
	--chat-avatar-assistant-fg: 0 0% 92%;

	--status-bg: 220 9% 10%;
	--status-divider: 220 8% 18%;
	--status-active-fg: 210 100% 64%;

	--tool-running-bg: 210 100% 60% / 0.15;
	--tool-running-fg: 210 100% 68%;
	--tool-running-border: 210 100% 60% / 0.32;
	--tool-complete-bg: 142 60% 45% / 0.1;
	--tool-complete-fg: 142 60% 55%;
	--tool-complete-border: 142 60% 45% / 0.25;
	--tool-error-bg: 0 62% 55% / 0.1;
	--tool-error-fg: 0 62% 60%;
	--tool-error-border: 0 62% 55% / 0.25;
	--tool-timeline-line: 220 8% 18%;

	--diff-added-bg: 142 60% 45% / 0.1;
	--diff-added-fg: 142 60% 55%;
	--diff-removed-bg: 0 62% 55% / 0.1;
	--diff-removed-fg: 0 62% 60%;
	--diff-context-fg: 220 6% 60%;
	--diff-hunk-fg: 210 100% 68%;

	--success-subtle: 142 60% 45% / 0.08;
	--error-subtle: 0 62% 55% / 0.08;

	--sidebar-background: 220 9% 10%;
	--sidebar-foreground: 0 0% 90%;
	--sidebar-accent: 220 8% 18%;
	--sidebar-accent-foreground: 0 0% 96%;
	--sidebar-border: 220 8% 16%;
}

@theme {
	--color-background: hsl(var(--background));
	--color-foreground: hsl(var(--foreground));
	--color-card: hsl(var(--card));
	--color-card-foreground: hsl(var(--card-foreground));
	--color-popover: hsl(var(--popover));
	--color-popover-foreground: hsl(var(--popover-foreground));
	--color-primary: hsl(var(--primary));
	--color-primary-foreground: hsl(var(--primary-foreground));
	--color-secondary: hsl(var(--secondary));
	--color-secondary-foreground: hsl(var(--secondary-foreground));
	--color-muted: hsl(var(--muted));
	--color-muted-foreground: hsl(var(--muted-foreground));
	--color-accent: hsl(var(--accent));
	--color-accent-foreground: hsl(var(--accent-foreground));
	--color-destructive: hsl(var(--destructive));
	--color-destructive-foreground: hsl(var(--destructive-foreground));
	--color-border: hsl(var(--border));
	--color-input: hsl(var(--input));
	--color-ring: hsl(var(--ring));
	--color-brand: hsl(var(--brand));
	--color-brand-2: hsl(var(--brand-2));
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--radius-2xl: calc(var(--radius) + 10px);
	--font-sans: var(--font-sans);
	--font-chakra: var(--font-chakra);
	--font-space-grotesk: var(--font-space-grotesk);
	--font-mono: var(--font-mono);
	--color-sidebar: hsl(var(--sidebar-background));
	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
	--color-sidebar-accent: hsl(var(--sidebar-accent));
	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
	--color-sidebar-border: hsl(var(--sidebar-border));
}

/* ── Base layout ── */
html,
body {
	height: 100%;
}
#root {
	height: 100%;
}

body {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	font-size: 13px;
	line-height: 1.5;
	overflow: hidden;
}

/* ── Atmospheric brand backdrop ──
   A soft aurora built from the Zosma blues sits behind the whole app so the
   glass panels visibly float over a living surface. Wallpaper-overridable
   later via --app-wallpaper (see roadmap issue). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
			60% 80% at 12% 0%,
			hsl(var(--aurora-1) / var(--aurora-alpha)) 0%,
			transparent 60%
		),
		radial-gradient(
			55% 75% at 100% 12%,
			hsl(var(--aurora-2) / var(--aurora-alpha)) 0%,
			transparent 62%
		),
		radial-gradient(
			70% 90% at 50% 110%,
			hsl(var(--aurora-1) / calc(var(--aurora-alpha) * 0.7)) 0%,
			transparent 60%
		);
	background-size: 200% 200%;
	animation: aurora-pan 28s ease-in-out infinite alternate;
}
.app-wallpaper body::before,
body[data-wallpaper]::before {
	/* Dim scrim layered over the chosen backdrop keeps glass panels legible. */
	background-image: linear-gradient(
			rgba(0, 0, 0, var(--app-wallpaper-dim, 0)),
			rgba(0, 0, 0, var(--app-wallpaper-dim, 0))
		), var(--app-wallpaper, none);
	background-size: cover;
	background-position: center;
	/* Expand past the viewport so blur doesn't reveal faded edges. */
	inset: -2.5rem;
	filter: blur(var(--app-wallpaper-blur, 0px));
	animation: none;
}

@keyframes aurora-pan {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}

/* App shells should sit above the backdrop */
#root {
	position: relative;
	z-index: 1;
}

/* ── Background settings: react-colorful picker sizing ── */
.wallpaper-color-picker .react-colorful {
	width: 196px;
	height: 168px;
}
.wallpaper-color-picker .react-colorful__saturation {
	border-radius: 10px 10px 0 0;
}
.wallpaper-color-picker .react-colorful__last-control {
	border-radius: 0 0 10px 10px;
}
.wallpaper-color-picker .react-colorful__hue {
	height: 20px;
}

/* ── Elevation / glass utilities ──
   Reusable floating-panel surfaces with curved edges, layered shadow and an
   inset top highlight so cards read as "hanging over" the backdrop. */
.panel-raised {
	background: hsl(var(--elev-bg) / var(--elev-glass-alpha));
	backdrop-filter: blur(var(--elev-glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--elev-glass-blur)) saturate(140%);
	border: 1px solid hsl(var(--elev-border) / 0.8);
	border-radius: var(--radius-2xl);
	box-shadow:
		0 1px 0 0 hsl(var(--elev-highlight) / 0.5) inset,
		0 1px 2px hsl(var(--elev-shadow) / 0.12),
		0 12px 30px -12px hsl(var(--elev-shadow) / 0.28),
		0 24px 60px -28px hsl(var(--elev-shadow) / 0.32);
}
.panel-sidebar {
	background: hsl(var(--sidebar-background) / var(--elev-glass-alpha));
	backdrop-filter: blur(var(--elev-glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--elev-glass-blur)) saturate(140%);
	border: 1px solid hsl(var(--elev-border) / 0.7);
	border-radius: var(--radius-2xl);
	box-shadow: 0 1px 0 0 hsl(var(--elev-highlight) / 0.45) inset, 0 10px 26px -14px
		hsl(var(--elev-shadow) / 0.3);
}
.glass {
	background: hsl(var(--elev-bg) / calc(var(--elev-glass-alpha) - 0.12));
	backdrop-filter: blur(calc(var(--elev-glass-blur) - 2px)) saturate(130%);
	-webkit-backdrop-filter: blur(calc(var(--elev-glass-blur) - 2px)) saturate(130%);
	border: 1px solid hsl(var(--elev-border) / 0.6);
	border-radius: var(--radius-xl);
}
.brand-gradient {
	background-image: linear-gradient(135deg, hsl(var(--brand)) 0%, hsl(var(--brand-2)) 100%);
}
.brand-gradient-text {
	background-image: linear-gradient(135deg, hsl(var(--brand)) 0%, hsl(var(--brand-2)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: hsl(var(--muted-foreground) / 0.15);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--muted-foreground) / 0.3);
}

/* ── Chat font override ── */
.chat-font,
.chat-font * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Code blocks ── */
.prose pre {
	background: hsl(var(--muted)) !important;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-md);
	padding: 1rem;
	overflow-x: auto;
}
.prose code {
	background: hsl(var(--muted));
	padding: 0.15rem 0.4rem;
	border-radius: var(--radius-sm);
	font-size: 0.85em;
	font-family: var(--font-mono);
}
.prose pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

::selection {
	background: hsl(var(--primary) / 0.25);
}

/* ═══════════════════════════════════════════════
   Chat message markdown — readable typography
   Tailwind preflight zeroes all element margins, so
   we re-establish a clean vertical rhythm here.
   ═══════════════════════════════════════════════ */
.chat-markdown {
	font-size: 14px;
	line-height: 1.72;
	color: inherit;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* First/last child: no stray outer margin */
.chat-markdown > *:first-child {
	margin-top: 0;
}
.chat-markdown > *:last-child {
	margin-bottom: 0;
}

/* Paragraphs */
.chat-markdown p {
	margin: 0 0 0.9em;
}

/* Headings — clear hierarchy with breathing room above */
.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4,
.chat-markdown h5,
.chat-markdown h6 {
	font-weight: 650;
	line-height: 1.3;
	color: hsl(var(--foreground));
	margin: 1.6em 0 0.6em;
	letter-spacing: -0.01em;
}
.chat-markdown h1 {
	font-size: 1.5em;
}
.chat-markdown h2 {
	font-size: 1.28em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid hsl(var(--border) / 0.7);
}
.chat-markdown h3 {
	font-size: 1.12em;
}
.chat-markdown h4 {
	font-size: 1em;
	color: hsl(var(--foreground) / 0.9);
}
.chat-markdown h5,
.chat-markdown h6 {
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: hsl(var(--muted-foreground));
}

/* Lists */
.chat-markdown ul,
.chat-markdown ol {
	margin: 0.7em 0;
	padding-left: 1.5em;
}
.chat-markdown ul {
	list-style: disc;
}
.chat-markdown ol {
	list-style: decimal;
}
.chat-markdown li {
	margin: 0.35em 0;
	padding-left: 0.2em;
}
.chat-markdown li::marker {
	color: hsl(var(--muted-foreground));
}
.chat-markdown li > ul,
.chat-markdown li > ol {
	margin: 0.35em 0;
}
/* Tight task lists */
.chat-markdown li > input[type="checkbox"] {
	margin-right: 0.5em;
	accent-color: hsl(var(--primary));
}

/* Inline emphasis */
.chat-markdown strong {
	font-weight: 650;
	color: hsl(var(--foreground));
}
.chat-markdown em {
	font-style: italic;
}

/* Links */
.chat-markdown a {
	color: hsl(var(--primary));
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.chat-markdown a:hover {
	text-decoration-thickness: 2px;
}

/* Inline code */
.chat-markdown code {
	background: hsl(var(--muted));
	padding: 0.12em 0.4em;
	border-radius: var(--radius-sm);
	font-size: 0.85em;
	font-family: var(--font-mono);
	border: 1px solid hsl(var(--border) / 0.6);
}

/* Code blocks */
.chat-markdown pre {
	background: hsl(var(--muted)) !important;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-md);
	padding: 0.9rem 1rem;
	overflow-x: auto;
	margin: 0.9em 0;
	line-height: 1.6;
}
.chat-markdown pre code {
	background: transparent;
	padding: 0;
	border: none;
	border-radius: 0;
	font-size: 0.84em;
}

/* Blockquotes */
.chat-markdown blockquote {
	border-left: 3px solid hsl(var(--primary) / 0.5);
	padding: 0.1em 0 0.1em 1em;
	margin: 0.9em 0;
	color: hsl(var(--muted-foreground));
}
.chat-markdown blockquote p {
	margin: 0.4em 0;
}

/* Horizontal rule */
.chat-markdown hr {
	border: none;
	border-top: 1px solid hsl(var(--border));
	margin: 1.5em 0;
}

/* Tables — bordered, padded, header band, horizontally scrollable */
.chat-markdown table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 0.9em;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-md);
}
.chat-markdown th,
.chat-markdown td {
	border: 1px solid hsl(var(--border));
	padding: 0.5em 0.8em;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}
.chat-markdown th {
	background: hsl(var(--muted) / 0.7);
	font-weight: 600;
	color: hsl(var(--foreground));
	white-space: nowrap;
}
.chat-markdown tbody tr:nth-child(even) {
	background: hsl(var(--muted) / 0.25);
}

/* Images */
.chat-markdown img {
	max-width: 100%;
	border-radius: var(--radius-md);
	margin: 0.6em 0;
}

/* ── SKILL.md reader typography ── */
.skill-md {
	font-size: 13px;
	line-height: 1.65;
	color: hsl(var(--foreground));
}
.skill-md > *:first-child {
	margin-top: 0;
}
.skill-md h1,
.skill-md h2,
.skill-md h3,
.skill-md h4 {
	font-weight: 600;
	line-height: 1.3;
	margin: 1.4em 0 0.5em;
	color: hsl(var(--foreground));
}
.skill-md h1 {
	font-size: 1.4em;
}
.skill-md h2 {
	font-size: 1.2em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid hsl(var(--border));
}
.skill-md h3 {
	font-size: 1.05em;
}
.skill-md h4 {
	font-size: 0.95em;
}
.skill-md p,
.skill-md ul,
.skill-md ol,
.skill-md blockquote,
.skill-md table {
	margin: 0.6em 0;
}
.skill-md ul,
.skill-md ol {
	padding-left: 1.4em;
}
.skill-md ul {
	list-style: disc;
}
.skill-md ol {
	list-style: decimal;
}
.skill-md li {
	margin: 0.25em 0;
}
.skill-md li::marker {
	color: hsl(var(--muted-foreground));
}
.skill-md a {
	color: hsl(var(--primary));
	text-decoration: underline;
	text-underline-offset: 2px;
}
.skill-md strong {
	font-weight: 600;
}
.skill-md blockquote {
	border-left: 3px solid hsl(var(--border));
	padding-left: 0.9em;
	color: hsl(var(--muted-foreground));
}
.skill-md hr {
	border: none;
	border-top: 1px solid hsl(var(--border));
	margin: 1.2em 0;
}
.skill-md code {
	background: hsl(var(--muted));
	padding: 0.12rem 0.36rem;
	border-radius: var(--radius-sm);
	font-size: 0.85em;
	font-family: var(--font-mono);
}
.skill-md pre {
	background: hsl(var(--muted)) !important;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-md);
	padding: 0.9rem;
	overflow-x: auto;
	margin: 0.7em 0;
}
.skill-md pre code {
	background: transparent;
	padding: 0;
	font-size: 0.82em;
}
.skill-md table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}
.skill-md th,
.skill-md td {
	border: 1px solid hsl(var(--border));
	padding: 0.4em 0.6em;
	text-align: left;
}
.skill-md th {
	background: hsl(var(--muted) / 0.6);
	font-weight: 600;
}
.skill-md img {
	max-width: 100%;
	border-radius: var(--radius-md);
}

/* ── Animations ── */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(2px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes subtle-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.85;
	}
}
@keyframes spin-slow {
	to {
		transform: rotate(360deg);
	}
}
@keyframes pulse-dot {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}
.animate-fade-in {
	animation: fade-in 0.15s ease-out;
}
.animate-subtle-pulse {
	animation: subtle-pulse 2s ease-in-out infinite;
}
.animate-spin-slow {
	animation: spin-slow 1.5s linear infinite;
}
.animate-pulse-dot {
	animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Shimmer sweep for "loading" activity blocks (issue #173 activity view) */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
.animate-shimmer-text {
	background: linear-gradient(
		90deg,
		hsl(var(--foreground) / 0.45) 0%,
		hsl(var(--foreground) / 0.95) 50%,
		hsl(var(--foreground) / 0.45) 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shimmer 2s linear infinite;
}

/* Brand sheen sweep — used on the sidebar brand mark / New button */
@keyframes sheen {
	0% {
		transform: translateX(-120%);
	}
	60%,
	100% {
		transform: translateX(220%);
	}
}
.shimmer {
	position: relative;
	overflow: hidden;
}
.shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 20%,
		hsl(var(--elev-highlight) / 0.35) 50%,
		transparent 80%
	);
	transform: translateX(-120%);
	animation: sheen 6s ease-in-out infinite;
	pointer-events: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	body::before {
		animation: none;
	}
	.shimmer::after,
	.animate-shimmer-text,
	.animate-fade-in,
	.animate-subtle-pulse,
	.animate-spin-slow,
	.animate-pulse-dot {
		animation: none !important;
	}
}
