/* ── Kai widget design tokens. LIGHT ──────────────────────────── */
:root {
  --kai-bg:         #f5f6fd;
  --kai-bg-msg:     #f5f6fd;
  --kai-panel-bdr:  rgba(67,92,204,0.2);
  --kai-panel-shad: 0 12px 48px rgba(67,92,204,0.1), 0 4px 16px rgba(0,0,0,0.08);
  --kai-bot-bg:     rgba(67,92,204,0.07);
  --kai-bot-txt:    #131725;
  --kai-bot-strong: #0c1128;
  --kai-bot-link:   #435ccc;
  --kai-typing-bg:  rgba(67,92,204,0.07);
  --kai-typing-dot: rgba(67,92,204,0.5);
  --kai-input-bg:   #ffffff;
  --kai-input-bdr:  rgba(67,92,204,0.18);
  --kai-input-txt:  #131725;
  --kai-input-ph:   #8696c2;
  --kai-input-foc:  rgba(67,92,204,0.4);
  --kai-footer-txt: rgba(19,23,37,0.4);
  --kai-footer-bdr: rgba(67,92,204,0.12);
  --kai-scrollbar:  rgba(67,92,204,0.3);
  --kai-qr-bg:      rgba(67,92,204,0.07);
  --kai-qr-bdr:     rgba(67,92,204,0.22);
  --kai-qr-txt:     #2a3d8f;
  --kai-qr-hvr-bg:  rgba(67,92,204,0.18);
  --kai-qr-hvr-txt: #435ccc;
  --kai-send-dis:   rgba(0,0,0,0.1);
  --kai-err-bg:     rgba(220,50,50,0.08);
  --kai-err-txt:    #b02020;
  --kai-bubble-bg:  #131725;
  --kai-bubble-txt: #ffffff;
}

/* ── Kai widget design tokens. DARK ───────────────────────────── */
html.dark {
  --kai-bg:         #0c1128;
  --kai-bg-msg:     #0c1128;
  --kai-panel-bdr:  rgba(67,92,204,0.35);
  --kai-panel-shad: 0 24px 80px rgba(0,0,0,0.4), 0 4px 16px rgba(67,92,204,0.12);
  --kai-bot-bg:     rgba(255,255,255,0.07);
  --kai-bot-txt:    rgba(255,255,255,0.9);
  --kai-bot-strong: #ffffff;
  --kai-bot-link:   #8fa3e8;
  --kai-typing-bg:  rgba(255,255,255,0.07);
  --kai-typing-dot: rgba(255,255,255,0.45);
  --kai-input-bg:   rgba(255,255,255,0.06);
  --kai-input-bdr:  rgba(255,255,255,0.1);
  --kai-input-txt:  #ffffff;
  --kai-input-ph:   rgba(255,255,255,0.28);
  --kai-input-foc:  rgba(67,92,204,0.5);
  --kai-footer-txt: rgba(255,255,255,0.18);
  --kai-footer-bdr: rgba(67,92,204,0.12);
  --kai-scrollbar:  rgba(67,92,204,0.35);
  --kai-qr-bg:      rgba(67,92,204,0.14);
  --kai-qr-bdr:     rgba(67,92,204,0.3);
  --kai-qr-txt:     #8fa3e8;
  --kai-qr-hvr-bg:  rgba(67,92,204,0.3);
  --kai-qr-hvr-txt: #c0d4ff;
  --kai-send-dis:   rgba(255,255,255,0.1);
  --kai-err-bg:     rgba(220,50,50,0.14);
  --kai-err-txt:    rgba(255,130,130,0.9);
  --kai-bubble-bg:  #ffffff;
  --kai-bubble-txt: #0c1128;
}

/* ── Careers page: Kai on the LEFT to avoid conflict with the right-side job panel ── */
body.page-careers.kai-shift-left #kaiBtn    { right: auto; left: 1.75rem; }
body.page-careers.kai-shift-left #kaiBubble { right: auto; left: 1.75rem; border-radius: 14px 14px 14px 4px; }
body.page-careers.kai-shift-left #kaiPanel  { right: auto; left: 1.75rem; }

/* ── Kai FAB button ─────────────────────────────────────────────── */
#kaiBtn {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 550;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(67,92,204,.5), 0 1px 4px rgba(0,0,0,.3);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .2s;
}
#kaiBtn:hover {
  background: var(--primary-h);
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(67,92,204,.65), 0 2px 8px rgba(0,0,0,.3);
}
#kaiBtn:active  { transform: scale(.96); }
#kaiBtn:focus-visible { outline: 2px solid var(--primary-h); outline-offset: 3px; }
#kaiBtn .kai-icon-chat  { display: flex; }
#kaiBtn .kai-icon-close { display: none; }
#kaiBtn.open .kai-icon-chat  { display: none; }
#kaiBtn.open .kai-icon-close { display: flex; }

