/* 题目评论面板：题卡页脚展开的讨论区，手机端放进底部抽屉。
   暖纸为默认配色；原版、玻璃和各自深色由当前皮肤覆盖，题卡与预览共用。 */
.comments-panel {
    --cm-surface: #ffffff;
    --cm-sunken: #f7f7f5;
    --cm-line: #e6e5e1;
    --cm-text: #33332f;
    --cm-muted: #8a8a84;
    --cm-accent: #b0503f;
    --cm-accent-soft: #fbf1ef;
    --cm-danger: #c0392b;
    --cm-field: var(--cm-surface);
    --cm-selected: var(--cm-surface);
    --cm-primary: var(--cm-accent);
    --cm-primary-hover: var(--cm-primary);
    --cm-on-primary: #fff;
    --cm-menu: var(--cm-surface);
    box-sizing: border-box;
    width: 100%;
    margin-top: 14px;
    padding: 16px 18px 18px;
    border: 1px solid var(--cm-line);
    border-radius: 10px;
    background: var(--cm-surface);
    color: var(--cm-text);
    font-size: 14px;
    line-height: 1.65;
    text-align: left;
}

.comments-panel.hidden { display: none; }
.comments-panel *, .comments-panel *::before, .comments-panel *::after { box-sizing: border-box; }

/* Grid in the 暖纸书房 footer, flex in the Classic / Liquid Glass and narrow-desktop
   footers: declare both so the panel is a full-width row wherever it lands. */
.warm-card-footer > .comments-panel {
    grid-column: 1 / -1;
    order: 15;
    flex: 0 0 100%;
    margin-top: 16px;
}

/* ---- head ---- */
.comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.comments-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

.comments-sort { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--cm-sunken); }

.comments-sort button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cm-muted);
    font: 600 12px/1.4 inherit;
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
}

.comments-sort button[aria-pressed="true"] {
    background: var(--cm-selected);
    color: var(--cm-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* ---- composer (last in the panel: you write under the thread, not above it) ---- */
.comments-composer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cm-line);
}

.comments-panel > .comments-head + .comments-composer,
.comments-empty + .comments-composer { border-top: 0; padding-top: 0; }
.comments-composer-main { flex: 1; min-width: 0; }

.comments-panel textarea {
    display: block;
    width: 100%;
    min-height: 62px;
    max-height: 220px;
    padding: 9px 11px;
    border: 1px solid var(--cm-line);
    border-radius: 8px;
    background: var(--cm-field);
    color: var(--cm-text);
    font: 400 14px/1.6 inherit;
    resize: vertical;
    outline: none;
}

.comments-panel textarea:focus { border-color: var(--cm-accent); }
.comments-panel textarea::placeholder { color: var(--cm-muted); opacity: 1; }
.comments-panel button:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 3px; }
.comments-panel textarea:disabled { background: var(--cm-sunken); color: var(--cm-muted); cursor: not-allowed; }

.comments-composer-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.comments-counter { font-size: 12px; color: var(--cm-muted); margin-right: auto; }
.comments-counter.is-over { color: var(--cm-danger); font-weight: 700; }

.comments-panel button.comments-send {
    appearance: none;
    border: 1px solid var(--cm-primary);
    background: var(--cm-primary);
    color: var(--cm-on-primary);
    font: 700 13px/1.4 inherit;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
}

.comments-panel button.comments-send[disabled] { opacity: .45; cursor: not-allowed; }
.comments-panel button.comments-send:hover:not([disabled]) { background-color: var(--cm-primary-hover); border-color: var(--cm-primary-hover); }

.comments-panel button.comments-cancel {
    appearance: none;
    border: 1px solid var(--cm-line);
    background: var(--cm-surface);
    color: var(--cm-muted);
    font: 600 13px/1.4 inherit;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* ---- list ---- */
.comments-list { display: flex; flex-direction: column; gap: 4px; }

.comment-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cm-line); }
.comment-item:first-child { border-top: 0; }
.comment-item.is-gone { opacity: .6; }

.comment-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cm-sunken) center/cover no-repeat;
    color: var(--cm-muted);
    font: 700 13px/32px inherit;
    text-align: center;
    overflow: hidden;
    user-select: none;
}

.comment-main { flex: 1; min-width: 0; position: relative; }

.comment-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comment-name { font-weight: 700; font-size: 13px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.comment-time { font-size: 12px; color: var(--cm-muted); }

.comment-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--cm-accent-soft);
    color: var(--cm-accent);
}

.comment-body { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.comment-badge.is-muted { background: var(--cm-sunken); color: var(--cm-muted); }

.comment-translated-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--cm-sunken);
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}
.comment-body .comment-reply-to { color: var(--cm-accent); font-weight: 600; }
.comment-gone { margin: 3px 0 0; color: var(--cm-muted); font-style: italic; }

.comment-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; }

.comment-actions button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cm-muted);
    font: 600 12px/1.4 inherit;
    padding: 4px 7px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comment-actions button:hover { background: var(--cm-sunken); color: var(--cm-text); }
.comment-actions button.is-liked { color: var(--cm-accent); }
.comment-actions button[disabled] { opacity: .5; cursor: default; }

/* The overflow menu is appended to .comment-main, not to .comment-actions, so this has
   to be scoped to the panel or 举报 / 删除 render with a 0x0 glyph. */
.comments-panel .comment-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: currentColor;
    mask: var(--cm-icon) center/contain no-repeat;
    -webkit-mask: var(--cm-icon) center/contain no-repeat;
}

