/* chat.css — styles for the floating front-desk chat widget (assets/chat.js).
   Self-contained bronze/parchment palette to match the site rebrand. Values are
   hardcoded (NOT derived from the host page's tokens) on purpose: pages disagree
   on token semantics — subpages set --carbon to parchment (#F6F1E7) while the
   homepage sets --carbon to the dark band (#0B0B0C) — so deriving would render
   the widget dark on some pages. Hardcoding keeps it identically bronze
   everywhere. Dormant until window.KHNUM_INTAKE_ENDPOINT is set. */

:root {
  --kf-ember: #7C5322;   /* bronze-deep — primary action */
  --kf-bronze: #9A6A2F;  /* bronze — muted labels / accents */
  --kf-carbon: #F6F1E7;  /* parchment — input ground */
  --kf-panel: #EFE7D7;   /* warm panel — the panel body */
  --kf-panel2: #E7ECEC;  /* cool panel — header + bot bubbles */
  --kf-ash: #3D3A34;     /* ink — body text */
  --kf-gold: #C79A3E;    /* gold spark accent */
  --kf-line: rgba(154, 106, 47, 0.16);
  --kf-ring: rgba(154, 106, 47, 0.4);
}

/* Floating action button (bottom-right) */
.kf-chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--kf-ember);
  border-radius: 999px;
  background: var(--kf-ember);
  color: #F6F1E7;
  font: 600 15px/1 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.28);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.kf-chat-fab:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(60, 40, 20, 0.36); }
.kf-chat-fab .kf-spark { color: var(--kf-gold); font-size: 1.05em; }

/* Overlay + panel */
.kf-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  background: rgba(35, 24, 12, 0.5);
  backdrop-filter: blur(3px);
}
.kf-chat-overlay.open { display: flex; }

.kf-chat-panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  height: min(620px, 82vh);
  background: var(--kf-panel);
  color: var(--kf-ash);
  border: 1px solid var(--kf-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(60, 40, 20, 0.3);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header */
.kf-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kf-line);
  background: var(--kf-panel2);
}
.kf-chat-head h3 { margin: 0; font-size: 1rem; color: var(--kf-ember); letter-spacing: 0.02em; }
.kf-chat-head .kf-sub { font-size: 0.78rem; color: var(--kf-bronze); margin-top: 2px; }
.kf-chat-close {
  border: 0; background: transparent; color: var(--kf-ash);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.kf-chat-close:hover { color: var(--kf-ember); background: rgba(60, 40, 20, 0.08); }

/* Body + log */
.kf-chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kf-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }

.kf-bubble {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.kf-bubble.bot { align-self: flex-start; background: var(--kf-panel2); border: 1px solid var(--kf-line); color: var(--kf-ash); }
.kf-bubble.me { align-self: flex-end; background: var(--kf-ember); color: #fff; }

/* The working indicator — the live stage of the turn while the POST is in flight
   (chat.js thinkStart). Its text is written by chat.js from the deployment's own
   persona identity, never named here. Sits in the log where the reply will appear,
   so the eye is already in the right place when it lands; removed when it arrives. */
.kf-thinking {
  align-self: flex-start;
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--kf-panel2);
  border: 1px solid var(--kf-line);
}
.kf-think-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--kf-bronze);
}
.kf-think-elapsed { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.75; }

.kf-dots { display: inline-flex; gap: 3px; }
.kf-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--kf-ember);
  animation: kf-pulse 1.2s infinite ease-in-out;
}
.kf-dots i:nth-child(2) { animation-delay: 0.16s; }
.kf-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes kf-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-2px); }
}

.kf-steps { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.kf-steps li { position: relative; padding-left: 16px; font-size: 0.82rem; line-height: 1.45; color: var(--kf-bronze); }
.kf-steps li::before { position: absolute; left: 0; top: 0; font-size: 0.78rem; }
.kf-steps li.done { opacity: 0.6; }
.kf-steps li.done::before { content: "\2713"; color: var(--kf-ember); }
.kf-steps li.now { color: var(--kf-ash); }
.kf-steps li.now::before { content: "\203A"; color: var(--kf-gold); }

@media (prefers-reduced-motion: reduce) {
  .kf-dots i { animation: none; opacity: 0.65; }
}

/* Input row */
.kf-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--kf-line); }
.kf-chat-input input {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--kf-line); background: var(--kf-carbon); color: var(--kf-ash);
  font: inherit; outline: none;
}
.kf-chat-input input:focus { border-color: var(--kf-ember); box-shadow: 0 0 0 3px var(--kf-ring); }
.kf-chat-input button {
  padding: 10px 16px; border: 0; border-radius: 10px;
  background: var(--kf-ember); color: #fff; font: 600 14px/1 inherit; cursor: pointer;
  transition: filter 0.2s;
}
.kf-chat-input button:hover { filter: brightness(1.08); }
.kf-chat-input button:disabled { opacity: 0.5; cursor: default; }

/* Status / error line + footer */
.kf-chat-msg { padding: 0 14px; font-size: 0.8rem; color: var(--kf-bronze); }
.kf-chat-msg.err { color: #b0392c; padding-bottom: 8px; }
.kf-chat-foot { padding: 10px 14px; border-top: 1px solid var(--kf-line); font-size: 0.8rem; color: var(--kf-bronze); }
.kf-chat-foot a { color: var(--kf-ember); }

@media (max-width: 480px) {
  .kf-chat-overlay { padding: 0; }
  .kf-chat-panel { width: 100%; height: 100%; border-radius: 0; }
  .kf-chat-fab { right: 14px; bottom: 14px; }
}