/* ====================================================================
   Chat room styles — independent file, never merged into main.css.

   DOM (inside .content-wrapper):
     .chat-fixed-top
       .landing-top-banner
       .home-top-entry              ← player wrapper
     <nav class="chat-tabs">         ← mobile only
     #chatRoom[data-tab="chat"]      ← chat panel (sibling of .chat-fixed-top)
     .home-top-entry[data-tab="rooms"]
     .home_page[data-tab="downloads"]

   Strategy:
     Mobile/tablet (<= 1023px): banner+player fixed top, tab bar fixed,
       chat is fixed below tabs filling remaining viewport. Channel list
       and downloads scroll behind in body flow.

     Desktop (>= 1024px): use display:contents on .chat-fixed-top to
       promote banner+player into the .content-wrapper grid. Layout:
         row 1: banner (full width)
         row 2: player (left) + chat (right, same height via stretch)
         row 3: channel list (full width)
         row 4: downloads (full width)
   ==================================================================== */

/* Neutralize main.css's `.content-wrapper > div { box-sizing: content-box }`. */
.content-wrapper > div {
    box-sizing: border-box !important;
}

/* ============= chatRoom: dark theme matching site #05061a =========== */
#chatRoom {
    display: flex;
    flex-direction: column;
    background: rgba(13, 16, 36, 0.96);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    color: #e5e7ef;
}
#chatRoom .chat-header {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 500;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
#chatRoom .chat-header .chat-status { font-size: 11px; font-weight: normal; color: #888fa3; }
#chatRoom .chat-header .chat-status.is-online { color: #4caf75; }

#chatRoom .chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 13px;
    background: transparent;
    color: #d8dbe8;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
#chatRoom .chat-messages::-webkit-scrollbar { width: 6px; }
#chatRoom .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

#chatRoom .chat-msg { margin: 4px 0; line-height: 1.45; word-break: break-word; }
#chatRoom .chat-msg.is-system .chat-text { color: #6c7080; font-style: italic; }
#chatRoom .chat-msg.is-self .chat-nick { color: #ff8a8a; }
#chatRoom .chat-nick { color: #6ec1ff; font-weight: 500; margin-right: 6px; }
#chatRoom .chat-text { color: #d8dbe8; }
#chatRoom .chat-time { color: #6c7080; font-size: 11px; margin-left: 6px; }

#chatRoom .chat-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    flex-shrink: 0;
}
#chatRoom .chat-input {
    flex: 1; min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 7px 12px;
    font-size: 13px;
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: inherit;
}
#chatRoom .chat-input::placeholder { color: rgba(255, 255, 255, 0.4); }
#chatRoom .chat-input:focus { border-color: rgba(110, 193, 255, 0.6); background: rgba(255, 255, 255, 0.08); }
#chatRoom .chat-input:disabled { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; }
#chatRoom .chat-send {
    padding: 7px 14px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}
#chatRoom .chat-send:hover:not(:disabled) { background: #2089ed; }
#chatRoom .chat-send:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; }
#chatRoom .chat-counter {
    position: absolute; right: 80px; bottom: 1px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    background: rgba(13, 16, 36, 0.85);
    padding: 0 4px;
    border-radius: 4px;
}
#chatRoom .chat-counter.is-warn { color: #ff8a8a; }
#chatRoom .chat-toast {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 16px; border-radius: 4px;
    font-size: 13px; z-index: 10;
    max-width: 80%;
    text-align: center;
    pointer-events: none;
}
#chatRoom.is-banned .chat-input,
#chatRoom.is-banned .chat-send { pointer-events: none; opacity: 0.5; }

/* Tab nav default = hidden; mobile rule below shows it */
.chat-tabs { display: none; }

/* ==================================================================
   Mobile + tablet portrait (<= 1023px): TAB pattern.
   Both .chat-fixed-top and #chatRoom (when active) use position:fixed
   — chat is NEVER in body flow on mobile. This eliminates layout
   recalculation issues from keyboard show/hide, banner image lazy
   loading, and other dynamic events.
   ================================================================== */
