/* =========================================================
   PAREACLUB MOBILE / TABLET UI V1
   Desktop remains untouched
========================================================= */

/*
 * Από προεπιλογή τα mobile στοιχεία
 * δεν υπάρχουν οπτικά στο desktop.
 */
.parea-mobile-only {
    display: none !important;
}


/* =========================================================
   PHONES / SMALL TABLETS
========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /*
     * MOBILE TOP BAR
     */
    #pareaMobileBar {
        display: flex !important;
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        height: 54px;

        align-items: center;
        justify-content: space-between;

        padding:
            env(safe-area-inset-top, 0px)
            10px
            0;

        box-sizing: border-box;

        background: rgba(12, 18, 32, .97);

        border-bottom:
            1px solid rgba(255,255,255,.10);

        z-index: 20000;
    }


    #pareaMobileTitle {
        flex: 1;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        text-align: center;

        font-size: 16px;
        font-weight: 700;
    }


    .parea-mobile-nav-btn {
        width: 44px;
        height: 42px;

        border: 0;
        border-radius: 10px;

        font-size: 21px;

        cursor: pointer;
        touch-action: manipulation;
    }


    /*
     * Το CHAT γίνεται η κύρια οθόνη.
     */
    .center {
        position: relative !important;

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

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-top: 54px;

        box-sizing: border-box;
    }


    /*
     * LEFT = ROOMS DRAWER
     */
    .left {
        position: fixed !important;

        top: 54px;
        bottom: 0;
        left: 0;

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

        z-index: 19000;

        transform:
            translateX(-105%);

        transition:
            transform .22s ease;

        overflow-y: auto;

        box-shadow:
            12px 0 30px rgba(0,0,0,.35);
    }


    body.parea-mobile-rooms-open
    .left {
        transform:
            translateX(0);
    }


    /*
     * RIGHT = USERS DRAWER
     */
    .right {
        position: fixed !important;

        top: 54px;
        bottom: 0;
        right: 0;

        width: min(88vw, 360px) !important;

        z-index: 19000;

        transform:
            translateX(105%);

        transition:
            transform .22s ease;

        overflow-y: auto;

        box-shadow:
            -12px 0 30px rgba(0,0,0,.35);
    }


    body.parea-mobile-users-open
    .right {
        transform:
            translateX(0);
    }


    /*
     * Σκοτεινό background όταν ανοίγει drawer.
     */
    #pareaMobileOverlay {
        display: none !important;

        position: fixed;

        inset: 54px 0 0 0;

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

        z-index: 18000;
    }


    body.parea-mobile-drawer-open
    #pareaMobileOverlay {
        display: block !important;
    }


    /*
     * Messages: να μη βγαίνουν έξω
     * από τη μικρή οθόνη.
     */
    #messages {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }


    /*
     * Touch targets.
     */
    button,
    select,
    input,
    textarea {
        touch-action: manipulation;
    }


    #roomList button,
    #usersListUI button {
        min-height: 38px;
    }

}


/* =========================================================
   TABLETS
========================================================= */

@media screen and
       (min-width: 769px) and
       (max-width: 1100px) {

    /*
     * Tablet mode θα εξελιχθεί χωριστά.
     * Δεν αλλάζουμε ακόμη τη desktop
     * διάταξη μέχρι να δοκιμάσουμε V1.
     */

}


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

@media screen and (min-width: 1101px) {

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

}


/* =========================================================
   PAREACLUB MOBILE FULL WIDTH V2
   ONLY PHONES - DESKTOP UNTOUCHED
========================================================= */

