/* =========================================================
   STS v5.6.174 - Full chat layout rebuild
   Clean Twitch/Kick style chat: avatar + name + message,
   no per-message clip buttons, hover-only mod tools,
   better emote-only messages and clean system events.
   ========================================================= */

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

html body.streamx-v5.twitch-v53 .chat-panel.upgraded.pro-chat,
html body.streamx-v5.twitch-v53 aside.chat-panel.upgraded.pro-chat{
  background:#06080c !important;
  border:1px solid rgba(168,85,247,.55) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 18px 42px rgba(0,0,0,.38) !important;
}

html body.streamx-v5.twitch-v53 .sts102-chat-head{
  height:58px !important;
  min-height:58px !important;
  padding:9px 12px !important;
  display:grid !important;
  grid-template-columns:36px 1fr auto !important;
  align-items:center !important;
  gap:10px !important;
  background:linear-gradient(180deg,#101521,#0a0e16) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
html body.streamx-v5.twitch-v53 .sts102-chat-title{font-size:15px !important;text-align:left !important;letter-spacing:.01em !important;}
html body.streamx-v5.twitch-v53 .sts102-chat-subtitle{font-size:11px !important;color:#a7acb9 !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 #chatMessages.chat-messages,
html body.streamx-v5.twitch-v53 .chat-messages.pro-messages{
  background:#05070a !important;
  padding:10px 9px 12px !important;
  gap:2px !important;
  font-family:Inter,Arial,sans-serif !important;
  scroll-behavior:smooth !important;
}

/* Real message row: avatar column + content column */
html body.streamx-v5.twitch-v53 .chat-line.pro-message{
  position:relative !important;
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) !important;
  align-items:start !important;
  column-gap:8px !important;
  width:100% !important;
  min-height:0 !important;
  padding:7px 7px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:10px !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{
  display:grid !important;
  place-items:center !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:999px !important;
  background:#111720 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  border:2px solid #39ff14 !important;
  box-shadow:0 0 10px rgba(57,255,20,.18) !important;
  overflow:hidden !important;
}
html body.streamx-v5.twitch-v53 .chat-avatar-mini img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}

html body.streamx-v5.twitch-v53 .chat-bubble{
  display:block !important;
  min-width:0 !important;
  width:100% !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:flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  width:100% !important;
  min-height:18px !important;
  margin:0 0 3px !important;
  padding:0 !important;
}
html body.streamx-v5.twitch-v53 .chat-name,
html body.streamx-v5.twitch-v53 .chat-name-link{
  display:inline-block !important;
  max-width:150px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:var(--chat-name-color,#23f7d0) !important;
  font-size:13px !important;
  line-height:18px !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:'' !important;margin:0 !important;}

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 !important;
  max-width:58px !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
}
html body.streamx-v5.twitch-v53 .creator-badge,
html body.streamx-v5.twitch-v53 .badge-row.compact .creator-badge{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  border-radius:5px !important;
  padding:0 !important;
  box-shadow:none !important;
}
html body.streamx-v5.twitch-v53 .badge-label{display:none !important;}

html body.streamx-v5.twitch-v53 .chat-body,
html body.streamx-v5.twitch-v53 .chat-bubble > span{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  color:#f5f6fb !important;
  font-size:13px !important;
  line-height:1.42 !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  padding:0 !important;
  margin:0 !important;
}

/* Emote-only messages pop like Twitch/Kick, but stay in their own line */
html body.streamx-v5.twitch-v53 .chat-line.emote-only .chat-body,
html body.streamx-v5.twitch-v53 .chat-line.emote-only .chat-bubble > span{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:4px !important;
  line-height:1 !important;
  padding-top:1px !important;
}
html body.streamx-v5.twitch-v53 .chat-line.emote-only .chat-body img,
html body.streamx-v5.twitch-v53 .chat-line.emote-only .chat-bubble > span img,
html body.streamx-v5.twitch-v53 .chat-line.emote-only .emote-inline{
  width:34px !important;
  height:34px !important;
  margin:0 1px !important;
  vertical-align:middle !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:24px !important;
  height:24px !important;
  object-fit:contain !important;
  vertical-align:-6px !important;
  margin:0 2px !important;
}

/* System events are clean and centered */
html body.streamx-v5.twitch-v53 .chat-line.system-line,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"]{
  display:block !important;
  padding:8px 10px !important;
  margin:4px 0 !important;
  background:linear-gradient(90deg,transparent,rgba(57,255,20,.08),transparent) !important;
  border-radius:12px !important;
  text-align:center !important;
}
html body.streamx-v5.twitch-v53 .system-line .chat-avatar-mini,
html body.streamx-v5.twitch-v53 .system-line .system-icon,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-avatar-mini{display:none !important;}
html body.streamx-v5.twitch-v53 .system-line .chat-bubble,
html body.streamx-v5.twitch-v53 .system-line .system-bubble,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-bubble{display:block !important;width:100% !important;}
html body.streamx-v5.twitch-v53 .system-line .chat-meta{display:none !important;}
html body.streamx-v5.twitch-v53 .system-message,
html body.streamx-v5.twitch-v53 .chat-line[data-chat-username="System"] .chat-bubble > span{
  display:block !important;
  color:#dfffe0 !important;
  font-size:13px !important;
  font-weight:800 !important;
}

/* Mod/reaction controls: hover only, never push text sideways */
html body.streamx-v5.twitch-v53 .inline-mod-menu,
html body.streamx-v5.twitch-v53 .mod-menu{
  position:relative !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  margin-left:auto !important;
}
html body.streamx-v5.twitch-v53 .inline-mod-menu summary,
html body.streamx-v5.twitch-v53 .mod-menu summary{
  opacity:0 !important;
  pointer-events:none !important;
  width:22px !important;
  height:20px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:#171c25 !important;
  border:1px solid rgba(255,255,255,.11) !important;
  color:#d7d9e0 !important;
  font-size:14px !important;
  line-height:1 !important;
  padding:0 !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{
  opacity:1 !important;
  pointer-events:auto !important;
}
html body.streamx-v5.twitch-v53 .sts-chat-clip-btn{display:none !important;}

html body.streamx-v5.twitch-v53 .sts-message-reactions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin:5px 0 0 !important;
}
html body.streamx-v5.twitch-v53 .sts-message-reaction-pill{
  background:#171c25 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  padding:2px 6px !important;
  font-size:12px !important;
}

html body.streamx-v5.twitch-v53 .v53-emote-strip{
  min-height:41px !important;
  padding:6px 8px !important;
  gap:5px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  border-top:1px solid rgba(168,85,247,.28) !important;
  background:#080b11 !important;
}
html body.streamx-v5.twitch-v53 .v53-emote-strip .emote-pick{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  border-radius:9px !important;
  padding:3px !important;
  background:#111720 !important;
  border:1px solid rgba(255,255,255,.10) !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(168,85,247,.28) !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:10px !important;
  background:#0c1118 !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important;
  font-size:13px !important;
  padding:0 12px !important;
}
html body.streamx-v5.twitch-v53 #chatInput:focus{
  border-color:#39ff14 !important;
  box-shadow:0 0 0 1px rgba(57,255,20,.55) !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:68px !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;}
}

/* v5.6.175 - Wave button hides cleanly after click */
html body.streamx-v5.twitch-v53 .chat-wave-btn[hidden],
html body.streamx-v5.twitch-v53 .chat-wave-btn.cooldown-hidden,
html body.streamx-v5.twitch-v53 .chat-form.wave-is-hidden .chat-wave-btn{
  display:none!important;
  width:0!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}

html body.streamx-v5.twitch-v53 .chat-form.wave-is-hidden,
html body.streamx-v5.twitch-v53 .chat-form:has(.chat-wave-btn[hidden]){
  grid-template-columns:1fr auto!important;
  gap:8px!important;
}