:root {
  --woc-green: #25d366;
  --woc-dark-green: #128c7e;
  --woc-ink: #102b26;
}

.woc-widget,
.woc-widget * {
  box-sizing: border-box;
}

.woc-widget {
  position: fixed;
  z-index: 2147483000;
  bottom: 24px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3;
}

.woc-position-right { right: 24px; }
.woc-position-left { left: 24px; }

.woc-toggle {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--woc-green);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 14px 35px rgba(37, 211, 102, .38);
  transition: transform .35s ease, box-shadow .35s ease, background .25s ease;
  animation: wocFloat 3.2s ease-in-out infinite;
}

.woc-toggle:hover,
.woc-toggle:focus-visible {
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 18px 42px rgba(37, 211, 102, .5);
  outline: none;
}

.woc-toggle > svg {
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 2;
}

.woc-toggle::before,
.woc-toggle::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(37, 211, 102, .55);
  border-radius: 50%;
  animation: wocHaloPulse 2.4s ease-out infinite;
  pointer-events: none;
}

.woc-toggle::after { animation-delay: 1.2s; }

.woc-orbit {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
}

.woc-orbit::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 4px;
  left: 50%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.95);
}

.woc-orbit-one { animation: wocOrbit 5s linear infinite; }
.woc-orbit-two { inset: -16px; opacity: .65; animation: wocOrbitReverse 7s linear infinite; }

.woc-badge {
  width: 22px;
  height: 22px;
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 3;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ff4d5e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  animation: wocNotificationBounce 2s ease-in-out infinite;
}

.woc-card {
  width: 310px;
  padding: 20px;
  position: absolute;
  bottom: 82px;
  border-radius: 22px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.92);
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}

.woc-position-right .woc-card { right: 0; transform-origin: bottom right; }
.woc-position-left .woc-card { left: 0; transform-origin: bottom left; }

.woc-card::before {
  content: "";
  width: 180px;
  height: 180px;
  position: absolute;
  top: -95px;
  right: -75px;
  border-radius: 50%;
  background: rgba(37,211,102,.11);
}

.woc-widget.woc-open .woc-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.woc-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.woc-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--woc-green), var(--woc-dark-green));
  box-shadow: 0 8px 20px rgba(37,211,102,.3);
}

.woc-avatar svg { width: 28px; height: 28px; }
.woc-heading { min-width: 0; }
.woc-heading strong { display: block; margin: 0 0 4px; color: var(--woc-ink); font-size: 16px; line-height: 1.2; }
.woc-heading span { display: flex; gap: 5px; align-items: center; color: #73817d; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woc-heading i { width: 8px; height: 8px; flex: 0 0 8px; display: inline-block; border-radius: 50%; background: var(--woc-green); box-shadow: 0 0 0 4px rgba(37,211,102,.14); }

.woc-message {
  position: relative;
  z-index: 1;
  margin: 20px 0 16px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 16px 16px 16px 4px;
  background: #f4fbf7;
  animation: wocMessageReveal .6s ease both;
}

.woc-message p { margin: 0; color: #42514d; font-size: 14px; line-height: 1.45; }
.woc-wave { display: inline-block; animation: wocWave 1.7s ease-in-out infinite; transform-origin: 70% 70%; }

.woc-start {
  width: 100%;
  padding: 14px 16px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 14px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--woc-green), var(--woc-dark-green));
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
}

.woc-start::before {
  content: "";
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -120%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.woc-start:hover,
.woc-start:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(18,140,126,.28); outline: none; }
.woc-start:hover::before { left: 130%; }
.woc-arrow { font-size: 20px; line-height: 1; transition: transform .25s ease; }
.woc-start:hover .woc-arrow { transform: translate(3px,-3px); }

.woc-close {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 12px;
  background: transparent;
  color: #75807d;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.woc-close:hover,
.woc-close:focus-visible { color: var(--woc-ink); outline: none; }

@keyframes wocFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes wocHaloPulse { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.42); opacity: 0; } }
@keyframes wocOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes wocOrbitReverse { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes wocNotificationBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes wocWave { 0%,100% { transform: rotate(0); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(15deg); } }
@keyframes wocMessageReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
  .woc-widget { bottom: 16px; }
  .woc-position-right { right: 16px; }
  .woc-position-left { left: 16px; }
  .woc-card { width: min(310px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  .woc-widget *, .woc-widget *::before, .woc-widget *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}