.mw{
  --mw-main:#AE816D;        /* основной цвет Эммаклиник */
  --mw-hover:#966B58;       /* он же, темнее */
  --mw-ink:#3F2E26;         /* тёмно-коричневый для подсказок */
  --mw-focus:#E2CDC3;       /* светлый для обводки */
  position:fixed;
  right:calc(20px + env(safe-area-inset-right, 0px));
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:9999;
  width:60px;height:60px;
}

/* Главная кнопка */
.mw-btn{
  position:relative;z-index:2;
  width:60px;height:60px;border:0;border-radius:50%;padding:0;
  background:var(--mw-main);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(63,46,38,.25);
  transition:transform .25s ease, background .2s ease;
}
.mw-btn:hover{transform:scale(1.05);background:var(--mw-hover)}
.mw-btn:focus-visible{outline:3px solid var(--mw-focus);outline-offset:3px}
.mw-ico-close{display:none}
.mw.is-open .mw-btn{transform:rotate(90deg)}
.mw.is-open .mw-ico-open{display:none}
.mw.is-open .mw-ico-close{display:block}

/* Иконки мессенджеров: в закрытом состоянии спрятаны за кнопкой */
.mw-item{
  position:absolute;left:6px;top:6px;z-index:1;
  width:48px;height:48px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;text-decoration:none;
  box-shadow:0 6px 16px rgba(63,46,38,.2);
  opacity:0;visibility:hidden;
  transform:translate(0,0) scale(.4);
  transition:
    transform .3s cubic-bezier(.34,1.45,.64,1) calc(var(--i) * 40ms),
    opacity .2s ease calc(var(--i) * 40ms),
    visibility 0s linear .35s;
}
.mw.is-open .mw-item{
  opacity:1;visibility:visible;
  transform:translate(var(--x),var(--y)) scale(1);
  transition:
    transform .3s cubic-bezier(.34,1.45,.64,1) calc(var(--i) * 40ms),
    opacity .2s ease calc(var(--i) * 40ms),
    visibility 0s;
}
.mw-item:hover{filter:brightness(1.08)}
.mw-item:focus-visible{outline:3px solid var(--mw-focus);outline-offset:2px}
.mw-item .fa{color:#fff;line-height:1}

/* Дуга из трёх иконок: радиус 100px, от «слева» до «сверху» */
.mw-tg {--x:-100px;--y:0;      background:#229ED9}
.mw-max{--x:-71px; --y:-71px}
.mw-vk {--x:0;     --y:-100px; background:#0077FF}
.mw-max img{width:100%;height:100%;display:block;object-fit:cover}

/* Подписи при наведении (только на устройствах с мышью) */
@media (hover:hover){
  .mw-item{overflow:visible}
  .mw-max img{border-radius:50%}
  .mw-item::after{
    content:attr(data-label);
    position:absolute;right:calc(100% + 8px);top:50%;
    transform:translateY(-50%);
    padding:4px 9px;border-radius:6px;
    background:var(--mw-ink);color:#fff;
    font-size:13px;line-height:1.3;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s;
  }
  .mw-item:hover::after,.mw-item:focus-visible::after{opacity:1}
}

@media (max-width:480px){
  .mw{right:calc(14px + env(safe-area-inset-right, 0px));bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}

@media (prefers-reduced-motion:reduce){
  .mw-btn,.mw-item,.mw.is-open .mw-item{transition:none}
  .mw.is-open .mw-btn{transform:none}
}