/* =========================================================
   PAREACLUB ANDROID DESKTOP-LIKE FIX V2.3
   FIXES V2.2 main/.center collision
   DESKTOP PC UNTOUCHED
========================================================= */

@media screen
       and (max-width:768px)
       and (orientation:portrait)
       and (pointer:coarse) {

    html,
    body {
        width:100% !important;
        max-width:100% !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;
    }


    /* =====================================================
       TOPBAR
    ===================================================== */

    .topbar {
        position:relative !important;

        width:100% !important;
        height:48px !important;
        min-height:48px !important;

        display:flex !important;
        align-items:center !important;

        padding:3px 5px !important;
        gap:4px !important;

        box-sizing:border-box !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        white-space:nowrap !important;

        z-index:1000 !important;
    }


    .topbar .brand {
        flex:0 0 auto !important;

        font-size:12px !important;
        margin-right:auto !important;
    }


    .topbar .top-actions {
        flex:0 0 auto !important;

        display:flex !important;
        align-items:center !important;

        gap:3px !important;

        width:auto !important;

        overflow:visible !important;
    }


    #openDjPlayerBtn,
    #settingsBtn,
    #logoutBtn {
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;

        align-items:center !important;
        justify-content:center !important;

        width:auto !important;
        min-width:auto !important;

        height:32px !important;
        min-height:32px !important;

        padding:0 7px !important;

        font-size:10px !important;

        white-space:nowrap !important;
    }


    #myUsernameTop {
        display:none !important;
    }


    /*
       Αν η μπάρα είναι στενή μπορεί να γίνει
       οριζόντιο swipe, αλλά κανένα κουμπί
       δεν εξαφανίζεται.
    */

    .topbar::-webkit-scrollbar {
        display:none !important;
    }


    /* =====================================================
       ΤΟ ΠΡΑΓΜΑΤΙΚΟ 3-COLUMN CONTAINER
       Είναι .layout, ΟΧΙ main
    ===================================================== */

    .layout {
        position:relative !important;

        width:100% !important;
        height:calc(100dvh - 48px) !important;

        display:grid !important;

        grid-template-columns:
            24% minmax(0,52%) 24% !important;

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

        gap:3px !important;

        margin:0 !important;
        padding:3px !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }


    /* =====================================================
       ΑΡΙΣΤΕΡΑ
       Rooms επάνω
       Camera χαμηλά
    ===================================================== */

    .left {
        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;

        width:100% !important;
        height:100% !important;

        min-width:0 !important;
        min-height:0 !important;

        display:grid !important;

        grid-template-rows:
            minmax(0,1fr)
            210px !important;

        gap:3px !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        overflow:hidden !important;

        pointer-events:auto !important;

        box-shadow:none !important;
    }


    .rooms-panel {
        width:100% !important;
        height:100% !important;

        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;
    }


    #roomList {
        flex:1 1 auto !important;

        min-height:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }


    /* =====================================================
       CAMERA - ΦΥΣΙΟΛΟΓΙΚΟ ΜΕΓΕΘΟΣ
    ===================================================== */

    .camera-panel {
        width:100% !important;

        height:210px !important;
        min-height:210px !important;
        max-height:210px !important;

        display:flex !important;
        flex-direction:column !important;

        margin:0 !important;

        overflow:hidden !important;

        align-self:end !important;
    }


    .camera-panel .panel-title {
        flex:0 0 24px !important;
    }


    .camera-user {
        flex:0 0 25px !important;

        min-height:25px !important;

        font-size:9px !important;
    }


    .camera-box {
        flex:1 1 auto !important;

        min-height:0 !important;
        max-height:85px !important;

        overflow:hidden !important;
    }


    .camera-box #localVideo,
    .camera-box video {
        width:100% !important;
        height:85px !important;

        max-width:100% !important;
        max-height:85px !important;

        object-fit:cover !important;
    }


    #cameraPlaceholder {
        height:85px !important;
        min-height:85px !important;
        max-height:85px !important;

        font-size:9px !important;
    }


    .camera-panel button {
        min-height:27px !important;

        padding:2px 4px !important;

        font-size:9px !important;
    }


    .camera-panel input[type="range"] {
        display:none !important;
    }


    /* =====================================================
       ΚΕΝΤΡΟ
       Εδώ διορθώνουμε το βασικό bug του V2.2
    ===================================================== */

    main.center,
    .center {
        position:relative !important;

        display:block !important;

        grid-template-columns:none !important;
        grid-template-rows:none !important;

        width:100% !important;
        height:100% !important;

        min-width:0 !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    .center > .chat-panel,
    .chat-panel {
        width:100% !important;
        height:100% !important;

        min-width:0 !important;
        min-height:0 !important;

        margin:0 !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    .chat-header {
        flex:0 0 27px !important;

        width:100% !important;

        height:27px !important;
        min-height:27px !important;

        padding:0 4px !important;

        font-size:9px !important;

        box-sizing:border-box !important;
    }


    #messages {
        flex:1 1 0 !important;

        width:100% !important;

        min-width:0 !important;
        min-height:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }


    /* =====================================================
       CHAT TOOLBAR
    ===================================================== */

    .toolbar {
        flex:0 0 auto !important;

        width:100% !important;

        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;

        gap:2px !important;

        padding:2px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        box-sizing:border-box !important;

        scrollbar-width:none !important;
    }


    .toolbar::-webkit-scrollbar {
        display:none !important;
    }


    .toolbar button,
    .toolbar select {
        flex:0 0 auto !important;

        width:auto !important;
        min-width:auto !important;

        height:26px !important;
        min-height:26px !important;

        padding:0 4px !important;

        font-size:8px !important;

        white-space:nowrap !important;
    }


    /* =====================================================
       MESSAGE FORM
    ===================================================== */

    #form {
        flex:0 0 37px !important;

        width:100% !important;

        height:37px !important;
        min-height:37px !important;

        display:flex !important;
        align-items:center !important;

        gap:3px !important;

        padding:2px !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }


    #input {
        flex:1 1 auto !important;

        width:auto !important;
        min-width:0 !important;

        height:31px !important;
        min-height:31px !important;

        padding:0 5px !important;

        font-size:9px !important;

        box-sizing:border-box !important;
    }


    #form button {
        flex:0 0 auto !important;

        width:auto !important;
        min-width:68px !important;

        height:31px !important;
        min-height:31px !important;

        padding:0 4px !important;

        font-size:8px !important;
    }


    /* =====================================================
       ΔΕΞΙΑ
       Users πάνω / Radio κάτω
    ===================================================== */

    .right {
        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;

        width:100% !important;
        height:100% !important;

        min-width:0 !important;
        min-height:0 !important;

        display:grid !important;

        grid-template-rows:
            minmax(0,1fr)
            180px !important;

        gap:3px !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        overflow:hidden !important;

        pointer-events:auto !important;

        box-shadow:none !important;
    }


    .users-panel {
        width:100% !important;
        height:100% !important;

        min-height:0 !important;

        overflow:hidden !important;
    }


    #usersListUI {
        min-height:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }


    .right > .panel:not(.users-panel) {
        width:100% !important;

        height:180px !important;
        min-height:180px !important;
        max-height:180px !important;

        overflow:hidden !important;

        align-self:end !important;
    }


    /* =====================================================
       COMPACT TEXT
    ===================================================== */

    .panel-title {
        height:24px !important;
        min-height:24px !important;

        padding:0 3px !important;

        font-size:8px !important;
    }


    #roomList,
    #usersListUI {
        font-size:8px !important;
    }


    /*
       Δεν χρησιμοποιούμε drawers σε αυτή
       την PC-like portrait εμφάνιση.
    */

    #pareaMobileBar,
    #pareaMobileToolbar,
    #pareaMobileOverlay {
        display:none !important;
    }


    body.parea-mobile-rooms-open .left,
    body.parea-mobile-users-open .right {
        transform:none !important;
    }

}