/*
Theme Name: Husky Chat Theme v5.5
Theme URI: http://your-website.com/chat-theme
Author: Your Name
Author URI: http://your-website.com
Description: A WordPress theme styled like a chat interface.
Version: 2.0 Обновил версию после управления видимостью блоков на главной
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: chat, interactive, minimal, dark
Text Domain: chat-theme
*/

/* Общие стили для темной темы */
body {
    font-family: sans-serif;
    margin-top: 0;
    padding: 0;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* overflow: hidden; */ /* Убираем или комментируем эту строку, чтобы разрешить прокрутку */
    box-sizing: border-box;

    /* Интерактивный фон - переливающийся градиент */
    background: linear-gradient(135deg, #4853cd, #7894d5, #000000);
    background-size: 200% 200%;
    animation: gradient-animation 15s ease infinite;
}

/* Анимация градиента */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Убираем стандартные отступы для body, html */
html, body {
    height: 100%;
    width: 100%;
}

body.menu-open {
    overflow: hidden; /* Запрещаем прокрутку основного контента при открытом меню */
}


.chat-container {
    width: 100%;
    max-width: 1100px;
    height: 100vh; /* Занимаем всю высоту видимой области */
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    overflow: hidden; /* Контейнер тоже скрывает свой оверфлоу, прокрутка только внутри .chat-results или самого контейнера в неактивном состоянии */
    transition: all 0.5s ease;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Начальное состояние: только поле ввода видно, центрировано */
.chat-container:not(.chat-active) {
    /* justify-content: center; */ /* Был центр, убираем */
    justify-content: flex-start; /* Выравниваем элементы сверху */
    padding-top: 50px; /* Добавляем верхний отступ, чтобы блоки не прилипали к верху */
    padding-bottom: 50px; /* Добавляем нижний отступ */
    height: auto; /* Высота адаптируется к контенту */
    min-height: 100vh; /* Но минимальная высота все равно 100vh */
    overflow-y: auto; /* Разрешаем прокрутку контейнера, если контент (блоки + поле) не помещается */
    align-items: center; /* Центрируем блоки по горизонтали */
    border-radius: 8px; /* Сохраняем скругление контейнера в неактивном состоянии */
}


.chat-results {
    flex-grow: 0; /* Изначально не занимает место */
    flex-basis: 0; /* Изначально не занимает место */
    padding: 0; /* Изначально нет отступов */
    margin: 0;
    opacity: 0; /* Изначально скрыты визуально */
    visibility: hidden; /* Изначально скрыты для скринридеров и кликов */
    overflow-y: auto; /* **Включаем прокрутку** */
    display: flex;
    flex-direction: column;
    background-color: transparent; /* Изначально прозрачный фон */
    transition: flex-grow 0.5s ease, flex-basis 0.5s ease, opacity 0.5s ease, visibility 0.5s ease, padding 0.5s ease, background-color 0.5s ease;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Активное состояние: чат развернут */
.chat-container.chat-active .chat-results {
    flex-grow: 1; /* Занимает все доступное место */
    flex-basis: auto;
    opacity: 1; /* Полностью видимо */
    visibility: visible;
    /* Был padding: 15px; или 15px 15px 20px 15px; */
    padding: 25px 15px 30px 15px; /* Увеличенные отступы сверху и снизу для прокрутки */
    /* background-color: rgba(40, 40, 40, 0.9); /* Полупрозрачный фон в активном состоянии */
    border-radius: 20px 20px 0px 0px;
    margin-top: 30px; /* Отступ сверху */
}

/* Shared Scrollbar Styles - Применяются к .chat-results, .page-content-container, .sliding-menu, и .chat-container:not(.chat-active) */
.chat-results,
.page-content-container,
.sliding-menu,
.chat-container:not(.chat-active) {
    /* Эти свойства могут быть уже заданы в их основных блоках,
       но повторяем их здесь для ясности, что стили прокрутки применяются к прокручиваемым элементам. */
    /* overflow-y: auto; */
    /* max-height: ... (для page-content-container и chat-container:not(.chat-active)) */

    /* Custom Scrollbar Appearance (Webkit) */
    &::-webkit-scrollbar {
        width: 6px; /* Делаем тоньше */
    }
    &::-webkit-scrollbar-track {
        background: rgba(51, 51, 51, 0.3); /* Полупрозрачный темный трек */
        border-radius: 10px; /* Опционально: может помочь визуально */
    }
    &::-webkit-scrollbar-thumb {
        background-color: rgba(136, 136, 136, 0.6); /* Полупрозрачный серый ползунок */
        border-radius: 3px; /* Половина ширины для скругленных концов */
        border: none; /* Убираем границу для более чистого вида */
    }
    &::-webkit-scrollbar-button {
        display: none; /* Убираем кнопки-стрелки */
    }

    /* Firefox Scrollbar Styles */
    scrollbar-width: thin; /* Самый тонкий доступный */
    scrollbar-color: rgba(136, 136, 136, 0.6) rgba(51, 51, 51, 0.3); /* thumb track (полупрозрачные цвета) */
}


/* Стили для обертки сообщения (аватар + контент) */
.message-wrapper {
    display: flex;
    margin-bottom: 15px; /* Отступ между сообщениями */
    align-items: flex-start; /* Выравнивание элементов по верху */
}

.user-message.message-wrapper {
    justify-content: flex-start; /* Сообщения пользователя справа */
}

.bot-message.message-wrapper {
    justify-content: flex-start; /* Сообщения бота слева */
}

/* Стили аватарки */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Круглая форма */
    /* margin-right: 10px; /* Отступ справа от аватарки бота */
    flex-shrink: 0; /* Запрещаем сжиматься */
    object-fit: cover; /* Обрезка изображения для сохранения пропорций */
}

.user-message .avatar {
    /* margin-right: 0; /* Убираем отступ справа */
    /* margin-left: 10px; /* Отступ слева от аватарки пользователя */
}

/* Стили области контента сообщения (имя + текст) */
.message-content-area {
    display: flex;
    flex-direction: column;
    /* max-width: calc(80% - 50px); /* Максимальная ширина контента с учетом аватарки и отступа */
    max-width: calc(550px); /* Максимальная ширина контента с учетом аватарки и отступа */
}

.user-message .message-content-area {
    align-items: flex-start; /* Имя пользователя выравнивается справа */
}

.bot-message .message-content-area {
    align-items: flex-start; /* Имя бота выравнивается слева */
}

/* Стили имени автора */
.author-name {
    font-size: 0.9em;
    color: #bbb; /* Более тусклый цвет для имени */
    margin-bottom: 4px; /* Отступ между именем и текстом сообщения */
}


/* Стили самого блока сообщения */
.chat-message {
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.4;
    box-sizing: border-box;
    flex-grow: 0; /* Не растягиваем блок сообщения */
}

.bot-message .chat-message {
    background-color: rgba(30, 30, 30, 0.3);
    color: #f0f0f0;
    border-bottom-right-radius: 4px; /* Было border-bottom-left-radius: 4px; */
    border-bottom-left-radius: 18px; /* Восстанавливаем стандартное скругление слева */
}

.user-message .chat-message {
    background-color: rgba(0, 123, 255, 0.9);
    color: white;
    border-bottom-left-radius: 4px; /* Было border-bottom-right-radius: 4px; */
    border-bottom-right-radius: 18px; /* Восстанавливаем стандартное скругление справа */
}

/* Сохраняем стили для содержимого внутри .chat-message */
.chat-message p {
    margin: 0;
}

.chat-message ul {
    margin: 5px 0 5px 20px;
    padding: 0;
}

.chat-message li {
    margin-bottom: 5px;
}

.chat-message a {
    color: #8ab4f8;
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8;
    transition: border-bottom-style 0.2s ease;
}

.chat-message a:hover {
    border-bottom-style: solid;
}

.chat-message h2 {
    color: #fff;
    font-size: 1.2em;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.chat-message h2 .edit-link {
    margin-left: 10px;
    font-size: 0.8em;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    text-decoration: none;
    border-bottom: none;
}

.chat-message h2 .edit-link:hover {
    opacity: 1;
}

.chat-message code {
    background-color: #444;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #ffda79;
}


/* Обертка для поля ввода и кнопки отправки */
.chat-input-area-wrapper {
    display: flex;
    flex-direction: column; /* <-- ИЗМЕНЕНИЕ: Теперь элементы располагаются в столбик */
    padding: 10px 0 0 0; /* Убираем лишние отступы */
    border-top: 1px solid transparent;
    background-color: transparent;
    transition: all 0.5s ease;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    z-index: 2;
}

/* НОВЫЙ СТИЛЬ: Контейнер для строки ввода и кнопок */
.chat-input-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 15px; /* Возвращаем боковые отступы */
    box-sizing: border-box;
}

/* Активное состояние: поле ввода внизу */
.chat-container.chat-active .chat-input-area-wrapper {
    /* border-top: 1px solid #444; */
    /* background-color: rgba(51, 51, 51, 0.9); */
    border-radius: 0px 0px 20px 20px;
    margin-bottom: 70px; /* Убираем нижний отступ в активном состоянии */
}


.chat-input {
    flex-grow: 1;
    /* Увеличиваем левый padding, чтобы текст не залезал под новую кнопку */
    padding: 12px 85px 12px 55px; /* Было 15px слева, стало 55px */
    border: 1px solid #555;
    border-radius: 20px;
    margin-right: -75px;
    margin-left: 15px;
    font-size: 1em;
    background-color: rgba(30, 30, 30, 0.3);
    color: #f0f0f0;
    outline: none;
    transition: border-color 0.2s ease;
    z-index: 1;
}

.chat-input:focus {
    border-color: #0099ff;
}

.chat-input::placeholder {
    color: #aaa;
}

/* Стили для контейнера кнопок (новая обертка) */
.chat-buttons-container {
    display: flex;
    align-items: center;
    position: relative;
    right: 20px; /* Сдвигаем контейнер влево */
    z-index: 2;
    gap: 5px; /* Отступ между кнопками */
}


.chat-send-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 25%;
    cursor: pointer;
    font-size: 1.2em;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    padding: 0; /* Убираем padding */
}

.chat-send-button:hover {
    background-color: #0056b3;
}

.chat-send-button:disabled {
    background-color: #555;
    color: #bbb;
    cursor: not-allowed;
}

/* Стиль для иконки самолетика (Font Awesome) */
.chat-send-button i {
    color: white; /* Цвет иконки */
}


/* НОВЫЕ СТИЛИ ДЛЯ КНОПКИ ЗАГРУЗКИ ФАЙЛА */
.chat-upload-button {
    background-color: #6c757d; /* Серый цвет */
    color: white;
    border: none;
    border-radius: 25%;
    cursor: pointer;
    font-size: 1.1em; /* Размер иконки */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    padding: 0; /* Убираем padding */
}

.chat-upload-button:hover {
    background-color: #5a6268; /* Темнее серый при наведении */
}

.chat-upload-button:disabled {
    background-color: #555;
    color: #bbb;
    cursor: not-allowed;
}

/* Стиль для иконки скрепки (Font Awesome) */
.chat-upload-button i {
    color: white; /* Цвет иконки */
}


/* Скрываем стандартный input type="file" */
.hidden-file-input {
    display: none;
}

/* Стили для отображения загруженного файла в сообщении */
.chat-message .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px; /* Отступ между иконкой/изображением и названием файла */
    margin-top: 10px; /* Отступ сверху, если есть текст сообщения */
    word-break: break-word; /* Перенос слов в названии файла */
}

.chat-message .uploaded-file a {
    color: #8ab4f8; /* Цвет ссылки как у обычных ссылок */
    text-decoration: underline;
    border-bottom: none; /* Убираем пунктир */
}

.chat-message .uploaded-file a:hover {
    text-decoration: none; /* Убираем подчеркивание при наведении */
}

.chat-message .uploaded-file .file-icon {
    font-size: 1.5em; /* Размер иконки файла */
    color: #bbb; /* Цвет иконки файла */
    flex-shrink: 0; /* Не сжимаем иконку */
}

.chat-message .uploaded-file img {
    max-width: 100px; /* Максимальная ширина превью изображения */
    height: auto;
    border-radius: 4px;
    flex-shrink: 0; /* Не сжимаем изображение */
    margin: 0; /* Убираем стандартные margin */
}


/* Стили для списка тегов и категорий ниже заголовка */
.chat-message .term-list {
    margin: -5px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chat-message .term-list li {
    margin: 0;
}

.chat-message .term-list a {
    display: inline-block;
    padding: 4px 10px;
    background-color: #555;
    color: #f0f0f0;
    border-radius: 15px;
    font-size: 0.9em;
    text-decoration: none;
    border-bottom: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.chat-message .term-list a:hover {
    background-color: #666;
    opacity: 0.9;
}

/* Дополнительные стили для содержимого поста */
.chat-message .post-content {
    margin-top: 15px;
}


.chat-message .post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: 4px;
}

.chat-message .post-content h1,
.chat-message .post-content h2,
.chat-message .post-content h3,
.chat-message .post-content h4,
.chat-message .post-content h5,
.chat-message .post-content h6 {
    color: #fff;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.chat-message .post-content a {
    color: #8ab4f8;
    text-decoration: underline;
}


/* Стили для иконки меню (три палочки) */
.menu-icon {
    position: fixed;
    top: 50px;
    left: 20px;
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #f0f0f0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Состояние 'открыто' для иконки (крестик) */
.menu-icon.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.menu-icon.open span:nth-child(2) {
    opacity: 0;
}

.menu-icon.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}


/* Стили для выпадающего меню */
.sliding-menu {
    position: fixed;
    top: 0;
    left: -330px;
    width: 330px;
    height: 100vh;
    background-color: rgba(30, 30, 30, 0.3);
    color: #f0f0f0;
    z-index: 99;
    transition: left 0.3s ease;
    padding: 0; /* УБРАН PADDING */
    display: flex; /* ДОБАВЛЕН FLEX */
    box-sizing: border-box;
    /*  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); */
    overflow: hidden; /* Прокрутка будет внутри правой колонки */
}


/* Состояние 'открыто' для меню */
.sliding-menu.open {
    left: 0; /* Выдвигаем меню на 300px */
}



.sliding-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sliding-menu li {
    margin-bottom: 10px;
}

.sliding-menu a {
    color: #8ab4f8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sliding-menu a:hover {
    color: #fff;
}

/* Стили для затемняющего фона (backdrop) при открытом меню */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98; /* Ниже меню, но выше чата */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Затемняющий фон виден, когда родительский sliding-menu имеет класс open */
/* Используем комбинатор ~ для выбора соседнего элемента */
.sliding-menu.open ~ .menu-backdrop {
    visibility: visible;
    opacity: 1;
}

/* Стили для кнопки "Сохранить WP" */
.save-wp-button {
    background-color: #28a745; /* Зеленый цвет */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.8em;
    margin-top: 5px; /* Отступ сверху */
    align-self: flex-start; /* Выравнивание кнопки слева (для бота) */
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Запрещаем сжиматься */
}

.user-message .save-wp-button {
    align-self: flex-end; /* Выравнивание кнопки справа для сообщений пользователя (хотя кнопка только у бота) */
}

.save-wp-button:hover {
    background-color: #218838; /* Темнее зеленый при наведении */
}

.save-wp-button:disabled {
    background-color: #6c757d; /* Серый цвет при отключении */
    cursor: not-allowed;
}

/* Стили для ссылки "Редактировать пост" */
.edit-post-link {
    margin-left: 10px;
    color: #8ab4f8;
    font-size: 0.8em;
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8;
    transition: border-bottom-style 0.2s ease;
}

.edit-post-link:hover {
    border-bottom-style: solid;
}


/* Стиль индикатора загрузки (опционально) */
.loading::after {
    content: ' .';
    animation: dots 1s infinite;
}

@keyframes dots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60% {
        content: '...';
    }
    80%, 100% {
        content: '';
    }
}

/* Адаптивность для чата */
@media (max-width: 600px) {
    .chat-container {
        width: 100%;
        border-radius: 0;
    }

    .chat-container.chat-active .chat-results {
        border-radius: 0;
        margin-top: 60px; /* Увеличиваем отступ сверху, чтобы не перекрывать меню */
        /* padding уже скорректирован выше */
    }

    .chat-input-area-wrapper {
        padding: 10px;
    }

    .chat-input {
        /* Корректируем padding и margin для мобильных, учитывая две кнопки */
        padding: 10px 75px 10px 10px; /* Было 45px, стало 75px */
        margin-right: -65px; /* Было -35px, стало -65px */
    }

    .chat-send-button,
    .chat-upload-button {
        width: 35px; /* Уменьшаем размер кнопок */
        height: 35px;
    }


    .menu-icon {
        top: 15px; /* Смещаем иконку меню */
        left: 15px;
        width: 25px;
        height: 20px;
    }
    .menu-icon span {
        height: 3px;
    }
    .menu-icon.open span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .menu-icon.open span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }


    .sliding-menu {
        width: 250px; /* Уменьшаем ширину меню */
        padding: 15px; /* Уменьшаем padding */
    }

    .sliding-menu h2 {
        margin-top: 55px; /* Уменьшаем отступ сверху для заголовка меню */
    }

    .avatar {
        width: 30px; /* Уменьшаем размер аватарки */
        height: 30px;
        margin-right: 8px;
    }

    .user-message .avatar {
        margin-left: 8px;
    }

    .message-content-area {
        max-width: calc(80% - 40px); /* Корректируем ширину контента */
    }

    .chat-message {
        padding: 8px 12px;
    }

    /* 1. Левый сайдбар (.sliding-menu) */
    .sliding-menu {
        width: 100%; /* Занимает всю ширину экрана */
        left: -100%; /* Скрывается полностью за левым краем */
        padding: 15px; /* Этот padding можно оставить или изменить по вкусу */
    }

    /* Не забываем про левый сайдбар, с ним все было хорошо */
    .sliding-menu {
        width: 100%;
        left: -100%;
        padding: 15px;
    }
}

