/* =========================================================
   STS v5.6.171 - Revamped smooth chat system
   Cleaner timeline, hidden hover tools, silent point rewards,
   smoother input/emotes and tighter STS/Kick-style fit.
   ========================================================= */

html body.streamx-v5.twitch-v53{
  --sts-chat-bg:#070a10;
  --sts-chat-panel:#0d1019;
  --sts-chat-line:rgba(255,255,255,.045);
  --sts-chat-line-hover:rgba(167,70,255,.085);
  --sts-chat-purple:#a855f7;
  --sts-chat-green:#39ff14;
  --sts-chat-text:#f7f3ff;
  --sts-chat-muted:rgba(239,232,255,.62);
}

html body.streamx-v5.twitch-v53 .watch-shell{
  grid-template-columns:minmax(0,1fr) minmax(370px, 500px) !important;
  gap:12px !important;
}

html body.streamx-v5.twitch-v53 .chat-panel.upgraded.pro-chat,
html body.streamx-v5.twitch-v53 aside.chat-panel.upgraded.pro-chat{
  height:calc(100vh - 84px) !important;
  max-height:none !important;
  border-radius:22px !important;
  border:1px solid rgba(168,85,247,.58) !important;
  background:
    radial-gradient(circle at 18% -10%, rgba(168,85,247,.22), transparent 34%),
    radial-gradient(circle at 105% 105%, rgba(57,255,20,.10), transparent 32%),
    linear-gradient(180deg, rgba(12,15,25,.98), rgba(5,8,13,.98)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.035) !important;
  overflow:hidden !important;
  backdrop-filter:blur(14px) !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-head{
  min-height:78px !important;
  padding:12px 14px !important;
  background:
    linear-gradient(135deg, rgba(20,24,38,.98), rgba(10,13,20,.96)) !important;
  border-bottom:1px solid rgba(168,85,247,.34) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.25) !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-avatar{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:16px !important;
  border:2px solid rgba(168,85,247,.95) !important;
  box-shadow:0 0 22px rgba(168,85,247,.35), 0 0 0 1px rgba(57,255,20,.14) !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-title{
  font-size:21px !important;
  line-height:1 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-sub{
  margin-top:5px !important;
  color:var(--sts-chat-muted) !important;
  font-size:12px !important;
  max-width:220px !important;
}

html body.streamx-v5.twitch-v53 .sts102-viewer-pill{
  height:38px !important;
  min-width:58px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  background:rgba(8,12,18,.82) !important;
  border:1px solid rgba(57,255,20,.28) !important;
  box-shadow:0 0 18px rgba(57,255,20,.08) !important;
}
html body.streamx-v5.twitch-v53 .sts102-menu-btn{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.09) !important;
}

html body.streamx-v5.twitch-v53 .chat-pinned-message:not([hidden]){
  margin:10px 12px 0 !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(57,255,20,.25) !important;
  background:linear-gradient(135deg, rgba(57,255,20,.10), rgba(168,85,247,.10)) !important;
}

html body.streamx-v5.twitch-v53 .v55-chat-ref .chat-messages,
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages{
  padding:12px 12px 14px !important;
  gap:2px !important;
  background:linear-gradient(180deg, rgba(5,8,13,.98), rgba(4,6,10,.99)) !important;
  scroll-behavior:smooth !important;
}

html body.streamx-v5.twitch-v53 .chat-messages.pro-messages::-webkit-scrollbar{width:7px!important;}
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages::-webkit-scrollbar-track{background:rgba(255,255,255,.025)!important;}
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--sts-chat-purple),var(--sts-chat-green))!important;
  border-radius:999px!important;
}

html body.streamx-v5.twitch-v53 .chat-line.pro-message{
  position:relative !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  gap:9px !important;
  padding:7px 8px !important;
  margin:0 !important;
  border-radius:16px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease !important;
}
html body.streamx-v5.twitch-v53 .chat-line.pro-message:hover,
html body.streamx-v5.twitch-v53 .chat-line.pro-message:focus-within{
  background:var(--sts-chat-line-hover) !important;
  border-color:rgba(168,85,247,.22) !important;
  transform:translateX(1px) !important;
}

html body.streamx-v5.twitch-v53 .chat-avatar-mini{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  border:2px solid rgba(57,255,20,.90) !important;
  background:rgba(10,15,20,.92) !important;
  box-shadow:0 0 14px rgba(57,255,20,.18) !important;
  font-size:12px !important;
}

