/* ==========================================================================
   Kaivix chat widget — shared by every page on the site.

   This file replaces two separate widget implementations: the `.kvx__*`
   widget that lived in kaivix.css (loaded by the 13 inner pages) and the
   `.kvx-widget__*` one in kaivix-home.css (loaded only by the rebuilt
   homepage). They had drifted into different markup, different class
   names and different behaviour, so every widget change had to be made
   twice and kept in step by hand.

   The visual design here is the newer of the two — the homepage's
   design-system widget — since that is the direction the site is moving.

   SELF-CONTAINED BY DESIGN. Every value the widget needs is defined
   below, under `.kvxc`, rather than borrowed from the host page. The two
   stylesheets on this site do not share a token vocabulary (kaivix.css
   speaks --t-ink/--blue, kaivix-home.css speaks --text/--accent), so a
   widget referring to either one would render unstyled on half the site.
   Owning its own tokens is also what lets this widget eventually be
   embedded on a customer's site, where no Kaivix token exists at all.

   Theming follows the host page's `data-theme` attribute, which both
   page families already set on <html> before first paint. Light is the
   base; dark overrides only the tokens.
   ========================================================================== */

.kvxc {
  /* Surfaces */
  --kvxc-panel: #ffffff;
  --kvxc-panel-2: #f6f6f8;
  --kvxc-line: rgba(0, 0, 0, .10);
  --kvxc-line-strong: rgba(0, 0, 0, .18);

  /* Ink */
  --kvxc-text: #1d1d1f;
  --kvxc-muted: #6e6e73;

  /* Accent — the widget's only interactive colour */
  --kvxc-accent: #4f46e5;
  --kvxc-accent-dim: rgba(79, 70, 229, .10);
  --kvxc-accent-border: rgba(79, 70, 229, .24);

  /* Launcher / send button sit on inverted ink */
  --kvxc-invert-bg: #111113;
  --kvxc-invert-text: #ffffff;

  --kvxc-live: #059669;
  --kvxc-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  --kvxc-ease: cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] .kvxc {
  --kvxc-panel: #101012;
  --kvxc-panel-2: rgba(255, 255, 255, .04);
  --kvxc-line: rgba(255, 255, 255, .10);
  --kvxc-line-strong: rgba(255, 255, 255, .18);

  --kvxc-text: #f5f5f5;
  --kvxc-muted: #8a8a8a;

  --kvxc-accent: #818cf8;
  --kvxc-accent-dim: rgba(129, 140, 248, .12);
  --kvxc-accent-border: rgba(129, 140, 248, .28);

  --kvxc-invert-bg: #f5f5f5;
  --kvxc-invert-text: #050505;

  --kvxc-live: #34d399;
  --kvxc-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

/* The widget root is a positioning context only — the launcher and panel
   are both fixed, so this element itself has no box of its own. */
.kvxc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------- Launcher */
.kvxc__launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kvxc-invert-bg);
  color: var(--kvxc-invert-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kvxc-shadow);
  z-index: 9999;
  transition: transform .2s var(--kvxc-ease);
}
.kvxc__launcher:hover { transform: translateY(-2px); }
.kvxc__launcher[hidden] { display: none; }

/* ---------------------------------------------------------------- Panel */
.kvxc__panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--kvxc-panel);
  border: 1px solid var(--kvxc-line);
  border-radius: 20px 20px 6px 20px;
  overflow: hidden;
  box-shadow: var(--kvxc-shadow);
  display: flex;
  flex-direction: column;
  z-index: 9998;
}
.kvxc__panel[hidden] { display: none; }

.kvxc__head {
  padding: 16px 18px;
  background: var(--kvxc-panel-2);
  border-bottom: 1px solid var(--kvxc-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kvxc__agent { display: flex; align-items: center; gap: 10px; }
.kvxc__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kvxc-panel-2);
  border: 1px solid var(--kvxc-line-strong);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--kvxc-text);
  flex-shrink: 0;
}
.kvxc__name { font-size: 14px; font-weight: 600; color: var(--kvxc-text); }
.kvxc__status { font-size: 11px; color: var(--kvxc-live); margin-top: 1px; }

/* Shown instead of the agent block on Messages and Help — those screens are
   not a conversation with Bray, so they should not present his identity. */
