/* ==========================================================================
 * comments.css — 评论模块样式（独立组件，随 js/sr-comments.js 一起加载）
 *
 * 与模板的关系：只用 style.css 里的设计令牌（颜色 / 圆角 / 字体），
 * 不依赖其它组件的类名，因此整块可以整体替换（换设计稿时只改本文件）。
 *
 * 结构总览：
 *   .sr-comments            模块根（data-sr-comments 挂 JS）
 *   ├ .cmts-head            标题 + 工具条（折叠全部等）
 *   ├ .cmt-list             楼层列表
 *   │  └ .cmt               单层（grid：头像 | 正文）
 *   │     ├ .av / .avc      头像 / 首字母色块
 *   │     ├ .bd             正文（.who / .txt / .acts）
 *   │     └ .child-wrap     子楼层（.child-toggle 折叠 + .child 容器；
 *   │                        所有后代回复都平铺在这一层，只用「回复 @某某：」表达层级）
 *   ├ .cmt-more             加载更多 / 到底提示
 *   └ .cform                表单（.cf-tip / .cf-bar / .cf-emoji …）
 * ========================================================================== */

/* [hidden] 兜底：本模块多处用 display:flex/grid，作者样式会盖掉 hidden 属性的
 * 浏览器默认样式（display:none），必须显式声明，否则「回复预览 / 表情面板」会空着显示 */
.sr-comments [hidden] { display: none !important; }

/* ---------- 卡片与标题 ---------- */
.sr-comments {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-top: 16px;
}
.cmts-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.cmts-head h2 { margin: 0; font-size: 1.1rem; }
.cmts-head h2 b { color: var(--accent); }
.cmts-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cmt-tool {
    font-size: .76rem; color: var(--gray); cursor: pointer;
    background: none; border: none; padding: 0;
}
.cmt-tool:hover { color: var(--accent); }

/* ---------- 楼层 ---------- */
/* 版式对齐设计稿：头像 | 正文（昵称 + 作者徽章 + 时间、正文、点赞/回复），
 * 楼层之间不加分隔线，用留白区分（更透气） */
.cmt-list { display: block; }
.cmt {
    display: grid; grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px; padding: 15px 0;
}
.cmt > .bd { grid-column: 2; min-width: 0; }
.cmt > .child-wrap { grid-column: 2; }
.cmt .av, .cmt .avc {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    box-shadow: 0 0 0 1px var(--line);   /* 发丝描边：白底头像在白卡片上不至于融入背景 */
}
.cmt .avc {
    display: grid; place-items: center;
    font-size: .86rem; font-weight: 700; color: #fff;
}
.cmt .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt .who b { font-size: .9rem; }
/* 站内用户昵称：链接到其用户中心公开主页（/user/{uid}）。
 * 保持昵称原有的墨色（不外露成强调色），hover 才亮起，避免整屏评论都变成彩色链接 */
