/* =========================================================
   PAREACLUB PREMIUM 3D CHAT V1
   DESKTOP ONLY
   Gold / Navy / Blue / Purple LED
========================================================= */

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

    :root {
        --pc-gold: #d5a620;
        --pc-gold-light: #ffe084;
        --pc-blue: #356cff;
        --pc-cyan: #39c9ff;
        --pc-purple: #8b4dff;
        --pc-bg1: #111a29;
        --pc-bg2: #070c14;
        --pc-black: #02050a;
    }


    /* =====================================================
       TOP BAR
    ===================================================== */

    #mainApp .topbar {
        min-height: 42px !important;

        background:
            linear-gradient(
                180deg,
                #101722 0%,
                #070c13 58%,
                #03070c 100%
            ) !important;

        border-bottom:
            1px solid rgba(213,166,32,.75) !important;

        box-shadow:
            0 4px 15px rgba(0,0,0,.55),
            inset 0 -1px 0 rgba(255,196,45,.12) !important;
    }


    #mainApp .brand {
        color: #fff !important;

        font-weight: 900 !important;

        letter-spacing: .8px;

        text-shadow:
            0 0 8px rgba(80,160,255,.20),
            0 1px 2px #000;
    }


    /* =====================================================
       GLOBAL 3D BUTTON
    ===================================================== */

    #mainApp button {
        position: relative;

        color: #f7f9ff !important;

        border:
            1px solid rgba(213,166,32,.88) !important;

        border-radius:
            7px !important;

        background:
            linear-gradient(
                180deg,
                #24324a 0%,
                #111c2d 45%,
                #070c15 100%
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 -2px 0 rgba(0,0,0,.72),
            0 3px 0 #020409,
            0 5px 10px rgba(0,0,0,.50),
            0 0 7px rgba(213,166,32,.08) !important;

        font-weight: 700 !important;

        text-shadow:
            0 1px 2px #000;

        transition:
            transform .10s ease,
            filter .14s ease,
            border-color .14s ease,
            box-shadow .14s ease !important;
    }


    #mainApp button::before {
        content: "";

        position: absolute;

        top: 1px;
        left: 8%;
        right: 8%;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,230,150,.52),
                rgba(100,210,255,.28),
                transparent
            );

        pointer-events: none;
    }


    #mainApp button:hover {
        transform: translateY(-2px);

        filter: brightness(1.13);

        border-color:
            var(--pc-gold-light) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -2px 0 rgba(0,0,0,.68),
            0 4px 0 #020409,
            0 7px 14px rgba(0,0,0,.55),
            0 0 13px rgba(255,190,40,.16) !important;
    }


    #mainApp button:active {
        transform: translateY(3px) !important;

        filter: brightness(.90);

        box-shadow:
            inset 0 3px 8px rgba(0,0,0,.65),
            0 1px 0 #020409,
            0 2px 4px rgba(0,0,0,.55) !important;
    }


    /* =====================================================
       TOP BUTTONS
    ===================================================== */

    #logoutBtn,
    #settingsBtn,
    #openDjPlayerBtn {
        min-height: 31px !important;

        padding:
            5px 14px !important;

        font-size:
            12px !important;
    }


    /* EXIT */
    #logoutBtn {
        border-color:
            rgba(255,91,91,.8) !important;

        background:
            linear-gradient(
                180deg,
                #4b2027,
                #291016 48%,
                #100609
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.20),
            0 3px 0 #080204,
            0 5px 11px rgba(0,0,0,.50),
            0 0 8px rgba(255,40,60,.12) !important;
    }


    #logoutBtn:hover {
        border-color:
            #ff7777 !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.25),
            0 4px 0 #080204,
            0 7px 14px rgba(0,0,0,.50),
            0 0 14px rgba(255,50,70,.25) !important;
    }


    /* SETTINGS */
    #settingsBtn {
        border-color:
            rgba(55,190,255,.72) !important;
    }


    #settingsBtn:hover {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.25),
            0 4px 0 #020409,
            0 7px 14px rgba(0,0,0,.50),
            0 0 14px rgba(50,190,255,.25) !important;
    }


    /* DJ */
    #openDjPlayerBtn {
        border-color:
            rgba(166,105,255,.75) !important;
    }


    #openDjPlayerBtn:hover {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.25),
            0 4px 0 #020409,
            0 7px 14px rgba(0,0,0,.50),
            0 0 15px rgba(160,80,255,.28) !important;
    }


    /* =====================================================
       MAIN PANELS
    ===================================================== */

    #mainApp .panel {
        border:
            1px solid rgba(213,166,32,.60) !important;

        background:
            linear-gradient(
                180deg,
                rgba(13,20,31,.97),
                rgba(4,8,14,.98)
            );

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.025),
            0 5px 16px rgba(0,0,0,.48) !important;
    }


    /*
     * Δεν πειράζουμε το room background.
     */
    #mainApp .chat-panel {
        background-color:
            #060b12;

        border:
            1px solid rgba(213,166,32,.85) !important;

        box-shadow:
            0 0 0 1px rgba(255,190,40,.06),
            0 5px 17px rgba(0,0,0,.48),
            0 0 12px rgba(90,80,255,.05) !important;
    }


    /* =====================================================
       PANEL TITLES
    ===================================================== */

    #mainApp .panel-title {
        min-height: 30px;

        display: flex;

        align-items: center;

        padding:
            5px 9px !important;

        color:
            #ffffff !important;

        font-weight:
            800 !important;

        background:
            linear-gradient(
                180deg,
                #173da8 0%,
                #0c2473 50%,
                #07143c 100%
            ) !important;

        border-bottom:
            1px solid rgba(213,166,32,.78) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -1px 0 rgba(0,0,0,.65),
            0 2px 6px rgba(0,0,0,.35) !important;

        text-shadow:
            0 1px 2px #000,
            0 0 8px rgba(70,120,255,.22);
    }


    /* =====================================================
       ROOMS LIST
    ===================================================== */

    #roomList {
        padding:
            4px !important;
    }


    #roomList .room-item {
        margin:
            3px 2px !important;

        min-height:
            30px !important;

        padding:
            4px 8px !important;

        border:
            1px solid rgba(126,142,165,.38) !important;

        border-radius:
            7px !important;

        background:
            linear-gradient(
                180deg,
                rgba(27,37,53,.92),
                rgba(7,12,20,.96)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            inset 0 -1px 0 rgba(0,0,0,.65),
            0 2px 3px rgba(0,0,0,.35) !important;

        transition:
            .15s ease;
    }


    #roomList .room-item:hover {
        transform:
            translateX(2px);

        border-color:
            rgba(213,166,32,.85) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.11),
            0 2px 4px rgba(0,0,0,.40),
            0 0 8px rgba(255,190,30,.10) !important;
    }


    #roomList .room-item.active {
        border-color:
            #b9ef24 !important;

        background:
            linear-gradient(
                180deg,
                rgba(30,67,38,.78),
                rgba(8,25,14,.96)
            ) !important;

        color:
            #8cff5b !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 0 10px rgba(105,255,60,.15) !important;
    }


    .parea-room-list-main-icon {
        filter:
            drop-shadow(0 0 4px rgba(45,190,255,.35));
    }


    /* =====================================================
       CAMERA PANEL
    ===================================================== */

    #mainApp .camera-user {
        min-height:
            34px;

        background:
            linear-gradient(
                180deg,
                #111b2a,
                #080d15
            ) !important;

        border-bottom:
            1px solid rgba(213,166,32,.45) !important;
    }


    #mainApp .camera-box {
        border:
            1px solid rgba(100,125,160,.30);

        background:
            radial-gradient(
                circle at center,
                #111c2d,
                #03070d 70%
            ) !important;

        box-shadow:
            inset 0 0 25px rgba(0,0,0,.65);
    }


    #cameraBtn,
    #micBtn {
        border-color:
            rgba(51,199,255,.77) !important;

        background:
            linear-gradient(
                180deg,
                #17486c,
                #0b2b46 48%,
                #061321
            ) !important;

        color:
            #e9fbff !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22),
            0 3px 0 #02070b,
            0 5px 10px rgba(0,0,0,.46),
            0 0 8px rgba(40,190,255,.15) !important;
    }


    #cameraBtn:hover,
    #micBtn:hover {
        border-color:
            #55dcff !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.25),
            0 4px 0 #02070b,
            0 7px 12px rgba(0,0,0,.48),
            0 0 16px rgba(48,200,255,.28) !important;
    }


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

    #imageBtn,
    #smileyBtn,
    #soundsBtn,
    #youtubeBtn,
    #tiktokBtn,
    #clearInputBtn,
    #groupCallBtn {

        min-height:
            30px !important;

        padding:
            4px 11px !important;

        margin:
            2px !important;

        font-size:
            11px !important;
    }


    #groupCallBtn {
        border-color:
            rgba(155,94,255,.92) !important;

        background:
            linear-gradient(
                180deg,
                #403095,
                #241765 52%,
                #100932
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.24),
            0 3px 0 #08031b,
            0 5px 10px rgba(0,0,0,.48),
            0 0 10px rgba(136,69,255,.20) !important;
    }


    #clearInputBtn {
        border-color:
            rgba(242,171,50,.72) !important;
    }


    /* =====================================================
       CHAT INPUT
    ===================================================== */

    #mainApp #form {
        gap:
            7px !important;

        padding:
            7px !important;

        background:
            linear-gradient(
                180deg,
                rgba(10,16,26,.98),
                rgba(3,7,12,.98)
            ) !important;

        border-top:
            1px solid rgba(213,166,32,.72) !important;
    }


    #mainApp #input {
        background:
            linear-gradient(
                180deg,
                #050a12,
                #02050a
            ) !important;

        color:
            #f4f7ff !important;

        border:
            1px solid rgba(218,174,34,.88) !important;

        border-radius:
            7px !important;

        box-shadow:
            inset 0 2px 7px rgba(0,0,0,.75),
            0 0 7px rgba(255,190,40,.06) !important;

        padding:
            0 12px !important;

        transition:
            .15s ease;
    }


    #mainApp #input:focus {
        outline:
            none !important;

        border-color:
            #ffd853 !important;

        box-shadow:
            inset 0 2px 7px rgba(0,0,0,.70),
            0 0 10px rgba(255,200,50,.15) !important;
    }


    /* =====================================================
       SEND BUTTON
    ===================================================== */

    #mainApp #form button[type="submit"] {
        min-width:
            125px !important;

        min-height:
            38px !important;

        border:
            1px solid #6388ff !important;

        border-radius:
            8px !important;

        background:
            linear-gradient(
                180deg,
                #426fff 0%,
                #2148d6 45%,
                #102584 100%
            ) !important;

        font-size:
            13px !important;

        font-weight:
            900 !important;

        letter-spacing:
            .25px;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.32),
            inset 0 -2px 0 rgba(0,0,0,.35),
            0 4px 0 #07164e,
            0 7px 12px rgba(0,0,0,.48),
            0 0 13px rgba(50,100,255,.24) !important;
    }


    #mainApp #form button[type="submit"]:hover {
        border-color:
            #94aaff !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.38),
            0 5px 0 #07164e,
            0 8px 15px rgba(0,0,0,.50),
            0 0 20px rgba(55,105,255,.40) !important;
    }


    /* =====================================================
       RIGHT TABS
    ===================================================== */

    #mainApp .users-panel .tabs {
        padding:
            4px !important;

        gap:
            4px !important;

        background:
            #03070d !important;

        border-bottom:
            1px solid rgba(213,166,32,.62) !important;
    }


    #mainApp .users-panel .tab {
        border-color:
            rgba(77,99,140,.62) !important;

        background:
            linear-gradient(
                180deg,
                #17243a,
                #0a111d
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 2px 3px rgba(0,0,0,.38) !important;
    }


    #mainApp .users-panel .tab.active {
        border-color:
            #ffc226 !important;

        background:
            linear-gradient(
                180deg,
                #e99b0a,
                #a65d00
            ) !important;

        color:
            #fff !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.28),
            0 2px 0 #4a2600,
            0 0 10px rgba(255,170,20,.16) !important;
    }


    /* =====================================================
       USER LIST
    ===================================================== */

    #usersListUI {
        background:
            linear-gradient(
                180deg,
                #080e16,
                #02060a
            ) !important;
    }


    #usersListUI > li {
        margin:
            3px 5px !important;

        border:
            1px solid rgba(85,103,130,.32) !important;

        border-radius:
            6px !important;

        background:
            linear-gradient(
                180deg,
                rgba(25,34,47,.85),
                rgba(7,12,19,.92)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 2px 4px rgba(0,0,0,.28);
    }


    /* =====================================================
       SELECT
    ===================================================== */

    #mainApp select {
        color:
            #fff !important;

        background:
            linear-gradient(
                180deg,
                #17243a,
                #070d17
            ) !important;

        border:
            1px solid rgba(213,166,32,.72) !important;

        border-radius:
            6px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 2px 4px rgba(0,0,0,.35) !important;
    }


    /* =====================================================
       SUBTLE LED BREATHING
    ===================================================== */

    #groupCallBtn,
    #mainApp #form button[type="submit"] {
        animation:
            pareaPremiumLed 2.8s ease-in-out infinite alternate;
    }


    @keyframes pareaPremiumLed {

        from {
            filter:
                brightness(.95);
        }

        to {
            filter:
                brightness(1.12);
        }

    }

}



/* =========================================================
   PAREACLUB GLOBAL CAMERA LOCK VISUAL V2
========================================================= */

#mainApp #cameraBtn.parea-camera-global-disabled,
#mainApp #cameraBtn:disabled {

    opacity:
        .38 !important;

    filter:
        grayscale(1)
        brightness(.58)
        blur(.25px) !important;

    cursor:
        not-allowed !important;

    pointer-events:
        none !important;

    color:
        #a8adb6 !important;

    background:
        linear-gradient(
            180deg,
            #272b31,
            #16191e
        ) !important;

    border:
        1px solid #565b63 !important;

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.55) !important;

    transform:
        none !important;
}


#pareaMobileCamera:disabled {
    opacity:
        .35 !important;

    filter:
        grayscale(1)
        brightness(.55) !important;

    pointer-events:
        none !important;

    cursor:
        not-allowed !important;
}