:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
  /* Neutral scale (Tailwind zinc) — consumed by tailwind.config in index.html */
  --zinc-50: 250 250 250; --zinc-100: 244 244 245; --zinc-200: 228 228 231; --zinc-300: 212 212 216;
  --zinc-400: 161 161 170; --zinc-500: 113 113 122; --zinc-600: 82 82 91; --zinc-700: 63 63 70;
  --zinc-800: 39 39 42; --zinc-900: 24 24 27; --zinc-950: 9 9 11;
  --white: 255 255 255;            /* "ink" for hairlines and hover washes */
  --bg: #09090b;
  --code-bg: #0c0c0e;
  --link: #93c5fd;
  --strong: #fafafa;
  --muted: #a1a1aa;
  --marker: #71717a;
  --shadow: rgba(0, 0, 0, 0.7);
}
/* Light theme: invert the neutral scale; ink becomes near-black. */
:root.light {
  color-scheme: light;
  --zinc-50: 9 9 11; --zinc-100: 24 24 27; --zinc-200: 39 39 42; --zinc-300: 63 63 70;
  --zinc-400: 82 82 91; --zinc-500: 113 113 122; --zinc-600: 145 145 154; --zinc-700: 185 185 193;
  --zinc-800: 228 228 231; --zinc-900: 244 244 245; --zinc-950: 255 255 255;
  --white: 9 9 11;
  --bg: #ffffff;
  --code-bg: #f6f6f7;
  --link: #2563eb;
  --strong: #09090b;
  --muted: #52525b;
  --marker: #a1a1aa;
  --shadow: rgba(24, 24, 27, 0.14);
}
html, body { height: 100%; background: var(--bg); }
/* Accent text tuned for contrast on white */
:root.light .text-red-300 { color: #dc2626; }
:root.light .text-emerald-300 { color: #059669; }
:root.light .text-amber-300\/90, :root.light .text-amber-300 { color: #b45309; }
:root.light .bg-emerald-400 { background-color: #10b981; }
:root.light .bg-black\/60 { background-color: rgba(24, 24, 27, 0.32); }
:root.light #hl-dark { display: none; }
:root.dark #hl-light { display: none; }
.bg-code { background: var(--code-bg); }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
::selection { background: rgb(var(--white) / 0.16); }

/* Scrollbars */
.scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(var(--white) / .14) transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgb(var(--white) / .12); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* Tactile press */
.press { transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.press:active { transform: scale(0.95); }
.press-sm:active { transform: scale(0.97); }

/* Message enter — opacity + slight rise, no layout shift (height is final immediately) */
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-enter { animation: msg-in 220ms var(--ease-out) both; }
@keyframes flash { 0% { background: rgba(250, 204, 21, 0.14); } 100% { background: transparent; } }
.msg-flash { animation: flash 1.4s ease-out; }

/* Dialogs: 95% → 100% scale with a blurred backdrop */
.dlg-backdrop { opacity: 0; transition: opacity 200ms var(--ease-out); }
.dlg-panel { opacity: 0; transform: scale(0.95); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.dlg-open .dlg-backdrop { opacity: 1; }
.dlg-open .dlg-panel { opacity: 1; transform: none; }
.dlg-closing .dlg-backdrop, .dlg-closing .dlg-panel { transition-duration: 140ms; }
/* Drawer (right on desktop, bottom sheet on mobile) */
.drawer-panel { transform: translateY(16px); opacity: 0; transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out); }
@media (min-width: 768px) { .drawer-panel { transform: translateX(24px); } }
.dlg-open .drawer-panel { transform: none; opacity: 1; }

/* Floating pill */
.pill { transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out); }
.pill[data-hidden="true"] { opacity: 0; transform: translate(-50%, 8px) scale(0.96); pointer-events: none; }
.pill[data-hidden="false"] { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Popovers */
.pop { transform-origin: var(--origin, bottom left); animation: pop-in 150ms var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* Toast */
.toast { animation: toast-in 240ms var(--ease-out) both; }
.toast.out { animation: toast-out 160ms ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(4px); } }

/* Live dot */
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.live-ping { animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Message actions: revealed on hover (pointer devices) or tap (touch) */
.msg .msg-actions { opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
@media (hover: hover) and (pointer: fine) { .msg:hover .msg-actions { opacity: 1; pointer-events: auto; } }
.msg.show-actions .msg-actions { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .msg:hover { background: rgb(var(--white) / 0.025); } }

/* Markdown */
.md { overflow-wrap: anywhere; line-height: 1.6; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0.35em 0; }
.md a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 2px; }
.md a:hover { text-decoration-color: currentColor; }
.md strong { color: var(--strong); font-weight: 600; }
.md ul, .md ol { padding-left: 1.3em; margin: 0.4em 0; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md li { margin: 0.15em 0; }
.md li::marker { color: var(--marker); }
.md blockquote { border-left: 2px solid rgb(var(--white) / .15); padding-left: .8em; color: var(--muted); margin: .5em 0; }
.md h1, .md h2, .md h3, .md h4 { color: var(--strong); font-weight: 600; margin: .8em 0 .3em; letter-spacing: -0.01em; }
.md h1 { font-size: 1.2em; } .md h2 { font-size: 1.1em; } .md h3, .md h4 { font-size: 1em; }
.md hr { border-color: rgb(var(--white) / .1); margin: .8em 0; }
.md table { border-collapse: collapse; font-size: .9em; margin: .5em 0; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid rgb(var(--white) / .1); padding: .3em .6em; text-align: left; }
.md th { background: rgb(var(--white) / .03); }
.md :not(pre) > code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85em; background: rgb(var(--white) / .06); border: 1px solid rgb(var(--white) / .08); border-radius: 5px; padding: .08em .35em; }
.md img { max-width: 100%; border-radius: 8px; }
.code-block { position: relative; margin: .55em 0; border: 1px solid rgb(var(--white) / .08); border-radius: 10px; background: var(--code-bg); overflow: hidden; }
.code-block .code-head { display: flex; align-items: center; justify-content: space-between; padding: .3em .5em .3em .85em; border-bottom: 1px solid rgb(var(--white) / .06); font: 500 11px/1.4 'JetBrains Mono', monospace; color: var(--marker); }
.code-block pre { margin: 0; padding: .8em .95em; overflow-x: auto; font: 12.5px/1.6 'JetBrains Mono', ui-monospace, monospace; }
.code-block pre code.hljs { background: transparent; padding: 0; }
/* Theme transitions: only colors, never layout */
body, header, footer, aside, .msg, .md, button, input, textarea { transition-property: background-color, border-color, color; transition-duration: 160ms; }
.mention { color: var(--strong); background: rgb(var(--white) / .07); border: 1px solid rgb(var(--white) / .08); border-radius: 6px; padding: 0 .3em; font-weight: 500; cursor: pointer; transition: background-color 120ms ease; }
.mention:hover { background: rgb(var(--white) / .13); }
.mention.me { background: rgba(250, 204, 21, .12); border-color: rgba(250, 204, 21, .25); color: #fde68a; }
:root.light .mention.me { background: rgba(250, 204, 21, .22); border-color: rgba(202, 138, 4, .35); color: #854d0e; }

/* Waveform canvases */
.wave { touch-action: none; cursor: pointer; }

/* Safe areas */
.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.pt-safe { padding-top: env(safe-area-inset-top); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}