/* ===================================================================
   Hawk Eye AI — demo walkthrough overlay
   Generic. Knows nothing about the host site beyond #site.

   ALL presentation is driven by html[data-demo-state]. JS only ever
   sets that one attribute — no style.display juggling, so the DOM
   can never drift out of sync with the state machine.

   Blue on purpose: the host sites are industry-themed, and the widget
   reading as a separate product is the point.
   =================================================================== */

:root{
  /* Inherit the HOST SITE's palette so the widget looks native rather than
     bolted on. Each falls back to a neutral if the overlay is dropped on a
     page that does not define these - so a new vertical themes itself just by
     editing its own styles.css :root block, and this file never changes. */
  --dm-brand:       var(--brand, #14532d);
  --dm-brand-2:     var(--brand-2, #166534);
  --dm-brand-deep:  var(--brand-deep, #0b2114);
  --dm-accent:      var(--accent, #8fd14f);
  --dm-accent-2:    var(--accent-2, #b2e06b);
  --dm-accent-deep: var(--accent-deep, #5f9e2e);
  /* text that sits ON the bright accent - the accent is light, so this is dark */
  --dm-on-accent:   #0d2416;
  --dm-accent-soft: #e8f6db;
  --dm-accent-soft: color-mix(in srgb, var(--dm-accent) 18%, #fff);
  --dm-accent-tint: #f4fbee;
  --dm-accent-tint: color-mix(in srgb, var(--dm-accent) 10%, #fff);

  --dm-ink:#0f172a;
  --dm-slate:#64748b;
  --dm-line:#e2e8f0;
  --dm-radius:18px;
  --dm-shadow:0 24px 60px rgba(11,33,20,.30);
  --dm-ease:cubic-bezier(.22,.61,.36,1);
  --dm-sheet:0px;
}

/* ---------- host site treatment ------------------------------------
   Blur #site, NEVER body: a filter creates a containing block for
   position:fixed descendants, and the host template has four of them
   (.scrollbar .nav .mobilebar .nav__links). Blurring body makes them
   reposition and jump. ------------------------------------------- */
#site{ transition: filter .45s var(--dm-ease); }
html[data-demo-state]:not([data-demo-state="off"]):not([data-demo-state="done"]) #site{
  filter: blur(7px) saturate(.85);
}
/* the host's sticky bottom bar fights the FAB and the real-agent card */
html[data-demo-state]:not([data-demo-state="off"]) .mobilebar{ display:none !important; }

.dm-root{ position:fixed; inset:0; z-index:9000; pointer-events:none;
  font-family:'Inter',system-ui,-apple-system,sans-serif; }
.dm-root *{ box-sizing:border-box; }
html[data-demo-state="off"] .dm-root{ display:none; }

/* ---------- scrim --------------------------------------------------- */
.dm-scrim{ position:absolute; inset:0; background:rgba(15,23,42,.42);
  opacity:0; transition:opacity .4s var(--dm-ease); pointer-events:none; }
html[data-demo-state="intro"] .dm-scrim{ opacity:1; pointer-events:auto; cursor:pointer; }
html[data-demo-state="step1"] .dm-scrim,
html[data-demo-state="agentA_ready"] .dm-scrim,
html[data-demo-state="agentA_live"] .dm-scrim,
html[data-demo-state="agentA_done"] .dm-scrim,
html[data-demo-state="step2"] .dm-scrim,
html[data-demo-state="agentB_ready"] .dm-scrim,
html[data-demo-state="agentB_live"] .dm-scrim,
html[data-demo-state="blocked"] .dm-scrim{ opacity:1; }
html[data-demo-state="done"] .dm-scrim{ opacity:.55; }

/* ---------- generic card -------------------------------------------- */
.dm-card{ position:absolute; pointer-events:auto; background:#fff;
  border-radius:var(--dm-radius); box-shadow:var(--dm-shadow);
  padding:26px 28px; width:min(520px, calc(100vw - 32px));
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.985);
  transition:opacity .35s var(--dm-ease), transform .35s var(--dm-ease), visibility .35s; }
.dm-card[data-show="1"]{ opacity:1; visibility:visible; transform:none; }

.dm-card__tag{ display:inline-block; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dm-slate);
  background:#f1f5f9; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.dm-card h2{ font-size:1.5rem; line-height:1.2; color:var(--dm-ink); margin:0 0 8px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em; }
.dm-card h3{ font-size:1.15rem; line-height:1.25; color:var(--dm-ink); margin:0 0 6px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; }
.dm-card p{ font-size:.95rem; line-height:1.6; color:var(--dm-slate); margin:0 0 6px; }
.dm-card strong{ color:var(--dm-ink); }

.dm-steps{ list-style:none; margin:18px 0 20px; padding:0; text-align:left; }
.dm-steps li{ display:flex; align-items:flex-start; gap:12px; padding:7px 0;
  font-size:.95rem; color:var(--dm-ink); }
.dm-steps li span{ flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--dm-accent-soft); color:var(--dm-brand); font-weight:800; font-size:.8rem;
  display:grid; place-items:center; }

.dm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:linear-gradient(135deg,var(--dm-accent),var(--dm-accent-deep)); color:var(--dm-on-accent);
  font-weight:700; font-size:1rem; border:none; border-radius:999px;
  padding:.85em 1.6em; cursor:pointer; width:100%; margin-top:6px;
  box-shadow:0 12px 26px rgba(95,158,46,.38);
  transition:transform .2s var(--dm-ease), box-shadow .2s var(--dm-ease); }
.dm-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(95,158,46,.48); }
.dm-btn--ghost{ background:none; color:var(--dm-slate); box-shadow:none;
  font-size:.86rem; font-weight:600; padding:.6em; margin-top:2px; }
.dm-btn--ghost:hover{ transform:none; box-shadow:none; color:var(--dm-ink); }

.dm-close{ position:absolute; top:14px; right:14px; width:30px; height:30px;
  border-radius:50%; border:none; background:#f1f5f9; color:var(--dm-slate);
  font-size:1rem; line-height:1; cursor:pointer; display:grid; place-items:center; }
.dm-close:hover{ background:#e2e8f0; color:var(--dm-ink); }

/* ---------- card placement (desktop) -------------------------------- */
.dm-card--intro,
.dm-card--done,
.dm-card--blocked{ top:50%; left:50%; transform:translate(-50%,-50%) scale(.985); text-align:center; }
.dm-card--intro[data-show="1"],
.dm-card--done[data-show="1"],
.dm-card--blocked[data-show="1"]{ transform:translate(-50%,-50%); }

.dm-card--step1{ top:14%; left:50%; transform:translateX(-50%) translateY(10px); text-align:center;
  width:min(460px, calc(100vw - 32px)); }
.dm-card--step1[data-show="1"]{ transform:translateX(-50%); }

.dm-card--mic,
.dm-card--live{ top:50%; left:6%; transform:translateY(-50%) scale(.985);
  width:min(440px, calc(100vw - 32px)); }
.dm-card--mic[data-show="1"],
.dm-card--live[data-show="1"]{ transform:translateY(-50%); }

.dm-card--step2{ top:16%; left:50%; transform:translateX(-50%) translateY(10px); text-align:center;
  width:min(500px, calc(100vw - 32px)); }
.dm-card--step2[data-show="1"]{ transform:translateX(-50%); }

/* ---------- FAB ------------------------------------------------------ */
.dm-fab{ position:absolute; right:22px; bottom:calc(22px + env(safe-area-inset-bottom));
  width:62px; height:62px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--dm-accent),var(--dm-accent-deep));
  color:var(--dm-on-accent); display:grid; place-items:center; pointer-events:auto;
  box-shadow:0 14px 32px rgba(95,158,46,.5);
  opacity:0; visibility:hidden; transform:scale(.8);
  transition:opacity .3s var(--dm-ease), transform .3s var(--dm-ease), visibility .3s; }
.dm-fab svg{ width:28px; height:28px; }
html[data-demo-state="step1"] .dm-fab,
html[data-demo-state="agentA_ready"] .dm-fab,
html[data-demo-state="agentA_live"] .dm-fab,
html[data-demo-state="agentA_done"] .dm-fab{ opacity:1; visibility:visible; transform:none; }
/* attention ring, only while we're asking them to click it */
html[data-demo-state="step1"] .dm-fab::after{ content:""; position:absolute; inset:-6px;
  border-radius:50%; border:3px solid var(--dm-accent); opacity:.75; animation:dmPulse 1.8s infinite; }
@keyframes dmPulse{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.35);opacity:0} 100%{opacity:0} }

