.messenger-fab{
  position: fixed;
  right: 42px;
  bottom: 42px;
  z-index: 9999;
  width: 64px;
  height: 64px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Main button */
.messenger-fab__btn{
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
background: #f26832;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.messenger-fab__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.messenger-fab__btn:active{
  transform: translateY(0);
  filter: brightness(.95);
}

/* Icons inside main button */
.messenger-fab__icon{
  position: absolute;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transition: opacity .18s ease, transform .18s ease;
}
.messenger-fab__icon svg{ width: 28px; height: 28px; fill: currentColor; }
.messenger-fab__icon--close{ opacity: 0; transform: scale(.8) rotate(-10deg); }

.messenger-fab.is-open .messenger-fab__icon--open{ opacity: 0; transform: scale(.85) rotate(10deg); }
.messenger-fab.is-open .messenger-fab__icon--close{ opacity: 1; transform: scale(1) rotate(0); }

/* Pulses */
.messenger-fab__pulse{
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(227, 109, 62, .35);
  animation: fabPulse 1.8s ease-out infinite;
  pointer-events: none;
}
.messenger-fab__pulse--2{
  inset: -18px;
  animation-delay: .6s;
 border-color: rgb(227 109 62);
}
@keyframes fabPulse{
  0%   { transform: scale(.75); opacity: .0; }
  25%  { opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}
.messenger-fab.is-open .messenger-fab__pulse{ opacity: 0; animation: none; }

/* Menu */
.messenger-fab__menu{
  position: absolute;
  right: 6px;
  bottom: 74px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease;
}
.messenger-fab.is-open .messenger-fab__menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Menu items */
.messenger-fab__item{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease;
  position: relative;
  overflow: hidden;
}

.messenger-fab__item svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.messenger-fab__item:hover{
	filter: brightness(.90);
}
.messenger-fab__item::before{
  content:"";
  display:none;
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  transform: rotate(25deg);
}

/* Brand colors */
.messenger-fab__item--wa{ background: linear-gradient(135deg, #25D366, #128C7E); }
.messenger-fab__item--tg{ background:  #229ED9; }
.messenger-fab__item--max{ background: #161f8a; }
.messenger-fab__item--vb{ background: linear-gradient(135deg, #7c4dff, #5b2cff); }
.messenger-fab__item--max svg{width:20px; height:20px;}
/* Little stagger animation */
.messenger-fab.is-open .messenger-fab__item{
  animation: popIn .22s ease both;
}
.messenger-fab.is-open .messenger-fab__item:nth-child(2){ animation-delay: .04s; }
.messenger-fab.is-open .messenger-fab__item:nth-child(3){ animation-delay: .08s; }
@keyframes popIn{
  from { transform: translateY(8px) scale(.92); opacity: .0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Mobile safe-area (iPhone) */
@supports (padding: env(safe-area-inset-bottom)){
  .messenger-fab{
    right: calc(42px + env(safe-area-inset-right));
    bottom: calc(42px + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 767px) {
	.messenger-fab{
		right: calc(22px + env(safe-area-inset-right));
		bottom: calc(22px + env(safe-area-inset-bottom));
	  }
}