/*
  The Intake chat widget (partials/chat-widget.html, assets/js/chat-widget.js; build flag CHAT_ENABLED).
  LAYOUT ONLY (release.json "brandStrict": no typography, no colour literals). Type and colour come from the brand
  components it is assembled from — .chat, .chat-thread, .bubble, .chat-input (chat.css); .btn, .icon-btn (chrome.css);
  .status (portal.css); .pill (library.css); .intake-status, .intake-fallback, .consent (intake.css); the t-* ramp
  (base.css) — and the --aw-* tokens. The panel box repeats the .surface card (border-line, radius-md, bg-card,
  shadow-panel), which lives in two page families with different heads.
  Bottom right. chat-widget.js lifts the launcher above other floating controls there (the Guild Cart button, the
  preview's viewer switch) through --chat-widget-lift. Below 640px the panel takes the whole screen.
*/
.chat-widget { --chat-widget-edge: 24px; --chat-widget-lift: 0px; }
.chat-widget [hidden] { display: none !important; }

/* Launcher */
.chat-widget__launcher {
  position: fixed;
  right: var(--chat-widget-edge);
  bottom: calc(var(--chat-widget-edge) + var(--chat-widget-lift));
  z-index: 40;
  box-shadow: var(--aw-shadow-panel);
}
.chat-widget__launcher .icon { width: 18px; height: 18px; }
.chat-widget__launcher:hover .icon { transform: none; }      /* .btn nudges its arrow icon; a chat icon stays put */

/* Panel: a .surface card, a column of head · scrolling body · foot */
.chat-widget__panel {
  position: fixed;
  right: var(--chat-widget-edge);
  bottom: var(--chat-widget-edge);
  z-index: 65;                                              /* over other floating controls (60), under the cart drawer (70) */
  width: min(420px, calc(100vw - 2 * var(--chat-widget-edge)));
  height: min(680px, calc(100vh - 2 * var(--chat-widget-edge)));
  height: min(680px, calc(100dvh - 2 * var(--chat-widget-edge)));
  overflow: hidden;
  border: 1px solid var(--aw-border-line);
  border-radius: var(--aw-radius-md);
  background: var(--aw-bg-card);
  box-shadow: var(--aw-shadow-panel);
}
.chat-widget__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-3);
  padding: var(--aw-space-4) var(--aw-space-5);
  border-bottom: 1px solid var(--aw-border-line);
}
.chat-widget__who { display: grid; gap: var(--aw-space-1); min-width: 0; }
.chat-widget__close { flex: none; border-color: var(--aw-border-line); color: var(--aw-text-primary); }

.chat-widget__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-widget__body:focus-visible { outline-offset: -3px; }
.chat-widget__note, .chat-widget__disclosure { margin: 0; padding: var(--aw-space-3) var(--aw-space-5); color: var(--aw-text-secondary); }
.chat-widget__note { border-bottom: 1px solid var(--aw-border-line); background: var(--aw-bg-soft); }
.chat-widget__disclosure { padding-bottom: 0; }
.chat-widget__note a, .chat-widget .bubble a { text-decoration: underline; text-underline-offset: 3px; }

/* Thread */
.chat-widget .chat-thread { padding: var(--aw-space-4) var(--aw-space-5); }
.chat-widget .bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-widget__typing { display: inline-flex; vertical-align: middle; }
.chat-widget__typing .icon { width: 16px; height: 16px; animation: intake-spin 0.9s linear infinite; }

/* States: Turnstile, status line, retry / new conversation, email fallback (intake.css components) */
.chat-widget__body > .intake-turnstile:not(:empty),
.chat-widget__body > .intake-status[data-state],
.chat-widget__body > .intake-fallback,
.chat-widget__recover,
.chat-widget__escalate { margin: 0 var(--aw-space-5) var(--aw-space-4); }
.chat-widget .intake-status[data-state="notice"] { border-color: var(--aw-state-warning); }
.chat-widget .intake-status[data-state="notice"] .icon { color: var(--aw-state-warning); }
.chat-widget__recover, .chat-widget__fallback-actions, .chat-widget__escalate-actions { display: flex; flex-wrap: wrap; gap: var(--aw-space-2); }
.chat-widget__fallback-actions .btn, .chat-widget__escalate-actions .btn { flex: 1 1 auto; justify-content: center; white-space: normal; }

/* Talk to a person */
.chat-widget__escalate {
  display: grid;
  gap: var(--aw-space-3);
  padding: var(--aw-space-4);
  border: 1px solid var(--aw-border-gold);
  border-radius: var(--aw-radius-md);
}
.chat-widget__escalate p { margin: 0; color: var(--aw-text-secondary); }
.chat-widget__field { display: grid; gap: var(--aw-space-1); }
.chat-widget__field .chat-input { margin: 0; }
.chat-widget .chat-widget__error { color: var(--aw-state-danger); }
.chat-widget .chat-input input[aria-invalid="true"] { border-color: var(--aw-state-danger); }
.chat-widget .chat-input input:focus-visible { box-shadow: 0 0 0 2px var(--aw-accent-gold-light); }
.chat-widget .consent { margin: 0; }

/* Foot: suggestions, the message bar, counter and "Talk to a person" */
.chat-widget__foot { flex: none; padding-top: var(--aw-space-3); border-top: 1px solid var(--aw-border-line); }
.chat-widget__suggestions { display: flex; flex-wrap: wrap; gap: var(--aw-space-2); margin: 0 var(--aw-space-5) var(--aw-space-3); padding: 0; }
.chat-widget__suggestions:empty { display: none; }
.chat-widget .chat-widget__foot .chat-input { margin: 0 var(--aw-space-5) var(--aw-space-2); }
.chat-widget .chat-input :disabled, .chat-widget .chat-input [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.chat-widget__actions { display: flex; align-items: center; gap: var(--aw-space-3); margin: 0 var(--aw-space-5) var(--aw-space-4); }
.chat-widget__count { margin: 0; color: var(--aw-text-secondary); }
.chat-widget__human { margin-left: auto; padding: var(--aw-space-3) var(--aw-space-5); }

@media (max-width: 639px) {
  .chat-widget { --chat-widget-edge: 16px; }
  .chat-widget__launcher { padding: var(--aw-space-4); }
  .chat-widget__launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chat-widget__panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border: 0; border-radius: 0; }
  .chat-widget__head, .chat-widget__note, .chat-widget__disclosure { padding-inline: var(--aw-space-4); }
  .chat-widget .chat-thread { padding-inline: var(--aw-space-4); }
  .chat-widget__body > .intake-turnstile,
  .chat-widget__body > .intake-status[data-state],
  .chat-widget__body > .intake-fallback,
  .chat-widget__recover,
  .chat-widget__escalate { margin-inline: var(--aw-space-4); }
  .chat-widget__suggestions, .chat-widget .chat-widget__foot .chat-input, .chat-widget__actions { margin-inline: var(--aw-space-4); }
  :root.chat-widget-open, :root.chat-widget-open body { overflow: hidden; }
}