.fa-wa-widget{ position:fixed; bottom:24px; z-index:99999; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.fa-wa-pos-right{ right:24px; }
.fa-wa-pos-left{ left:24px; }

.fa-wa-bubble-wrap{ position:relative; width:58px; height:58px; }
.fa-wa-ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid #4F46E5;
  opacity:0; pointer-events:none;
}

.fa-wa-bubble-btn{
  position:relative; z-index:1;
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:#4F46E5; box-shadow:0 10px 28px rgba(79,70,229,0.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.fa-wa-bubble-btn:hover{ transform:translateY(-3px) scale(1.08); box-shadow:0 14px 32px rgba(79,70,229,0.55); }
.fa-wa-bubble-btn:active{ transform:translateY(0) scale(0.9); box-shadow:0 6px 16px rgba(79,70,229,0.45); }

.fa-wa-icon-open, .fa-wa-icon-close{ transition:transform .32s cubic-bezier(.34,1.56,.64,1), opacity .18s ease; }
.fa-wa-icon-close{ display:none; }
.fa-wa-bubble-btn.open .fa-wa-icon-open{ display:none; transform:rotate(-90deg) scale(.5); opacity:0; }
.fa-wa-bubble-btn.open .fa-wa-icon-close{ display:block; }
.fa-wa-bubble-btn:not(.open) .fa-wa-icon-open{ animation:faWaIconIn .32s cubic-bezier(.34,1.56,.64,1); }
.fa-wa-bubble-btn.open .fa-wa-icon-close{ animation:faWaIconIn .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes faWaIconIn{
  0%{ transform:rotate(90deg) scale(.5); opacity:0; }
  100%{ transform:rotate(0deg) scale(1); opacity:1; }
}

@media (prefers-reduced-motion: no-preference){
  .fa-wa-bubble-btn:not(.open){ animation:faWaPulse 2.6s ease-in-out infinite; }
  .fa-wa-bubble-wrap:not(.is-open) .fa-wa-ring:nth-child(1){ animation:faWaRipple 2.6s ease-out infinite; }
  .fa-wa-bubble-wrap:not(.is-open) .fa-wa-ring:nth-child(2){ animation:faWaRipple 2.6s ease-out infinite 1.3s; }
  .fa-wa-bubble-wrap.fa-wa-entrance{ animation:faWaEntrance .6s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes faWaPulse{
  0%, 100%{ box-shadow:0 10px 28px rgba(79,70,229,0.4); }
  50%{ box-shadow:0 10px 28px rgba(79,70,229,0.7), 0 0 0 8px rgba(79,70,229,0.12); }
}
@keyframes faWaRipple{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
@keyframes faWaEntrance{
  0%{ transform:scale(0) rotate(-30deg); opacity:0; }
  60%{ transform:scale(1.15) rotate(8deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

.fa-wa-panel{
  position:absolute; bottom:72px; width:300px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:20px; box-shadow:0 20px 60px rgba(20,22,43,0.25);
  padding:18px; box-sizing:border-box;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.fa-wa-pos-right .fa-wa-panel{ right:0; }
.fa-wa-pos-left .fa-wa-panel{ left:0; }
.fa-wa-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.fa-wa-panel[hidden]{ display:block; } /* hidden attr toggled via JS, keep transition working */

.fa-wa-panel-header{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.fa-wa-avatar{
  width:40px; height:40px; border-radius:50%; background:#14162B; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0;
}
.fa-wa-titles{ display:flex; flex-direction:column; }
.fa-wa-title{ font-weight:700; font-size:.92rem; color:#14162B; }
.fa-wa-sub{ font-size:.78rem; color:#10B981; font-weight:600; }

.fa-wa-greeting{
  background:#F3F3F8; color:#3A3D5C; border-radius:14px; padding:10px 14px;
  font-size:.88rem; line-height:1.5; margin:0 0 14px;
}

.fa-wa-actions{ display:flex; flex-direction:column; gap:8px; }
.fa-wa-action{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  border:1px solid #E5E5F0; border-radius:12px; padding:10px 12px;
  font-size:.88rem; font-weight:600; color:#14162B;
  transition:border-color .15s ease, transform .15s ease;
}
.fa-wa-action:hover{ border-color:#4F46E5; transform:translateY(-1px); }
.fa-wa-action-icon{ display:flex; flex-shrink:0; }

@media (max-width:480px){
  .fa-wa-widget{ bottom:16px; }
  .fa-wa-pos-right{ right:16px; }
  .fa-wa-pos-left{ left:16px; }
}