/* ===== Multi-channel contact launcher ===== */

.contact-launcher{
  position:fixed;
  right:24px;bottom:24px;
  z-index:9500;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}

/* ---------- options ---------- */
.cl-options{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:none;
}
.cl-opt{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px 9px 10px;
  border-radius:4px;
  background:linear-gradient(160deg,rgba(18,41,61,.97),rgba(11,27,43,.97));
  border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.25,1),border-color .2s ease,background .2s ease;
}
.cl-ic{
  width:30px;height:30px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:3px;
  background:rgba(42,151,120,.14);
  color:var(--accent);
}
.cl-ic svg{width:16px;height:16px}
.cl-label{
  font-family:var(--font-h);font-weight:600;
  font-size:.78rem;letter-spacing:.06em;
}
.cl-opt:hover{
  border-color:rgba(42,151,120,.6);
  background:linear-gradient(160deg,rgba(24,56,78,.98),rgba(14,34,52,.98));
}
.cl-opt:hover .cl-ic{background:rgba(42,151,120,.26)}

/* channel accents */
.cl-wa .cl-ic{background:rgba(37,211,102,.16);color:#25D366}
.cl-wa:hover .cl-ic{background:rgba(37,211,102,.26)}

/* open state: stagger the fan-out */
.contact-launcher.open .cl-options{pointer-events:auto}
.contact-launcher.open .cl-opt{opacity:1;transform:translateY(0) scale(1)}
.contact-launcher.open .cl-opt:nth-child(1){transition-delay:.04s}
.contact-launcher.open .cl-opt:nth-child(2){transition-delay:.10s}
.contact-launcher.open .cl-opt:nth-child(3){transition-delay:.16s}

/* ---------- trigger ---------- */
.cl-trigger{
  position:relative;
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:50%;
  cursor:pointer;
  border:1px solid rgba(127,231,196,.42);
  background:linear-gradient(160deg,rgba(42,151,120,.55),rgba(34,58,91,.9));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -10px rgba(4,18,28,.7),inset 0 1px 0 0 rgba(255,255,255,.2);
  color:#eafff7;
  transition:transform .26s cubic-bezier(.2,.8,.25,1),box-shadow .26s ease,border-color .26s ease;
  -webkit-tap-highlight-color:transparent;
}
.cl-trigger:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:rgba(127,231,196,.75);
  box-shadow:0 18px 40px -12px rgba(42,151,120,.55),inset 0 1px 0 0 rgba(255,255,255,.28);
}
.cl-trigger:focus-visible{outline:2px solid rgba(127,231,196,.9);outline-offset:3px}
.cl-trigger svg{width:25px;height:25px}

/* icon crossfade */
.cl-chat,.cl-close{
  grid-area:1/1;
  display:grid;place-items:center;
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.25,1);
}
.cl-close{opacity:0;transform:rotate(-90deg) scale(.7)}
.contact-launcher.open .cl-chat{opacity:0;transform:rotate(90deg) scale(.7)}
.contact-launcher.open .cl-close{opacity:1;transform:rotate(0) scale(1)}
.contact-launcher.open .cl-trigger{
  background:linear-gradient(160deg,rgba(34,58,91,.95),rgba(11,27,43,.95));
  border-color:var(--line);
}

/* attention pulse (stops once opened) */
.cl-trigger::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--accent);
  opacity:0;pointer-events:none;
}
.js .contact-launcher:not(.open):not(.engaged) .cl-trigger::after{animation:cl-ping 3.4s ease-out infinite}
@keyframes cl-ping{
  0%{transform:scale(1);opacity:.5}
  70%{opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

@media(max-width:600px){
  .contact-launcher{right:16px;bottom:16px;gap:10px}
  .cl-trigger{width:54px;height:54px}
  .cl-trigger svg{width:23px;height:23px}
  .cl-opt{padding:8px 12px 8px 9px}
  .cl-label{font-size:.74rem}
}

@media(prefers-reduced-motion:reduce){
  .cl-opt,.cl-trigger,.cl-chat,.cl-close{transition:opacity .15s ease}
  .cl-trigger:hover{transform:none}
  .js .contact-launcher .cl-trigger::after{animation:none}
  .contact-launcher.open .cl-opt{transform:none}
}