/* 2. Стили для десктопа (применяются ТОЛЬКО на экранах шире 600px) */
@media (min-width: 601px) {
    #right-sidebar {
        width: 300px; /* <<-- Вот оно! Это свойство теперь никогда не попадет на мобильные. */
        right: -300px; /* И соответствующий ему сдвиг для скрытия */
    }
}

/* 3. Правило для открытия. Оно универсально и работает для обеих версий. */
#right-sidebar.open {
    right: 0;
}

@media (max-width: 600px) {
    #right-sidebar {
        width: 100%;
        right: -100%; /* Скрыт на 100% своей ширины */
        transition: right 0.3s ease; /* Анимируем только right */
    }
}

/*
 * Стили для стандартных страниц (page.php)
 * Отличаются от чата, но используют ту же цветовую палитру и атмосферу.
 */

.page-content-container {
    width: 100%;
    max-width: 900px; /* Максимальная ширина контента страницы */
    margin: 50px auto 30px auto; /* Центрируем блок, отступ сверху и снизу */
    /* Был padding: 30px; или 30px 30px 20px 30px; */
    padding: 40px 30px 30px 30px; /* Увеличенные отступы сверху и снизу для прокрутки */
    background-color: rgba(40, 40, 40, 0.9); /* Полупрозрачный темный фон, как у результатов чата */
    border-radius: 20px; /* Скругленные углы */
    box-sizing: border-box;
    position: relative;
    z-index: 1; /* Убедимся, что поверх градиента */
    color: #f0f0f0; /* Основной цвет текста */
    line-height: 1.6; /* Увеличиваем межстрочный интервал для читаемости */

    /* --- Добавляем прокрутку для контента страницы --- */
    /* max-height: calc(100vh - 80px); */ /* Максимальная высота: 100% высоты вьюпорта минус верхний (50px) и нижний (30px) отступы */
    /* Расчет max-height не меняется, т.к. padding внутри box-sizing: border-box */
    max-height: calc(100vh - 80px);
    overflow-y: auto; /* **Включаем прокрутку** */
    /* --- Конец добавления прокрутки --- */
}

/* Адаптивность для контейнера страницы */
@media (max-width: 960px) {
    .page-content-container {
        margin-top: 30px; /* Уменьшаем отступ сверху на меньших экранах */
        margin-bottom: 20px; /* Уменьшаем отступ снизу */
        /* Был padding: 20px; или 20px 20px 20px 20px; */
        padding: 30px 20px 30px 20px; /* Увеличенные отступы сверху и снизу */
        max-width: calc(100% - 40px); /* Отступы по бокам */
        /* --- Корректируем max-height для этого брейкпоинта --- */
        /* margin-top: 30px, margin-bottom: 20px. Всего 50px. */
        max-height: calc(100vh - 50px);
        /* --- Конец корректировки --- */
    }
}

@media (max-width: 600px) {
    .page-content-container {
        margin-top: 60px; /* Увеличиваем отступ, чтобы не перекрывать меню */
        /* Был padding: 15px; или 15px 15px 20px 15px; */
        padding: 25px 15px 25px 15px; /* Увеличенные отступы сверху и снизу */
        max-width: calc(100% - 30px); /* Отступы по бокам */
        border-radius: 0; /* Убираем скругление на совсем маленьких экранах */
        /* --- Корректируем max-height для мобильных --- */
        /* margin-top: 60px, margin-bottom: 20px. Всего 80px. */
        max-height: calc(100vh - 80px);
        /* --- Конец корректировки --- */
    }
}


/* Стили для заголовка страницы */
.page-content-container .entry-header {
    border-bottom: 1px solid #444; /* Разделитель под заголовком */
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex; /* Для выравнивания заголовка и ссылки редактирования */
    align-items: center;
    flex-wrap: wrap; /* Перенос элементов на новую строку при необходимости */
}

.page-content-container .entry-title {
    margin: 0; /* Убираем стандартные отступы у h1 */
    color: #fff; /* Белый цвет заголовка */
    font-size: 2.2em; /* Крупный заголовок */
    line-height: 1.2;
    flex-grow: 1; /* Заголовок занимает максимум места */
    margin-right: 15px; /* Отступ от ссылки редактирования */
}

/* Стили для ссылки редактирования в заголовке страницы */
.page-content-container .edit-link {
    font-size: 0.6em; /* Меньший размер */
    opacity: 0.7;
    transition: opacity 0.2s ease;
    text-decoration: none;
    border-bottom: none; /* Убираем подчеркивание как у обычных ссылок */
    flex-shrink: 0; /* Не сжимаем ссылку */
}

.page-content-container .edit-link:hover {
    opacity: 1;
}

/* Стили для основного содержимого страницы */
.page-content-container .entry-content {
    /* Основное содержимое */
}

/* Стили для элементов внутри .entry-content */
.page-content-container .entry-content p {
    margin-bottom: 1em; /* Отступ между параграфами */
}

.page-content-container .entry-content a {
    color: #8ab4f8; /* Цвет ссылок */
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8; /* Пунктирное подчеркивание */
    transition: border-bottom-style 0.2s ease;
}

.page-content-container .entry-content a:hover {
    border-bottom-style: solid; /* Сплошное подчеркивание при наведении */
}

.page-content-container .entry-content ul,
.page-content-container .entry-content ol {
    margin: 1em 0 1em 2em; /* Отступы для списков */
    padding: 0;
}

.page-content-container .entry-content li {
    margin-bottom: 0.5em; /* Отступ между элементами списка */
}

.page-content-container .entry-content h2,
.page-content-container .entry-content h3,
.page-content-container .entry-content h4,
.page-content-container .entry-content h5,
.page-content-container .entry-content h6 {
    color: #fff; /* Белый цвет для подзаголовков */
    margin-top: 1.5em; /* Отступ сверху */
    margin-bottom: 0.8em; /* Отступ снизу */
    line-height: 1.3;
}

.page-content-container .entry-content h2 { font-size: 1.8em; }
.page-content-container .entry-content h3 { font-size: 1.5em; }
.page-content-container .entry-content h4 { font-size: 1.3em; }
.page-content-container .entry-content h5 { font-size: 1.2em; }
.page-content-container .entry-content h6 { font-size: 1.1em; }


.page-content-container .entry-content img {
    max-width: 100%; /* Изображения не выходят за пределы контейнера */
    height: auto;
    display: block; /* Центрируем изображение */
    margin: 15px auto;
    border-radius: 4px; /* Скругленные углы у изображений */
}

.page-content-container .entry-content code {
    background-color: #444; /* Темный фон для кода */
    padding: 2px 4px;
    border-radius: 4px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #ffda79; /* Желтоватый цвет текста кода */
}

.page-content-container .entry-content pre {
    background-color: #222; /* Более темный фон для блоков кода */
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto; /* Прокрутка для широких строк кода */
    margin: 15px 0;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #ffda79;
    white-space: pre-wrap; /* Перенос строк */
    word-wrap: break-word;
}

.page-content-container .entry-content blockquote {
    border-left: 4px solid #8ab4f8; /* Синяя полоса слева */
    padding-left: 15px;
    margin: 15px 0;
    font-style: italic;
    color: #bbb; /* Более тусклый цвет для цитат */
}

/* Стили для постраничной навигации (wp_link_pages) */
.page-content-container .page-links {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #444;
    font-size: 0.9em;
}

.page-content-container .page-links .post-page-numbers {
    display: inline-block;
    margin: 0 5px;
    color: #f0f0f0;
    text-decoration: none;
}

.page-content-container .page-links .post-page-numbers.current {
    font-weight: bold;
    color: #8ab4f8;
}


/* Добавь сюда стили для комментариев, если они используются на страницах */
/* Например: */
/*
.page-content-container #comments {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

.page-content-container .comments-title {
    color: #fff;
    font-size: 1.5em;
    margin-bottom: 20px;
}
... и т.д.
*/


/*
 * Стили для дополнительных блоков на главной странице (когда чат не активен)
 */

/* Контейнер для верхнего блока (плитки) */
.homepage-top-blocks {
    width: 100%;
    max-width: 800px; /* Ограничиваем ширину по центру */
    margin: 20px auto; /* Центрируем и добавляем вертикальные отступы */
    padding: 0 15px; /* Внутренние отступы по бокам */
    box-sizing: border-box;
    opacity: 0; /* Изначально скрыты визуально */
    visibility: hidden; /* Изначально скрыты для скринридеров и кликов */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1; /* Ниже поля ввода */
    position: relative; /* Для z-index */
    /* display: block; - Устанавливается при активации через :not(.chat-active) */
}

/* НОВЫЙ КОНТЕЙНЕР ДЛЯ НИЖНИХ БЛОКОВ (ПОСТЫ И СТРАНИЦЫ) */
.homepage-bottom-blocks-wrapper {
    width: 100%;
    max-width: 800px; /* Ширина как у верхнего блока и chat-container */
    margin: 20px auto; /* Центрируем и добавляем вертикальные отступы */
    padding: 0 15px; /* Внутренние отступы по бокам */
    box-sizing: border-box;
    opacity: 0; /* Изначально скрыты визуально */
    visibility: hidden; /* Изначально скрыты для скринридеров и кликов */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1; /* Ниже поля ввода */
    position: relative; /* Для z-index */
    display: flex; /* Используем Flexbox для размещения дочерних блоков рядом */
    gap: 30px; /* Отступ между блоками последних записей и страниц */
    flex-wrap: wrap; /* Разрешаем перенос блоков на новую строку на маленьких экранах */
    justify-content: center; /* Центрируем блоки внутри обертки */
}


/* Видимость блоков, когда чат НЕ активен */
/* Применяем display: block для верхнего блока и display: flex для нижнего контейнера */
.chat-container:not(.chat-active) .homepage-top-blocks {
    opacity: 1;
    visibility: visible;
    display: block; /* Верхний блок остается блочным */
}

.chat-container:not(.chat-active) .homepage-bottom-blocks-wrapper {
    opacity: 1;
    visibility: visible;
    display: flex; /* Нижний контейнер становится флекс-контейнером */
}


/* Скрываем блоки полностью, когда чат АКТИВЕН */
.chat-container.chat-active .homepage-top-blocks,
.chat-container.chat-active .homepage-bottom-blocks-wrapper { /* Скрываем всю обертку нижних блоков */
    display: none; /* Полностью убираем из потока документа */
}


/* Стили заголовков блоков на главной */
.homepage-top-blocks h3,
.homepage-bottom-blocks-wrapper h3 { /* Применяем стиль заголовков к заголовкам внутри обертки */
    color: #fff;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

/* Стили для отдельных блоков внутри homepage-bottom-blocks-wrapper */
.homepage-bottom-blocks, /* Блок последних записей */
.homepage-pages-block {  /* НОВЫЙ Блок страниц */
    flex: 1; /* Оба блока занимают равное пространство */
    min-width: 280px; /* Минимальная ширина блока перед переносом */
    /* Убираем старые margin, т.к. обертка управляет отступами */
    margin: 0;
    box-sizing: border-box;
    font-size: 12px;

    /* --- НОВЫЕ СТИЛИ ДЛЯ ПРЯМОУГОЛЬНИКА --- */
    background-color: rgba(30, 30, 30, 0.3); /* Темный полупрозрачный фон, как у результатов чата */
    padding: 20px; /* Внутренние отступы внутри блока */
    border-radius: 20px; /* Скругленные углы */
    /* --- КОНЕЦ НОВЫХ СТИЛЕЙ --- */
}



/* Стили блока плиток */
.quick-access-tiles
display: grid;
grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) ); /* Адаптивная сетка: 100px минимум, растягивается */
gap: 10px; /* Отступ между плитками */
justify-content: center; /* Центрируем плитки, если их меньше, чем может поместиться */
}

/* Стили отдельной плитки */
.quick-access-tile {
    display: flex; /* Используем flexbox для центрирования контента внутри плитки */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px; /* Внутренние отступы */
    /*  background-color: rgba(74, 74, 74, 0.7); /* Полупрозрачный фон */
    color: #f0f0f0; /* Цвет текста */
    text-decoration: none;
    border-radius: 10px; /* Скругленные углы */
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-size: 1em;
    height: 80px; /* Фиксированная высота плитки */
    box-sizing: border-box;
    word-break: break-word; /* Перенос слов */
    /* Добавляем курсор pointer для всей области, чтобы показать, что она кликабельна (через ссылку) */
    /* cursor: pointer; /* Этот стиль лучше добавить на обертку (.quick-access-tile-wrapper) */
}

.quick-access-tile:hover {
    background-color: rgba(90, 90, 90, 0.8); /* Фон при наведении */
    /* transform: translateY(-2px); /* Небольшой подъем при наведении - можно добавить сюда или на обертку */
}

/* Адаптивность плиток */
@media (max-width: 600px) {
    .quick-access-tiles {
        grid-template-columns: repeat( auto-fit, minmax(80px, 1fr) ); /* Уменьшаем минимальную ширину плитки */
        gap: 10px; /* Уменьшаем отступ */
    }
    .quick-access-tile {
        padding: 12px;
        height: 70px; /* Уменьшаем высоту */
        font-size: 0.9em;
    }
    /* Заголовки адаптируются ниже в секции адаптивности блоков */
    /* .homepage-top-blocks h3,
    .homepage-bottom-blocks h3 {
        font-size: 1.3em;
    } */
}


/* Стили блока последних записей (существующий) */
.recent-posts-list {
    list-style: none; /* Убираем стандартные маркеры списка */
    padding: 0;
    margin: 0;
}

.recent-posts-list li {
    padding: 10px 0;
    border-bottom: 1px solid #444; /* Разделитель между записями */
    font-size: 1em;
}

.recent-posts-list li:last-child {
    border-bottom: none; /* Убираем разделитель у последней записи */
}

.recent-posts-list .post-date {
    color: #bbb; /* Более тусклый цвет для даты */
    font-size: 0.9em;
    margin-right: 5px;
}

.recent-posts-list .post-title {
    color: #f0f0f0; /* Цвет заголовка записи */
    text-decoration: none;
    transition: color 0.2s ease;
}

.recent-posts-list .post-title:hover {
    color: #8ab4f8; /* Цвет при наведении, как у ссылок в чате */
}

