/*
 * twikoo 评论区的主题适配（朱墨留白 / VermilionVoid）
 *
 * 对应 twikoo 2.0.15（1.7.20 → 2.x 升级时改的：2.x 用 .tk-* 换掉了 Element UI 的 .el-*）。
 *
 * 基础样式有两个来源：
 *   1. Comments.astro 里的静态 <link>（切页后依然在，是主要来源）；
 *   2. twikoo.min.js 加载时注入 <head> 的一份（ClientRouter 切页会清掉它，脚本只执行一次
 *      所以不会重注入 —— 这正是必须用静态 link 的原因）。
 * 两份内容相同、都是同一版本的官方 CSS。这里统一加 #twikoo 前缀（ID 特异性 1,x,0），
 * 高于官方那套 `.twikoo .tk-*`（0,x,0），因此无论注入顺序如何都能覆盖。
 *
 * 颜色全部引用主题 CSS 变量，因此会自动跟随亮色/暗色，
 * 以及 src/data/site.ts 里的 themeHue 主题色。
 *
 * ⚠️ 升级 twikoo 时先对一遍类名，2.x 就是在这里踩的：
 *    grep -oE '\.tk-[a-z_-]+' public/assets/css/twikoo.css | sort -u
 */

/* ---------- 容器 ---------- */
#twikoo {
  color: var(--foreground);
  font-size: 0.9375rem;
  line-height: 1.75;
}

#twikoo .tk-comments-title,
#twikoo .tk-comments-title h4 {
  color: var(--foreground);
}

/* 评论条数等次要文字 */
#twikoo .tk-comments-count,
#twikoo .tk-comments-count span {
  color: var(--muted-foreground);
}

/* ---------- 单条评论 ---------- */
#twikoo .tk-comment {
  border-radius: var(--radius);
  padding: 0.75rem 0;
}

#twikoo .tk-comment .tk-content {
  color: var(--content-secondary);
  line-height: 1.8;
}

#twikoo .tk-comment .tk-content a,
#twikoo .tk-content a {
  color: var(--primary);
  text-decoration: none;
}

#twikoo .tk-comment .tk-content a:hover {
  text-decoration: underline;
}

/* 昵称 */
#twikoo .tk-nick,
#twikoo .tk-nick-link {
  color: var(--foreground);
  font-weight: 500;
}

/* 时间、设备等元信息 */
#twikoo .tk-time,
#twikoo .tk-meta,
#twikoo .tk-tag {
  color: var(--muted-foreground);
}

/* 头像圆角跟随主题 */
#twikoo .tk-avatar,
#twikoo .tk-avatar-img {
  border-radius: 9999px;
}

/* 展开/回复等操作 */
#twikoo .tk-action-link,
#twikoo .tk-action-icon {
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

#twikoo .tk-action-link:hover,
#twikoo .tk-action-icon:hover,
#twikoo .tk-action-icon.tk-is-active {
  color: var(--primary);
}

/* 子评论缩进区域 */
#twikoo .tk-replies {
  border-left: 2px solid var(--border);
  margin-left: 0.5rem;
  padding-left: 1rem;
}

/* 分隔线 */
#twikoo hr,
#twikoo .tk-comment + .tk-comment {
  border-color: var(--border);
}

/* ---------- 输入区 ---------- */
#twikoo .tk-submit {
  color: var(--foreground);
}

/* 2.x：单行输入和评论框统一走 .tk-input__inner（旧的 .el-input__inner 已不存在） */
#twikoo .tk-input__inner,
#twikoo .tk-textarea__inner {
  background-color: var(--card);
  border-color: var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  box-shadow: none;
}

#twikoo .tk-input__inner::placeholder,
#twikoo .tk-textarea__inner::placeholder {
  color: var(--muted-foreground);
}

#twikoo .tk-input__inner:focus,
#twikoo .tk-textarea__inner:focus {
  border-color: var(--primary);
}

/* 发送按钮 */
#twikoo .tk-button--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
}

#twikoo .tk-button--primary:not(.is-disabled):hover,
#twikoo .tk-button--primary:not(.is-disabled):focus {
  background-color: var(--primary);
  border-color: var(--primary);
  opacity: 0.88;
}

#twikoo .tk-button {
  border-radius: var(--radius);
}

/*
 * 登录/设置浮层（.tk-admin）——**不要套用浅色主题的颜色**。
 *
 * 2.x 里这块是常驻深色的全屏浮层：.tk-admin 自己就是 color:#fff +
 * background-color:#000000d9，登录提示、密码框、设置项全在上面。
 * 而本站的 --muted-foreground 在亮色模式下是中灰（L≈0.5），压在这层近黑底上
 * 基本看不见 —— 2026-10 就踩过：设置面板里的提示文字在亮色模式下糊成一片。
 *
 * 所以这里反过来做：只把它们钉回官方的白字/透明底，不参与主题换色。
 */
#twikoo .tk-admin,
#twikoo .tk-login,
#twikoo .tk-regist,
#twikoo .tk-panel,
#twikoo .tk-password,
#twikoo .tk-login-msg,
#twikoo .tk-login-msg a {
  color: #fff;
}

#twikoo .tk-login-msg a:hover {
  color: var(--primary);
}

/* 深色模式下 .dark #twikoo .tk-input__inner 会和下面这条同特异性(1,2,0)，
   所以额外加一条 (1,3,0) 的变体，保证浮层里的输入框不会被主题刷成浅色。 */
#twikoo .tk-admin .tk-input__inner,
.dark #twikoo .tk-admin .tk-input__inner {
  background-color: transparent;
  border-color: #9093994f;
  color: #fff;
}

#twikoo .tk-admin .tk-input__inner::placeholder,
.dark #twikoo .tk-admin .tk-input__inner::placeholder {
  color: #ffffff80;
}

/*
 * .tk-admin-warn 是浮层顶部那条黄底提示（官方 #6b5900 on #fff7d0），
 * 底是浅黄、跟站点主题无关，所以也不要用 --muted-foreground 去刷它。
 */
#twikoo .tk-admin-warn {
  color: #6b5900;
}

/* ---------- 表情面板 ----------
 * 注意：1.x 时代表情面板是 .tk-panel，2.x 的 .tk-panel 已经变成上面的登录面板了，
 * 表情面板改由 OwO 渲染（.OwO-body）。别再给 .tk-panel 加底色，会把登录面板刷成浅色。
 */
#twikoo .OwO-body {
  background-color: var(--card);
  border-color: var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
}

#twikoo .OwO-body .OwO-bar {
  border-top-color: var(--border);
}

/* twikoo 自带的暗色适配只认 [data-theme=dark] / .night / .darkmode，
   本站用的是 <html class="dark">，所以表情面板要自己补一条，否则暗色模式下仍是白底。 */
.dark #twikoo .OwO-body {
  background-color: var(--card);
  color: var(--foreground);
}

/* ---------- 分页 ---------- */
/* 2.x：.tk-pagination-pager 取代了 Element UI 的 .el-pager li；
   当前页的修饰符是 BEM 风格的 .__current（不是 .is-active），而且官方给它配了实色底，
   所以底色和文字色要一起改，只改 color 会出现「红字压蓝底」。 */
#twikoo .tk-pagination-pager {
  background-color: transparent;
  color: var(--muted-foreground);
}

#twikoo .tk-pagination-pager.__current {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* ---------- 暗色模式微调 ---------- */
.dark #twikoo .tk-comment .tk-content {
  color: var(--foreground);
}

.dark #twikoo .tk-input__inner,
.dark #twikoo .tk-textarea__inner {
  background-color: var(--surface-subtle);
  color: var(--foreground);
}