/* Shared design tokens (light/dark) and resets, used by every page. */

:root {
  --bg: #f6f6f3;
  --text: #111015;
  --muted: #5f5e69;
  --surface: rgba(255, 255, 255, 0.72);
  --border: rgba(17, 16, 21, 0.1);
  --border-strong: rgba(17, 16, 21, 0.18);
  --input-bg: rgba(255, 255, 255, 0.9);
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-text: #ffffff;
  --grad-a: #7c3aed;
  --grad-b: #db2777;
  --grad-c: #ea580c;
  --aurora-1: rgba(167, 139, 250, 0.32);
  --aurora-2: rgba(244, 114, 182, 0.2);
  --aurora-3: rgba(251, 146, 60, 0.16);
  --grid-line: rgba(17, 16, 21, 0.055);
  --grain-opacity: 0.035;
  --spot: rgba(124, 58, 237, 0.12);
  --error: #b42318;
  --success: #067647;
  --shadow: 0 1px 2px rgba(20, 16, 28, 0.05), 0 24px 60px -18px rgba(20, 16, 28, 0.22);
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09080c;
    --text: #eeedf2;
    --muted: #9d9ba8;
    --surface: rgba(22, 20, 28, 0.62);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --input-bg: rgba(0, 0, 0, 0.35);
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-text: #170d2e;
    --grad-a: #a78bfa;
    --grad-b: #f9a8d4;
  --grad-c: #fdba74;
    --aurora-1: rgba(139, 92, 246, 0.3);
    --aurora-2: rgba(236, 72, 153, 0.18);
    --aurora-3: rgba(249, 115, 22, 0.1);
    --grid-line: rgba(255, 255, 255, 0.045);
    --grain-opacity: 0.06;
    --spot: rgba(167, 139, 250, 0.14);
    --error: #fda29b;
    --success: #75e0a7;
    --shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #09080c;
  --text: #eeedf2;
  --muted: #9d9ba8;
  --surface: rgba(22, 20, 28, 0.62);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --input-bg: rgba(0, 0, 0, 0.35);
  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-text: #170d2e;
  --grad-a: #a78bfa;
  --grad-b: #f9a8d4;
  --grad-c: #fdba74;
  --aurora-1: rgba(139, 92, 246, 0.3);
  --aurora-2: rgba(236, 72, 153, 0.18);
  --aurora-3: rgba(249, 115, 22, 0.1);
  --grid-line: rgba(255, 255, 255, 0.045);
  --grain-opacity: 0.06;
  --spot: rgba(167, 139, 250, 0.14);
  --error: #fda29b;
  --success: #75e0a7;
  --shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scrollbars: a slim pill on a clear track, no arrows. Grey at rest, a violet tint on hover and
   a stronger one while dragged. Chrome and Edge drop ::-webkit-scrollbar once scrollbar-width is
   set, so the standard properties are only for browsers without it (Firefox). */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 13%, transparent) padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 24%, transparent) padding-box; }
::-webkit-scrollbar-thumb:active,
.is-scrolling::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, transparent) padding-box; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
  .is-scrolling { scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* Logo variants: platyna on dark backgrounds, grafit on light ones. Follows the
   page theme (data-theme) when the user picked one, otherwise the system. */
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
}
:root[data-theme="dark"] .logo-dark { display: block !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }

/* "Reduced motion" chosen in settings. */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Accent colour (Settings → Appearance). Violet is the default defined above. */
:root[data-accent="blue"] { --accent: #2f5bff; --accent-hover: #2448d6; --accent-text: #ffffff; --grad-a: #2f5bff; --grad-b: #3b82f6; --grad-c: #06b6d4; }
@media (prefers-color-scheme: dark) { :root[data-accent="blue"]:not([data-theme="light"]) { --accent: #7d9bff; --accent-hover: #a3b8ff; --accent-text: #0a1440; --grad-a: #7d9bff; --grad-b: #93c5fd; --grad-c: #67e8f9; } }
:root[data-accent="blue"][data-theme="dark"] { --accent: #7d9bff; --accent-hover: #a3b8ff; --accent-text: #0a1440; --grad-a: #7d9bff; --grad-b: #93c5fd; --grad-c: #67e8f9; }
:root[data-accent="amber"] { --accent: #b45309; --accent-hover: #92400e; --accent-text: #ffffff; --grad-a: #d97706; --grad-b: #ea580c; --grad-c: #dc2626; }
@media (prefers-color-scheme: dark) { :root[data-accent="amber"]:not([data-theme="light"]) { --accent: #ffb23f; --accent-hover: #ffc86b; --accent-text: #2a1a00; --grad-a: #ffb23f; --grad-b: #fb923c; --grad-c: #f472b6; } }
:root[data-accent="amber"][data-theme="dark"] { --accent: #ffb23f; --accent-hover: #ffc86b; --accent-text: #2a1a00; --grad-a: #ffb23f; --grad-b: #fb923c; --grad-c: #f472b6; }
:root[data-accent="platinum"] { --accent: #17181b; --accent-hover: #33353a; --accent-text: #ffffff; --grad-a: #17181b; --grad-b: #55575d; --grad-c: #8a8d94; }
@media (prefers-color-scheme: dark) { :root[data-accent="platinum"]:not([data-theme="light"]) { --accent: #d9dbdf; --accent-hover: #ffffff; --accent-text: #0b0c0e; --grad-a: #ffffff; --grad-b: #c9ccd1; --grad-c: #8a8d94; } }
:root[data-accent="platinum"][data-theme="dark"] { --accent: #d9dbdf; --accent-hover: #ffffff; --accent-text: #0b0c0e; --grad-a: #ffffff; --grad-b: #c9ccd1; --grad-c: #8a8d94; }

/* ---- Page transitions (js/page-transition.js) ----
   Back and forward are one continuous move where the browser can do it (cross-document view
   transitions): the new page opens as a circle from the middle while the old one leans back,
   blurs and fades, and the Kayts mark flies between the home page's hero and the chat's
   greeting. Off when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-recede 0.65s cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: vt-open 0.85s cubic-bezier(0.7, 0, 0.25, 1) both; }
html:active-view-transition-type(to-page)::view-transition-new(root) { animation-duration: 0.6s; }
::view-transition-group(kayts-mark) {
  z-index: 2;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(kayts-mark),
::view-transition-new(kayts-mark) { height: 100%; animation-duration: 0.9s; }
::view-transition-image-pair(kayts-mark) { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--grad-b) 55%, transparent)); }
@keyframes vt-recede {
  to { transform: scale(1.06); filter: blur(12px) saturate(1.3); opacity: 0; }
}
@keyframes vt-open {
  from {
    clip-path: circle(0 at 50% 45%);
    filter: blur(8px) brightness(1.15);
    transform: scale(0.985);
  }
  to {
    clip-path: circle(150vmax at 50% 45%);
    filter: none;
    transform: none;
  }
}

/* A click into the chat (js/page-transition.js): on the page being left, a circle in the chat's
   background colour grows from the click and the Kayts mark fades in where the chat's greeting
   will be; the page behind settles back a little. The chat starts under the same colour and
   mark and comes out of it once loaded. Only transform and opacity move (the graphics card
   animates those on its own), so nothing on the page can make it stutter. */
.page-veil {
  position: fixed;
  z-index: 1000;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  will-change: transform;
  animation: veil-grow 0.62s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes veil-grow { to { transform: scale(1); } }
.page-veil-mark {
  position: fixed;
  z-index: 1001;
  width: 64px;
  height: 64px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7);
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 22px rgba(139, 92, 246, 0.35));
  animation: veil-mark 0.42s 0.26s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes veil-mark { to { opacity: 1; transform: none; } }
html.is-leaving main { transform: scale(0.985); opacity: 0.7; transition: transform 0.62s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.62s ease; }

html.is-entering::before,
html.is-entering::after { content: ""; position: fixed; pointer-events: none; will-change: opacity, transform; }
html.is-entering::after { inset: 0; z-index: 1000; background: var(--bg); }
html.is-entering::before {
  z-index: 1001;
  left: calc(var(--mx) - 32px);
  top: calc(var(--my) - 32px);
  width: 64px;
  height: 64px;
  background: var(--veil-logo) center / contain no-repeat;
  filter: drop-shadow(0 8px 22px rgba(139, 92, 246, 0.35));
}
html.is-entering .app { transform: scale(0.985); will-change: transform; }
html.is-entered::after { opacity: 0; transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
html.is-entered::before { opacity: 0; transform: scale(1.08); transition: opacity 0.45s 0.1s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
html.is-entered .app { transform: none; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }