/*
 * T.I.T.S Podcast Community V2
 *
 * Desktop:
 *   wide centered community shell.
 *
 * Mobile:
 *   fixed page shell,
 *   Chat / Voice content switch,
 *   drawers for Channels / Online.
 */


/* ==========================================================
   DESKTOP COMMUNITY SHELL
   ========================================================== */

body.page-members-chat
#tits-chat-v2,
body.page-members-chat
#tits-live-voice {
    box-sizing:
        border-box !important;
}


@media (
    min-width: 761px
) {

    #tits-chat-v2,
    #tits-live-voice {
        width:
            min(
                1600px,
                calc(
                    100vw - 64px
                )
            ) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        transform:
            none !important;
    }
}


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

@media (
    max-width: 760px
) {

    html,
    body {
        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            hidden !important;
    }


    body {
        position:
            relative !important;
    }


    /*
     * Never allow community breakout rules to drag
     * the WordPress site header off-screen.
     */

    body header,
    body .site-header,
    body #masthead,
    body .header-inner,
    body .site-header-inner {
        max-width:
            100vw !important;

        left:
            auto !important;

        right:
            auto !important;

        transform:
            none !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Community shell.
     */

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

        max-width:
            100%;

        box-sizing:
            border-box;

        overflow-x:
            hidden;
    }


    #tits-mobile-community-tabs {
        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            4px;

        width:
            calc(
                100% - 24px
            );

        margin:
            18px auto
            16px;

        padding:
            3px;

        border:
            1px solid #3a3a3a;

        border-radius:
            17px;

        background:
            #0d0d0d;

        box-sizing:
            border-box;
    }


    .tits-mobile-community-tab {
        appearance:
            none;

        border:
            0;

        border-radius:
            14px;

        min-height:
            54px;

        background:
            transparent;

        color:
            #a8a8a8;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            10px;

        font-size:
            18px;

        font-weight:
            900;

        cursor:
            pointer;
    }


    .tits-mobile-community-tab.is-active {
        background:
            #ffd400;

        color:
            #090909;
    }


    .tits-mobile-tab-icon {
        width:
            26px;

        height:
            26px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        flex:
            0 0 26px;
    }


    .tits-mobile-tab-icon svg {
        width:
            100%;

        height:
            100%;

        display:
            block;

        fill:
            currentColor;

        stroke:
            currentColor;
    }


    /*
     * Both old panels stay in the same physical slot.
     * No page jump.
     */

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

        max-width:
            100%;

        box-sizing:
            border-box;

        overflow:
            hidden;
    }


    #tits-chat-v2,
    #tits-live-voice {
        width:
            calc(
                100vw - 16px
            ) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;

        left:
            auto !important;

        right:
            auto !important;

        transform:
            none !important;

        box-sizing:
            border-box !important;
    }


    #tits-chat-v2 {
        display:
            block !important;

        min-height:
            0 !important;

        height:
            auto !important;

        overflow:
            visible !important;
    }


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


    #tits-live-voice {
        display:
            none !important;

        min-height:
            0 !important;

        height:
            auto !important;

        margin-top:
            0 !important;

        padding:
            18px 14px !important;

        overflow:
            hidden !important;
    }


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


    /*
     * Chat becomes one column.
     */

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

        min-width:
            0 !important;

        max-width:
            none !important;

        display:
            flex !important;

        flex-direction:
            column !important;
    }


    #tits-chat-v2
    .tits-chat-top {
        display:
            block !important;

        width:
            100% !important;

        padding:
            18px 16px
            14px !important;

        box-sizing:
            border-box !important;
    }


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

        line-height:
            1.1 !important;

        margin:
            0 0 9px !important;
    }


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

        line-height:
            1.45 !important;
    }


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

        margin-top:
            14px !important;
    }


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

        box-sizing:
            border-box !important;
    }


    /*
     * Channels + online.
     */

    #tits-mobile-room-actions {
        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            8px;

        padding:
            0 16px
            14px;

        box-sizing:
            border-box;
    }


    .tits-mobile-room-action {
        appearance:
            none;

        min-height:
            46px;

        border:
            1px solid #454545;

        border-radius:
            14px;

        background:
            #121212;

        color:
            #ffffff;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            8px;

        font-size:
            14px;

        font-weight:
            900;
    }


    #tits-mobile-online-dot {
        width:
            10px;

        height:
            10px;

        border-radius:
            50%;

        background:
            #19db70;

        box-shadow:
            0 0 9px
            rgba(
                25,
                219,
                112,
                .55
            );
    }


    /*
     * Message content.
     */

    #tits-chat-messages-v2 {
        min-height:
            420px !important;

        height:
            auto !important;

        max-height:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            visible !important;

        padding:
            10px 12px
            18px !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Composer.
     */

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

        bottom:
            0 !important;

        z-index:
            40 !important;

        width:
            100% !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            auto !important;

        gap:
            8px !important;

        padding:
            10px !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;

        background:
            rgba(
                8,
                8,
                8,
                .97
            ) !important;

        backdrop-filter:
            blur(
                10px
            );
    }


    #tits-chat-form-v2
    textarea,
    #tits-chat-form-v2
    input[type="text"] {
        min-width:
            0 !important;

        width:
            100% !important;

        min-height:
            48px !important;

        font-size:
            16px !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Voice mobile presentation.
     */

    #tits-live-voice
    .tits-voice-layout {
        grid-template-columns:
            1fr !important;

        min-height:
            0 !important;

        gap:
            14px !important;
    }


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


    #tits-live-voice
    button,
    #tits-live-voice
    select,
    #tits-live-voice
    input {
        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Drawers.
     */

    #tits-chat-v2
    .tits-chat-channels,
    #tits-chat-v2
    .tits-chat-active {
        position:
            fixed !important;

        top:
            0 !important;

        bottom:
            0 !important;

        width:
            min(
                86vw,
                340px
            ) !important;

        height:
            100dvh !important;

        z-index:
            10002 !important;

        background:
            #111111 !important;

        overflow-y:
            auto !important;

        padding:
            72px 16px
            20px !important;

        box-sizing:
            border-box !important;

        transition:
            transform
            .22s ease !important;
    }


    #tits-chat-v2
    .tits-chat-channels {
        left:
            0 !important;

        right:
            auto !important;

        transform:
            translateX(
                -105%
            ) !important;
    }


    #tits-chat-v2
    .tits-chat-active {
        right:
            0 !important;

        left:
            auto !important;

        transform:
            translateX(
                105%
            ) !important;
    }


    #tits-chat-v2
    .tits-chat-channels.tits-mobile-drawer-open,
    #tits-chat-v2
    .tits-chat-active.tits-mobile-drawer-open {
        transform:
            translateX(
                0
            ) !important;
    }


    #tits-mobile-backdrop {
        position:
            fixed;

        inset:
            0;

        z-index:
            10001;

        background:
            rgba(
                0,
                0,
                0,
                .72
            );

        opacity:
            0;

        pointer-events:
            none;

        transition:
            opacity
            .2s ease;
    }


    #tits-mobile-backdrop.is-open {
        opacity:
            1;

        pointer-events:
            auto;
    }


    .tits-mobile-drawer-close {
        position:
            absolute;

        top:
            16px;

        right:
            16px;

        width:
            42px;

        height:
            42px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid #444444;

        border-radius:
            50%;

        background:
            #181818;

        color:
            #ffffff;

        font-size:
            22px;
    }


    body.tits-mobile-drawer-active {
        overflow:
            hidden !important;
    }
}