/* ---------- widget panel (Agent A) ----------------------------------- */
.dm-panel{ position:absolute; right:22px; bottom:calc(100px + env(safe-area-inset-bottom));
  width:min(320px, calc(100vw - 32px)); background:#fff; border-radius:16px;
  box-shadow:var(--dm-shadow); overflow:hidden; pointer-events:auto;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s var(--dm-ease), transform .3s var(--dm-ease), visibility .3s; }
html[data-demo-state="agentA_ready"] .dm-panel,
html[data-demo-state="agentA_live"] .dm-panel{ opacity:1; visibility:visible; transform:none; }
.dm-panel__head{ background:linear-gradient(135deg,var(--dm-brand),var(--dm-brand-2));
  color:#fff; padding:12px 16px; display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:.95rem; }
.dm-panel__ava{ width:30px; height:30px; border-radius:50%; background:#fff;
  display:grid; place-items:center; font-size:1rem; }
.dm-panel__body{ padding:24px 20px 22px; text-align:center; }
.dm-panel__face{ width:82px; height:82px; border-radius:50%; margin:0 auto 12px;
  background:linear-gradient(135deg,var(--dm-accent-tint),var(--dm-accent-soft)); display:grid; place-items:center;
  font-size:2.1rem; }
.dm-panel__name{ font-weight:800; color:var(--dm-ink); font-size:1.05rem; }
.dm-panel__name em{ font-style:normal; font-size:.68rem; font-weight:800; color:var(--dm-brand);
  background:var(--dm-accent-soft); padding:2px 7px; border-radius:999px; margin-left:6px; vertical-align:2px; }
.dm-panel__role{ font-size:.85rem; color:var(--dm-slate); margin-bottom:14px; }
.dm-panel__cta{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--dm-accent-deep);
  background:#fff; color:var(--dm-brand); font-weight:700; font-size:.92rem;
  padding:.7em 1.3em; border-radius:999px; cursor:pointer; }