html body.streamx-v5.twitch-v53 .chat-bubble{
  min-width:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .chat-meta{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  margin:0 0 4px !important;
}
html body.streamx-v5.twitch-v53 .chat-name,
html body.streamx-v5.twitch-v53 .chat-name-link{
  color:var(--chat-name-color,#fff) !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  max-width:132px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  text-shadow:0 0 12px rgba(168,85,247,.14) !important;
}
html body.streamx-v5.twitch-v53 .chat-body,
html body.streamx-v5.twitch-v53 .chat-bubble > span{
  display:block !important;
  color:var(--sts-chat-text) !important;
  font-size:14px !important;
  line-height:1.38 !important;
  word-break:break-word !important;
  padding-right:4px !important;
}

/* Tool buttons should not make every message look cluttered. */
html body.streamx-v5.twitch-v53 .inline-mod-menu summary,
html body.streamx-v5.twitch-v53 .mod-menu summary,
html body.streamx-v5.twitch-v53 .sts-chat-clip-btn{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-1px) !important;
  transition:opacity .14s ease, transform .14s ease !important;
}
html body.streamx-v5.twitch-v53 .chat-line:hover .inline-mod-menu summary,
html body.streamx-v5.twitch-v53 .chat-line:hover .mod-menu summary,
html body.streamx-v5.twitch-v53 .chat-line:hover .sts-chat-clip-btn,
html body.streamx-v5.twitch-v53 .chat-line:focus-within .inline-mod-menu summary,
html body.streamx-v5.twitch-v53 .chat-line:focus-within .mod-menu summary,
html body.streamx-v5.twitch-v53 .chat-line:focus-within .sts-chat-clip-btn{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
html body.streamx-v5.twitch-v53 .sts-chat-clip-btn{
  height:24px !important;
  padding:0 8px !important;
  font-size:11px !important;
  border-radius:10px !important;
}
html body.streamx-v5.twitch-v53 .creator-badge,
html body.streamx-v5.twitch-v53 .badge-row.compact .creator-badge{
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  border-radius:9px !important;
  padding:0 !important;
}
html body.streamx-v5.twitch-v53 .badge-label{display:none!important;}

html body.streamx-v5.twitch-v53 .system-line,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"]{
  grid-template-columns:30px minmax(0,1fr) !important;
  margin:4px 0 !important;
  background:linear-gradient(135deg, rgba(57,255,20,.08), rgba(168,85,247,.10)) !important;
  border-color:rgba(168,85,247,.15) !important;
}
html body.streamx-v5.twitch-v53 .system-bubble,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-bubble{
  padding:8px 10px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.04) !important;
}
html body.streamx-v5.twitch-v53 .system-message,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-bubble > span{
  font-size:13px !important;
  color:#eae4ff !important;
  font-weight:800 !important;
}

/* Sloth Coin reward events are silent in the visible chat. */
html body.streamx-v5.twitch-v53 .chat-line.system-points,
html body.streamx-v5.twitch-v53 .chat-line.chat-event-points,
html body.streamx-v5.twitch-v53 .chat-line[data-event="points"],
html body.streamx-v5.twitch-v53 .chat-line.sts-hide-points{
  display:none !important;
}

html body.streamx-v5.twitch-v53 .sts-message-reactions{
  margin-top:6px !important;
  gap:5px !important;
}
html body.streamx-v5.twitch-v53 .sts-message-reaction-pill{
  padding:3px 7px !important;
  border-radius:999px !important;
  font-size:12px !important;
  background:rgba(168,85,247,.12) !important;
  border:1px solid rgba(168,85,247,.22) !important;
}

html body.streamx-v5.twitch-v53 .v53-emote-strip{
  min-height:54px !important;
  padding:8px 10px !important;
  gap:7px !important;
  border-top:1px solid rgba(168,85,247,.25) !important;
  background:rgba(8,11,17,.98) !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip::-webkit-scrollbar{display:none!important;}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick{
  width:39px !important;
  height:39px !important;
  min-width:39px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  transition:transform .14s ease, background .14s ease, border-color .14s ease !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick:hover{
  transform:translateY(-2px) !important;
  background:rgba(168,85,247,.18) !important;
  border-color:rgba(168,85,247,.45) !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick img{width:28px!important;height:28px!important;}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick span{display:none!important;}

html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form{
  grid-template-columns:48px minmax(0,1fr) 82px !important;
  gap:8px !important;
  padding:10px 12px 12px !important;
  background:linear-gradient(180deg, rgba(8,11,17,.99), rgba(17,12,28,.99)) !important;
  border-top:1px solid rgba(168,85,247,.30) !important;
}
html body.streamx-v5.twitch-v53 .chat-wave-btn,
html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form > button:first-child{
  width:48px !important;
  height:46px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#39ff14,#a855f7) !important;
  color:#05070b !important;
  box-shadow:0 0 20px rgba(168,85,247,.20) !important;
}
html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form input,
html body.streamx-v5.twitch-v53 #chatInput{
  height:46px !important;
  border-radius:15px !important;
  background:rgba(9,15,18,.96) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  font-size:13px !important;
}
html body.streamx-v5.twitch-v53 #chatInput:focus{
  border-color:rgba(57,255,20,.76) !important;
  box-shadow:0 0 0 3px rgba(57,255,20,.10), 0 0 24px rgba(57,255,20,.08) !important;
}
html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form button:last-child{
  height:46px !important;
  border-radius:15px !important;
  font-size:13px !important;
  font-weight:1000 !important;
  background:linear-gradient(135deg,#9f3cff,#b83bff) !important;
  color:#fff !important;
}

html body.streamx-v5.twitch-v53 .sts-chat-announcements{display:none!important;}

@media(max-width:1180px){
  html body.streamx-v5.twitch-v53 .watch-shell{grid-template-columns:1fr !important;}
  html body.streamx-v5.twitch-v53 .chat-panel.upgraded.pro-chat,
  html body.streamx-v5.twitch-v53 aside.chat-panel.upgraded.pro-chat{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:min(640px,70vh) !important;
    top:auto !important;
    position:relative !important;
  }
}