/* Стили сообщения "Записи не найдены" */
.homepage-bottom-blocks p,
.homepage-pages-block p { /* Применяем стиль к параграфам в обоих нижних блоках */
    text-align: center;
    color: #bbb;
    font-style: italic;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ БЛОКА СТРАНИЦ --- */
.homepage-pages-block {
    /* Стили flex: 1, min-width, margin, padding, box-sizing уже заданы выше в .homepage-bottom-blocks, .homepage-pages-block */
}

.pages-list {
    list-style: none; /* Убираем стандартные маркеры списка */
    padding: 0;
    margin: 0;
}

.pages-list li {
    padding: 10px 0;
    border-bottom: 1px solid #444; /* Разделитель между страницами */
    font-size: 1em;
}

.pages-list li:last-child {
    border-bottom: none; /* Убираем разделитель у последней страницы */
}

.pages-list .page-date { /* Если решите выводить дату для страниц */
    color: #bbb; /* Более тусклый цвет для даты */
    font-size: 0.9em;
    margin-right: 5px;
}

.pages-list .page-title {
    color: #f0f0f0; /* Цвет заголовка страницы */
    text-decoration: none;
    transition: color 0.2s ease;
}

.pages-list .page-title:hover {
    color: #8ab4f8; /* Цвет при наведении, как у ссылок в чате */
}

/* --- КОНЕЦ НОВЫХ СТИЛЕЙ ДЛЯ БЛОКА СТРАНИЦ --- */


/* Адаптивность для блоков на главной в неактивном состоянии */
@media (max-width: 600px) {
    .chat-container:not(.chat-active) {
        padding-top: 30px; /* Уменьшаем отступ сверху */
        padding-bottom: 30px; /* Уменьшаем отступ снизу */
    }
    .homepage-top-blocks,
    .homepage-bottom-blocks-wrapper { /* Применяем к обертке */
        margin: 15px auto; /* Уменьшаем вертикальные отступы */
        padding: 0 10px; /* Уменьшаем боковые отступы */
    }
    .homepage-bottom-blocks-wrapper {
        flex-direction: column; /* На маленьких экранах блоки снова располагаются вертикально */
        gap: 15px; /* Уменьшаем отступ между блоками при вертикальном расположении */
    }
    .homepage-bottom-blocks,
    .homepage-pages-block {
        min-width: auto; /* Убираем минимальную ширину при вертикальном расположении */
    }

    .homepage-top-blocks h3,
    .homepage-bottom-blocks-wrapper h3 { /* Применяем к обертке */
        font-size: 1.3em;
    }

    .recent-posts-list li,
    .pages-list li { /* Применяем к обоим спискам */
        padding: 8px 0;
        font-size: 0.9em;
    }
    .recent-posts-list .post-date,
    .pages-list .page-date { /* Применяем к дате в обоих списках */
        font-size: 0.8em;
    }

    /* Адаптивность плиток - уже есть выше, но можно продублировать или убедиться, что она охватывает этот брейкпоинт */
    /*
    .quick-access-tiles {
        grid-template-columns: repeat( auto-fit, minmax(80px, 1fr) );
        gap: 10px;
    }
    .quick-access-tile-wrapper {
        padding: 12px;
        height: 70px;
    }
    .quick-access-tile {
        font-size: 0.9em;
    }
     .quick-access-tile-wrapper .edit-tile-icon {
        font-size: 0.9em;
        top: 5px;
        right: 5px;
    }
    */
}


/* Стили для элементов списка диалогов */
.chat-message ul li {
    /* Унаследует основные стили li из .chat-message ul */
    display: flex; /* Используем flexbox для выравнивания ссылки и кнопки */
    align-items: center; /* Выравниваем по центру вертикально */
    justify-content: space-between; /* Распределяем пространство */
    gap: 10px; /* Отступ между ссылкой и кнопкой */
}

.chat-message ul li a {
    /* Унаследует основные стили a из .chat-message ul */
    flex-grow: 1; /* Ссылка занимает все доступное место */
    min-width: 0; /* Позволяем ссылке сжиматься */
    word-break: break-word; /* Перенос слов в заголовке диалога */
}

/* Стили кнопки удаления диалога */
.delete-dialog-button {
    background-color: #dc3545; /* Красный цвет */
    color: white;
    border: none;
    border-radius: 50%; /* Круглая форма */
    cursor: pointer;
    font-size: 0.8em; /* Меньший размер */
    width: 25px; /* Меньший размер */
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0; /* Не сжимается */
    padding: 0; /* Убираем внутренние отступы */
}

.delete-dialog-button:hover {
    background-color: #c82333; /* Темнее красный при наведении */
}

.delete-dialog-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Стили кнопки "Загрузить еще..." */
.load-more-dialogs-button {
    display: block; /* Кнопка занимает всю ширину */
    width: 100%;
    padding: 10px;
    margin-top: 15px; /* Отступ сверху */
    background-color: rgba(74, 74, 74, 0.7); /* Фон как у сообщений бота */
    color: #f0f0f0;
    border: none;
    border-radius: 18px; /* Скругленные углы как у сообщений */
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    text-align: center;
}

.load-more-dialogs-button:hover {
    background-color: rgba(90, 90, 90, 0.8);
}

.load-more-dialogs-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Стили для контейнера иконок действий сообщения */
.message-actions {
    display: flex; /* Используем flexbox для размещения иконок */
    gap: 5px; /* Отступ между иконками */
    margin-top: 5px; /* Отступ сверху от блока сообщения */
    opacity: 0; /* Изначально скрыты */
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: relative;
    z-index: 1; /* Выше контента, если нужно */
    /* Добавляем выравнивание */
    align-self: flex-start; /* По умолчанию выравниваем по левому краю (для бота) */
}

/* Выравнивание для сообщений пользователя */
.user-message .message-actions {
    align-self: flex-start; /* Выравниваем по правому краю */
}

/* Показываем иконки при наведении на обертку сообщения */
.message-wrapper:hover .message-actions {
    opacity: 1;
    visibility: visible;
}

/* Стили для отдельных иконок (редактирование, удаление) */
.edit-message-icon,
.delete-message-icon,
.save-draft-message-icon {
    cursor: pointer;
    font-size: 0.8em; /* Меньший размер иконок */
    color: #bbb; /* Цвет иконок */
    transition: color 0.2s ease;
    padding: 2px; /* Небольшой padding для удобства клика */
}

.edit-message-icon:hover {
    color: #8ab4f8; /* Цвет при наведении (синий) */
}

.delete-message-icon:hover {
    color: #dc3545; /* Цвет при наведении (красный) */
}

.save-draft-message-icon:hover {
    color: #4bd30a; /* Цвет при наведении */
}

/* Стили для области редактирования сообщения */
.editing-message-area {
    display: flex;
    flex-direction: column; /* Располагаем textarea и кнопки вертикально */
    width: 100%; /* Занимает всю доступную ширину в message-content-area */
    box-sizing: border-box;
    padding: 10px 15px; /* Внутренние отступы как у chat-message */
    border-radius: 18px; /* Скругление как у chat-message */
    background-color: rgba(74, 74, 74, 0.9); /* Фон как у бота */
    color: #f0f0f0;
}

/* Стиль для области редактирования сообщения пользователя */
.user-message .editing-message-area {
    background-color: rgba(0, 123, 255, 0.9); /* Фон как у пользователя */
}


/* Стиль для textarea внутри области редактирования */
.editing-message-area textarea {
    width: 100%;
    min-height: 60px; /* Минимальная высота */
    padding: 8px;
    margin-bottom: 10px; /* Отступ до кнопок */
    border: 1px solid #555;
    border-radius: 8px;
    font-size: 1em;
    background-color: #3a3a3a; /* Фон как у поля ввода */
    color: #f0f0f0;
    outline: none;
    resize: vertical; /* Разрешаем только вертикальное изменение размера */
    box-sizing: border-box;
}

.editing-message-area textarea:focus {
    border-color: #0099ff;
}

/* Контейнер для кнопок сохранения/отмены */
.editing-buttons {
    display: flex;
    justify-content: flex-end; /* Выравниваем кнопки справа */
    gap: 10px; /* Отступ между кнопками */
}

/* Стили для кнопок сохранения/отмены */
.editing-buttons button {
    padding: 5px 10px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s ease;
}

.editing-buttons .save-edit-button {
    background-color: #28a745; /* Зеленый */
    color: white;
}

.editing-buttons .save-edit-button:hover {
    background-color: #218838;
}

.editing-buttons .cancel-edit-button {
    background-color: #6c757d; /* Серый */
    color: white;
}

.editing-buttons .cancel-edit-button:hover {
    background-color: #5a6268;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ РЕДАКТИРОВАНИЯ ПЛИТОК И МОДАЛЬНОГО ОКНА --- */

/* Стили отдельной плитки (обертки) */
.quick-access-tile-wrapper {
    position: relative; /* Для позиционирования иконки */
    background-color: rgba(30, 30, 30, 0.3); /* Фон обертки */
    border-radius: 10px; /* Скругленные углы */
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    display: flex; /* Используем flexbox для центрирования контента и иконки */
    flex-direction: column; /* Элементы внутри по вертикали */
    align-items: center; /* Центрируем по горизонтали */
    justify-content: center; /* Центрируем по вертикали */
    padding: 0px; /* Внутренние отступы */
    height: 80px; /* Фиксированная высота плитки */
    word-break: break-word; /* Перенос слов */
    /* Добавляем курсор pointer для всей области, чтобы показать, что она кликабельна (через ссылку) */
    cursor: pointer;
}

.quick-access-tile-wrapper:hover {
    background-color: rgba(0, 123, 255, 1); /* Фон при наведении */
}

/* Стили самой ссылки внутри плитки */
.quick-access-tile-wrapper .quick-access-tile {
    display: flex; /* Flexbox для содержимого ссылки */
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #f0f0f0; /* Цвет текста */
    text-decoration: none;
    font-size: 12px;
    flex-grow: 1; /* Ссылка занимает максимум доступного места */
    width: 100%; /* Ширина ссылки */
    height: 100%; /* Высота ссылки */
    /* transform: translateY(-2px); /* Небольшой подъем при наведении - можно добавить сюда или на обертку */
}

/* Стили иконки шестеренки */
.quick-access-tile-wrapper .edit-tile-icon {
    position: absolute;
    top: 8px; /* Отступ сверху */
    right: 8px; /* Отступ справа */
    color: rgba(255, 255, 255, 0.6); /* Полупрозрачный белый цвет */
    font-size: 1em; /* Размер иконки */
    cursor: pointer;
    opacity: 0; /* Изначально скрыта */
    visibility: hidden; /* Изначально скрыта */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10; /* Убедимся, что иконка поверх ссылки */
}

/* Показываем иконку шестеренки при наведении на обертку плитки */
/* Иконка рендерится только для админов в PHP, поэтому CSS просто управляет видимостью при наведении */
.quick-access-tile-wrapper:hover .edit-tile-icon {
    opacity: 1;
    visibility: visible;
}

.quick-access-tile-wrapper .edit-tile-icon:hover {
    color: #fff; /* Белый цвет при наведении на саму иконку */
}


/* Стили для модального окна */
/* Используем ID (#edit-tile-modal) для более высокой специфичности, чтобы гарантировать скрытие по умолчанию */
#edit-tile-modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксированное позиционирование */
    z-index: 1000; /* Высокий z-index, чтобы быть поверх всего */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    overflow: auto; /* Включаем прокрутку, если контент модалки больше экрана */
    background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон */
    /* Эти flexbox свойства (justify-content, align-items) будут работать,
       когда display будет установлен в flex через JavaScript */
    justify-content: center;
    align-items: center;
}

/*
   Можно оставить пустой селектор .modal {} ниже,
   если вдруг какие-то другие стили (не display, position, z-index и т.п.)
   применяются к классу .modal в других местах и должны сохраняться.
   Но для основных свойств видимости и позиционирования лучше использовать ID.
   В данном случае, скорее всего, достаточно просто использовать ID.
*/


/* Стили для содержимого модального окна */
.modal-content {
    background-color: rgba(50, 50, 50, 0.95); /* Немного светлее фон, чем у чата */
    margin: auto; /* Центрирование */
    padding: 30px;
    border-radius: 10px;
    width: 90%; /* Ширина содержимого */
    max-width: 500px; /* Максимальная ширина */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative; /* Для позиционирования кнопки закрытия */
    box-sizing: border-box;
    color: #f0f0f0;
}

/* Стили для заголовка модального окна */
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

/* Стили для кнопки закрытия */
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-button:hover,
.close-button:focus {
    color: #fff;
    text-decoration: none;
}

/* Стили для группы формы */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block; /* Метка на отдельной строке */
    margin-bottom: 8px;
    font-weight: bold;
    color: #bbb;
}

.form-group input[type="text"],
.form-group input[type="url"] {
    width: 100%; /* Занимает всю ширину */
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 1em;
    background-color: #3a3a3a;
    color: #f0f0f0;
    box-sizing: border-box; /* Учитываем padding и border в ширине */
    outline: none;
    transition: border-color 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus {
    border-color: #0099ff;
}

/* Стили для области кнопок формы */
.form-actions {
    display: flex;
    justify-content: flex-end; /* Выравнивание кнопок справа */
    gap: 10px; /* Отступ между кнопками */
    margin-top: 20px;
}

.form-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

.form-actions .save-button {
    background-color: #007bff; /* Синий */
    color: white;
}

.form-actions .save-button:hover {
    background-color: #0056b3;
}

.form-actions .cancel-button {
    background-color: #6c757d; /* Серый */
    color: white;
}

.form-actions .cancel-button:hover {
    background-color: #5a6268;
}

/* Адаптивность для плиток */
@media (max-width: 600px) {
    .quick-access-tiles {
        grid-template-columns: repeat( auto-fit, minmax(80px, 1fr) ); /* Уменьшаем минимальную ширину плитки */
        gap: 10px; /* Уменьшаем отступ */
    }
    .quick-access-tile-wrapper { /* Используем обертку для адаптивности плитки */
        padding: 12px;
        height: 70px; /* Уменьшаем высоту */
        /* font-size: 0.9em; /* Размер шрифта лучше оставить на .quick-access-tile */
    }
    .quick-access-tile { /* Применяем font-size к самой ссылке */
        font-size: 0.9em;
    }
    .quick-access-tile-wrapper .edit-tile-icon {
        font-size: 0.9em; /* Уменьшаем размер иконки на мобильных */
        top: 5px;
        right: 5px;
    }
}

/* Адаптивность для модального окна */
@media (max-width: 600px) {
    .modal-content {
        width: 95%; /* Немного шире на маленьких экранах */
        padding: 20px;
    }
    .modal-content h2 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }
    .form-group {
        margin-bottom: 10px;
    }
    .form-group label {
        font-size: 0.9em;
        margin-bottom: 5px;
    }
    .form-group input[type="text"],
    .form-group input[type="url"] {
        padding: 8px;
        font-size: 0.9em;
    }
    .form-actions {
        gap: 5px;
        margin-top: 15px;
    }
    .form-actions button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}

/* --- КОНЕЦ НОВЫХ СТИЛЕЙ --- */
/* Добавьте эти стили в ваш файл style.css */

/* Стили для элементов списка диалогов в меню */
.sliding-menu .menu-list li {
    display: flex; /* Используем Flexbox для выравнивания элементов в строку */
    align-items: center; /* Выравниваем элементы по центру вертикали */
    /* justify-content: space-between; /* Можно использовать, если нужно раскидать элементы по ширине */
    padding: 8px 0; /* Пример: добавьте отступы сверху и снизу */
    border-bottom: 0px solid #eee; /* Пример: разделитель между пунктами */
}

/* Убираем нижнюю границу у последнего элемента списка */
.sliding-menu .menu-list li:last-child {
    border-bottom: none;
}

/* Стили для ссылки с названием диалога */
.sliding-menu .menu-list li a {
    flex-grow: 1; /* Позволяем ссылке занимать все доступное пространство, отодвигая иконки вправо */
    margin-right: 10px; /* Отступ между ссылкой и иконками */
    word-break: break-word; /* Позволяет длинным заголовкам переноситься */
    /* Добавьте другие стили ссылки, например, цвет */
    color: #dadada;
    text-decoration: none;
}

/* Стили для кнопки удаления */
.sliding-menu .menu-list li .delete-dialog-button {
    /* Сбрасываем стандартные стили кнопки, чтобы она выглядела как иконка */
    background: none;
    border: none;
    padding: 0; /* Убираем стандартные отступы кнопки */
    margin-left: 5px; /* Отступ слева от кнопки */
    cursor: pointer;
    color: #a00; /* Цвет иконки удаления */
    font-size: 1em; /* Размер иконки */
    flex-shrink: 0; /* Запрещаем кнопке сжиматься, если текст ссылки длинный */
    line-height: 1; /* Помогает вертикальному выравниванию иконки */
}

.sliding-menu .menu-list li .delete-dialog-button:hover {
    color: #f00; /* Цвет при наведении */
}

/* Стили для span с иконкой статуса диалога */
.sliding-menu .menu-list li .dialog-status-public,
.sliding-menu .menu-list li .dialog-status-private,
.sliding-menu .menu-list li .dialog-status-private-chat {
    margin-left: 5px; /* Отступ слева от иконки статуса */
    font-size: 0.9em; /* Размер иконки статуса (немного меньше) */
    flex-shrink: 0; /* Запрещаем спану сжиматься */
    line-height: 1; /* Помогает вертикальному выравниванию иконки */
}

/* Цвета для иконок статуса */
.sliding-menu .menu-list li .dialog-status-public i {
    color: green; /* Пример цвета для публичного */
}

.sliding-menu .menu-list li .dialog-status-private i {
    color: gray; /* Пример цвета для приватного */
}

.sliding-menu .menu-list li .dialog-status-private-chat i {
    color: blue; /* Пример цвета для личной переписки */
}

/* Стили для ссылки "Показать всех" */
.sliding-menu .menu-list li.show-all-link {
    justify-content: flex-start; /* Выравниваем ссылку к началу */
    border-bottom: none; /* Убираем границу */
    padding-top: 4px; /* Adjust padding */
    padding-bottom: 4px;
}

.sliding-menu .menu-list li.show-all-link a {
    flex-grow: 0; /* Не растягиваем ссылку */
    margin-right: 0;
}

/* НОВЫЕ СТИЛИ ДЛЯ БЛОКА ЗАГОЛОВКА СООБЩЕНИЯ (Имя + Дата) */
.message-header {
    display: flex; /* Используем Flexbox для размещения элементов в строку */
    justify-content: space-between; /* Раскидываем элементы по краям (имя слева, дата справа) */
    align-items: center; /* Выравниваем элементы по центру вертикали */
    width: 100%; /* Занимает всю ширину message-content-area */
    margin-bottom: 4px; /* Отступ между заголовком (имя+дата) и телом сообщения */
    box-sizing: border-box; /* Учитываем padding в ширине, если он появится */
}

/* Стили для метки времени сообщения */
.message-timestamp {
    font-size: 0.8em; /* Делаем шрифт чуть меньше */
    color: #888; /* Более тусклый цвет */
    margin-left: 10px; /* Отступ слева от имени автора */
    flex-shrink: 0; /* Запрещаем элементу сжиматься */
    /* text-align: right; /* Это не нужно, т.к. flexbox justify-content: space-between позиционирует справа */
}

/* Автор уже имеет стиль .author-name, он будет слева в message-header */
/* .author-name { ... } */

/* Опционально: можно добавить специфичные стили для message-header в зависимости от типа сообщения */
/*
.user-message .message-header {
    justify-content: flex-end; // Если нужно выравнивать и имя, и дату по правому краю
}
.bot-message .message-header {
    justify-content: flex-start; // По умолчанию flex-start
}
*/
/* Но justify-content: space-between в .message-header выглядит лучше для обеих сторон */

