/* Chat buttons — styles. Можно подключать отдельно или использовать только chat-button.js (стили встроены). */
@property --cur { syntax: '<color>'; inherits: true; initial-value: #fff; }
.cb  {
  --size: 72px;
  --bg: #fff; --bg-h: #111114;
  --fg: #111114; --fg-h: #111114;
  --cur: var(--bg);
  position: relative; box-sizing: border-box;
  width: var(--size); height: var(--size); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #111114; border-radius: 50%;
  background: var(--cur); color: var(--fg);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: --cur .3s, color .3s,
border-radius .5s cubic-bezier(.34,1.56,.64,1),
transform .5s cubic-bezier(.34,1.56,.64,1);
}

.cb:hover, .cb:focus-visible { --cur: var(--bg-h); color: var(--fg-h); }
.cb:focus-visible { outline: 2px solid #111114; outline-offset: 5px; }
.cb[class]:active { transform: scale(.95); }
.cb--circle { border-radius: 50%; }
.cb--square { border-radius: calc(var(--size) * .32); }
.cb--bubble { border-radius: calc(var(--size) * .32) calc(var(--size) * .32) calc(var(--size) * .32) calc(var(--size) * .09); }
.cb--blue { --bg: oklch(0.9 0.055 235); --bg-h: oklch(0.76 0.13 235); }
.cb--sage { --bg: oklch(0.9 0.06 165);  --bg-h: oklch(0.8 0.15 160); }
.cb--warm { --bg: oklch(0.91 0.008 90); --bg-h: oklch(0.82 0.13 70); }
.cb--mono { --bg: #fff; --bg-h: #111114; --fg-h: #fff; }
.cb--dialog:hover { transform: translateY(-3px); border-radius: calc(var(--size) * .32); }
.cb--morph:hover  { transform: rotate(-12deg) scale(1.08); }
.cb--voice:hover  { transform: scale(1.1); border-radius: 50%; }
.cb--ticker:hover { transform: translateY(-4px) rotate(4deg); border-radius: 50%; }
.cb--orbit:hover  { transform: scale(1.08); }
.cb--eyes:hover   { transform: rotate(8deg) translateY(-3px); border-radius: 50%; }
.cb--nudge:hover  { transform: scale(1.12) rotate(-6deg); }
.cb svg { display: block; overflow: visible; }
.cb__icon { width: 46%; height: 46%; }
.cb--dialog .cb__icon { width: 62%; height: 62%; }
.cb--voice  .cb__icon { width: 50%; height: 50%; }
.cb--eyes   .cb__icon { width: 54%; height: 54%; }
.cb__dot, .cb__bar, .cb__eye { transform-box: fill-box; transform-origin: center; }
.cb__bob  { animation: cb-bob 2.6s infinite ease-in-out; }
.cb__wave { fill: var(--cur); animation: cb-wave 1.3s infinite cubic-bezier(.45,0,.55,1); }
.cb__wave:nth-of-type(2) { animation-delay: .16s; }
.cb__wave:nth-of-type(3) { animation-delay: .32s; }
.cb__type { animation: cb-type 1.4s infinite ease-in-out; }
.cb__type:nth-of-type(2) { animation-delay: .18s; }
.cb__type:nth-of-type(3) { animation-delay: .36s; }
.cb__stack { position: relative; width: 46%; height: 46%; }
.cb__stack > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: cb-morph 6s infinite both; }
.cb__stack > svg:nth-child(2) { animation-delay: 2s; }
.cb__stack > svg:nth-child(3) { animation-delay: 4s; }
.cb__bar { transform: scaleY(.5); animation: cb-bar .8s infinite alternate ease-in-out; }
.cb__ticker { width: 46%; height: 46%; overflow: hidden; }
.cb__reel { display: flex; flex-direction: column; height: 500%; animation: cb-tick 7.5s infinite; }
.cb__reel > svg { flex: 0 0 20%; width: 100%; height: 20%; }
.cb__orbit  {
  position: absolute; inset: calc(var(--size) * -.14); border-radius: 50%;
  border: 1px dashed rgba(17,17,20,.4); pointer-events: none;
  animation: cb-spin 5s linear infinite;
}

.cb__orbit::before  {
  content: ''; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%; background: #111114;
}

.cb__eye  { fill: var(--cur); animation: cb-blink 4s infinite; }
.cb__look { animation: cb-look 5s infinite cubic-bezier(.6,0,.3,1); }
.cb__nudge { position: relative; width: 46%; height: 46%; transform-origin: 50% 80%; animation: cb-jiggle 4s infinite; }
.cb__nudge > svg { width: 100%; height: 100%; }
.cb__badge { position: absolute; top: -8%; right: -10%; width: 30%; height: 30%; border-radius: 50%; background: currentColor; transform: scale(0); animation: cb-pop 4s infinite; }
.cb__ripple { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #111114; opacity: 0; pointer-events: none; animation: cb-ripple 4s infinite ease-out; }
.cb__ripple + .cb__ripple { animation-delay: .35s; }
.cb__online { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; }
.cb--circle .cb__online { top: 3px; right: 3px; }
.cb__online::before, .cb__online::after { content: ''; position: absolute; border-radius: 50%; }
.cb__online::before { inset: -1px; border: 1.5px solid oklch(0.78 0.2 150); animation: cb-pulse 2s infinite ease-out; }
.cb__online::after  { inset: 0; box-sizing: border-box; background: oklch(0.78 0.2 150); border: 2px solid #111114; }
@keyframes cb-type   { 0%,60%,100% { transform: translateY(0); opacity: .3 } 30% { transform: translateY(-2.4px); opacity: 1 } }
@keyframes cb-wave   { 0%,70%,100% { transform: translateY(0) scale(.7); opacity: .55 } 35% { transform: translateY(-2.6px) scale(1.15); opacity: 1 } }
@keyframes cb-bob    { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-.7px,-.9px) } }
@keyframes cb-pulse  { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(2.2); opacity: 0 } }
@keyframes cb-morph  { 0% { opacity: 0; transform: scale(.3) rotate(-60deg); filter: blur(3px) } 6%,28% { opacity: 1; transform: none; filter: blur(0) } 34%,100% { opacity: 0; transform: scale(1.5) rotate(40deg); filter: blur(3px) } }
@keyframes cb-tick   { 18%,43%,68%,93% { animation-timing-function: cubic-bezier(.7,-.45,.3,1.45) } 0%,18% { transform: translateY(0) } 25%,43% { transform: translateY(-20%) } 50%,68% { transform: translateY(-40%) } 75%,93% { transform: translateY(-60%) } 100% { transform: translateY(-80%) } }
@keyframes cb-bar    { 0% { transform: scaleY(.25) } 100% { transform: scaleY(1) } }
@keyframes cb-spin   { to { transform: rotate(360deg) } }
@keyframes cb-blink  { 0%,44%,50%,90%,94%,100% { transform: scaleY(1) } 47%,92% { transform: scaleY(.1) } }
@keyframes cb-look   { 0%,18%,100% { transform: translate(0,0) } 25%,43% { transform: translate(-2.2px,0) } 50%,68% { transform: translate(2.2px,-.6px) } 75%,93% { transform: translate(0,.8px) } }
@keyframes cb-jiggle { 0%,24%,100% { transform: rotate(0) } 4% { transform: rotate(-16deg) } 8% { transform: rotate(13deg) } 12% { transform: rotate(-9deg) } 16% { transform: rotate(5deg) } 20% { transform: rotate(-2deg) } }
@keyframes cb-pop    { 0%,5% { transform: scale(0) } 11% { transform: scale(1.35) } 15%,86% { transform: scale(1) } 92%,100% { transform: scale(0) } }
@keyframes cb-ripple { 0% { transform: scale(1); opacity: .7 } 35%,100% { transform: scale(1.5); opacity: 0 } }
.cb--lilac { --bg: oklch(0.89 0.07 300); --bg-h: oklch(0.74 0.16 300); }
.cb--peach { --bg: oklch(0.92 0.06 45);  --bg-h: oklch(0.77 0.15 40); }
.cb--lime  { --bg: oklch(0.95 0.1 118);  --bg-h: oklch(0.87 0.19 125); }
.cb--magnet:hover { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1.08); }
.cb__mag { width: 50%; height: 50%; transform: translate(calc(var(--mx, 0px) * .7), calc(var(--my, 0px) * .7)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cb__mag > svg { width: 100%; height: 100%; transform-origin: 50% 90%; animation: cb-squash 3.2s infinite; }
.cb__rays { position: absolute; inset: 0; pointer-events: none; }
.cb__rays i { position: absolute; left: 50%; top: 50%; width: 2px; height: 9px; margin: -4.5px 0 0 -1px; border-radius: 2px; background: #111114; opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--size) * -.62)) scaleY(0); }
.cb--magnet:hover .cb__rays i { animation: cb-ray .7s cubic-bezier(.2,.8,.2,1) both; }
.cb--duo:hover { transform: rotate(-5deg) scale(1.07); border-radius: calc(var(--size) * .42); }
.cb--duo .cb__icon { width: 62%; height: 62%; }
.cb__hl, .cb__hr, .cb__l, .cb__r { transform-box: fill-box; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.cb__l { transform-origin: 0% 100%; animation: cb-duo-l 4.4s infinite; }
.cb__r { transform-origin: 100% 100%; animation: cb-duo-r 4.4s infinite; }
.cb__r path { fill: currentColor; stroke: var(--cur); stroke-width: 2.5; paint-order: stroke; }
.cb__r circle { fill: var(--cur); }
.cb--duo:hover .cb__hl { transform: translate(-2.5px, -1.5px) rotate(-10deg); }
.cb--duo:hover .cb__hr { transform: translate(2px, 1.5px) rotate(6deg); }
.cb--liquid { animation: cb-blob 7s ease-in-out infinite; }
.cb--liquid:hover { --cur: var(--bg); transform: scale(1.07); }
.cb__liquid { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cb__fill { position: absolute; left: -50%; top: 74%; width: 200%; height: 200%; border-radius: 42%; background: var(--bg-h); animation: cb-spin 5s linear infinite; transition: top .9s cubic-bezier(.3,1.35,.5,1); }
.cb--liquid:hover .cb__fill { top: 4%; }
.cb--liquid .cb__icon { position: relative; }
@keyframes cb-squash { 0%,68%,100% { transform: none } 74% { transform: scale(1.14,.86) } 80% { transform: scale(.9,1.12) translateY(-3px) } 86% { transform: scale(1.05,.95) } 92% { transform: none } }
@keyframes cb-ray { 0% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--size) * -.55)) scaleY(0) } 45% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--size) * -.68)) scaleY(1) } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--size) * -.8)) scaleY(0) } }
@keyframes cb-duo-l { 0% { transform: scale(0); opacity: 0 } 8% { transform: scale(1.15); opacity: 1 } 12%,84% { transform: scale(1); opacity: 1 } 94%,100% { transform: scale(0); opacity: 0 } }
@keyframes cb-duo-r { 0%,22% { transform: scale(0); opacity: 0 } 30% { transform: scale(1.12); opacity: 1 } 34%,84% { transform: scale(1); opacity: 1 } 94%,100% { transform: scale(0); opacity: 0 } }
@keyframes cb-blob { 0%,100% { border-radius: 58% 42% 50% 50% / 50% 55% 45% 50% } 33% { border-radius: 45% 55% 42% 58% / 58% 45% 55% 42% } 66% { border-radius: 52% 48% 60% 40% / 44% 58% 42% 56% } }
/* ===== Series 5 · Glass ===== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cb--glassy {
  --bg: rgba(255,255,255,.22); --bg-h: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px) saturate(190%); backdrop-filter: blur(14px) saturate(190%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -10px 18px -10px rgba(255,255,255,.6);
  isolation: isolate;
}
.cb--gclear { --bg: rgba(255,255,255,.2);  --bg-h: rgba(255,255,255,.55); }
.cb--gsky   { --bg: oklch(0.86 0.09 230 / .32); --bg-h: oklch(0.88 0.1 230 / .62); }
.cb--grose  { --bg: oklch(0.86 0.08 15 / .32);  --bg-h: oklch(0.88 0.09 15 / .62); }
.cb--gmint  { --bg: oklch(0.9 0.09 170 / .32);  --bg-h: oklch(0.92 0.1 170 / .62); }
.cb__spec { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.cb__spec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--px, 30%) var(--py, 18%), rgba(255,255,255,.9), rgba(255,255,255,0) 42%); opacity: .55; transition: opacity .3s; }
.cb__spec::after { content: ''; position: absolute; left: 12%; right: 12%; top: 4%; height: 38%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.cb--glassy:hover .cb__spec::before { opacity: 1; }
.cb--glassy .cb__icon, .cb--glassy .cb__stack, .cb--glassy .cb__ticker { position: relative; z-index: 1; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }

/* 5A Glass — стекло с бликом за курсором */
.cb--glass:hover { transform: scale(1.1); animation: cb-jelly .7s both; }
.cb--glass:hover .cb__icon { transform: translate(calc((var(--px, 50%) - 50%) * .12), calc((var(--py, 50%) - 50%) * .12)) scale(1.08); }

