/*
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: 0;
    padding: 0;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Скрываем основной скролл у body, прокрутка будет внутри элементов */
    box-sizing: border-box;

    /* Интерактивный фон - переливающийся градиент */
    background: linear-gradient(135deg, #000000, #49496b, #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: 800px;
    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); /* Максимальная ширина контента с учетом аватарки и отступа */
}

.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(74, 74, 74, 0.9);
    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;
    align-items: center;
    padding: 15px;
    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-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 15px; /* Было 50px, стало 85px (40px кнопка + 40px кнопка + 5px отступ) */
    border: 1px solid #555;
    border-radius: 20px;
    /* Сдвигаем поле влево, чтобы кнопки накладывались */
    margin-right: -75px; /* Было -40px, стало -75px (40px кнопка + 35px кнопка или отступ) */
    font-size: 1em;
    background-color: #3a3a3a;
    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.97);
    color: #f0f0f0;
    z-index: 99; /* Ниже иконки меню, но выше чата */
    transition: left 0.3s ease; /* Анимация выдвижения */
    padding: 20px; /* Оставляем стандартный padding для меню */
    box-sizing: border-box;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    overflow-y: auto; /* **Включаем прокрутку** */
}

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

/* Стили для содержимого меню */
.sliding-menu h2 {
    color: #fff;
    margin-top: 70px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.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;
    }
}


/*
 * Стили для стандартных страниц (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(40, 40, 40, 0.9); /* Темный полупрозрачный фон, как у результатов чата */
    padding: 20px; /* Внутренние отступы внутри блока */
    border-radius: 20px; /* Скругленные углы */
    /* --- КОНЕЦ НОВЫХ СТИЛЕЙ --- */
}



/* Стили блока плиток */
.quick-access-tiles {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) ); /* Адаптивная сетка: 100px минимум, растягивается */
    gap: 15px; /* Отступ между плитками */
    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 {
    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; /* Цвет при наведении (красный) */
}

/* Стили для области редактирования сообщения */
.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(74, 74, 74, 0.7); /* Фон обертки */
    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: 1px 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 */
}

/* Modal Content Container */
.post-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff; /* White background for the modal */
    padding: 20px;
    z-index: 10000; /* Ensure it's above the overlay */
    display: none; /* Hidden by default */
    max-width: 80%; /* Maximum width relative to viewport */
    max-height: 80%; /* Maximum height relative to viewport */
    overflow-y: auto; /* Add scrollbar if content overflows vertically */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Add a shadow */
    border-radius: 8px; /* Rounded corners */
    color: #333; /* Default text color */
}

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

.post-modal .modal-close:hover {
    color: #333; /* Darker color on hover */
}

/* Style for the area where post content is loaded */
.post-modal-content-area {
    padding-top: 20px; /* Add some space above content for the close button */
    /* Add any specific styles for the post content within the modal */
    /* Example: */
    /* font-size: 16px; */
    /* line-height: 1.6; */
}

/* 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); // Такая же тень, как у круга
    // Остальные стили остаются прежними
}
*/