/* Добавьте или измените этот блок в style.css */
.sliding-menu h3.section-title {
    /* Ваши существующие стили для заголовков секций */
    color: #fff; /* Цвет текста заголовка */
    /* margin-top: 70px;  Отступ сверху (для первого заголовка может быть 0) */
    /* border-bottom: 1px solid #444; */ /* Удаляем или комментируем, если хотим только фон */
    /* padding-bottom: 10px; */ /* Удаляем или комментируем, если используем padding для фона */
    margin-bottom: 10px; /* Отступ снизу до списка */

    /* --- НОВЫЕ СТИЛИ ДЛЯ ПРЯМОУГОЛЬНИКА СО СКРУГЛЕННЫМИ КРАЯМИ --- */
    background-color: rgb(69 69 77); /* Полупрозрачный синий фон для свернутого состояния */
    padding: 10px 15px; /* Внутренние отступы для создания "прямоугольника" */
    border-radius: 8px; /* Скругление углов */
    cursor: pointer; /* Изменяем курсор, чтобы показать, что заголовок кликабельный */
    transition: background-color 0.2s ease, color 0.2s ease; /* Плавный переход при изменении состояния */

    /* Используем flexbox для выравнивания иконки и текста */
    display: flex;
    align-items: center; /* Выравнивание по центру вертикали */
    gap: 10px; /* Отступ между иконкой и текстом */
}

/* Корректируем верхний отступ для первого заголовка после h2 */
.sliding-menu h2 + nav .menu-section:first-child h3.section-title {
    margin-top: 0;
}


/* Стили для развернутого состояния (класс добавляется JavaScript'ом) */
/* Вы можете изменить цвет фона, цвет текста, добавить границу и т.д. */
.sliding-menu h3.section-title.expanded-header {
    /* Пример: немного более насыщенный синий фон */
    background-color: rgba(0, 123, 255, 0.99);
    /* Пример: сделать текст чуть ярче */
    /* color: #8ab4f8; */
}

/* Опционально: Убедитесь, что иконки внутри h3 имеют нужный цвет */
.sliding-menu h3.section-title .fas {
    color: #fff; /* Цвет иконок соответствует цвету текста заголовка */
}

/* Удалите любые оставшиеся стили, которые могли применяться к старому .toggle-icon */
.sliding-menu .menu-section .toggle-icon {
    display: none; /* Если вы не удалили спаны в PHP, скройте их здесь */
}

/* Modal Overlay (Background) */
.post-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    z-index: 9999; /* Ensure it's above most content */
    display: none; /* Hidden by default */
    /* Blur effect for the background */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* For Safari */
}

/* === ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА === */

/* Добавляем .post-modal к селектору кастомного скроллбара */
.chat-results,
.page-content-container,
.sliding-menu,
.chat-container:not(.chat-active),
.post-modal { /* <--- ДОБАВЛЕНО СЮДА */
    /* ... существующие стили скроллбара ... */
    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-track {
        background: rgba(51, 51, 51, 0.3);
    }
    &::-webkit-scrollbar-thumb {
        background-color: rgba(136, 136, 136, 0.6);
        border-radius: 3px;
    }
    &::-webkit-scrollbar-button {
        display: none;
    }
    scrollbar-width: thin;
    scrollbar-color: rgba(136, 136, 136, 0.6) rgba(51, 51, 51, 0.3);
}


/* Modal Content Container */
.post-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ИЗМЕНЕНО: Темный фон, как у других блоков */
    background-color: #282c34;
    padding: 30px;
    z-index: 10000;
    display: none;
    width: 90%; /* Немного увеличим ширину по умолчанию */
    max-width: 900px; /* Максимальная ширина, как у страниц */
    max-height: 85vh; /* Максимальная высота */
    overflow-y: auto;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    border: 1px solid #444;
    /* ИЗМЕНЕНО: Светлый цвет текста по умолчанию */
    color: #f0f0f0;
    line-height: 1.6;
}

/* Style for the close button */
.post-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease-in-out;
}

.post-modal .modal-close:hover {
    /* ИЗМЕНЕНО: Белый цвет при наведении */
    color: #fff;
}

/* Style for the area where post content is loaded */
.post-modal-content-area {
    padding-top: 10px;
}

/* === НОВЫЕ СТИЛИ: Форматирование контента ВНУТРИ модального окна === */
.post-modal-content-area h1,
.post-modal-content-area h2,
.post-modal-content-area h3 {
    color: #fff;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.post-modal-content-area p {
    margin-bottom: 1em;
}

.post-modal-content-area a {
    color: #8ab4f8; /* Синий цвет для ссылок, как в чате */
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8;
    transition: border-bottom-style 0.2s ease;
}

.post-modal-content-area a:hover {
    border-bottom-style: solid;
}

.post-modal-content-area img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

.post-modal-content-area pre,
.post-modal-content-area code {
    background-color: #444;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #ffda79;
}

.post-modal-content-area pre {
    padding: 15px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}



/* Basic responsiveness */
@media (max-width: 768px) {
    .post-modal {
        max-width: 95%;
        max-height: 95%;
        padding: 10px;
    }
    .post-modal .modal-close {
        font-size: 20px;
        top: 5px;
        right: 5px;
    }
    .post-modal-content-area {
        padding-top: 15px;
    }
}

/* Стили для контейнера-круга иконки редактирования */
.edit-icon-circle-wrapper {
    display: inline-flex; /* Используем inline-flex, чтобы блок занимал только необходимое место и позволял центрировать содержимое */
    width: 35px; /* Размер круга (ширина) */
    height: 35px; /* Размер круга (высота) */
    border-radius: 50%; /* Делаем его круглым */
    background-color: white; /* Белый фон */
    justify-content: center; /* Центрируем содержимое (иконку) по горизонтали */
    align-items: center; /* Центрируем содержимое (иконку) по вертикали */
    margin-top: 15px; /* Отступ сверху от заголовка */
    margin-bottom: 15px; /* Отступ снизу до блока с тегами/категориями */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Опционально: добавляем легкую тень для объема */
}

/* Стили для ссылки внутри круга */
.edit-icon-circle-wrapper a.post-edit-link {
    text-decoration: none; /* Убираем подчеркивание */
    line-height: 1; /* Помогает лучше выровнять иконку */
}

/* Стили для самой иконки Font Awesome */
.edit-icon-circle-wrapper a.post-edit-link i.fa {
    color: #000; /* Черный цвет иконки */
    font-size: 18px; /* Размер иконки. Подбери подходящий размер для круга 40x40px */
}


/* Стили для контейнера тегов и категорий */
.entry-header .post-meta-tags-cats {
    margin-bottom: -15px; /* Отступ снизу до черты */
    margin-left: 10px;
    /* margin-top теперь не нужен здесь, он задан у .edit-icon-circle-wrapper */
}

/* Стили для отдельных списков категорий и тегов */
.entry-header .post-categories,
.entry-header .post-tags {
    margin-bottom: 10px; /* Отступ между списком категорий и тегов */
    /* line-height: 1.8; */ /* Можно оставить, если нравится */
}

/* Убираем стили для меток, так как их нет в HTML */
/* .entry-header .post-meta-tags-cats span { ... } */


/* Стили для каждого отдельного термина (категории или тега) */
.entry-header .meta-term {
    display: inline-block; /* Отображаем как строчно-блочный элемент */
    background-color: #f0f0f0; /* Светло-серый фон прямоугольника (можно сделать белым #fff, если хочешь стиль, похожий на круг иконки) */
    color: #333; /* Цвет текста */
    padding: 5px 12px; /* Внутренние отступы */
    border-radius: 20px; /* Скругление углов */
    margin-right: 8px; /* Отступ справа от прямоугольника */
    margin-bottom: 5px; /* Отступ снизу (для переноса на новую строку) */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    font-size: 0.9em; /* Размер шрифта */
    transition: background-color 0.3s ease; /* Плавное изменение при наведении */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Опционально: легкая тень как у круга */
}

.entry-header .meta-term:hover {
    background-color: #e0e0e0; /* Изменение фона при наведении */
}

/* Стили для горизонтальной черты */
.entry-header .post-meta-separator {
    border: none; /* Убираем стандартную границу */
    height: 1px; /* Высота черты */
    background-color: #ddd; /* Цвет черты */
    margin: 20px 0; /* Отступы сверху и снизу */
}

/* Опционально: если хочешь, чтобы теги/категории были белыми прямоугольниками, как круг иконки: */
/*
.entry-header .meta-term {
    background-color: white;
    color: #333; // Или #000
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); // Такая же тень, как у круга
    // Остальные стили остаются прежними
}
*/

/*
 * Стили для фиксированного заголовка (иконка меню + название сайта)
 * ======================================================================== */

/* 1. Новая обертка для иконки и заголовка */
.site-header-fixed {
    position: fixed;
    top: 50px;
    left: 20px;
    z-index: 100; /* Такой же z-index, как был у .menu-icon */
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* 2. Сбрасываем позиционирование у самой иконки, т.к. теперь она во flex-контейнере */
.menu-icon {
    position: static; /* Убираем fixed, top, left */
}

/* 3. Стили для нового заголовка 'HuskyNET' */
.site-title-header {
    margin-left: 15px; /* Отступ слева от иконки меню */
    font-size: 1.5em; /* Размер шрифта, можешь подобрать по вкусу */
    font-weight: bold;
}

.site-title-header a {
    color: #f0f0f0; /* Цвет текста */
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-title-header a:hover {
    color: #fff;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .site-header-fixed {
        top: 15px;
        left: 15px;
    }
    .site-title-header {
        font-size: 1.2em;
    }
}

/*
 * Стили для нового двухколоночного меню в стиле Telegram
 * ======================================================================== */

/* Общая обертка внутри .sliding-menu */
.menu-layout-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

/* 1. Левая колонка с иконками */
.menu-groups-sidebar {
    width: 85px; /* Ширина левой колонки */
    height: 100%;
    background-color: rgba(30, 30, 30, 0.5); /* Чуть темнее основного фона */
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Отступ между иконками */
    flex-shrink: 0; /* Запрещаем колонке сжиматься */
}

/* Стили для каждой иконки-кнопки */
.menu-group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 60px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.2s ease;
    color: #bbb;
}

.menu-group-item i {
    font-size: 1.8em; /* Размер иконки */
    margin-bottom: 5px;
}

.menu-group-item span {
    font-size: 0.7em; /* Размер подписи */
    text-align: center;
}

/* Состояние при наведении */
.menu-group-item:hover {
    background-color: rgba(50, 50, 50, 0.5);
}

/* Активное состояние (выбранная группа) */
.menu-group-item.active {
    background-color: #007bff; /* Яркий синий цвет для активного элемента */
    color: #fff;
}

/* 2. Правая колонка с контентом */
.menu-dialogs-content {
    flex-grow: 1; /* Занимает все оставшееся место */
    height: 100%;
    padding: 10px 15px 20px 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Включаем прокрутку для этой колонки */
}

/* Все секции со списками по умолчанию скрыты */
.menu-dialogs-content .menu-section {
    display: none;
}

/* Но активная секция - видима */
.menu-dialogs-content .menu-section.active {
    display: block;
}

/* Стили для заголовков секций в правой колонке */
.menu-dialogs-content .section-title {
    color: #fff;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Стили для списков */
.menu-dialogs-content .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-backdrop {
    display: none !important; /* Полностью убираем фон из отображения */
}

body.menu-open {
    overflow: auto !important; /* Возвращаем возможность прокрутки body, если меню открыто */
}

/*
 * ========================================================================
 * НОВЫЕ СТИЛИ ДЛЯ СПИСКА ДИАЛОГОВ В БОКОВОМ МЕНЮ
 * ========================================================================
 */

/* Сбрасываем некоторые стили для списка, чтобы наш новый дизайн работал корректно */
.menu-dialogs-content .menu-list {
    border-top: 0px solid #444; /* Добавим верхнюю границу для всего списка */
}

.sliding-menu .menu-list li {
    /* Убираем старые стили, которые могут конфликтовать */
    padding: 0;
    margin-bottom: 10px;
    border-bottom: 0px solid #444; /* Разделитель между диалогами */
}

/* Стили для нового элемента списка диалогов (li.menu-dialog-item) */
.menu-dialog-item {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    gap: 15px; /* Отступ между иконкой, названием и корзиной */
    transition: background-color 0.2s ease;
}

.menu-dialog-item:hover {
    background-color: rgba(0, 123, 255, 0.15); /* Подсветка при наведении */
}

/* 1. Левая часть: Контейнер для иконки */
.dialog-icon-container {
    position: relative;
    flex-shrink: 0; /* Запрещаем контейнеру сжиматься */
}

/* Основная круглая иконка-заглушка */
.dialog-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #555; /* Цвет заглушки */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; /* Размер иконки-заглушки (если используется FontAwesome) */
    color: #fff;
    overflow: hidden; /* Если будете использовать img, чтобы обрезалось по кругу */
}

/* Контейнер для мини-иконок поверх основной */
.dialog-icon-overlays {
    position: absolute;
    bottom: -2px;
    right: -15px;
    display: flex;
    gap: 32px;
}

/* Стили для самих мини-иконок */
.dialog-type-icon,
.dialog-edit-icon {
    width: 20px;
    height: 20px;
    background-color: #3a3a3a;
    color: #f0f0f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    border: 2px solid #1e1e1e; /* Обводка, чтобы отделить от фона */
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 2. Центральная часть: Название диалога (модифицировано для двух строк) */
.dialog-title {
    flex-grow: 1; /* Занимает все доступное место */
    font-size: 0.9em; /* Уменьшаем размер шрифта */
    line-height: 1.3; /* Устанавливаем межстрочный интервал для двух строк */
    color: #f0f0f0;
    text-decoration: none;
    transition: color 0.2s ease;

    /* Включаем перенос на две строки и убираем троеточие */
    white-space: normal; /* Разрешаем перенос текста */
    word-break: break-word; /* Помогает переносить длинные слова, если нужно */

    /* Убираем старые стили, которые могут конфликтовать */
    margin-right: 0;
}

.dialog-title:hover {
    color: #fff;
}


.dialog-title:hover {
    color: #fff;
}

/* 3. Правая часть: Кнопка удаления */
/* Используем существующий класс .delete-dialog-button, но подстроим его */
.menu-dialog-item .delete-dialog-button {
    flex-shrink: 0; /* Запрещаем кнопке сжиматься */
    /* Стили для размера, цвета и т.д. уже есть в вашем style.css */
}

/* ==========================================================================
   Стили для новой шапки в стиле мессенджера
   ========================================================================== */

/* 1. Основная фиксированная шапка сайта */
.site-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Высота шапки */
    /* background-color: #212121; /* Темный фон */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 1001; /* Выше чем sliding-menu, но ниже menu-backdrop */
    /* border-bottom: 1px solid #333;*/
    box-sizing: border-box;
}

/* Левая часть шапки (меню + название) */
.header-left-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между иконкой меню и названием */
}

.site-title-header a {
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    font-weight: bold;
}

/* Правая часть шапки (новые иконки) */
.header-right-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* Расстояние между иконками */
}

