.vertical-separator {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.2); /* Полупрозрачная белая черта */
    margin: 0px 5px 0px 0px; 
}

.comments-container {
    margin-bottom: 20px;
}

.comment-avatar {
    margin-right: 10px;
}

.comment-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.comment-item-container {
    margin-bottom: 20px;
    padding: 15px 15px 15px 1px;
    width: 49%;
}

.comment-item {
    display: flex;
    align-items: flex-start;
}

.comment-avatar {
    margin-right: 15px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* Информация о пользователе */
.comment-info {
   max-width: 100%;
}

.comment-header {
    display: flex;
    align-items: center;
}

/* Никнейм пользователя */
.comment-author {
    font-size: 16px;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

/* Дата комментария */
.comment-date {
    font-size: 16px;
    font-weight: 400;
    color: rgb(128, 128, 128);
}

/* Меню с тремя точками */
.comment-menu {
    position: relative;
}

.menu-icon {
    cursor: pointer;
    width: 14px;
}

.menu-dropdown {
    position: absolute;
    display: none;
    top: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-icon:hover + .menu-dropdown {
    display: block;
}

/* Текст комментария */
.comment-text {
    font-size: 16px;
    font-weight: 400;
    color: rgb(192, 192, 199);
    margin-top: 8px;
}

/* Реакции на комментарий */
.comment-reactions {
    display: flex;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* Иконка плюсика для добавления реакции */
.reaction-plus {
    position: relative;
}

.reaction-icon {
    display: flex;
    height: 8px;
    border-radius: 8px;
    background-color: #333;
    padding: 8px;
    cursor: pointer;
}

.reaction-menu {
    position: absolute;
    top: -122px;
    left: 0;
    background-color: #121212;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    width: 218px;
    border: 1px solid rgb(43 43 43);
    z-index: 1;
}

.reaction-gap {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    scrollbar-width: thin;
    scrollbar-color: grey #121212;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 90px;
}

.reaction-plus:hover .reaction-menu {
    display: block;
}

/* Список реакций */
.reaction-list {
    display: flex;
    flex-wrap: wrap;
    color: rgb(192, 192, 199);
    gap: 7px;
}

.reaction-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}


/* Кнопки действия "Ответить" и "Пожаловаться" */
.comment-actions {
    display: flex;
    gap: 12px;
}

.reaction-emoji {
   cursor: pointer;
   width: 20px;
   height: 20px;
   object-fit: contain; 
   display: inline-block;
   vertical-align: middle;
}

.reaction-selected {
    background-color: #2f5d9e;
    color: #fff;
}


/* Поле для ответа */
.reply-input textarea {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    padding: 10px;
    margin-top: 8px;
}

.comment-author-link {
    color: inherit; /* Использует цвет родителя */
    text-decoration: none; /* Убираем подчёркивание */
}

.comment-author-link:hover {
    color: inherit; /* Оставляем цвет таким же при наведении */
    text-decoration: none; /* Без подчёркивания на ховер */
}


.send-reply-btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

.reply-btn {
   font-size: 16px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 400;
}


/* Стили для ul, чтобы убрать маркеры и сделать кнопки в одном ряду */
.comment-buttons {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.comment-buttons li {
    margin-right: 10px;
    cursor: pointer;
    display: inline-flex; /* Выравниваем по горизонтали */
    opacity: 0; /* Изначально скрываем кнопки */
    transition: opacity 0.3s ease; /* Плавное появление */
}

/* Показываем кнопки при наведении на комментарий */
.comment-item:hover .comment-buttons li {
    opacity: 1;
}


.comment-author, .comment-date {
    margin-right: 10px;
}

/* Дополнительные стили для выравнивания */
.comment-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Стили для каждой иконки отдельно */

/* Иконка редактирования */
.edit-icon {
    width: 14px;
    height: 14px;
}

/* Иконка удаления */
.delete-icon {
    width: 14px;
    height: 14px;
}

/* Иконка пожаловаться */
.report-icon {
    width: 14px;
    height: 14px;
}

::marker  {
  color: #ffffff00;
}

/* Основной контейнер заголовка спойлера */
.title_spoiler {
    display: inline; /* Инлайн для того, чтобы спойлер находился в одной строке */
    cursor: pointer; /* Указатель при наведении */
    background-color: #333; /* Темный фон */
    border-radius: 6px;
    padding: 4px 8px; /* Уменьшил padding для компактности */
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    transition: background-color 0.3s ease;
    margin-bottom: 5px;
}

/* При наведении фон светлеет */
.title_spoiler:hover {
    background-color: #444;
}

/* Скрытый текст спойлера */
.text_spoiler {
    display: none; /* Скрыт по умолчанию */
    background-color: #222; /* Темный фон */
    color: #ffffff;
    font-size: 14px;
    border-radius: 6px;
    padding: 4px 8px; /* Уменьшил padding для компактности */
    transition: opacity 0.3s ease; /* Плавное появление */
    opacity: 0; /* Прозрачный по умолчанию */
    max-width: 100%; /* Ограничение ширины */
}

/* Показанный текст спойлера */
.text_spoiler.show {
    display: inline; /* Показать текст в одной строке */
    opacity: 1; /* Плавное появление */
}


/* Основной блок цитирования */
.quote_block {
    background-color: #1c1c1e; /* Темный фон, чтобы соответствовать общей стилистике */
    border-left: 4px solid #007bff; /* Линия цитирования слева (синий акцент) */
    padding: 10px 15px; /* Отступы внутри */
    margin: 10px 0; /* Отступы сверху и снизу */
    border-radius: 8px; /* Скругленные углы */
    color: #e5e5e5; /* Основной цвет текста */
    font-size: 14px; /* Размер текста */
    line-height: 1.6; /* Увеличенная межстрочная высота для удобства чтения */
    font-family: 'Arial', sans-serif; /* Универсальный шрифт для цитат */
}

/* Внутренний блок цитаты */
.quote {
    margin: 0; /* Убираем отступы */
    padding: 0; /* Без внутренних отступов */
}

/* Основное тело цитаты */
.quote_body {
    color: #cccccc; /* Основной цвет текста цитаты */
    font-size: 14px;
    margin: 0;
    padding: 0;
}

/* Стили для текста, которые включаются в редакторе (жирность, курсив, подчеркивание) */
.quote_body b {
    font-weight: bold; /* Жирный шрифт */
    color: inherit; /* Сохраняем цвет текста */
    display: flex !important;
}

.quote_body i {
    font-style: italic; /* Курсив */
    color: inherit; /* Сохраняем цвет текста */
}

.quote_body u {
    text-decoration: underline; /* Подчеркивание */
    color: inherit; /* Сохраняем цвет текста */
}

/* Неконтентный блок */
.noncontenteditable {
    opacity: 0.8; /* Прозрачность для не редактируемых блоков */
}

/* Контентный блок */
.contenteditable {
    outline: none; /* Убираем выделение при редактировании */
    background-color: #1c1c1e; /* Оставляем темный фон */
    color: #ffffff; /* Белый цвет текста при редактировании */
    padding: 0; /* Без лишних отступов */
    border: none; /* Без границ */
}

/* Убираем стили, которые могут перекрывать редакторские */
.contenteditable b, .contenteditable i, .contenteditable u {
    font-weight: normal; /* Сбрасываем шрифт на нормальный, чтобы сохранить оригинальный стиль */
}