@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .overlay {
        z-index: 0 !important;
    }
}

/* ========== RESET & ΒΑΣΙΚΕΣ ΡΥΘΜΙΣΕΙΣ ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background-color: #000428 !important;
}

#chatStage {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

header.chatBack { 
    visibility: hidden; /* Αυτό κρύβει το header - ίσως θέλεις να το αλλάξεις */
}

/* ========== VIDEO CAMERA ========== */
video.userCamera {
    width: 100%;
    height: 10%;     
}

div.myCameraPanel {
    position: absolute;
    bottom: 3px;
    left: 5px;
    width: 220px;
    height: 275px;
    border: 1px solid #333;
    border-radius: 8px;
    background-color: hsla(0, 0%, 0%, 0.4); 
    
}
#localCamera {
    position: absolute;
    width: 216px;
    height: 144px;
    top: 30px;
   
}
div.myCamera {
    position: absolute;
    top: 0px;
    left: -20px;     
}

/* ========== HISTORY PANEL ========== */
div.history {
    position: absolute;
    top: 5px;
    bottom: 110px; /* Αφήνει χώρο για το public message */
    right: 258px;
    left: 230px;    
    border: 1px solid #333;
    background-color: hsla(0, 0%, 0%, 0.4);   
    border-radius: 8px;
    overflow: hidden; /* ΠΡΟΣΘΗΚΗ */
}

.historyTxt {
    position: absolute;
    resize: none;
    height: 100%;
    width: 100%;
    left: 0px;  
    word-break: break-word;
    overflow-x: hidden; 
    overflow-y: auto; /* ΠΡΟΣΘΗΚΗ: scroll αν χρειάζεται */
}

/* ========== PUBLIC MESSAGE PANEL ========== */
div.publicMessage {
    position: absolute;
    bottom: 3px;
    right: 258px;
    left: 230px;
    height: 100px;
    border: px solid #333;
    background-color: hsla(0, 0%, 0%, 0.4);
    border-radius: 8px;

}

.publicTxt {
    position: absolute;
    resize: none;
    height: 100px;
    width: 100%;
    left: 0px;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto; /* ΠΡΟΣΘΗΚΗ */
}

/* ========== EXIT PANEL ========== */
div.exitPanel {
    position: absolute;
    top: 62px; /* ΑΛΛΑΓΗ: από 62px σε 10px */
    left: 10px; 
    
}

/* ========== ROOM LIST ========== */
div.roomList {
    position: absolute;
    top: 38px;
    bottom: 283px; /* Μικρή προσαρμογή */
    left: 5px;
    width: 220px; 
    border: 1px solid #333;
    overflow-x: hidden;
    overflow-y: auto; /* ΠΡΟΣΘΗΚΗ */
    background-color: hsla(0, 0%, 0%, 0.4);
    border-radius: 8px;
}

/* ========== USER LISTS ========== */
div.userList {
    position: absolute;
    top: 40px;
    bottom: 3px;
    right: 3px;
    width: 250px;
    border: 1px solid #333;
    overflow-x: hidden;
    overflow-y: auto; /* ΠΡΟΣΘΗΚΗ */
    background-color: hsla(0, 0%, 0%, 0.4);
    border-radius: 8px;
   
}

div.friendList {
    position: absolute;
    top: 40px;
    bottom: 3px;
    right: 3px;
    width: 250px;
    border: 1px solid #333;
    overflow-x: hidden;
    overflow-y: auto; /* ΠΡΟΣΘΗΚΗ */
    background-color: hsla(0, 0%, 0%, 0.4);
    border-radius: 8px;

}

/* ========== DIALOG ========== */
.dialog {   
    background-color: blueviolet;
    color: #eeeeee; 
    border-radius: 8px;
    z-index: 9999; /* ΠΡΟΣΘΗΚΗ */
}

.roomListLabel {
    position: absolute;
    text-align: left !important;
    left: 10px;
    top: 40px;
    border-radius: 6px;
}

.userListLabel {
    position: absolute;
    text-align: right !important;
    right: 150px;
    top: 60px;
    border-radius: 6px;
}
/* ΠΛΗΡΗΣ ΕΞΑΛΕΙΨΗ ΚΕΝΩΝ - ROOMS */
#roomListPanel {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-collapse: collapse !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

#roomListPanel > div {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
    line-height: normal;
    font-size: 14px;
    box-sizing: border-box !important;
}

