/* Match-page phone layout. Desktop and non-match routes keep their theme layout. */
.xlcm-toolbar, .xlcm-more, .xlcm-menu { display: none; }
@media (min-width: 768px) {
    body.xlc-mobile-live .live-match-sidebar__tabs > .xlcm-more,
    body.xlc-mobile-live .live-match-sidebar__tabs > .xlcm-menu { display: none !important; }
}
@media (max-width: 767px) {
    html:has(body.xlc-mobile-live) { margin-top: 0 !important; height: 100%; overflow: hidden; }
    body.xlc-mobile-live { --xlcm-height: 100dvh; height: var(--xlcm-height); margin: 0 !important; overflow: hidden; overscroll-behavior: none; }
    body.xlc-mobile-live #wpadminbar { display: none !important; }
    body.xlc-mobile-live #page { height: 100%; min-height: 0; overflow: hidden; }
    body.xlc-mobile-live #masthead { position: relative !important; top: 0 !important; height: 40px !important; min-height: 40px !important; z-index: 50; }
    body.xlc-mobile-live #masthead .site-shell { height: 40px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
    body.xlc-mobile-live #masthead .site-branding { height: 40px; display: flex; align-items: center; }
    body.xlc-mobile-live #masthead img { max-height: 36px !important; width: auto !important; }
    body.xlc-mobile-live #masthead .menu-toggle { height: 40px !important; min-height: 0 !important; padding-top: 0; padding-bottom: 0; }
    body.xlc-mobile-live #primary.remote-match-page { height: calc(var(--xlcm-height) - 72px - env(safe-area-inset-bottom, 0px)) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; }
    body.xlc-mobile-live .remote-match-page__shell { height: 100%; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    body.xlc-mobile-live .remote-match-page__shell > :not(.live-player-layout),
    body.xlc-mobile-live .live-player-tabs, body.xlc-mobile-live .live-player-heading,
    body.xlc-mobile-live .live-player-servers, body.xlc-mobile-live .site-footer,
    body.xlc-mobile-live .back-to-top { display: none !important; }
    body.xlc-mobile-live .live-player-layout { display: flex !important; flex-direction: column; height: 100% !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; gap: 0 !important; overflow: hidden; }
    body.xlc-mobile-live .live-player-main { display: block !important; flex: 0 0 auto; width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; overflow: visible; }
    body.xlc-mobile-live .remote-match-player,
    body.xlc-mobile-live .live-player-simulation { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; border: 0; border-radius: 0 !important; padding: 0 !important; overflow: hidden; }
    body.xlc-mobile-live [data-live-panel][hidden] { display: none !important; }
    body.xlc-mobile-live .live-match-sidebar { position: relative; display: flex !important; flex-direction: column; flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: 100%; border-radius: 0 !important; overflow: visible !important; border-width: 0 0 1px; }
    body.xlc-mobile-live .live-match-sidebar__tabs { position: relative; display: flex !important; flex: 0 0 36px; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 2px 6px !important; gap: 4px !important; overflow: visible !important; box-sizing: border-box; z-index: 20; }
    body.xlc-mobile-live .live-match-sidebar__tabs > [data-side-tab] { display: none !important; }
    body.xlc-mobile-live .live-match-sidebar__tabs > [data-side-tab="chat"],
    body.xlc-mobile-live .live-match-sidebar__tabs > [data-side-tab="stats"],
    body.xlc-mobile-live .live-match-sidebar__tabs > [data-side-tab="events"] { display: flex !important; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0 !important; height: 32px !important; min-height: 0 !important; padding: 4px !important; gap: 5px !important; font-size: 12px !important; border-radius: 7px !important; }
    body.xlc-mobile-live [data-side-tab="chat"] { order: 0; }
    body.xlc-mobile-live [data-side-tab="stats"] { order: 1; }
    body.xlc-mobile-live [data-side-tab="events"] { order: 2; }
    body.xlc-mobile-live .live-match-sidebar__tabs > [data-side-tab] span { display: inline !important; width: auto !important; max-width: none !important; opacity: 1 !important; font-size: 12px !important; white-space: nowrap; }
    body.xlc-mobile-live .live-match-sidebar__tabs > [data-side-tab] svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
    body.xlc-mobile-live .live-match-sidebar__body { flex: 1 1 0; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; }
    body.xlc-mobile-live .live-match-sidebar__panel { height: 100% !important; max-height: 100% !important; min-height: 0 !important; padding: 0 !important; overflow: auto !important; overscroll-behavior: contain; }
    body.xlc-mobile-live .live-match-sidebar__panel[data-side-panel="chat"] { overflow: hidden !important; }
    body.xlc-mobile-live #xlc-chat-widget { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; }
    body.xlc-mobile-live #xlc-chat-widget .cw-root { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; box-sizing: border-box; }
    body.xlc-mobile-live #xlc-chat-widget .cw-messages { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; overscroll-behavior: contain; }
    body.xlc-mobile-live #xlc-chat-widget .cw-match-title,
    body.xlc-mobile-live #xlc-chat-widget .cw-desktop-zalo-bar { display: none !important; }
    body.xlc-mobile-live #xlc-chat-widget .cw-input-container { position: relative; z-index: 2; flex: 0 0 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 8px 6px !important; gap: 7px !important; padding: 0 !important; }
    body.xlc-mobile-live #xlc-chat-widget .cw-input-wrapper { height: 34px !important; min-height: 34px !important; min-width: 0; padding: 0 8px !important; border-radius: 18px !important; box-sizing: border-box; }
    body.xlc-mobile-live #xlc-chat-widget .cw-input-wrapper input { height: 32px !important; min-height: 0 !important; padding: 0 5px !important; font-size: 16px !important; line-height: 32px !important; }
    body.xlc-mobile-live #xlc-chat-widget .cw-emoji-btn { width: 24px !important; height: 28px !important; padding: 0 !important; }
    body.xlc-mobile-live #xlc-chat-widget .cw-emoji-btn svg { width: 18px; height: 18px; }
    body.xlc-mobile-live #xlc-chat-widget .cw-send-msg { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; }
    body.xlc-mobile-live #xlc-chat-widget .cw-send-msg svg { width: 18px; height: 18px; }
    body.xlc-mobile-live #xlc-chat-widget .cw-login-button { flex: 0 0 auto !important; margin-bottom: 8px !important; }
    body.xlc-mobile-live .xlcm-toolbar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 7px; height: 36px; padding: 0 8px; background: #222829; box-sizing: border-box; }
    body.xlc-mobile-live .xlcm-picker { flex: 0 1 auto; min-width: 0; max-width: 100%; }
    body.xlc-mobile-live .xlcm-selected { display: flex; align-items: center; gap: 6px; height: 30px; max-width: 100%; padding: 2px 8px; border: 1px solid #475257; border-radius: 9px; background: #1d2427; color: #fff; font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1.2; }
    body.xlc-mobile-live .xlcm-selected span { max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
    body.xlc-mobile-live .xlcm-selected img { width: 23px; height: 23px; object-fit: cover; border-radius: 50%; }
    body.xlc-mobile-live .xlcm-selected::after { content: ''; width: 7px; height: 7px; margin-left: 3px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg) translateY(-2px); }
    body.xlc-mobile-live .xlcm-links { margin-left: auto; display: flex; flex: 0 0 auto; gap: 6px; }
    body.xlc-mobile-live .xlcm-links a { display: flex; align-items: center; justify-content: center; gap: 4px; width: 76px; height: 28px; padding: 0; border: 1px solid; border-radius: 18px; text-decoration: none; font-size: 12px; font-weight: 700; box-sizing: border-box; }
    body.xlc-mobile-live .xlcm-links svg { width: 13px; height: 13px; }
    body.xlc-mobile-live .xlcm-links .xlcm-zalo { border-color: #2658bb; color: #64a7ff; background: #112247; }
    body.xlc-mobile-live .xlcm-links .xlcm-bet { border-color: #ffad62; background: #ed7c20; color: #fff; }
    body.xlc-mobile-live .xlcm-channels, body.xlc-mobile-live .xlcm-menu { position: absolute; top: 36px; margin: 0; padding: 5px; background: #252c2e; border: 1px solid #4d5759; border-radius: 8px; box-shadow: 0 8px 24px #0008; z-index: 40; box-sizing: border-box; }
    body.xlc-mobile-live .xlcm-channels { left: 8px; min-width: 200px; max-width: calc(100vw - 16px); max-height: 40dvh; overflow: auto; }
    body.xlc-mobile-live .xlcm-channels button, body.xlc-mobile-live .xlcm-menu button { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 36px; padding: 5px 8px; background: transparent; border: 0; border-radius: 5px; color: #d9dfdf; text-align: left; font-size: 13px; cursor: pointer; }
    body.xlc-mobile-live .xlcm-channels button { min-height: 40px; }
    body.xlc-mobile-live .xlcm-channels button img { width: 24px; height: 24px; border-radius: 50%; }
    body.xlc-mobile-live .xlcm-channels button.is-active, body.xlc-mobile-live .xlcm-menu button.is-active { color: #00ed70; background: #2a5944; }
    /* Active-tab theme padding must not squeeze the ellipsis out of its button. */
    body.xlc-mobile-live .live-match-sidebar__tabs > .xlcm-more {
        display: flex; align-items: center; justify-content: center; align-self: center;
        order: 3; flex: 0 0 30px; width: 30px; min-width: 30px; max-width: 30px;
        height: 32px; min-height: 32px; max-height: 32px;
        margin: 0; padding: 0 !important; box-sizing: border-box;
        border: 0; border-radius: 7px; background: transparent; color: #b5bdc4;
        font: 400 24px/1 Arial, sans-serif; letter-spacing: normal; text-indent: 0;
        white-space: nowrap; overflow: hidden; cursor: pointer;
    }
    body.xlc-mobile-live .xlcm-more.is-active { color: #00ed70; background: #2a5944; }
    body.xlc-mobile-live .xlcm-menu { right: 6px; width: min(260px, calc(100vw - 12px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    body.xlc-mobile-live .xlcm-menu button span { display: inline !important; visibility: visible; opacity: 1; width: auto; max-width: none; font-size: 13px; }
    body.xlc-mobile-live .xlcm-menu svg { width: 18px; height: 18px; flex: 0 0 18px; }
    body.xlc-mobile-live .xlcm-menu[hidden], body.xlc-mobile-live .xlcm-channels[hidden] { display: none !important; }
}

/* API contacts have a stable desktop row outside the chat widget's React tree. */
#xlc-chat-widget .cw-banner-chat,
#xlc-chat-widget .cw-desktop-zalo-bar { display: none !important; }
.xlc-chat-contacts { display: none; }
@media (min-width: 768px) {
    .live-match-sidebar__panel.xlc-chat-panel.is-active { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .xlc-chat-panel #xlc-chat-widget { flex: 1 1 0; height: 0; min-height: 0; }
    .xlc-chat-contacts:not([hidden]) { display: flex; flex: 0 0 auto; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: #131d36; border-bottom: 1px solid #2e405d; }
    .xlc-chat-contacts a { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 32px; padding: 5px 15px; border: 1px solid; border-radius: 24px; font: 700 14px/1.2 Barlow, Arial, sans-serif; text-decoration: none; }
    .xlc-chat-contacts a.xlcm-zalo { color: #64a7ff; background: #112247; border-color: #2658bb; }
    .xlc-chat-contacts a.xlcm-bet { color: #fff; background: #ed7c20; border-color: #ffad62; }
    .xlc-chat-contacts svg { width: 16px; height: 16px; flex-shrink: 0; }
    .xlc-chat-contacts a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}