/* ==========================================================================
   theme-zhihu — 评论组件 Next (PluginCommentNext)
   插件把评论区渲染成 open shadow DOM 里的 Svelte 组件，颜色、圆角、字号全部走
   CSS 变量，而自定义属性会穿过影子边界继承进去，所以外观适配的主体是「把主题
   token 翻译成它的变量」，不是穿透影子树写样式。只有四处硬编码没有变量出口
   （提交按钮、身份输入框、字段之间的虚线、作者字重），由 comment-next.js 补。

   变量分两层：--halo-cw-* 是插件承诺稳定的接口，--comment-next-* 贴着内部实现。
   能喂稳定层就喂稳定层；只有稳定层表达不了主题语义时才写内部变量——虚线分隔、
   弹层遮罩、AI 面板那几块蓝色渐变都属于这种。

   选择器前面挂 html[data-comment-next="on"]：插件自己的深色默认值是
   `.dark comment-widget`（0,1,1），而它的样式表由 Halo 注入在主题样式之后，
   同权重时后来者赢。多一个属性选择器变成 (0,1,2)，就与加载顺序无关了。
   这个属性由 layout.html 按 pluginFinder.available('PluginCommentNext') 渲染，
   插件没启用时整份文件连 <link> 都不会出现。
   ========================================================================== */

