/* ============================================================
   Support widget — an append-only chat thread.
   Rules:
   - Colors, radii and shadows come from the site.css token layer.
     The --sw-* aliases below are the only widget-local values.
   - The customer speaks on the right in --sw-brand, the service
     answers on the left in --sw-soft.
   - The thread is bottom anchored: the newest turn sits against
     the composer, never floating in a half-empty panel.
   - A quick reply group stays in the transcript after it is used.
     The taken option keeps brand fill, the untaken ones fade to
     muted so the history reads without competing for attention.
   ============================================================ */
.support-widget {
  --sw-brand: var(--brand, #2e5ce6);
  --sw-brand-dark: var(--brand-dark, #2348b8);
  --sw-accent-text: var(--brand, #2450c4);
  --sw-ink: var(--text-strong, #16181d);
  --sw-ink-2: var(--text-default, #3c414b);
  --sw-muted: var(--text-muted, #626977);
  --sw-line: var(--border-default, #dfe4ec);
  /* an empty textarea is identified by its border alone, so it needs 3:1 */
  --sw-line-strong: var(--border-strong, #888fa0);
  --sw-hair: var(--border-subtle, #e9edf2);
  --sw-soft: var(--surface-muted, #eef1f5);
  --sw-tint: var(--brand-tint, #e9effc);
  --sw-amber: var(--warning, #a16207);
  --sw-surface: var(--surface-default, #fff);
  --sw-chip-line: var(--focus-ring, #b9ccff);
  --sw-warn-bg: var(--warning-bg, #fbf5e3);
  --sw-danger-ink: var(--danger, #cc3d2e);
  --sw-danger-bg: var(--danger-bg, #fef4f3);
  --sw-r: var(--r, 12px);
  --sw-r-sm: var(--r-sm, 8px);
  --sw-bubble: 16px;
  --sw-tail: 4px;
  --sw-ease: cubic-bezier(.22, .61, .36, 1);
  --sw-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 44px rgba(15, 23, 42, .16);
  --sw-page-width: 1120px;

  position: fixed;
  right: max(20px, calc((100vw - var(--sw-page-width)) / 2), env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 80;
}

.landing-page .support-widget {
  --sw-page-width: 840px;
}

.hub-page .support-widget {
  --sw-page-width: 640px;
}

.support-widget .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- launcher ---------- */
.support-widget__launcher {
  display: grid;
  width: 196px;
  min-height: 58px;
  padding: 8px 14px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--sw-brand);
  border-radius: 18px;
  background: var(--sw-brand);
  color: var(--sw-surface);
  box-shadow: var(--sw-shadow);
  cursor: pointer;
}

.support-widget__launcher:hover {
  background: var(--sw-brand-dark);
  border-color: var(--sw-brand-dark);
}

.support-widget__launcher-glyph {
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  font: 700 22px/1 system-ui, sans-serif;
}

.support-widget__launcher-glyph--help svg {
  width: 27px;
  height: 27px;
}

.support-widget__launcher-copy {
  display: grid;
  min-width: 0;
  grid-column: 2;
  gap: 2px;
  text-align: left;
}

.support-widget__launcher-copy strong {
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}

.support-widget__launcher-copy small {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  opacity: .88;
  white-space: nowrap;
}

.support-widget__launcher-glyph--close {
  grid-column: 1;
  font: 400 26px/1 system-ui, sans-serif;
}

.support-widget__launcher[aria-expanded="false"] .support-widget__launcher-glyph--close,
.support-widget__launcher[aria-expanded="true"] .support-widget__launcher-glyph--help {
  opacity: 0;
  transform: rotate(-90deg) scale(.55);
}

.support-widget__launcher[aria-expanded="true"] {
  width: 52px;
  min-height: 52px;
  padding: 0;
  grid-template-columns: 1fr;
  border-radius: 50%;
}

.support-widget__launcher[aria-expanded="true"] .support-widget__launcher-copy {
  display: none;
}

.support-widget__launcher:focus-visible,
.support-widget__panel button:focus-visible,
.support-widget__greeting button:focus-visible {
  outline: 3px solid var(--sw-brand);
  outline-offset: 3px;
}

/* ---------- panel shell ---------- */
.support-widget__panel,
.support-widget__greeting {
  position: absolute;
  right: 0;
  bottom: 70px;
  border: 1px solid var(--sw-line);
  background: var(--sw-surface);
  box-shadow: var(--sw-shadow);
}

.support-widget__panel {
  display: flex;
  width: min(392px, calc(100vw - 32px));
  height: clamp(360px, calc(100dvh - 110px), 600px);
  flex-direction: column;
  border-radius: var(--sw-r);
  overflow: hidden;
  transform-origin: bottom right;
}

.support-widget__panel:focus {
  outline: none;
}

/* The header never scrolls: close and restart stay reachable at any thread length. */
.support-widget__header {
  display: flex;
  flex: 0 0 auto;
  min-height: 60px;
  padding: 10px 10px 10px 18px;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--sw-hair);
  background: var(--sw-surface);
}

.support-widget__header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.support-widget__header h2 {
  margin: 0;
  color: var(--sw-ink);
  font-size: 16px;
}

.support-widget__icon-button {
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sw-ink-2);
  cursor: pointer;
  font: 400 22px/1 system-ui, sans-serif;
}

.support-widget__icon-button:hover {
  background: var(--sw-soft);
}

/* ---------- thread ---------- */
.support-widget__scroll {
  display: flex;
  flex: 1 1 auto;
  padding: 16px 14px;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Bottom anchored, so a short thread rests on the composer instead of
   leaving the newest turn stranded at the top of an empty panel. */
.support-widget__thread {
  display: grid;
  margin-top: auto;
  gap: 10px;
}

.support-widget__turn {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.support-widget__turn--agent {
  justify-content: flex-start;
}

.support-widget__turn--user {
  justify-content: flex-end;
}

.support-widget__bubble {
  max-width: 78%;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.support-widget__bubble--agent {
  border-radius: var(--sw-tail) var(--sw-bubble) var(--sw-bubble) var(--sw-bubble);
  background: var(--sw-soft);
  color: var(--sw-ink);
}

.support-widget__bubble--user {
  border-radius: var(--sw-bubble) var(--sw-bubble) var(--sw-tail) var(--sw-bubble);
  background: var(--sw-brand);
  color: var(--sw-surface);
  font-weight: 600;
}

.support-widget__bubble--agent[data-state="accepted"] {
  background: var(--sw-tint);
}

.support-widget__bubble--agent[data-state="pending"] {
  background: var(--sw-warn-bg);
  color: var(--sw-amber);
}

.support-widget__bubble--agent[data-state="error"] {
  background: var(--sw-danger-bg);
  color: var(--sw-danger-ink);
}

.support-widget__answer-summary {
  margin: 0;
}

.support-widget__answer-detail {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--sw-line);
  white-space: normal;
}

.support-widget__answer-detail summary {
  color: var(--sw-accent-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.support-widget__answer-detail p {
  margin: 8px 0 0;
  white-space: pre-line;
}

.support-widget__answer-links {
  display: grid;
  margin-top: 8px;
  gap: 5px;
}

.support-widget__answer-links a {
  color: var(--sw-accent-text);
  font-size: 13px;
  font-weight: 700;
}

.support-widget__typing {
  display: flex;
  min-height: 42px;
  align-items: center;
}

.support-widget__dots {
  display: inline-flex;
  gap: 4px;
}

.support-widget__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sw-muted);
  opacity: .35;
}

/* ---------- quick replies ---------- */
.support-widget__replies {
  display: flex;
  margin: 2px 0 2px;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}

.support-widget__replies button {
  min-height: 44px;
  max-width: 88%;
  padding: 10px 16px;
  border: 1.5px solid var(--sw-chip-line);
  border-radius: var(--sw-bubble) var(--sw-bubble) var(--sw-tail) var(--sw-bubble);
  background: var(--sw-surface);
  color: var(--sw-accent-text);
  cursor: pointer;
  /* Longhand on purpose: the `font` shorthand cannot take `inherit` as the family,
     which silently voids the whole declaration and leaks the 16px body size. */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
}

.support-widget__replies button:hover {
  border-color: var(--sw-brand);
  background: var(--sw-tint);
}

.support-widget__replies button[data-tone="primary"] {
  border-color: var(--sw-brand);
  background: var(--sw-brand);
  color: var(--sw-surface);
}

.support-widget__replies button[data-tone="primary"]:hover {
  border-color: var(--sw-brand-dark);
  background: var(--sw-brand-dark);
}

/* Filing a ticket is the last resort, so it never outranks the answers
   that can resolve the question on the spot. */
.support-widget__replies button[data-tone="quiet"] {
  border-color: transparent;
  background: transparent;
  color: var(--sw-muted);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-widget__replies button[data-tone="quiet"]:hover {
  background: transparent;
  color: var(--sw-accent-text);
}

/* ---------- used quick replies stay as history ---------- */
.support-widget__replies.is-spent {
  gap: 3px;
}

.support-widget__replies.is-spent button {
  cursor: default;
  pointer-events: none;
}

/* The taken chip is the customer's turn, so it gets bubble spacing back while the
   untaken options stay a compact, quiet list above it. */
.support-widget__replies.is-spent button.is-chosen {
  margin-top: 5px;
}

.support-widget__replies.is-spent button.is-chosen {
  border-color: var(--sw-brand);
  background: var(--sw-brand);
  color: var(--sw-surface);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(46, 92, 230, .26);
}

.support-widget__replies.is-spent button.is-skipped {
  min-height: 0;
  padding: 4px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--sw-muted);
  font-size: 13px;
  font-weight: 400;
  opacity: .6;
  text-decoration: none;
}

/* ---------- ticket receipt ---------- */
.support-widget__ticket {
  display: flex;
  max-width: 100%;
  padding: 4px 5px 4px 12px;
  align-items: center;
  gap: 9px;
  border: 1.5px dashed var(--sw-chip-line);
  border-radius: var(--sw-r-sm);
  background: var(--sw-surface);
  font-size: 13px;
}

.support-widget__ticket-label {
  color: var(--sw-muted);
}

.support-widget__ticket code {
  color: var(--sw-ink);
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}

.support-widget__ticket-copy {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-r-sm);
  background: var(--sw-surface);
  color: var(--sw-accent-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.support-widget__ticket-copy:hover {
  border-color: var(--sw-brand);
  background: var(--sw-tint);
}

/* ---------- docked composer ---------- */
.support-widget__dock {
  flex: 0 0 auto;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sw-hair);
  background: var(--sw-surface);
}

.support-widget__composer {
  position: relative;
  display: block;
}

.support-widget__composer textarea {
  width: 100%;
  min-height: 58px;
  max-height: 132px;
  padding: 16px 62px 16px 18px;
  border: 1.5px solid var(--sw-line-strong);
  border-radius: 29px;
  background: var(--sw-surface);
  color: var(--sw-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
}

.support-widget__composer textarea:focus-visible {
  outline: 3px solid var(--sw-brand);
  outline-offset: 1px;
  border-color: var(--sw-brand);
}

.support-widget__send {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--sw-brand);
  color: var(--sw-surface);
  cursor: pointer;
  font: 700 21px/1 system-ui, sans-serif;
}

.support-widget__send:hover {
  background: var(--sw-brand-dark);
}

.support-widget__send[data-busy="true"] {
  cursor: progress;
}

.support-widget__send-glyph,
.support-widget__spinner {
  grid-area: 1 / 1;
}

.support-widget__send-glyph {
  transform: translateY(-1px);
}

.support-widget__spinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  border-top-color: var(--sw-surface);
}

.support-widget__send:not([data-busy="true"]) .support-widget__spinner,
.support-widget__send[data-busy="true"] .support-widget__send-glyph {
  display: none;
}

.support-widget__dock-meta {
  display: flex;
  margin-top: 6px;
  padding: 0 6px;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
}

.support-widget__hint,
.support-widget__counter {
  margin: 0;
  color: var(--sw-muted);
  font-size: 12px;
  font-weight: 400;
}

.support-widget__counter {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.support-widget__counter[data-state="near"] {
  color: var(--sw-amber);
  font-weight: 700;
}

.support-widget__counter[data-state="limit"] {
  color: var(--sw-danger-ink);
  font-weight: 700;
}

.support-widget__refund {
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-sm);
  background: var(--sw-surface);
  color: var(--sw-ink-2);
  font-size: 13px;
}

.support-widget__review {
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-sm);
  background: var(--sw-tint);
  color: var(--sw-ink-2);
  font-size: 13px;
}

.support-widget__review strong {
  display: block;
  color: var(--sw-ink);
}

.support-widget__review p {
  margin: 3px 0 0;
}

.support-widget__refund fieldset {
  display: grid;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
}

.support-widget__refund legend {
  margin-bottom: 2px;
  color: var(--sw-ink);
  font-weight: 700;
}

/* A bare radio or checkbox is a ~13px target, so the whole label is the target. */
.support-widget__refund label {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.support-widget__refund input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--sw-brand);
}

.support-widget__form-status {
  margin: 0 0 8px;
  padding: 9px 12px;
  border-radius: var(--sw-r-sm);
  background: var(--sw-danger-bg);
  color: var(--sw-danger-ink);
  font-size: 13px;
  line-height: 1.45;
}

.support-widget__form-status:empty {
  display: none;
}

/* ---------- greeting ---------- */
.support-widget__greeting {
  display: flex;
  width: min(330px, calc(100vw - 84px));
  padding: 13px 12px 13px 15px;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--sw-r);
}

.support-widget__greeting p {
  margin: 0;
  color: var(--sw-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.support-widget__greeting strong {
  color: var(--sw-ink);
}

/* The visible glyph stays small; the hit area is padded out to 44px. */
.support-widget__greeting button {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -13px -12px -13px 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sw-muted);
  cursor: pointer;
  font-size: 18px;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .support-widget__launcher {
    transition: width 200ms var(--sw-ease), background 160ms var(--sw-ease),
      border-color 160ms var(--sw-ease), border-radius 200ms var(--sw-ease),
      transform 200ms var(--sw-ease);
  }

  .support-widget__launcher:active {
    transform: scale(.94);
  }

  .support-widget__launcher-glyph {
    transition: opacity 170ms var(--sw-ease), transform 240ms var(--sw-ease);
  }

  .support-widget__panel {
    animation: sw-panel-in 240ms var(--sw-ease) both;
  }

  .support-widget__panel.is-closing {
    animation: sw-panel-out 150ms ease-in both;
  }

  .support-widget__greeting {
    animation: sw-panel-in 240ms var(--sw-ease) both;
  }

  /* Every appended turn slides in from the side it belongs to. */
  .support-widget__turn--agent.is-entering,
  .support-widget__replies.is-entering {
    animation: sw-turn-in-left 260ms var(--sw-ease) both;
  }

  .support-widget__turn--user.is-entering {
    animation: sw-turn-in-right 260ms var(--sw-ease) both;
  }

  .support-widget__replies.is-entering {
    animation-name: sw-turn-in-right;
  }

  .support-widget__replies button,
  .support-widget__ticket-copy,
  .support-widget__send,
  .support-widget__icon-button {
    transition: background 150ms var(--sw-ease), border-color 150ms var(--sw-ease),
      color 150ms var(--sw-ease), opacity 200ms var(--sw-ease), padding 200ms var(--sw-ease),
      font-size 200ms var(--sw-ease), box-shadow 200ms var(--sw-ease);
  }

  .support-widget__dots i {
    animation: sw-dot 1.15s ease-in-out infinite;
  }

  .support-widget__dots i:nth-child(2) {
    animation-delay: .16s;
  }

  .support-widget__dots i:nth-child(3) {
    animation-delay: .32s;
  }

  .support-widget__spinner {
    animation: sw-spin 700ms linear infinite;
  }

  @keyframes sw-panel-in {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sw-panel-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(8px) scale(.97); }
  }

  @keyframes sw-turn-in-left {
    from { opacity: 0; transform: translate3d(-10px, 6px, 0) scale(.97); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sw-turn-in-right {
    from { opacity: 0; transform: translate3d(10px, 6px, 0) scale(.97); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sw-dot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
  }

  @keyframes sw-spin {
    to { transform: rotate(360deg); }
  }
}

/* ---------- mobile ---------- */
@media (max-width: 520px) {
  .support-widget {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .support-widget__launcher {
    width: 184px;
    min-height: 56px;
  }

  .support-widget__panel {
    position: fixed;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    height: min(80dvh, 640px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
  }

  .support-widget__bubble {
    max-width: 82%;
  }

  .support-widget__greeting {
    width: min(300px, calc(100vw - 76px));
    bottom: 60px;
  }
}