/* ═══════════════════════════════════════════════════════════════
   评论详情页皮肤 v1.0 · 对齐公示主页 v2（#page-circle）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。回滚：删除本文件 + 删除 index.html 中 1 行 link。共 2 步。
   机制：加载于所有既有样式之后，靠"同权重后者生效"覆盖旧值；**严禁 !important**。
        严禁出现任何字面色值（仅允许 rgba 黑白遮罩/投影）。
   依赖：复用 skin-nearby.css 声明的 :root 令牌。
   范围：仅 #page-comment-detail（评论详情页）。不触碰公示主页/我的页/客服页。
   ⚠ 本文件所有选择器必须带 `#page-comment-detail ` 前缀（必需，不是为了好看）：
     · .post-* / .identity-badge.official 被公示主页 / 评论详情 / 我的页「收藏公示」三页共用，
       加 ID 前缀后既能覆盖到位，又不影响另两页；
     · .emoji-dock / .emoji-grid 被评论详情(#commentEmojiDock) 与客服聊天(#chatEmojiDock)
       共用（circle.css 里它们无任何前缀），不加前缀会把客服页表情面板一起改掉。
   本轮已核实的「CSS 够不到」处（保持原样，非缺陷）：
     ① #commentListSection 的背景由 circle.js 内联写死（有评论 #fff / 无评论 transparent）——
        内联优先级最高且禁用 !important，页面底已改白，故与「去卡面」效果一致；
     ② circle.js 的回复前缀用内联 color:#3A3C40（≈ --body #3F3F3F，肉眼无差）；
     ③ 图片 onerror 内联 background:#E8EAED（仅加载失败时可见）。
   已知不变式（改动前务必确认）：
     · .emoji-dock.show 高度 300px 与 circle.js 的 dockScrollLifted = 300 硬联动
       （用于面板升起时的滚动同步动画）→ 高度绝对不可改，只改颜色/圆角/投影。
     · 本页顶栏是 .page 的 flex 子项（在滚动容器之外，永久可见），与公示主页的
       sticky 机制不同但结果等价，本轮不改机制。
   保留的原类名（不得改名，JS 依赖）：
     #commentDetailScroll / #commentOriginalPost / #commentListSection / #commentInputField
     / #commentSendBtn / #commentEmojiBtn / #commentEmojiDock / #commentEmojiGrid
     / #commentMask / #commentBackBtn / .like-action / .fav-btn-circle / .post-img-wrap
   ═══════════════════════════════════════════════════════════════ */

/* 主题色：与公示主页完全同色（靛紫，与底导 [data-theme="circle"] 一致）。
   注：本页原未声明 --theme，会继承 :root 的橙红 —— 这是此前「一页三色」的根源之一。 */
#page-comment-detail{
  --theme:#5B5BD6;
  --theme-active:#4646B8;
  --theme-soft:#EFEFFC;
  background:var(--canvas);
  color:var(--ink);
}

/* ─────────── §1 顶栏：54px 常驻（对齐各主页顶栏 .hd） ─────────── */
#page-comment-detail .comment-detail-header{
  flex-shrink:0;
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  display:flex; align-items:center; gap:12px;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline-soft);
  position:relative; z-index:60;
}
/* 右侧占位块：让标题左右占用等宽（左 16+40+12=68，右 12+40+16=68）→ 精确居中。
   原实现用 margin-right:32px 会让标题偏左 6px。 */