html[data-comment-next="on"] comment-widget,
html[data-comment-next="on"] comment-next {
  display: block;

  /* ---------- 稳定层 ---------- */

  /* 这套编号是「1 最实、3 最虚」：primary-2 给描边和下划线，primary-3 给底色。
     主题原来的 --halo-cw-* 映射是按官方组件的语义写的（2=hover、3=pressed，
     越往后越深），照搬过来会让 Next 的选中底色变成一块深蓝，字就看不见了。 */
  --halo-cw-primary-1-color: var(--accent);
  --halo-cw-primary-2-color: rgba(var(--accent-rgb), 0.42);
  --halo-cw-primary-3-color: rgba(var(--accent-rgb), 0.1);
  --halo-cw-text-1-color: var(--text);
  --halo-cw-text-2-color: var(--text-2);
  --halo-cw-text-3-color: var(--muted);
  /* muted 在 Next 里是「边框 → 更浅的边框 → 面板底」，不是三档灰阶文字。 */
  --halo-cw-muted-1-color: var(--border);
  --halo-cw-muted-2-color: var(--divider);
  --halo-cw-muted-3-color: var(--surface);
  --halo-cw-base-rounded: var(--radius);
  --halo-cw-avatar-rounded: var(--radius-pill);
  --halo-cw-avatar-size: 36px;
  --halo-cw-base-font-size: 15px;
  --halo-cw-base-font-family: var(--font-sans);
  --halo-cw-emoji-picker-rgb-accent: var(--accent-rgb);

  /* ---------- 面板与输入 ---------- */

  --comment-next-bg-color: var(--surface);
  --comment-next-surface-bg-color: var(--surface);
  --comment-next-toolbar-bg-color: var(--surface);
  --comment-next-editor-bg-color: var(--surface);
  --comment-next-footer-bg-color: var(--surface);
  --comment-next-field-bg-color: var(--surface);
  --comment-next-field-focus-bg-color: var(--surface);
  --comment-next-input-bg-color: var(--surface);
  --comment-next-menu-bg-color: var(--surface);
  --comment-next-muted-bg-color: var(--surface-2);
  --comment-next-modal-bg-color: var(--surface);
  --comment-next-modal-input-bg-color: var(--surface-2);
  --comment-next-dialog-font-family: var(--font-sans);
  --comment-next-radius-lg: var(--radius);

  /* 评论框默认 200px 高，在知乎式的正文下面显得空。主框收到 120px，回复框插件
     自己另设了 7.5rem，不受这里影响。 */
  --comment-next-editor-min-height: 120px;
  --comment-next-editor-mobile-min-height: 96px;
  --comment-next-editor-padding: 14px 16px 16px;

  /* 锚点跳转落在顶栏下沿，和主题自己的 scroll-padding-top 同一个数。 */
  --comment-next-anchor-offset: calc(var(--topbar-h) + 16px);

  /* ---------- 线与分隔 ---------- */

  --comment-next-border-color: var(--border);
  --comment-next-border-subtle-color: var(--divider);
  --comment-next-menu-border-color: var(--border);
  --comment-next-field-divider-color: var(--divider);
  --comment-next-divider-color: var(--divider);
  /* 插件默认 dashed。主题里所有分隔都是实线发丝，虚线只出现在它的评论框里
     会像是另一个产品贴进来的。 */
  --comment-next-divider-style: solid;
  --comment-next-reply-guide-color: var(--border-strong);
  --comment-next-avatar-border-color: transparent;

  /* ---------- 文字 ---------- */

  --comment-next-text-color: var(--text);
  --comment-next-comment-content-color: var(--text);
  --comment-next-muted-color: var(--muted);
  --comment-next-placeholder-color: var(--muted);
  --comment-next-icon-color: var(--text-2);

  /* ---------- 交互 ---------- */

  --comment-next-primary-color: var(--accent);
  --comment-next-primary-hover-color: var(--accent-hover);
  --comment-next-primary-soft-bg-color: rgba(var(--accent-rgb), 0.1);
  --comment-next-primary-ring-color: rgba(var(--accent-rgb), 0.14);
  --comment-next-focus-border-color: var(--accent);
  --comment-next-focus-ring-color: rgba(var(--accent-rgb), 0.55);
  --comment-next-focus-shadow-color: rgba(var(--accent-rgb), 0.14);
  --comment-next-link-color: var(--accent);
  --comment-next-link-hover-color: var(--accent-hover);
  --comment-next-link-underline-color: rgba(var(--accent-rgb), 0.35);
  /* 悬停一律是主题的中性色调，不借焦点色——和胶囊、盘子、菜单同一套规矩。 */
  --comment-next-control-hover-bg-color: var(--surface-3-hover);
  --comment-next-menu-item-active-bg-color: var(--surface-3-hover);
  --comment-next-pill-bg-color: var(--surface-3);
  --comment-next-pill-active-bg-color: rgba(var(--accent-rgb), 0.1);
  --comment-next-reaction-hover-bg-color: rgba(var(--accent-rgb), 0.08);
  --comment-next-emote-item-hover-border-color: rgba(var(--accent-rgb), 0.42);
  --comment-next-like-color: var(--accent);

  /* ---------- 表情面板 / 提示 / 骨架 ---------- */

  --comment-next-emote-panel-bg-color: var(--surface);
  --comment-next-emote-head-bg-color: var(--surface-2);
  --comment-next-emote-tabs-bg-color: var(--surface-2);
  --comment-next-tooltip-bg-color: var(--surface);
  --comment-next-tooltip-border-color: var(--border);
  --comment-next-tooltip-text-color: var(--text);
  --comment-next-tooltip-shadow: var(--shadow-pop);
  --comment-next-skeleton-base-color: var(--surface-3);
  --comment-next-skeleton-highlight-color: rgba(255, 255, 255, 0.65);
  --comment-next-inline-code-bg-color: var(--surface-3);
  --comment-next-notice-bg: var(--surface-2);
  --comment-next-notice-border: var(--divider);
  --comment-next-notice-color: var(--muted);
  --comment-next-notice-icon-bg: var(--surface-3);

  /* ---------- 语义色 ---------- */

  --comment-next-error-color: #d33a31;
  --comment-next-error-bg-color: rgba(211, 58, 49, 0.08);
  --comment-next-error-border-color: rgba(211, 58, 49, 0.28);
  --comment-next-danger-color: #d33a31;
  --comment-next-warning-color: #c8811a;
  --comment-next-success-color: #1a8917;
  --comment-next-success-bg-color: rgba(26, 137, 23, 0.08);
  --comment-next-success-border-color: rgba(26, 137, 23, 0.28);
  --comment-next-info-color: var(--accent);
  --comment-next-info-bg-color: rgba(var(--accent-rgb), 0.08);
  --comment-next-info-border-color: rgba(var(--accent-rgb), 0.28);

  /* ---------- 徽章 ---------- */

  /* 管理员徽章跟焦点色走，站长在 Console 换色时它一起换；首评保持琥珀、自定义
     保持紫，这两个是身份标记而不是主题色，跟着强调色跑反而分不出来。 */
  --comment-next-badge-admin-bg-color: rgba(var(--accent-rgb), 0.1);
  --comment-next-badge-admin-border-color: rgba(var(--accent-rgb), 0.28);
  --comment-next-badge-admin-color: var(--accent);
  --comment-next-badge-level-bg-color: var(--surface-3);
  --comment-next-badge-level-border-color: var(--border-strong);
  --comment-next-badge-level-color: var(--text-2);

  /* ---------- AI 面板 ---------- */

  /* 插件给 AI 面板铺了一层写死的蓝色渐变。主题的焦点色是可配置的，蓝色渐变在
     绿色或橙色主题下会变成外来物，所以全部换成焦点色的透明叠色。 */
  --comment-next-ai-color: var(--accent);
  --comment-next-ai-bg-color: rgba(var(--accent-rgb), 0.1);
  --comment-next-ai-border-color: rgba(var(--accent-rgb), 0.28);
  --comment-next-ai-mark-bg-color: rgba(var(--accent-rgb), 0.18);
  --comment-next-ai-control-hover-bg-color: rgba(var(--accent-rgb), 0.12);
}

