/* m-lotos: кнопка чата «Живое кольцо» (вариант 4), 2026-09-24 */
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn{
  background:linear-gradient(160deg,#3d86e0,#1a4f96) !important;
  border:0 !important;
  box-shadow:0 14px 32px -8px rgba(19,63,128,.55) !important;
  overflow:visible !important;
}
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 18px 38px -8px rgba(19,63,128,.62) !important;
}
/* вращающееся светлое кольцо */
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn::before{
  content:"" !important;display:block !important;position:absolute !important;
  top:-5px !important;right:-5px !important;bottom:-5px !important;left:-5px !important;
  width:auto !important;height:auto !important;border-radius:50% !important;padding:3px !important;
  background:conic-gradient(from 0deg,#fff,#bcd7f7,#fff,#e2eefc,#fff) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:mlcb-spin 6s linear infinite;pointer-events:none;
}
/* мягкая волна раз в 4 секунды */
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn::after{
  content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(61,134,224,.45);animation:mlcb-halo 4s ease-out infinite;pointer-events:none;
}
/* значок */
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .bubble{
  display:block !important;position:static !important;width:34px !important;height:34px !important;
  border:0 !important;box-shadow:none !important;transform:none !important;
  background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><path d='M7 5.5h18a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H14.5L8.5 28v-4.5H7a4 4 0 0 1-4-4v-10a4 4 0 0 1 4-4Z' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='round'/><circle cx='11' cy='14.5' r='1.7' fill='%23ffffff'/><circle cx='16' cy='14.5' r='1.7' fill='%23ffffff'/><circle cx='21' cy='14.5' r='1.7' fill='%23ffffff'/></svg>") center/contain no-repeat !important;
}
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .bubble svg{display:none !important}
/* зелёная точка «на связи» */
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .bubble::after{
  content:"";position:absolute;right:1px;bottom:1px;width:16px;height:16px;border-radius:50%;
  background:#2fbf71;box-shadow:0 0 0 3px #fff;z-index:3;
}
/* цифра — только когда оператор действительно ответил (widget.js ставит display:block) */
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .badge:not([style*="block"]){display:none !important}
html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .badge{z-index:4}

@media (max-width:640px){
  html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .bubble{width:30px !important;height:30px !important}
  html body #ml-chat-btn#ml-chat-btn#ml-chat-btn .bubble::after{width:14px;height:14px;right:0;bottom:0}
}
@keyframes mlcb-spin{to{transform:rotate(360deg)}}
@keyframes mlcb-halo{0%,55%{box-shadow:0 0 0 0 rgba(61,134,224,.45)}100%{box-shadow:0 0 0 16px rgba(61,134,224,0)}}
@media (prefers-reduced-motion:reduce){
  html body #ml-chat-btn#ml-chat-btn#ml-chat-btn::before,
  html body #ml-chat-btn#ml-chat-btn#ml-chat-btn::after{animation:none}
}