:root {
  --contact-float-blue: #3677b4;
  --contact-float-blue-hover: #2f6da7;
  --contact-wechat-green: #04ad0f;
  --contact-whatsapp-green: #189c0e;
}

.wechat-float,
.whatsapp {
  right: 22px;
  width: 100px;
  min-width: 100px;
  height: 99px;
  min-height: 99px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  box-shadow: 0 10px 28px rgba(16, 25, 37, .14);
}

.wechat-float { bottom: 134px; }
.whatsapp { bottom: 20px; }

.wechat-float span,
.whatsapp span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
}

.wechat-float span { width: 66px; height: 55px; }
.whatsapp span { width: 61px; height: 61px; }

.wechat-float span::before,
.whatsapp span::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wechat-float span::before {
  color: var(--contact-wechat-green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M8.6 0C3.85 0 0 2.95 0 6.6c0 2.02 1.18 3.85 3.03 5.06l-.76 2.28 2.77-1.25c1.08.34 2.28.52 3.56.52.35 0 .69-.02 1.02-.04a5.2 5.2 0 0 1-.35-1.86c0-3.38 3.22-6.12 7.2-6.12.22 0 .44.01.65.03C16.31 2.23 12.88 0 8.6 0Zm-2.9 6.1c-.6 0-1.08-.45-1.08-1s.48-1 1.08-1 1.08.45 1.08 1-.48 1-1.08 1Zm5.62 0c-.6 0-1.08-.45-1.08-1s.48-1 1.08-1 1.08.45 1.08 1-.48 1-1.08 1Z'/%3E%3Cpath d='M24 11.32c0-3.06-3.31-5.54-7.4-5.54s-7.4 2.48-7.4 5.54 3.31 5.54 7.4 5.54c.9 0 1.77-.12 2.56-.35L21.7 18l-.7-2.09c1.84-1.01 3-2.67 3-4.59Zm-9.75-.72c-.52 0-.95-.4-.95-.9s.43-.9.95-.9.95.4.95.9-.43.9-.95.9Zm4.7 0c-.52 0-.95-.4-.95-.9s.43-.9.95-.9.95.4.95.9-.43.9-.95.9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M8.6 0C3.85 0 0 2.95 0 6.6c0 2.02 1.18 3.85 3.03 5.06l-.76 2.28 2.77-1.25c1.08.34 2.28.52 3.56.52.35 0 .69-.02 1.02-.04a5.2 5.2 0 0 1-.35-1.86c0-3.38 3.22-6.12 7.2-6.12.22 0 .44.01.65.03C16.31 2.23 12.88 0 8.6 0Zm-2.9 6.1c-.6 0-1.08-.45-1.08-1s.48-1 1.08-1 1.08.45 1.08 1-.48 1-1.08 1Zm5.62 0c-.6 0-1.08-.45-1.08-1s.48-1 1.08-1 1.08.45 1.08 1-.48 1-1.08 1Z'/%3E%3Cpath d='M24 11.32c0-3.06-3.31-5.54-7.4-5.54s-7.4 2.48-7.4 5.54 3.31 5.54 7.4 5.54c.9 0 1.77-.12 2.56-.35L21.7 18l-.7-2.09c1.84-1.01 3-2.67 3-4.59Zm-9.75-.72c-.52 0-.95-.4-.95-.9s.43-.9.95-.9.95.4.95.9-.43.9-.95.9Zm4.7 0c-.52 0-.95-.4-.95-.9s.43-.9.95-.9.95.4.95.9-.43.9-.95.9Z'/%3E%3C/svg%3E");
}

.whatsapp span::before {
  color: var(--contact-whatsapp-green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5A10.35 10.35 0 0 0 3.08 17.1L1.5 22.5l5.55-1.46A10.47 10.47 0 1 0 12 1.5Zm0 18.57a8.11 8.11 0 0 1-4.13-1.13l-.3-.18-3.29.86.88-3.2-.2-.32A8.08 8.08 0 1 1 12 20.07Zm4.43-6.07c-.24-.12-1.44-.71-1.66-.79-.22-.08-.38-.12-.55.12-.16.24-.63.79-.77.95-.14.16-.28.18-.52.06-1.42-.71-2.35-1.27-3.29-2.88-.25-.42.25-.39.71-1.29.08-.16.04-.3-.02-.42l-.73-1.76c-.19-.46-.39-.4-.55-.41h-.46c-.16 0-.42.06-.65.3-.22.24-.85.83-.85 2.03s.87 2.36.99 2.52c.12.16 1.72 2.62 4.16 3.67 1.55.67 2.16.73 2.94.62.47-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5A10.35 10.35 0 0 0 3.08 17.1L1.5 22.5l5.55-1.46A10.47 10.47 0 1 0 12 1.5Zm0 18.57a8.11 8.11 0 0 1-4.13-1.13l-.3-.18-3.29.86.88-3.2-.2-.32A8.08 8.08 0 1 1 12 20.07Zm4.43-6.07c-.24-.12-1.44-.71-1.66-.79-.22-.08-.38-.12-.55.12-.16.24-.63.79-.77.95-.14.16-.28.18-.52.06-1.42-.71-2.35-1.27-3.29-2.88-.25-.42.25-.39.71-1.29.08-.16.04-.3-.02-.42l-.73-1.76c-.19-.46-.39-.4-.55-.41h-.46c-.16 0-.42.06-.65.3-.22.24-.85.83-.85 2.03s.87 2.36.99 2.52c.12.16 1.72 2.62 4.16 3.67 1.55.67 2.16.73 2.94.62.47-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
}

.wechat-float b,
.whatsapp b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wechat-float:hover,
.whatsapp:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 25, 37, .2);
}

.wechat-float:hover span::before { color: #039a0d; }
.whatsapp:hover span::before { color: #13860b; }

@media (max-width: 600px) {
  .wechat-float,
  .whatsapp {
    right: 13px;
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    padding: 0;
    border-radius: 6px;
    background: var(--contact-float-blue);
    color: #fff;
    box-shadow: 0 8px 22px rgba(32, 78, 121, .2);
  }

  .wechat-float { bottom: 82px; }
  .whatsapp { bottom: 13px; }

  .wechat-float span,
  .whatsapp span {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
    border-radius: 0;
    background: transparent;
  }

  .wechat-float span::before,
  .whatsapp span::before {
    width: 44px;
    height: 44px;
    background: #fff;
    color: #fff;
  }

  .wechat-float span::before {
    width: 46px;
    height: 40px;
  }

  .wechat-float b,
  .whatsapp b { display: none; }

  .wechat-float:hover,
  .whatsapp:hover {
    background: var(--contact-float-blue-hover);
    box-shadow: 0 8px 22px rgba(32, 78, 121, .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wechat-float,
  .whatsapp { transition: none; }
}