.dm-panel__cta:hover{ background:var(--dm-accent-tint); }
.dm-panel__foot{ border-top:1px solid var(--dm-line); padding:9px; text-align:center;
  font-size:.72rem; color:var(--dm-slate); }

/* live state inside the panel */
.dm-wave{ display:none; justify-content:center; gap:4px; height:26px; align-items:flex-end; margin-bottom:10px; }
.dm-wave i{ width:4px; background:var(--dm-accent-deep); border-radius:2px; animation:dmWave 1s infinite ease-in-out; }
.dm-wave i:nth-child(2){ animation-delay:.15s } .dm-wave i:nth-child(3){ animation-delay:.3s }
.dm-wave i:nth-child(4){ animation-delay:.45s } .dm-wave i:nth-child(5){ animation-delay:.6s }
@keyframes dmWave{ 0%,100%{height:8px} 50%{height:24px} }
html[data-demo-state="agentA_live"] .dm-wave,
html[data-demo-state="agentB_live"] .dm-wave{ display:flex; }
html[data-demo-state="agentA_live"] .dm-panel__cta{ background:#fef2f2; border-color:#ef4444; color:#dc2626; }

/* ---------- REAL AGENT card (Agent B) -------------------------------- */
.dm-real{ position:absolute; left:22px; bottom:calc(22px + env(safe-area-inset-bottom));
  width:min(330px, calc(100vw - 32px)); background:#fff; border-radius:16px;
  box-shadow:var(--dm-shadow); padding:18px 20px 16px; pointer-events:auto; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--dm-ease), transform .35s var(--dm-ease), visibility .35s; }
html[data-demo-state="step2"] .dm-real,
html[data-demo-state="agentB_ready"] .dm-real,
html[data-demo-state="agentB_live"] .dm-real{ opacity:1; visibility:visible; transform:none; }
.dm-real__tag{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:800;
  letter-spacing:.1em; color:var(--dm-brand); background:var(--dm-accent-soft); padding:4px 10px; border-radius:999px; }
.dm-real__tag i{ width:7px; height:7px; border-radius:50%; background:var(--dm-accent-deep);
  animation:dmBlink 1.4s infinite; }
