/* ── depth3.chat brand design tokens ───────────────────────────────────────── */
:root {
	--bg-depth:                  lab(2.47544% -.0863299 .309634);
	--bg-base:                   lab(3.64792% -.117965 .422665);
	--bg-primary:                lab(5.40508% -.153907 .550512);
	--bg-secondary:              lab(7.70799% -.19557 .698656);
	--bg-tertiary:               lab(11.6832% -.201508 .728655);
	--bg-quaternary:             lab(15.5692% -.201941 .728303);
	--bg-accent:                 #9333ea;
	--bg-accent-translucent:     rgba(147, 51, 234, .18);
	--gradient-accent:           linear-gradient(135deg, #4f46e5 0%, #7c3aed 30%, #db2777 65%, #ea580c 100%);
	--bg-destructive:            lab(49.6786% 69.526 48.442);
	--bg-destructive-translucent:lab(49.6786% 69.526 48.442 / .18);
	--bg-positive:               lab(48.9452% -41.3464 51.1223);
	--bg-positive-translucent:   lab(48.9452% -41.3464 51.1223 / .18);
	--bg-attention:              lab(49.7965% 52.6911 61.1861);
	--bg-translucent:            lab(49.8943% -.875205 3.29613 / .15);
	--bg-muted:                  lab(49.8943% -.875205 3.29613 / .07);

	--fg-on-accent:              #ffffff; /* always white — for text/icons ON --bg-accent */
	--fg-primary:                lab(100% 0 0);
	--fg-secondary:              lab(91.6306% -.204355 .72664);
	--fg-tertiary:               lab(64.5098% -.204027 .726879);
	--fg-quaternary:             lab(44.2098% -.20358 .727201);
	--fg-accent:                 lab(64.8421% 4.78992 -49.8068);
	--fg-positive:               lab(70.3504% -38.3783 42.6767);
	--fg-destructive:            lab(70.8432% 48.5363 29.4891);

	--border-depth:              lab(11.8507% -.395551 1.46293);
	--border-base:               lab(14.0896% -.396654 1.46207);
	--border-primary:            lab(16.6765% -.397772 1.46123);
	--border-secondary:          lab(19.3213% -.398725 1.4605);
	--border-accent:             #9333ea;
	--border-translucent:        lab(47.8174% -.203669 .727129 / .28);
}

/* ── Light theme overrides ──────────────────────────────────────────────────── */
[data-theme="light"] {
	--bg-depth:                  #ebebf5;
	--bg-base:                   #ffffff;
	--bg-primary:                #f8f8fc;
	--bg-secondary:              #f0f0f8;
	--bg-tertiary:               #e8e8f2;
	--bg-quaternary:             #e0e0ec;
	--bg-accent:                 #9333ea;
	--bg-accent-translucent:     rgba(147, 51, 234, .10);
	--gradient-accent:           linear-gradient(135deg, #4f46e5 0%, #7c3aed 30%, #db2777 65%, #ea580c 100%);
	--bg-destructive:            lab(49.6786% 69.526 48.442);
	--bg-destructive-translucent:lab(49.6786% 69.526 48.442 / .12);
	--bg-positive:               lab(48.9452% -41.3464 51.1223);
	--bg-positive-translucent:   lab(48.9452% -41.3464 51.1223 / .12);
	--bg-attention:              lab(49.7965% 52.6911 61.1861);
	--bg-translucent:            lab(20% 0 0 / .06);
	--bg-muted:                  lab(20% 0 0 / .04);

	--fg-on-accent:              #ffffff; /* always white — for text/icons ON --bg-accent */
	--fg-primary:                #09090e;
	--fg-secondary:              #1a1a28;
	--fg-tertiary:               #5c5c7a;
	--fg-quaternary:             #8888a8;
	--fg-accent:                 lab(35% 22 -65);
	--fg-positive:               lab(35% -30 36);
	--fg-destructive:            lab(40% 55 35);

	--border-depth:              #d4d4e8;
	--border-base:               #e2e2f0;
	--border-primary:            #d8d8ec;
	--border-secondary:          #cccce0;
	--border-accent:             #9333ea;
	--border-translucent:        lab(20% 0 0 / .10);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
.chat-messages::-webkit-scrollbar       { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
	background: var(--border-primary);
	border-radius: 9999px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--border-secondary); }

/* ── iOS safe area — push content below notch/Dynamic Island and home bar ───── */
.safe-top {
	/* Used on fixed header: keeps content below the status bar / Dynamic Island */
	padding-top: env(safe-area-inset-top);
}
.safe-bottom {
	/* Used on footer: keeps input above the home indicator */
	padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

/* ── Mobile scroll — native-feel touch scrolling ───────────────────────────── */
.chat-messages {
	-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
	overscroll-behavior: contain;      /* prevent scroll chaining to body */
	touch-action: pan-y;               /* only vertical pan, no accidental zoom */
}

/* ── Prevent iOS/Android zoom on input focus (font-size must be ≥ 16px) ────── */
.chat-input {
	font-size: 16px;
}
@media (min-width: 640px) {
	.chat-input { font-size: 14px; } /* restore smaller size on desktop */
}

/* ── Bubble appear animation ────────────────────────────────────────────────── */
@keyframes bubble-in {
	from { opacity: 0; transform: translateY(8px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.bubble { animation: bubble-in 0.18s ease-out; }

/* ── Accent glow helpers ────────────────────────────────────────────────────── */
.glow-accent {
	box-shadow: 0 0 28px rgba(219, 39, 119, .40), 0 0 12px rgba(124, 58, 237, .30);
}
.glow-accent-sm {
	box-shadow: 0 0 14px rgba(219, 39, 119, .30), 0 0 6px rgba(124, 58, 237, .20);
}