/* HOME-V12-2-HEADERS-CHAT-LOADER */


/* =========================================================
   FULL-WIDTH HEADERS
   Keep full panel geometry, but localize the visual energy
   instead of stretching the glow across the whole viewport.
   ========================================================= */

#tab-home .community-chat-v2-head,

#tab-home
.panel
>
.panel-head:has(#home-active-status){
  position:relative!important;

  overflow:hidden!important;

  height:46px!important;
  min-height:46px!important;

  padding:
    0 14px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    ),
    linear-gradient(
      90deg,
      rgba(0,229,255,.040) 0,
      rgba(64,178,255,.021) 155px,
      rgba(144,82,255,.014) 290px,
      transparent 455px
    )!important;

  border-bottom:
    1px solid rgba(255,255,255,.060)!important;
}


/*
 * Compact local halo on the left.
 * It deliberately does NOT span the full-width panel.
 */

#tab-home .community-chat-v2-head::before,

#tab-home
.panel
>
.panel-head:has(#home-active-status)::before{
  content:""!important;

  position:absolute!important;

  top:0!important;
  bottom:0!important;
  left:0!important;

  width:min(450px,70%)!important;

  pointer-events:none!important;

  background:
    radial-gradient(
      310px 78px
      at 2% -28%,
      rgba(0,229,255,.120),
      transparent 66%
    ),
    radial-gradient(
      240px 72px
      at 76% -30%,
      rgba(144,82,255,.055),
      transparent 68%
    )!important;

  opacity:.9!important;
}


#tab-home .community-chat-v2-head > *,

#tab-home
.panel
>
.panel-head:has(#home-active-status)
>
*{
  position:relative!important;
  z-index:1!important;
}


/* =========================================================
   HEADER TYPOGRAPHY
   ========================================================= */

#tab-home .community-chat-v2-title{
  color:#edf4f8!important;

  font-size:11px!important;
  font-weight:740!important;

  letter-spacing:.025em!important;

  text-shadow:
    0 0 13px rgba(0,229,255,.065)!important;
}


#tab-home
.panel
>
.panel-head:has(#home-active-status){
  color:#edf4f8!important;

  font-size:11px!important;
  font-weight:740!important;

  letter-spacing:.025em!important;

  text-shadow:
    0 0 13px rgba(0,229,255,.065)!important;
}


/* Active count remains useful, but quieter */

#tab-home #home-active-status{
  margin-left:auto!important;

  color:#6e7c87!important;

  font-size:8px!important;
  font-weight:680!important;

  letter-spacing:.055em!important;

  text-shadow:none!important;

  font-variant-numeric:
    tabular-nums!important;
}


/* =========================================================
   REMOVE CHAT LIVE BADGE
   ========================================================= */

#tab-home .community-chat-v2-live{
  display:none!important;
}


/* =========================================================
   NORMAL RESTING ACCENT
   ========================================================= */

#tab-home .community-chat-v2-head::after,

#tab-home
.panel
>
.panel-head:has(#home-active-status)::after{
  content:""!important;

  position:absolute!important;

  left:14px!important;
  bottom:0!important;

  width:92px!important;
  height:1px!important;

  pointer-events:none!important;

  transform-origin:
    left center!important;

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.96),
      rgba(64,178,255,.78) 45%,
      rgba(144,82,255,.55) 72%,
      transparent 100%
    )!important;

  box-shadow:
    0 0 8px rgba(0,229,255,.22)!important;

  opacity:.96!important;
}


/* =========================================================
   CHAT REFRESH ACCENT
   Same language as RUNS/JUMPS + Leaders.
   ========================================================= */

#tab-home
.community-chat-v2-head.iwbp-chat-refresh-v122::after{
  width:
    var(
      --iwbp-chat-accent-full-width,
      calc(100% - 28px)
    )!important;

  transform-origin:
    left center!important;

  animation:
    iwbp-chat-accent-fill-v122
    700ms
    cubic-bezier(.22,.78,.24,1)
    both!important;

  will-change:
    transform!important;
}


@keyframes iwbp-chat-accent-fill-v122{

  0%{
    transform:
      scaleX(
        var(--iwbp-chat-accent-rest-scale,.15)
      );
  }

  18%{
    transform:scaleX(.34);
  }

  42%{
    transform:scaleX(.62);
  }

  64%{
    transform:scaleX(.86);
  }

  76%{
    transform:scaleX(1);
  }

  84%{
    transform:scaleX(1);
  }

  100%{
    transform:
      scaleX(
        var(--iwbp-chat-accent-rest-scale,.15)
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  #tab-home .community-chat-v2-head,

  #tab-home
  .panel
  >
  .panel-head:has(#home-active-status){
    height:44px!important;
    min-height:44px!important;

    padding:
      0 12px!important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.034),
        rgba(255,255,255,.011)
      ),
      linear-gradient(
        90deg,
        rgba(0,229,255,.040) 0,
        rgba(64,178,255,.018) 115px,
        rgba(144,82,255,.012) 215px,
        transparent 330px
      )!important;
  }


  #tab-home .community-chat-v2-head::before,

  #tab-home
  .panel
  >
  .panel-head:has(#home-active-status)::before{
    width:min(320px,88%)!important;
  }


  #tab-home .community-chat-v2-head::after,

  #tab-home
  .panel
  >
  .panel-head:has(#home-active-status)::after{
    left:12px!important;
    width:74px!important;
  }


  #tab-home .community-chat-v2-title,

  #tab-home
  .panel
  >
  .panel-head:has(#home-active-status){
    font-size:10.5px!important;
  }


  #tab-home #home-active-status{
    font-size:7.5px!important;
  }

}


@media(prefers-reduced-motion:reduce){

  #tab-home
  .community-chat-v2-head.iwbp-chat-refresh-v122::after{
    animation-duration:
      180ms!important;
  }

}