/* Discussion integration, v3. Profile sections own the panel and heading.
   Bootstrap/site classes own fields and buttons; no global theme overrides. */
.rv-comments {
    --comment-accent: var(--rv-story-red-dark, var(--rv-red-dark, #a60a15));
    --comment-brand: var(--rv-story-red, var(--rv-red, #ce2842));
    --comment-ink: var(--rv-story-ink, var(--rv-ink, #272027));
    --comment-muted: var(--rv-story-muted, var(--rv-muted, #5b5159));
    --comment-line: var(--rv-story-line, var(--rv-line, #e9e5e8));
    --comment-tint: var(--rv-story-red-tint, var(--rv-red-soft, #fff2f4));
    --comment-soft: var(--rv-soft, #faf8f9);
    min-width: 0;
    color: var(--comment-ink);
}
/* Character comments sit inside a grid with its own gap. Story comments are a footer section. */
.rv-story > .rv-comments { margin-top: 24px; }
.rv-comments [hidden] { display: none !important; }
.rv-comments .rv-comments__heading { flex-wrap: wrap; }
.rv-comments .rv-comments__count {
    display: inline-block; vertical-align: middle; margin-left: 7px; padding: 3px 8px;
    border-radius: 5px; font-size: .72rem; font-weight: 500;
    line-height: 1.5; color: var(--comment-accent); background: var(--comment-tint);
}
.rv-comments .rv-comments__form { display: grid; gap: 8px; min-width: 0; margin: 0; }
.rv-comments .rv-comments__form .form-control,
.rv-comments .rv-comments__form .form-select { font-size: .86rem; color: var(--comment-ink); min-width: 0; }
.rv-comments .rv-comments__form textarea { resize: vertical; }
.rv-comments .rv-comments__form :is(.form-control, .form-select):focus { border-color: var(--comment-brand); }
.rv-comments .rv-comments__form .form-label { color: var(--comment-muted); }
.rv-comments .rv-comments__form-meta {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
    color: var(--comment-muted); font-size: .72rem; line-height: 1.5;
}
.rv-comments [data-comment-count] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-comments .rv-comments__form-footer {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 12px; margin-top: 6px;
}
.rv-comments .rv-comments__form-footer .form-check-label { color: var(--comment-muted); font-size: .8rem; }
.rv-comments .rv-comments__form-footer .form-check-input:checked { background-color: var(--comment-brand); border-color: var(--comment-brand); }
.rv-comments .rv-comments__muted { color: var(--comment-muted); font-size: .75rem; font-weight: 400; }
.rv-comments .rv-comments__threads { margin-top: 24px; }
.rv-comments .rv-comments__thread { border-top: 1px solid var(--comment-line); padding: 20px 0; }
.rv-comments .rv-comments__thread:last-child { padding-bottom: 0; }
.rv-comments .rv-comments__item {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; min-width: 0;
    scroll-margin-top: calc(var(--rv-header-height, var(--rv-story-header, 80px)) + var(--rv-nav-height, var(--rv-story-nav, 56px)) + 24px);
}
.rv-comments .rv-comments__item:target { outline: 2px solid var(--comment-brand); outline-offset: 6px; border-radius: 4px; }
.rv-comments .rv-comments__avatar {
    display: flex; align-items: center; justify-content: center; height: 32px; width: 32px;
    border-radius: 50%; background: var(--comment-tint); color: var(--comment-accent); font-size: 1rem;
    overflow: hidden;
}
.rv-comments .rv-comments__avatar-image {
    display: block; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center; border-radius: inherit;
}
.rv-comments .rv-comments__content { min-width: 0; }
.rv-comments .rv-comments__byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; margin-bottom: 6px; }
.rv-comments .rv-comments__byline strong { color: var(--comment-ink); font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }
.rv-comments .rv-comments__byline a { color: var(--comment-muted); text-decoration: none; }
.rv-comments .rv-comments__body { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: .86rem; line-height: 1.7; margin: 0; }
.rv-comments .rv-comments__tombstone { color: var(--comment-muted); font-style: italic; font-size: .82rem; margin: 0; }
.rv-comments .rv-comments__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 7px; }
.rv-comments .rv-comments__actions:empty { display: none; }
.rv-comments .rv-comments__actions > details[open] { flex: 1 1 100%; }
.rv-comments .rv-comments__action { min-width: 0; }
.rv-comments .rv-comments__action > summary,
.rv-comments .rv-comments__link {
    display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0;
    color: var(--comment-muted); font-size: .75rem; font-weight: 400; line-height: 1.5;
    list-style: none; cursor: pointer; text-decoration: none; overflow-wrap: anywhere;
}
.rv-comments .rv-comments__action > summary::-webkit-details-marker { display: none; }
.rv-comments .rv-comments__action > summary::marker { content: ''; }
.rv-comments .rv-comments__action > summary:hover,
.rv-comments .rv-comments__link:hover { color: var(--comment-accent); }
.rv-comments .rv-comments__action > .rv-comments__form,
.rv-comments .rv-comments__confirm { border: 1px solid var(--comment-line); border-radius: 6px; padding: 14px; margin-top: 8px; }
.rv-comments .rv-comments__confirm p { margin: 0 0 12px; font-size: .82rem; }
.rv-comments .rv-comments__spoiler { border: 1px solid var(--comment-line); border-radius: 6px; background: var(--comment-soft); padding: 10px 12px; }
.rv-comments .rv-comments__spoiler > summary { cursor: pointer; color: var(--comment-accent); font-size: .8rem; }
.rv-comments .rv-comments__spoiler[open] > summary { margin-bottom: 8px; }
.rv-comments .rv-comments__replies { margin: 16px 0 0 16px; padding-left: 16px; border-left: 2px solid var(--comment-line); }
.rv-comments .rv-comments__item--reply + .rv-comments__item--reply { margin-top: 18px; }
.rv-comments .rv-comments__reply-form { margin: 8px 0 0 44px; }
.rv-comments .rv-comments__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: .78rem; color: var(--comment-accent); }
.rv-comments .rv-comments__empty { color: var(--comment-muted); background: var(--comment-soft); border-radius: 6px; padding: 14px 16px; font-size: .82rem; }
.rv-comments .rv-comments__empty--discussion { background: transparent; border-top: 1px solid var(--comment-line); border-radius: 0; padding: 20px 0 0; }
.rv-comments .rv-comments__pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--comment-line); padding-top: 18px; margin-top: 20px; }
.rv-comments .page-link { color: var(--comment-accent); }
.rv-comments .page-item.disabled .page-link { color: var(--comment-muted); }
.rv-comments summary:focus-visible { outline: 2px solid var(--comment-brand); outline-offset: 3px; }
/* Respect the existing special Story palette, including its form controls. */
.story-mekar-putih .rv-comments { --comment-soft: var(--rv-story-red-tint); }
@media (max-width: 575.98px) {
    .rv-comments .rv-comments__item { gap: 9px; grid-template-columns: 28px minmax(0, 1fr); }
    .rv-comments .rv-comments__avatar { width: 28px; height: 28px; }
    .rv-comments .rv-comments__byline > .rv-comments__muted { flex-basis: 100%; }
    .rv-comments .rv-comments__replies { margin-left: 8px; padding-left: 10px; }
    .rv-comments .rv-comments__reply-form { margin-left: 0; }
    .rv-comments .rv-comments__form-footer { align-items: flex-start; }
}