/* ============================================================================
   Ask the Monkey: the site's chat. One component, two brands.
   The view (html[data-view]) is mirrored onto .kc as data-kc-view, and each
   brand names its own roles below. Nothing here touches the engine or the
   sections; the chat only floats above them.
   ========================================================================== */

.kc {
  --kc-ground: #FFFFFF;
  --kc-ink: var(--km-ink);
  --kc-soft: color-mix(in oklab, var(--km-ink) 72%, #FFFFFF);
  --kc-head: var(--km-sun);
  --kc-head-ink: var(--km-ink);
  --kc-bot: var(--km-paper);
  --kc-bot-ink: var(--km-ink);
  --kc-me: var(--km-ink);
  --kc-me-ink: var(--km-paper);
  --kc-chip-line: color-mix(in oklab, var(--km-ink) 38%, transparent);
  --kc-chip-hover: var(--km-sun);
  --kc-chip-hover-ink: var(--km-ink);
  /* charcoal, like the Menu button, so the yellow monkey stands out on it */
  --kc-launch: var(--km-ink);
  --kc-launch-ink: var(--km-paper);
  --kc-launch-hover-ink: var(--km-sun);
  --kc-ring: color-mix(in oklab, var(--km-paper) 42%, transparent);
  --kc-glow: hsl(44 100% 57% / 0.55);
  --kc-launch-focus: var(--km-sun);
  --kc-focus: var(--km-ink);
  --kc-display: "Roboto Slab", Georgia, serif;
  --kc-text: "Inter", system-ui, sans-serif;
  --kc-gap: max(var(--sc-gutter, 1.25rem), env(safe-area-inset-right));
  --kc-lift: 0px;
  font-family: var(--kc-text);
  color: var(--kc-ink);
}
.kc[data-kc-view="finmentals"] {
  --kc-ink: var(--fm-navy);
  --kc-soft: color-mix(in oklab, var(--fm-navy) 72%, #FFFFFF);
  --kc-head: var(--fm-navy);
  --kc-head-ink: var(--fm-white);
  --kc-bot: color-mix(in oklab, var(--fm-navy) 6%, #FFFFFF);
  --kc-bot-ink: var(--fm-navy);
  --kc-me: var(--fm-navy);
  --kc-me-ink: var(--fm-white);
  --kc-chip-line: color-mix(in oklab, var(--fm-navy) 36%, transparent);
  --kc-chip-hover: var(--fm-gold);
  --kc-chip-hover-ink: var(--fm-navy);
  --kc-launch: var(--fm-navy);
  --kc-launch-ink: var(--fm-white);
  --kc-launch-hover-ink: var(--fm-white);
  --kc-ring: var(--fm-gold);
  --kc-glow: hsl(40 49% 57% / 0.5);
  --kc-launch-focus: var(--fm-gold);
  --kc-focus: var(--fm-navy);
  --kc-display: "Cormorant Garamond", Georgia, serif;
  --kc-text: "Montserrat", system-ui, sans-serif;
}
.kc :focus-visible { outline: 2px solid var(--kc-focus); outline-offset: 3px; }
/* zero specificity, so every component below can set its own font and colour */
:where(.kc) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.kc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------- launcher -- */
.kc-launch {
  position: fixed; z-index: 80;
  right: var(--kc-gap);
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--kc-lift));
  display: inline-flex; align-items: center; gap: 0.6rem;
  height: 3.5rem; padding: 0 1.25rem 0 0.4rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--kc-launch); color: var(--kc-launch-ink);
  font: 600 0.95rem/1 var(--kc-text); letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1.5px var(--kc-ring), 0 2px 4px hsl(24 8% 8% / 0.18), 0 12px 26px -8px hsl(24 8% 8% / 0.42);
  transition:
    transform 240ms var(--spring),
    box-shadow 220ms var(--sc-ease-out),
    opacity 260ms var(--sc-ease-out),
    visibility 0s linear 0s;
}
.kc[data-kc-view="kalakaari"] .kc-launch { padding-left: 4.3rem; }
.kc-launch:focus-visible { outline-color: var(--kc-launch-focus); outline-offset: 3px; color: var(--kc-launch-hover-ink); }
@media (hover: hover) and (pointer: fine) {
  .kc-launch:hover {
    transform: translateY(-4px) scale(1.03);
    color: var(--kc-launch-hover-ink);
    box-shadow: inset 0 0 0 1.5px var(--kc-ring), 0 0 0 6px var(--kc-glow), 0 16px 30px -8px hsl(24 8% 8% / 0.45);
  }
}
.kc-launch:active { transform: translateY(1px) scale(0.96); transition-duration: 90ms; }
.kc.is-away .kc-launch,
.kc.is-open .kc-launch,
html.menu-open .kc-launch,
.kc.is-switching .kc-launch {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(0.92);
  transition: transform 240ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out), visibility 0s linear 200ms;
}

