/* Комментарии релиза. Подключается только на странице релиза и только когда
   у релиза поднят vk_comments_disabled. Тёмная тема идёт через [data-theme=dark],
   как в maindark.css -- отдельного файла для неё не завожу.

   Раскладка -- как во ВКонтакте: аватар слева, справа имя, сразу под ним текст и одна строка
   с датой и действиями, лайк в той же строке справа. Ответы -- со сдвигом ровно на колонку
   текста корня. Цвета -- сайтовые, а не ВКонтакте: блок живёт на странице anilibria.tv. */

.comments-block .comments-count {
    color: #999;
    font-size: 14px;
}

/* Форма */

.comments-notice {
    padding: 8px 0;
    color: #777;
    font-size: 14px;
}

.comments-form {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}

/* Аватарка пишущего -- как у комментария: в ветке форма встаёт её следующим ответом */
.comments-form-avatar {
    flex: 0 0 34px;
    margin-right: 10px;
}

.comments-form-avatar img {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}

.comments-form-body {
    flex: 1 1 0;
    min-width: 0;
}

/* В ветке -- размер аватарки ответа; в правке аватарка не нужна: форма стоит под своим же текстом */
.comment > .comments-form .comments-form-avatar {
    flex-basis: 28px;
    margin-right: 8px;
}

.comment > .comments-form .comments-form-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.comment-body > .comments-form .comments-form-avatar {
    display: none;
}

/* «ответ пользователю @ник ×» -- рядом с «Отправить», как во ВКонтакте */
.comments-reply-to {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    min-width: 0;
}

.comments-reply-to[hidden] {
    display: none;
}

.comments-reply-name {
    color: #337ab7;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.comments-reply-reset {
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
    color: #aaa;
}

.comments-reply-reset:hover {
    color: #b32121;
}

.comments-reply-reset:focus-visible {
    outline: 2px solid #b32121;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Плашка видна -- она и прижимает кнопку вправо */
.comments-reply-to:not([hidden]) + .btn {
    margin-left: 10px;
}

.comments-textarea {
    resize: vertical;
    min-height: 40px;
    font-size: 14px;
    border-radius: 6px;
}

.comments-form-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.comments-spoiler-toggle {
    font-weight: normal;
    font-size: 13px;
    margin: 0;
    cursor: pointer;
}

.comments-spoiler-toggle input {
    margin: 0 4px 0 0;
    vertical-align: -1px;
}

.comments-counter {
    color: #999;
    font-size: 12px;
}

.comments-counter.is-over {
    color: #b32121;
}

.comments-form-footer .btn {
    margin-left: auto;
}

.comments-error {
    display: none;
    margin-top: 6px;
    background: #b32121;
    border-radius: 6px;
    padding: 4px 12px;
    color: #fff;
    font-size: 13px;
}

.comments-error.is-visible {
    display: block;
}

/* Комментарий */

.comment {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid #eee;
    font-size: 14px;
    line-height: 1.45;
}

.comments-list > .comment:first-child {
    border-top: 0;
}

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

/* Квадрат со скруглением, а не круг */
.comment-avatar img {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}

.comment-body {
    flex: 1 1 0;
    min-width: 0;
}

.comment-author {
    font-weight: bold;
    line-height: 1.3;
}

.comment-message {
    margin-top: 1px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.comment-removed {
    color: #999;
    font-style: italic;
}

/* Упоминание «@ник»: цвет ссылок сайта, как во ВКонтакте имя адресата; ссылкой не делаем --
   публичных профилей нет */
.comment-mention {
    color: #337ab7;
    font-weight: 600;
}

/* Строка под текстом: дата, «изменён», действия, лайк справа */

.comment-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 3px;
    font-size: 13px;
    line-height: 20px;
    color: #999;
}

.comment-date {
    color: #999;
    white-space: nowrap;
}

.comment-edited {
    color: #999;
}

.comment-action,
.comment-like {
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    line-height: 20px;
    color: #777;
}

.comment-action:hover,
.comment-like:hover {
    color: #b32121;
}

.comment-action:focus-visible,
.comment-like:focus-visible,
.comments-more:focus-visible {
    outline: 2px solid #b32121;
    outline-offset: 2px;
    border-radius: 3px;
}

.comment-like {
    order: 10;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #aaa;
}

.comment-like .glyphicon {
    top: 0;
    font-size: 13px;
}

.comment-likes-count:empty {
    display: none;
}

.comment-like.is-liked {
    color: #b32121;
}

/* Спойлер: текст лежит в разметке и скрыт стилем, как и на основном сайте */

.comment-spoiler {
    cursor: pointer;
}

.comment-spoiler-hint {
    color: #b32121;
    border-bottom: 1px dashed #b32121;
}

.comment-spoiler-text {
    display: none;
}

.comment-spoiler.is-open .comment-spoiler-hint {
    display: none;
}

.comment-spoiler.is-open .comment-spoiler-text {
    display: inline;
}

/* Ответы: второй и последний уровень. Сдвиг -- аватар корня и зазор, то есть ровно колонка его текста.
   Блок ответов и кнопка «ещё» остаются прямыми потомками комментария: js/comments.js
   переносит их при правке корня через .children() */

.comment-replies,
.comment > .comments-more {
    flex: 0 0 calc(100% - 44px);
    margin-left: 44px;
}

.comment-replies:empty {
    display: none;
}

.comment-replies .comment {
    padding: 8px 0 0;
    border-top: 0;
}

.comment-replies .comment-avatar {
    flex-basis: 28px;
    margin-right: 8px;
}

.comment-replies .comment-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

/* Форма ответа встаёт перед ответами корня -- по колонке его текста;
   форма правки -- прямо под правимым текстом */
.comment > .comments-form {
    flex: 0 0 calc(100% - 44px);
    margin: 8px 0 2px 44px;
}

.comment-body > .comments-form {
    margin: 6px 0 2px;
}

.comments-more {
    background: none;
    border: 0;
    padding: 6px 0 0;
    color: #777;
    font-size: 13px;
    text-align: left;
}

.comments-more:hover {
    color: #b32121;
}

.comments-more-slot .comments-more {
    padding: 10px 0 0;
}

/* Тёмная тема */

[data-theme=dark] .comment {
    border-top-color: rgba(217, 217, 217, 0.15);
}

[data-theme=dark] .comments-notice,
[data-theme=dark] .comment-footer,
[data-theme=dark] .comment-date,
[data-theme=dark] .comment-edited,
[data-theme=dark] .comment-removed,
[data-theme=dark] .comments-counter,
[data-theme=dark] .comments-block .comments-count,
[data-theme=dark] .comment-like,
[data-theme=dark] .comment-action,
[data-theme=dark] .comments-more {
    color: rgba(255, 255, 255, .45);
}

[data-theme=dark] .comment-author {
    color: rgba(255, 255, 255, .72);
}

[data-theme=dark] .comment-like:hover,
[data-theme=dark] .comment-action:hover,
[data-theme=dark] .comments-more:hover,
[data-theme=dark] .comment-like.is-liked {
    color: #ab8484;
}

[data-theme=dark] .comment-mention,
[data-theme=dark] .comments-reply-name {
    color: #8fb8e0;
}

[data-theme=dark] .comments-reply-to,
[data-theme=dark] .comments-reply-reset {
    color: rgba(255, 255, 255, .45);
}

[data-theme=dark] .comment-spoiler-hint {
    color: #ab8484;
    border-bottom-color: #ab8484;
}