.header-right-icons .header-icon-link {
    color: #b0b3b8; /* Серый цвет для иконок */
    font-size: 20px;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.header-right-icons .header-icon-link:hover {
    color: #fff; /* Белый при наведении */
}

/* Стили для аватарки пользователя */
.header-right-icons .header-icon-link img.avatar {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid #555;
}

/* Сдвигаем основной контент вниз, чтобы он не залезал под шапку */
body {
    padding-top: 50px;
}
.sliding-menu {
    top: 50px; /* Меню теперь начинается под шапкой */
    height: calc(100vh - 50px);
}

/* 2. Шапка активного чата (которая появляется над сообщениями) */
.chat-header-active {
    display: none; /* Скрыта по умолчанию, управляется JS */
    flex-shrink: 0; /* Не сжиматься */
    padding: 10px 15px;
    background-color: rgba(30, 30, 30, 0.5); /* Чуть светлее фона шапки */
    /* border-bottom: 1px solid #333; */
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-header-icon {
    width: 40px;
    height: 40px;
    background-color: #007bff; /* Пример синего цвета */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.chat-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #e4e6eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Адаптируем контейнер с сообщениями */
.chat-results {
    /* Теперь высота рассчитывается с учетом новой шапки чата */
    /* Это произойдет автоматически, т.к. chat-header-active в том же flex-контейнере */
}

/* 2. РЕШЕНИЕ ПРОБЛЕМЫ С АДМИН-ПАНЕЛЬЮ WORDPRESS */
/* Когда админ-панель активна, сдвигаем нашу шапку вниз */
body.admin-bar .site-header-fixed {
    top: 32px;
}

/* Также сдвигаем весь остальной контент еще ниже */
body {
    padding-top: 50px;
}
body.admin-bar {
    padding-top: 82px; /* 50px (наша шапка) + 32px (админка) */
}

/* И сдвигаем выезжающее меню */
.sliding-menu {
    top: 50px;
    height: calc(100vh - 50px);
}
body.admin-bar .sliding-menu {
    top: 82px;
    height: calc(100vh - 82px);
}
/* КОНЕЦ РЕШЕНИЯ ПРОБЛЕМЫ С АДМИН-ПАНЕЛЬЮ */

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ЗАМЕНЫ ШАПКИ САЙТА НА ШАПКУ АКТИВНОГО ЧАТА (ФИНАЛЬНАЯ ВЕРСИЯ)
 * ========================================================================
 */

/* 1. Стилизуем шапку чата. Она будет занимать ТОЧНО ТО ЖЕ МЕСТО, что и основная шапка. */
.chat-header-active {
    display: none; /* По умолчанию она полностью скрыта */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* ВАЖНО: Точно такая же высота, как у .site-header-fixed */
    z-index: 1001; /* Такой же Z-index, как у .site-header-fixed */
    /* background-color: #212121;  Такой же фон */
    /* border-bottom: 1px solid #333;  Такая же рамка */
    box-sizing: border-box;
    /* Свойства для выравнивания контента внутри (из твоего оригинального CSS) */
    align-items: center;
    gap: 15px;
    padding: 0 15px;
    color: #fff;
}

/* 2. Главное правило: когда чат активен, мы просто меняем их местами. */

/* ПРЯЧЕМ основную шапку (с HuskyNET) */
body.chat-is-active .site-header-fixed {
    display: none;
}

/* ПОКАЗЫВАЕМ шапку активного чата */
body.chat-is-active .chat-header-active {
    display: flex; /* Используем flex, т.к. внутри flex-элементы */
}


/* 3. ВАЖНО: Так как шапки просто заменяют друг друга и имеют одинаковую высоту,
   нам больше НЕ НУЖНО сдвигать остальной контент!
   Удали эти правила из своего CSS, если ты их добавлял ранее: */
/*
body.chat-is-active {
    padding-top: 110px;
}
body.chat-is-active .sliding-menu {
    top: 110px;
}
*/


/* 4. Корректировка для админ-панели WordPress (остается важной) */
/* Сдвигаем ОБЕ шапки, если есть админ-панель. */
body.admin-bar .site-header-fixed,
body.admin-bar .chat-header-active {
    top: 32px;
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ВЫРАВНИВАНИЯ ЭЛЕМЕНТОВ В АКТИВНОЙ ШАПКЕ ЧАТА
 * ========================================================================
 */

/* Главный контейнер - расталкиваем левую и правую группы по краям */
.chat-header-active {
    justify-content: space-between;
}

/* Левая группа - выравниваем иконки и заголовок в ряд */
.chat-header-active .header-left-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между элементами в левой группе */
    /* Убираем лишний отступ у заголовка чата, если он есть */
    flex-shrink: 1; /* Позволяем левому блоку сжиматься, если не хватает места */
    overflow: hidden; /* Скрываем текст, который не помещается */
}

/* Убедимся, что заголовок чата не переносит текст и ставит троеточие */
.chat-header-active .chat-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * ========================================================================
 * Стили для нового правого сайдбара
 * ========================================================================
 */

/* --- СТИЛИ ДЛЯ ШИРОКИХ ЭКРАНОВ (Десктоп) --- */
/* Используем селектор с ID для большей специфичности */
#right-sidebar {
    position: fixed;
    top: 50px;
    height: calc(100vh - 50px);
    background-color: rgba(30, 30, 30, 0.3);
    color: #f0f0f0;
    z-index: 1002;
    box-sizing: border-box;
    overflow-y: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Состояние 'открыто' для десктопа */
#right-sidebar.open {
    right: 0;
}

/* Адаптация для админ-панели WordPress (остается без изменений) */
body.admin-bar #right-sidebar {
    top: 82px;
    height: calc(100vh - 82px);
}


/*
 * ========================================================================
 * Корректировка для иконок-кнопок в шапке
 * ========================================================================
 */
.header-right-icons button.header-icon-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1; /* Для выравнивания иконки */
}

/*
 * ========================================================================
 * Стили для нового правого сайдбара (Информация о диалоге)
 * ========================================================================
 */

/* Очищаем стандартные отступы у контента сайдбара, чтобы превью могло растянуться */
.right-sidebar-content {
    padding: 0;
}
.right-sidebar-content h3,
.right-sidebar-content p {
    padding: 0 20px; /* Возвращаем отступы для текста-заглушки */
}

/* 1. Превью (картинка) диалога */
.sidebar-preview {
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: #333; /* Фоновый цвет, если картинки нет */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* Иконка-заглушка, если нет логотипа */
.sidebar-preview .placeholder-icon {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.1);
}

/* Заголовок поверх превью */
.sidebar-preview .preview-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px 15px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 2. Описание диалога */
.sidebar-description {
    padding: 0 20px 20px 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    font-size: 0.9em;
    color: #ccc;
    line-height: 1.5;
    word-wrap: break-word;
}

/* 3. Список участников */
.sidebar-participants {
    padding: 0 20px;
}

.sidebar-participants h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: #bbb;
    font-weight: 600;
}

.sidebar-participants ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Стили для одного участника в списке */
.participant-item {
    display: flex;
    align-items: center;
    padding: 10px 0px 0px 0px;
    gap: 12px;
}

.participant-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.participant-info {
    display: flex;
    flex-direction: column;
}

.participant-name {
    font-weight: 500;
    color: #f0f0f0;
}

.participant-role {
    font-size: 0.85em;
    color: #8ab4f8; /* Используем цвет ссылок для роли */
}

/*
 * ========================================================================
 * Стили для элементов управления в правом сайдбаре
 * ========================================================================
 */

/* Контейнер для заголовка, чтобы ссылка занимала всю ширину */
.sidebar-preview .preview-title-container {
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

    /* --- СТИЛИ ДЛЯ ВЫРАВНИВАНИЯ --- */
    position: absolute;
    bottom: 0; /* Прижимаем к низу */
    left: 0;   /* Растягиваем от левого края... */
    right: 0;  /* ...до правого */

    /* Не забудьте про внутренние отступы */
    padding: 10px;
}

.sidebar-preview .preview-title-container a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px 10px 0px 10px;
}

/* Иконка-шестеренка для загрузки превью */
.sidebar-preview .preview-edit-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.sidebar-preview .preview-edit-icon:hover {
    color: #fff;
    transform: scale(1.1) rotate(15deg);
}

/* Ссылка для редактирования описания */
.sidebar-description a {
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px dotted #888;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    display: block; /* Чтобы ссылка занимала всю область */
}

.sidebar-description a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.sidebar-description a em {
    color: #888;
    font-style: italic;
}



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

/* Фон-затемнение */
.bot-modal-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000; /* Выше всего остального */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
}

/* Само модальное окно */
.bot-modal {
    background-color: #2d2d3a;
    color: #f0f0f0;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px; /* Увеличиваем максимальную ширину для нового макета */
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.bot-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #444;
}

.bot-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.bot-modal-header .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.bot-modal-header .modal-close:hover {
    color: #fff;
}

.bot-modal-body {
    padding: 10px 20px 20px;
    overflow-y: auto; /* Прокрутка, если команд много */
}

#bot-modal-command-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- ИЗМЕНЕНИЯ ЗДЕСЬ --- */

/* Контейнер для строки команды (li) */
#bot-modal-command-list li {
    padding: 10px 5px; /* Уменьшаем вертикальный padding */
    border-bottom: 1px solid #3a3a4a;
    cursor: pointer;
    transition: background-color 0.2s ease;

    /* Используем Flexbox для выравнивания команды и описания в одну строку */
    display: flex;
    justify-content: space-between; /* Расталкиваем элементы по краям */
    align-items: baseline; /* Выравниваем текст по базовой линии */
    gap: 1em; /* Расстояние между командой и описанием */
}

#bot-modal-command-list li:last-child {
    border-bottom: none;
}

#bot-modal-command-list li:hover {
    background-color: rgba(0, 123, 255, 0.2);
}

/* Стиль для команды (левая часть) */
#bot-modal-command-list .command-text {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    color: #ffda79; /* "Кодовый" цвет */
    font-size: 0.95em;
    flex-shrink: 0; /* Запрещаем команде сжиматься */
    white-space: nowrap; /* Команда не переносится на новую строку */
}

/* Стиль для описания (правая часть) */
#bot-modal-command-list .command-description {
    font-size: 0.9em;
    color: #999; /* "Комментарийный" цвет, более тусклый */
    font-style: italic; /* Курсив для имитации комментария */
    text-align: right; /* Выравнивание по правому краю */

    /* Убираем стили, которые заставляли его быть на новой строке */
    display: inline;
    margin-top: 0;
}

/* Псевдоэлемент для добавления "//" перед описанием */
#bot-modal-command-list .command-description::before {
    content: "// ";
    color: #777; /* Цвет самих слешей */
    margin-right: 0.5em; /* Отступ после слешей */
}


/* Добавляем стиль для кликабельных элементов в сайдбаре */
.right-sidebar .participant-item.is-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.right-sidebar .participant-item.is-clickable:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.homepage-content-wrapper {
    width: 100%;
    max-width: 1036px;
    /*  margin: 20px auto;*/
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /*  gap: 15px; /* Отступ между секциями */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1;
}

/* Видимость обертки, когда чат НЕ активен */
.chat-container:not(.chat-active) .homepage-content-wrapper {
    opacity: 1;
    visibility: visible;
}

/* Скрываем обертку, когда чат АКТИВЕН */
.chat-container.chat-active .homepage-content-wrapper {
    display: none;
}

/* Общий стиль для секций на главной (Сайты, Чаты, Новости, Страницы) */
.homepage-section {
    width: 100%;
}

.homepage-section h3 {
    color: #fff;
    font-size: 1.5em;
    margin-top: 0;
    /*  margin-bottom: 15px; */
}

/* Заголовок с кнопкой-стрелкой */
.homepage-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 15px; */
}
.homepage-section .section-header h3 {
    margin-bottom: 0;
}

/* --- СТИЛИ ДЛЯ ПЛИТОК --- */

/*
 * ========================================================================
 * ИЗМЕНЕНИЯ ЗДЕСЬ
 * ========================================================================
 */

/* ОБНОВЛЕНО: Стили для блока плиток сайтов */
.quick-access-tiles {
    display: grid;
    /* Вот ключ: создаем ровно 6 колонок по 160px каждая */
    grid-template-columns: repeat(6, 160px);
    gap: 15px; /* Делаем отступ таким же, как у других блоков */
    justify-content: center; /* Это отцентрирует всю сетку, если контейнер шире */
}
/* ОБНОВЛЕНО: Обертка для плитки сайта */
.quick-access-tile-wrapper {
    position: relative;
    background-color: rgba(30, 30, 30, 0.3);
    border-radius: 10px;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    display: flex;
    cursor: pointer;
    /* УНИФИЦИРОВАННЫЙ РАЗМЕР */
    /* width: 100%; /* Ширина теперь 100% от 160px колонки грида */
    height: 100px; /* Высота совпадает с другими плитками */
}

.quick-access-tile-wrapper:hover {
    background-color: rgba(0, 123, 255, 1);
}

/* ОБНОВЛЕНО: Сама ссылка в плитке сайта */
.quick-access-tile-wrapper .quick-access-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 14px;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-word;
}

/* Иконка шестеренки остается без изменений */
.quick-access-tile-wrapper .edit-tile-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}
.quick-access-tile-wrapper:hover .edit-tile-icon {
    opacity: 1;
    visibility: visible;
}
.quick-access-tile-wrapper .edit-tile-icon:hover {
    color: #fff;
}


/* --- НОВОЕ: Стили для горизонтальной прокрутки плиток (Чаты, Новости, Страницы) --- */

.tiles-container-outer {
    position: relative;
}

.tiles-container-inner {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px; /* Отступ снизу для тени и чтобы скроллбар не прилипал */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Скрываем скроллбар для Webkit-браузеров (Chrome, Safari) */
.tiles-container-inner::-webkit-scrollbar {
    display: none;
}

/* НОВОЕ: Общий стиль для всех информационных плиток (Чаты, Новости, Страницы) */
.info-tile {
    /* УНИФИЦИРОВАННЫЙ РАЗМЕР */
    flex: 0 0 160px; /* Не сжиматься, не растягиваться, базовая ширина 160px */
    height: 100px;

    display: flex;
    align-items: flex-end; /* Заголовок внизу */
    padding: 10px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: rgba(30, 30, 30, 0.3); /* Фон по умолчанию */
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease;
    box-sizing: border-box;
}
.info-tile:hover {
    transform: translateY(-3px);
}
/* Градиентный оверлей для читаемости текста */
.info-tile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 1;
}

.info-tile .tile-title {
    font-size: 14px;
    font-weight: 500;
    z-index: 2; /* Поверх оверлея */
    line-height: 1.3;
}