/* ------------------------------------------------------------- mascot --
   The whole monkey, never a crop. It stands on whatever it belongs to, with
   its head above the edge. Each motion owns one wrapper's transform:
   .kc-mascot places it, __lean leans toward the pointer and lifts on hover,
   __move sways when idle and jumps, waves or bobs when something happens. */
.kc-mascot { position: absolute; display: block; }
.kc-mascot__lean, .kc-mascot__move { display: block; width: 100%; height: 100%; transform-origin: 50% 97%; }
.kc-mascot__lean {
  transform: translate3d(0, var(--hop, 0px), 0) rotate(var(--lean, 0deg)) scale(var(--grow, 1));
  transition: transform 420ms var(--spring);
}
.kc-mascot__move { animation: kc-sway 3.8s ease-in-out infinite alternate; }
.kc-mascot img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 100%;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 3px 3px hsl(24 8% 8% / 0.3));
}
.kc[data-kc-view="finmentals"] .kc-mascot { display: none; }

@keyframes kc-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes kc-boing {
  0%   { transform: none; }
  18%  { transform: scale(1.14, 0.84); }
  45%  { transform: translateY(-30%) scale(0.92, 1.1) rotate(-7deg); }
  72%  { transform: translateY(0) scale(1.08, 0.92); }
  86%  { transform: translateY(-5%) scale(0.98, 1.03); }
  100% { transform: none; }
}
@keyframes kc-cheer {
  0%   { transform: none; }
  15%  { transform: scale(1.16, 0.82); }
  38%  { transform: translateY(-42%) rotate(-12deg) scale(0.9, 1.12); }
  55%  { transform: translateY(-42%) rotate(10deg); }
  80%  { transform: translateY(0) scale(1.1, 0.9); }
  100% { transform: none; }
}
@keyframes kc-wave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-11deg); }
  30% { transform: rotate(9deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}
@keyframes kc-think {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-9%) rotate(4deg); }
}
@keyframes kc-land { from { transform: translateY(105%); } to { transform: translateY(0); } }
.kc-mascot.is-boing .kc-mascot__move { animation: kc-boing 560ms var(--sc-ease-out) 1; }
.kc-mascot.is-cheer .kc-mascot__move { animation: kc-cheer 820ms var(--sc-ease-out) 1; }
.kc-mascot.is-wave .kc-mascot__move { animation: kc-wave 1.4s ease-in-out 1; }
.kc.is-thinking .kc-head .kc-mascot__move { animation: kc-think 680ms ease-in-out infinite; }

/* on the launcher: feet on the pill, head over its top edge */
.kc-launch .kc-mascot { left: 0.45rem; bottom: 0.15rem; width: 3.5rem; height: 5.5rem; }
@media (hover: hover) and (pointer: fine) {
  .kc-launch:hover .kc-mascot__lean { --hop: -5px; --grow: 1.07; }
}
.kc-launch:focus-visible .kc-mascot__lean { --hop: -5px; --grow: 1.07; }

/* in the chat header: it jumps up from behind the bottom edge as the chat opens */
.kc-head .kc-mascot {
  position: relative; flex: none; align-self: flex-end;
  width: 2.8rem; height: 4.4rem; margin: -0.75rem 0 -0.78rem;
  cursor: pointer;
}
.kc.is-open .kc-head .kc-mascot__lean { animation: kc-land 700ms var(--spring) 90ms backwards; }

/* Finmentals has no monkey: a gold monogram, quieter, as the brand is */
.kc-mono {
  display: none; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--fm-navy); color: var(--fm-gold);
  box-shadow: inset 0 0 0 1.5px var(--fm-gold);
  font: italic 600 1.55rem/1 "Cormorant Garamond", Georgia, serif;
  transition: transform 320ms var(--spring), box-shadow 300ms var(--sc-ease-out);
}
.kc[data-kc-view="finmentals"] .kc-mono { display: inline-flex; }
.kc-head .kc-mono { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
@media (hover: hover) and (pointer: fine) {
  .kc-launch:hover .kc-mono { transform: rotate(-10deg) scale(1.06); box-shadow: inset 0 0 0 1.5px var(--fm-gold), 0 0 0 4px hsl(40 49% 57% / 0.35); }
}
@keyframes kc-ring { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--fm-gold), 0 0 0 0 hsl(40 49% 57% / 0.5); } 50% { box-shadow: inset 0 0 0 1.5px var(--fm-gold), 0 0 0 5px hsl(40 49% 57% / 0); } }
.kc.is-thinking .kc-head .kc-mono { animation: kc-ring 1.1s ease-in-out infinite; }

