/* Canonical comment thread — nesting + mobile collapse */

.comment-section .comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-item {
    position: relative;
}

.comment-item .comment-content {
    margin-left: var(--comment-indent, 0);
    transition: margin-left 0.15s ease;
}

.comment-replies {
    border-left: 2px solid rgba(0, 0, 0, 0.08);
    margin-left: 0.75rem;
    padding-left: 0.5rem;
}

.comment-collapse-toggle {
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0 0.25rem 0 0;
    line-height: 1;
    cursor: pointer;
}

.comment-collapse-toggle:hover {
    color: #343a40;
}

.comment-pinned-badge {
    color: #198754;
    font-size: 0.75rem;
}

.comment-item.comment-collapsed > .comment-replies {
    display: none !important;
}

.sort-dropdown-menu.show {
    display: block;
}

.sort-option.active {
    font-weight: 600;
}

@media (max-width: 768px) {
    .comment-item[data-depth="1"] > .comment-content,
    .comment-item[data-depth="2"] > .comment-content {
        margin-left: 0.75rem !important;
    }

    .comment-item[data-depth="3"] > .comment-content,
    .comment-item[data-depth="4"] > .comment-content,
    .comment-item[data-depth="5"] > .comment-content,
    .comment-item[data-depth="6"] > .comment-content,
    .comment-item[data-depth="7"] > .comment-content,
    .comment-item[data-depth="8"] > .comment-content,
    .comment-item[data-depth="9"] > .comment-content {
        margin-left: 0.5rem !important;
    }

    .comment-replies {
        margin-left: 0.35rem;
        padding-left: 0.4rem;
    }

    .comment-actions {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .comment-vote-counts {
        font-size: 0.8rem;
    }
}