#ccw{position:fixed;bottom:24px;z-index:99999;--s:56px;font-family:inherit}
#ccw.ccw-right{right:24px}#ccw.ccw-left{left:24px}
#ccw ul{list-style:none;margin:0;padding:0}
#ccw *{box-sizing:border-box}
#ccw svg{width:100%;height:100%;display:block}

/* Главная кнопка */
#ccw .ccw-main{position:relative;isolation:isolate;width:var(--s);height:var(--s);border-radius:50%;border:0;background:var(--ccw);cursor:pointer;padding:0;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .2s;animation:ccw-shake 6s ease-in-out infinite 3s}
#ccw .ccw-main:hover{transform:scale(1.08)}
#ccw .ccw-main::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ccw);z-index:-1;animation:ccw-ring 2.4s ease-out infinite}
#ccw.open .ccw-main,#ccw.open .ccw-main::before{animation:none}
@keyframes ccw-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@keyframes ccw-shake{0%,88%,100%{transform:none}90%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}94%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}98%{transform:rotate(-3deg)}}

/* Крутящиеся иконки */
#ccw .ccw-slides{position:absolute;inset:0;transition:opacity .3s,transform .4s}
#ccw .ccw-slide{position:absolute;inset:15px;opacity:0;transform:rotate(-200deg) scale(.2);transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s}
#ccw .ccw-slide.on{opacity:1;transform:none}
#ccw .ccw-slide.out{opacity:0;transform:rotate(200deg) scale(.2)}
#ccw .ccw-x{position:absolute;inset:16px;opacity:0;transform:rotate(-90deg) scale(.4);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s}
#ccw.open .ccw-slides{opacity:0;transform:rotate(90deg) scale(.4)}
#ccw.open .ccw-x{opacity:1;transform:none}

/* Каналы */
#ccw .ccw-items{position:absolute;bottom:calc(var(--s) + 14px);display:flex;flex-direction:column;gap:12px;pointer-events:none}
#ccw.ccw-right .ccw-items{right:0;align-items:flex-end}
#ccw.ccw-left .ccw-items{left:0;align-items:flex-start}
#ccw.open .ccw-items{pointer-events:auto}
#ccw .ccw-item{position:relative;opacity:0;transform:translateY(24px) scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);transition-delay:0s}
#ccw.open .ccw-item{opacity:1;transform:none;transition-delay:calc(var(--i) * 45ms)}
#ccw .ccw-item a{display:block;text-decoration:none}
#ccw .ccw-ico{width:var(--s);height:var(--s);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:15px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s}
#ccw .ccw-item a:hover .ccw-ico{transform:scale(1.12) rotate(8deg)}
#ccw .ccw-label{position:absolute;top:50%;transform:translateY(-50%) scale(.9);background:#fff;color:#222;font-size:13px;line-height:1;padding:8px 12px;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.18);white-space:nowrap;opacity:0;pointer-events:none;transition:.2s}
#ccw.ccw-left .ccw-label{left:calc(100% + 10px)}
#ccw.ccw-right .ccw-label{right:calc(100% + 10px)}
#ccw .ccw-item a:hover .ccw-label{opacity:1;transform:translateY(-50%)}

/* Подсказка */
#ccw .ccw-bubble{position:absolute;bottom:10px;background:#fff;color:#333;font-size:15px;line-height:1;padding:11px 16px;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.18);white-space:nowrap;opacity:0;transform:scale(.8);transition:.35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
#ccw.ccw-left .ccw-bubble{left:calc(var(--s) + 12px);transform-origin:left center}
#ccw.ccw-right .ccw-bubble{right:calc(var(--s) + 12px);transform-origin:right center}
#ccw .ccw-bubble.show{opacity:1;transform:none}

@media(min-width:769px){#ccw .ccw-no-d{display:none!important}}
@media(max-width:768px){#ccw .ccw-no-m{display:none!important}#ccw{--s:52px}}
@media(prefers-reduced-motion:reduce){#ccw *,#ccw *::before{animation:none!important;transition:none!important}}
#ccw .ccw-ico img.ccw-img{display:block}
#ccw .ccw-slide img.ccw-img{width:100%;height:100%;object-fit:contain;display:block}

/* Подпись кнопки закрытия (при наведении, когда виджет открыт) */
#ccw .ccw-close-label{position:absolute;bottom:calc((var(--s) - 30px) / 2);background:#fff;color:#222;font-size:13px;line-height:1;padding:8px 12px;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.18);white-space:nowrap;opacity:0;transform:scale(.9);pointer-events:none;transition:.2s}
#ccw.ccw-left .ccw-close-label{left:calc(var(--s) + 10px);transform-origin:left center}
#ccw.ccw-right .ccw-close-label{right:calc(var(--s) + 10px);transform-origin:right center}
#ccw.open .ccw-main:hover ~ .ccw-close-label{opacity:1;transform:none}