/* One small peek, once, to say the chat exists. */
.kc-peek {
  position: fixed; z-index: 80;
  right: var(--kc-gap);
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--kc-lift) + 6.2rem);
  display: flex; align-items: center; gap: 0.25rem;
  max-width: min(17rem, calc(100vw - 2.5rem));
  padding: 0.55rem 0.4rem 0.55rem 1rem;
  border-radius: 1rem 1rem 0.3rem 1rem;
  background: var(--kc-ground); color: var(--kc-ink);
  font: 500 0.92rem/1.35 var(--kc-text);
  box-shadow: 0 0 0 1px var(--kc-chip-line), 0 14px 30px -12px hsl(24 8% 8% / 0.45);
  transform-origin: 100% 100%;
  animation: kc-peek 420ms var(--spring) both;
}
.kc-peek[hidden] { display: none; }
.kc-peek__open { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-weight: 600; }
.kc-peek__x {
  flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
@media (hover: hover) and (pointer: fine) { .kc-peek__x:hover { background: var(--kc-bot); } }
.kc.is-away .kc-peek, .kc.is-open .kc-peek, html.menu-open .kc-peek { display: none; }
@keyframes kc-peek { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- panel -- */
.kc-panel {
  position: fixed; z-index: 80;
  right: var(--kc-gap);
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(24rem, calc(100vw - 2rem));
  height: min(36rem, calc(100dvh - 2rem));
  display: flex; flex-direction: column;
  border-radius: 1.25rem; overflow: hidden;
  background: var(--kc-ground); color: var(--kc-ink);
  box-shadow: 0 0 0 1px var(--kc-chip-line), 0 30px 60px -20px hsl(24 8% 8% / 0.55), 0 8px 18px -8px hsl(24 8% 8% / 0.3);
  transform-origin: 100% 100%;
}
.kc-panel[hidden] { display: none; }
.kc.is-open .kc-panel { animation: kc-open 360ms var(--spring) both; }
@keyframes kc-open { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }

.kc-head {
  position: relative; overflow: hidden; /* the monkey rises from behind its bottom edge */
  flex: none; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 0.6rem 0.75rem 0.9rem;
  background: var(--kc-head); color: var(--kc-head-ink);
}
.kc[data-kc-view="finmentals"] .kc-head { box-shadow: inset 0 -2px 0 var(--fm-gold); }
.kc-head__text { flex: 1; min-width: 0; }
.kc-head__title { margin: 0; font: 700 1.08rem/1.15 var(--kc-display); }
.kc[data-kc-view="finmentals"] .kc-head__title { font-size: 1.3rem; font-weight: 600; }
.kc-head__sub { margin: 0.15rem 0 0; font-size: 0.8rem; line-height: 1.3; opacity: 0.86; }
.kc-icon {
  flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: inherit; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  transition: transform 240ms var(--spring), background-color 160ms var(--sc-ease-out);
}
.kc-head .kc-icon:focus-visible { outline-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .kc-icon:hover { transform: translateY(-2px); background: color-mix(in oklab, currentColor 14%, transparent); }
}
.kc-icon:active { transform: scale(0.92); }
.kc-icon svg { width: 1.15rem; height: 1.15rem; }

.kc-log {
  position: relative;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1rem 0.9rem 0.6rem;
  scroll-behavior: smooth;
}
.kc-msg { max-width: 88%; display: flex; flex-direction: column; gap: 0.5rem; }
.kc-msg.is-new { animation: kc-in 320ms var(--spring) both; }
.kc-msg--bot { align-self: flex-start; }
.kc-msg--me { align-self: flex-end; }
@keyframes kc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kc-bubble {
  margin: 0; padding: 0.65rem 0.85rem;
  border-radius: 1rem 1rem 1rem 0.3rem;
  background: var(--kc-bot); color: var(--kc-bot-ink);
  font-size: 0.94rem; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere;
}
.kc-msg--me .kc-bubble { border-radius: 1rem 1rem 0.3rem 1rem; background: var(--kc-me); color: var(--kc-me-ink); }

/* Actions: every one of them lights up and bounces, like the rest of the site */
.kc-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kc-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.4rem; padding: 0.45rem 0.9rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--kc-ground); color: var(--kc-ink);
  box-shadow: inset 0 0 0 1.5px var(--kc-chip-line);
  font: 600 0.86rem/1.2 var(--kc-text); text-align: left; text-decoration: none;
  transition: transform 240ms var(--spring), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
}
.kc-chip--go { background: var(--kc-ink); color: var(--kc-ground); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .kc-chip:hover { transform: translateY(-3px); background: var(--kc-chip-hover); color: var(--kc-chip-hover-ink); box-shadow: inset 0 0 0 1.5px var(--kc-chip-hover), 0 8px 16px -8px hsl(24 8% 8% / 0.45); }
}
.kc-chip:focus-visible { transform: translateY(-3px); }
.kc-chip:active { transform: translateY(1px) scale(0.96); transition-duration: 90ms; }
.kc-chip__arrow { font-weight: 500; }