@media screen and (max-width: 768px) {

    /*
     * Σβήνουμε το παλιό desktop
     * grid 3 στηλών ΜΟΝΟ στο mobile.
     */
    .layout {
        display: grid !important;

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

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

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

        min-width: 0 !important;

        height: 100dvh !important;

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

        gap: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * Το κεντρικό chat γίνεται
     * η μοναδική βασική στήλη.
     */
    .center {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative !important;

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

        min-width: 0 !important;

        height: 100dvh !important;

        margin: 0 !important;

        padding:
            54px
            0
            0
            0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * Το ίδιο το chat panel
     * γεμίζει όλη την οθόνη.
     */
    .chat-panel {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        height: 100% !important;

        margin: 0 !important;

        border-left: 0 !important;
        border-right: 0 !important;

        border-radius: 0 !important;

        box-sizing: border-box !important;
    }


    /*
     * Messages full width.
     */
    #messages {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /*
     * Όλα τα άμεσα παιδιά του center
     * να μην κρατούν desktop minimum width.
     */
    .center > * {
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /*
     * Τα sidebars εξακολουθούν να είναι
     * drawers και ΔΕΝ καταλαμβάνουν
     * grid column.
     */
    .left,
    .right {
        grid-column: auto !important;
        grid-row: auto !important;
    }

}


/* ========================================================= */



/* =========================================================
   PAREACLUB MOBILE VIEWPORT FIX V3
   Multiple Android / iPhone screen sizes
========================================================= */

@media screen and (max-width: 768px) {

    html {
        width: 100%;
        height: 100%;

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

        overflow: hidden !important;
    }


    body {
        width: 100%;
        height: 100%;

        min-height: 100svh;

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

        overflow: hidden !important;

        overscroll-behavior: none;
    }


    .layout {
        position: fixed !important;

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

        width: 100% !important;

        height: 100vh !important;
        height: 100svh !important;
        height: 100dvh !important;

        max-height: 100dvh !important;

        overflow: hidden !important;
    }


    .center {
        width: 100% !important;

        height: 100vh !important;
        height: 100svh !important;
        height: 100dvh !important;

        max-height: 100dvh !important;

        overflow: hidden !important;
    }


    /*
     * Μόνο τα μηνύματα πρέπει
     * να μπορούν να scrollάρουν.
     */
    #messages {
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior: contain;
    }


    /*
     * Τα drawers scrollάρουν ανεξάρτητα.
     */
    .left,
    .right {
        max-height:
            calc(100dvh - 54px) !important;

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

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }


    /*
     * Προστασία από στοιχεία που
     * προκαλούν horizontal scrolling.
     */
    img,
    video,
    canvas {
        max-width: 100%;
    }


    input,
    textarea,
    select,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media screen and (max-width: 360px) {

    #pareaMobileBar {
        height: 50px;
    }

    #pareaMobileTitle {
        font-size: 15px;
    }

    .parea-mobile-nav-btn {
        width: 40px;
        height: 38px;

        font-size: 19px;
    }

}


/* =========================================================
   LANDSCAPE PHONES
========================================================= */

@media screen and
       (max-width: 900px) and
       (orientation: landscape) {

    #pareaMobileBar {
        height: 48px;
    }

    .center {
        padding-top: 48px !important;
    }

    .left,
    .right {
        top: 48px !important;

        max-height:
            calc(100dvh - 48px) !important;
    }

}



/* =========================================================
   MOBILE DRAWER TOUCH / Z-INDEX FIX V4
========================================================= */

@media screen and (max-width: 768px) {

    /*
     * Το σκοτεινό background μένει
     * ΠΙΣΩ από τα drawers.
     */
    #pareaMobileOverlay {
        z-index: 25000 !important;

        pointer-events: auto !important;
    }


    /*
     * Δωμάτια και χρήστες πάνε
     * ΠΑΝΩ από το overlay.
     */
    .left,
    .right {
        z-index: 26000 !important;

        pointer-events: auto !important;

        opacity: 1 !important;

        filter: none !important;
    }


    /*
     * Ό,τι υπάρχει μέσα στα drawers
     * πρέπει να δέχεται κανονικά touch.
     */
    .left *,
    .right * {
        pointer-events: auto !important;
    }


    /*
     * Η πάνω mobile μπάρα
     * παραμένει πάνω απ' όλα.
     */
    #pareaMobileBar {
        z-index: 27000 !important;
    }


    /*
     * Όταν το drawer είναι κλειστό,
     * να μην μπορεί να πιάνει taps
     * εκτός οθόνης.
     */
    body:not(.parea-mobile-rooms-open)
    .left {
        pointer-events: none !important;
    }

    body:not(.parea-mobile-users-open)
    .right {
        pointer-events: none !important;
    }


    /*
     * Όταν ανοίγει, ενεργοποιείται
     * ξανά πλήρως.
     */
    body.parea-mobile-rooms-open
    .left,
    body.parea-mobile-users-open
    .right {
        pointer-events: auto !important;
    }

}



/* =========================================================
   PAREACLUB MOBILE DRAWER HARD TOUCH FIX V5
   Overlay disabled - drawers remain fully interactive
========================================================= */

