/* freepay.space cabinet theme (keks, 2026-11-06: «в кабинете используй shadcncraft»). The shadcncraft kit is built
 * on shadcn/ui's neutral theme: plain Inter, neutral grey scale, hairline borders, no accent colour. The cabinet is
 * already shadcn/ui, so here only its tokens are switched to that theme; the build links this file after the
 * cabinet's own CSS on the freepay copy only (scripts/build-worker.mjs). Klinch never loads it. */
:root, .kc-light {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --subtle: oklch(0.985 0 0);
  --sidebar: oklch(0.985 0 0);
  --bubble: oklch(0.97 0 0);
  --border: oklch(0.922 0 0);
  --border-strong: oklch(0.87 0 0);
  --accent: oklch(0.97 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --brand: oklch(0.205 0 0);
  --brand-soft: oklch(0.97 0 0);
  --ring: oklch(0.708 0 0);
  --danger: oklch(0.577 0.245 27.325);
  --code-bg: oklch(0.985 0 0);
  --canvas: oklch(0.985 0 0);
  --dot: transparent;
  --composer-shadow: 0 0 0 1px var(--border), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
/* Dark: keks's reference (2026-11-06, Pinterest pin 737183032789836385): a deep blue-black, a soft light falling
 * from the top centre, a faint teal glow in the lower right; floating panels a shade lighter, hairlines of white at
 * a few percent, silver text. White stays the main button colour. */
.dark {
  --background: #0e111a;
  --foreground: #f2f3f7;
  --card: #161a25;
  --muted: #1a1e2a;
  --muted-foreground: #8b90a1;
  --subtle: #121520;
  --sidebar: #131722;
  --bubble: #1c2030;
  --border: rgb(255 255 255 / 0.07);
  --border-strong: rgb(255 255 255 / 0.11);
  --accent: #1a1e2a;
  --primary: #fff;
  --primary-foreground: #0e111a;
  --brand: #fff;
  --brand-soft: #1a1e2a;
  --ring: #4b5266;
  --danger: #ff6b6b;
  --code-bg: #10131c;
  --canvas: #0e111a;
  --dot: transparent;
  --composer-shadow: 0 0 0 1px var(--border);
}
body { font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: normal }

/* The dot-matrix wordmark becomes the FREEPAY logo (brand/freepay/art/logo.png), in the text colour. */
svg.dm[aria-label="FREEPAY"] > * { display: none }
svg.dm[aria-label="FREEPAY"] {
  background-color: currentColor;
  -webkit-mask: url(/freepay/logo.png) left center / contain no-repeat;
  mask: url(/freepay/logo.png) left center / contain no-repeat;
}

/* The onboarding picture is a red sunset on Klinch: black and white here, as the rest of the copy. */
.kc-ob-hero { filter: grayscale(1) !important }

/* The agent's eyes glow red on Klinch: white light only on the copy. */
.kl-face, .kl-dorb { filter: grayscale(1) }

/* Headings as on freepay.space: regular weight, slightly tight. */
h1, h2 { font-weight: 400 !important; letter-spacing: -0.01em }

/* ── keks's reference layout (code/src/lib/brand.ts gates the markup) ─────────────────────────────────────────── */
.dark .fp-main {
  background:
    radial-gradient(52% 46% at 50% 0%, rgb(86 92 150 / 0.30), transparent 72%),
    radial-gradient(34% 30% at 88% 100%, rgb(64 130 140 / 0.13), transparent 72%),
    var(--background);
}
.fp-main { background: var(--background) }
.dark body, .dark #root { background: #0b0e16 }
/* The rail and the chat list float a few pixels off the edges, a shade lighter than the page. */
.fp-float { background: var(--sidebar); border-radius: 16px; overflow: hidden }
.dark .fp-float { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.03) }
.fp-rail-btn { color: rgb(255 255 255 / 0.32); transition: color 150ms ease, background-color 150ms ease }
:root:not(.dark) .fp-rail-btn { color: rgb(0 0 0 / 0.4) }
.fp-rail-btn:hover { color: var(--foreground); background: rgb(127 127 127 / 0.1) }
.fp-rail-btn.is-on { color: var(--foreground) }

/* Top right: the white button with a light-blue tile («Connect Wallet» in the reference). */
.fp-wallet {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 5px; border-radius: 10px;
  background: #fff; color: #0e111a; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 6px 20px -10px rgb(0 0 0 / 0.6);
  transition: transform 150ms ease, opacity 150ms ease;
}
.fp-wallet:hover { opacity: 0.92 } .fp-wallet:active { transform: scale(0.97) }
.fp-wallet-tile { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff;
  background: linear-gradient(180deg, #7cc4ff, #3c8dff) }

/* New chat: the glowing star and the silver headline. */
.fp-star { filter: drop-shadow(0 0 10px rgb(80 160 255 / 0.85)) drop-shadow(0 0 28px rgb(60 130 255 / 0.45)) }
.fp-help {
  background: linear-gradient(180deg, #f4f5f8 15%, #9298a8 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root:not(.dark) .fp-help { background: linear-gradient(180deg, #2a2d36, #6b7080); -webkit-background-clip: text; background-clip: text }

/* The task carousel: the card in front is big, the next two shrink to the right, the rest wait out of sight. */
.fp-carousel { perspective: 900px }
.fp-card {
  position: absolute; left: 50%; top: 0; width: 210px; height: 128px; padding: 12px 14px; border-radius: 14px;
  text-align: left; color: #fff; overflow: hidden; cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 18px 40px -18px rgb(0 0 0 / 0.8);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease, filter 700ms ease;
}
.fp-card[data-pos="0"] { transform: translateX(-105%) scale(1); opacity: 1; z-index: 3 }
.fp-card[data-pos="1"] { transform: translateX(16%) translateY(14%) scale(0.6); opacity: 0.95; z-index: 2 }
.fp-card[data-pos="2"] { transform: translateX(118%) translateY(36%) scale(0.2); opacity: 0.9; z-index: 1 }
.fp-card[data-pos="3"] { transform: translateX(160%) translateY(42%) scale(0.05); opacity: 0; pointer-events: none }
.fp-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]) { transform: translateX(-180%) scale(0.8); opacity: 0; pointer-events: none }
.fp-card[data-pos="0"]:hover { transform: translateX(-105%) translateY(-3px) scale(1.02) }
.fp-card-t { position: relative; z-index: 1; display: block; max-width: 150px; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.15) }
.fp-card[data-tone="code"], .fp-pill-thumb[data-tone="code"] { background: linear-gradient(150deg, #9b8cff 0%, #7b6cf2 55%, #b9a8ff 100%) }
.fp-card[data-tone="files"], .fp-pill-thumb[data-tone="files"] { background: linear-gradient(150deg, #8fc6f2 0%, #b7d3ee 50%, #f2c38f 100%) }
.fp-card[data-tone="plan"], .fp-pill-thumb[data-tone="plan"] { background: linear-gradient(150deg, #f5a9c6 0%, #f3c9d6 50%, #a8e2cf 100%) }
.fp-card[data-tone="tests"], .fp-pill-thumb[data-tone="tests"] { background: linear-gradient(150deg, #6fd3c0 0%, #79b8e8 100%) }
.fp-card[data-tone="explain"], .fp-pill-thumb[data-tone="explain"] { background: linear-gradient(150deg, #ffb37a 0%, #f58fa8 100%) }
/* The small picture in the card's lower right: a glass window with code lines, a stack of photos or a checklist. */
.fp-card-art { position: absolute; right: -10px; bottom: -12px; width: 118px; height: 78px; border-radius: 12px;
  background: rgb(20 20 40 / 0.28); border: 1px solid rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 24px -10px rgb(20 10 60 / 0.6);
  transform: rotate(-8deg); padding: 12px 12px 0; display: flex; flex-direction: column; gap: 7px }
.fp-art-win i { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.85) }
.fp-art-win i:nth-child(2) { background: #c7f0ff } .fp-art-win i:nth-child(3) { background: #ffd9f2 }
.fp-art-win b { position: absolute; right: 14px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #2bb39a; font-size: 12px; display: grid; place-items: center }
.fp-art-stack { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none }
.fp-art-stack i { position: absolute; width: 70px; height: 52px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.5) }
.fp-art-stack i:nth-child(1) { right: 34px; bottom: 18px; transform: rotate(-12deg); background: linear-gradient(160deg, #ffd27a, #ff8f6b) }
.fp-art-stack i:nth-child(2) { right: 16px; bottom: 12px; transform: rotate(4deg); background: linear-gradient(160deg, #7ad0ff, #4a7dff) }
.fp-art-stack i:nth-child(3) { right: 4px; bottom: 2px; transform: rotate(14deg); background: linear-gradient(160deg, #c1f5d8, #5cc7a2) }
.fp-art-list > span { display: flex; align-items: center; gap: 6px }
.fp-art-list b { width: 9px; height: 9px; border-radius: 3px; background: #fff; flex: none }
.fp-art-list i { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.85) }

/* The picked task above the composer's right corner, its menu, and the composer as dark glass. */
.fp-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 6px 0 4px; border-radius: 10px; font-size: 12.5px; font-weight: 500;
  color: var(--foreground); background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); transition: background-color 150ms ease }
.fp-pill:hover { background: rgb(255 255 255 / 0.07) }
:root:not(.dark) .fp-pill { background: rgb(0 0 0 / 0.03); border-color: rgb(0 0 0 / 0.08) }
.fp-pill-sep { width: 1px; height: 18px; margin: 0 6px 0 4px; background: rgb(127 127 127 / 0.25) }
.fp-pill-thumb { display: inline-block; width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3) }
.fp-menu { border-radius: 12px; background: #171b27; border: 1px solid rgb(255 255 255 / 0.08); box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.9) }
.dark .nc-prism {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.02));
  border-color: rgb(255 255 255 / 0.08); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 24px 60px -30px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dark .nc-prism:focus-within { border-color: rgb(255 255 255 / 0.16) }
.dark .kl-glow:focus-within { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px rgb(120 170 255 / 0.10), 0 24px 60px -30px rgb(0 0 0 / 0.9) !important }
/* Send: a round grey button that turns white once there is something to send. */
.kl-send { background: rgb(255 255 255 / 0.14); color: #0e111a }
.kl-send:disabled { background: rgb(255 255 255 / 0.10) !important; color: rgb(255 255 255 / 0.45) !important }
.kl-send:not(:disabled) { background: #fff; color: #0e111a; box-shadow: 0 6px 18px -8px rgb(140 180 255 / 0.6) }
:root:not(.dark) .kl-send:not(:disabled) { background: #0e111a; color: #fff }
/* The composer below a chat sits on the page's own colour, not a black strip. */
.dark .fp-main .bg-background { background: transparent }
.dark .fp-main .before\:from-background::before { --tw-gradient-from: transparent }
.fp-main .kc-topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none }
.fp-card { display: block }
.fp-card-t { position: absolute; left: 14px; top: 12px }
@media (max-width: 640px) {
  .fp-wallet { padding-right: 9px; gap: 6px }
  .fp-card { width: 168px; height: 104px }
  .fp-card[data-pos="0"] { transform: translateX(-88%) scale(1) }
  .fp-card[data-pos="0"]:hover { transform: translateX(-88%) }
  .fp-card[data-pos="1"] { transform: translateX(22%) translateY(14%) scale(0.6) }
  .fp-card[data-pos="2"] { transform: translateX(118%) translateY(36%) scale(0.22) }
  .fp-card-art { width: 96px; height: 64px }
}