/* Плавное появление контейнера комментариев */
#comments-container {
 max-height: 300px;
 overflow-y: auto;
 padding-right: 4px;
 opacity: 0;
 transform: translateY(-10px);
 transition: opacity 0.5s ease, transform 0.5s ease;
 scrollbar-width: thin;
}

/* Прелоадер */
#comments-container:not(:empty) + .wait-loader { display: none}

/* Класс для запуска анимации появления */
#comments-container.visible {
 opacity: 1;
 transform: translateY(0);
}

/* Стили тонкого скролла для WebKit браузеров */
#comments-container::-webkit-scrollbar {
 width: 4px;
}
#comments-container::-webkit-scrollbar-thumb {
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
}
#comments-container::-webkit-scrollbar-track {
 background: transparent;
}

/* Стили даты комментария */
.comment-date {
 display: inline-block;
 padding: 2px 6px;
 border-radius: 4px;
 font-size: 0.85em;
 margin-left: auto;
}
.comment-date.today {
 background: #27ae6033;
 color: #27ae60;
 font-weight: 600;
}
.comment-date.yesterday {
 background: #507fff33;
 color: #507fff;
 font-weight: 600;
}
.comment-date.older {
 background: #80808033;
 color: #808080;
 font-weight: 600;
}

/* Основные стили комментариев */
.comment {
 margin-bottom: 5px;
 padding: 8px 0;
 border-bottom: 1px solid #ddd;
}
.comment-header {
 display: flex;
 align-items: center;
}
.comment-avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 margin-right: 5px;
}
.comment-author {
 font-weight: bold;
 color: #007bff;
 text-decoration: none;
}
/* Стиль для гостей без аккаунта */
.comment-author.guest {
 color: #333;
}
.comment-body {
 margin: 10px 0;
 white-space: pre-wrap;
 font-size: 1em;
}
.comment-footer {
 text-align: left;
}
.comment-material {
 font-size: 1em;
 text-decoration: none;
 color: #007bff;
}
/* Аватар по умолчанию и индикатор онлайн */
.avatar-container {
 position: relative;
 display: inline-block;
}
.comment-avatar.default-avatar {
 background: #dddde1;
 display: flex;
 align-items: center;
 justify-content: center;
}
.online-circle {
 position: absolute;
 bottom: 5px;
 right: 5px;
 width: 10px;
 height: 10px;
 background-color: #27ae60;
 border: 2px solid white;
 border-radius: 50%;
 display: none;
}

/* Блоки боковой панели и звуковая кнопка */
.sidebar-block-title {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.btn-sound {
 background: none;
 border: none;
 padding: 4px;
 cursor: pointer;
}
.btn-sound .icon-tabler {
 stroke: #6a6e7b;
}
/* Состояние включенного звука */
.btn-sound.enabled .icon-tabler {
 stroke: #507fff;
}