.cmt .who .nm a.uc { color: inherit; }
.cmt .who .nm a.uc:hover { color: var(--accent); }
.cmt .who .au {
    font-size: .68rem; line-height: 1.6; background: var(--accent-tint); color: var(--accent);
    padding: 0 8px; border-radius: 6px;
}
.cmt .who .au.top { background: var(--accent); color: #fff; }
/* 时间紧跟在昵称/徽章之后（不再推到行尾），比昵称小一档、浅一档 */
.cmt .who time { font-size: .74rem; color: var(--gray); }
.cmt .txt { margin: 7px 0 9px; font-size: .88rem; color: var(--ink-soft); word-break: break-word; }
.cmt .txt p { margin: .4em 0; }
.cmt .txt p:first-child { margin-top: 0; }
.cmt .txt p:last-child { margin-bottom: 0; }
.cmt .txt a { color: var(--accent); }
/* 子楼层的「回复 @某某：」前缀（强调色，与正文同字号） */
.cmt .mention { color: var(--accent); }
.cmt .mention b { font-weight: 600; }

/* 评论者信息条（配套插件 StarRiver Kit → 评论者信息）：系统 / 浏览器 / IP 归属地
 * 定位是「补充信息」，所以比时间还小一档、更浅 —— 不抢正文注意力。
 * 归属地由前端异步填：未回填时是占位「···」，填好加 .is-done 稍微提一点对比度。 */
.cmt .cmt-info {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px;
    margin: 4px 0 0;
    font-size: .72rem; line-height: 1.6; color: var(--gray);
}
.cmt .cmt-info .it { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cmt .cmt-info svg { width: 12px; height: 12px; stroke: currentColor; flex: 0 0 auto; opacity: .8; }
.cmt .cmt-info .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
.cmt .cmt-info .it:hover { color: var(--ink-soft); }
/* 归属地：查到了才实体化，能一眼看出「这是真实地址」而不是占位 */
.cmt .cmt-info .loc.is-done { color: var(--ink-mute); }
/* 爬虫访客：斜体弱化（这类访客没有「浏览器」可言，标出来只为信息完整） */
.cmt .cmt-info .bot { font-style: italic; }
/* 楼中楼里再收一档，避免嵌套楼层视觉过重 */
.cmt.is-child .cmt-info { font-size: .7rem; }
@media (max-width: 560px) {
    .cmt .cmt-info { gap: 2px 10px; }
    .cmt .cmt-info .tx { max-width: 9em; }
}

/* 操作区：点赞（图标 + 数字）在前、回复（图标 + 文字）在后 */
.cmt .acts { display: flex; align-items: center; gap: 18px; }
.cmt .acts button {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .78rem; color: var(--gray); background: none; border: none;
    cursor: pointer; padding: 0; transition: color .18s ease;
}
.cmt .acts button:hover { color: var(--accent); }
.cmt .acts svg { width: 14px; height: 14px; stroke: currentColor; }
.cmt .acts .lk.has { color: var(--accent); }
.cmt .acts .lk.has svg { fill: currentColor; }
.cmt .acts .lk.is-loading { opacity: .5; pointer-events: none; }

/* 子楼层：整块淡色圆角容器（对齐设计稿的「平铺回复块」），不再用左侧竖线 */
.child-wrap { margin-top: 6px; }
.child-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .76rem; color: var(--accent); background: none; border: none;
    cursor: pointer; padding: 2px 0;
}
.child-toggle::before {
    content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
    transition: transform .2s ease; margin-bottom: 2px;
}
.child-toggle.is-open::before { transform: rotate(-135deg); margin-bottom: -2px; }
.child {
    margin-top: 10px;
    /* 不再加淡色底盒：整组回复共用一个色块会把它们「连」在一起，
     * 现在每条回复直接落在卡片底色上，与顶层楼层同底，仅靠留白分隔 */
}
.child[hidden] { display: none; }
/* 每条回复一个独立的小底盒（淡主题色，深色模式自动变深）：
 * 盒子本身承担「这是一条回复」的视觉边界，条与条之间用小间距分开；
 * 不再让整组回复共用一个大盒（那会把它们连成一大块） */
.child .cmt {
    padding: 12px 14px;
    grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
    background: var(--accent-wash);      /* 淡主题色底（深色模式自动变深） */
    border-radius: 12px;
}
.child .cmt + .cmt { margin-top: 12px; }
/* 子楼层头像小一档 */
.child .cmt .av, .child .cmt .avc { width: 28px; height: 28px; }
.child .cmt .avc { font-size: .74rem; }
.child .cmt .who b { font-size: .86rem; }
.child .cmt .txt { margin: 5px 0 8px; }

/* ---------- 加载更多 ---------- */
.cmt-more { margin-top: 16px; text-align: center; }
.cmt-end { font-size: .78rem; color: var(--gray); }
.cmt-more .btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- 表单（对齐设计稿：欢迎行 + 资料行 + 输入区 + 工具/提交底栏） ---------- */
.cform { margin-bottom: 22px; }
.cform.is-closed { padding: 18px; background: var(--panel); border-radius: 12px; text-align: center; }
.cf-closed { margin: 0; font-size: .86rem; color: var(--gray); }

/* 回复时表单临时挂在楼层下方：给一层浅底 + 圆角，和上面的楼层明显分开 */
.cform.is-in-thread {
    margin: 2px 0 18px; padding: 14px 16px;
    background: var(--panel); border-radius: 12px;
}
.cform.is-in-thread .cf-head { margin-bottom: 12px; }

/* 欢迎行：头像 + 自定义文案（文案在模板设置里改） */
.cf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cf-av {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    overflow: hidden; display: grid; place-items: center;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line);   /* 与列表头像同款发丝描边 */
}
.cf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-emoji-av { font-size: 1.5rem; line-height: 1; }
.cf-hi { flex: 1; min-width: 0; font-size: .92rem; color: var(--ink-soft); }
.cf-hi b { color: var(--ink); font-weight: 600; }
/* 昵称后面的内容（{welcome} 那段）：比昵称小一号、颜色浅一档。
 * 间隙：模板里昵称与 {welcome} 之间已有一个空格，这里再补 margin-left 拉开距离
 * （只用空格太挤）；间距跟着字号走，调 .cf-hi 字号时不会脱节。 */
