/* ------------------------------------------------------------------
   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:calc(clamp(16px, 2.2vw, 30px) + env(safe-area-inset-bottom, 0px));
  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}

/* The marketing button: a second, equal-weight CTA that only shows up beside
   WhatsApp on mobile, where the corner is prime real estate and "message us"
   is not the only thing worth putting there. Off by default - only the pages
   that reach this markup (the homepage journey, the CRM tour) get it. */
.wa-dock-btn--marketing{display:none}

/* The visible words on each pill. Hidden everywhere except the mobile pill
   layout below - desktop and the pre-pill mobile state stay icon-only. */
.wa-dock-btn-label{display:none}

@media(max-width:600px){
  .wa-dock-bubble{display:none}

  /* Hidden over the hero - js/wa-dock.js adds .is-past-hero once the hero
     section (the cinematic film, or the CRM page's inbox-converge) scrolls
     out, which is also the moment there is a second CTA worth surfacing. */
  .wa-dock{
    left:16px;
    right:16px;
    justify-content:space-between;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:10px;
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1);
  }

  .wa-dock.is-past-hero{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  /* Two equal pills rather than the desktop circle - each takes the same
     share of the corner, per spec. */
  .wa-dock-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 1 0;
    width:auto;
    height:auto;
    min-height:54px;
    border-radius:999px;
    padding:8px 14px;
    gap:7px;
  }

  .wa-dock-btn svg{width:20px;height:20px;flex:none}

  .wa-dock-btn-label{
    display:block;
    font-family:var(--sans);
    font-weight:750;
    font-size:12.5px;
    line-height:1.22;
    text-align:center;
  }

  .wa-dock-btn--marketing{
    display:flex;
    background:var(--signal-yellow,#f5ff63);
    color:var(--ink,#19171c);
    box-shadow:0 14px 32px rgb(25 23 28 / .22);
  }
  /* Text-only, to match the reference: the icon would just compete with
     WhatsApp's for attention in a pill this narrow. */
  .wa-dock-btn--marketing svg{display:none}
  .wa-dock-btn--marketing:hover{transform:scale(1.03)}
  .wa-dock-btn--marketing:active{transform:scale(.97)}
  .wa-dock-btn--marketing:focus-visible{outline:3px solid var(--ink,#19171c);outline-offset:3px}

  /* Round-2 (Reuben): index.html's dock no longer ships the marketing pill in
     the markup at all, so the WhatsApp button is the dock's only BUTTON
     there (its siblings are a <p> bubble and a <div> panel, so `:only-child`
     does not match - `:only-of-type` does, since it compares by tag name).
     Reclaims the familiar circular corner control instead of the button
     stretching to fill the space-between row that assumed two pills. Pages
     that still carry `.wa-dock-btn--marketing` (e.g. crm.html) are
     unaffected - that dock has two <button>/<a> pills, so neither is
     only-of-type... but `.wa-dock-btn--marketing` is an <a>, not a
     <button>, so the WhatsApp <button> would still be "only of its type"
     there too. Scope explicitly to a dock with no marketing pill instead. */
  .wa-dock:not(:has(.wa-dock-btn--marketing)) .wa-dock-btn{
    flex:0 0 60px;
    width:60px;
    height:60px;
    min-height:60px;
    padding:0;
    border-radius:50%;
    margin-left:auto;
  }
  .wa-dock:not(:has(.wa-dock-btn--marketing)) .wa-dock-btn svg{width:28px;height:28px;flex-basis:28px;margin:0}
  .wa-dock:not(:has(.wa-dock-btn--marketing)) .wa-dock-btn-label{display:none}
}

/* 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}
}

/* ------------------------------------------------------------------
   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
   ------------------------------------------------------------------ */

@media(min-width:601px){.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){
  /* This comes after the shared button reset above. Without it that later
     `padding:0` pulled the WhatsApp glyph onto the green pill's outer edge. */
  .wa-dock-btn{
    min-width:0;
    min-height:56px;
    padding:8px 12px;
    overflow:hidden;
  }
  .wa-dock-btn:not(.wa-dock-btn--marketing) svg{
    width:22px;
    height:22px;
    flex:0 0 22px;
    margin-left:2px;
  }
  .wa-dock-btn-label{min-width:0}

  /* The CRM walkthrough and footer need the content back. In compact mode
     the marketing action steps away and WhatsApp returns to its familiar,
     thumb-reachable circular corner control. */
  .wa-dock.is-compact{
    left:auto;
    right:16px;
    width:56px;
    gap:0;
    align-items:center;
  }
  .wa-dock.is-compact .wa-dock-btn--marketing{display:none}
  .wa-dock.is-compact .wa-dock-btn:not(.wa-dock-btn--marketing){
    flex:0 0 56px;
    width:56px;
    height:56px;
    min-height:56px;
    padding:0;
    border-radius:50%;
  }
  .wa-dock.is-compact .wa-dock-btn-label{display:none}
  .wa-dock.is-compact .wa-dock-btn:not(.wa-dock-btn--marketing) svg{
    width:28px;
    height:28px;
    flex-basis:28px;
    margin:0;
  }
  .wa-dock.is-past-hero.is-suppressed{
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
  }

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

/* The drawer already contains both conversion actions. Hiding the page dock
   while it is open removes a duplicate target above the menu. */
body.menu-open .wa-dock{
  opacity:0!important;
  visibility:hidden;
  pointer-events:none!important;
}

/* 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}
}