/* ── Kai nudge bubble ───────────────────────────────────────────── */
#kaiBubble {
  position: fixed; bottom: 5.1rem; right: 1.75rem; z-index: 551;
  background: var(--kai-bubble-bg); color: var(--kai-bubble-txt);
  padding: .45rem .85rem;
  border-radius: 14px 14px 4px 14px;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(4px) scale(.95);
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
#kaiBubble.visible { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
#kaiBubble.hidden  { opacity: 0 !important; transform: translateY(4px) scale(.95) !important; pointer-events: none !important; }

/* ── Kai panel ──────────────────────────────────────────────────── */
#kaiPanel {
  position: fixed; bottom: 5.5rem; right: 1.75rem; z-index: 549;
  width: 380px; max-width: calc(100vw - 2rem);
  background: var(--kai-bg);
  border: 1px solid var(--kai-panel-bdr);
  border-radius: 18px;
  box-shadow: var(--kai-panel-shad);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s;
}
#kaiPanel.open { transform: none; opacity: 1; pointer-events: auto; }

/* ── KWI-053: mobile docked sheet (<768px) ─────────────────────── */
@media (max-width: 767px) {
  body.page-careers.kai-shift-left #kaiBtn,
  body.page-careers.kai-shift-left #kaiBubble,
  body.page-careers.kai-shift-left #kaiPanel {
    left: auto;
    right: 1.25rem;
  }
  #kaiPanel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: min(85dvh, 640px);
    max-height: min(85dvh, 640px);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  #kaiPanel.open {
    transform: none;
    opacity: 1;
  }
  #kaiBtn,
  #kaiBubble {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    right: 1.25rem;
  }
  #kaiBubble {
    bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px));
  }
  .kai-messages {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ── Header ─────────────────────────────────────────────────────── */
.kai-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary-dim) 0%, var(--primary) 100%);
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
}
.kai-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px;
  flex-shrink: 0; color: #fff;
}
.kai-header-info { flex: 1; }
.kai-header-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #fff; }
.kai-header-status {
  font-size: 11px; color: rgba(255,255,255,.75);
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.kai-header-status::before {
  content: ''; width: 6px; height: 6px;
  background: #00d97e; border-radius: 50%; flex-shrink: 0;
}
.kai-reset {
  width: 34px; height: 34px;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.kai-reset.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
}
.kai-reset:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.28);
}
.kai-reset:active { transform: scale(.96); }
.kai-reset:focus-visible {
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 2px;
}
.kai-reset svg {
  width: 16px; height: 16px;
  stroke: currentColor;
}

/* ── Messages ───────────────────────────────────────────────────── */
.kai-messages {
  padding: 16px 14px; flex: 1;
  min-height: 300px; max-height: 360px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  scroll-behavior: smooth;
  background: var(--kai-bg-msg);
}
.kai-messages::-webkit-scrollbar { width: 3px; }
.kai-messages::-webkit-scrollbar-thumb { background: var(--kai-scrollbar); border-radius: 2px; }