@media screen and (max-width: 768px) {

    /*
     * Το overlay απενεργοποιείται τελείως.
     * Ήταν αυτό που έτρωγε τα touch events.
     */
    #pareaMobileOverlay,
    body.parea-mobile-drawer-open #pareaMobileOverlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /*
     * Το βασικό layout.
     */
    .layout {
        z-index: 100 !important;
    }


    /*
     * Τα drawers πάνω από το chat.
     */
    .left,
    .right {
        z-index: 30000 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
    }


    /*
     * Όλα τα στοιχεία τους να δέχονται touch.
     */
    .left *,
    .right *,
    #roomList,
    #roomList *,
    #usersListUI,
    #usersListUI * {
        pointer-events: auto !important;
    }


    /*
     * Κλειστό drawer = δεν πιάνει touch.
     */
    body:not(.parea-mobile-rooms-open) .left {
        pointer-events: none !important;
    }

    body:not(.parea-mobile-users-open) .right {
        pointer-events: none !important;
    }


    /*
     * Ανοιχτό drawer = πλήρως ενεργό.
     */
    body.parea-mobile-rooms-open .left,
    body.parea-mobile-users-open .right {
        pointer-events: auto !important;
    }


    /*
     * Η πάνω μπάρα μένει πρώτη.
     */
    #pareaMobileBar {
        z-index: 31000 !important;
    }

}



/* =========================================================
   MOBILE CAMERA SWITCH BUTTON
========================================================= */

@media screen and (max-width: 1100px) {

    #mobileCameraSwitchBtn {
        min-width: 40px !important;
        height: 34px !important;

        padding: 4px 8px !important;

        border:
            1px solid #35516b !important;

        border-radius:
            7px !important;

        background:
            #091724 !important;

        color:
            #ffffff !important;

        font-size:
            18px !important;

        cursor:
            pointer !important;

        touch-action:
            manipulation;
    }

}

@media screen and (min-width: 1101px) {

    #mobileCameraSwitchBtn {
        display: none !important;
    }

}



/* =========================================================
   PAREACLUB MOBILE BOTTOM TOOLBAR V1
========================================================= */

@media screen and (max-width: 768px) {

    #pareaMobileToolbar {
        display: grid !important;

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        grid-template-columns:
            repeat(5, 1fr);

        min-height: 58px;

        padding:
            5px
            5px
            calc(5px + env(safe-area-inset-bottom, 0px));

        gap: 4px;

        box-sizing: border-box;

        background:
            rgba(7, 12, 22, .98);

        border-top:
            1px solid rgba(255,255,255,.12);

        z-index: 32000;
    }


    .parea-mobile-action {
        min-width: 0;
        min-height: 48px;

        padding: 3px;

        border:
            1px solid #24364d;

        border-radius:
            9px;

        background:
            #101a2a;

        color:
            #fff;

        font-size:
            18px;

        display: flex;
        flex-direction: column;

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

        gap: 1px;

        touch-action: manipulation;
    }


    .parea-mobile-action span {
        display: block;

        max-width: 100%;

        font-size:
            10px;

        line-height:
            12px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .parea-mobile-talk {
        font-weight: 700;
    }


    /*
     * Αφήνουμε χώρο κάτω ώστε
     * το toolbar να μην καλύπτει
     * το input/messages.
     */
    .center {
        padding-bottom:
            calc(
                62px +
                env(safe-area-inset-bottom, 0px)
            ) !important;
    }


    .left,
    .right {
        padding-bottom:
            calc(
                62px +
                env(safe-area-inset-bottom, 0px)
            ) !important;
    }

}


/* Πολύ μικρά κινητά */
@media screen and (max-width: 360px) {

    .parea-mobile-action {
        font-size: 16px;
    }

    .parea-mobile-action span {
        font-size: 9px;
    }

}


/* Desktop: ποτέ mobile toolbar */
@media screen and (min-width: 769px) {

    #pareaMobileToolbar {
        display: none !important;
    }

}