/* Αφαίρεση περιθωρίων από όλα τα στοιχεία μέσα στα rooms */
#roomListPanel img,
#roomListPanel label,
#roomListPanel div,
#roomListPanel span,
#roomListPanel [data-role="donut"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ειδικά για το donut που μπορεί να δημιουργεί κενά */
#roomListPanel [data-role="donut"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Κατάργηση οποιουδήποτε περιθωρίου από το container */
.roomList {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-spacing: 0 !important;
}

/* Για το scrollbar αν υπάρχει */
#roomListPanel::-webkit-scrollbar {
    width: 8px;
}

#roomListPanel::-webkit-scrollbar-track {
    background: transparent;
}

#roomListPanel::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
/* ========== ΕΝΙΑΙΑ SCROLLBAR ΓΙΑ ΟΛΕΣ ΤΙΣ ΛΙΣΤΕΣ ========== */

/* Κοινή κλάση για όλες τις λίστες που χρειάζονται scrollbar */
.historyTxt,
.userList,
.friendList,
#userListPanel,
#friendsListPanel,
#allUsersPanel,
#blockPanel,
.roomList,
#roomListPanel,
.publicTxt,
.privatMessagePanel,
div[class*="List"],
div[class*="Panel"] {
    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #888 #1a1a2e;
}

/* Webkit scrollbar (Chrome, Safari, Edge, Opera) */
.historyTxt::-webkit-scrollbar,
.userList::-webkit-scrollbar,
.friendList::-webkit-scrollbar,
#userListPanel::-webkit-scrollbar,
#friendsListPanel::-webkit-scrollbar,
#allUsersPanel::-webkit-scrollbar,
#blockPanel::-webkit-scrollbar,
.roomList::-webkit-scrollbar,
#roomListPanel::-webkit-scrollbar,
.publicTxt::-webkit-scrollbar,
.privatMessagePanel::-webkit-scrollbar,
div[class*="List"]::-webkit-scrollbar,
div[class*="Panel"]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track (background) */
.historyTxt::-webkit-scrollbar-track,
.userList::-webkit-scrollbar-track,
.friendList::-webkit-scrollbar-track,
#userListPanel::-webkit-scrollbar-track,
#friendsListPanel::-webkit-scrollbar-track,
#allUsersPanel::-webkit-scrollbar-track,
#blockPanel::-webkit-scrollbar-track,
.roomList::-webkit-scrollbar-track,
#roomListPanel::-webkit-scrollbar-track,
.publicTxt::-webkit-scrollbar-track,
.privatMessagePanel::-webkit-scrollbar-track,
div[class*="List"]::-webkit-scrollbar-track,
div[class*="Panel"]::-webkit-scrollbar-track {
    background: #1a1a2e;
    border-radius: 10px;
    border: 1px solid #333366;
}

/* Handle (το κινούμενο μέρος) */
.historyTxt::-webkit-scrollbar-thumb,
.userList::-webkit-scrollbar-thumb,
.friendList::-webkit-scrollbar-thumb,
#userListPanel::-webkit-scrollbar-thumb,
#friendsListPanel::-webkit-scrollbar-thumb,
#allUsersPanel::-webkit-scrollbar-thumb,
#blockPanel::-webkit-scrollbar-thumb,
.roomList::-webkit-scrollbar-thumb,
#roomListPanel::-webkit-scrollbar-thumb,
.publicTxt::-webkit-scrollbar-thumb,
.privatMessagePanel::-webkit-scrollbar-thumb,
div[class*="List"]::-webkit-scrollbar-thumb,
div[class*="Panel"]::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #1a73e8, #6b8cae);
    border-radius: 10px;
    border: 2px solid #1a1a2e;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Handle on hover */