/* 深色只需要改「写死的字面量」。上面凡是引用主题 token 的值，token 自己会在
   :root.dark 里换档，这里再抄一遍只会多一处要同步维护的地方。 */
html.dark[data-comment-next="on"] comment-widget,
html.dark[data-comment-next="on"] comment-next {
  --comment-next-skeleton-highlight-color: rgba(255, 255, 255, 0.08);
  --comment-next-focus-shadow-color: rgba(var(--accent-rgb), 0.22);
  --comment-next-error-color: #f07068;
  --comment-next-error-bg-color: rgba(240, 112, 104, 0.12);
  --comment-next-error-border-color: rgba(240, 112, 104, 0.32);
  --comment-next-danger-color: #f07068;
  --comment-next-warning-color: #e0a44a;
  --comment-next-success-color: #57bb54;
  --comment-next-success-bg-color: rgba(87, 187, 84, 0.12);
  --comment-next-success-border-color: rgba(87, 187, 84, 0.32);
  --comment-next-badge-first-bg-color: #3f3413;
  --comment-next-badge-first-border-color: #746025;
  --comment-next-badge-first-color: #f6d36a;
}

/* 弹层遮罩逐档照抄搜索 / 分享 / 目录：不开玻璃时两种配色都是 .42，
   开玻璃后浅色 .24、深色 .36。同一块材质不该在两个面板上是两个浓度。 */
html[data-comment-next="on"] comment-widget,
html[data-comment-next="on"] comment-next {
  --comment-next-modal-backdrop-color: rgba(18, 18, 18, 0.42);
}

html[data-glass="on"][data-comment-next="on"] comment-widget,
html[data-glass="on"][data-comment-next="on"] comment-next {
  --comment-next-modal-backdrop-color: rgba(18, 18, 18, 0.24);
}

html.dark[data-glass="on"][data-comment-next="on"] comment-widget,
html.dark[data-glass="on"][data-comment-next="on"] comment-next {
  --comment-next-modal-backdrop-color: rgba(0, 0, 0, 0.36);
}

@media (max-width: 768px) {
  html[data-comment-next="on"] comment-widget,
  html[data-comment-next="on"] comment-next {
    --halo-cw-avatar-size: 32px;
    --comment-next-editor-padding: 12px 14px 14px;
  }
}