/* =========================================================
   PAREACLUB MOBILE LANDSCAPE V1
   Desktop-like 3 column view
   ONLY landscape touch devices
========================================================= */

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

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

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

        overflow: hidden !important;
    }


    /*
     * Κρατάμε την επάνω mobile bar.
     */
    #pareaMobileBar {
        display: flex !important;

        height: 46px !important;
        min-height: 46px !important;
    }


    /*
     * Η κάτω mobile toolbar κρύβεται
     * στο landscape γιατί έχουμε πλέον
     * τα κανονικά controls μέσα στα panels.
     */
    #pareaMobileToolbar {
        display: none !important;
    }


    /*
     * ΤΡΕΙΣ ΣΤΗΛΕΣ:
     * Rooms/Camera | Main Chat | Users
     */
    .layout {
        position: fixed !important;

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

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

        display: grid !important;

        grid-template-columns:
            minmax(150px, 21vw)
            minmax(0, 1fr)
            minmax(165px, 23vw) !important;

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

        gap: 3px !important;

        padding: 3px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * LEFT:
     * Rooms επάνω / Camera κάτω.
     */
    .left {
        position: relative !important;

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

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

        display: grid !important;

        grid-template-rows:
            minmax(100px, 1fr)
            minmax(135px, 42%) !important;

        gap: 3px !important;

        padding: 0 !important;

        transform: none !important;

        overflow: hidden !important;

        pointer-events: auto !important;

        z-index: 1 !important;

        box-shadow: none !important;
    }


    /*
     * CENTER = Main Chat
     */
    .center {
        position: relative !important;

        grid-column: auto !important;
        grid-row: auto !important;

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

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * RIGHT = Users
     */
    .right {
        position: relative !important;

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

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

        padding: 0 !important;

        transform: none !important;

        overflow: hidden !important;

        pointer-events: auto !important;

        z-index: 1 !important;

        box-shadow: none !important;
    }


    /*
     * Όλα τα panels να χρησιμοποιούν
     * όλο το διαθέσιμο ύψος.
     */
    .left .panel,
    .center .panel,
    .right .panel {
        min-width: 0 !important;
        min-height: 0 !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /*
     * Rooms και Users scrollάρουν
     * μέσα στη δική τους περιοχή.
     */
    #roomList,
    #usersListUI {
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
    }


    /*
     * Main messages scroll.
     */
    #messages {
        min-width: 0 !important;

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

        -webkit-overflow-scrolling: touch;
    }


    /*
     * Λίγο μικρότερα στοιχεία,
     * αλλά όχι desktop-microscopic.
     */
    .panel-title {
        min-height: 25px !important;
        height: 25px !important;

        padding: 0 5px !important;

        font-size: 11px !important;
    }


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


    /*
     * Camera panel να χωράει
     * χωρίς να βγαίνει κάτω.
     */
    .camera-panel {
        min-height: 0 !important;
        height: 100% !important;

        overflow: hidden !important;
    }


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

        object-fit: cover;
    }


    /*
     * Τα drawers δεν χρησιμοποιούνται
     * στο landscape.
     */
    body.parea-mobile-rooms-open .left,
    body.parea-mobile-users-open .right {
        transform: none !important;
    }


    /*
     * Δεν χρειαζόμαστε overlay.
     */
    #pareaMobileOverlay {
        display: none !important;
        pointer-events: none !important;
    }

}


/* =========================================================
   VERY SMALL LANDSCAPE PHONES
========================================================= */

@media screen
       and (orientation: landscape)
       and (max-height: 430px)
       and (pointer: coarse) {

    .layout {
        grid-template-columns:
            minmax(135px, 20vw)
            minmax(0, 1fr)
            minmax(145px, 22vw) !important;
    }

    .left {
        grid-template-rows:
            minmax(90px, 1fr)
            minmax(115px, 40%) !important;
    }

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

        font-size: 10px !important;
    }

}



/* =========================================================
   PAREACLUB MOBILE LOGIN CLEAN MODE
   Login = μόνο φόρμα εισόδου
========================================================= */

@media screen and (max-width: 1100px) {

    /*
     * Όταν το loginScreen είναι ορατό,
     * δεν θέλουμε καθόλου mobile controls.
     */
    body:has(#loginScreen:not([style*="display: none"]))
    #pareaMobileBar,

    body:has(#loginScreen:not([style*="display: none"]))
    #pareaMobileToolbar {

        display: none !important;
    }


    /*
     * Στο login δεν χρειαζόμαστε
     * extra padding από mobile bars.
     */
    body:has(#loginScreen:not([style*="display: none"]))
    .center {

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

}



/* =========================================================
   JS FALLBACK FOR LOGIN MODE
========================================================= */

@media screen and (max-width: 1100px) {

    body.parea-login-visible
    #pareaMobileBar,

    body.parea-login-visible
    #pareaMobileToolbar {

        display: none !important;
    }


    body.parea-login-visible
    .center {

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

}

/* =========================================
   HIDE MOBILE BOTTOM TOOLBAR
========================================= */

@media screen and (max-width: 768px) {

    #pareaMobileToolbar {
        display: none !important;
    }

}