/* =========================================================
   STS v5.6.172 - Twitch-style clean chat revamp
   Compact readable live chat, no subscriber strip, smooth input.
   ========================================================= */

html body.streamx-v5.twitch-v53{
  --sts-chat-dark:#050607;
  --sts-chat-dark-2:#0a0c0f;
  --sts-chat-line:#171a1f;
  --sts-chat-text:#f4f4f5;
  --sts-chat-muted:#9aa0aa;
  --sts-chat-green:#39ff14;
  --sts-chat-cyan:#00f5d4;
  --sts-chat-purple:#a855f7;
}

/* Keep the chat narrow and close to the player like the reference. */
html body.streamx-v5.twitch-v53 .watch-shell{
  grid-template-columns:minmax(0,1fr) minmax(310px, 360px) !important;
  gap:8px !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 - 64px) !important;
  min-width:310px !important;
  max-width:360px !important;
  border-radius:0 !important;
  border:1px solid #20242c !important;
  border-left:1px solid rgba(168,85,247,.55) !important;
  background:var(--sts-chat-dark) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:hidden !important;
}

/* Remove the old chunky STS header and make it feel like a live-chat app. */
html body.streamx-v5.twitch-v53 .sts102-chat-head{
  min-height:42px !important;
  height:42px !important;
  padding:0 10px !important;
  display:grid !important;
  grid-template-columns:32px 1fr 72px !important;
  align-items:center !important;
  background:#08090b !important;
  border-bottom:1px solid #242832 !important;
  box-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-head:before{display:none!important;}
html body.streamx-v5.twitch-v53 .sts102-chat-titlebox{
  display:contents !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-avatar{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  border-radius:50% !important;
  border:1px solid rgba(57,255,20,.75) !important;
  box-shadow:none !important;
  grid-column:1 !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-titlebox > div:last-child{
  grid-column:2 !important;
  justify-self:center !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-title{
  font-size:15px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#fff !important;
  text-align:center !important;
  text-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-sub{display:none!important;}
html body.streamx-v5.twitch-v53 .sts102-chat-actions{
  grid-column:3 !important;
  justify-content:flex-end !important;
  gap:6px !important;
}
html body.streamx-v5.twitch-v53 .sts102-viewer-pill{
  height:28px !important;
  min-width:40px !important;
  padding:0 7px !important;
  border-radius:7px !important;
  background:#101318 !important;
  border:1px solid #252b34 !important;
  box-shadow:none !important;
  font-size:12px !important;
}
html body.streamx-v5.twitch-v53 .sts102-viewer-icon{display:none!important;}
html body.streamx-v5.twitch-v53 .sts102-menu-btn{
  width:28px !important;
  height:28px !important;
  border:0 !important;
  background:transparent !important;
  border-radius:6px !important;
}
html body.streamx-v5.twitch-v53 .sts102-menu-btn span{
  height:2px!important;
  background:#fff!important;
}

/* Remove sub/top-gifter style strips completely. */
html body.streamx-v5.twitch-v53 .sts-chat-sub-strip,
html body.streamx-v5.twitch-v53 .sts-chat-rank-strip,
html body.streamx-v5.twitch-v53 .v55-chat-strip,
html body.streamx-v5.twitch-v53 .chat-pinned-message[hidden],
html body.streamx-v5.twitch-v53 .sts-chat-announcements{
  display:none !important;
}

/* Chat feed: compact, text-first, like the reference image. */
html body.streamx-v5.twitch-v53 .v55-chat-ref .chat-messages,
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages{
  padding:8px 10px 10px !important;
  gap:0 !important;
  background:#050607 !important;
  scroll-behavior:smooth !important;
  font-family:Inter,Arial,sans-serif !important;
}
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages::-webkit-scrollbar{width:5px!important;}
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages::-webkit-scrollbar-track{background:#08090b!important;}
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages::-webkit-scrollbar-thumb{background:#71717a!important;border-radius:999px!important;}

html body.streamx-v5.twitch-v53 .chat-line.pro-message{
  display:block !important;
  position:relative !important;
  padding:3px 4px 5px !important;
  margin:0 0 2px !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  transition:background .12s 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:#11151b !important;
  transform:none !important;
}
html body.streamx-v5.twitch-v53 .chat-avatar-mini{
  display:none !important;
}
html body.streamx-v5.twitch-v53 .chat-bubble{
  display:block !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .chat-meta{
  display:inline !important;
  margin:0 !important;
}
html body.streamx-v5.twitch-v53 .chat-name,
html body.streamx-v5.twitch-v53 .chat-name-link{
  display:inline !important;
  color:var(--chat-name-color,var(--sts-chat-cyan)) !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  font-size:13px !important;
  line-height:1.38 !important;
  font-weight:800 !important;
  text-decoration:none !important;
  text-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .chat-name:after,
html body.streamx-v5.twitch-v53 .chat-name-link:after{
  content:': ';
  color:#d6d6d6;
  font-weight:700;
}
html body.streamx-v5.twitch-v53 .chat-bubble > span{
  display:inline !important;
  color:var(--sts-chat-text) !important;
  font-size:13px !important;
  line-height:1.38 !important;
  word-break:break-word !important;
  padding:0 !important;
}
html body.streamx-v5.twitch-v53 .chat-bubble img.emote,
html body.streamx-v5.twitch-v53 .chat-bubble .emote-img,
html body.streamx-v5.twitch-v53 .chat-bubble > span img{
  width:24px !important;
  height:24px !important;
  vertical-align:middle !important;
  margin:0 2px !important;
}

/* Badges stay tiny and inline, not giant buttons. */
html body.streamx-v5.twitch-v53 .badge-row,
html body.streamx-v5.twitch-v53 .badge-row.compact{
  display:inline-flex !important;
  vertical-align:middle !important;
  gap:2px !important;
  margin:0 3px 0 2px !important;
}
html body.streamx-v5.twitch-v53 .creator-badge,
html body.streamx-v5.twitch-v53 .badge-row.compact .creator-badge{
  display:inline-flex !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  border-radius:3px !important;
  padding:0 !important;
  box-shadow:none !important;
  vertical-align:middle !important;
}
html body.streamx-v5.twitch-v53 .badge-label{display:none!important;}

/* Mod/clip controls hidden unless hovering, so normal chat is clean. */
html body.streamx-v5.twitch-v53 .inline-mod-menu,
html body.streamx-v5.twitch-v53 .mod-menu,
html body.streamx-v5.twitch-v53 .sts-chat-clip-btn{
  display:inline-flex !important;
  margin-left:4px !important;
  vertical-align:middle !important;
}
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;
  width:auto !important;
  height:18px !important;
  min-height:18px !important;
  padding:0 5px !important;
  border-radius:4px !important;
  font-size:10px !important;
  background:#181c22 !important;
  border:1px solid #29303a !important;
  color:#fff !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{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* System messages should not look like huge cards. */
html body.streamx-v5.twitch-v53 .system-line,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"]{
  display:block !important;
  padding:4px 4px !important;
  margin:2px 0 !important;
  background:transparent !important;
  border:0 !important;
}
html body.streamx-v5.twitch-v53 .system-bubble,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-bubble{
  display:block !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-name{
  color:#a3e635 !important;
}
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-bubble > span,
html body.streamx-v5.twitch-v53 .system-message{
  color:#e7e7e7 !important;
  font-weight:700 !important;
  font-size:13px !important;
}

/* Reactions: compact inline bubbles. */
html body.streamx-v5.twitch-v53 .sts-message-reactions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin:4px 0 0 !important;
}
html body.streamx-v5.twitch-v53 .sts-message-reaction-pill{
  padding:1px 5px !important;
  border-radius:999px !important;
  font-size:12px !important;
  background:#11151b !important;
  border:1px solid #29303a !important;
}

/* Emote row like the green row in the reference, but with STS emotes. */
html body.streamx-v5.twitch-v53 .v53-emote-strip{
  min-height:42px !important;
  height:42px !important;
  padding:5px 8px !important;
  gap:5px !important;
  border-top:1px solid #242832 !important;
  background:#070809 !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:30px !important;
  height:30px !important;
  min-width:30px !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  padding:2px !important;
  transition:background .12s ease, transform .12s ease !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick:hover{
  background:#151922 !important;
  transform:translateY(-1px) !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick img{width:25px!important;height:25px!important;}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick span{display:none!important;}

/* Input bar: single white-outline box with a compact send button. */
html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 62px !important;
  gap:6px !important;
  padding:8px !important;
  background:#070809 !important;
  border-top:1px solid #242832 !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:34px !important;
  height:36px !important;
  border-radius:6px !important;
  border:1px solid #2b313a !important;
  background:#11151b !important;
  color:#fff !important;
  box-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form input,
html body.streamx-v5.twitch-v53 #chatInput{
  height:36px !important;
  border-radius:6px !important;
  background:#050607 !important;
  border:2px solid #f4f4f5 !important;
  color:#fff !important;
  font-size:13px !important;
  padding:0 10px !important;
  box-shadow:none !important;
}
html body.streamx-v5.twitch-v53 #chatInput:focus{
  border-color:var(--sts-chat-green) !important;
  box-shadow:0 0 0 1px rgba(57,255,20,.4) !important;
}
html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form button:last-child{
  height:36px !important;
  border-radius:6px !important;
  border:0 !important;
  background:var(--sts-chat-green) !important;
  color:#050607 !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow: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{
    max-width:none !important;
    width:100% !important;
    height:min(620px,72vh) !important;
  }
}