/* typing */
.kc-typing { display: inline-flex; gap: 0.3rem; padding: 0.85rem 0.95rem; }
.kc-typing i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.35; animation: kc-dot 1.1s var(--sc-ease-out) infinite; }
.kc-typing i:nth-child(2) { animation-delay: 0.15s; }
.kc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes kc-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }

/* the lead card */
.kc-form {
  display: grid; gap: 0.65rem;
  width: 100%; padding: 0.85rem;
  border-radius: 1rem; background: var(--kc-bot); color: var(--kc-bot-ink);
}
.kc-msg--form { max-width: 100%; width: 100%; }
.kc-field { display: grid; gap: 0.25rem; }
.kc-field label { font-size: 0.8rem; font-weight: 600; }
.kc-field input, .kc-field select, .kc-field textarea {
  width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem;
  border: 0; border-radius: 0.7rem;
  background: #FFFFFF; color: var(--kc-ink);
  box-shadow: inset 0 0 0 1.5px var(--kc-chip-line);
  font-size: 16px; /* 16px or more: iOS Safari will not zoom the page */
}
.kc-field textarea { resize: vertical; min-height: 4.5rem; }
.kc-field input:focus-visible, .kc-field select:focus-visible, .kc-field textarea:focus-visible { outline-offset: 1px; }
.kc-field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B3261E; }
.kc-err { margin: 0; font-size: 0.8rem; font-weight: 600; color: #B3261E; }
.kc-err:empty { display: none; }
.kc-form__row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kc-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* compose */
.kc-compose {
  flex: none; display: flex; align-items: flex-end; gap: 0.5rem;
  padding: 0.6rem 0.7rem 0.35rem;
  border-top: 1px solid var(--kc-chip-line);
  background: var(--kc-ground);
}
.kc-compose textarea {
  flex: 1; min-width: 0; resize: none;
  min-height: 2.75rem; max-height: 7.5rem; padding: 0.65rem 0.85rem;
  border: 0; border-radius: 1.2rem;
  background: var(--kc-bot); color: var(--kc-ink);
  font-size: 16px; line-height: 1.4;
}
.kc-compose textarea::placeholder { color: var(--kc-soft); }
.kc-send {
  flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--kc-ink); color: var(--kc-ground);
  transition: transform 240ms var(--spring), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.kc-send svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .kc-send:hover { transform: translateY(-3px) rotate(-8deg); background: var(--kc-chip-hover); color: var(--kc-chip-hover-ink); } }
.kc-send:active { transform: scale(0.92); }
.kc-send:disabled { opacity: 0.45; cursor: default; transform: none; }
.kc-note {
  flex: none; margin: 0; padding: 0 0.9rem 0.65rem;
  background: var(--kc-ground); color: var(--kc-soft);
  font-size: 0.72rem; line-height: 1.35;
}

/* ----------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  .kc-launch, .kc[data-kc-view="kalakaari"] .kc-launch { height: 3.5rem; width: 3.5rem; padding: 0; justify-content: center; }
  .kc-launch .kc-mascot { left: calc(50% - 1.35rem); bottom: 0.12rem; width: 2.7rem; height: 4.25rem; }
  .kc-launch .kc-mono { width: 2.9rem; height: 2.9rem; }
  .kc-launch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.chat-open { overflow: hidden; }
  .kc-panel {
    left: 0; right: 0; width: auto;
    bottom: var(--kc-kb, 0px);
    height: min(88dvh, calc(var(--kc-vh, 100dvh) - 0.75rem));
    border-radius: 1.25rem 1.25rem 0 0;
  }
  .kc-note { padding-bottom: max(0.65rem, env(safe-area-inset-bottom)); }
  .kc-head { padding-left: max(0.9rem, env(safe-area-inset-left)); padding-right: max(0.6rem, env(safe-area-inset-right)); }
  /* a sheet slides up and stops: an overshoot would lift it off the bottom edge */
  .kc.is-open .kc-panel { animation: kc-sheet 380ms var(--sc-ease-out) both; }
  @keyframes kc-sheet { from { transform: translateY(100%); } to { transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .kc-launch, .kc-chip, .kc-send, .kc-icon, .kc-mascot__lean, .kc-mono { transition: none !important; }
  .kc-msg.is-new, .kc-peek, .kc.is-open .kc-panel,
  .kc-mascot__lean, .kc-mascot__move, .kc.is-open .kc-head .kc-mascot__lean, .kc-mono { animation: none !important; }
  .kc-mascot__lean { transform: none !important; }
  .kc-typing i { animation: none; opacity: 0.6; }
  .kc-log { scroll-behavior: auto; }
  .kc-launch:hover, .kc-chip:hover, .kc-send:hover { transform: none; }
}