/* =========================================================
   STS v5.6.173 - Chat layout fix
   Fixes the broken column spacing from v172 and makes chat
   compact, readable and Twitch-like without the sub/top strip.
   ========================================================= */

html body.streamx-v5.twitch-v53 .watch-shell{
  grid-template-columns:minmax(0,1fr) minmax(330px, 390px) !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{
  border-radius:16px !important;
  border:1px solid rgba(168,85,247,.50) !important;
  background:#07090d !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025), 0 18px 45px rgba(0,0,0,.34) !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-head{
  height:58px !important;
  min-height:58px !important;
  padding:8px 12px !important;
  grid-template-columns:38px 1fr 72px !important;
  background:#0d1119 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-avatar{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-title{
  font-size:15px !important;
  text-align:center !important;
}

html body.streamx-v5.twitch-v53 .chat-messages.pro-messages,
html body.streamx-v5.twitch-v53 .v55-chat-ref .chat-messages{
  padding:9px 10px 10px !important;
  background:#05070a !important;
  font-family:Inter,Arial,sans-serif !important;
}

/* One clean chat row. No avatar column, no giant spacing. */
html body.streamx-v5.twitch-v53 .chat-line.pro-message{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  padding:4px 7px !important;
  margin:0 0 2px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  transform:none !important;
}

html body.streamx-v5.twitch-v53 .chat-line.pro-message:hover{
  background:rgba(255,255,255,.055) !important;
}

html body.streamx-v5.twitch-v53 .chat-avatar-mini,
html body.streamx-v5.twitch-v53 .system-icon{
  display:none !important;
}

html body.streamx-v5.twitch-v53 .chat-bubble,
html body.streamx-v5.twitch-v53 .system-bubble{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 !important;
  margin: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;
  padding:0 !important;
  vertical-align:baseline !important;
}

html body.streamx-v5.twitch-v53 .chat-name,
html body.streamx-v5.twitch-v53 .chat-name-link{
  display:inline !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  color:var(--chat-name-color,#23f7d0) !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:900 !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:#e9e9ee !important;
  margin-right:5px !important;
}

html body.streamx-v5.twitch-v53 .chat-body,
html body.streamx-v5.twitch-v53 .chat-bubble > span,
html body.streamx-v5.twitch-v53 .system-message{
  display:inline !important;
  color:#f5f6fb !important;
  font-size:13px !important;
  line-height:1.45 !important;
  word-break:break-word !important;
  padding:0 !important;
  margin:0 !important;
}

/* Badges stay tiny and do not push the message across the chat. */
html body.streamx-v5.twitch-v53 .badge-row,
html body.streamx-v5.twitch-v53 .badge-row.compact{
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
  margin:0 4px 0 2px !important;
  vertical-align:-3px !important;
}

html body.streamx-v5.twitch-v53 .creator-badge,
html body.streamx-v5.twitch-v53 .badge-row.compact .creator-badge{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  border-radius:4px !important;
  padding:0 !important;
  box-shadow:none !important;
}

html body.streamx-v5.twitch-v53 .badge-label{display:none !important;}

/* Hover tools hidden fully until hover, and kept tiny. */
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;
  vertical-align:middle !important;
  margin-left:4px !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;
  height:18px !important;
  min-height:18px !important;
  padding:0 5px !important;
  border-radius:4px !important;
  font-size:10px !important;
  background:#171b22 !important;
  border:1px solid #2a303b !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;
}

html body.streamx-v5.twitch-v53 .system-line,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"]{
  padding:5px 7px !important;
  background:rgba(57,255,20,.035) !important;
}
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-name,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-name-link{
  color:#39ff14 !important;
}

html body.streamx-v5.twitch-v53 .chat-body img,
html body.streamx-v5.twitch-v53 .chat-bubble > span img,
html body.streamx-v5.twitch-v53 .emote-inline{
  width:26px !important;
  height:26px !important;
  object-fit:contain !important;
  vertical-align:-7px !important;
  margin:0 2px !important;
}

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 .v53-emote-strip{
  min-height:42px !important;
  padding:6px 8px !important;
  gap:5px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:#090c12 !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick{
  width:31px !important;
  height:31px !important;
  border-radius:8px !important;
  padding:3px !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick img{
  width:24px !important;
  height:24px !important;
}

html body.streamx-v5.twitch-v53 .chat-form.pro-chat-form{
  padding:8px !important;
  gap:7px !important;
  background:#080b11 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
html body.streamx-v5.twitch-v53 .chat-wave-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:10px !important;
}
html body.streamx-v5.twitch-v53 #chatInput{
  height:42px !important;
  border-radius:8px !important;
  background:#0c1118 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  font-size:13px !important;
}
html body.streamx-v5.twitch-v53 #chatInput:focus{
  border-color:#39ff14 !important;
  box-shadow:0 0 0 1px rgba(57,255,20,.5) !important;
}
html body.streamx-v5.twitch-v53 .chat-send-btn,
html body.streamx-v5.twitch-v53 .pro-chat-form button[type="submit"]{
  height:42px !important;
  min-width:70px !important;
  border-radius:10px !important;
}

@media (max-width: 980px){
  html body.streamx-v5.twitch-v53 .watch-shell{grid-template-columns:1fr !important;}
  html body.streamx-v5.twitch-v53 .chat-panel.upgraded.pro-chat{max-width:none !important;width:100% !important;height:62vh !important;}
}