/* НОВОЕ: Стили для кнопок-стрелок прокрутки */
.scroll-arrow {
    position: absolute;
    top: 0;
    height: 100px; /* Высота как у плитки .info-tile */
    width: 40px; /* Узкий прямоугольник */
    background-color: rgba(30, 30, 50, 0.6);
    backdrop-filter: blur(4px); /* Эффект размытия фона */
    color: white;
    border: none;
    border-radius: 8px; /* Небольшое скругление для эстетики */
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0; /* Скрыты по умолчанию */
    visibility: hidden;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Показываем стрелки при наведении на контейнер */
.tiles-container-outer:hover .scroll-arrow {
    opacity: 1;
    visibility: visible;
}

/* Стиль при наведении на саму стрелку */
.scroll-arrow:hover {
    background-color: rgba(0, 123, 255, 0.8);
}

/* Позиционирование левой и правой стрелки */
.scroll-arrow.left-arrow {
    left: 0;
}
.scroll-arrow.right-arrow {
    right: 0;
}


/* Адаптивность для мобильных */
@media (max-width: 600px) {
    .homepage-content-wrapper {
        gap: 20px;
    }
    .info-tile {
        flex-basis: 140px; /* Уменьшаем ширину плиток на мобильных */
    }
    .homepage-section h3 {
        font-size: 1.3em;
    }
}

.chat-container:not(.chat-active) .chat-input-area-wrapper {
    margin-top: 30px;
}

/*
 * ========================================================================
 * НОВЫЕ СТИЛИ ДЛЯ ПЛИТОК САЙТОВ (2x6 Grid + Адаптивность)
 * ========================================================================
 */

/* 1. Стили для десктопной версии (сетка 2x6) */

.quick-access-tiles {
    display: grid;
    /* Создаем ровно 6 колонок, которые занимают равное пространство */
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    /* Убираем горизонтальную прокрутку на десктопе */
    overflow-x: hidden;
}

/* Придаем плитке сайта тот же размер, что и у остальных */
.quick-access-tile-wrapper {
    height: 100px;
}

/* Скрываем стрелки прокрутки для блока сайтов на десктопе */
.sites-tile-container .scroll-arrow {
    display: none;
}


/* 2. Стили для мобильных устройств (менее 1024px) */

@media (max-width: 1024px) {
    /* Превращаем Grid в Flex-контейнер для горизонтальной прокрутки */
    .quick-access-tiles {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding-bottom: 15px;
        grid-template-columns: none;

        /* ДОБАВЛЕНО: Запрещаем перенос элементов на новую строку */
        flex-wrap: nowrap;

        /* ДОБАВЛЕНО: Выравниваем элементы по левому краю на всякий случай */
        justify-content: flex-start;

        /* Скрываем стандартный скроллбар */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .quick-access-tiles::-webkit-scrollbar {
        display: none;
    }

    /* Задаем фиксированную ширину каждой плитке, чтобы они выстроились в ряд */
    .quick-access-tiles .quick-access-tile-wrapper {
        flex: 0 0 160px; /* Не сжиматься, не растягиваться, ширина 160px */
    }

    /* Показываем стрелки прокрутки для блока сайтов на мобильных */
    .sites-tile-container .scroll-arrow {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    /* Делаем стрелки видимыми на мобильных и для остальных блоков (улучшение UX) */
    .tiles-container-outer:not(.sites-tile-container) .scroll-arrow {
        opacity: 1;
        visibility: visible;
    }
}

/* 3. Небольшие правки для очень маленьких экранов */
@media (max-width: 600px) {
    .quick-access-tiles .quick-access-tile-wrapper {
        flex-basis: 140px; /* Делаем плитки чуть уже на телефонах */
    }
}

/*
 * ========================================================================
 * Стили для кнопки подписки (перенесена в правый сайдбар)
 * ========================================================================
 */
#dialog-subscription-button {
    /* Сохраняем внешний вид */
    padding: 5px 12px;
    font-size: 0.9em;
    font-weight: 500;
    border: 1px solid #555;
    background-color: transparent;
    color: #ccc;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;

    /* Новые стили для позиционирования */
    position: absolute;
    top: 15px;      /* Отступ сверху, как у шестеренки */
    left: 15px;     /* Отступ слева */
    z-index: 10;    /* Поверх превью-изображения */
    display: none;  /* Скрыта по умолчанию, JS будет ее показывать при активном диалоге */
}

#dialog-subscription-button:hover:not(:disabled) {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

#dialog-subscription-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    border-color: transparent;
    background-color: rgba(85, 85, 85, 0.5);
}

/*
Кружок непрочитанных сообщений
 */

/* style.css */

/* Контейнер для оверлеев (может уже есть, проверь) */
.dialog-icon-container {
    position: relative;
    flex-shrink: 0;
}

.dialog-icon-overlays {
    position: absolute;
    bottom: -2px;
    right: -5px; /* Сдвигаем вправо */
    display: flex;
    gap: 2px;
}

/* Стили для самого кружка с непрочитанными сообщениями */
.unread-count-badge {
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%; /* Скругление остаётся */
    height: 20px; /*  Фиксированная высота */
    min-width: 20px; /*  Минимальная ширина (для одной цифры будет 20px) */
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px; /*  Горизонтальные отступы для чисел > 9 */
    border: 2px solid #1e1e1e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1;
    box-sizing: border-box; /*  ВАЖНО: padding теперь не будет увеличивать размер */
}

/* Стили для иконки-аватара, если она картинка */
.dialog-icon-container .dialog-icon {
    /* ... твои существующие стили ... */
    object-fit: cover; /* Чтобы картинка-логотип правильно заполняла круг */
}

/* style.css */

/* Контейнер теперь отвечает только за размер и позиционирование */
.dialog-icon-container {
position: relative; /* Чтобы кружок с цифрой позиционировался относительно него */
flex-shrink: 0;
width: 50px;
height: 50px;
    /* УБИРАЕМ overflow: hidden; отсюда! */
}

/* Общие стили для элемента иконки (и для <div> с буквой, и для <img>) */
.dialog-icon {
width: 100%;
height: 100%;
border-radius: 50%; /* Скругляем саму иконку/картинку */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Обрезаем тут, если это контейнер с буквой */
}

/* Стили для иконок, которые являются картинками (<img>) */
.dialog-icon.is-image {
object-fit: cover; /* Картинка заполняет круг, сохраняя пропорции */
}

/* Стили для плейсхолдеров с буквами */
.dialog-icon.placeholder-icon {
    font-size: 22px; /* Размер буквы */
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}

/* Особый стиль для иконки черновика */
.dialog-icon.draft-icon {
    background-color: #6c757d; /* Серый фон */
    font-size: 20px; /* Размер карандаша */
}

/* Корректировка для аватаров от get_avatar(), которые уже являются тегом <img> */
.menu-dialog-item .dialog-icon-container img.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

    /*
     * ========================================================================
     * Стили для раскрывающегося списка групп в боковом меню
     * ========================================================================
     */

    /* Убираем стандартные отступы и маркер у <li>-обертки */
    .menu-list li.other-groups-toggle {
        padding: 0;
        margin-top: 10px;
        border-top: 1px solid #444;
    }

    /* Стили для заголовка <summary> */
    .menu-list li.other-groups-toggle summary {
        padding: 10px 5px;
        cursor: pointer;
        font-weight: bold;
        color: #ccc;
        transition: background-color 0.2s ease;
        list-style: none; /* Убираем стандартный маркер-треугольник в Chrome/Safari */
    }

    .menu-list li.other-groups-toggle summary::-webkit-details-marker {
        display: none; /* Тоже для Safari/Chrome */
    }

    .menu-list li.other-groups-toggle summary:hover {
        background-color: rgba(0, 123, 255, 0.15);
    }

    /* Добавляем свою иконку-стрелку */
    .menu-list li.other-groups-toggle summary::before {
        content: '\f0da'; /* FontAwesome иконка "caret-right" */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 10px;
        transition: transform 0.2s ease-in-out;
        display: inline-block;
    }

    /* Поворачиваем стрелку, когда список раскрыт */
    .menu-list li.other-groups-toggle details[open] > summary::before {
        transform: rotate(90deg);
    }

    /* Стили для вложенного списка */
    .menu-list .other-groups-list {
        padding-left: 20px; /* Небольшой отступ для вложенности */
        margin-top: 5px;
    }

    /*
     * ========================================================================
     * Стили для кнопки подписки (УЛУЧШЕННАЯ ВЕРСИЯ)
     * ========================================================================
     */

    .menu-dialog-item .subscribe-button {
        background: transparent !important;
        border: 1px solid #28a745 !important; /* Зеленая обводка */
        color: #28a745 !important; /* Зеленый плюсик */
        border-radius: 50% !important; /* Делаем кнопку круглой */
        width: 28px !important; /* Задаем одинаковую ширину и высоту */
        height: 28px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
        font-size: 14px !important; /* Размер иконки-плюсика */
        padding: 0 !important; /* Убираем внутренние отступы */
    }

    .menu-dialog-item .subscribe-button:hover {
        background-color: #28a745 !important; /* Заливаем зеленым при наведении */
        color: #fff !important; /* Плюсик становится белым */
        transform: scale(1.1) !important; /* Немного увеличиваем для эффекта */
    }

    /* Стиль для кнопки в процессе отправки запроса */
    .menu-dialog-item .subscribe-button.loading {
        pointer-events: none !important; /* Запрещаем повторные клики */
        opacity: 0.7 !important;
        /* Можно добавить анимацию вращения для иконки, если хотите */
    }

    /*
     * ========================================================================
     * СТИЛИ ДЛЯ ЭФФЕКТА РАЗМЫТИЯ ФОНА (GLASSMORPHISM)
     * ========================================================================
     */

    /* 1. Устанавливаем полупрозрачный фон для верхних панелей */
    .site-header-fixed,
    .chat-header-active {
        background-color: rgba(33, 33, 33, 0.5);
    }

    .sliding-menu,
    .right-sidebar,
    .site-header-fixed,
    .chat-header-active {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
/*
 * ========================================================================
 * Стили для выпадающего меню действий в списке диалогов
 * ========================================================================
 */

/* Контейнер, чтобы меню позиционировалось относительно него */
.menu-dialog-item .dialog-actions-container {
    position: relative;
    margin-left: auto; /* Прижимает блок к правому краю */
}

/* Кнопка-триггер (три точки) */
.dialog-actions-trigger {
    background: transparent;
    border: none;
    color: #bbb;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.dialog-actions-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Само выпадающее меню (скрыто по умолчанию) */
.dialog-actions-menu {
    display: none; /* Скрыто по умолчанию */
    position: absolute;
    top: 50%;
    right: calc(100% + 5px); /* Справа от родителя + отступ 5px */
    transform: translateY(-50%); /* Центрируем по вертикали */
    background-color: #3a3a4a;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
    overflow: hidden;
    white-space: nowrap; /* Чтобы текст в кнопках не переносился */
}

/* Показываем меню, когда у него есть класс .active */
.dialog-actions-menu.active {
    display: block;
}

/* Общий стиль для кнопок внутри меню */
.dialog-actions-menu .dialog-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    color: #f0f0f0;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.dialog-actions-menu .dialog-menu-item:hover {
    background-color: #007bff;
}

/* Сбрасываем старые стили для кнопок, когда они внутри меню */
.dialog-actions-menu .delete-dialog-button,
.dialog-actions-menu .subscribe-button {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
}

/* Цвет иконки для кнопки удаления */
.dialog-actions-menu .delete-dialog-button {
    color: #ff5b5b !important;
}
.dialog-actions-menu .delete-dialog-button:hover {
    color: #fff !important;
    background-color: #c82333 !important;
}

/* Цвет иконки для кнопки подписки */
.dialog-actions-menu .subscribe-button {
    color: #43b581 !important;
}
.dialog-actions-menu .subscribe-button:hover {
    color: #fff !important;
    background-color: #28a745 !important;
}

/*
 * ========================================================================
 * Стили для выпадающего меню действий в правом сайдбаре
 * ========================================================================
 */

/* Контейнер для позиционирования меню */
.sidebar-preview .sidebar-actions-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

/* Ссылка-триггер (шестеренка) */
.sidebar-actions-container .js-sidebar-actions-trigger {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    display: block; /* Чтобы занимала всю область */
    padding: 5px; /* Увеличим область клика */
    margin-top:-17px;
}

.sidebar-actions-container .js-sidebar-actions-trigger:hover {
    color: #fff;
    transform: scale(1.1) rotate(15deg);
}

/* Выпадающее меню (скрыто по умолчанию) */
.sidebar-actions-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px); /* Появляется под шестеренкой */
    right: 0;
    width: 200px; /* Задаем ширину */
    background-color: #3a3a4a;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 11; /* Выше чем триггер */
    overflow: hidden;
}

.sidebar-actions-menu.active {
    display: block;
}

/* Кнопка внутри меню */
.sidebar-actions-menu .sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    color: #f0f0f0;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.sidebar-actions-menu .sidebar-menu-item:hover {
    background-color: #007bff;
}

.sidebar-actions-menu .sidebar-menu-item i {
    width: 16px; /* Для ровного отступа */
}

/*
 * ========================================================================
 * Стили для иконки-превью диалога в шапке
 * ========================================================================
 */
.chat-header-icon.has-logo {
    background-size: cover;      /* Масштабирует изображение, чтобы оно полностью покрыло контейнер */
    background-position: center; /* Центрирует изображение */
    background-color: #333;      /* Темный фон на случай, если изображение не загрузится */
}


/*
 * ========================================================================
 * Стили для новой панели профиля пользователя
 * ========================================================================
 */

/* Общий контейнер для всех правых панелей */
#right-sidebar,
#user-profile-sidebar,
#notifications-sidebar {
    position: fixed;
    top: 50px;
    right: -320px; /* Все панели скрыты за экраном */
    width: 320px;
    height: calc(100vh - 50px);
    background-color: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f0f0f0;
    z-index: 1002;
    box-sizing: border-box;
    transition: right 0.3s ease;
    overflow-y: auto;
}

/* Состояние "открыто" для любой из панелей */
#right-sidebar.open,
#user-profile-sidebar.open,
#notifications-sidebar.open {
    right: 0;
}

/* Адаптация для админ-панели WordPress */
body.admin-bar #right-sidebar,
body.admin-bar #user-profile-sidebar,
body.admin-bar #notifications-sidebar {
    top: 82px;
    height: calc(100vh - 82px);
}

/* Адаптация для админ-панели WordPress */
body.admin-bar #user-profile-sidebar {
    top: 82px;
    height: calc(100vh - 82px);
}

/* Область с аватаром */
.profile-header {
    height: 250px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: #333;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Полупрозрачный оверлей для читаемости текста */
.profile-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

/* Иконка-заглушка для гостя */
.placeholder-avatar {
    font-size: 100px;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Никнейм пользователя */
.profile-nickname {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Кнопка смены аватара (камера) */
.profile-avatar-edit {
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.4em;
    text-decoration: none;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.profile-avatar-edit:hover {
    color: #fff;
    transform: scale(1.1);
}

/* Блок с детальной информацией */
.profile-details {
    padding: 20px;
}
.profile-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border-top: 1px solid #444;
}
.profile-details-list li {
    padding: 15px 0;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}
.profile-details-list li strong {
    color: #bbb;
}

/* Ссылки "Редактировать" и "Выйти" */
.profile-edit-link, .profile-logout-link {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}
.profile-edit-link {
    background-color: #007bff;
    color: #fff;
}
.profile-logout-link {
    background-color: #444;
    color: #ccc;
}
.profile-edit-link:hover { background-color: #0056b3; }
.profile-logout-link:hover { background-color: #555; }

/*
 * ========================================================================
 * Улучшенные стили для формы входа WordPress в панели профиля
 * ========================================================================
 */
.profile-login-form {
    padding: 20px;
    border-top: 1px solid #444; /* Добавим разделитель */
}

.profile-login-form h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 500;
    color: #fff;
}

/* Убираем стандартные <p> обертки */
#user-profile-sidebar form[name="loginform"] p {
    margin-bottom: 18px;
}

/* Стили для лейблов */
#user-profile-sidebar .login-form label {
    color: #bbb;
    font-size: 0.9em;
    margin-bottom: 8px;
    display: block;
}

/* Стили для полей ввода */
#user-profile-sidebar .login-form input[type="text"],
#user-profile-sidebar .login-form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #2a2a33; /* Чуть другой фон для контраста */
    color: #f0f0f0;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}
#user-profile-sidebar .login-form input[type="text"]:focus,
#user-profile-sidebar .login-form input[type="password"]:focus {
    outline: none;
    border-color: #0099ff; /* Подсветка при фокусе */
}

/* Стили для секции "Запомнить меня" */
#user-profile-sidebar .login-remember {
    display: flex;
    align-items: center;
    margin-top: -10px; /* Уменьшим отступ сверху */
    margin-bottom: 20px;
}
#user-profile-sidebar .login-remember label {
    margin-bottom: 0;
    color: #ccc;
    display: flex; /* Для выравнивания чекбокса и текста */
    align-items: center;
    cursor: pointer;
}
#user-profile-sidebar .login-remember input[type="checkbox"] {
    margin-right: 8px;
    /* Улучшаем вид чекбокса */
    appearance: none;
    -webkit-appearance: none;
    background-color: #2a2a33;
    border: 1px solid #555;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    top: -1px;
}
#user-profile-sidebar .login-remember input[type="checkbox"]:checked {
    background-color: #007bff;
    border-color: #007bff;
}
#user-profile-sidebar .login-remember input[type="checkbox"]:checked::after {
    content: '\f00c'; /* FontAwesome галочка */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #fff;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Стили для кнопки "Войти" */
#user-profile-sidebar .login-submit input[type="submit"] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#user-profile-sidebar .login-submit input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Ссылки "Забыли пароль?" и "Регистрация" */
#user-profile-sidebar #nav {
    margin-top: 20px !important;
    padding: 0 !important;
    text-align: center;
    font-size: 0.9em;
}
#user-profile-sidebar #nav a {
    color: #8ab4f8;
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8;
    transition: all 0.2s ease;
}
#user-profile-sidebar #nav a:hover {
    border-bottom-style: solid;
    color: #fff;
}

/* Скрываем ссылку "Назад на сайт", она не нужна во всплывающем окне */
#user-profile-sidebar #backtoblog {
    display: none !important;
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ОТОБРАЖЕНИЯ ФАЙЛОВ В ЧАТЕ
 * ========================================================================
 */

/* Общий контейнер для вложения */
.chat-message .attachment-container {
    margin-top: 8px;
}

/* Изображения и видео в чате */
.chat-message .attachment-container .chat-attachment-image,
.chat-message .attachment-container .chat-attachment-video {
    max-width: 80%;
    width: 80%; /* Задаем ширину 80% */
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Контейнер для аудио-плеера (ИСПРАВЛЕНО) */
.chat-message .attachment-container .chat-attachment-audio {
    
    max-width: 350px;
    height: 54px; /* <-- ВОТ ИСПРАВЛЕНИЕ: Задаем явную высоту для стандартного плеера */
    vertical-align: middle; /* Улучшает выравнивание с текстом, если он есть рядом */
}


/* Контейнер для обычных файлов (двухстрочный) */
.chat-message .attachment-container .chat-attachment-file {
    display: flex;
    flex-direction: column;
}

.chat-message .attachment-container .chat-attachment-file .file-name {
    font-weight: 600;
    color: #8ab4f8;
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8;
}
.chat-message .attachment-container .chat-attachment-file .file-name:hover {
    border-bottom-style: solid;
}

.chat-message .attachment-container .chat-attachment-file .file-size {
    font-size: 0.8em;
    color: #bbb;
    margin-top: 4px;
}


/*
 * ========================================================================
 * СТИЛИ ДЛЯ НОВОГО ПРАВОГО САЙДБАРА С ВКЛАДКАМИ
 * ========================================================================
 */

/* Скрываем/показываем начальный плейсхолдер и контейнер с вкладками */
.right-sidebar .sidebar-initial-placeholder {
    display: block; /* Показываем по умолчанию */
}
.right-sidebar .sidebar-header-placeholder,
.right-sidebar .sidebar-tabs-container {
    display: none; /* Скрываем по умолчанию */
}
.right-sidebar.is-active .sidebar-initial-placeholder {
    display: none; /* Скрываем, когда диалог активен */
}
.right-sidebar.is-active .sidebar-header-placeholder,
.right-sidebar.is-active .sidebar-tabs-container {
    display: block; /* Показываем, когда диалог активен */
}

/* Верхний блок с превью и описанием (заполняется из JS) */
.sidebar-header-placeholder {
    margin-bottom: 15px;
}


/* Контейнер для навигации по вкладкам */
.sidebar-tabs-nav {
    display: flex;
    overflow-x: auto; /* Включаем горизонтальную прокрутку */
    padding: 0 15px;
    border-bottom: 1px solid #444;
    /* Скрываем скроллбар */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.sidebar-tabs-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Кнопка-вкладка */
.sidebar-tab-item {
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #bbb;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap; /* Запрещаем перенос текста */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.sidebar-tab-item:hover {
    color: #fff;
}

.sidebar-tab-item.active {
    color: #8ab4f8;
    border-bottom-color: #8ab4f8;
}

/* Контейнер для контента вкладок */
.sidebar-tabs-content {
    padding: 15px;
}

.sidebar-tab-panel {
    display: none; /* Скрываем все панели */
}
.sidebar-tab-panel.active {
    display: block; /* Показываем только активную */
}

/* Стили для плейсхолдера внутри панели */
.panel-placeholder {
    text-align: center;
    color: #888;
    padding: 30px 0;
}

/* Стили для контента внутри вкладок */

/* Сетка для изображений и видео */
.sidebar-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 5px;
}
.sidebar-media-item {
    width: 100%;
    padding-bottom: 100%; /* Создает квадратный контейнер */
    position: relative;
    background-color: #333;
    border-radius: 4px;
    overflow: hidden;
}
.sidebar-media-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sidebar-media-item img,
.sidebar-media-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Список для файлов и ссылок */
.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-list-item {
    padding: 8px 0;
    border-bottom: 1px solid #3a3a3a;
}
.sidebar-list-item:last-child {
    border-bottom: none;
}
.sidebar-list-item a {
    color: #ccc;
    text-decoration: none;
    display: block;
}
.sidebar-list-item a:hover {
    color: #fff;
}
.sidebar-list-item .file-name,
.sidebar-list-item .link-url {
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-list-item .file-size {
    font-size: 0.8em;
    color: #888;
}

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

.image-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none; /* Скрыт по умолчанию */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
}

#lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 40px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    z-index: 10000;
}
.lightbox-close:hover {
    opacity: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: none;
    font-size: 50px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 10000;
}
.lightbox-nav:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/*
 * ========================================================================
 * УЛУЧШЕННЫЕ СТИЛИ ДЛЯ АУДИОПЛЕЕРА В ЧАТЕ
 * ========================================================================
 */