.comment-more { margin-left: auto; }
.comment-more .comment-icon { width: 16px; height: 16px; }

.comment-menu {
    position: absolute;
    right: 0;
    z-index: 30;
    min-width: 122px;
    padding: 4px;
    border: 1px solid var(--cm-line);
    border-radius: 8px;
    background: var(--cm-menu);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.comment-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cm-text);
    font: 600 13px/1.4 inherit;
    text-align: left;
    cursor: pointer;
}

.comment-menu button:hover { background: var(--cm-sunken); }
.comment-menu button.is-danger { color: var(--cm-danger); }

.comment-replies { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--cm-line); }
.comment-replies .comment-item { padding: 8px 0; }
.comment-replies .comment-avatar { width: 26px; height: 26px; font-size: 12px; line-height: 26px; }

.comments-empty, .comments-state { padding: 18px 2px; color: var(--cm-muted); text-align: center; }
.comments-state.is-error { color: var(--cm-danger); }

.comments-more, .comment-replies-more {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cm-accent);
    font: 600 13px/1.4 inherit;
    padding: 8px 2px;
    cursor: pointer;
    text-align: left;
}

.comments-more { display: block; width: 100%; text-align: center; }

/* ---- phone sheet ---- */
.mobile-comments-sheet .comments-panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.mobile-comments-sheet .comments-panel textarea { min-height: 76px; font-size: 16px; }

/* ---- dark ---- */
body.theme-dark .comments-panel {
    --cm-surface: #1f2126;
    --cm-sunken: #282b31;
    --cm-line: #363a41;
    --cm-text: #e4e3de;
    --cm-muted: #9a9a94;
    --cm-accent: #e08878;
    --cm-accent-soft: #3a2a27;
    --cm-danger: #f0857a;
    --cm-selected: #34383f;
    --cm-on-primary: #1b1d21;
}

body.theme-dark .comments-sort button[aria-pressed="true"] { box-shadow: none; }
body.theme-dark .comment-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* All desktop skins share layout-warm-paper; skin-warm-paper identifies its palette. */
body.style-default:not(.skin-warm-paper) .comments-panel {
    --cm-surface: #fff;
    --cm-sunken: #f8fafc;
    --cm-line: #e2e8f0;
    --cm-text: #1e293b;
    --cm-muted: #64748b;
    --cm-accent: #dc343c;
    --cm-accent-soft: #fff1f2;
    --cm-danger: #dc2626;
    --cm-primary: #ff4b4b;
    --cm-primary-hover: #ed343b;
    --cm-on-primary: #fff;
    --cm-selected: var(--cm-surface);
}

body.style-default.theme-dark:not(.skin-warm-paper) .comments-panel {
    --cm-surface: var(--dark-surface, #202020);
    --cm-sunken: var(--dark-surface-2, #262626);
    --cm-line: var(--dark-border, #3a3a3a);
    --cm-text: var(--dark-text, #f2f2f2);
    --cm-muted: #b0b0b0;
    --cm-accent: #ff8585;
    --cm-accent-soft: #40292b;
    --cm-danger: #fca5a5;
    --cm-selected: var(--cm-sunken);
}

body.style-liquid-glass .comments-panel {
    --cm-surface: var(--glass-fill-strong, rgb(255 255 255 / 70%));
    --cm-sunken: rgb(238 243 252 / 58%);
    --cm-field: var(--glass-fill, rgb(255 255 255 / 55%));
    --cm-line: var(--glass-border, rgb(255 255 255 / 60%));
    --cm-text: #1e293b;
    --cm-muted: #536176;
    --cm-accent: #cf3549;
    --cm-accent-soft: rgb(255 220 227 / 70%);
    --cm-danger: #d92d45;
    --cm-primary: #ff4b4b;
    --cm-primary-hover: #f5373d;
    --cm-on-primary: #fff;
    --cm-selected: var(--cm-surface);
    --cm-menu: var(--filter-solid, rgb(255 255 255 / 97%));
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-highlight);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

body.style-liquid-glass.theme-dark .comments-panel {
    --cm-sunken: rgb(16 20 31 / 36%);
    --cm-text: #f1f5f9;
    --cm-muted: #b6c0d1;
    --cm-accent: #ffabb7;
    --cm-accent-soft: rgb(148 59 81 / 38%);
    --cm-danger: #fda4af;
}

/* App-wide dark fields are !important: keep the comment palette authoritative. */
body:not(.skin-warm-paper) .comments-panel textarea {
    background-color: var(--cm-field) !important;
    border-color: var(--cm-line) !important;
    color: var(--cm-text) !important;
}
body:not(.skin-warm-paper) .comments-panel textarea:focus {
    border-color: var(--cm-accent) !important;
    box-shadow: 0 0 0 2px var(--cm-accent-soft);
}
body:not(.skin-warm-paper) .comments-panel textarea:disabled {
    background-color: var(--cm-sunken) !important;
    color: var(--cm-muted) !important;
}
body.style-liquid-glass .comments-panel :is(textarea, .comments-sort, .comments-cancel, .comment-menu) {
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-highlight);
}
body.style-liquid-glass .comments-panel button.comments-send {
    background-image: var(--btn-gloss);
    box-shadow: 0 3px 10px rgb(255 75 75 / 18%), inset 0 1px 0 rgb(255 255 255 / 22%);
}
body.style-liquid-glass .comments-panel .comment-menu {
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}