#page-comment-detail .comment-detail-header::after{
  content:'';
  width:40px; height:40px;
  flex-shrink:0;
}
#page-comment-detail .comment-back-btn{
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-full);
  cursor:pointer;
}
#page-comment-detail .comment-back-btn:active{ background:var(--surface-soft); }
#page-comment-detail .comment-back-btn svg{
  width:22px; height:22px; fill:none;
  stroke:var(--ink); stroke-width:2.25;
}
#page-comment-detail .comment-detail-title{
  flex:1; min-width:0;
  margin-right:0;                       /* 覆盖 circle.css 的 32px */
  font-size:var(--t-title); font-weight:700; letter-spacing:-.3px;
  color:var(--ink);
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ───── §2 原帖块：去卡面 + 发丝线（对齐公示主页 .post-card） ───── */
#page-comment-detail .comment-original-post{
  margin:0;
  padding:20px 16px;
  background:none;
  border-radius:0;
  border-bottom:1px solid var(--hairline-soft);
}
#page-comment-detail .comment-original-post .post-header{
  display:flex; align-items:center; gap:10px; margin-bottom:0;
}
#page-comment-detail .comment-original-post .post-avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-strong);
}
#page-comment-detail .comment-original-post .post-avatar img{
  width:100%; height:100%; object-fit:cover;
}
#page-comment-detail .comment-original-post .post-user-info{ flex:1; min-width:0; }
#page-comment-detail .comment-original-post .post-nickname{
  display:flex; align-items:center; gap:5px;      /* 全站徽章间距统一 5px */
  font-size:var(--t-body); font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 官方徽章：金色镂空 → 淡紫底 + 紫字（与公示主页 / 我的页「收藏公示」逐值相同） */
#page-comment-detail .identity-badge.official{
  height:17px; padding:0 6px; margin-left:0;
  border:none; border-radius:var(--r-sm);
  background:var(--theme-soft); color:var(--theme);
  font-size:10.5px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
#page-comment-detail .comment-original-post .post-time{
  font-size:var(--t-micro); color:var(--muted-soft); margin-top:3px;
}
#page-comment-detail .comment-original-post .post-title{
  margin:12px 0 0;
  font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.2px;
  color:var(--ink);
  font-family:inherit;                  /* 去掉原「Heiti SC/SimHei」覆写，回归全站字体 */
  text-align:left;
}
#page-comment-detail .comment-original-post .post-body{
  margin:8px 0 0;
  font-size:var(--t-body); line-height:1.55; color:var(--body);
}
#page-comment-detail .comment-original-post .post-images{ gap:6px; margin:12px 0 0; }
#page-comment-detail .comment-original-post .post-img-wrap{
  border-radius:var(--r-md); background:var(--surface-strong);
}
#page-comment-detail .comment-original-post .post-images.single .post-img-wrap.vertical{ width:calc(50% - 3px); }
#page-comment-detail .comment-original-post .post-images.double .post-img-wrap{ width:calc(50% - 3px); }

/* 帖头右上动作区（仅本页使用 .fav-btn-circle / .post-header-actions，无跨页风险） */
#page-comment-detail .comment-original-post .post-header-actions{
  display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0;
}
#page-comment-detail .comment-original-post .post-action{
  display:flex; align-items:center; gap:5px;
  font-size:var(--t-micro); color:var(--muted);
  cursor:pointer; user-select:none; transition:transform 100ms ease-out;
}
#page-comment-detail .comment-original-post .post-action:active{ transform:scale(.9); }
#page-comment-detail .comment-original-post .post-action svg{
  width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:1.8;
  transition:fill 200ms ease, stroke 200ms ease;
}
#page-comment-detail .comment-original-post .post-action.liked{ color:var(--theme); }
#page-comment-detail .comment-original-post .post-action.liked svg{
  stroke:var(--theme); fill:var(--theme);
}
#page-comment-detail .comment-original-post .post-header-actions .like-action{ gap:0; }
/* 收藏按钮：主题紫实心；已收藏 → 白底 + 发丝描边 + 灰字（实心/描边区分状态） */
#page-comment-detail .fav-btn-circle{
  height:28px; padding:0 12px;
  border:none; border-radius:var(--r-full);
  background:var(--theme); color:var(--on-theme);
  font-size:var(--t-micro); font-weight:600; line-height:1;
  white-space:nowrap; flex-shrink:0;
  cursor:pointer;
  transition:background 150ms ease, color 150ms ease, border-color 150ms ease;
}
#page-comment-detail .fav-btn-circle:active{ transform:scale(.95); }
#page-comment-detail .fav-btn-circle.favorited{
  background:var(--canvas); color:var(--muted);
  border:1px solid var(--hairline);
}

