.mfab{
  position: fixed;
  left: 14px;
  bottom: calc(50px + env(safe-area-inset-bottom));
  z-index: 99999;
}

.mfab__toggle{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: #111;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  -webkit-tap-highlight-color: transparent;
}

.mfab__toggle svg{ width: 62%; height: 62%; display:block; }

.mfab__menu{
  position: absolute;
  left: 0;
  bottom: 66px;
  display: grid;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  visibility: hidden;
  padding-left: 6px;
}

.mfab.is-open .mfab__menu{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.mfab__btn{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
  -webkit-tap-highlight-color: transparent;
}

.mfab__btn svg{ width: 62%; height: 62%; display:block; }

.mfab__btn.tg{ background:#27A7E7; }
.mfab__btn.wa{ background:#25D366; }
.mfab__btn.vb{ background:#7360F2; }

.mfab__btn:active,
.mfab__toggle:active{ transform: scale(.98); }

.mfab__btn:focus,
.mfab__toggle:focus{
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}







@media (max-width: 768px){
  .mfab__toggle{
    width: 48px;
    height: 48px;
  }

  .mfab__btn{
    width: 44px;
    height: 44px;
  }

  .mfab__menu{
    gap: 10px;
  }

  .mfab__toggle svg,
  .mfab__btn svg{
    width: 60%;
    height: 60%;
  }
}