:root{
  --mf-pill-bg: rgba(0,119,255,.82); /* как у кнопок */
  --mf-pill-text: rgba(255,255,255,.96);
  --mf-pill-muted: rgba(255,255,255,.86);
  --mf-pill-radius: 16px;

  /* плотность белого ripple (0.30 = 30%) */
  --mf-ripple-alpha: .30;
}

.mf-pill{
  position: fixed;
  right: 50px;
  bottom: 35px;
  z-index: 9999;
  pointer-events: auto;
}

.mf-pill__a{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 5px 30px 5px 15px; /* top/right/bottom/left */
  border-radius: 12px;

  background: var(--mf-pill-bg);
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  backdrop-filter: blur(10px);
  text-decoration:none !important;

  color: var(--mf-pill-text) !important;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select:none;

  overflow: hidden;   /* важно для ripple */
  isolation: isolate; /* как в архиве */
}

/* убрать “темный ховер/тень/обводку” темы */
.mf-pill__a:hover,
.mf-pill__a:focus,
.mf-pill__a:active{
  color: var(--mf-pill-text) !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  filter: none !important;
}

/* ИКОНКА: без фона и обводки */
.mf-pill__ic{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display:grid;
  place-items:center;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  color: var(--mf-pill-text);
}

.mf-pill__ic svg{
  width: 20px;
  height: 20px;
  display:block;
  color: var(--mf-pill-text);
}

.mf-pill__ic img{
  width: 20px;
  height: 20px;
  display:block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .96;
}

.mf-pill__t{
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.mf-pill__title{
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
}

.mf-pill__sub{
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--mf-pill-muted);
  white-space: nowrap;
}

/* ===== RIPPLE 1:1 как в архиве ===== */
.mf-pill__a::after{
  content:"";
  position:absolute;

  /* точка старта задаётся JS */
  left: var(--px, 50%);
  top:  var(--py, 50%);

  width: 20px;
  height: 20px;
  border-radius: 999px;

  background: rgba(255,255,255,var(--mf-ripple-alpha));
  pointer-events: none;

  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
}

.mf-pill__a.is-rippling::after{
  animation: accentRipple .85s ease-out; /* как в архиве */
}

@keyframes accentRipple{
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(var(--ripple-scale, 30)); opacity: 0; }
}

/* мобилка */
@media (max-width: 560px){
  .mf-pill{ right: 16px; bottom: 16px; }
  .mf-pill__a{ padding: 6px 18px 6px 12px; border-radius: 14px; gap:10px; }
  .mf-pill__ic{ width: 40px; height: 40px; flex: 0 0 40px; }
  .mf-pill__title{ font-size: 13px; }
  .mf-pill__sub{ font-size: 11px; }
}