.kvxc__title { font-size: 14px; font-weight: 600; color: var(--kvxc-text); }
.kvxc__title[hidden], .kvxc__agent[hidden] { display: none; }
.kvxc__close {
  background: none;
  border: none;
  color: var(--kvxc-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
}
.kvxc__close:hover { color: var(--kvxc-text); }

/* -------------------------------------------------------------- Screens */
/* The panel is head / screens / tabs stacked vertically. This wrapper takes
   all the leftover height and gives it to whichever screen is showing, so
   the head and the tab bar stay put and only the screen scrolls.
   min-height:0 is what actually allows that child to scroll — without it a
   flex item refuses to shrink below its content and the log grows the panel
   instead of scrolling inside it. */
.kvxc__screens {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kvxc__screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.kvxc__screen[hidden] { display: none; }

/* Screens that are one scrolling column of content (Messages, Help).
   Home is not one of these: it owns its own scroll region (the log) with a
   composer pinned beneath it. */
.kvxc__screen--scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kvxc__screen--scroll:focus { outline: none; }

.kvxc__pane { padding: 16px; }

/* Honest empty state. Messages and Help both start here; Phases 3 and 4
   replace the contents, not the container. */
.kvxc__empty {
  text-align: center;
  padding: 34px 18px;
  color: var(--kvxc-muted);
}
.kvxc__empty-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kvxc-text);
}
.kvxc__empty-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ Log */
.kvxc__log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kvxc__msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--kvxc-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kvxc__msg--user {
  align-self: flex-end;
  background: var(--kvxc-panel-2);
  border: 1px solid var(--kvxc-line);
  border-bottom-right-radius: 4px;
}
.kvxc__msg--agent {
  align-self: flex-start;
  background: var(--kvxc-accent-dim);
  border: 1px solid var(--kvxc-accent-border);
  border-bottom-left-radius: 4px;
}
.kvxc__msg a { text-decoration: underline; color: var(--kvxc-accent); }

.kvxc__typing {
  display: flex;
  gap: 4px;
  padding: 11px 15px;
  background: var(--kvxc-accent-dim);
  border: 1px solid var(--kvxc-accent-border);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.kvxc__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kvxc-muted);
  animation: kvxcDot .9s infinite;
}
.kvxc__typing span:nth-child(2) { animation-delay: .15s; }
.kvxc__typing span:nth-child(3) { animation-delay: .3s; }

/* Own keyframe name rather than reusing kvxDot: that one is defined in
   kaivix-home.css, which the inner pages do not load. */
@keyframes kvxcDot {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .kvxc__typing span { animation: none; }
  .kvxc__launcher { transition: none; }
}

.kvxc__fallback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  max-width: 92%;
}
.kvxc__fallback a {
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--kvxc-panel-2);
  border: 1px solid var(--kvxc-line);
  color: var(--kvxc-text);
  text-decoration: none;
}
.kvxc__fallback a:hover { border-color: var(--kvxc-accent-border); color: var(--kvxc-accent); }

/* ----------------------------------------------------------- Composer */
.kvxc__foot {
  padding: 12px;
  border-top: 1px solid var(--kvxc-line);
  background: var(--kvxc-panel-2);
}
.kvxc__row { display: flex; gap: 8px; align-items: flex-end; }
.kvxc__input {
  flex: 1;
  min-width: 0;
  background: var(--kvxc-panel);
  border: 1px solid var(--kvxc-line-strong);
  color: var(--kvxc-text);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  font-family: inherit;
  resize: none;
  max-height: 96px;
  overflow-y: auto;
}
.kvxc__input:focus { border-color: var(--kvxc-accent); }
.kvxc__input::placeholder { color: var(--kvxc-muted); }

.kvxc__send {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--kvxc-invert-bg);
  color: var(--kvxc-invert-text);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.kvxc__send:disabled { opacity: .45; cursor: not-allowed; }

.kvxc__brand {
  text-align: center;
  font-size: 10px;
  color: var(--kvxc-muted);
  margin-top: 8px;
  letter-spacing: .5px;
}

/* ---------------------------------------------------------- Messages */
.kvxc__threads { display: flex; flex-direction: column; gap: 8px; }

.kvxc__thread {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--kvxc-panel-2);
  border: 1px solid var(--kvxc-line);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s var(--kvxc-ease);
}
.kvxc__thread:hover { border-color: var(--kvxc-accent-border); }
.kvxc__thread:focus-visible {
  outline: 2px solid var(--kvxc-accent);
  outline-offset: 2px;
}
/* The thread the composer is currently writing into. */
.kvxc__thread.is-current {
  border-color: var(--kvxc-accent-border);
  background: var(--kvxc-accent-dim);
}