.cf-hi .cf-sub { font-size: .88em; color: var(--gray); margin-left: .5em; }

/* 登录提示 / 资料行 */
.cf-msg { margin: 0 0 12px; font-size: .82rem; color: var(--gray); }
.cf-msg a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* 信息行：底部留出间距，别和下方评论输入区贴在一起 */
.cform .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }

/* 输入区统一底色：底色 = 主题浅色档 --accent-tint，再叠一层纸色（浓淡 = --sr-ed-mask，
 * 由表单根/构件传下来），与评论正文输入区（.sr-editor 的 ::before 遮罩）配方一致 —— 
 * 信息行与正文区因此是同一个视觉色，深色模式同样自动跟随。 */
.cform {
    --field-surface: linear-gradient(rgba(var(--paper-rgb), var(--sr-ed-mask, .35)), rgba(var(--paper-rgb), var(--sr-ed-mask, .35)));
}
.cform .row input,
.cform textarea,
.cform .captcha input {
    background-color: var(--accent-tint);
    background-image: var(--field-surface);
}
.cform .row input {
    width: 100%; margin: 0; padding: 11px 14px;
    border: 1px solid transparent; border-radius: 10px;
    color: var(--ink);
    font-size: .88rem; font-family: inherit; outline: none;
}
.cform textarea {
    width: 100%; min-height: var(--sr-ed-height, 150px); margin: 10px 0 0; padding: 12px 14px;
    border: 1px solid transparent; border-radius: 12px;
    color: var(--ink);
    font-size: .9rem; font-family: inherit; line-height: 1.7;
    outline: none; resize: vertical;
}
.cform .row input::placeholder, .cform textarea::placeholder { color: var(--gray); }
/* 聚焦态沿用模板统一约定：强调色描边 + 柔和光晕 */
.cform .row input:focus, .cform textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.cform .captcha { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cform .captcha img { height: 40px; border-radius: 8px; cursor: pointer; width: auto; }
.cform .captcha input {
    width: auto; margin: 0; padding: 9px 12px; border: 1px solid transparent;
    border-radius: 10px; color: var(--ink); outline: none;
}

/* 底栏：左侧工具组靠左、右侧操作组靠右 —— 与输入框两端齐平 */
.cf-bar { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cf-tools { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.cf-bar .cf-tool {
    flex-shrink: 0; width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    border-radius: 9px; background: var(--panel); border: 1px solid transparent;
    color: var(--ink-mute); transition: color .18s ease, background .18s ease;
}
.cf-bar .cf-tool svg { width: 17px; height: 17px; stroke: currentColor; }
.cf-bar .cf-tool:hover, .cf-bar .cf-tool.is-open { color: var(--accent); }
.cf-count { font-size: .76rem; color: var(--gray); }
.cf-count.is-over { color: #c44e4e; font-weight: 600; }
.cf-hint { font-size: .74rem; color: var(--gray); }
.cf-hint kbd {
    font-family: inherit; font-size: .72rem; padding: 1px 5px;
    border: 1px solid var(--line); border-bottom-width: 2px;
    border-radius: 4px; background: var(--paper); color: var(--ink-mute);
}
.cf-cancel {
    font-size: .78rem; line-height: 1.9; padding: 0 10px; flex-shrink: 0;
    border-radius: 8px; background: var(--panel); color: var(--ink-soft);
    border: none; cursor: pointer;
}
.cf-cancel:hover { color: var(--accent); }
/* 提交按钮：实心强调色 + 图标 + 白字（贴右）；尺寸刻意收小一档，别抢输入区的视觉重心 */
.cf-send {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px; border: none; border-radius: 8px; cursor: pointer;
    background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600;
    font-family: inherit; transition: filter .18s ease, transform .18s ease;
}
.cf-send svg { width: 13px; height: 13px; stroke: currentColor; }
.cf-send:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cf-send:active { transform: translateY(0); }
.cf-send[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* 反馈条：内联错误 / 成功提示（JS 写入） */
.cf-tip {
    margin-bottom: 12px; padding: 9px 12px; border-radius: 8px;
    font-size: .82rem; line-height: 1.6;
    background: var(--accent-wash); color: var(--accent);
}
.cf-tip.is-error { background: rgba(196, 78, 78, .12); color: #c44e4e; }
.cf-tip.is-ok { background: var(--accent-tint); color: var(--accent); }

/* 表情面板：弹出层 —— 绝对定位于工具按钮上方，不占据文档流空间 */
/* 向下展开：不遮住正在输入的正文（弹层浮在下方评论列表之上） */
.cf-emoji {
    position: absolute; left: 0; top: calc(100% + 10px); z-index: 30;
    width: 320px; max-width: 100%; padding: 10px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(var(--ink-rgb), .14);
}
/* 表情包标签行：多包时显示（单包不渲染这一行） */
.cf-emoji-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none; -ms-overflow-style: none;   /* 隐藏滚动条（仍可横向滑动） */
}
.cf-emoji-tabs::-webkit-scrollbar { width: 0; height: 0; }
/* 标签：图标（可选）+ 表情包名称 */
.cf-emoji-tab {
    flex: 0 0 auto; height: 28px; padding: 0 10px;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer; white-space: nowrap;
    background: var(--panel); border: 1px solid transparent; border-radius: 8px;
    color: var(--ink-mute); font-size: .78rem; line-height: 1;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.cf-emoji-tab img { width: 18px; height: 18px; max-width: 18px; max-height: 18px; object-fit: contain; }
.cf-emoji-tab:hover { border-color: var(--accent-tint); }
.cf-emoji-tab.is-on { border-color: var(--accent); background: var(--accent-tint); }
/* 网格：固定高度内滚动，避免 100+ 表情把面板撑太长 */
/* 网格：固定高度内滚动，滚动条隐藏（126 个表情也能干净地翻） */
.cf-emoji-body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 4px; max-height: 190px; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.cf-emoji-body::-webkit-scrollbar { width: 0; height: 0; }
.cf-emoji-body button {
    height: 32px; font-size: 1.1rem; line-height: 1;
    background: none; border: none; border-radius: 6px; cursor: pointer;
}
.cf-emoji-body button:hover { background: var(--accent-tint); }
/* 图片表情：按钮里放图，等比缩放 */
.cf-emoji-body.is-image button { display: grid; place-items: center; height: 34px; }
.cf-emoji-body.is-image img { max-width: 28px; max-height: 28px; width: auto; height: auto; }
/* 弹出层小三角，指明来源按钮 */
.cf-emoji::after {
    content: ""; position: absolute; left: 14px; top: -6px;
    width: 10px; height: 10px; transform: rotate(45deg);
    background: var(--paper);
    border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    border-top-left-radius: 2px;
}


/* ---------- 小屏 ---------- */
@media (max-width: 768px) {
    .cform .row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sr-comments { padding: 18px 15px; }
    .cmt { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
    .cmt .av, .cmt .avc { width: 32px; height: 32px; font-size: .76rem; }
    .child .cmt { padding: 10px 12px; }        /* 窄屏小盒内边距收紧 */
    .child .cmt + .cmt { margin-top: 10px; }
    .cform.is-in-thread { padding: 12px; margin-bottom: 14px; }
    .cmt .acts { gap: 14px; }
    .cf-hint { display: none; }
    .cf-emoji { width: auto; right: 0; }
    .cf-av { flex-basis: 34px; width: 34px; height: 34px; }
    .cf-emoji-av { font-size: 1.3rem; }
}

/* 侧栏「最新评论」小工具里的表情：再小一档（那里的字号本身就小） */
.wg-cmt img.sr-sticker { max-width: 1.4em; max-height: 1.4em; }