/* Обертка для плеера и названия */
.chat-message .attachment-container .audio-player-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Отступ между названием и плеером */
    margin-top: 5px;
}

/* Название композиции */
.chat-message .attachment-container .audio-title {
    font-size: 0.9em;
    font-weight: 500;
    color: #e0e0e0;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Сам плеер */
.chat-message .attachment-container .chat-attachment-audio {
    
    max-width: 350px;
    height: 40px; /* Уменьшаем высоту, т.к. стандартный плеер невысокий */
    vertical-align: middle;
}

/* "Перекрашиваем" стандартный плеер в светлые тона для темной темы */
.chat-message .attachment-container .chat-attachment-audio {
    filter: invert(1) sepia(1) saturate(0) hue-rotate(180deg);
}
/* Стили для кнопки-слеш (команды dialog)*/

/* НОВЫЕ СТИЛИ ДЛЯ КНОПКИ КОМАНД (СЛЕШ) */
/* --- НАЧАЛО ИЗМЕНЕНИЙ --- */

/* ОБЩИЙ СТИЛЬ для кнопок загрузки и команд (серые) */
.chat-upload-button,
.chat-command-button {
    background-color: #d78903;
    color: white;
    border: none;
    border-radius: 25%;
    cursor: pointer;
    font-size: 1.1em;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.chat-upload-button:hover,
.chat-command-button:hover {
    background-color: #5a6268; /* Темнее серый при наведении */
}

/* УНИКАЛЬНЫЙ СТИЛЬ для кнопки-слеша: позиционирование */
.chat-command-button {
    position: absolute;
    left: 37px; /* Немного уменьшили отступ для красоты */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/*
 * ========================================================================
 * Стили для кликабельных участников в правом сайдбаре
 * ========================================================================
 */

/* Добавляем курсор и эффект при наведении на весь элемент списка */
.right-sidebar .participant-item.is-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0; /* Убираем padding у li, он будет у ссылки */
}

.right-sidebar .participant-item.is-clickable:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Стили для самой ссылки, чтобы она занимала всё пространство li */
.right-sidebar .participant-item.is-clickable .dialog-user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    width: 100%;
    padding: 10px 0; /* Возвращаем padding, который был у li */
}

/* Возвращаем цвета текста, которые могли сброситься из-за ссылки */
.right-sidebar .participant-item.is-clickable .dialog-user-link .participant-name {
    color: #f0f0f0;
}

.right-sidebar .participant-item.is-clickable .dialog-user-link .participant-role {
    color: #8ab4f8;
}

/* Улучшение для иконок-вкладок в правом сайдбаре */
.sidebar-tabs-nav .sidebar-tab-item {
    flex: 1; /* Заставляем каждую кнопку занимать равное пространство */
    font-size: 1.3em; /* Делаем иконки крупнее */
    padding: 12px 10px; /* Немного корректируем отступы для лучшего вида */
}

/*
 * ========================================================================
 * Стили для аватара-заглушки в виде иконки
 * ========================================================================
 */

/* Стили для контейнера-круга, когда используется иконка */
.avatar.icon-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a4a4a; /* Фоновый цвет для круга */
    color: #888; /* Цвет самой иконки */
}

/* Стили для самой иконки Font Awesome внутри круга */
.avatar.icon-avatar i {
    font-size: 24px; /* Размер иконки. Подберите под размер .avatar (40px) */
    line-height: 1; /* Для лучшего центрирования */
}

/* --- ДОБАВЬ ЭТОТ КОД В КОНЕЦ style.css --- */

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ВКЛАДКИ "КАТЕГОРИИ" В ПРАВОМ САЙДБАРЕ
 * ========================================================================
 */

/* Контейнер для ярлыков и кнопки "Добавить" */
#tab-panel-categories .dialog-categories-container {
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Стиль для ярлыка (тега) категории */
.category-tag {
    display: inline-flex;
    align-items: center;
    background-color: #555;
    color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.category-tag:hover {
    background-color: #007bff;
}

/* Крестик для удаления */
.category-tag .remove-tag {
    margin-left: 8px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 50%;
    line-height: 1;
}

.category-tag .remove-tag:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Кнопка "Добавить" (+) */
.add-category-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #555;
    color: #f0f0f0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.2s ease;
}

.add-category-btn:hover {
    background-color: #28a745; /* Зеленый при наведении */
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ВЫБОРА КАТЕГОРИЙ
 * ========================================================================
 */
.category-select-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.category-select-list li {
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #3a3a4a;
}

.category-select-list li:last-child {
    border-bottom: none;
}

.category-select-list li:hover {
    background-color: rgba(0, 123, 255, 0.2);
}

.category-select-list li.attached {
    color: #8ab4f8;
    font-weight: bold;
    cursor: not-allowed;
    background-color: rgba(0, 123, 255, 0.1);
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ СПИСКА ПОСТОВ В МОДАЛЬНОМ ОКНЕ
 * ========================================================================
 */
.post-list-in-modal {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.post-list-in-modal li {
    padding: 10px 0;
    border-bottom: 1px solid #444;
}

.post-list-in-modal li:last-child {
    border-bottom: none;
}

.post-list-in-modal li a {
    text-decoration: none;
    color: #ccc;
    transition: color 0.2s ease;
}

.post-list-in-modal li a:hover {
    color: #fff;
    border-bottom: none;
}

/* style.css */

/*
 * ========================================================================
 * УЛУЧШЕННЫЕ СТИЛИ ДЛЯ КНОПОК УПРАВЛЕНИЯ В МОДАЛЬНОМ ОКНЕ
 * ========================================================================
 */

/* Позиционируем крестик закрытия абсолютно внутри модального окна */
.post-modal .modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10; /* Убедимся, что он поверх контента */
}

/* Кнопка "Назад" */
.post-modal .modal-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #555;
    color: #ccc;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 20px; /* Отступ до заголовка поста */
    transition: all 0.2s ease;
}

.post-modal .modal-back-button:hover {
    background-color: #555;
    color: #fff;
}

.post-modal .modal-back-button i {
    font-size: 0.9em;
}

/*
 * ========================================================================
 * НОВЫЕ СТИЛИ ДЛЯ СЧЕТЧИКА УВЕДОМЛЕНИЙ И НАПОМИНАНИЙ
 * ========================================================================
 */

/* Контейнер иконки уведомлений */
.header-right-icons a[title="Уведомления"] {
    position: relative;
}

/* Кружок-счетчик */
.notification-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545; /* Красный цвет */
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border: 2px solid #212121; /* Обводка в цвет фона шапки */
}

/* Блок с напоминаниями в правом сайдбаре */
.sidebar-reminders-section {
    padding: 15px 20px;
    border-top: 1px solid #444;
}

.sidebar-reminders-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1em;
    color: #bbb;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Список напоминаний (общий для обоих сайдбаров) */
.sidebar-reminders-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-reminders-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9em;
    border-bottom: 1px solid #3a3a4a;
}
.sidebar-reminders-list li:last-child {
    border-bottom: none;
}

.sidebar-reminders-list li .task-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Эта строка уже должна быть, она важна */
    min-width: 0;
}

.sidebar-reminders-list li .task-title {
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-reminders-list li .task-date {
    font-size: 0.9em;
    color: #999;
}

/* Стили для просроченных задач */
.sidebar-reminders-list li.task-overdue .task-title,
.sidebar-reminders-list li.task-overdue .task-date {
    color: #ff9999;
}

/* Кнопки управления */
.sidebar-reminders-list li .task-actions {
    display: flex;
    gap: 5px;
    margin-left: 10px;
}

.sidebar-reminders-list li .task-actions button {
    background: none;
    border: 1px solid #555;
    color: #aaa;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 13px;
}

.sidebar-reminders-list li .task-actions button:hover {
    background-color: #555;
    color: #fff;
}
/*
 * ========================================================================
 * СТИЛИ ДЛЯ СВОРАЧИВАЕМОГО СПИСКА УВЕДОМЛЕНИЙ
 * ========================================================================
 */

/* По умолчанию скрываем все напоминания, кроме первого, НО ТОЛЬКО для сворачиваемого списка */
#notifications-list.collapsible-list:not(.expanded) li:not(.oldest-reminder) {
    display: none;
}

/* Стилизуем самый старый элемент, чтобы он выглядел как ссылка, НО ТОЛЬКО для сворачиваемого списка */
#notifications-list.collapsible-list:not(.expanded) .oldest-reminder {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#notifications-list.collapsible-list:not(.expanded) .oldest-reminder:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Добавляем иконку-стрелку к самому старому элементу LI, НО ТОЛЬКО для сворачиваемого списка */
#notifications-list.collapsible-list:not(.expanded) .oldest-reminder::after {
    content: '\f078'; /* Иконка FontAwesome "шеврон вниз" */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    padding-left: 15px;
    color: #888;
    align-self: center;
}

/* Когда список развернут, иконка меняется на "шеврон вверх", НО ТОЛЬКО для сворачиваемого списка */
#notifications-list.collapsible-list.expanded .oldest-reminder::after {
    content: '\f077'; /* Иконка FontAwesome "шеврон вверх" */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    padding-left: 15px;
    color: #888;
    align-self: center;
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ СПИСКА НЕПРОЧИТАННЫХ СООБЩЕНИЙ В ПАНЕЛИ УВЕДОМЛЕНИЙ
 * ========================================================================
 */

/* Контейнер для секции с непрочитанными сообщениями */
.sidebar-unread-section {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #444; /* Разделитель между напоминаниями и сообщениями */
}

/* Заголовок "Непрочитанные сообщения" */
.sidebar-unread-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1em;
    color: #bbb;
    font-weight: 600;
}

/* Список сообщений */
.sidebar-messages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Элемент списка (одно сообщение) */
.unread-message-item {
    border-bottom: 1px solid #3a3a4a;
}
.unread-message-item:last-child {
    border-bottom: none;
}

/* Ссылка, оборачивающая все сообщение */
.unread-message-link {
    display: block;
    padding: 10px 5px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.unread-message-link:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Верхняя строка: Имя отправителя + Название чата */
.unread-message-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.sender-name {
    font-weight: bold;
    color: #f0f0f0;
    font-size: 0.95em;
    /* Ограничение по ширине, чтобы не вытеснять название чата */
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-title-preview {
    font-size: 0.85em;
    color: #8ab4f8;
    white-space: nowrap;
}

/* Нижняя строка: Превью сообщения */
.message-content-preview {
    font-size: 0.9em;
    color: #aaa;
    line-height: 1.4;
}

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

#tab-panel-localcloud {
    padding: 0; /* Убираем стандартный отступ, чтобы папки прилегали к краям */
}

.localcloud-container {
    padding: 10px;
}

.localcloud-folder {
    margin-bottom: 5px;
}

.localcloud-folder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 500;
}

.localcloud-folder-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.localcloud-folder-header.active {
    background-color: rgba(0, 123, 255, 0.2);
    color: #fff;
}

.localcloud-folder-header i {
    color: #8ab4f8; /* Цвет иконки папки */
    width: 20px; /* Фиксированная ширина для выравнивания */
    text-align: center;
}

.localcloud-folder-content {
    display: none; /* Все папки по умолчанию закрыты */
    padding: 10px 5px 10px 20px; /* Отступы для вложенного контента */
    border-left: 2px solid #444;
    margin-left: 25px; /* Сдвигаем контент вправо */
}

/* Убираем лишние отступы у вложенных панелей */
.localcloud-folder-content .sidebar-tab-panel {
    padding: 0;
}

.localcloud-folder-content .panel-placeholder {
    padding: 10px 0;
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА РЕДАКТОРА TXT-ФАЙЛОВ
 * ========================================================================
 */

#text-editor-modal {
    width: 90%;
    max-width: 800px;
    height: 80vh; /* Занимает 80% высоты экрана */
}

#text-editor-textarea {
    flex-grow: 1; /* Занимает все доступное пространство в .bot-modal-body */
    width: 100%;
    height: 100%;
    padding: 15px;
    border: none;
    background-color: #1e1e2d; /* Фон как у редактора кода */
    color: #f0f0f0;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    resize: none; /* Запрещаем изменение размера */
    outline: none;
    box-sizing: border-box;
}

#text-editor-save {
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    background-color: #28a745;
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#text-editor-save:hover {
    background-color: #218838;
}

#text-editor-save:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/*
 * ========================================================================
 * УЛУЧШЕННЫЕ СТИЛИ ДЛЯ РЕДАКТОРА TXT-ФАЙЛОВ (РАСТЯГИВАНИЕ ПОЛЯ)
 * ========================================================================
 */

/* 1. Задаем родительскому блоку Flex-свойства */
.text-editor-body {
    padding: 0; /* Убираем стандартные отступы */
    display: flex; /* Включаем Flexbox */
    flex-direction: column; /* Направление - колонка (вертикально) */
    flex-grow: 1; /* Позволяем этому блоку занять все место между шапкой и подвалом модального окна */
}

/* 2. Растягиваем textarea на всю доступную высоту */
#text-editor-textarea {
    flex-grow: 1; /* КЛЮЧЕВОЕ СВОЙСТВО: textarea занимает все оставшееся свободное место */
    /* Остальные твои стили для textarea остаются без изменений */
    width: 100%;
    border: none;
    background-color: #1e1e2d;
    color: #f0f0f0;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    padding: 15px;
}

/* style.css -> Вставить в самый конец файла */

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ИНТЕГРИРОВАННОГО ПОИСКА
 * ========================================================================
 */

/* --- Контейнер для поиска и тегов --- */
.chat-search-bar-container {
    position: absolute;
    top: 30px; /* Располагаем чуть ниже шапки */
    left: 50px; /* Отступ от иконки меню */
    right: 20px;
    z-index: 1002; /* Выше чем шапка, но ниже меню */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Показываем блок поиска, только когда чат активен */
body.chat-is-active .chat-search-bar-container {
    opacity: 1;
    visibility: visible;
}

/* --- Основной блок поиска --- */
.chat-search-wrapper {
    display: flex;
    align-items: center;
    background-color: rgba(30, 30, 30, 0.7);
    border-radius: 20px;
    padding: 3px 5px 3px 10px;
    flex-grow: 1; /* Занимает доступное место */
    min-width: 500px;
}

/* --- Переключатель области поиска (Pill) --- */
.chat-search-scope {
    display: flex;
    align-items: center;
    background-color: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.8em;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.chat-search-scope-close {
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}

/* --- Поле ввода поиска --- */
#chat-search-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #f0f0f0;
    padding: 5px;
    outline: none;
    font-size: 0.9em;
}

#chat-search-input::placeholder {
    color: #aaa;
}

/* --- Контейнер для тегов --- */
.chat-tags-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px; /* Для тени скроллбара */
    /* Скрываем скроллбар */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.chat-tags-container::-webkit-scrollbar {
    display: none;
}

.chat-tag {
    background-color: rgba(74, 74, 74, 0.7);
    color: #f0f0f0;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-tag:hover {
    background-color: rgba(90, 90, 90, 0.9);
}

.chat-tag.active {
    background-color: #007bff;
    color: white;
}

/* --- Стили для результатов поиска по всем чатам --- */
.search-results-container {
    padding: 15px;
    color: #f0f0f0;
}
.search-results-container.no-results {
    text-align: center;
    color: #aaa;
}
.search-result-dialog {
    background-color: rgba(50, 50, 50, 0.5);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.search-result-dialog h5 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #ccc;
}
.search-result-dialog h5 a {
    color: #8ab4f8;
    text-decoration: none;
}
.search-result-dialog ul {
    list-style: none;
    padding-left: 15px;
    margin: 0;
    border-left: 2px solid #007bff;
}
.search-result-dialog ul li {
    padding: 5px 0;
    font-style: italic;
    color: #ddd;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .chat-search-bar-container {
        flex-direction: column;
        align-items: stretch;
        left: 60px;
        right: 10px;
        top: 0;
    }
    .chat-tags-container {
        padding-top: 5px;
    }
}

/*
 * ========================================================================
 * КРЕАТИВНЫЕ СТИЛИ ДЛЯ ИНТЕГРИРОВАННОГО ПОИСКА v2.0
 * ========================================================================
 */

/* --- Главный контейнер: позиционирование и видимость --- */
.chat-search-bar-container {
    /* Убираем абсолютное позиционирование, встраиваем в поток */
    padding: 0 15px; /* Боковые отступы, как у .chat-input-area-wrapper */
    margin-top: 15px; /* Отступ от шапки */
    margin-bottom: -10px; /* Немного наезжаем на область чата для слитности */
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 5; /* Выше чем .chat-results */
    opacity: 0;
    visibility: hidden;
    height: 0; /* Изначально не занимает места */
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

/* Эффектное появление при активации чата */
body.chat-is-active .chat-search-bar-container {
    opacity: 1;
    visibility: visible;
    height: 44px; /* Задаем высоту, равную полю ввода */
}

/* --- Левая часть: поле ввода --- */
.chat-search-input-wrapper {
    flex-grow: 1; /* Занимает все доступное пространство */
    display: flex;
    align-items: center;
    /* Тот же фон и стиль, что и у поля ввода сообщения */
    background-color: rgba(30, 30, 30, 0.3);
    border: 1px solid #555;
    border-radius: 22px; /* Идеально круглая форма */
    height: 44px;
    padding: 0 5px 0 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-search-input-wrapper:focus-within {
    border-color: #0099ff;
    box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.2);
}

/* --- Переключатель области поиска (Pill) --- */
.chat-search-scope {
    display: flex;
    align-items: center;
    background-color: #007bff;
    color: white;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.85em;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.chat-search-scope-close {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.chat-search-scope-close:hover {
    opacity: 1;
}

/* --- Само поле ввода --- */
#chat-search-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #f0f0f0;
    padding: 8px 5px;
    outline: none;
    font-size: 1em;
}

#chat-search-input::placeholder {
    color: #888;
}

/* --- Правая часть: обертка для тегов и стрелок --- */
.chat-tags-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 1; /* Позволяем блоку сжиматься */
    max-width: 50%; /* Не занимает больше половины ширины */
    position: relative; /* Для позиционирования градиентов */
}

