* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #1e1f22;
    color: #dbdee1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px 0; /* Небольшие отступы сверху и снизу */
}

.container {
    background-color: #313338;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    
    /* Растягиваем по высоте экрана за вычетом отступов */
    height: calc(100vh - 40px); 
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

h2, h3 {
    margin-bottom: 15px;
    color: #fff;
}

p {
    color: #b5bac1;
    margin-bottom: 15px;
    font-size: 14px;
}

.form-group {
    display: flex;
    gap: 10px;
}

input {
    flex: 1;
    padding: 12px;
    border-radius: 4px;
    border: none;
    background-color: #1e1f22;
    color: #fff;
    font-size: 14px;
}

input:focus {
    outline: 2px solid #5865f2;
}

button {
    padding: 12px 20px;
    border: none;
    background-color: #5865f2;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

button:hover {
    background-color: #4752c4;
}

/* Стили чата */
#chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #3f4147;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.chat-header h3 {
    margin-bottom: 0;
}

#user-badge {
    font-size: 13px;
    background: #232428;
    padding: 4px 10px;
    border-radius: 12px;
}

#messages-box {
    flex: 1; /* Занимает всё свободное пространство */
    overflow-y: auto;
    background-color: #2b2d31;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msg {
    background-color: #383a40;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 85%;
    align-self: flex-start;
    word-break: break-word;
}

.msg.my-msg {
    background-color: #5865f2;
    align-self: flex-end;
    color: #fff;
}

.msg-author {
    font-size: 12px;
    font-weight: bold;
    color: #00aff4;
    margin-bottom: 3px;
}

.msg.my-msg .msg-author {
    color: #e3e5e8;
}

.msg-text {
    font-size: 14px;
}

.error-msg {
    color: #fa777c;
    margin-top: 10px;
    font-size: 13px;
}

.msg-time {
    font-size: 10px;
    color: #949ba4;
    margin-left: 8px;
    align-self: flex-end;
}

#users-online {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#users-online button {
    background: #383a40;
    text-align: left;
    padding: 8px;
    font-size: 13px;
}
#users-online button:hover {
    background: #4752c4;
}

/* Контейнер для списка контактов */
.users-sidebar {
    background-color: #2b2d31;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    max-height: 130px;
    overflow-y: auto;
}

.users-sidebar h4 {
    margin: 0 0 10px 0;
    font-size: 11px;
    color: #949ba4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Кнопка-контакт пользователя */
.user-contact-btn {
    background-color: #35373c;
    color: #dbdee1;
    border: 1px solid #4e5058;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-contact-btn:hover {
    background-color: #4e5058;
}

/* Активный выбранный чат */
.user-contact-btn.active-chat {
    background-color: #5865f2;
    border-color: #5865f2;
    color: #ffffff;
}

/* Оффлайн пользователи становятся полупрозрачными */
.user-contact-btn.user-offline {
    opacity: 0.45;
}

/* Кругляшки статуса */
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.unread-badge {
    background-color: #f23f43; /* Красный цвет Discord */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 12px;
    margin-left: auto; /* Сдвигает бейдж в правый край кнопки */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Контейнер аккордеона */
.admin-note-accordion {
    background-color: #2b2d31;
    border: 1px solid #3f4147;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* Кнопка-переключатель */
.accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accordion-toggle:hover {
    background-color: #35373c;
}

/* Стрелочка индикатора */
.accordion-arrow {
    font-size: 10px;
    color: #949ba4;
    transition: transform 0.2s ease;
}

/* Поворот стрелки при активации */
.accordion-toggle.active .accordion-arrow {
    transform: rotate(180deg);
}

/* Контейнер содержимого заметки */
.accordion-content {
    padding: 12px;
    border-top: 1px solid #3f4147;
    background-color: #232428;
    font-size: 13px;
    color: #dbdee1;
    line-height: 1.5;
    
    /* Сохраняем переносы строк, пробелы и защищаем от вылезания текста */
    /*white-space: pre-wrap;*/ 
    #admin-note-text {
    white-space: pre-wrap; /* Сохраняем переносы строк только для самого текста из БД */
}
    word-break: break-word;
    
    /* Ограничиваем максимальную высоту скроллом, чтобы заметка не перекрыла весь чат */
    max-height: 150px;
    overflow-y: auto;
}

/* Оптимизация интерфейса для мобильных экранов (шириной до 480px) */
@media (max-width: 480px) {
    body {
        padding: 0; /* Убираем внешние отступы вокруг чата */
        align-items: stretch; /* Растягиваем контейнер на всю высоту */
    }

    .container {
        height: 100vh; /* Чат занимает ровно 100% высоты экрана */
        border-radius: 0; /* Убираем скругления углов, так как рамок больше нет */
        padding: 12px; /* Уменьшаем внутренние поля с 25px до 12px */
        box-shadow: none; /* Тень на весь экран мобильного не нужна */
    }

    /* Дополнительная микро-оптимизация пространства внутри чата */
    #messages-box {
        padding: 10px;
        margin-bottom: 10px;
    }

    .users-sidebar {
        margin-bottom: 10px;
        max-height: 110px; /* Немного уменьшаем высоту списка контактов */
    }

    .chat-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
}

/* === ЕДИНЫЙ КАСТОМНЫЙ СКРОЛЛБАР ДЛЯ ПК (ОБНОВЛЕННЫЙ) === */

/* Стандартные свойства для Firefox (группируем все три контейнера) */
#messages-box,
.users-sidebar,
.accordion-content {
    scrollbar-width: thin;
}

/* Настраиваем цвета для Firefox индивидуально, так как фоны блоков слегка отличаются */
#messages-box,
.users-sidebar {
    scrollbar-color: #1e1f22 #2b2d31;
}
.accordion-content {
    scrollbar-color: #1e1f22 #232428;
}

/* Стили для Chrome, Safari и Edge (WebKit) */
#messages-box::-webkit-scrollbar,
.users-sidebar::-webkit-scrollbar,
.accordion-content::-webkit-scrollbar {
    width: 8px; /* Тонкий размер для всех полос прокрутки */
}

#messages-box::-webkit-scrollbar-track,
.users-sidebar::-webkit-scrollbar-track,
.accordion-content::-webkit-scrollbar-track {
    background-color: transparent; /* Дорожка становится прозрачной и сливается с фоном своего блока! */
    border-radius: 4px;
}

#messages-box::-webkit-scrollbar-thumb,
.users-sidebar::-webkit-scrollbar-thumb,
.accordion-content::-webkit-scrollbar-thumb {
    background-color: #1e1f22; /* Однотонный темный ползунок */
    border-radius: 4px;
}

/* Изменение цвета ползунков при наведении мыши */
#messages-box::-webkit-scrollbar-thumb:hover,
.users-sidebar::-webkit-scrollbar-thumb:hover,
.accordion-content::-webkit-scrollbar-thumb:hover {
    background-color: #1a1b1e;
}

/* === ЦВЕТНЫЕ КНОПКИ ДЛЯ РАЗНЫХ КОМНАТ === */

/* Кнопка в Админке (Красная) */
button.btn-admin {
    background-color: #da373c;
}
button.btn-admin:hover {
    background-color: #a92b2f;
}

/* Кнопка в Общем чате (Зелёная) */
button.btn-general {
    background-color: #23a55a;
}
button.btn-general:hover {
    background-color: #1a8547;
}

/* Кнопка на Доске объявлений (Жёлтая/Оранжевая) */
button.btn-announcements {
    background-color: #f0b232;
    color: #1e1f22; /* Темный текст для лучшей читаемости на желтом */
}
button.btn-announcements:hover {
    background-color: #e29b19;
}

/* Оформление ссылок в тексте сообщений */
.msg-text a {
    color: #e29b19; /* Красивый желтый цвет ссылок */
    text-decoration: underline; /* Делаем ссылку подчеркнутой */
    transition: color 0.2s ease;
}

.msg-text a:hover {
    color: #0091c8; /* Слегка темнеет при наведении */
}

/* Желтый цвет ссылки в ваших собственных отправленных сообщениях (на синем фоне) */
.msg.my-msg .msg-text a {
    color: #e29b19;
}
.msg.my-msg .msg-text a:hover {
    color: #e3e5e8;
}

.status-dot.online { background-color: #23a55a; }
.status-dot.offline { background-color: #80848e; }