/* 5B Pulse Glass — стеклянные волны */
.cb__gring { position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; border: 1.5px solid rgba(17,17,20,.35); background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(5px) saturate(160%); backdrop-filter: blur(5px) saturate(160%); box-shadow: inset 0 1px 1px rgba(255,255,255,.9); opacity: 0; animation: cb-gpulse 3s infinite cubic-bezier(.2,.7,.3,1); }
.cb__gring + .cb__gring { animation-delay: 1s; }
.cb__gring + .cb__gring + .cb__gring { animation-delay: 2s; }
.cb--pulse .cb__stack { animation: cb-breathe 3s infinite ease-in-out; }
.cb--pulse:hover { transform: scale(1.12); }
.cb--pulse:hover .cb__gring { animation-duration: 1.2s; border-color: rgba(17,17,20,.55); }

/* 5C Prism — радужная кромка + световой блик */
.cb__prism { position: absolute; inset: 3px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--ang), oklch(0.82 0.16 20), oklch(0.9 0.16 90), oklch(0.86 0.16 160), oklch(0.8 0.15 250), oklch(0.8 0.16 320), oklch(0.82 0.16 20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75; animation: cb-ang 6s linear infinite; transition: opacity .3s, inset .5s cubic-bezier(.34,1.56,.64,1); }
.cb__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.cb__sheen::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; left: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); transform: translateX(-160%) skewX(-20deg); animation: cb-sheen 4.5s infinite cubic-bezier(.6,0,.2,1); }
.cb--prism:hover { transform: rotate(-6deg) scale(1.08); border-radius: calc(var(--size) * .42); }
.cb--prism:hover .cb__prism { opacity: 1; inset: 1px; animation-duration: 1.6s; }
.cb--prism:hover .cb__sheen::before { animation: cb-sheen-h .8s cubic-bezier(.4,0,.2,1) both; }




