/*
 * Waline 主题覆盖样式
 * 在 waline.css 之后加载，用于覆盖默认样式并跟随站点主题色。
 * Firefly 主题专用：https://github.com/CuteLeaf/Firefly
 */

/* ============================================================
 * 一、核心变量：映射到站点主题变量
 * ============================================================ */
[data-waline] {
  --waline-theme-color: var(--primary);
  --waline-active-color: var(--primary);

  /* 文字颜色 */
  --waline-color: color-mix(in oklch, var(--card-bg) 12%, #000 88%);
  --waline-dark-grey: color-mix(in oklch, var(--card-bg) 25%, #444 75%);
  --waline-light-grey: color-mix(in oklch, var(--card-bg) 45%, #999 55%);

  /* 背景色 */
  --waline-bg-color: var(--card-bg);
  --waline-bg-color-light: color-mix(in oklch, var(--card-bg) 92%, var(--primary) 8%);
  --waline-bg-color-hover: color-mix(in oklch, var(--primary) 12%, transparent);

  /* 边框 */
  --waline-border: 1px solid var(--line-divider);
  --waline-border-color: var(--line-divider);

  /* 阴影 */
  --waline-box-shadow: none;

  /* 代码与引用块 */
  --waline-code-bg-color: color-mix(in oklch, var(--card-bg) 88%, #000 12%);
  --waline-bq-color: var(--primary);

  /* 徽章（博主标签） */
  --waline-badge-color: var(--primary);
  --waline-badge-font-size: 0.7em;

  /* 信息板块（设备/地区标签） */
  --waline-info-bg-color: color-mix(in oklch, var(--primary) 10%, transparent);
  --waline-info-color: color-mix(in oklch, var(--card-bg) 35%, #666 65%);
  --waline-info-font-size: 0.7em;

  /* 头像 */
  --waline-avatar-radius: 50%;

  /* 白色（按钮文字） */
  --waline-white: #fff;

  /* 排行榜 */
  --waline-rank-gold-bg-color: var(--primary);
  --waline-rank-silver-bg-color: color-mix(in oklch, var(--primary) 75%, #fff 25%);
  --waline-rank-copper-bg-color: color-mix(in oklch, var(--primary) 55%, #fff 45%);
}

/* ============================================================
 * 二、暗色模式：提高对比度
 * ============================================================ */
html.dark [data-waline] {
  --waline-color: color-mix(in oklch, var(--card-bg) 8%, #fff 92%);
  --waline-dark-grey: color-mix(in oklch, var(--card-bg) 15%, #ddd 85%);
  --waline-light-grey: color-mix(in oklch, var(--card-bg) 35%, #aaa 65%);
  --waline-info-color: color-mix(in oklch, var(--card-bg) 40%, #b0b0b0 60%);
  --waline-in-editor-btn: #fff;
}

/* ============================================================
 * 三、编辑器 / 输入框
 * ============================================================ */

/* 编辑器整体背景 */
[data-waline] .wl-panel {
  background-color: var(--waline-bg-color);
  border-color: var(--waline-border-color);
}

/* 头部输入框（昵称/邮箱/链接） */
[data-waline] .wl-header {
  border-bottom: 2px dashed var(--waline-border-color);
}

[data-waline] .wl-input {
  color: var(--waline-color);
}

[data-waline] .wl-input:focus {
  background: var(--waline-bg-color-light);
}

/* 编辑区域 */
[data-waline] .wl-editor {
  color: var(--waline-color);
}

[data-waline] .wl-editor:focus {
  background: var(--waline-bg-color-light);
}

/* 预览区域 */
[data-waline] .wl-preview {
  background-color: var(--waline-bg-color);
}

/* ============================================================
 * 四、按钮
 * ============================================================ */
[data-waline] .wl-btn {
  color: var(--waline-dark-grey);
  border-color: var(--waline-border-color);
  background: var(--waline-bg-color);
}

[data-waline] .wl-btn:hover {
  color: var(--waline-theme-color);
  border-color: var(--waline-theme-color);
}

[data-waline] .wl-btn.primary {
  color: #fff;
  background: var(--waline-theme-color);
  border-color: var(--waline-theme-color);
}

[data-waline] .wl-btn.primary:hover {
  color: #fff;
  background: color-mix(in oklch, var(--waline-theme-color) 88%, #fff 12%);
  border-color: color-mix(in oklch, var(--waline-theme-color) 88%, #fff 12%);
}

/* ============================================================
 * 五、评论卡片
 * ============================================================ */

/* 卡片分割线 */
[data-waline] .wl-card {
  border-bottom-color: var(--waline-border-color);
}

/* 昵称 */
[data-waline] .wl-card .wl-nick,
[data-waline] .wl-card span.wl-nick {
  color: var(--waline-color);
  font-weight: 600;
}

/* 时间 */
[data-waline] .wl-card .wl-time {
  color: var(--waline-light-grey);
  font-size: 0.75em;
}

/* 设备/地区信息标签 */
[data-waline] .wl-card .wl-meta > span {
  background: var(--waline-info-bg-color);
  color: var(--waline-info-color);
  font-size: 0.72em;
}

/* 徽章（博主/已注册） */
[data-waline] .wl-card .wl-badge {
  color: var(--waline-badge-color);
  border-color: var(--waline-badge-color);
  background: color-mix(in oklch, var(--waline-badge-color) 10%, transparent);
  border-radius: 4px;
}

/* 评论内容文字 */
[data-waline] .wl-card .wl-content {
  color: var(--waline-color);
}

/* 回复箭头和符号 */
[data-waline] .wl-card .wl-reply-to {
  color: var(--waline-light-grey);
}

/* ============================================================
 * 六、操作按钮（回复/编辑/删除/点赞）
 * ============================================================ */
[data-waline] .wl-action,
[data-waline] .wl-delete,
[data-waline] .wl-like,
[data-waline] .wl-reply,
[data-waline] .wl-edit,
[data-waline] .wl-rss {
  color: var(--waline-light-grey);
}

[data-waline] .wl-action:hover,
[data-waline] .wl-delete:hover,
[data-waline] .wl-like:hover,
[data-waline] .wl-reply:hover,
[data-waline] .wl-edit:hover,
[data-waline] .wl-rss:hover {
  color: var(--waline-theme-color);
}

/* ============================================================
 * 七、登录信息
 * ============================================================ */
[data-waline] .wl-login-nick {
  color: var(--waline-color);
}

[data-waline] .wl-login-nick a {
  color: var(--waline-theme-color);
}

[data-waline] .wl-logout-btn {
  color: var(--waline-light-grey);
}

/* ============================================================
 * 八、表情/GIF/下拉弹层
 * ============================================================ */
[data-waline] .wl-emoji-popup,
[data-waline] .wl-gif-popup,
[data-waline] .wl-dropdown {
  background: var(--waline-bg-color);
  border: 1px solid var(--waline-border-color);
}

[data-waline] .wl-emoji-popup .wl-tab.active,
[data-waline] .wl-gif-popup .wl-tab.active {
  background: var(--waline-bg-color-light);
  color: var(--waline-theme-color);
}

/* ============================================================
 * 九、排序 / 数量
 * ============================================================ */
[data-waline] .wl-sort li {
  color: var(--waline-light-grey);
}

[data-waline] .wl-sort li.active {
  color: var(--waline-theme-color);
}

[data-waline] .wl-count {
  color: var(--waline-color);
}

/* ============================================================
 * 十、全屏透明壁纸模式（跟随 twikoo 风格）
 * ============================================================ */
body.wallpaper-transparent [data-waline] {
  --waline-bg-color: var(--card-bg-transparent, rgba(255, 255, 255, 0.65));
  --waline-bg-color-light: color-mix(in oklch, var(--card-bg-transparent, rgba(255,255,255,0.65)) 80%, var(--primary) 20%);
  --waline-border-color: color-mix(in oklch, var(--line-divider) 60%, transparent 40%);
  --waline-color: color-mix(in oklch, var(--card-bg) 8%, #000 92%);
  --waline-info-bg-color: color-mix(in oklch, var(--primary) 15%, transparent);
  --waline-info-color: color-mix(in oklch, var(--card-bg) 20%, #555 80%);
}

/* 全屏透明 + 暗色 */
html.dark body.wallpaper-transparent [data-waline] {
  --waline-bg-color: var(--card-bg-transparent, rgba(23, 23, 23, 0.6));
  --waline-color: color-mix(in oklch, var(--card-bg) 8%, #fff 92%);
  --waline-info-color: color-mix(in oklch, var(--card-bg) 35%, #aaa 65%);
}

/* 全屏透明：毛玻璃输入框与弹层 */
body.wallpaper-transparent [data-waline] .wl-panel,
body.wallpaper-transparent [data-waline] .wl-editor,
body.wallpaper-transparent [data-waline] .wl-emoji-popup,
body.wallpaper-transparent [data-waline] .wl-gif-popup,
body.wallpaper-transparent [data-waline] .wl-dropdown {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}