/* ───── §3 评论列表：去卡面（背景由 JS 内联写死，白底上等于透明） ───── */
#page-comment-detail .comment-list-section{
  margin:0;                             /* 覆盖 circle.css 的 0 12px 12px */
  border-radius:0;
  padding:0 16px;                       /* 覆盖 8px 16px */
}
#page-comment-detail .comment-item{
  padding:16px 0;
  border-bottom:1px solid var(--hairline-soft);
}
#page-comment-detail .comment-item:last-child{
  border-bottom:none;
  padding-bottom:20px;
}
#page-comment-detail .comment-item-header{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
#page-comment-detail .comment-item-avatar{
  width:32px; height:32px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-strong);
}
#page-comment-detail .comment-item-avatar img{
  width:100%; height:100%; object-fit:cover;
}
#page-comment-detail .comment-item-nickname{
  font-size:var(--t-caption); font-weight:600; color:var(--ink);
}
#page-comment-detail .comment-item-time{
  font-size:var(--t-micro); color:var(--muted-soft); margin-left:auto;
}
#page-comment-detail .comment-item-body{
  font-size:var(--t-body); line-height:1.55; color:var(--body); margin-bottom:8px;
}
#page-comment-detail .comment-item-reply-btn{
  font-size:var(--t-micro); color:var(--muted);
  cursor:pointer; display:inline-block; padding:2px 0;
}
#page-comment-detail .comment-item-reply-btn:active{ color:var(--theme); }
#page-comment-detail .comment-reply-nest{
  padding:10px 12px; margin-top:8px;
  background:var(--surface-soft);
  border-radius:var(--r-sm);
  border-left:3px solid var(--theme);
  color:var(--body);
}
#page-comment-detail .comment-reply-nest .comment-item-nickname{ color:var(--ink); }
#page-comment-detail .comment-empty{
  padding:40px 0;
  font-size:var(--t-body); color:var(--muted-soft);
  text-align:center;
}

/* ─────────── §4 输入栏：与客服聊天页同款形态（圆角矩形输入框 + 圆形图标键） ───────────
   逐项对照客服页 .chat-input-bar / .chat-input-field / .chat-send-btn / .chat-emoji-btn（messages.css）：
     · 输入框 高 38px、圆角 --r-sm(8px)、底色 --surface-strong（客服为 #F0F1F3，同一族）
     · 输入框聚焦 白底 + 主题色 1.5px 外描边（客服为 1.5px #81D8D0，色随本页主题）
     · 发送键 高 36px、圆角 --r-sm(8px)、实心
     · 表情键 40px 圆形、图标 22px、描边 --muted-soft、线宽 2（与客服页 .chat-emoji-btn 同尺寸同观感）
   本页有意保留的差异（不作为「不一致」）：
     · 发送键文案仍为「发送」——客服的是空态圆形「+」，点它是打开加号面板，本页没有加号面板，不引入该形态；
     · 主题色取本页靛紫（--theme），不套用客服的青色。
   改前为胶囊形：输入框 height 40 / border-radius --r-full、发送键 height 34 / border-radius --r-full。 */
#page-comment-detail .comment-input-bar{
  padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--canvas);
  border-top:1px solid var(--hairline-soft);
  gap:8px;
}
#page-comment-detail .comment-emoji-btn{
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-full);
  cursor:pointer;
  transition:background 150ms ease;
}
#page-comment-detail .comment-emoji-btn:active{ background:var(--surface-strong); }
/* 图标尺寸与按钮关系修正（与客服聊天页同步）：40×40 几乎顶满按钮（内圆墨迹 36.7px）
   → 回到 22px（触控目标的 55%，规范区间 50%~60%）。
   另：必须补 stroke-linecap:round —— 该 SVG 的两只「眼睛」是零长度线段
   （<line x1="9" y1="9" x2="9.01" y2="9"/>），butt 端点渲染不出任何像素
   （像素实测：眼睛区域 0 像素），导致图标只有圆框 + 嘴；加 round 后每只眼睛 60 像素。 */
#page-comment-detail .comment-emoji-btn svg{
  width:22px; height:22px;
  fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