.kvxc__thread-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* One line only — the full text is in the conversation itself. */
.kvxc__thread-preview {
  font-size: 13px;
  line-height: 1.45;
  color: var(--kvxc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.kvxc__thread-time {
  font-size: 11px;
  color: var(--kvxc-muted);
  flex-shrink: 0;
}
.kvxc__thread-meta {
  font-size: 11px;
  color: var(--kvxc-muted);
}

.kvxc__newthread,
.kvxc__retry {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: none;
  border: 1px dashed var(--kvxc-line-strong);
  color: var(--kvxc-accent);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.kvxc__newthread:hover,
.kvxc__retry:hover { border-color: var(--kvxc-accent); }
.kvxc__newthread:focus-visible,
.kvxc__retry:focus-visible {
  outline: 2px solid var(--kvxc-accent);
  outline-offset: 2px;
}
.kvxc__retry { width: auto; margin: 12px auto 0; border-style: solid; }

/* System aside inside the chat log — not a message from either party, so
   deliberately unlike both bubble styles. */
.kvxc__note {
  align-self: center;
  max-width: 92%;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: var(--kvxc-muted);
  padding: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .kvxc__thread { transition: none; }
}

/* -------------------------------------------------------------- Help */
/* Sticks while the answers scroll beneath it — with 23 entries the search
   box would otherwise be the first thing to disappear. */
.kvxc__search {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--kvxc-panel);
  padding-bottom: 10px;
  margin: -16px -16px 0;
  padding: 16px 16px 10px;
}
.kvxc__search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--kvxc-panel-2);
  border: 1px solid var(--kvxc-line-strong);
  color: var(--kvxc-text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.kvxc__search-input:focus { border-color: var(--kvxc-accent); }
.kvxc__search-input::placeholder { color: var(--kvxc-muted); }

.kvxc__search-count {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--kvxc-muted);
}

.kvxc__articles-group {
  margin: 16px 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--kvxc-muted);
}
.kvxc__articles-group:first-child { margin-top: 4px; }

.kvxc__article { border-bottom: 1px solid var(--kvxc-line); }

.kvxc__article-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--kvxc-text);
}
.kvxc__article-q:hover { color: var(--kvxc-accent); }
.kvxc__article-q:focus-visible {
  outline: 2px solid var(--kvxc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.kvxc__article-sign {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--kvxc-muted);
}

.kvxc__article-a {
  padding: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--kvxc-muted);
}
.kvxc__article-a[hidden] { display: none; }

.kvxc__help-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--kvxc-accent);
  text-decoration: underline;
}
.kvxc__help-link--foot {
  display: block;
  margin-top: 16px;
  text-align: center;
}

/* ----------------------------------------------------------- Tab bar */
/* Sits at the bottom of the panel, below whichever screen is showing —
   the structure JustCall's widget uses, and the reason the panel is now a
   three-row flex column rather than head + scrolling body. */
.kvxc__tabs {
  display: flex;
  border-top: 1px solid var(--kvxc-line);
  background: var(--kvxc-panel-2);
  flex-shrink: 0;
}

.kvxc__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 10px;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  color: var(--kvxc-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s var(--kvxc-ease);
}
.kvxc__tab:hover { color: var(--kvxc-text); }

/* The selected tab is marked by colour AND a top rule, never colour alone —
   colour on its own is not a distinction every visitor can see. */
.kvxc__tab.is-active {
  color: var(--kvxc-accent);
  border-top-color: var(--kvxc-accent);
}

/* Keyboard focus must stay visible: the tab bar uses a roving tabindex, so
   this ring is often the only thing telling a keyboard user where they are. */
.kvxc__tab:focus-visible {
  outline: 2px solid var(--kvxc-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.kvxc__tab-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
}

@media (prefers-reduced-motion: reduce) {
  .kvxc__tab { transition: none; }
}

/* Visually hidden, still read aloud — the composer's label. */
.kvxc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* packages.html renders a sticky CTA bar along the bottom of the viewport.
   Without this the launcher sits underneath it. Carried over from the rule
   the old kaivix.css widget had; it offsets the launcher and the panel
   separately now, because unlike the old markup they are each positioned
   in their own right rather than inside one positioned root. */
body.has-sticky-bar .kvxc__launcher { bottom: 88px; }
body.has-sticky-bar .kvxc__panel { bottom: 152px; }

@media (max-width: 640px) {
  .kvxc__launcher { bottom: 16px; right: 16px; }
  .kvxc__panel { bottom: 80px; right: 16px; }

  body.has-sticky-bar .kvxc__launcher { bottom: 84px; }
  body.has-sticky-bar .kvxc__panel { bottom: 148px; }
}

/* The widget is screen furniture, never part of a printed page. */
@media print {
  .kvxc { display: none !important; }
}