/* ------------------------------------------------------------------
   WhatsApp dock.

   Was a small icon buried in the header, competing with the CTA and
   invisible once the visitor scrolled. Now it sits bottom-right, always
   reachable, and asks the question that belongs to whatever section is
   being read.

   Motion constants (see js/wa-dock.js for the timing that pairs with
   these - they have to agree or the text swaps mid-fade):
     entry   560ms cubic-bezier(.22,1,.36,1) from x+18px, scale .94
     swap    170ms out to y-7px, then back in on the same entry curve
   ------------------------------------------------------------------ */

.wa-dock{
  position:fixed;
  z-index:60;
  right:clamp(16px,2.2vw,30px);
  bottom:clamp(16px,2.2vw,30px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  pointer-events:none; /* the gap between bubble and button must not eat clicks */
}

.wa-dock-bubble{
  max-width:min(62vw,290px);
  padding:13px 18px;
  border-radius:18px 18px 4px 18px;
  background:#fff;
  color:var(--ink,#19171c);
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:650;
  line-height:1.32;
  letter-spacing:-.01em;
  text-wrap:balance;
  box-shadow:0 12px 34px rgb(25 23 28 / .18), 0 2px 6px rgb(25 23 28 / .1);
  pointer-events:auto;
  opacity:0;
  transform:translateX(18px) scale(.94);
  transform-origin:100% 100%;
  transition:
    opacity .56s cubic-bezier(.22,1,.36,1),
    transform .56s cubic-bezier(.22,1,.36,1);
}

.wa-dock.is-open .wa-dock-bubble{
  opacity:1;
  transform:none;
}

/* the outgoing state: lifts and fades rather than sliding back out, so a
   change of question reads as a change rather than as a dismissal */
.wa-dock.is-swapping .wa-dock-bubble{
  opacity:0;
  transform:translateY(-7px);
  transition:
    opacity .17s ease,
    transform .17s ease;
}

.wa-dock-btn{
  position:relative;
  width:60px;
  height:60px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  text-decoration:none;
  pointer-events:auto;
  box-shadow:0 14px 32px rgb(20 90 50 / .34);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}

.wa-dock-btn svg{width:31px;height:31px;fill:currentColor}
.wa-dock-btn:hover{transform:scale(1.06)}
.wa-dock-btn:active{transform:scale(.96)}
.wa-dock-btn:focus-visible{outline:3px solid var(--ink,#19171c);outline-offset:3px}

/* One slow pulse, not a loop: a repeating ring on a fixed element reads as an
   ad. This fires once when the ring first paints and then never again. */
.wa-dock-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgb(37 211 102 / .55);
  animation:wa-dock-ping 2.6s cubic-bezier(.22,1,.36,1) .9s 1 both;
}

@keyframes wa-dock-ping{
  0%{box-shadow:0 0 0 0 rgb(37 211 102 / .55)}
  100%{box-shadow:0 0 0 22px rgb(37 211 102 / 0)}
}

@media(max-width:600px){
  .wa-dock-btn{width:54px;height:54px}
  .wa-dock-btn svg{width:28px;height:28px}
  .wa-dock-bubble{max-width:56vw;padding:11px 15px;font-size:13.5px}
}

/* The dock is fixed over the page, so it will sit on top of the footer's
   newsletter field on short screens. Below this height the bubble is dropped
   and only the button remains. */
@media(max-height:520px){
  .wa-dock-bubble{display:none}
}

@media(prefers-reduced-motion:reduce){
  .wa-dock-bubble,
  .wa-dock.is-swapping .wa-dock-bubble{transition:none;transform:none}
  .wa-dock-btn{transition:none}
  .wa-dock-btn::after{animation:none}
}

/* ------------------------------------------------------------------
   The expanded chat panel.

   Hover (or tap, or keyboard focus) grows the small prompt into a real
   conversation: who you are talking to, the message already drafted for
   you, and a few one-tap alternatives. The point is that nobody has to
   think of an opening line - the section they were reading wrote it.

   Motion, matched to the bubble so the two never fight:
     open   420ms cubic-bezier(.22,1,.36,1), from y+16px scale .96
     rows   staggered 40ms apart on the same curve, so the panel
            assembles rather than appearing all at once
   ------------------------------------------------------------------ */

.wa-dock{flex-wrap:wrap}

.wa-panel{
  position:absolute;
  right:0;
  bottom:76px;
  width:min(88vw,344px);
  padding:18px 18px 16px;
  border-radius:22px 22px 6px 22px;
  background:#fff;
  color:var(--ink,#19171c);
  box-shadow:0 26px 60px rgb(25 23 28 / .26), 0 2px 8px rgb(25 23 28 / .12);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.96);
  transform-origin:100% 100%;
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .42s;
}

.wa-dock.is-expanded .wa-panel{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}

/* the small prompt steps aside rather than sitting behind the panel */
.wa-dock.is-expanded .wa-dock-bubble{
  opacity:0;
  transform:translateX(10px) scale(.96);
  pointer-events:none;
}

.wa-panel-head{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid rgb(25 23 28 / .1)}
.wa-panel-avatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--service-scale,#7c3aed)}
.wa-panel-avatar img{width:100%;height:100%;display:block}
.wa-panel-who{display:flex;flex-direction:column;line-height:1.25}
.wa-panel-who strong{font-size:14.5px;font-weight:750}
.wa-panel-who small{color:#5d5a63;font-size:12px}
/* the little green dot is the only "we are here" signal, so it stays subtle */
.wa-panel-who small::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#25d366;vertical-align:middle}

.wa-panel-thread{padding:14px 0 4px;display:flex;flex-direction:column;gap:9px}
.wa-panel-greeting{
  align-self:flex-start;max-width:88%;margin:0;padding:9px 13px;
  border-radius:14px 14px 14px 4px;background:#f3f3f5;
  font-size:13.5px;line-height:1.4;
}
/* the draft is shown as the visitor's own outgoing message, because that is
   exactly what the link sends */
.wa-panel-draft{
  align-self:flex-end;max-width:92%;margin:0;padding:10px 14px;
  border-radius:14px 14px 4px 14px;background:#d9fdd3;
  font-size:13.5px;font-weight:600;line-height:1.4;
}

.wa-panel-chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 0 2px}
.wa-panel-chip{
  padding:7px 12px;border-radius:999px;border:1px solid rgb(25 23 28 / .16);
  background:#fff;color:var(--ink,#19171c);
  font-family:var(--sans);font-size:12.5px;font-weight:650;
  cursor:pointer;transition:border-color .25s ease,background-color .25s ease;
}
.wa-panel-chip:hover{border-color:#25d366;background:rgb(37 211 102 / .1)}
.wa-panel-chip[aria-pressed="true"]{border-color:#25d366;background:rgb(37 211 102 / .16)}

.wa-panel-send{
  margin-top:12px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:14px;
  background:#25d366;color:#0b2a17;
  font-weight:750;font-size:14.5px;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s ease;
}
.wa-panel-send:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* Staggered assembly. Each row is 40ms behind the one above it, which is what
   makes the panel read as opening rather than as popping. */
.wa-panel-head,.wa-panel-thread,.wa-panel-chips,.wa-panel-send{
  opacity:0;transform:translateY(7px);
  transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1);
}
.wa-dock.is-expanded .wa-panel-head{opacity:1;transform:none;transition-delay:.06s}
.wa-dock.is-expanded .wa-panel-thread{opacity:1;transform:none;transition-delay:.1s}
.wa-dock.is-expanded .wa-panel-chips{opacity:1;transform:none;transition-delay:.14s}
.wa-dock.is-expanded .wa-panel-send{opacity:1;transform:none;transition-delay:.18s}

.wa-dock-btn{border:0;padding:0;cursor:pointer;font:inherit}
.wa-dock.is-expanded .wa-dock-btn{transform:rotate(-6deg) scale(1.04)}

@media(max-width:600px){
  .wa-panel{width:min(92vw,320px);bottom:70px;padding:16px 16px 14px}
  .wa-panel-greeting,.wa-panel-draft{font-size:13px}
}

/* A short screen cannot hold the panel above the button without covering the
   page, so below this the dock stays a plain link straight to WhatsApp. */
@media(max-height:620px){
  .wa-panel{display:none}
}

@media(prefers-reduced-motion:reduce){
  .wa-panel,
  .wa-panel-head,.wa-panel-thread,.wa-panel-chips,.wa-panel-send{transition:none;transform:none}
  .wa-dock.is-expanded .wa-dock-btn{transform:none}
}