/* File: assets/css/comments-youtube-style.css (V10 - View Replies) */

:root { --comment-like-red: #FE2C55; }
.comments-youtube-style { color: var(--bs-body-color); }
.comments-header-row { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.comments-total-count { font-size: 1.25rem; font-weight: 800; color: var(--bs-heading-color); flex-shrink: 0; }
.pill-sorter { display: flex; padding: 4px; }
.pill-sorter button { background: none; border: none; font-weight: 700; color: var(--bs-body-color); cursor: pointer; transition: all 0.2s ease-in-out; }
.pill-sorter button.active { color: var(--bs-heading-color); text-decoration: underline;}
.comment-post-form, .reply-form { margin-bottom: 30px; }
.comment-post-form .input-group, .reply-form .input-group { display: flex; align-items: flex-start; gap: 16px; }
.comment-post-form .avatar, .reply-form .avatar { flex-shrink: 0; }
.form-input-wrapper { flex-grow: 1; position: relative; }
.form-input-wrapper .form-control { width: 100%; border: 1px solid var(--bs-border-color); border-radius: 50px; background-color: transparent; color: var(--bs-body-color); font-weight: 500; }
.form-input-wrapper .form-control:focus { box-shadow: none; border-color: var(--bs-primary); }
.form-input-wrapper .btn-submit-comment { position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(0); transform-origin: center; width: 40px; height: 40px; border-radius: 50%; background: none; border: none; color: var(--bs-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease-out, color 0.2s ease; }
.form-input-wrapper .btn-submit-comment:hover { color: var(--bs-primary-hover); }
.form-input-wrapper .form-control:not(:placeholder-shown) + .btn-submit-comment { transform: translateY(-50%) scale(1); }
.reply-form-container { margin-top: 16px; padding-left: 56px; }
.reply-form .avatar { width: 32px; height: 32px; }
.reply-form .form-control { font-size: 0.9rem; }
.reply-form .form-actions { margin-top: 8px; text-align: right; }
.reply-form .btn-cancel-reply { font-size: 0.8rem; font-weight: 700; color: var(--bs-muted-color); background-color: var(--bs-gray-200); border-radius: 50px; padding: 6px 12px; border: none; cursor: pointer; }
.reply-form .btn-cancel-reply:hover { background-color: var(--bs-gray-300); }
.comments-list-youtube { list-style: none; padding: 0; margin: 0; }
.comment-item { display: flex; align-items: flex-start; gap: 16px; padding: 5px 0; }
.comment-item:last-child { border-bottom: none; }
.comment-body { flex-grow: 1; }
.comment-author { font-weight: 700; font-size: 0.9rem; color: var(--bs-heading-color); }
.comment-date { font-size: 0.85rem; color: var(--bs-muted-color); margin-left: 8px; }
.comment-text { font-size: 0.95rem; line-height: 1.5; margin: 4px 0 8px 0; white-space: pre-wrap; word-break: break-word; font-weight: 500;}
.comment-footer { display: flex; align-items: center; gap: 20px; }
@keyframes like-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.like-button { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.8rem; color: var(--bs-muted-color); font-weight: 700; }
.like-button .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0; transition: all .2s ease; }
.like-button.liked .material-symbols-outlined { color: var(--comment-like-red); font-variation-settings: 'FILL' 1; }
.like-button.liked { color: var(--bs-heading-color); }
.like-button.animating .material-symbols-outlined { animation: like-pop 0.3s ease-in-out; }
.reply-button { font-size: 0.8rem; color: var(--bs-muted-color); font-weight: 700; background: none; border: none; padding: 0; cursor: pointer; }
.reply-button:hover { color: var(--bs-heading-color); }
.replies-list { list-style: none; padding-left: 0; margin-top: 16px; }
.comments-loader-container { display: flex; justify-content: center; padding: 20px; }
.comments-loader-container.hidden { display: none; }
#view-more-comments-youtube { display: block; margin: 20px auto; font-weight: 700; background-color: var(--bs-gray-200); color: var(--bs-body-color); border-color: var(--bs-gray-200); border-radius: 50px;}
#view-more-comments-youtube:hover { background-color: var(--bs-gray-300); border-color: var(--bs-gray-300); }
#view-more-comments-youtube.hidden { display: none; }
.btn-comment-action { font-size: 0.8rem; color: var(--bs-muted-color); font-weight: 700; background: none; border: none; padding: 0; cursor: pointer; }
.btn-comment-action:hover { color: var(--bs-heading-color); }
.btn-comment-action.remove:hover { color: var(--bs-danger); }
.edit-form { margin-top: 8px; }
.edit-form textarea { width: 100%; min-height: 60px; padding: 8px; border-radius: 6px; border: 1px solid var(--bs-border-color); background-color: var(--bs-gray-100); color: var(--bs-body-color); resize: vertical; }
.edit-form textarea:focus { border-color: var(--bs-primary); outline: none; }
.edit-form .form-actions { margin-top: 8px; text-align: right; }
.edit-form .btn-cancel-edit { font-size: 0.8rem; font-weight: 700; color: var(--bs-muted-color); background-color: var(--bs-gray-200); border-radius: 50px; padding: 6px 12px; border: none; cursor: pointer; margin-right: 8px; }
.edit-form .btn-cancel-edit:hover { background-color: var(--bs-gray-300); }
.edit-form .btn-save-edit { font-size: 0.8rem; font-weight: 700; color: #fff; background-color: var(--bs-primary); border-radius: 50px; padding: 6px 12px; border: none; cursor: pointer; }
.edit-form .btn-save-edit:hover { background-color: var(--bs-primary-hover); }
.comment-item.is-editing .comment-text,
.comment-item.is-editing .comment-footer { display: none; }

/* --- START: VIEW REPLIES BUTTON STYLES --- */
.replies-container { margin-top: 5px; }
.btn-view-replies {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: none;
    border-radius: 50px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 14px;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-view-replies:hover { background-color: rgba(var(--bs-primary-rgb), 0.1); }
.btn-view-replies .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.3s ease;
}
.btn-view-replies.is-open .material-symbols-outlined { transform: rotate(180deg); }
/* --- END: VIEW REPLIES BUTTON STYLES --- */

/* --- START: RESPONSIVE STYLES FOR MOBILE --- */
/* This media query targets screens smaller than 768px */
@media (max-width: 767.98px) {
    .comments-header-row {
        flex-direction: column; /* Stack the title and sorter vertically */
        align-items: flex-start; /* Align both to the left */
        gap: 16px; /* Add some space between the title and the sorter */
    }

    .pill-sorter {
        width: 100%; /* Make the sorter group take the full width */
    }

    .pill-sorter button {
        flex-grow: 1; /* Make both buttons expand to fill the space equally */
        text-align: center; /* Ensure the text inside is centered */
    }
}
/* --- END: RESPONSIVE STYLES FOR MOBILE --- */

/* --- START: NEW COMMENT ANIMATION --- */
@keyframes slide-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-item.new-comment {
    animation: slide-fade-in 0.5s ease-out;
}
/* --- END: NEW COMMENT ANIMATION --- */