@media (max-width: 1023px) {
    body {
        /* Reserve space for fixed top bar — generous fallback if JS hasn't
           measured yet (banner~80 + player 16:9 of 375 ~211 ≈ 290) */
        padding-top: calc(var(--chat-fixed-top-h, 290px) + 40px);
        padding-right: 0;
        box-sizing: border-box;
    }

    .chat-fixed-top {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        background: #05061a;
    }

    .chat-tabs {
        display: flex;
        position: fixed;
        top: var(--chat-fixed-top-h, 290px);
        left: 0; right: 0;
        z-index: 99;
        height: 40px;
        background: #05061a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0; margin: 0;
    }
    .chat-tab {
        flex: 1;
        height: 40px; line-height: 40px;
        padding: 0; border: 0;
        background: transparent;
        font-size: 13px;
        color: #8a8fa3;
        font-weight: normal;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 0.18s, border-color 0.18s;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none; user-select: none;
        outline: none;
    }
    .chat-tab.is-active { color: #fff; border-bottom-color: #fff; font-weight: 500; }
    .chat-tab:active { background: rgba(255, 255, 255, 0.04); }

    /* Hide non-active panels with high specificity (beat base #chatRoom rule) */
    #chatRoom[data-tab]:not(.is-active-tab),
    .home-top-entry[data-tab]:not(.is-active-tab),
    .home_page[data-tab]:not(.is-active-tab) {
        display: none !important;
    }
    .home-top-entry[data-tab="rooms"].is-active-tab,
    .home_page[data-tab="downloads"].is-active-tab {
        display: block;
    }

    /* Hide the scrolling marquee announcement on the mobile rooms tab —
       redundant when the channel list itself is the focus of that tab. */
    .home-top-entry[data-tab="rooms"] #marqueeBar {
        display: none !important;
    }

    /* Active chat: position:fixed below tabs (NOT in body flow).
       Robust against keyboard show/hide, banner image lazy load, etc. */
    #chatRoom[data-tab="chat"].is-active-tab {
        display: flex;
        position: fixed;
        top: calc(var(--chat-fixed-top-h, 290px) + 40px + 6px);
        left: 6px;
        right: 6px;
        bottom: 6px;
        margin: 0;
        height: auto;
        z-index: 95;
        border-radius: 8px;
    }

    /* Body scroll lock when chat tab active — prevents page-level scroll
       so only chat-messages inside scrolls. Simple overflow:hidden, no
       touch-action games (those break iOS Safari input focus). */
    body.chat-tab-active {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* ==================================================================
   Desktop (>= 1024px): chat + channel list as a fixed right sidebar
   with [聊天 | 频道] internal tabs. Page content (banner, player,
   downloads) flows naturally on the LEFT side of the body, with
   body padding-right reserving 360px gutter for the sidebar.

   No grid, no display:contents — main.css's layout rules are completely
   left alone, only the body padding pushes content to the left.
   ================================================================== */
@media (min-width: 1024px) {
    body {
        padding-top: 0 !important;
        padding-right: 360px;
        box-sizing: border-box;
    }

    /* Reset .chat-fixed-top from mobile fixed positioning — flows normally now */
    .chat-fixed-top {
        position: static;
        background: transparent;
        display: block;
    }

    /* main.css's `.home-top-entry .game-wrapper { grid-template-columns: 950px 1fr }`
       jams the player into a 950px left column with empty 1fr to its right —
       making the player visually sit at the LEFT of the home-top-entry box.
       Force single column so the player fills the centered .home-top-entry
       wrapper (which already has margin:0 auto; max-width:1430px from main.css).
       Player then visually centers between viewport's left edge and the
       chat sidebar gutter on the right. */
    .chat-fixed-top .home-top-entry .game-wrapper {
        grid-template-columns: 1fr !important;
        margin-top: 0 !important;
    }
    .chat-fixed-top .home-top-entry .game-wrapper_agbox {
        width: 100%;
        max-width: 100%;
    }

    /* ------- Sub-tabs bar fixed at top of right sidebar ------- */
    .chat-tabs {
        display: flex;
        position: fixed;
        top: 12px;
        right: 12px;
        width: 336px;
        height: 40px;
        background: rgba(13, 16, 36, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        padding: 0;
        margin: 0;
        z-index: 100;
        box-sizing: border-box;
    }
    .chat-tab {
        flex: 1;
        height: 40px;
        line-height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 13px;
        color: #8a8fa3;
        font-weight: normal;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 0.18s, border-color 0.18s;
        font-family: inherit;
        outline: none;
    }
    .chat-tab.is-active { color: #fff; border-bottom-color: #fff; font-weight: 500; }
    /* Hide "下载" sub-tab on desktop — downloads always visible below */
    .chat-tab[data-target="downloads"] { display: none; }

    /* ------- Chat / rooms swap inside right sidebar ------- */
    /* Hide non-active panels (chat OR rooms — only one visible at a time) */
    #chatRoom[data-tab="chat"]:not(.is-active-tab),
    .home-top-entry[data-tab="rooms"]:not(.is-active-tab) {
        display: none !important;
    }

    /* Active chat: fixed sidebar below sub-tabs */
    #chatRoom[data-tab="chat"].is-active-tab {
        display: flex;
        position: fixed;
        top: 52px;       /* 12 + 40 = below tabs */
        right: 12px;
        width: 336px;
        bottom: 12px;
        height: auto;
        margin: 0;
        z-index: 99;
        border-radius: 0 0 8px 8px;
        border-top: none;
        box-sizing: border-box;
    }

    /* Active channel list: same fixed slot, dark theme + scrollable */
    .home-top-entry[data-tab="rooms"].is-active-tab {
        display: block;
        position: fixed;
        top: 52px;
        right: 12px;
        width: 336px;
        bottom: 12px;
        margin: 0 !important;
        max-width: none !important;
        z-index: 99;
        background: rgba(13, 16, 36, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: none;
        border-radius: 0 0 8px 8px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 6px;
    }
    .home-top-entry[data-tab="rooms"].is-active-tab .game-wrapper {
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        padding: 0;
    }
    /* Hide marquee in narrow sidebar */
    .home-top-entry[data-tab="rooms"].is-active-tab #marqueeBar {
        display: none !important;
    }

    /* Downloads section always visible on desktop, regardless of sub-tab */
    .home_page[data-tab="downloads"] { display: block; }
}

/* ==================================================================
   Upcoming matches — horizontal scrolling card strip below the player.
   Shared mobile + desktop. Dark theme matching site #05061a.
   ================================================================== */
.upcoming-matches {
    margin: 12px auto;
    padding: 10px 12px;
    background: rgba(13, 16, 36, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    box-sizing: border-box;
    max-width: 1430px;  /* match main.css home-top-entry centering */
    width: 100%;
}
.upcoming-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; padding: 0 2px;
}
.upcoming-title {
    color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
}
.upcoming-title::before {
    content: ''; display: inline-block; width: 3px; height: 14px;
    background: linear-gradient(180deg, #ff5252, #ff8a8a); border-radius: 2px;
    margin-right: 8px; vertical-align: -2px;
}
.upcoming-scroll {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.upcoming-scroll::-webkit-scrollbar { height: 4px; }
.upcoming-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.upcoming-scroll::-webkit-scrollbar-track { background: transparent; }

.upcoming-card {
    flex: 0 0 auto;
    min-width: 168px;
    max-width: 220px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    color: #d8dbe8;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.upcoming-card.is-clickable { cursor: pointer; }
.upcoming-card.is-clickable:hover {
    background: rgba(124, 92, 252, 0.12);
    border-color: rgba(124, 92, 252, 0.35);
}
.upcoming-card.is-clickable:active { transform: scale(0.98); }

.uc-head {
    display: flex; gap: 6px;
    margin-bottom: 6px;
    font-size: 10px; line-height: 1; color: #8a8fa3;
}
.uc-league { color: #ffb01b; font-weight: 500; }
.uc-sport {
    padding: 1px 5px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.06); color: #8a8fa3;
}

.uc-teams {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: #fff;
    margin: 4px 0 6px;
    overflow: hidden;
}
.uc-team {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-team:last-child { text-align: right; }
.uc-vs {
    flex: 0 0 auto;
    font-size: 10px; color: #6c7080; font-weight: 400;
    letter-spacing: 0.5px;
}

.uc-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px;
}
.uc-time { color: #8a8fa3; }
.uc-countdown {
    color: #6ec1ff;
    font-weight: 500;
    background: rgba(110, 193, 255, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
}

.uc-anchor {
    display: flex; align-items: center; gap: 4px;
    margin-top: 6px; font-size: 10px;
}
.uc-anchor-tag {
    background: rgba(255, 138, 138, 0.15); color: #ff8a8a;
    padding: 1px 4px; border-radius: 3px; font-weight: 500;
}
.uc-anchor-name { color: #b0a8d0; }

/* Mobile: snug margins so it fits inside the sub-360px width */
@media (max-width: 1023px) {
    .upcoming-matches {
        margin: 6px 6px;
        padding: 8px 10px;
        border-radius: 6px;
    }
}

/* Desktop: respect chat sidebar gutter (body has padding-right: 360px) */
@media (min-width: 1024px) {
    .upcoming-matches { margin: 16px auto; }
}