/* v64 — comments, threads and mentions polish */
:root {
    --v64-comment-border: rgba(255, 255, 255, .10);
    --v64-comment-border-strong: rgba(255, 255, 255, .16);
    --v64-comment-bg: rgba(10, 12, 16, .78);
    --v64-comment-bg-soft: rgba(255, 255, 255, .035);
    --v64-comment-text: rgba(255, 255, 255, .92);
    --v64-comment-muted: rgba(255, 255, 255, .58);
}

.unified-comments-shell,
.feed-post-comments.unified-comments-shell {
    background: rgba(8, 10, 13, .94) !important;
    border: 1px solid var(--v64-comment-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.unified-comments-head,
.feed-post-comments-head {
    border-bottom: 1px solid var(--v64-comment-border) !important;
    padding-bottom: 14px !important;
}

.comments-list.unified-comments-list,
.feed-post-comment-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: min(58vh, 620px);
    overflow: auto;
    padding-right: 3px;
}

.comment-thread,
.feed-comment-thread {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-thread-depth-1,
.feed-comment-replies > .feed-comment-thread {
    margin-left: 22px !important;
    padding-left: 13px !important;
    border-left: 1px solid var(--v64-comment-border) !important;
}

.comment-thread-depth-2,
.feed-comment-replies .feed-comment-replies > .feed-comment-thread {
    margin-left: 16px !important;
    padding-left: 12px !important;
    border-left: 1px dashed rgba(255, 255, 255, .12) !important;
}

.comment,
.comment-item-modern,
.feed-comment-item {
    background: var(--v64-comment-bg) !important;
    border: 1px solid var(--v64-comment-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.comment:hover,
.comment-item-modern:hover,
.feed-comment-item:hover {
    border-color: var(--v64-comment-border-strong) !important;
    background: rgba(14, 16, 21, .92) !important;
}

.comment-head,
.feed-comment-head {
    gap: 10px !important;
    align-items: center !important;
}

.comment-text,
.feed-comment-text {
    color: var(--v64-comment-text) !important;
    line-height: 1.48 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.comment-actions,
.feed-comment-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.comment-action-btn,
.feed-comment-like-static,
.comment-inline-cancel,
.feed-inline-reply-actions .btn,
.v64-comment-link-btn,
.v64-thread-toggle,
.v64-replies-more {
    min-height: 32px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .045) !important;
    color: rgba(255, 255, 255, .82) !important;
    box-shadow: none !important;
}

.comment-action-btn:hover,
.comment-inline-cancel:hover,
.feed-inline-reply-actions .btn:hover,
.v64-comment-link-btn:hover,
.v64-thread-toggle:hover,
.v64-replies-more:hover {
    background: rgba(255, 255, 255, .085) !important;
    border-color: rgba(255, 255, 255, .20) !important;
    color: #fff !important;
    transform: none !important;
}

.comment-action-btn.active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

.comment-composer-card,
.comment-composer-inline,
.feed-inline-reply-form {
    border-radius: 0 !important;
    border: 1px solid var(--v64-comment-border) !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow: none !important;
}

.comment-composer-textarea {
    border-radius: 0 !important;
    min-height: 72px;
    resize: vertical;
}

.comment-composer-card.is-compact .comment-composer-textarea,
.feed-inline-reply-form .comment-composer-textarea {
    min-height: 56px;
}

.mention-link,
.v64-mention-inline {
    display: inline-flex !important;
    align-items: center;
    min-height: 22px;
    padding: 0 6px !important;
    margin: 0 1px;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.mention-link:hover,
.v64-mention-inline:hover {
    background: rgba(255, 255, 255, .12) !important;
}

.mention-suggestions,
.emoji-picker-panel {
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(9, 10, 13, .98) !important;
    box-shadow: none !important;
}

.mention-suggestion,
.emoji-picker-item,
.emoji-picker-button {
    border-radius: 0 !important;
}

.v64-thread-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 2px 0 0 0;
}

.v64-thread-toggle,
.v64-replies-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
}

.v64-thread-collapsed > .comment-replies,
.v64-thread-collapsed > .feed-comment-replies {
    display: none !important;
}

.v64-hidden-reply {
    display: none !important;
}

.v64-comment-link-btn {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
}

.v64-comment-highlight,
.v64-comment-highlight > .comment,
.v64-comment-highlight > .feed-comment-item,
.comment.v64-comment-highlight,
.feed-comment-item.v64-comment-highlight {
    border-color: rgba(255, 255, 255, .42) !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55) !important;
    background: rgba(255, 255, 255, .08) !important;
}

.v64-reply-context {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--v64-comment-muted) !important;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .comment-thread-depth-1,
    .feed-comment-replies > .feed-comment-thread,
    .comment-thread-depth-2,
    .feed-comment-replies .feed-comment-replies > .feed-comment-thread {
        margin-left: 10px !important;
        padding-left: 10px !important;
    }

    .comments-list.unified-comments-list,
    .feed-post-comment-list {
        max-height: 62vh;
    }
}