/* =========================================================
   PAREACLUB ANDROID DESKTOP-LIKE PORTRAIT V2.1
   Touch devices only
   PC DESKTOP: UNTOUCHED
========================================================= */

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

    /* =========================================
       ΟΛΗ Η ΕΦΑΡΜΟΓΗ ΜΕΣΑ ΣΤΗΝ ΟΘΟΝΗ
    ========================================= */

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

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

        overflow:hidden !important;
    }


    /*
       Στο desktop-like portrait δεν θέλουμε
       την τεράστια mobile μπάρα επάνω.
    */

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


    /* =========================================
       3 ΣΤΗΛΕΣ
       Rooms/Camera | Chat | Users/Radio
    ========================================= */

    .layout {
        position:fixed !important;

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

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

        display:grid !important;

        grid-template-columns:
            minmax(0,22%)
            minmax(0,53%)
            minmax(0,25%) !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;
    }


    /* =========================================
       ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ
       62% δωμάτια
       38% κάμερα
    ========================================= */

    .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,62%)
            minmax(0,38%) !important;

        gap:3px !important;

        padding:0 !important;
        margin: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:100% !important;

        min-height:0 !important;

        margin:0 !important;

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

        overflow:hidden !important;
    }


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

        width:100% !important;

        min-height:0 !important;

        overflow:hidden !important;
    }


    #localVideo {
        width:100% !important;
        height:100% !important;

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

        object-fit:cover !important;
    }


    /*
       Η μπάρα που είχες δείξει
       δεν χρειάζεται στο Android.
    */

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


    /* =========================================
       ΚΕΝΤΡΙΚΗ ΣΤΗΛΗ
       CHAT = ΟΛΟ ΤΟ ΥΨΟΣ
    ========================================= */

    .center {
        position:relative !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;
    }


    .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;

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

        padding:0 5px !important;

        font-size:10px !important;
    }


    #messages {
        flex:1 1 auto !important;

        width:100% !important;

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

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

        -webkit-overflow-scrolling:touch;
    }


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

    .toolbar {
        flex:0 0 auto !important;

        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;

        align-items:center !important;

        gap:3px !important;

        padding:3px !important;

        box-sizing:border-box !important;

        overflow:visible !important;
    }


    .toolbar button,
    .toolbar select {
        width:auto !important;

        min-width:0 !important;

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

        padding:0 5px !important;

        font-size:9px !important;

        white-space:nowrap !important;

        border-radius:5px !important;
    }


    /* =========================================
       MESSAGE INPUT
    ========================================= */

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

        width:100% !important;

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

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

        gap:4px !important;

        padding:3px !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }


    #input {
        flex:1 1 auto !important;

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

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

        padding:0 7px !important;

        font-size:11px !important;

        box-sizing:border-box !important;
    }


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

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

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

        padding:0 6px !important;

        font-size:10px !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:flex !important;
        flex-direction:column !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 {
        flex:1 1 auto !important;

        min-height:0 !important;

        overflow:hidden !important;
    }


    #usersListUI {
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }


    /*
       Όποιο panel ακολουθεί το users panel
       (Parea Radio) μένει κάτω.
    */

    .right > .panel:not(.users-panel) {
        flex:0 0 auto !important;
        max-height:35% !important;
    }


    /* =========================================
       COMPACT PANELS
    ========================================= */

    .panel {
        min-width:0 !important;
        min-height:0 !important;

        box-sizing:border-box !important;
    }


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

        padding:0 4px !important;

        font-size:9px !important;
    }


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


    /*
       Drawers απενεργοποιημένα σε αυτή
       τη desktop-like portrait διάταξη.
    */

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


    #pareaMobileOverlay {
        display:none !important;
        pointer-events:none !important;
    }

}