/* ═══════════════════════════════════════════════════════════
   ONLINE / STATUS indicator — кружок статуса оператора
   Цвета: online=зелёный, away=жёлтый, busy=красный, offline=серый
   Пульсация — только у online.
   ═══════════════════════════════════════════════════════════ */
.cb__online { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; }
.cb--circle .cb__online { top: 3px; right: 3px; }
.cb__online::before, .cb__online::after { content: ''; position: absolute; border-radius: 50%; }
.cb__online::after  { inset: 0; box-sizing: border-box; border: 2px solid #111114; }

/* ─── online ─── */
.cb__online[data-status="online"]::after { background: #22c55e; }
.cb__online[data-status="online"]::before {
  inset: -1px;
  border: 1.5px solid #22c55e;
  animation: cb-pulse 2s infinite ease-out;
}

/* ─── away ─── */
.cb__online[data-status="away"]::after { background: #f59e0b; }
.cb__online[data-status="away"]::before { display: none; }

/* ─── busy ─── */
.cb__online[data-status="busy"]::after { background: #ef4444; }
.cb__online[data-status="busy"]::before { display: none; }

/* ─── offline ─── */
.cb__online[data-status="offline"]::after { background: #94a3b8; }
.cb__online[data-status="offline"]::before { display: none; }

/* ─── дефолт (если data-status не установлен) ─── */
.cb__online:not([data-status])::after { background: #22c55e; }
.cb__online:not([data-status])::before {
  inset: -1px;
  border: 1.5px solid #22c55e;
  animation: cb-pulse 2s infinite ease-out;
}



@keyframes cb-jelly { 0% { transform: scale(1) } 30% { transform: scale(1.16,.9) } 50% { transform: scale(.96,1.12) } 70% { transform: scale(1.12,1.04) } 100% { transform: scale(1.1) } }
@keyframes cb-gpulse { 0% { transform: scale(1); opacity: .95 } 100% { transform: scale(1.9); opacity: 0 } }
@keyframes cb-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes cb-ang { to { --ang: 360deg } }
@keyframes cb-sheen { 0%,55% { transform: translateX(-160%) skewX(-20deg) } 80%,100% { transform: translateX(420%) skewX(-20deg) } }
@keyframes cb-sheen-h { from { transform: translateX(-160%) skewX(-20deg) } to { transform: translateX(420%) skewX(-20deg) } }

@media (prefers-reduced-motion: reduce)  {
  .cb *, .cb *::before, .cb--liquid, .cb--glass:hover { animation: none !important; }
.cb__stack > svg:first-child { opacity: 1; }
.cb__badge { transform: scale(1); }
}


@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before { animation: none !important; }
  .cb__stack > svg:first-child { opacity: 1; }
  .cb__badge { transform: scale(1); }
  .cb__online::before { animation: none; opacity: .6; }
}