/* General Body and Layout */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* Light mode default background */
    color: #333; /* Light mode default text color */
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #1a1a1a; /* Dark mode background */
    color: #e0e0e0; /* Dark mode text color */
}

/* Theme Toggle Button */
.theme-toggle-container {
    padding: 10px;
    text-align: right;
    background-color: #e0e2e5; /* Light mode header background */
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    margin-bottom: 10px;
}

body.dark-mode .theme-toggle-container {
    background-color: #2a2a2a; /* Dark mode header background */
    border-bottom: 1px solid #333;
}

#themeToggle {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

#themeToggle:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

body.dark-mode #themeToggle {
    background-color: #9b59b6; /* Dark mode button color */
}

body.dark-mode #themeToggle:hover {
    background-color: #7d3ca6;
}

/* Main Layout Wrapper */
.main-layout-wrapper {
    display: flex;
    flex-grow: 1; /* Allows it to take up remaining vertical space */
    justify-content: center; /* Centers the whole block if space allows */
    align-items: flex-start; /* Aligns items to the top */
    padding: 20px;
    gap: 20px; /* Space between main chat and the right sidebar wrapper */
    flex-wrap: wrap; /* Tördelés kisebb képernyőkön */
}

/* Chat Container */
#chat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px; /* Max width for the chat area */
    background-color: #fff; /* Light mode chat background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensures content inside is clipped */
    flex-grow: 1; /* Allows chat to take up available space */
    order: 1; /* Explicitly set order for flexbox */
    min-height: 70vh; /* Minimum magasság a chatnek */
}

body.dark-mode #chat-container {
    background-color: #2b2b2b; /* Dark mode chat background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Chat Main Section */
#chat-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#chat-main h2 {
    color: #007bff; /* Header color */
    text-align: center;
    margin-bottom: 20px;
}

body.dark-mode #chat-main h2 {
    color: #9b59b6; /* Dark mode header color */
}

/* Messages List */
#messages {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto; /* Scroll for messages */
    border: 1px solid #eee; /* Light mode message border */
    border-radius: 8px;
    padding: 10px;
    background-color: #fcfcfc; /* Light mode message area background */
    margin-bottom: 10px;
}

body.dark-mode #messages {
    border: 1px solid #444; /* Dark mode message border */
    background-color: #363636; /* Dark mode message area background */
}

#messages li {
    padding: 8px 0;
    border-bottom: 1px dotted #eee; /* Light mode message separator */
    word-wrap: break-word; /* Tördelje a hosszú szavakat */
}

body.dark-mode #messages li {
    border-bottom: 1px dotted #444; /* Dark mode message separator */
}

#messages li:last-child {
    border-bottom: none;
}

.message-content {
    white-space: pre-wrap; /* Megőrzi a whitespace-t és tördel */
}

/* Szerepkör alapú felhasználónév színek */
.username.admin-user {
    color: #dc3545; /* Piros */
    font-weight: bold;
}

.username.moderator-user {
    color: #007bff; /* Kék */
    font-weight: bold;
}

.username.user-user {
    color: #28a745; /* Zöld */
    font-weight: bold;
}

/* Message Input Area */
.message-input-area {
    display: flex;
    padding-top: 10px;
    border-top: 1px solid #eee;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Tördelés kisebb képernyőkön */
}

body.dark-mode .message-input-area {
    border-top: 1px solid #444;
}

#messageInput {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    background-color: #f9f9f9;
    color: #333;
    min-width: 150px; /* Minimum szélesség mobilra */
}

body.dark-mode #messageInput {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
}

#messageInput::placeholder {
    color: #aaa;
}

body.dark-mode #messageInput::placeholder {
    color: #ccc;
}

#sendButton {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out;
}

#sendButton:hover {
    background-color: #218838;
}

body.dark-mode #sendButton {
    background-color: #2ecc71;
}

body.dark-mode #sendButton:hover {
    background-color: #27ae60;
}

#recipientSelect {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
}

body.dark-mode #recipientSelect {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
}

/* Jobb oldali oldalsáv wrapper */
.right-sidebar-wrapper {
    display: flex;
    flex-direction: column; /* Stacks sidebar and radio vertically */
    gap: 20px; /* Space between users-sidebar and radio-player-section */
    width: 250px; /* Fixed width for the entire right section */
    flex-shrink: 0; /* Prevents this wrapper from shrinking */
    order: 2; /* Positions it after the chat container */
}

/* Users Sidebar */
#users-sidebar {
    width: 100%; /* Fill the wrapper's width */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: fit-content; /* A tartalomhoz igazodik */
    min-width: 200px; /* Fix szélesség kisebb képernyőkön */
    /* REMOVED: margin-left: 20px; */
}

body.dark-mode #users-sidebar {
    background-color: #2b2b2b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#usersOnline h4 {
    color: #007bff;
    margin-top: 0;
}

body.dark-mode #usersOnline h4 {
    color: #9b59b6;
}

#usersOnline ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

