/* JAKSKY LIVE BAR V4 COMPACT */
#jakLiveActivityToast,
#jakLiveBarV2,
#jakLiveBarV3{
  display:none!important;
}

.jakLiveBarV4{
  --p1:#ff3f98;
  --p2:#ff6fba;
  --pu:#9957ef;

  position:relative;
  isolation:isolate;
  overflow:hidden;

  margin:0 20px 12px;
  min-height:56px;
  padding:8px 10px;

  display:flex;
  align-items:center;
  gap:9px;

  border-radius:18px;
  border:1px solid rgba(255,84,168,.16);

  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,246,251,.92));

  box-shadow:
    0 9px 24px rgba(222,69,145,.10),
    inset 0 1px 0 rgba(255,255,255,.92);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jakLiveBarV4:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 3% 50%,rgba(255,58,150,.12),transparent 26%),
    radial-gradient(circle at 96% 50%,rgba(154,84,239,.10),transparent 24%);
}

.jakLiveBarV4:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  z-index:-1;
  background:linear-gradient(90deg,transparent,var(--p1),var(--pu),transparent);
  opacity:.55;
}

.jakLiveAccent{
  position:absolute;
  top:0;
  left:-25%;
  width:22%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-14deg);
  opacity:0;
}

.jakLiveBarV4.is-new .jakLiveAccent{
  animation:jakLiveSweepV4 .8s ease;
}

.jakLiveBadge{
  flex:0 0 auto;
  height:27px;
  padding:0 9px;
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:999px;

  color:#fff;
  background:linear-gradient(135deg,var(--p1),#ef42a5);

  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;

  box-shadow:0 5px 14px rgba(235,55,145,.22);
}

.jakLivePulse{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.16);
  animation:jakLivePulseV4 1.2s ease-in-out infinite;
}

.jakLiveAvatar{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;

  background:linear-gradient(145deg,#ffdceb,#eadcff);
  border:1px solid rgba(255,86,175,.15);

  color:#a62f74;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2px;

  box-shadow:
    0 5px 14px rgba(190,62,132,.10),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.jakLiveContent{
  flex:1 1 auto;
  min-width:0;
}

.jakLiveTop{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  overflow:hidden;
}

.jakLiveTop b{
  flex:0 1 auto;
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;

  color:#2c1c27;
  font-size:11.5px;
  font-weight:900;
}

.jakLiveAction{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;

  color:#7b5a6c;
  font-size:10px;
  font-weight:600;
}

.jakLiveBottom{
  margin-top:3px;
  display:flex;
  align-items:center;
  min-width:0;
  gap:4px;

  color:#e53c91;
  font-size:9.5px;
  font-weight:800;
}

.jakLiveGift{
  flex:0 0 auto;
  font-size:10px;
}

#jakLiveReward{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.jakLiveRight{
  flex:0 0 auto;
  min-width:42px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

#jakLiveTime{
  color:#e14893;
  font-size:8.8px;
  font-weight:900;
  white-space:nowrap;
}

.jakLiveSpark{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:50%;

  color:#fff;
  background:linear-gradient(135deg,var(--p2),var(--pu));
  box-shadow:0 5px 13px rgba(160,77,220,.20);
  font-size:9px;
}

.jakLiveBarV4.is-new{
  animation:jakLivePopV4 .34s cubic-bezier(.2,.8,.2,1.1);
}

.jakLiveBarV4.is-new .jakLiveSpark{
  animation:jakSparkV4 .6s ease;
}

@keyframes jakLivePulseV4{
  0%,100%{transform:scale(.82);opacity:.78}
  50%{transform:scale(1.12);opacity:1}
}

@keyframes jakLiveSweepV4{
  0%{left:-30%;opacity:0}
  15%{opacity:.85}
  100%{left:115%;opacity:0}
}

@keyframes jakLivePopV4{
  0%{transform:translateY(2px) scale(.99)}
  60%{transform:translateY(0) scale(1.008)}
  100%{transform:none}
}

@keyframes jakSparkV4{
  0%{transform:rotate(0) scale(.88)}
  45%{transform:rotate(18deg) scale(1.18)}
  100%{transform:rotate(0) scale(1)}
}

/* DARK MODE */
html[data-jak-theme="dark"] .jakLiveBarV4{
  background:
    linear-gradient(135deg,rgba(26,17,31,.96),rgba(16,11,22,.95));

  border-color:rgba(255,86,176,.16);

  box-shadow:
    0 12px 30px rgba(0,0,0,.36),
    0 0 22px rgba(153,84,239,.05);
}

html[data-jak-theme="dark"] .jakLiveTop b{color:#fff2fa}
html[data-jak-theme="dark"] .jakLiveAction{color:#c7aebd}
html[data-jak-theme="dark"] .jakLiveBottom{color:#ff75ba}
html[data-jak-theme="dark"] #jakLiveTime{color:#ff75ba}
html[data-jak-theme="dark"] .jakLiveAvatar{
  background:linear-gradient(145deg,#321a2a,#24182f);
  color:#ff82c4;
  border-color:rgba(255,89,179,.15);
}

@media(max-width:600px){
  .jakLiveBarV4{
    margin:0 20px 12px;
    min-height:54px;
    padding:8px 9px;
    gap:8px;
    border-radius:17px;
  }

  .jakLiveBadge{
    height:25px;
    padding:0 8px;
    font-size:8.5px;
  }

  .jakLiveAvatar{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:9.5px;
  }

  .jakLiveTop b{
    font-size:11px;
    max-width:44%;
  }

  .jakLiveAction{
    font-size:9.5px;
  }

  .jakLiveBottom{
    font-size:9px;
  }

  .jakLiveRight{
    min-width:38px;
  }

  #jakLiveTime{
    font-size:8.3px;
  }

  .jakLiveSpark{
    width:20px;
    height:20px;
  }
}

@media(max-width:370px){
  .jakLiveAvatar{display:none}
  .jakLiveSpark{display:none}
  .jakLiveRight{min-width:auto}
}

@media(prefers-reduced-motion:reduce){
  .jakLivePulse,
  .jakLiveBarV4.is-new,
  .jakLiveBarV4.is-new .jakLiveSpark,
  .jakLiveBarV4.is-new .jakLiveAccent{
    animation:none!important;
  }
}