/* zkTerminal on LibreChat v0.8.8, in zkagi.ai's look: its own tokens from zkagi.ai
   (--bg, --surface, --surface-2, --text, --text-muted, --accent-ink), Inter for UI,
   Source Code Pro for receipts and keys. LibreChat themes with RGB-triplet variables on
   html (light) and .dark (dark); html:root / html.dark outrank its own selectors. */
/* fonts served from our own origin (SIL OFL, hashes in fonts/SHA256SUMS): no third-party request */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fonts/SourceCodePro-latin.woff2") format("woff2"); }

html:root {
  --brand-purple: 100 58 222;              /* #643ADE */
  --accent-primary: 0 82 255;              /* zkagi.ai accent-ink, light */
  --accent-primary-hover: 0 66 214;
  --ring-primary: 0 82 255;
  --link: 0 82 255;
  --link-hover: 0 66 214;
  --text-primary: 10 25 47;                /* #0A192F */
  --text-secondary: 74 85 104;             /* #4A5568 */
  --text-secondary-alt: 74 85 104;
  --text-tertiary: 90 101 122;
  --surface-primary: 255 255 255;          /* surface */
  --surface-primary-alt: 247 249 252;      /* bg #F7F9FC */
  --surface-primary-contrast: 240 244 250;
  --surface-secondary: 240 244 250;        /* surface-2 */
  --surface-secondary-alt: 232 238 247;
  --surface-tertiary: 232 238 247;
  --surface-tertiary-alt: 255 255 255;
  --surface-hover: 232 238 247;
  --surface-hover-alt: 220 230 250;
  --surface-active: 224 232 255;
  --surface-active-alt: 210 222 252;
  --surface-composer-hover: 240 244 250;
  --surface-submit: 100 58 222;
  --surface-submit-hover: 84 46 196;
  --surface-chat: 255 255 255;
  --surface-dialog: 255 255 255;
  --border-light: 226 232 241;
  --border-medium: 208 216 230;
  --border-medium-alt: 208 216 230;
  --border-heavy: 178 190 210;
  --header-primary: 255 255 255;
  --header-hover: 240 244 250;
}

html.dark {
  --brand-purple: 169 146 237;             /* #A992ED */
  --accent-primary: 112 169 255;           /* zkagi.ai accent-ink, dark */
  --accent-primary-hover: 150 192 255;
  --ring-primary: 112 169 255;
  --link: 112 169 255;
  --link-hover: 164 200 255;               /* #A4C8FF */
  --text-primary: 255 255 255;
  --text-secondary: 157 169 201;           /* #9DA9C9 */
  --text-secondary-alt: 157 169 201;
  --text-tertiary: 128 142 178;
  --surface-primary: 10 25 47;             /* bg #0A192F */
  --surface-primary-alt: 8 21 40;          /* sidebar, a step deeper */
  --surface-primary-contrast: 17 34 64;
  --surface-secondary: 17 34 64;           /* surface #112240 */
  --surface-secondary-alt: 22 43 80;       /* surface-2 #162B50 */
  --surface-tertiary: 22 43 80;
  --surface-tertiary-alt: 22 43 80;
  --surface-hover: 27 50 90;
  --surface-hover-alt: 33 58 102;
  --surface-active: 36 52 110;
  --surface-active-alt: 27 50 90;
  --surface-composer-hover: 22 43 80;
  --surface-submit: 100 58 222;            /* #643ADE */
  --surface-submit-hover: 122 90 232;
  --surface-chat: 17 34 64;
  --surface-dialog: 17 34 64;
  --presentation: 17 34 64;
  --border-light: 31 52 88;
  --border-medium: 44 68 108;
  --border-medium-alt: 44 68 108;
  --border-heavy: 64 90 134;
  --header-primary: 8 21 40;
  --header-hover: 22 43 80;
}

html, body, button, input, select, textarea {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
code, kbd, samp, pre, .font-mono {
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
h1, h2, h3 {
  letter-spacing: -0.015em;
}

/* ---- Space, calm. Pure CSS: no images, one composited layer, still when motion is off. ---- */
html.dark { --presentation: 10 25 47; }                 /* the chat canvas is zkagi.ai's bg */
.h-full.grow.overflow-hidden.bg-presentation {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 560px at 78% -12%, rgba(0, 82, 255, .09), transparent 62%),
    radial-gradient(900px 520px at -4% 112%, rgba(169, 146, 237, .14), transparent 60%),
    #F7F9FC;
}
html.dark .h-full.grow.overflow-hidden.bg-presentation {
  background:
    radial-gradient(1200px 620px at 78% -14%, rgba(100, 58, 222, .26), transparent 62%),
    radial-gradient(900px 520px at -6% 114%, rgba(42, 246, 152, .07), transparent 60%),
    #0A192F;
}
/* stars: tiny dots on one repeating tile, drifting very slowly */
html.dark .h-full.grow.overflow-hidden.bg-presentation::before {
  content: "";
  position: absolute;
  inset: -50% -50% 0 -50%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent 60%),
    radial-gradient(1px 1px at 140px 90px, #cbd8ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 180px, #fff, transparent 60%),
    radial-gradient(1px 1px at 90px 240px, #a4c8ff, transparent 60%),
    radial-gradient(1px 1px at 330px 60px, #fff, transparent 60%);
  background-size: 360px 300px;
  animation: zk-drift 240s linear infinite;
  will-change: transform;
}
@keyframes zk-drift { to { transform: translate3d(-360px, 300px, 0); } }
@media (prefers-reduced-motion: reduce) {
  html.dark .h-full.grow.overflow-hidden.bg-presentation::before { animation: none; }
}
/* inner layers stay clear so the sky shows through */
.h-full.w-full.relative.flex-1.bg-presentation,
.relative.z-10.w-full.bg-presentation { background: transparent; }

/* the composer: a soft glow when you're typing, nothing loud */
form .rounded-3xl.border { transition: box-shadow .4s ease, border-color .4s ease; }
form .rounded-3xl.border:focus-within {
  border-color: rgb(var(--accent-primary) / .55);
  box-shadow: 0 10px 40px -12px rgba(0, 82, 255, .28);
}
html.dark form .rounded-3xl.border:focus-within { box-shadow: 0 10px 44px -10px rgba(100, 58, 222, .45); }

/* ---- Facelift pass: small physical details, all safe to fail. ---- */
::selection { background: rgba(100, 58, 222, .30); }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--border-heavy)) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--border-heavy)); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* each turn settles in gently; off when motion is reduced */
.message-render, .markdown { animation: zk-settle .35s ease both; }
@keyframes zk-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .message-render, .markdown { animation: none; }
}

/* buttons and nav rows answer the hand */
button, a, [role="button"] { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* the send button lifts a little */
form button[type="submit"], form [data-testid="send-button"] { transition: transform .15s ease, box-shadow .25s ease; }
form button[type="submit"]:hover, form [data-testid="send-button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(100, 58, 222, .6);
}

/* focus is visible, in the accent, everywhere */
:focus-visible { outline: 2px solid rgb(var(--accent-primary) / .8); outline-offset: 2px; }