#usersOnline li {
    padding: 5px 0;
    color: #555;
}

body.dark-mode #usersOnline li {
    color: #ccc;
}

#logout-link button,
#logout-link a {
    display: inline-block;
    margin-top: 15px;
    color: #dc3545;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

#logout-link button:hover,
#logout-link a:hover {
    color: #c82333;
    text-decoration: underline;
}

body.dark-mode #logout-link button,
body.dark-mode #logout-link a {
    color: #e74c3c;
}

body.dark-mode #logout-link button:hover,
body.dark-mode #logout-link a:hover {
    color: #c0392b;
}

/* Smájli picker stílusok */
.smiley-container {
    position: relative;
    display: inline-block;
}

.smiley-button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .smiley-button {
    background-color: #444;
    border-color: #555;
}

.smiley-button:hover {
    background-color: #e0e0e0;
}

body.dark-mode .smiley-button:hover {
    background-color: #555;
}

.smiley-picker {
    position: absolute;
    bottom: 100%; /* A gomb fölött jelenik meg */
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); /* 40px-es oszlopok */
    gap: 5px;
    max-height: 200px; /* Max magasság, görgethető */
    overflow-y: auto;
    z-index: 1000; /* Legyen a többi elem felett */
    width: 200px; /* Fix szélesség */
}

body.dark-mode .smiley-picker {
    background-color: #363636;
    border-color: #444;
}

.smiley-item {
    width: 30px; /* Kisebb képek */
    height: 30px;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.smiley-item:hover {
    transform: scale(1.1);
}

/* CSS for Smilies in Messages */
.message-smiley {
    height: 4.0em; /* MÉG NAGYOBB MÉRET */
    vertical-align: middle;
    margin: 0 2px;
    display: inline-block;
}

/* Admin és Moderátor linkek */
#users-sidebar p a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

#users-sidebar p a:hover {
    text-decoration: underline;
}

body.dark-mode #users-sidebar p a {
    color: #9b59b6;
}

body.dark-mode #users-sidebar p a:hover {
    color: #bb86fc;
}

/* Rádiólejátszó szekció */
.radio-player-section {
    width: 100%; /* Fill the wrapper's width */
    max-width: 400px; /* Max szélesség (ezt a wrapper szélessége is korlátozza) */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box; /* Padding bele a width-be */
    /* REMOVED: position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; */
    /* REMOVED: margin-top: 20px; */
    /* REMOVED: order: 3; (handled by parent flex-direction) */
    height: fit-content;
}

body.dark-mode .radio-player-section {
    background-color: #2b2b2b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.radio-header {
    color: #007bff;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0;
}

body.dark-mode .radio-header {
    color: #9b59b6;
}

.radio-player {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 5px;
}

.radio-url-control {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Tördelés kisebb képernyőkön */
}

.radio-url-control .message-input {
    flex-grow: 1;
    min-width: 150px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: #333;
}

body.dark-mode .radio-url-control .message-input {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
}

.radio-url-control .message-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out;
}

.radio-url-control .message-button:hover {
    background-color: #0056b3;
}

body.dark-mode .radio-url-control .message-button {
    background-color: #9b59b6;
}

body.dark-mode .radio-url-control .message-button:hover {
    background-color: #7d3ca6;
}

/* Rendszerüzenetek */
.system-message {
    color: #888;
    font-style: italic;
}

body.dark-mode .system-message {
    color: #aaa;
}

/* Privát üzenetek */
.private-message {
    background-color: #e0f7fa; /* Halvány kék háttér */
    border-left: 5px solid #00bcd4; /* Kék csík az oldalán */
    padding-left: 10px;
}

body.dark-mode .private-message {
    background-color: #3b3b4a; /* Sötétebb kék háttér */
    border-left: 5px solid #673ab7; /* Sötétebb kék csík */
}


/* Reszponzív design beállítások */
@media (max-width: 768px) {
    .main-layout-wrapper {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        gap: 10px; /* Mobil nézetben is legyen gap */
    }

    #chat-container, .right-sidebar-wrapper {
        width: 100%;
        max-width: none; /* Ne legyen max-width mobilnézetben */
        margin-left: 0;
        margin-top: 10px;
        order: unset; /* Mobil nézetben visszaáll az alap sorrendbe */
    }

    .right-sidebar-wrapper {
        flex-direction: column; /* Still column on mobile */
        gap: 10px;
    }

    #users-sidebar, .radio-player-section {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

    .message-input-area, .radio-url-control {
        flex-direction: column;
        align-items: stretch;
    }

    #messageInput, .radio-url-control input {
        width: 100%;
    }

    #sendButton, .radio-url-control button {
        width: 100%;
    }

    .smiley-picker {
        width: 100%; /* Kitölti a szélességet */
        left: 0;
        right: 0;
        transform: translateX(0);
        bottom: auto; /* Alulról vagy felülről igazítás */
        top: 0; /* A smiley button felett */
        max-height: 150px;
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    }
    .smiley-item {
        width: 28px;
        height: 28px;
    }
}