/* --- Контейнер тегов с прокруткой --- */
.chat-tags-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Скрываем стандартный скроллбар */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.chat-tags-container::-webkit-scrollbar {
    display: none;
}

/* --- Стилизация тегов (как у Pill) --- */
.chat-tag {
    background-color: #007bff;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.chat-tag:hover {
    transform: translateY(-1px);
    background-color: #0069d9;
}

.chat-tag.active {
    background-color: #fff;
    color: #007bff;
    font-weight: bold;
}

/* --- Стрелки для прокрутки тегов --- */
.chat-tags-wrapper .scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background-color: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(2px);
    color: #fff;
    border: 1px solid #555;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, background-color 0.2s;
}
.chat-tags-wrapper .scroll-arrow:hover {
    background-color: #007bff;
}

.chat-tags-wrapper .tags-scroll-left {
    left: -14px;
}

.chat-tags-wrapper .tags-scroll-right {
    right: -14px;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .chat-search-bar-container {
        padding: 0 10px;
        margin-top: 10px;
    }
    .chat-tags-wrapper {
        max-width: 40%; /* Даем чуть меньше места тегам на мобильных */
    }
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ DRAG & DROP
 * ========================================================================
 */

/* Оверлей, который будет показывать, куда бросать файл */
.drag-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 123, 255, 0.4); /* Полупрозрачный синий фон */
    border: 3px dashed #007bff;
    border-radius: 20px; /* Скругление как у chat-container */
    display: none; /* Скрыт по умолчанию */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    z-index: 10; /* Поверх всех элементов чата, но ниже шапки и меню */
    pointer-events: none; /* ВАЖНО: позволяет кликам проходить, если нужно, но мы будем управлять этим через JS */
}

/* Активное состояние перетаскивания */
.chat-input-area-wrapper.drag-over .drag-drop-overlay {
    display: flex;
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ОБЛАСТИ ФАЙЛОВ ПЕРЕД ОТПРАВКОЙ (STAGING AREA)
 * ========================================================================
 */

#file-staging-area {
    padding: 0 15px 10px 15px; /* Боковые отступы, нижний отступ */
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow-y: auto;
    max-height: 150px;
    box-sizing: border-box;
    border-bottom: 1px solid #444;
}

.staged-file-preview {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    background-color: #444;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
}

.staged-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staged-file-preview .file-info {
    font-size: 2.5em;
    color: #aaa;
    line-height: 1;
}

.staged-file-preview .file-name {
    font-size: 0.7em;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

.remove-staged-file {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.remove-staged-file:hover {
    background-color: #dc3545; /* Красный при наведении */
}

/* ========================================================================
 * ФИНАЛЬНАЯ ВЕРСИЯ СТИЛЕЙ ДЛЯ АЛЬБОМОВ (GRID)
 * ======================================================================== */

/* 1. Контейнер альбома */
.attachment-container.is-album {
    display: grid;
    width: 350px; /* Указываем, что контейнер должен занять всю ширину родителя */
    /* Ваша команда, которая теперь будет работать корректно */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 5px;
}

/* 2. Ячейка сетки (обертка для картинки) */
.attachment-container.is-album .attachment-item {
    position: relative;    /* Необходимо для позиционирования картинки внутри */
    aspect-ratio: 1 / 1;   /* Делает ячейку квадратной */
    background-color: #333; /* Фон на случай, если картинка не загрузится */
    border-radius: 4px;
    overflow: hidden;
}

/* 3. Сама картинка или видео внутри ячейки */
.attachment-container.is-album .chat-attachment-image,
.attachment-container.is-album .chat-attachment-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняет ячейку, обрезая лишнее, сохраняя пропорции */
}

/* --- Стили для нового интерфейса редактирования сообщений --- */
.editing-message-area {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Расстояние между элементами */
}

.editing-message-area textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

.editing-attachments-list h6 {
    margin: 0 0 5px;
    font-size: 0.8em;
    color: #888;
}

.editing-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Расстояние между вложениями */
}

.editing-attachment-item {
    display: inline-flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 0.85em;
    color: #333;
}

.editing-attachment-item .fa-paperclip {
    margin-right: 6px;
    color: #666;
}

.remove-attachment-btn {
    background: #bbb;
    color: white;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.remove-attachment-btn:hover {
    background-color: #e53935; /* Красный при наведении */
}

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ССЫЛКИ НА СООБЩЕНИЕ И ПОДСВЕТКИ
 * ========================================================================
 */

/* Стили для ссылки-времени */
.message-timestamp-link {
    text-decoration: none; /* Убираем стандартное подчеркивание */
}

/* При наведении на ссылку-время, добавляем подчеркивание самому тексту */
.message-timestamp-link:hover .message-timestamp {
    text-decoration: underline;
}

/* Стили для подсветки сообщения при переходе по якорю */
.message-wrapper.highlighted-message {
    animation: highlight-fade 3s ease-out;
}

@keyframes highlight-fade {
    0% {
        background-color: rgba(0, 123, 255, 0.4); /* Начальный цвет подсветки */
    }
    100% {
        background-color: transparent; /* Плавное затухание в прозрачный */
    }
}

/* style.css -> Добавить в конец файла */

/*
 * ========================================================================
 * СТИЛИ ДЛЯ ФУНКЦИОНАЛА РЕПОСТОВ
 * ========================================================================
 */

/* 1. Стили для новой иконки "Репост" */
.repost-message-icon {
    cursor: pointer;
    font-size: 0.8em;
    color: #bbb;
    transition: color 0.2s ease;
    padding: 2px;
}

.repost-message-icon:hover {
    color: #43b581; /* Зеленоватый цвет при наведении */
}

/* 2. Стили для блока "Репост из..." внутри сообщения */
.reposted-from {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    font-style: italic;
    color: #ccc;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.reposted-from .fa-retweet {
    color: #8ab4f8; /* Синий цвет для иконки */
}

.reposted-from a {
    color: #8ab4f8;
    font-weight: bold;
    font-style: normal; /* Убираем курсив у ссылки */
    text-decoration: none;
    border-bottom: 1px dotted #8ab4f8;
}

.reposted-from a:hover {
    border-bottom-style: solid;
}

/* 3. Стили для списка групп в модальном окне репоста */
/* Используем тот же стиль, что и для списка категорий */
#repost-group-list li {
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #3a3a4a;
}

#repost-group-list li:last-child {
    border-bottom: none;
}

#repost-group-list li:hover {
    background-color: rgba(0, 123, 255, 0.2);
}
/*
 * ========================================================================
 * СТИЛИ ДЛЯ УДАЛЕНИЯ ФАЙЛОВ ИЗ LOCALCLOUD
 * ========================================================================
 */

/* Делаем родительские контейнеры относительными для позиционирования кнопки */
.sidebar-media-item,
.sidebar-list-item {
    position: relative;
}

/* Стили для самой кнопки-крестика */
.delete-localcloud-file {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    z-index: 10;
    transition: all 0.2s ease;

    /* По умолчанию кнопка скрыта */
    opacity: 0;
    visibility: hidden;
}

/* Показываем кнопку при наведении на родительский элемент */
.sidebar-media-item:hover .delete-localcloud-file,
.sidebar-list-item:hover .delete-localcloud-file {
    opacity: 1;
    visibility: visible;
}

/* Эффект при наведении на саму кнопку */
.delete-localcloud-file:hover {
    background-color: #dc3545; /* Красный */
    transform: scale(1.1);
    border-color: #fff;
}

/* Для файловых списков кнопка может быть слишком большой, сделаем ее чуть меньше */
.sidebar-list-item .delete-localcloud-file {
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

/* --- Стили для вкладок авторизации в сайдбаре --- */

/* Контейнер для вкладок */
.profile-login-form .husky-qr-login-tabs {
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0;
    display: flex;
    border-bottom: 1px solid #4a4a4a;
}

.profile-login-form .husky-qr-login-tabs li {
    margin: 0;
    padding: 0;
    flex-grow: 1; /* Растягиваем вкладки на всю ширину */
    text-align: center;
}

/* Ссылки-вкладки */
.profile-login-form .husky-qr-login-tabs li a {
    display: block;
    padding: 10px 5px;
    text-decoration: none;
    color: #bbb;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    font-size: 14px;
}

/* Активная вкладка */
.profile-login-form .husky-qr-login-tabs li a.active {
    color: #fff;
    font-weight: bold;
    border-bottom-color: #4A90E2; /* Синий цвет для активной вкладки */
}

.profile-login-form .husky-qr-login-tabs li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Панели с контентом */
.profile-login-form .husky-qr-login-panel {
    display: none; /* Прячем все панели по умолчанию */
}

.profile-login-form .husky-qr-login-panel.active {
    display: block; /* Показываем только активную */
}

/* Стили для iframe с QR-кодом */
#husky-panel-qr iframe {
    width: 100%;
    height: 380px; /* Подбери высоту по своему усмотрению */
    border: 0;
    border-radius: 4px;
}

/* Стили для формы с кодом, чтобы она выглядела как стандартная */
#loginform-code p {
    margin-bottom: 10px;
}
#loginform-code label {
    color: #bbb;
    font-size: 14px;
}
#loginform-code .input {
    width: 100%;
    padding: 8px;
    background-color: #1e1e1e;
    border: 1px solid #4a4a4a;
    color: #fff;
    border-radius: 3px;
    margin-top: 5px;
}
#loginform-code .button-primary {
    width: 100%;
    padding: 10px;
    background-color: #4A90E2;
    border: none;
    cursor: pointer;
}

/* style.css -> Добавить в конец файла */

/*
 * ========================================================================
 * СТИЛИ ДЛЯ НОВОЙ КНОПКИ "КЭШИРОВАТЬ СООБЩЕНИЕ"
 * ========================================================================
 */

/* Стили для иконки кеширования */
.cache-message-icon {
    cursor: pointer;
    font-size: 0.8em; /* Такой же размер, как у других */
    color: #bbb;
    transition: color 0.2s ease;
    padding: 2px;
}

.cache-message-icon:hover {
    color: #28a745; /* Зеленый цвет при наведении (как у "Сохранить") */
}

/* style.css -> Добавить в конец файла */

/*
========================================================================
 СТИЛИ ДЛЯ ИНТЕГРАЦИИ ПЛАГИНА АВТОМАТИЗАЦИИ
========================================================================
*/

/*
========================================================================
 НАДЕЖНОЕ ИСПРАВЛЕНИЕ ДЛЯ ОТОБРАЖЕНИЯ ВКЛАДОК САЙДБАРА
========================================================================
*/

/* Скрываем все дочерние панели внутри контейнера .sidebar-tabs-content.
  Этот селектор более специфичный и с меньшей вероятностью будет
  переопределен другими стилями.
*/
.sidebar-tabs-content > .sidebar-tab-panel {
    display: none;
}

/* Показываем только ту панель, у которой есть класс .active.
  Прямой дочерний селектор (>) повышает приоритет правила.
*/
.sidebar-tabs-content > .sidebar-tab-panel.active {
    display: block;
}

/* Для панели "Автоматизация" мы используем flexbox, поэтому
  вместо display: block; нужно использовать display: flex;
*/
.sidebar-tabs-content > #tab-panel-automations.active {
    display: flex;
}

/* --- Панель в сайдбаре --- */
#tab-panel-automations {
    display: none; /* Панель по умолчанию скрыта */
    flex-direction: column;
    height: 100%;
}
#tab-panel-automations.active {
    display: flex; /* Показывается, когда активна */
}

.automations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.automations-header h4 {
    margin: 0;
    font-size: 16px;
}
.add-automation-btn {
    background: none;
    border: none;
    color: #aeb9c4;
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
    line-height: 1;
}
.add-automation-btn:hover {
    color: #fff;
}
#automations-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 5px 0;
}
.automation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.automation-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 15px;
}
.automation-actions button {
    background: none;
    border: none;
    color: #8a96a3;
    cursor: pointer;
    margin-left: 10px;
    padding: 3px 5px;
    font-size: 14px;
}
.automation-actions button:hover {
    color: #fff;
}

/* --- Модальное окно --- */
#automation-modal,
#rule-modal {
    width: 90%;
    max-width: 500px;
}
#automation-form .bot-modal-body,
#rule-form .bot-modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}
#automation-form .form-field,
#rule-form .form-field {
    display: flex;
    flex-direction: column;
}
#automation-form label,
#rule-form label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #ccc;
}
#automation-form input[type="text"],
#automation-form textarea,
#automation-form select,
#rule-form input[type="text"],
#rule-form textarea,
#rule-form select {
    width: 100%;
    background-color: #1a242f;
    border: 1px solid #3e4a57;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    font-size: 14px;
}
#automation-form textarea,
#rule-form textarea {
    resize: vertical;
}
#automation-form .bot-modal-footer,
#rule-form .bot-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#automation-form .save-button,
#automation-form .cancel-button,
#rule-form .save-button,
#rule-form .cancel-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
#automation-form .save-button,
#rule-form .save-button {
    background-color: #4A90E2;
    color: white;
}
#automation-form .save-button:disabled,
#rule-form .save-button:disabled {
    background-color: #3a5c80;
    cursor: not-allowed;
}
#automation-form .cancel-button,
#rule-form .cancel-button {
    background-color: #55616e;
    color: #e0e0e0;
}

/*
 * Стили для вкладок "Автоматизация" и "Отправка" в правом сайдбаре
 */

/* Заголовок вкладки (напр. "Отправить в...") */
.connections-header,
.automations-header,
.categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #444;
}

.connections-header h4,
.automations-header h4,
.categories-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Кнопка "+" */
.add-connection-btn,
.add-automation-btn,
.add-category-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    line-height: 1;
}
.add-connection-btn:hover,
.add-automation-btn:hover,
.add-category-btn:hover {
    color: #fff;
}


/* Стили для элементов списка (связи, правила, категории) */
.connection-item,
.automation-item,
.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #333;
    transition: background-color 0.2s;
}

.connection-item:hover,
.automation-item:hover,
.category-item:hover {
    background-color: #383838;
}

.connection-details,
.automation-details,
.category-name {
    flex-grow: 1;
    cursor: pointer;
    color: #e0e0e0;
    text-decoration: none;
}
.category-name:hover {
    color: #fff;
}


.connection-info {
    font-size: 12px;
    color: #888;
}

.connection-actions,
.automation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Общие стили для кнопок-иконок (редактировать, удалить) */
.edit-rule-btn,
.delete-rule-btn,
.delete-category-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    margin-left: 10px;
    padding: 3px 5px;
    font-size: 14px;
}
.edit-rule-btn:hover,
.delete-rule-btn:hover,
.delete-category-btn:hover {
    color: #fff;
}



/* --- Старые стили для тегов категорий (оставляем на всякий случай, если где-то еще используются) --- */
.category-tag-list {
    padding: 10px 15px;
// ... existing code ...

.category-tag .remove-tag:hover {
    background-color: #c0392b;
    color: #fff;
}

.add-category-btn {
    background: none;
    border: 1px dashed #555;
    color: #888;
    cursor: pointer;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 14px;
    margin-left: 5px;
    transition: all 0.2s;
}
// ... existing code ...
.category-name:hover {
    color: #fff;
}
    /*
     * ========================================================================
     * СТИЛИ ДЛЯ ОБНОВЛЕННОЙ ВКЛАДКИ "КАТЕГОРИИ"
     * ========================================================================
     */

    /* Заголовок вкладки (Категории +) */
    .categories-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        border-bottom: 1px solid #444;
        background-color: #252525;
    }

    .categories-header h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    /* Кнопка "+" в заголовке (стили уже должны существовать, но на всякий случай) */
    .categories-header .add-category-btn {
        background: none;
        border: none;
        color: #aaa;
        cursor: pointer;
        font-size: 18px;
        padding: 5px;
        line-height: 1;
    }
    .categories-header .add-category-btn:hover {
        color: #fff;
    }


    /* Контейнер для списка категорий */
    #categories-list-container {
        /* Этот контейнер уже имеет класс .sidebar-list, который сбрасывает стили */
    }


    /* Элемент списка (одна категория) */
    .category-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #333;
        transition: background-color 0.2s;
    }

    .category-item:hover {
        background-color: #383838;
    }

    /* Название категории (кликабельная область) */
    .category-name {
        flex-grow: 1;
        cursor: pointer;
        color: #e0e0e0;
        text-decoration: none;
    }
    .category-name:hover {
        color: #fff;
    }

    /* Кнопка удаления (корзина) */
    .delete-category-btn {
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        margin-left: 10px;
        padding: 3px 5px;
        font-size: 14px;
        transition: color 0.2s ease;
    }
    .delete-category-btn:hover {
        color: #ff5b5b; /* Красный при наведении */
    }

    /* Скрываем старый контейнер, если он вдруг где-то остался */
    .dialog-categories-container {
        display: none;
    }