:root {
	/* Fonts */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Typography scale (rem) */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;
	--text-7xl: 4.5rem;
	--text-8xl: 6rem;

	/* Line-height + tracking */
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-relaxed: 1.625;
	--tracking-tight: -0.025em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/* Spacing */
	--spacing: 0.25rem;

	/* Radius */
	--radius-xs: 0.125rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;

	/* Brand primary — Tailwind `primary` / `ring` (same hue as emerald-500) */
	--primary-oklch: oklch(69.6% 0.17 162.48);
	--primary-hover-oklch: oklch(58% 0.16 162.48);
	--primary-fg-oklch: oklch(100% 0 0);
	--primary-muted-oklch: oklch(94% 0.06 162.48);
	--primary-subtle-oklch: oklch(96.5% 0.04 162.48);
	--ring-oklch: oklch(55% 0.14 162.48);

	/* Neutrals: achromatic whites/grays (background, cards, sidebar, auth — primary only on accents) */
	--bg-oklch: oklch(97% 0 0);
	--surface-oklch: oklch(100% 0 0);
	--surface-2-oklch: oklch(96.5% 0 0);
	--surface-elevated-oklch: oklch(100% 0 0);
	--text-oklch: oklch(22% 0 0);
	--text-muted-oklch: oklch(48% 0 0);
	--border-oklch: oklch(91% 0 0);
	--border-strong-oklch: oklch(83% 0 0);

	/* Feedback (RGB — Tailwind danger utilities) */
	--danger: 220 38 38;
	--danger-foreground: 255 255 255;
	--danger-muted: 254 242 242;
	--danger-border: 252 165 165;

	/* Elevation — neutral (any primary works) */
	--elevation-xs: 0 1px 2px rgb(0 0 0 / 0.05);
	--elevation-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
	--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
	--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
	--elevation-primary: 0 4px 14px color-mix(in oklch, var(--primary-oklch) 35%, transparent);

	color-scheme: light;
}

[data-theme="dark"] {
	/* Brand still follows --primary-oklch (swap primary freely) */
	--primary-oklch: oklch(72% 0.14 162.48);
	--primary-hover-oklch: oklch(78% 0.11 162.48);
	--primary-fg-oklch: oklch(14% 0 0);
	--primary-muted-oklch: oklch(26% 0.05 162.48);
	--primary-subtle-oklch: oklch(22% 0.04 162.48);
	--ring-oklch: oklch(70% 0.12 162.48);

	/* Neutrals: achromatic so any primary works (no green cast on chrome) */
	--bg-oklch: oklch(14.5% 0 0);
	--surface-oklch: oklch(18.5% 0 0);
	--surface-2-oklch: oklch(22.5% 0 0);
	--surface-elevated-oklch: oklch(27% 0 0);
	--text-oklch: oklch(96% 0 0);
	--text-muted-oklch: oklch(68% 0 0);
	--border-oklch: oklch(34% 0 0);
	--border-strong-oklch: oklch(44% 0 0);

	--danger: 248 113 113;
	--danger-foreground: 24 22 32;
	--danger-muted: 60 32 38;
	--danger-border: 127 55 67;

	--elevation-xs: 0 1px 2px rgb(0 0 0 / 0.35);
	--elevation-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
	--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35);
	--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.35);
	--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
	--elevation-primary: 0 4px 20px color-mix(in oklch, var(--primary-oklch) 28%, transparent);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--primary-oklch: oklch(72% 0.14 162.48);
		--primary-hover-oklch: oklch(78% 0.11 162.48);
		--primary-fg-oklch: oklch(14% 0 0);
		--primary-muted-oklch: oklch(26% 0.05 162.48);
		--primary-subtle-oklch: oklch(22% 0.04 162.48);
		--ring-oklch: oklch(70% 0.12 162.48);

		--bg-oklch: oklch(14.5% 0 0);
		--surface-oklch: oklch(18.5% 0 0);
		--surface-2-oklch: oklch(22.5% 0 0);
		--surface-elevated-oklch: oklch(27% 0 0);
		--text-oklch: oklch(96% 0 0);
		--text-muted-oklch: oklch(68% 0 0);
		--border-oklch: oklch(34% 0 0);
		--border-strong-oklch: oklch(44% 0 0);

		--danger: 248 113 113;
		--danger-foreground: 24 22 32;
		--danger-muted: 60 32 38;
		--danger-border: 127 55 67;

		--elevation-xs: 0 1px 2px rgb(0 0 0 / 0.35);
		--elevation-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
		--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35);
		--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.35);
		--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
		--elevation-primary: 0 4px 20px color-mix(in oklch, var(--primary-oklch) 28%, transparent);

		color-scheme: dark;
	}
}