#page-comment-detail .comment-input-field{
  flex:1; min-width:0;
  /* textarea 化（对齐客服 .chat-input-field）：必须显式给 line-height / padding 才能垂直居中，
     并关掉 resize 手柄与默认等宽字体。自动增高逻辑见 circle.js 的 syncCommentInputState()。 */
  height:38px; max-height:120px;
  background:var(--surface-strong);
  border:none; outline:none;
  border-radius:var(--r-sm);
  padding:8px 12px; line-height:22px;
  font-size:15px; color:var(--ink);
  font-family:inherit; resize:none; overflow-y:auto;
}
#page-comment-detail .comment-input-field::placeholder{ color:var(--muted-soft); }
/* 聚焦：白底 + 主题色 1.5px 外描边（与客服 .chat-input-field:focus 同形，色随本页主题） */
#page-comment-detail .comment-input-field:focus{
  background:var(--canvas);
  box-shadow:0 0 0 1.5px var(--theme);
}
/* 要求 4（Q3）：发送键高度与客服聊天页统一为 40px（原 36px）。
   客服页 .chat-send-btn 已同步为 40px，两页发送键尺寸一致。 */
#page-comment-detail .comment-send-btn{
  height:40px; min-width:56px; padding:0 14px; flex-shrink:0;
  background:var(--theme); color:var(--on-theme);
  border:none; border-radius:var(--r-sm);
  font-size:var(--t-body); font-weight:600;
  cursor:pointer;
  transition:background var(--ease);
}
#page-comment-detail .comment-send-btn:active{ background:var(--theme-active); opacity:1; }

/* ───── §5 表情面板接缝：与客服聊天页同款衔接 ─────
   面板本体沿用 circle.css 共用类 `.emoji-dock`（bg #F7F8FA / 圆角 16px 16px 0 0 / 投影 0 -4px 16px .1），
   与客服页 #chatEmojiDock 逐值相同 —— 本页不再覆盖，改一处两边同步。

   ⚠ 「不契合」的真因不在面板本体，而在圆角缺口里透出的底色（圆角是切出来的，缺口露出的是下面那层）：
     · 客服页：缺口下面是 #chatView 浅灰底 rgb(240,241,243)，与面板 rgb(247,248,250) 同族
       → 缺口几乎看不见，圆角衔接干净。
     · 本页：缺口下面是压暗遮罩 #commentMask（rgba(0,0,0,.4)，fixed 满屏，z-index 70）
       → 实测缺口像素 ≈ rgb(148,148,148) 深灰；输入栏高 56.8px 产生的半像素边界处
         同样渗出遮罩（实测一条 rgb(227) 灰线）→ 观感是「两个深灰缺口 + 一条灰缝」。
     注：上一轮只把面板本体的 20px 圆角 / .08 投影对齐为客服同款，未触及缺口底色，故看不出变化。

   修法：在面板之下、遮罩之上垫一条 16px 浅灰「肩部」。
     挂在本输入栏上（z-index 80，DOM 早于面板）→ 绘制顺序为 遮罩(70) → 肩部(80) → 面板(80，DOM 更晚)，
     肩部压在遮罩之上、面板又压在肩部之上 → 缺口与半像素缝隙露出的都是这条浅灰，不再有深灰角与灰缝。
     取 --surface-strong(#F2F2F2)，最接近客服缺口处的 #F0F1F3。
     关闭态零副作用：此时输入栏底＝视口底（实测 barBottom=932=视口高），这 16px 落在视口外，
                      并被 .view-stack 的 overflow:hidden 裁掉。
   ⚠ 高度 300px 与 circle.js 的 dockScrollLifted = 300 硬联动，不可改（高度定义在 circle.css）。
   ⚠ 肩部高度须 ≥ 面板圆角半径（当前两边都是 16px），否则缺口下半截仍会露出遮罩。
   注：.emoji-grid / .emoji-item 同样保持 circle.css 原值（跨页共用，改会波及客服页 #chatEmojiDock）。 */
#page-comment-detail .comment-input-bar::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-16px; height:16px;
  background:var(--surface-strong);
  pointer-events:none;
}