/* ── Global reset ── */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

	/* ── Global theme variables ──
   Light is the warm-paper/ink palette; dark flips surfaces to charcoal and
   text to warm off-white. EY yellow (--accent) is constant in both.
   The inline script in app.html sets data-theme on <html> before paint
   (resolving "system" against prefers-color-scheme), so there's no FOUC and
   no CSS @media duplication is needed here. */

:root {
	/* surfaces */
	--bg: #faf8f3;          /* page */
	--surface: #ffffff;     /* cards / header / modals */
	--surface-2: #fdfcf8;   /* inputs / subtle raised areas */
	--surface-3: #f2efe6;   /* inactive / waiting / table header */
	--chat-bg: #f2efe6;     /* chat panel */
	/* text */
	--ink: #161d23;         /* primary */
	--muted: #6b6657;       /* secondary */
	--muted-2: #9a9384;     /* tertiary / hints */
	/* lines */
	--line: #ece6d8;        /* default border */
	--line-strong: #d8d2c4; /* emphasized border / dashed */
	/* accents */
	--accent: #ffe600;      /* EY yellow */
	--on-accent: #161d23;   /* text on yellow */
	/* buttons */
	--btn-bg: #161d23;
	--btn-fg: #ffffff;
	/* semantic */
	--danger: #a8281f;
	--danger-bg: #fdecee;
	--ok: #2e7d32;
	--ok-bg: #e8f5e9;
	--warn: #b97710;
	/* chat bubbles */
	--bubble-user: #e3ecf6;
	--bubble-user-border: #c3d2e4;
	--bubble-ai: #ffffff;
	--bubble-ai-border: #ece6d8;
	/* markdown code blocks */
	--code-bg: #f1ece0;
	--pre-bg: #161d23;
	--pre-fg: #ece6d8;
	/* shadows / overlays */
	--overlay: rgba(14, 23, 30, 0.55);
	--soft-shadow: 0 6px 24px -16px rgba(22, 29, 35, 0.18);

	color-scheme: light;
}

[data-theme='dark'] {
	--bg: #14181d;
	--surface: #1e242c;
	--surface-2: #262d36;
	--surface-3: #2a313a;
	--chat-bg: #0f1216;
	--ink: #ece6d8;
	--muted: #9aa0a8;
	--muted-2: #6f7680;
	--line: #2f3640;
	--line-strong: #3a424d;
	--accent: #ffe600;
	--on-accent: #161d23;
	--btn-bg: #ece6d8;
	--btn-fg: #161d23;
	--danger: #ff8a7a;
	--danger-bg: #2a1a1e;
	--ok: #6ec06e;
	--ok-bg: #1a2a1e;
	--warn: #e0a44a;
	--bubble-user: #2a3b55;
	--bubble-user-border: #3a5070;
	--bubble-ai: #262d36;
	--bubble-ai-border: #2f3640;
	--code-bg: #111418;
	--pre-bg: #0b0d10;
	--pre-fg: #ece6d8;
	--overlay: rgba(0, 0, 0, 0.65);
	--soft-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.7);

	color-scheme: dark;
}

/* ── Shared right-side user area used by every authenticated page ──
   (simulator + /admin + any future pages). Kept global so scoped page
   styles don't each reimplement the same button/name layout. */
.user-area {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	/* Keep all controls on one horizontal row — flex-wrap:nowrap prevents a
	   lone button (e.g. help-menu-wrapper) from spilling onto its own line.
	   Do NOT add overflow-x:auto here: it computes overflow-y to auto too,
	   which clips the .help-menu dropdown that hangs below the row. */
	flex-wrap: nowrap;
	white-space: nowrap;
}
.user-area .user-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}
.user-area a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

body {
	background: var(--bg);
	color: var(--ink);
	/* The platform font stack lives here (shared), NOT in a page's scoped
	   <style>: a :global(body) rule in /+page.svelte only loads when that page
	   is the FIRST route — direct-loading /scripts or /admin (full page load)
	   never injects it, so English text fell back to the browser default font.
	   SPA navigation from / kept the old style in the DOM, which is why it only
	   "worked" after visiting / first. */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei',
		'Noto Sans SC', sans-serif;
}