.chapter-feedback {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--reader-chrome-border, #ddd);
}

.chapter-feedback__rating-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--reader-chrome-border, #ddd);
}

.chapter-feedback__rating-title {
    font-weight: 700;
    margin-right: auto;
}

.chapter-feedback__rating-stars {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.chapter-feedback__star-icon {
    width: 1.15rem;
    height: 1.15rem;
    fill: transparent;
    stroke: currentColor;
    transition: fill .15s ease, stroke .15s ease, transform .15s ease;
}

.chapter-feedback__rating-stars .star.is-active .chapter-feedback__star-icon,
.chapter-feedback__rating-stars .star:hover .chapter-feedback__star-icon {
    fill: currentColor;
}

.chapter-feedback__rating-stars .star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    background: color-mix(in srgb, var(--reader-surface-bg, #ffffff) 78%, var(--reader-content-text, #202124) 22%);
    border: 1px solid color-mix(in srgb, var(--reader-content-text, #202124) 22%, transparent);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: color-mix(in srgb, var(--reader-content-text, #202124) 72%, var(--reader-surface-bg, #ffffff) 28%);
    border-radius: 999px;
    padding: .2rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-surface-bg, #ffffff) 52%, transparent), 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.chapter-feedback__rating-stars .star.is-active,
.chapter-feedback__rating-stars .star:hover {
    color: #f0a81f;
    border-color: color-mix(in srgb, #f0a81f 58%, transparent);
    background: color-mix(in srgb, #f0a81f 18%, var(--reader-surface-bg, #ffffff));
    box-shadow: 0 0 0 3px color-mix(in srgb, #f0a81f 18%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 32%, transparent);
    transform: translateY(-1px);
}

.chapter-feedback__rating-stars .star:focus-visible {
    outline: 2px solid var(--reader-accent, #7f2b3a);
    outline-offset: 2px;
}

.chapter-feedback__rating-summary {
    color: var(--reader-muted-text, #667085);
    font-size: 0.95rem;
}

.chapter-feedback__rating-message {
    color: var(--reader-muted-text, #667085);
    font-size: 0.875rem;
}

.chapter-feedback__comments {
    padding-top: 1rem;
}

.chapter-feedback__comments-title {
    margin-top: 0;
}

.chapter-comment-form {
    margin-top: 1rem;
}

.chapter-comment-form textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

.comments-list .comment-item {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--reader-chrome-border, #eee);
}

.chapter-comment-form .replying-to {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.chapter-comment-form .cancel-reply {
    margin-left: 0.5rem;
}

.chapter-comment {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--reader-chrome-border, #eee);
}


.chapter-comment__header {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--reader-muted-text, #667085);
    margin-bottom: 0.35rem;
}

.chapter-comment__author {
    font-weight: 700;
    color: inherit;
}

.chapter-comment__content {
    margin-bottom: 0.5rem;
}

.chapter-comment__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment-like {
    border: 1px solid var(--reader-panel-border, var(--reader-chrome-border, #ddd));
    background: var(--reader-control-bg, transparent);
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.comment-like.is-liked {
    background: var(--reader-accent, #7f2b3a);
    color: var(--reader-on-accent, #fff);
    border-color: transparent;
}

.comment-error {
    color: #b00020;
    font-size: 0.95rem;
    margin-left: 0.5rem;
}
.chapter-comment--reply,
.chapter-comment__replies {
    margin: 0;
    padding: 0;
    border: none;
}
.comment-node {
    position: relative;
    margin-top: .75rem;
}

.comment-depth-0 { margin-left: 0; }
.comment-depth-1 { margin-left: 1.25rem; padding-left: 1rem; border-left: 1px solid var(--reader-chrome-border, rgba(0,0,0,.12)); }
.comment-depth-2 { margin-left: 1.25rem; padding-left: 1rem; border-left: 1px solid var(--reader-chrome-border, rgba(0,0,0,.12)); }

.comment-bubble {
    display: inline-block;
    max-width: min(100%, 680px);
    padding: .55rem .75rem;
    border-radius: 14px;
    background: var(--reader-control-bg, rgba(0,0,0,.04));
}

.comment-meta { display:flex; gap:.4rem; align-items:baseline; font-size:.875rem; }
.comment-author { font-weight:700; }
.comment-time { opacity:.7; }
.comment-content { margin-top:.25rem; white-space:pre-wrap; }
.comment-reply-context { margin-top:.2rem; font-size:.8rem; opacity:.75; }
.comment-actions { display:flex; gap:.6rem; margin-top:.25rem; margin-left:.5rem; font-size:.85rem; }
.comment-actions button, .comment-replies-toggle { border:0; background:transparent; cursor:pointer; padding:0; font:inherit; color:inherit; opacity:.8; }
.comment-actions button:hover, .comment-replies-toggle:hover { text-decoration:underline; opacity:1; }
.comment-replies-toggle { display:block; margin:.35rem 0 .25rem 0; font-weight:600; }
.comment-inline-reply-form { margin-top:.5rem; margin-left:0; }
.comment-inline-reply-form textarea { width:100%; min-height:72px; resize:vertical; }

.highlighted-comment .comment-bubble,
.highlighted-comment { background: rgba(250, 204, 21, 0.18); box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35); }

.comment-image-picker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    margin-top: .55rem;
    padding: .45rem .7rem;
    border: 1px solid var(--reader-border, rgba(127,127,127,.25));
    border-radius: .65rem;
    cursor: pointer;
    font-size: .9rem;
}

.comment-image-picker input[type="file"] {
    min-width: 0;
    max-width: 15rem;
    font-size: .82rem;
}

.comment-image-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: .55rem;
}

.comment-image {
    display: block;
    width: auto;
    max-width: min(100%, 520px);
    max-height: 520px;
    border-radius: .7rem;
    object-fit: contain;
}

@media (max-width: 767px) {
    .comment-image-picker {
        width: 100%;
        justify-content: space-between;
    }

    .comment-image-picker input[type="file"] {
        max-width: 68%;
    }

    .comment-image {
        max-width: 100%;
        max-height: 70vh;
    }
}

.comment-image-preview{position:relative;width:min(220px,100%);margin-top:8px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px;overflow:hidden;background:color-mix(in srgb,currentColor 4%,transparent)}
.comment-image-preview[hidden]{display:none!important}.comment-image-preview img{display:block;width:100%;max-height:180px;object-fit:contain;background:rgba(0,0,0,.04)}.comment-image-preview button{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:20px;line-height:1;cursor:pointer}

/* Comment author avatars: compact, role-aware and readable in every reader palette. */
.comment-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.comment-header .comment-meta {
    min-width: 0;
    flex: 1 1 auto;
}
.comment-avatar {
    --comment-avatar-role: #64748b;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--reader-surface-bg, var(--reader-control-bg, #fff));
    border: 2px solid var(--reader-surface-bg, var(--reader-control-bg, #fff));
    box-shadow: 0 0 0 2px var(--comment-avatar-role), 0 1px 4px rgba(0,0,0,.18);
    color: var(--reader-panel-text, var(--color-text, #111827));
}
.comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.comment-avatar__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--comment-avatar-role) 18%, var(--reader-surface-bg, #fff));
    color: var(--reader-panel-text, var(--color-text, #111827));
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.comment-avatar--guest { --comment-avatar-role: var(--user-role-guest-fill, #55647A); }
.comment-avatar--member { --comment-avatar-role: var(--user-role-member-fill, #2F6FE0); }
.comment-avatar--smember { --comment-avatar-role: var(--user-role-smember-fill, #E0A83C); }
.comment-avatar--editor { --comment-avatar-role: var(--user-role-admin-fill, #7C4FE0); }
.comment-avatar--admin { --comment-avatar-role: var(--user-role-admin-fill, #7C4FE0); }

@media (max-width: 640px) {
    .comment-avatar { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; }
    .comment-header { gap: .55rem; }
}

/* Comment controls: avoid low-contrast inherited/opacity states in dark and light themes. */
.comment-actions button,
.comment-replies-toggle {
    color: var(--reader-panel-text, var(--reader-text, #1f2937));
    background: var(--reader-control-bg, rgba(127,127,127,.10));
    border: 1px solid var(--reader-panel-border, var(--reader-chrome-border, rgba(127,127,127,.36)));
    border-radius: 8px;
    padding: 5px 9px;
    opacity: 1;
    text-decoration: none;
}
.comment-actions button:hover,
.comment-replies-toggle:hover,
.comment-actions button:focus-visible,
.comment-replies-toggle:focus-visible {
    color: var(--reader-panel-text, var(--reader-text, #111827));
    background: var(--reader-panel-hover, rgba(127,127,127,.18));
    border-color: var(--reader-accent, var(--reader-panel-border, rgba(127,127,127,.55)));
    opacity: 1;
    text-decoration: none;
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--reader-accent, #7f2b3a) 28%, transparent);
}
.comment-like.is-liked {
    color: var(--reader-on-accent, #fff);
    background: var(--reader-accent, #7f2b3a);
    border-color: var(--reader-accent, #7f2b3a);
}

/* Compact image composer: keep upload control beside Send instead of exposing the native file field. */
.comment-compose-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.6rem}
.comment-image-action{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:.38rem .72rem;border:1px solid var(--reader-control-border,var(--reader-border,rgba(127,127,127,.34)));border-radius:.65rem;background:var(--reader-control-bg,rgba(127,127,127,.08));color:var(--reader-control-text,var(--reader-panel-text,currentColor));font:inherit;font-size:.88rem;line-height:1;cursor:pointer;user-select:none}
.comment-image-action:hover,.comment-image-action:focus-within{border-color:var(--reader-accent,currentColor);background:color-mix(in srgb,var(--reader-accent,currentColor) 10%,var(--reader-control-bg,transparent));outline:none}
.comment-image-action input[type="file"]{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.comment-image-link{display:block;width:180px;height:132px;max-width:100%;margin-top:.55rem;border:1px solid var(--reader-border,rgba(127,127,127,.22));border-radius:.72rem;overflow:hidden;background:color-mix(in srgb,var(--reader-panel-text,currentColor) 4%,transparent);cursor:zoom-in}
.comment-image{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0;background:color-mix(in srgb,var(--reader-panel-text,currentColor) 4%,transparent)}
.comment-image-preview{width:180px;height:132px;max-width:100%;margin-top:8px}
.comment-image-preview img{width:100%;height:100%;max-height:none;object-fit:contain;background:color-mix(in srgb,var(--reader-panel-text,currentColor) 4%,transparent)}
@media(max-width:767px){.comment-image-link,.comment-image-preview{width:154px;height:112px}.comment-image-action{min-height:34px;padding:.34rem .66rem}}