/* ===== PAREACLUB MOBILE CLASSIC V1 START ===== */

/*
 * Classic 3-column mobile layout.
 * Ενεργοποιείται ΜΟΝΟ σε κινητά έως 650px.
 * Desktop / laptop παραμένουν ανέγγιχτα.
 */
@media screen and (max-width:650px) {

    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /*
     * 3 ΣΤΗΛΕΣ:
     * δωμάτια | chat | χρήστες
     */
    .layout {
        width: 100vw !important;
        height: calc(100dvh - 45px) !important;

        display: grid !important;

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

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

        gap: 2px !important;
        padding: 2px !important;

        overflow: hidden !important;
    }

    /*
     * ΑΡΙΣΤΕΡΑ:
     * rooms επάνω + camera κάτω.
     */
    .left {
        grid-column: 1 !important;
        grid-row: 1 !important;

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

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

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

        gap: 2px !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;
        overflow: hidden !important;
    }

    /*
     * ΚΕΝΤΡΟ:
     * κύριο chat.
     */
    .center {
        grid-column: 2 !important;
        grid-row: 1 !important;

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

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

        display: block !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        overflow: hidden !important;
    }

    /*
     * ΔΕΞΙΑ:
     * users.
     */
    .right {
        grid-column: 3 !important;
        grid-row: 1 !important;

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

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

        display: block !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        overflow: hidden !important;
    }

    .panel {
        border-radius: 3px !important;
    }

    /* =========================
       ROOM LIST
       ========================= */

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

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

        min-height: 0 !important;
        overflow: hidden !important;
    }

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

        padding: 0 3px !important;

        font-size: 8px !important;
        line-height: 1 !important;

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

    #roomList {
        flex: 1 1 auto !important;

        min-height: 0 !important;

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

    .room-item {
        min-height: 23px !important;

        gap: 2px !important;
        padding: 2px 3px !important;

        font-size: 8px !important;
        line-height: 1.05 !important;

        overflow: hidden !important;
    }

    .room-count {
        min-width: 22px !important;

        padding: 1px 2px !important;

        font-size: 7px !important;

        flex: 0 0 auto !important;
    }

    .parea-room-list-main-icon {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
        margin-right: 1px !important;
    }

    /* =========================
       CAMERA - ΚΑΤΩ ΑΡΙΣΤΕΡΑ
       ========================= */

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

        min-height: 0 !important;

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

        overflow: hidden !important;
    }

    .camera-user {
        min-height: 23px !important;

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

        font-size: 8px !important;
    }

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

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

        overflow: hidden !important;
    }

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

        object-fit: cover !important;
    }

    #cameraPlaceholder {
        gap: 2px !important;

        padding: 3px !important;

        font-size: 7px !important;
        text-align: center !important;
    }

    .media-row {
        grid-template-columns: 1fr 1fr !important;

        gap: 2px !important;
        padding: 2px !important;
    }

    .media-row button {
        height: 23px !important;

        padding: 0 2px !important;

        font-size: 7px !important;
    }

    .volume-row {
        min-height: 23px !important;

        gap: 2px !important;
        padding: 2px 3px !important;

        font-size: 7px !important;
    }

    /* =========================
       ΚΥΡΙΟ CHAT
       ========================= */

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

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

        display: grid !important;

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

        overflow: hidden !important;
    }

    .chat-header {
        min-width: 0 !important;

        padding: 0 4px !important;

        gap: 2px !important;

        font-size: 8px !important;
    }

    .chat-header-right {
        gap: 3px !important;

        min-width: 0 !important;
    }

    #onlineCounter {
        font-size: 7px !important;
    }

    #clearHistoryBtn {
        padding: 2px 3px !important;
        font-size: 7px !important;
    }

    #messages {
        width: 100% !important;

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

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

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

        font-size: 9px !important;
        line-height: 1.18 !important;
    }

    #messages li {
        margin-bottom: 2px !important;

        padding: 3px 4px !important;

        border-radius: 3px !important;

        font-size: 9px !important;
        line-height: 1.18 !important;

        word-break: break-word !important;
    }

    #messages img {
        width: auto !important;

        max-width: 92% !important;
        max-height: 150px !important;

        object-fit: contain !important;
    }

    .message-user {
        margin-right: 2px !important;

        font-size: 9px !important;
    }

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

    .toolbar {
        min-width: 0 !important;

        gap: 2px !important;
        padding: 2px 3px !important;

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

        white-space: nowrap !important;
    }

    .toolbar span,
    .toolbar label {
        font-size: 7px !important;
    }

    .toolbar button,
    .toolbar select {
        height: 24px !important;

        padding: 0 4px !important;

        font-size: 7px !important;

        flex: 0 0 auto !important;
    }

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

    #form {
        width: 100% !important;

        min-width: 0 !important;

        display: grid !important;

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

        gap: 2px !important;
        padding: 3px !important;
    }

    #input {
        width: 100% !important;

        min-width: 0 !important;

        padding: 0 5px !important;

        font-size: 9px !important;
    }

    #form button {
        min-width: 0 !important;

        padding: 0 2px !important;

        font-size: 7px !important;
    }

    /* =========================
       USERS - ΔΕΞΙΑ
       ========================= */

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

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

        display: grid !important;

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

        overflow: hidden !important;
    }

    .tabs {
        min-width: 0 !important;

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

    .tab {
        min-width: 0 !important;

        padding: 0 1px !important;

        font-size: 6px !important;

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

    #usersListUI {
        width: 100% !important;

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

        display: block !important;

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

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

    .user-item {
        min-height: 25px !important;

        gap: 3px !important;
        padding: 2px 3px !important;

        overflow: hidden !important;
    }

    .user-status {
        width: 5px !important;
        height: 5px !important;

        flex: 0 0 5px !important;
    }

    .user-avatar {
        width: 18px !important;
        height: 18px !important;

        flex: 0 0 18px !important;

        font-size: 7px !important;
    }

    .user-name {
        min-width: 0 !important;

        font-size: 8px !important;

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

    .users-help {
        display: none !important;
    }

    /*
     * Κανένα panel δεν γίνεται mobile drawer.
     * Όλα μένουν ορατά στις 3 στήλες.
     */
    .left,
    .center,
    .right,
    .rooms-panel,
    .camera-panel,
    .chat-panel,
    .users-panel {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== PAREACLUB MOBILE CLASSIC V1 END ===== */

/* =========================================================
   PAREACLUB MOBILE CLASSIC V2 FORCE OVERRIDE

   Loaded AFTER mobile.css.
   Phones only.
   ========================================================= */

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

    /*
     * Το mobile.css έκανε το layout μία στήλη.
     * Το γυρίζουμε σε πραγματικές 3 στήλες.
     */
    .layout {
        position: fixed !important;

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

        width: 100vw !important;

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

        display: grid !important;

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

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

        gap: 2px !important;
        padding: 2px !important;

        margin: 0 !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /*
     * Ακυρώνουμε τα mobile drawers.
     */
    .left,
    .center,
    .right {
        position: static !important;

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

        transform: none !important;
        transition: none !important;

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

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

        max-width: none !important;

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

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * LEFT
     */
    .left {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: auto !important;

        display: grid !important;

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

        gap: 2px !important;
    }


    /*
     * CENTER
     */
    .center {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: auto !important;

        display: block !important;

        /*
         * mobile.css είχε padding-top:54px.
         * Δεν το θέλουμε γιατί το layout
         * βρίσκεται ήδη κάτω από το mobile bar.
         */
        padding-top: 0 !important;
    }


    /*
     * RIGHT
     */
    .right {
        grid-column: 3 !important;
        grid-row: 1 !important;

        width: auto !important;

        display: block !important;
    }


    /*
     * Ακόμα κι αν το JS βάλει drawer classes,
     * οι στήλες δεν θα μετακινούνται.
     */
    body.parea-mobile-rooms-open .left,
    body.parea-mobile-users-open .right {
        transform: none !important;
    }


    /*
     * Δεν χρειαζόμαστε σκοτεινό overlay,
     * αφού οι πλευρές είναι πάντα ορατές.
     */
    #pareaMobileOverlay,
    body.parea-mobile-drawer-open
    #pareaMobileOverlay {
        display: none !important;
    }


    /*
     * Ασφάλεια για τα panels.
     */
    .rooms-panel,
    .camera-panel,
    .chat-panel,
    .users-panel {
        width: 100% !important;

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

        max-width: 100% !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Το chat γεμίζει μόνο τη μεσαία στήλη.
     */
    .chat-panel {
        height: 100% !important;
        max-height: 100% !important;

        margin: 0 !important;

        border-left-width: 1px !important;
        border-right-width: 1px !important;

        border-radius: 3px !important;
    }


    /*
     * Οι λίστες μένουν scrollable.
     */
    #roomList,
    #usersListUI,
    #messages {
        min-width: 0 !important;
        min-height: 0 !important;

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