/* Зелёный контур «онлайн» для аватаров: кольцо + блик-луч */

.avatar-online {
  --avatar-online-green: #22c55e;
  --avatar-online-beam: #bbf7d0;
  --avatar-online-glow: rgba(34, 197, 94, 0.45);
  position: relative;
  isolation: isolate;
  z-index: 0;
}

.user-avatar-wrapper.avatar-online,
.item-owner-avatar.avatar-online,
.avatar-placeholder-small.avatar-online,
.owner-avatar.avatar-online,
.profile-avatar.avatar-online,
.contact-avatar.avatar-online,
.favorite-user-avatar-wrap.avatar-online {
  overflow: visible;
}

/* Вращающийся луч по контуру */
.avatar-online::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 200deg,
    rgba(34, 197, 94, 0.15) 230deg,
    var(--avatar-online-green) 265deg,
    var(--avatar-online-beam) 295deg,
    var(--avatar-online-green) 325deg,
    rgba(34, 197, 94, 0.2) 350deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: avatar-online-beam-spin 2.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Стабильное свечение контура */
.avatar-online::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5px rgba(34, 197, 94, 0.88),
    0 0 10px var(--avatar-online-glow),
    0 0 18px rgba(134, 239, 172, 0.28);
  animation: avatar-online-glow-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.user-avatar-wrapper.avatar-online img,
.user-avatar-wrapper.avatar-online .avatar-placeholder,
.item-owner-avatar.avatar-online img,
.avatar-placeholder-small.avatar-online,
.owner-avatar.avatar-online img,
.owner-avatar.avatar-online .fa-user-circle,
.profile-avatar.avatar-online img,
.contact-avatar.avatar-online img,
.favorite-user-avatar-wrap.avatar-online img {
  position: relative;
  z-index: 0;
  border-radius: 50%;
}

/* В сообщениях кольцо заменяет зелёную точку */
.contact-avatar.avatar-online .online-indicator.online {
  display: none;
}

@keyframes avatar-online-beam-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes avatar-online-glow-pulse {
  0%,
  100% {
    opacity: 0.82;
    box-shadow:
      0 0 0 1.5px rgba(34, 197, 94, 0.75),
      0 0 8px rgba(34, 197, 94, 0.3),
      0 0 14px rgba(134, 239, 172, 0.2);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 0 2px rgba(34, 197, 94, 1),
      0 0 14px rgba(34, 197, 94, 0.55),
      0 0 22px rgba(134, 239, 172, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-online::before {
    animation: none;
    background: conic-gradient(
      from 45deg,
      var(--avatar-online-green) 0deg 90deg,
      var(--avatar-online-beam) 90deg 180deg,
      var(--avatar-online-green) 180deg 270deg,
      var(--avatar-online-beam) 270deg 360deg
    );
  }

  .avatar-online::after {
    animation: none;
    opacity: 1;
  }
}