/* ---------- Chat ----------
   Support/FAQ assistant. Native markup, not an embed: a third-party iframe
   would impose its own light background on an --ink page.

   z-index sits at 70/71 — above nav (50) and the progress bar (60), below the
   grain (90) and the veil (100), so the panel can't appear over the loader.

   No launcher pulse. Nothing here animates unless a request is actually in
   flight; the typing dots are bound to real pending state, like .veil__mark. */
.chat-launch {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85em 1.5em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-hot), var(--gold) 55%, #a87a24);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.chat-launch:hover { transform: translateY(-2px); }
body[data-chat="open"] .chat-launch { opacity: 0; pointer-events: none; }

.chat {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 71;
  width: min(23rem, calc(100vw - 2rem));
  height: min(31rem, calc(100vh - 6rem));
  display: flex; flex-direction: column;
  /* Hairline edge, no elevation shadow — one or the other, never both. */
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}
body[data-chat="open"] .chat { opacity: 1; visibility: visible; transform: translateY(0); }

.chat__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
/* Plain sentence-case title. A tracked-uppercase label above a heading is the
   eyebrow tell, so the subtitle sits inline instead. */
.chat__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
/* .75rem (12px) is the DESIGN.md floor for functional text — not a display
   choice here. */
.chat__note { color: var(--bone-faint); font-size: 0.75rem; }
.chat__close {
  border: 0; background: none; color: var(--bone-dim);
  font-family: var(--font-mono); font-size: 1.1rem; line-height: 1;
  padding: 0.2rem 0.4rem; cursor: pointer;
  transition: color 0.3s;
}
.chat__close:hover { color: var(--gold-hot); }

.chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  scrollbar-width: thin;
}
.chat__msg {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__msg--bot {
  align-self: flex-start;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  color: var(--bone);
}
/* Never a --bone surface here: a cream bubble on a dark page is the single
   most-flagged AI tell. Ink surface, gold edge. */
.chat__msg--user {
  align-self: flex-end;
  background: var(--ink-3);
  border-left: 2px solid var(--gold);
  color: var(--bone);
}
.chat__msg--err { color: var(--red); border-color: var(--red); }

/* `infinite` here is fine, same precedent as .veil__mark above: the element
   only exists in the DOM while a request is genuinely pending (chat.js
   creates/removes it), so "infinite" bounds the CSS keyframe, not what the
   visitor sees — this is not a decorative always-on pulse. */
.chat__dots { display: inline-flex; gap: 0.28rem; align-items: center; }
.chat__dots b {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bone-faint);
  animation: chatDot 1.1s ease-in-out infinite;
}
.chat__dots b:nth-child(2) { animation-delay: 0.15s; }
.chat__dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot { 50% { opacity: 0.25; transform: translateY(-2px); } }

.chat__form {
  display: flex; gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--hairline);
}
.chat__input {
  flex: 1;
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.6em 1em;
  color: var(--bone);
  font-family: var(--font-text);
  font-size: 0.875rem;
  transition: border-color 0.3s;
}
.chat__input::placeholder { color: var(--bone-faint); }
.chat__input:focus { border-color: var(--gold); outline: none; }
.chat__send {
  border: 0;
  border-radius: 999px;
  padding: 0.6em 1.1em;
  background: linear-gradient(135deg, var(--gold-hot), var(--gold) 55%, #a87a24);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600; font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.chat__send:hover { transform: translateY(-1px); }
.chat__send[disabled] { opacity: 0.45; cursor: default; transform: none; }

.chat__foot {
  padding: 0 0.75rem 0.7rem;
  color: var(--bone-faint);
  font-size: 0.75rem;
}
.chat__foot a { color: var(--bone-dim); }
.chat__foot a:hover { color: var(--gold-hot); }

@media (max-width: 560px) {
  .chat { width: calc(100vw - 1.5rem); height: calc(100vh - 5rem); right: 0.75rem; bottom: 0.75rem; }
}

/* Self-contained reduced-motion handling -- this file is also loaded on
   interior pages, whose own reduced-motion block doesn't know about .chat*. */
@media (prefers-reduced-motion: reduce) {
  .chat, .chat-launch, .chat__dots b {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .chat { transform: none; }
  .chat-launch:hover, .chat__send:hover { transform: none; }
}