/* Help chat widget (chat.js). Site tokens from docs/DESIGN.md: near-black surfaces
   stepped by colour, Georgia for the title, white pill for the one action, cyan only
   for the focus ring. Works on the dark home page and the light guide pages. */
.hw-chat, .hw-chat * { box-sizing: border-box; }
.hw-chat { --c-bg: #0f1011; --c-card: #232426; --c-raised: #2e2e2e; --c-line: rgba(255,255,255,.12);
  --c-ink: #f5f5f7; --c-soft: #cacaca; --c-faint: #9f9fa0; --c-accent: #00b3dd;
  --c-serif: Georgia, "Times New Roman", serif;
  --c-sans: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--c-sans); font-size: 15px; line-height: 1.45; color: var(--c-ink);
  position: fixed; right: 16px; bottom: 16px; z-index: 9000; }
.hw-chat :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* the round button */
.hw-open { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-ink); font: inherit; font-size: 14px;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.hw-open:hover { background: var(--c-raised); }
.hw-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hw-chat.is-open .hw-open { display: none; }

/* the card */
.hw-card { display: none; flex-direction: column; width: 400px; max-width: calc(100vw - 32px); height: 620px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.hw-chat.is-open .hw-card { display: flex; }
.hw-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--c-line); display: flex; align-items: flex-start; gap: 12px; }
.hw-head h2 { margin: 0; font: 400 20px/1.2 var(--c-serif); }
.hw-head p { margin: 4px 0 0; font-size: 13px; color: var(--c-faint); }
.hw-close { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line);
  background: transparent; color: var(--c-soft); font: 18px/1 var(--c-sans); cursor: pointer; }
.hw-close:hover { background: var(--c-card); }
.hw-log { min-height: 0; flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.hw-msg { max-width: 92%; padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hw-msg.me { align-self: flex-end; background: var(--c-raised); border-bottom-right-radius: 4px; }
.hw-msg.bot { align-self: flex-start; background: var(--c-card); border-bottom-left-radius: 4px; }
.hw-msg.note { align-self: center; background: transparent; color: var(--c-faint); font-size: 13px; text-align: center; max-width: 100%; }
.hw-msg a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-faint); text-underline-offset: 2px; }
.hw-msg a:hover { text-decoration-color: var(--c-ink); }
.hw-handoff { align-self: flex-start; margin: -4px 0 2px; padding: 0; border: 0; background: none; color: var(--c-soft);
  font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-faint); cursor: pointer; }
.hw-handoff:hover { color: var(--c-ink); }
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 10px; }
.hw-chips button { border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-soft); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.hw-chips button:hover { background: var(--c-raised); color: var(--c-ink); }
.hw-form { display: flex; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--c-line); }
.hw-form textarea { flex: 1; resize: none; height: 44px; max-height: 96px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--c-line);
  background: var(--c-card); color: var(--c-ink); font: inherit; }
.hw-form textarea::placeholder { color: var(--c-faint); }
.hw-send, .hw-lead button[type=submit] { height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: #fff; color: #0f1011;
  font: inherit; font-size: 14px; cursor: pointer; }
.hw-send:disabled, .hw-lead button[type=submit]:disabled { opacity: .5; cursor: default; }
.hw-count { padding: 0 18px 10px; font-size: 12px; color: var(--c-faint); text-align: right; }
.hw-typing { align-self: flex-start; color: var(--c-faint); font-size: 13px; padding: 4px 14px; }

/* the lead form, shown inside the log area */
.hw-lead { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hw-lead h3 { margin: 0; font: 400 18px/1.25 var(--c-serif); }
.hw-lead p { margin: 0; font-size: 13px; color: var(--c-faint); }
.hw-lead label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--c-soft); }
.hw-lead input, .hw-lead textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-ink); font: inherit; }
.hw-lead textarea { height: 64px; resize: none; }
.hw-lead .hw-consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.hw-lead .hw-consent input { margin: 3px 0 0; flex: 0 0 auto; accent-color: #fff; }
.hw-lead .hw-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.hw-lead .hw-back { background: none; border: 0; color: var(--c-faint); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.hw-lead .hw-pdpa { font-size: 12px; color: var(--c-faint); }
.hw-err { color: #ffb4a8; font-size: 13px; }
.hw-ts { height: 0; overflow: hidden; }
.hw-foot { margin: 0; padding: 0 18px 10px; font-size: 11px; color: var(--c-faint); }
.hw-foot a { color: inherit; }

@media (max-width: 600px) {
  /* full width only when open: a closed full-width box blocked taps along the bottom of the page */
  .hw-chat { right: 12px; bottom: 12px; }
  .hw-chat.is-open { left: 12px; }
  .hw-card { width: 100%; max-width: none; height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hw-chat.is-open .hw-card { animation: hw-up .22s ease-out; }
  @keyframes hw-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
}