.chat-body .online-user {
  position: relative;
}

.chat-body .online-user::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;

  background-repeat: no-repeat;

  animation: rtcUserSparkle 2.2s steps(1,end) infinite;
}

@keyframes rtcUserSparkle {
  0% {
    background-image:
      radial-gradient(circle at 18% 30%, rgba(255,255,255,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 68% 24%, rgba(255,255,255,.8) 0 1px, transparent 2px);
  }

  50% {
    background-image:
      radial-gradient(circle at 40% 68%, rgba(255,255,255,.9) 0 1px, transparent 2px),
      radial-gradient(circle at 88% 70%, rgba(255,255,255,.75) 0 1px, transparent 2px);
  }

  100% {
    background-image:
      radial-gradient(circle at 18% 30%, rgba(255,255,255,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 68% 24%, rgba(255,255,255,.8) 0 1px, transparent 2px);
  }
}
.chat-body .online-user::before {
  box-shadow:
    inset 0 7px 12px rgba(0,0,0,.95),
    inset 0 -3px 4px rgba(255,255,255,.28);
}