/* Hallmark · component: story comments · genre: modern-minimal
 * theme: existing TruyenV6 · states: default, hover, focus, active, disabled, loading, error, success
 * Pre-emit critique: P5 H5 E4 S5 R5 V4 · original client CSS/classes remain intact.
 */
#comments.comment-box {
    margin-top: var(--comment-space-2xl);
    background: transparent;
    color: var(--comment-ink);
    font-family: var(--comment-font);
    text-align: left;
}
#comments .comment-section-heading { width: 100%; margin: 0; }
#comments .comment-section-heading h2 { display: flex; align-items: center; gap: var(--comment-space-sm); min-width: 0; overflow-wrap: anywhere; }
#comments .comment-count { font-family: var(--comment-font); font-size: 12px; font-weight: 500; line-height: 24px; min-width: 24px; padding: 0 var(--comment-space-sm); border-radius: var(--comment-field-radius); background: var(--comment-field); color: var(--comment-muted); text-align: center; }
#comments .comment-wrapper { clear: both; padding-top: var(--comment-space-xl); }
#comments .comment-respond { clear: both; margin: 0; padding: var(--comment-space-lg); background: var(--comment-paper); color: var(--comment-ink); border: 1px solid var(--comment-rule); border-radius: var(--comment-radius); }
#comments .comment-reply-title { margin: 0 0 var(--comment-space-xl); padding: 0; min-width: 0; color: var(--comment-ink); font-family: var(--comment-font); font-size: 19px; font-weight: 600; line-height: 1.5; text-transform: none; font-style: normal; overflow-wrap: anywhere; }
#comments .comment-reply-title small { display: inline-block; margin-left: var(--comment-space-sm); font-size: 13px; font-weight: 400; }
#comments #cancel-comment-reply-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--comment-muted); white-space: nowrap; }
#comments .form-comment { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--comment-space-lg) var(--comment-space-xl); }
#comments .form-comment > p { min-width: 0; margin: 0; }
#comments .comment-form-comment,
#comments .comment-form-session,
#comments .comment-notes,
#comments .comment-form-cookies-consent,
#comments .form-submit { grid-column: 1 / -1; }
#comments .form-comment label { display: block; margin: 0 0 var(--comment-space-sm); color: var(--comment-ink); font-size: 14px; line-height: 1.5; font-weight: 500; }
#comments .required { color: var(--comment-error); }
#comments .form-comment .form-control { width: 100%; min-height: 48px; height: auto; padding: var(--comment-space-md); border: 1px solid var(--comment-rule); border-radius: var(--comment-field-radius); background: var(--comment-field); color: var(--comment-ink); box-shadow: none; font-family: var(--comment-font); font-size: 15px; line-height: 1.45; transition: background-color 120ms ease; }
#comments .form-comment textarea.form-control { min-height: 140px; line-height: 1.6; resize: vertical; }
#comments .form-comment .form-control:focus { background: var(--comment-paper); color: var(--comment-ink); border-color: var(--comment-accent); outline: 2px solid var(--comment-focus); outline-offset: 2px; box-shadow: none; }
#comments .form-comment .form-control:disabled { opacity: .55; cursor: not-allowed; }
#comments .form-comment .form-control[aria-invalid="true"],
#comments .form-comment .form-control:user-invalid { border-color: var(--comment-error); }
#comments .comment-field-feedback { display: block; min-height: 20px; margin-top: var(--comment-space-xs); color: var(--comment-muted); font-size: 12px; line-height: 1.6; }
#comments .form-control[aria-invalid="true"] + .comment-field-feedback { color: var(--comment-error); }
#comments .form-comment .comment-form-cookies-consent { padding-top: var(--comment-space-xs); }
#comments .comment-form-cookies-consent label { display: flex; align-items: flex-start; gap: var(--comment-space-sm); min-height: 44px; margin: 0; color: var(--comment-muted); font-size: 13px; font-weight: 400; cursor: pointer; }
#comments .comment-form-cookies-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--comment-accent); }
#comments .form-comment .form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--comment-space-md); padding-top: var(--comment-space-lg); border-top: 1px solid var(--comment-rule); }
#comments .form-comment .submit { display: inline-flex; justify-content: center; align-items: center; gap: var(--comment-space-sm); min-height: 48px; margin: 0; padding: var(--comment-space-md) var(--comment-space-xl); border: 1px solid var(--comment-accent); border-radius: var(--comment-field-radius); background: var(--comment-accent); color: var(--comment-accent-ink); font-family: var(--comment-font); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: background-color 120ms ease; }
#comments .form-comment .submit:active, #comments .form-comment .submit.is-active { background: var(--comment-accent-active); color: var(--comment-accent-ink); }
#comments .form-comment .submit:disabled { opacity: .55; cursor: not-allowed; }
#comments :is(a, button, input, textarea):focus-visible, #comments .submit.is-focus { outline: 2px solid var(--comment-focus); outline-offset: 3px; }
#comments .comment-form-status { color: var(--comment-muted); font-size: 13px; }
#comments .form-comment[aria-busy="true"] .submit { opacity: .8; cursor: progress; }
#comments .form-comment[aria-busy="true"] .submit .glyphicon { display: none; }
#comments .form-comment[aria-busy="true"] .submit::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--comment-accent-ink); border-right-color: transparent; border-radius: 50%; animation: tv6-comment-spin 800ms linear infinite; }
#comments .comment-form-session, #comments .must-log-in { color: var(--comment-muted); font-size: 14px; line-height: 1.6; }
#comments .comment-form-session a, #comments .must-log-in a { color: var(--comment-link); font-weight: 500; }
#comments .must-log-in { margin: 0; }
#comments .comment-list { padding: 0; margin: 0 0 var(--comment-space-xl); }
#comments .comment-list .item { padding: 0; margin: 0 0 var(--comment-space-lg); }
#comments .comment-list .item:last-child { margin-bottom: 0; }
#comments .comment-list .avatar-wrap { width: 40px; height: 40px; margin: var(--comment-space-xs) 0 0; border-radius: 50%; background: var(--comment-field); }
#comments .comment-list .avatar-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
#comments .comment-list .summary { min-width: 0; margin-left: 52px; }
#comments .comment-list .summary .info { padding: var(--comment-space-md) var(--comment-space-lg); border: 1px solid var(--comment-rule); border-radius: var(--comment-radius); background: var(--comment-paper); color: var(--comment-ink); }
#comments .comment-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--comment-space-xs) var(--comment-space-md); border: 0; padding: 0; overflow: visible; }
#comments .authorname { min-width: 0; color: var(--comment-ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#comments .comment-date { color: var(--comment-muted); font-size: 12px; line-height: 1.6; }
#comments .comment-content { overflow: visible; padding: var(--comment-space-sm) 0 0; color: var(--comment-ink); font-size: 14px; line-height: 1.75; text-align: left; overflow-wrap: anywhere; }
#comments .comment-content p { margin: 0 0 var(--comment-space-sm); }
#comments .comment-content p:last-child { margin-bottom: 0; }
#comments .comment-content a { color: var(--comment-link); text-decoration: underline; }
#comments .comment-content img { max-width: 100%; height: auto; }
#comments .comment-footer { margin: 0; padding: 0 var(--comment-space-xs); }
#comments .comment-footer > li { margin: 0; }
#comments .comment-reply-link, #comments .comment-reply-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--comment-space-sm); color: var(--comment-link); font-size: 13px; font-weight: 500; white-space: nowrap; }
#comments .comment-list .children { clear: both; margin: var(--comment-space-sm) 0 0 var(--comment-space-md); padding-left: var(--comment-space-md); border-left: 1px solid var(--comment-rule); }
#comments .children .children { margin-left: 0; }
#comments .comment-list .comment-respond { margin: var(--comment-space-md) 0 var(--comment-space-xl); }
#comments .comment-awaiting-moderation { display: flex; align-items: baseline; gap: var(--comment-space-sm); margin-top: var(--comment-space-md) !important; color: var(--comment-success); font-size: 12px; font-style: normal; }
#comments .comment-content .comment-awaiting-moderation { padding: var(--comment-space-sm) var(--comment-space-md); border-radius: var(--comment-field-radius); background: var(--comment-success-paper); color: var(--comment-success); }
#comments .comment-awaiting-moderation .glyphicon { flex: 0 0 auto; }
#comments .navigation.pagination { display: block; margin: var(--comment-space-lg) 0 var(--comment-space-xl); text-align: center; }
#comments .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--comment-space-sm); }
#comments .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--comment-space-sm); border: 1px solid var(--comment-rule); border-radius: var(--comment-field-radius); background: var(--comment-paper); color: var(--comment-link); }
#comments .nav-links .current { background: var(--comment-accent); color: var(--comment-accent-ink); border-color: var(--comment-accent); }
@media (min-width: 640px) {
    #comments .comment-respond { padding: var(--comment-space-xl); }
    #comments .form-comment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #comments .comment-list .children { margin-left: var(--comment-space-xl); padding-left: var(--comment-space-lg); }
    #comments .children .children { margin-left: 0; }
}
@media (hover: hover) {
    #comments .form-comment .form-control:hover { background: var(--comment-paper); color: var(--comment-ink); }
    #comments .form-comment .submit:hover, #comments .form-comment .submit.is-hover { background: var(--comment-accent-hover); color: var(--comment-accent-ink); }
    #comments .comment-reply-link:hover, #comments #cancel-comment-reply-link:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
    #comments .form-comment .form-control, #comments .form-comment .submit { transition: none; }
    #comments .form-comment[aria-busy="true"] .submit::before { animation: none; }
}
@keyframes tv6-comment-spin { to { transform: rotate(360deg); } }