/*
 * twikoo 评论区的主题适配（朱墨留白 / VermilionVoid）
 *
 * twikoo 的样式是脚本运行时注入到 <head> 的，会排在本文件之后，
 * 所以这里的选择器统一加 #twikoo 前缀提高优先级，保证能覆盖它。
 *
 * 颜色全部引用主题 CSS 变量，因此会自动跟随亮色/暗色，
 * 以及 src/data/site.ts 里的 themeHue 主题色。
 */

/* ---------- 容器 ---------- */
#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);
}

#twikoo .tk-input .el-textarea__inner,
#twikoo .el-textarea__inner,
#twikoo .el-input__inner {
  background-color: var(--card);
  border-color: var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  box-shadow: none;
}

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

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

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

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

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

/* 登录方式 / 提示文字 */
#twikoo .tk-login-msg,
#twikoo .tk-login-msg a,
#twikoo .tk-admin-warn {
  color: var(--muted-foreground);
}

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

/* 表情面板 */
#twikoo .tk-panel {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---------- 分页 ---------- */
#twikoo .tk-pagination .el-pager li,
#twikoo .tk-pagination button {
  background-color: transparent;
  color: var(--muted-foreground);
}

#twikoo .tk-pagination .el-pager li.is-active {
  color: var(--primary);
}

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

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