.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);
}
.chat-body .messages{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
}

/* Chat-Inhalt bleibt immer über dem Konfetti */
.chat-body .messages > *{
  position:relative;
  z-index:2;
}

/* Zwei leichte Konfetti-Ebenen */
.chat-body .messages::before,
.chat-body .messages::after{
  content:"";
  position:absolute;
  left:-8%;
  top:-120%;
  width:116%;
  height:220%;
  z-index:1;
  pointer-events:none;
  opacity:.68;
  will-change:transform;
  background-repeat:no-repeat;

  background-image:
    linear-gradient(25deg,#f1c45b 0 100%),
    linear-gradient(75deg,#d66cf2 0 100%),
    linear-gradient(15deg,#ff76bd 0 100%),
    linear-gradient(65deg,#ffd36b 0 100%),
    linear-gradient(35deg,#8d52d6 0 100%),
    linear-gradient(80deg,#f49cc8 0 100%),
    linear-gradient(20deg,#e8b94d 0 100%),
    linear-gradient(55deg,#ba65e8 0 100%),
    linear-gradient(10deg,#ff9bcf 0 100%),
    linear-gradient(70deg,#d7a83f 0 100%),
    linear-gradient(30deg,#9259d7 0 100%),
    linear-gradient(60deg,#f06eb5 0 100%),
    linear-gradient(18deg,#f5cf72 0 100%),
    linear-gradient(78deg,#c878e8 0 100%),
    linear-gradient(42deg,#ff87c5 0 100%),
    linear-gradient(72deg,#e5b84e 0 100%),
    linear-gradient(28deg,#a15cde 0 100%),
    linear-gradient(58deg,#f28abf 0 100%),
    linear-gradient(12deg,#ffd978 0 100%),
    linear-gradient(82deg,#bb6ee4 0 100%);

  background-size:
    7px 13px,
    6px 10px,
    8px 14px,
    5px 11px,
    7px 12px,
    6px 13px,
    8px 11px,
    5px 12px,
    7px 10px,
    6px 14px,
    8px 12px,
    5px 10px,
    7px 14px,
    6px 11px,
    8px 13px,
    5px 12px,
    7px 11px,
    6px 14px,
    8px 10px,
    5px 13px;

  background-position:
    4% 4%,
    11% 18%,
    17% 7%,
    23% 28%,
    29% 13%,
    34% 38%,
    41% 5%,
    47% 24%,
    52% 43%,
    58% 10%,
    63% 31%,
    69% 17%,
    74% 47%,
    79% 8%,
    84% 35%,
    89% 20%,
    94% 45%,
    8% 55%,
    37% 65%,
    72% 72%;

  animation:rtcBirthdayConfettiFall 13s linear infinite;
}

.chat-body .messages::after{
  opacity:.42;
  filter:blur(.15px);
  transform:translateY(-18%) rotate(3deg);
  animation-duration:18s;
  animation-delay:-7s;
}

@keyframes rtcBirthdayConfettiFall{
  0%{
    transform:translate3d(0,-18%,0) rotate(0deg);
  }
  50%{
    transform:translate3d(1.2%,28%,0) rotate(3deg);
  }
  100%{
    transform:translate3d(-1%,68%,0) rotate(7deg);
  }
}

/* Auf kleinen Displays etwas dezenter */
@media (max-width:760px){
  .chat-body .messages::before,
  .chat-body .messages::after{
    opacity:.42;
  }
  .chat-body .messages::after{
    opacity:.26;
  }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt statische Deko */
@media (prefers-reduced-motion:reduce){
  .chat-body .messages::before,
  .chat-body .messages::after{
    animation:none !important;
    transform:translateY(12%) !important;
  }
}