/* =========================================================
   PAREACLUB ANDROID PROFESSIONAL UI V2
   ΜΟΝΟ touch / Android-size συσκευές.
   Desktop παραμένει ανέγγιχτο.
========================================================= */


/* =========================================================
   COMMON TOUCH UI
========================================================= */

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

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

    .panel {
        border-radius:7px !important;
        overflow:hidden !important;
    }

    .panel-title {
        font-weight:700 !important;
        letter-spacing:.1px !important;
    }

    #roomList,
    #usersListUI {
        scrollbar-width:thin;
    }

    #roomList > *,
    #usersListUI > * {
        border-radius:5px !important;
    }

    button,
    select,
    input {
        font-family:inherit !important;
    }

}


/* =========================================================
   ANDROID PHONE PORTRAIT
========================================================= */

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

    /*
       TOP MOBILE BAR
    */

    #pareaMobileBar {
        height:50px !important;
        min-height:50px !important;

        padding:4px 7px !important;

        background:
            linear-gradient(
                180deg,
                #081321 0%,
                #050c16 100%
            ) !important;

        border-bottom:
            1px solid #9a7416 !important;

        box-shadow:
            0 3px 12px rgba(0,0,0,.38) !important;
    }


    #pareaMobileTitle {
        font-size:17px !important;
        font-weight:700 !important;

        color:#f2f5fa !important;

        text-shadow:none !important;
    }


    /*
       Τα υπάρχοντα buttons.
       Όχι τεράστια λευκά κουμπιά.
    */

    .parea-mobile-nav-btn {
        width:40px !important;
        min-width:40px !important;

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

        padding:0 !important;

        border:
            1px solid #9a7416 !important;

        border-radius:9px !important;

        background:
            linear-gradient(
                180deg,
                #102034,
                #081321
            ) !important;

        color:#eef5ff !important;

        font-size:19px !important;

        box-shadow:
            0 2px 7px rgba(0,0,0,.30) !important;
    }


    .parea-mobile-nav-btn:active {
        transform:scale(.96);
    }


    /*
       CHAT = όλο το διαθέσιμο πλάτος
    */

    .layout {
        width:100% !important;
        max-width:100% !important;

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

        display:block !important;
    }


    .center {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        padding:
            50px 3px 3px 3px !important;

        box-sizing:border-box !important;
    }


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

        min-width:0 !important;

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

        min-height:0 !important;

        margin:0 !important;

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

        border-radius:6px !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }


    /*
       ROOM HEADER
    */

    .chat-header {
        flex:0 0 auto !important;

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

        padding:0 7px !important;

        font-size:12px !important;

        box-sizing:border-box !important;
    }


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


    /*
       MESSAGES
    */

    #messages {
        flex:1 1 auto !important;

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

        margin:0 !important;

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

        -webkit-overflow-scrolling:touch;

        box-sizing:border-box !important;
    }


    /*
       TOOLBAR:
       μία compact γραμμή όπως στο PC.
       Αν δεν χωράει -> οριζόντιο scroll.
    */

    .toolbar {
        flex:0 0 auto !important;

        width:100% !important;

        min-height:38px !important;

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

        gap:4px !important;

        padding:4px !important;

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

        scrollbar-width:none !important;

        box-sizing:border-box !important;

        background:
            rgba(3,9,16,.97) !important;

        border-top:
            1px solid rgba(180,138,30,.55) !important;
    }


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


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

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

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

        padding:0 8px !important;

        border-radius:6px !important;

        font-size:10px !important;

        white-space:nowrap !important;
    }


    /*
       MESSAGE INPUT
    */

    #form {
        flex:0 0 auto !important;

        width:100% !important;

        min-height:48px !important;

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

        gap:5px !important;

        padding:5px !important;

        box-sizing:border-box !important;

        background:
            rgba(2,8,15,.98) !important;

        border-top:
            1px solid rgba(180,138,30,.55) !important;
    }


    #input {
        flex:1 1 auto !important;

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

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

        padding:0 10px !important;

        font-size:14px !important;

        border-radius:8px !important;

        box-sizing:border-box !important;
    }


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

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

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

        padding:0 10px !important;

        font-size:12px !important;
        font-weight:700 !important;

        border-radius:8px !important;
    }


    /*
       ROOMS DRAWER
    */

    .left {
        top:50px !important;

        width:min(82vw,300px) !important;

        background:#050d17 !important;

        box-shadow:
            10px 0 25px rgba(0,0,0,.48) !important;
    }


    /*
       USERS DRAWER
    */

    .right {
        top:50px !important;

        width:min(84vw,310px) !important;

        background:#050d17 !important;

        box-shadow:
            -10px 0 25px rgba(0,0,0,.48) !important;
    }


    .left .panel,
    .right .panel {
        margin:3px !important;

        border-radius:7px !important;
    }


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


    /*
       Η κάτω παλιά mobile toolbar
       παραμένει κρυφή.
    */

    #pareaMobileToolbar {
        display:none !important;
    }

}


/* =========================================================
   TABLET PORTRAIT
   PC-like 3 columns
========================================================= */

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

    .layout {
        width:100% !important;

        display:grid !important;

        grid-template-columns:
            minmax(165px,22vw)
            minmax(0,1fr)
            minmax(190px,25vw) !important;

        gap:4px !important;

        padding:4px !important;

        box-sizing:border-box !important;
    }


    .left {
        display:grid !important;

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

        gap:4px !important;

        min-width:0 !important;
    }


    .center,
    .right {
        min-width:0 !important;
    }


    .chat-panel {
        height:
            calc(100dvh - 70px) !important;

        min-height:0 !important;

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


    #messages {
        flex:1 1 auto !important;

        min-height:0 !important;

        overflow-y:auto !important;
    }


    .toolbar {
        display:flex !important;
        flex-wrap:wrap !important;

        gap:3px !important;

        padding:4px !important;
    }


    .toolbar button,
    .toolbar select {
        min-height:29px !important;

        padding:0 6px !important;

        font-size:10px !important;
    }


    #form {
        display:flex !important;

        gap:5px !important;

        padding:4px !important;
    }


    #input {
        min-width:0 !important;

        flex:1 1 auto !important;
    }


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

        min-width:100px !important;
    }


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

        font-size:11px !important;
    }


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

}


/* =========================================================
   TABLET / PHONE LANDSCAPE
   Δεν ξαναφτιάχνουμε layout.
   Βελτιώνουμε το υπάρχον PC-like 3-column mode.
========================================================= */

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

    .layout {
        gap:4px !important;
        padding:4px !important;
    }


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


    .toolbar {
        display:flex !important;
        flex-wrap:wrap !important;

        gap:3px !important;

        padding:3px !important;
    }


    .toolbar button,
    .toolbar select {
        height:27px !important;
        min-height:27px !important;

        padding:0 5px !important;

        font-size:9px !important;

        white-space:nowrap !important;
    }


    #form {
        min-height:39px !important;

        gap:4px !important;

        padding:3px !important;
    }


    #input {
        min-width:0 !important;

        height:33px !important;

        font-size:12px !important;
    }


    #form button {
        height:33px !important;

        min-width:90px !important;

        font-size:11px !important;
    }

}


/* =========================================================
   LOGIN
   Ούτε mobile bar ούτε mobile toolbar πριν το login.
========================================================= */

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

    body.parea-login-visible #pareaMobileBar,
    body.parea-login-visible #pareaMobileToolbar {
        display:none !important;
    }

}