.historyTxt::-webkit-scrollbar-thumb:hover,
.userList::-webkit-scrollbar-thumb:hover,
.friendList::-webkit-scrollbar-thumb:hover,
#userListPanel::-webkit-scrollbar-thumb:hover,
#friendsListPanel::-webkit-scrollbar-thumb:hover,
#allUsersPanel::-webkit-scrollbar-thumb:hover,
#blockPanel::-webkit-scrollbar-thumb:hover,
.roomList::-webkit-scrollbar-thumb:hover,
#roomListPanel::-webkit-scrollbar-thumb:hover,
.publicTxt::-webkit-scrollbar-thumb:hover,
.privatMessagePanel::-webkit-scrollbar-thumb:hover,
div[class*="List"]::-webkit-scrollbar-thumb:hover,
div[class*="Panel"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #6b8cae, #8aadcc);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

/* Handle active (όταν γίνεται κλικ) */
.historyTxt::-webkit-scrollbar-thumb:active,
.userList::-webkit-scrollbar-thumb:active,
.friendList::-webkit-scrollbar-thumb:active,
#userListPanel::-webkit-scrollbar-thumb:active,
#friendsListPanel::-webkit-scrollbar-thumb:active,
#allUsersPanel::-webkit-scrollbar-thumb:active,
#blockPanel::-webkit-scrollbar-thumb:active,
.roomList::-webkit-scrollbar-thumb:active,
#roomListPanel::-webkit-scrollbar-thumb:active,
.publicTxt::-webkit-scrollbar-thumb:active,
.privatMessagePanel::-webkit-scrollbar-thumb:active,
div[class*="List"]::-webkit-scrollbar-thumb:active,
div[class*="Panel"]::-webkit-scrollbar-thumb:active {
    background: #4a6fa5;
}

/* Corner (όταν υπάρχουν και οριζόντιο και κάθετο scroll) */
.historyTxt::-webkit-scrollbar-corner,
.userList::-webkit-scrollbar-corner,
.friendList::-webkit-scrollbar-corner,
#userListPanel::-webkit-scrollbar-corner,
#friendsListPanel::-webkit-scrollbar-corner,
#allUsersPanel::-webkit-scrollbar-corner,
#blockPanel::-webkit-scrollbar-corner,
.roomList::-webkit-scrollbar-corner,
#roomListPanel::-webkit-scrollbar-corner,
.publicTxt::-webkit-scrollbar-corner,
.privatMessagePanel::-webkit-scrollbar-corner,
div[class*="List"]::-webkit-scrollbar-corner,
div[class*="Panel"]::-webkit-scrollbar-corner {
    background: #1a1a2e;
}



/* ========== PRIVATE MESSAGE ========== */
div.privatMessagePanel {
    visibility: hidden;
}

/* ========== TEXT EFFECTS ========== */
h1 {
    animation: glow 10s ease-in-out infinite;
}

figure {
    animation: wobble 5s ease-in-out infinite;
    transform-origin: center center;
    transform-style: preserve-3d;  
}

@keyframes wobble {
    0%, 100% { transform: rotate3d(1, 1, 0, 40deg); }
    25% { transform: rotate3d(-1, 1, 0, 40deg); }
    50% { transform: rotate3d(-1, -1, 0, 40deg); }
    75% { transform: rotate3d(1, -1, 0, 40deg); }
}

h1 {
    display: block;
    width: 100%;
    padding: 40px;
    line-height: 1.5;
    font: 800 3em 'Concert One', sans-serif;
    text-transform: uppercase;
    position: relative;
    color: #e4e4e4;
}

@keyframes glow {
    0%, 100% { text-shadow: 0 0 30px red; }
    25% { text-shadow: 0 0 30px orange; }
    50% { text-shadow: 0 0 30px forestgreen; }
    75% { text-shadow: 0 0 30px rgba(145, 215, 255, 0.514); }
}

h1:nth-child(2) { 
    transform: translateZ(5px); 
}
/* ========== LABELS & STYLES ========== */
.label-style {
    color: #ffffff;
    position: absolute;
    font-size: var(--font-size, 16px);
    top: var(--top, 0px);
    left: var(--left, 0px);
}

.div-style {
    background-color: #000066;
    background-image: linear-gradient(rgb(20 17 213 / 0.12), rgb(0, 0, 0));
    border-color: #000066;
    border-style: double;
    border-width: 2px;
}

.div-style:hover {
    background-color: #99bbff;
}

.img-style {
    position: absolute;
    top:8px;
    left:0px;
}

.img-pic {
    width: 18px;
    height: 18px;


}

.img-lock {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 0px;
    left: 75px;
}

.img-radio {
    position: absolute;
    width: 12px;
    height: 12px;
    top: -2px;
    left: 35px;
}

.img-cinema {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 2px;
    left: 55px;
}
#micTalkBtn {
    position: absolute;
    top: 204px;
    left: 66px;
    height: 32px;
    width: 60px;
    background-color: rgb(1, 0, 70);
    border: double #00ffff;
    border-radius: 6px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}