/*
 * T.I.T.S COMMUNITY V2.3
 *
 * FAST / SIMPLE AUTHORITY
 *
 * Chat is always visible.
 * Voice is always visible below Chat.
 *
 * No tabs.
 * No JS centering.
 * No viewport observers.
 * No hide/show reflow.
 */


/* ==========================================================
   GLOBAL COMMUNITY
   ========================================================== */

#tits-mobile-community-tabs {
    display:
        none !important;
}


#tits-chat-v2.tits-mobile-panel-hidden {
    display:
        block !important;
}


#tits-live-voice,
#tits-live-voice.tits-mobile-panel-active {
    display:
        block !important;
}


#tits-mobile-community-content {
    box-sizing:
        border-box !important;
}


#tits-chat-v2,
#tits-live-voice {
    left:
        auto !important;

    right:
        auto !important;

    transform:
        none !important;

    box-sizing:
        border-box !important;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (
    min-width: 761px
) {

    /*
     * The outer shell breaks out of the narrow
     * WordPress content wrapper using pure CSS.
     *
     * No JavaScript measurements required.
     */

    #tits-mobile-community-shell {
        position:
            relative !important;

        width:
            100vw !important;

        max-width:
            none !important;

        margin-left:
            calc(
                50% - 50vw
            ) !important;

        margin-right:
            0 !important;

        transform:
            none !important;

        box-sizing:
            border-box !important;
    }


    /*
     * This is the actual centered community workspace.
     */

    #tits-mobile-community-content {
        width:
            min(
                1500px,
                calc(
                    100vw - 64px
                )
            ) !important;

        max-width:
            1500px !important;

        margin:
            24px auto
            48px !important;

        padding:
            0 !important;

        overflow:
            visible !important;

        box-sizing:
            border-box !important;
    }


    /*
     * DESKTOP CHAT
     */

    #tits-chat-v2,
    #tits-chat-v2.tits-mobile-panel-hidden {
        display:
            grid !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            680px !important;

        grid-template-columns:
            250px
            minmax(
                0,
                1fr
            )
            285px !important;

        margin:
            0 !important;

        border:
            1px solid #333333 !important;

        border-radius:
            16px !important;

        overflow:
            hidden !important;

        background:
            #090909 !important;
    }


    #tits-chat-v2
    .tits-chat-channels {
        position:
            relative !important;

        inset:
            auto !important;

        display:
            block !important;

        width:
            auto !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            680px !important;

        padding:
            20px 16px !important;

        transform:
            none !important;

        overflow-y:
            auto !important;

        border-right:
            1px solid #2c2c2c !important;

        background:
            #111111 !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-v2
    .tits-chat-main {
        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        min-height:
            680px !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        background:
            #090909 !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-v2
    .tits-chat-top {
        width:
            100% !important;

        padding:
            20px 22px
            16px !important;

        border-bottom:
            1px solid #2c2c2c !important;

        box-sizing:
            border-box !important;

        background:
            #0d0d0d !important;
    }


    #tits-chat-current-name {
        font-size:
            28px !important;

        line-height:
            1.1 !important;
    }


    #tits-chat-current-description {
        font-size:
            14px !important;

        line-height:
            1.4 !important;
    }


    #tits-chat-v2
    .tits-chat-search {
        margin-top:
            14px !important;
    }


    #tits-chat-messages-v2 {
        flex:
            1 1 auto !important;

        width:
            100% !important;

        min-height:
            470px !important;

        max-height:
            560px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        padding:
            18px 22px !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-form-v2 {
        position:
            relative !important;

        bottom:
            auto !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            15px 18px !important;

        border-top:
            1px solid #2c2c2c !important;

        background:
            #0c0c0c !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-v2
    .tits-chat-active {
        position:
            relative !important;

        inset:
            auto !important;

        display:
            block !important;

        width:
            auto !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            680px !important;

        padding:
            20px 16px !important;

        transform:
            none !important;

        overflow-y:
            auto !important;

        border-left:
            1px solid #2c2c2c !important;

        background:
            #111111 !important;

        box-sizing:
            border-box !important;
    }


    /*
     * VOICE BELOW CHAT
     */

    #tits-live-voice,
    #tits-live-voice.tits-mobile-panel-active {
        display:
            block !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            24px 0 0 !important;

        padding:
            24px !important;

        border:
            1px solid #514900 !important;

        border-top:
            5px solid #ffd400 !important;

        border-radius:
            16px !important;

        background:
            #101010 !important;

        overflow:
            visible !important;
    }


    #tits-live-voice
    .tits-voice-layout {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                300px,
                .42fr
            ) !important;

        gap:
            22px !important;

        box-sizing:
            border-box !important;
    }


    #tits-live-voice
    .tits-voice-participants {
        min-height:
            260px !important;
    }


    /*
     * Mobile-only helper controls are not needed
     * on desktop.
     */

    #tits-mobile-room-actions {
        display:
            none !important;
    }


    #tits-mobile-backdrop,
    .tits-mobile-drawer-close {
        display:
            none !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
    max-width: 760px
) {

    html,
    body {
        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            hidden !important;
    }


    #tits-mobile-community-shell {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        overflow-x:
            hidden !important;

        box-sizing:
            border-box !important;
    }


    #tits-mobile-community-content {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow-x:
            hidden !important;

        box-sizing:
            border-box !important;
    }


    /*
     * CHAT ALWAYS VISIBLE
     */

    #tits-chat-v2,
    #tits-chat-v2.tits-mobile-panel-hidden {
        display:
            block !important;

        width:
            calc(
                100% - 16px
            ) !important;

        max-width:
            calc(
                100% - 16px
            ) !important;

        min-width:
            0 !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            12px auto
            0 !important;

        transform:
            none !important;

        overflow:
            visible !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-v2
    .tits-chat-main {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-v2
    .tits-chat-top {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-messages-v2 {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        height:
            auto !important;

        min-height:
            420px !important;

        max-height:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            visible !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-form-v2 {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    /*
     * VOICE ALWAYS BELOW CHAT
     */

    #tits-live-voice,
    #tits-live-voice.tits-mobile-panel-active {
        display:
            block !important;

        width:
            calc(
                100% - 16px
            ) !important;

        max-width:
            calc(
                100% - 16px
            ) !important;

        min-width:
            0 !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            20px auto
            40px !important;

        padding:
            18px 14px !important;

        transform:
            none !important;

        overflow:
            hidden !important;

        border-top:
            5px solid #ffd400 !important;

        box-sizing:
            border-box !important;
    }


    #tits-live-voice
    .tits-voice-layout {
        display:
            grid !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Preserve lightweight mobile drawers from V2.
     */

    #tits-mobile-room-actions {
        display:
            grid !important;
    }
}