/* ===== Chat Area message styles (extracted from index.html) ===== */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 12px;
    min-height: 0;
}
.chat-msg {
    margin-bottom: 10px; font-size: 13px; line-height: 1.5;
}
.chat-msg .chat-user { color: #e0943a; font-weight: 600; margin-right: 6px; }
.chat-msg .chat-text { color: #ddd; }
/* Medal badge after a nickname (chat lines and online-user list) */
.chat-msg .chat-medal, .user-medal-badge {
    height: 18px; width: auto; max-width: 40px; vertical-align: middle;
    margin: -2px 6px 0 0; object-fit: contain;
}
.user-medal-badge { height: 16px; margin: 0; }
.chat-msg.system { color: #f59e0b; font-size: 12px; }
.chat-msg.bet-msg { background: rgba(180,130,70,0.35); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg.win-msg { background: linear-gradient(135deg, rgba(255,165,0,0.4), rgba(255,100,50,0.3)); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg.follow-msg { background: rgba(76,175,80,0.35); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg .chat-bet-tag { background: #b48246; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chat-msg.sports-bet-msg { background: rgba(40,120,80,0.35); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg .chat-sports-tag { background: #06C755; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chat-msg .sports-bet-details { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: #ccc; margin-top: 2px; }
.chat-msg .chat-win-tag { background: #ff4d6a; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chat-msg .chat-follow-tag { background: #4caf50; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chat-msg.enter-msg { background: rgba(84,150,215,0.35); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg .chat-status-tag { background: #4a90d9; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chat-msg.twitch-msg { background: rgba(145,70,255,0.35); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg.twitch-msg .chat-user { color: #d6b8ff; }
.chat-msg .chat-twitch-tag { background: #9146ff; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.chat-msg .chat-user.clickable { cursor: pointer; }
.chat-msg .chat-user.clickable:hover { text-decoration: underline; }
.chat-msg .chat-mention { color: #4fc3f7; font-weight: 600; margin-right: 4px; }
.chat-msg.mention-me { background: rgba(255,202,40,0.28); border-radius: 12px; padding: 4px 10px; margin-bottom: 6px; display: block; width: fit-content; }
.chat-msg.mention-me .chat-text { color: #ffe082; }
.chat-msg.mention-me .chat-mention { color: #ffca28; }
/* Chat bubble (聊天气泡): background/padding/radius come from the bubble config,
   decoration pieces are absolutely positioned and may overflow the bar. */
.chat-msg.has-bubble { position: relative; display: block; width: fit-content; max-width: calc(100% - 24px); margin: 12px 0 14px 22px; overflow: visible; }
.chat-msg.has-bubble .chat-user { color: inherit; opacity: 0.95; }
.chat-msg.has-bubble .chat-bubble-deco { position: absolute; pointer-events: none; object-fit: contain; }