/*
 * XCHAT_VIP_SHIMMER_FIX_V4
 *
 * The badge itself must never translate.
 * Only the ::after highlight moves.
 * Same presentation on desktop and mobile.
 */
/*
 * XCHAT_VIP_CANONICAL_V3
 * Single VIP presentation for desktop and mobile.
 * Extracted from the existing desktop live badge.
 * Original dimensions and shimmer timing preserved.
 */

.xc-live-vip,
.mobile-users-vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  min-width: 22px;
  height: 11px;
  margin-left: 4px;
  padding: 0 2px;
  border: 1px solid #8b6f00;
  background: #171200;
  color: #ffdf00;
  font: bold 8px/9px Verdana, Arial, sans-serif;
  flex: 0 0 22px;
  vertical-align: middle;
  text-shadow: 0 0 2px #6b5200;
}

.xc-live-vip,
.mobile-users-vip-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.xc-live-vip::after,
.mobile-users-vip-badge::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -4px;
  bottom: -4px;
  left: -9px;
  width: 6px;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,249,183,.18) 20%,
      rgba(255,255,255,.94) 50%,
      rgba(255,235,102,.30) 75%,
      rgba(255,255,255,0) 100%
    );

  opacity: 0;

  transform:
    translate3d(-9px, 0, 0)
    skewX(-17deg);

  animation:
    xchat-vip-badge-shimmer
    3.8s
    ease-in-out
    infinite;
}

@keyframes xchat-vip-badge-shimmer {
  0% {
    opacity: 0;
    transform: translate3d(-9px,0,0) skewX(-17deg);
  }
  10% {
    opacity: .9;
    transform: translate3d(-9px,0,0) skewX(-17deg);
  }
  38% {
    opacity: 1;
    transform: translate3d(34px,0,0) skewX(-17deg);
  }
  48% {
    opacity: .35;
    transform: translate3d(34px,0,0) skewX(-17deg);
  }
  57% {
    opacity: .9;
    transform: translate3d(34px,0,0) skewX(-17deg);
  }
  85% {
    opacity: 1;
    transform: translate3d(-9px,0,0) skewX(-17deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-9px,0,0) skewX(-17deg);
  }
}