html {
	font-family: var(--font-sans);
	background-color: var(--bg-oklch);
}

body {
	font-family: var(--font-sans);
	color: var(--text-oklch);
	background-color: var(--bg-oklch);
	background-image: radial-gradient(ellipse 100% 60% at 50% -15%, color-mix(in oklch, oklch(85% 0 0) 18%, transparent), transparent 52%);
	background-attachment: fixed;
	min-height: 100vh;
}

[data-theme="dark"] body {
	background-image: radial-gradient(ellipse 90% 55% at 50% -10%, color-mix(in oklch, oklch(26% 0 0) 22%, transparent), transparent 50%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) body {
		background-image: radial-gradient(ellipse 90% 55% at 50% -10%, color-mix(in oklch, oklch(26% 0 0) 22%, transparent), transparent 50%);
	}
}

/* Environment notices — explicit CSS so layout/color work even if Tailwind utilities are missing from the build */
.env-floating-banner {
	position: fixed;
	bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	right: max(1rem, env(safe-area-inset-right, 0px));
	left: auto;
	top: auto;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: min(calc(100vw - 2rem), 20rem);
	border-radius: 0.75rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1.375;
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.env-floating-banner--staging {
	background-color: #fde047;
	color: #0f172a;
	border: 1px solid rgb(202 138 4 / 0.5);
}

.env-floating-banner--test {
	background-color: #dc2626;
	color: #ffffff;
	border: 1px solid rgb(185 28 28 / 0.8);
}

.env-floating-banner__label {
	min-width: 0;
	flex: 1 1 auto;
}

.env-floating-banner__dismiss {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	padding: 0.25rem;
	margin: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	line-height: 0;
}

.env-floating-banner--staging .env-floating-banner__dismiss {
	color: rgb(15 23 42 / 0.9);
}

.env-floating-banner--staging .env-floating-banner__dismiss:hover {
	background-color: rgb(15 23 42 / 0.1);
}

.env-floating-banner--staging .env-floating-banner__dismiss:focus-visible {
	outline: 2px solid rgb(15 23 42 / 0.35);
	outline-offset: 1px;
}

.env-floating-banner--test .env-floating-banner__dismiss {
	color: rgb(255 255 255 / 0.9);
}

.env-floating-banner--test .env-floating-banner__dismiss:hover {
	background-color: rgb(255 255 255 / 0.15);
}

.env-floating-banner--test .env-floating-banner__dismiss:focus-visible {
	outline: 2px solid rgb(255 255 255 / 0.5);
	outline-offset: 1px;
}

/* Responsive shell helpers (avoid relying on Tailwind responsive extraction) */
.desktop-sidebar {
	display: none;
}

.mobile-sidebar-root {
	display: block;
}

.main-with-sidebar {
	margin-left: 0;
}

@media (width >= 64rem) {
	.desktop-sidebar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100dvh;
		width: 16rem;
	}

	.mobile-sidebar-root {
		display: none;
	}

	.main-with-sidebar {
		margin-left: 16rem;
	}
}

@media (width < 64rem) {
	.messages-thread-pane--fullscreen {
		position: fixed;
		inset: 0;
		z-index: 160;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 100dvh;
		max-height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	.messages-thread-pane--fullscreen .messages-thread {
		max-height: none;
	}

	.messages-thread-pane--fullscreen .messages-composer {
		padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
	}
}

/* Creator sidebar "More" — floating dropdown above the trigger */
.creator-sidebar-more {
	position: relative;
}

.creator-sidebar-more-summary::-webkit-details-marker {
	display: none;
}

.creator-sidebar-more-menu {
	position: absolute;
	bottom: calc(100% + 0.375rem);
	left: 0;
	right: 0;
	z-index: 20;
	border: 1px solid var(--border-oklch);
	border-radius: var(--radius-lg);
	background-color: var(--surface-oklch);
	padding: 0.25rem;
	box-shadow: var(--elevation-md);
}

.creator-sidebar-more[open] .creator-sidebar-more-chevron {
	transform: rotate(180deg);
}