/* Hallmark · component: Live WhatsApp demo widget (floating trigger + launcher card)
 * Source: 02_live_whatsapp_demo_widget_spec.md §4 — layout, position and open/close transition kept;
 * restyled to Night + Mint. The root carries data-theme="dark", so the night tokens apply even on
 * light pages; it never sets data-vertical/data-tint, so the mint stays mint on industry pages.
 * Enqueued only where the widget renders (inc/demo-widget.php). */

.demo-widget {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 99999;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: none;
}

/* The mobile nav sheet covers most of the viewport; don't float over it. */
body:has(.nav-sheet[open]) .demo-widget { display: none; }

/* ── Trigger ───────────────────────────────────────────── */
.demo-widget__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  border: var(--rule-width) solid oklch(76% 0.16 165 / 0.35);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  box-shadow: 0 10px 25px -5px oklch(0% 0 0 / 0.5), 0 0 15px oklch(76% 0.16 165 / 0.15);
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.demo-widget__trigger:hover {
  transform: translateY(-2px);
  border-color: oklch(76% 0.16 165 / 0.7);
  box-shadow: 0 12px 30px -5px oklch(0% 0 0 / 0.6), 0 0 20px oklch(76% 0.16 165 / 0.25);
}
.demo-widget__trigger:focus-visible { outline-offset: 3px; border-radius: var(--radius-pill); }

/* Tucked while a [data-demo-avoid] element (contact submit) passes underneath — js/demo-widget.js. */
.demo-widget.is-tucked .demo-widget__trigger {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.demo-widget__beacon {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-spark);
}
@media (prefers-reduced-motion: no-preference) {
  .demo-widget__beacon { animation: demo-widget-pulse 1.8s infinite; }
}
@keyframes demo-widget-pulse {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 oklch(76% 0.16 165 / 0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 6px oklch(76% 0.16 165 / 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 oklch(76% 0.16 165 / 0); }
}

.demo-widget__icon { flex: none; color: var(--color-spark); }
.demo-widget__label { font-size: var(--text-sm); font-weight: var(--weight-strong); letter-spacing: -0.01em; white-space: nowrap; }
.demo-widget__label--short { display: none; }
.demo-widget__badge {
  padding: 2px 7px;
  border: var(--rule-width) solid oklch(76% 0.16 165 / 0.3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* ── Card ──────────────────────────────────────────────── */
.demo-widget__card {
  position: absolute;
  inset-block-end: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  width: 360px;
  max-height: calc(100dvh - 6.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  border: var(--rule-width) solid oklch(76% 0.16 165 / 0.25);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  box-shadow: 0 20px 40px oklch(0% 0 0 / 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    visibility 0s linear 0.25s;
}
.demo-widget.is-open .demo-widget__card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    visibility 0s;
}

.demo-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-xs);
}
.demo-widget__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-strong);
  letter-spacing: 0.05em;
  color: var(--color-accent-text);
}
.demo-widget__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-spark); }

.demo-widget__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.375rem -0.375rem -0.375rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.demo-widget__close:hover { color: var(--color-ink); background: var(--color-paper-3); }
.demo-widget__close:focus-visible { outline-offset: 1px; }

.demo-widget__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-display);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.demo-widget__sub {
  margin: 0 0 var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.demo-widget__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: var(--space-sm); }
.demo-widget__pill {
  padding: 6px 10px;
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: oklch(100% 0 0 / 0.04);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.demo-widget__pill:hover { border-color: var(--color-control); }
.demo-widget__pill[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--weight-strong);
}
.demo-widget__pill:focus-visible { outline-offset: 2px; }

.demo-widget__preview {
  margin-block-end: var(--space-sm);
  padding: 10px var(--space-xs);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.demo-widget__preview-label {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.demo-widget__preview-text {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-ink);
}

.demo-widget__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-display);
  text-decoration: none;
  box-shadow: 0 4px 15px oklch(76% 0.16 165 / 0.3);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.demo-widget__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent-hover);
  text-decoration: none;
  transform: scale(1.01);
}

.demo-widget__foot {
  margin: var(--space-2xs) 0 0;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--color-muted);
}

@media (max-width: 479.98px) {
  /* Span both gutters (not 100vw, which counts a desktop scrollbar) so the card keeps 16px each
   * side; the root is click-through so the empty strip beside the trigger stays usable. */
  .demo-widget {
    inset-block-end: var(--space-sm);
    inset-inline: var(--space-sm);
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
  }
  .demo-widget__trigger { pointer-events: auto; }
  .demo-widget__card { width: auto; inset-inline-start: 0; }
  .demo-widget__label--long, .demo-widget__badge { display: none; }
  .demo-widget__label--short { display: inline; }
}