.kai-msg {
  max-width: 90%; padding: 10px 14px;
  border-radius: 15px; font-size: 13.5px; line-height: 1.5;
  word-wrap: break-word;
  animation: kaiMsgIn .2s ease;
}
@keyframes kaiMsgIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.kai-msg-bot {
  background: var(--kai-bot-bg);
  color: var(--kai-bot-txt);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.kai-msg-bot ul { margin: 3px 0; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.kai-msg-bot li { line-height: 1.45; }
.kai-msg-bot strong { font-weight: 600; color: var(--kai-bot-strong); display: block; margin-top: 6px; margin-bottom: 1px; }
.kai-msg-bot a { color: var(--kai-bot-link); text-decoration: underline; word-break: normal; overflow-wrap: break-word; }
.kai-msg-user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.kai-msg-error {
  background: var(--kai-err-bg);
  color: var(--kai-err-txt);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  font-size: 13px;
}

/* ── Typing indicator ───────────────────────────────────────────── */
.kai-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 14px;
  background: var(--kai-typing-bg);
  border-radius: 15px; border-bottom-left-radius: 4px;
  align-self: flex-start; width: 54px;
}
.kai-dot {
  width: 5px; height: 5px;
  background: var(--kai-typing-dot); border-radius: 50%;
  animation: kaiDot 1.2s infinite;
}
.kai-dot:nth-child(2) { animation-delay: .2s; }
.kai-dot:nth-child(3) { animation-delay: .4s; }
@keyframes kaiDot {
  0%,60%,100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Quick-reply chips ──────────────────────────────────────────── */
.kai-qr-wrap {
  padding: 0 12px 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--kai-bg);
}
.kai-qr {
  padding: 5px 12px;
  background: var(--kai-qr-bg);
  border: 1px solid var(--kai-qr-bdr);
  border-radius: 20px;
  font-size: 12px; color: var(--kai-qr-txt);
  cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, color .15s;
}
.kai-qr:hover { background: var(--kai-qr-hvr-bg); color: var(--kai-qr-hvr-txt); }

/* ── Input area ─────────────────────────────────────────────────── */
.kai-input-area {
  padding: 10px 12px;
  border-top: 1px solid var(--kai-footer-bdr);
  display: flex; gap: 7px; align-items: flex-end; flex-shrink: 0;
  background: var(--kai-bg);
}
.kai-input {
  flex: 1;
  padding: 9px 13px;
  background: var(--kai-input-bg);
  border: 1px solid var(--kai-input-bdr);
  border-radius: 9px;
  color: var(--kai-input-txt); font-size: 13.5px;
  font-family: 'DM Sans', sans-serif;
  outline: none; resize: none;
  min-height: 38px; max-height: 100px; line-height: 1.45;
  transition: border-color .2s;
}
.kai-input:focus { border-color: var(--kai-input-foc); }
.kai-input::placeholder { color: var(--kai-input-ph); }
.kai-input:disabled { opacity: .5; cursor: not-allowed; }
.kai-send {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--primary); border: none; border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.kai-send:hover  { background: var(--primary-h); }
.kai-send:active { transform: scale(.93); }
.kai-send:disabled { background: var(--kai-send-dis); cursor: not-allowed; }
.kai-send svg { width: 15px; height: 15px; fill: #fff; }
.kai-counter { font-size: 10px; font-family: 'DM Sans', sans-serif; color: var(--kai-input-ph); }

/* ── Footer ─────────────────────────────────────────────────────── */
.kai-footer {
  text-align: center; padding: 7px;
  font-size: 10px; color: var(--kai-footer-txt);
  border-top: 1px solid var(--kai-footer-bdr); flex-shrink: 0;
  letter-spacing: .3px;
  background: var(--kai-bg);
}

/* ── Turnstile: FAB verifying / verified / failed states (production) */
#kaiBtn .kai-icon-shield,
#kaiBtn .kai-icon-shield-fail { display: none; }

#kaiBtn.kai-verifying { pointer-events: none; }
#kaiBtn.kai-verifying .kai-icon-chat,
#kaiBtn.kai-verifying .kai-icon-close,
#kaiBtn.kai-verifying .kai-icon-shield-fail { display: none; }
#kaiBtn.kai-verifying .kai-icon-shield {
  display: flex;
  animation: kaiShieldPulse 1.4s ease-in-out infinite;
}

#kaiBtn.kai-verified-flash { background: #00b368; }
#kaiBtn.kai-verified-flash .kai-icon-chat,
#kaiBtn.kai-verified-flash .kai-icon-close,
#kaiBtn.kai-verified-flash .kai-icon-shield-fail { display: none; }
#kaiBtn.kai-verified-flash .kai-icon-shield {
  display: flex;
  animation: kaiShieldPop .4s cubic-bezier(.16,1,.3,1);
}

#kaiBtn.kai-failed-flash { background: #d63031; pointer-events: none; }
#kaiBtn.kai-failed-flash .kai-icon-chat,
#kaiBtn.kai-failed-flash .kai-icon-close,
#kaiBtn.kai-failed-flash .kai-icon-shield { display: none; }
#kaiBtn.kai-failed-flash .kai-icon-shield-fail {
  display: flex;
  animation: kaiShieldFail .55s ease-out;
}

@keyframes kaiShieldPulse {
  0%, 100% { opacity: .5;  transform: scale(.9);   filter: brightness(1); }
  50%       { opacity: 1;   transform: scale(1.05); filter: brightness(1.5); }
}
@keyframes kaiShieldPop {
  from { opacity: 0; transform: scale(.45); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kaiShieldFail {
  0%   { transform: scale(1)    translateX(0); }
  15%  { transform: scale(1.1)  translateX(-5px); }
  30%  { transform: scale(1.1)  translateX(5px); }
  50%  { transform: scale(1.05) translateX(-3px); }
  70%  { transform: scale(1.05) translateX(3px); }
  100% { transform: scale(1)    translateX(0); }
}

/* ── Turnstile: FAB nudge bubble error variant ──────────────────── */
#kaiBubble.kai-bubble-error { background: var(--kai-err-txt); color: #fff; }

/* ── Turnstile: visible strip above the composer (staging/preprod) ─ */
.kai-turnstile {
  padding: 8px 12px 4px;
  background: var(--kai-bg);
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.kai-turnstile-widget { display: flex; justify-content: center; min-height: 65px; }
.kai-turnstile-widget:empty { min-height: 0; }
.kai-turnstile-widget iframe { max-width: 100%; }
.kai-turnstile-msg {
  margin: 0;
  font-size: 11.5px; line-height: 1.4;
  color: var(--kai-err-txt);
  display: none;
}
.kai-turnstile-msg.show { display: block; }
/* Invisible (production) mount: present in the DOM but out of layout. */
.kai-turnstile--invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}