@keyframes dmBlink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.dm-real h3{ font-size:1.02rem; margin:10px 0 4px; color:var(--dm-ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; }
.dm-real p{ font-size:.86rem; color:var(--dm-slate); margin:0 0 12px; line-height:1.5; }
.dm-real__row{ display:flex; align-items:center; gap:10px; border:1px solid var(--dm-line);
  border-radius:999px; padding:7px 8px 7px 14px; }
.dm-real__row span{ font-weight:700; font-size:.9rem; color:var(--dm-ink); flex:1; }
.dm-real__go{ width:38px; height:38px; border-radius:50%; border:none; flex:0 0 38px;
  background:linear-gradient(135deg,var(--dm-accent),var(--dm-accent-deep)); color:var(--dm-on-accent);
  display:grid; place-items:center; cursor:pointer; }
.dm-real__go svg{ width:18px; height:18px; }

/* ---------- arrows --------------------------------------------------- */
.dm-arrow{ position:absolute; pointer-events:none; opacity:0;
  transition:opacity .4s var(--dm-ease); color:#fff;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
html[data-demo-state="step1"] .dm-arrow--fab{ opacity:.95; animation:dmNudgeR 1.6s infinite; }
html[data-demo-state="step2"] .dm-arrow--real{ opacity:.95; animation:dmNudgeL 1.6s infinite; }
.dm-arrow--fab{ right:96px; bottom:44px; width:150px; }
.dm-arrow--real{ left:96px; bottom:44px; width:150px; transform:scaleX(-1); }
@keyframes dmNudgeR{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} }
@keyframes dmNudgeL{ 0%,100%{transform:scaleX(-1) translateX(0)} 50%{transform:scaleX(-1) translateX(10px)} }

/* ---------- skip ------------------------------------------------------ */
.dm-skip{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px;
  pointer-events:auto; background:rgba(255,255,255,.92); border:none; border-radius:999px;
  padding:.5em 1em; font-size:.8rem; font-weight:700; color:var(--dm-slate); cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.18); opacity:0; visibility:hidden; transition:opacity .3s; }
html[data-demo-state]:not([data-demo-state="off"]):not([data-demo-state="intro"]):not([data-demo-state="done"]) .dm-skip{
  opacity:1; visibility:visible; }
.dm-skip:hover{ color:var(--dm-ink); }

/* ---------- done card contact ---------------------------------------- */
.dm-contact{ display:flex; flex-direction:column; gap:8px; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--dm-line); }
.dm-contact a{ display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:.95rem; color:var(--dm-brand); text-decoration:none;
  padding:.6em; border-radius:12px; background:var(--dm-accent-tint); }
.dm-contact a:hover{ background:var(--dm-accent-soft); }

/* ---------- mobile ----------------------------------------------------
   Below 640px most cards become bottom sheets. step1/step2 are the
   exception: they point AT something anchored to the bottom, so they
   move to the top instead of covering their own target. -------------- */
@media (max-width:640px){
  .dm-card{ width:calc(100vw - 20px); padding:22px 20px; border-radius:20px; }
  .dm-card--intro,
  .dm-card--done,
  .dm-card--blocked,
  .dm-card--mic,
  .dm-card--live{
    top:auto; bottom:calc(12px + env(safe-area-inset-bottom));
    left:10px; right:10px; width:auto;
    transform:translateY(14px); max-height:78dvh; overflow-y:auto; }
  .dm-card--intro[data-show="1"],
  .dm-card--done[data-show="1"],
  .dm-card--blocked[data-show="1"],
  .dm-card--mic[data-show="1"],
  .dm-card--live[data-show="1"]{ transform:none; }

  .dm-card--step1, .dm-card--step2{
    top:calc(12px + env(safe-area-inset-top)); left:10px; right:10px; width:auto;
    transform:translateY(-10px); }
  .dm-card--step1[data-show="1"], .dm-card--step2[data-show="1"]{ transform:none; }

  .dm-card h2{ font-size:1.25rem; }
  .dm-fab{ width:56px; height:56px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); }
  .dm-panel{ right:10px; left:10px; width:auto; bottom:calc(84px + env(safe-area-inset-bottom)); }
  .dm-real{ left:10px; right:10px; width:auto; bottom:calc(14px + env(safe-area-inset-bottom)); }
  /* long angled arrows do not survive narrow viewports */
  .dm-arrow{ display:none; }
  .dm-skip{ top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); right:auto; left:10px;
    font-size:.74rem; padding:.4em .8em; }
  html[data-demo-state="step2"] .dm-skip,
  html[data-demo-state="agentB_ready"] .dm-skip,
  html[data-demo-state="agentB_live"] .dm-skip{ display:none; }
}

/* ---------- reduced motion -------------------------------------------
   The host template gates every animation on this; match that. Blur is
   also a real compositing cost on mobile Safari, so drop to a flat
   scrim rather than animating it. ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  #site{ transition:none; }
  html[data-demo-state]:not([data-demo-state="off"]):not([data-demo-state="done"]) #site{
    filter:none; }
  .dm-scrim{ background:rgba(15,23,42,.72); transition:none; }
  .dm-card, .dm-fab, .dm-panel, .dm-real, .dm-arrow{ transition:none; }
  .dm-card{ transform:none !important; }
  .dm-fab::after, .dm-arrow, .dm-real__tag i, .dm-wave i{ animation:none !important; }
  .dm-arrow{ opacity:.95; }
  .dm-btn:hover{ transform:none; }
}