/**
 * Waline Custom Styles
 * 适配网站主题风格 - 紫色渐变主题
 */

/* ========== 基础变量覆盖 ========== */
:root {
  /* 主题色 - 使用网站的紫色渐变accent */
  --waline-theme-color: #8B5CF6;
  --waline-active-color: #EC4899;

  /* 背景色 */
  --waline-bg-color: oklch(1 0 0);
  --waline-bg-color-light: oklch(0.97 0 0);
  --waline-bg-color-hover: oklch(0.93 0 0);

  /* 文字颜色 */
  --waline-color: oklch(0.4 0 0);
  --waline-light-grey: oklch(0.65 0 0);
  --waline-dark-grey: oklch(0.3 0 0);

  /* 边框颜色 */
  --waline-border-color: oklch(0.87 0 0);

  /* 其他颜色 */
  --waline-badge-color: #8B5CF6;
  --waline-info-bg-color: oklch(0.97 0 0);
  --waline-info-color: oklch(0.55 0 0);
  --waline-bq-color: oklch(0.93 0 0);

  /* 代码块背景 */
  --waline-code-bg-color: oklch(0.25 0 0);

  /* 圆角 - 与网站一致 */
  --waline-border-radius: var(--radius, 0.75rem);

  /* 阴影 */
  --waline-box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));

  /* 头像圆角 - 使用网站风格 */
  --waline-avatar-radius: var(--radius-md, 0.5rem);

  /* 按钮样式 */
  --waline-btn-radius: var(--radius, 0.75rem);
}

/* ========== 暗黑模式 ========== */
.dark {
  --waline-bg-color: oklch(0.205 0 0);
  --waline-bg-color-light: oklch(0.269 0 0);
  --waline-bg-color-hover: oklch(0.32 0 0);

  --waline-color: oklch(0.9 0 0);
  --waline-light-grey: oklch(0.6 0 0);
  --waline-dark-grey: oklch(0.75 0 0);

  --waline-border-color: oklch(1 0 0 / 15%);

  --waline-info-bg-color: oklch(0.269 0 0);
  --waline-info-color: oklch(0.6 0 0);
  --waline-bq-color: oklch(0.269 0 0);

  --waline-code-bg-color: oklch(0.12 0 0);

  --waline-box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
}

/* ========== 评论面板样式 ========== */
.wl-panel {
  border-radius: var(--waline-border-radius) !important;
  border: 1px solid var(--waline-border-color) !important;
  box-shadow: var(--waline-box-shadow) !important;
  background: var(--waline-bg-color) !important;
}

/* ========== 输入框样式 ========== */
.wl-header {
  border-bottom-color: var(--waline-border-color) !important;
}

.wl-header label {
  color: var(--waline-color) !important;
}

.wl-header input {
  background: transparent !important;
}

.wl-editor {
  background: var(--waline-bg-color-light) !important;
  border-radius: var(--waline-btn-radius) !important;
}

.wl-editor:focus {
  background: var(--waline-bg-color-hover) !important;
}

/* ========== 按钮样式 ========== */
.wl-btn {
  border-radius: var(--waline-btn-radius) !important;
  font-size: 0.875em !important;
  transition: all 0.2s ease !important;
}

.wl-btn:hover {
  border-color: var(--waline-theme-color) !important;
  color: var(--waline-theme-color) !important;
  background: var(--waline-bg-color-light) !important;
}

.wl-btn.primary {
  background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
  border: none !important;
  color: white !important;
  font-weight: 500 !important;
}

.wl-btn.primary:hover {
  background: linear-gradient(135deg, #7C3AED, #DB2777) !important;
  border: none !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* ========== 头部标签页 ========== */
.wl-header label {
  transition: all 0.2s ease !important;
}

.wl-header label:hover {
  background: var(--waline-bg-color-light) !important;
}

/* ========== 评论卡片样式 ========== */
.wl-card {
  border-bottom-color: var(--waline-border-color) !important;
}

.wl-card:first-child {
  margin-inline-start: 0 !important;
}

.wl-nick {
  color: var(--waline-color) !important;
}

.wl-time {
  color: var(--waline-info-color) !important;
}

.wl-content {
  color: var(--waline-color) !important;
  line-height: 1.8 !important;
}

/* ========== 徽章样式 ========== */
.wl-badge {
  background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
  border: none !important;
  color: white !important;
  font-size: 0.7em !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

/* ========== 操作按钮 ========== */
.wl-action {
  color: var(--waline-light-grey) !important;
  transition: all 0.2s ease !important;
}

.wl-action:hover {
  color: var(--waline-theme-color) !important;
  transform: scale(1.1);
}

.wl-action.active {
  color: var(--waline-active-color) !important;
}

/* ========== 评论操作 ========== */
.wl-delete:hover,
.wl-like:hover,
.wl-reply:hover,
.wl-edit:hover {
  color: var(--waline-theme-color) !important;
}

.wl-delete.active,
.wl-like.active,
.wl-reply.active,
.wl-edit.active {
  color: var(--waline-active-color) !important;
}

/* ========== 排序按钮 ========== */
.wl-sort li {
  color: var(--waline-info-color) !important;
  transition: all 0.2s ease !important;
}

.wl-sort li:hover {
  color: var(--waline-theme-color) !important;
}

.wl-sort li.active {
  color: var(--waline-theme-color) !important;
  font-weight: 600;
}

/* ========== 表情弹窗 ========== */
.wl-emoji-popup {
  border-radius: var(--waline-border-radius) !important;
  box-shadow: var(--waline-box-shadow) !important;
  background: var(--waline-bg-color) !important;
  border: 1px solid var(--waline-border-color) !important;
}

.wl-emoji-popup .wl-tab.active {
  background: var(--waline-bg-color-light) !important;
}

.wl-emoji-popup button:hover {
  background: var(--waline-bg-color-hover) !important;
}

/* ========== GIF 弹窗 ========== */
.wl-gif-popup {
  border-radius: var(--waline-border-radius) !important;
  box-shadow: var(--waline-box-shadow) !important;
  background: var(--waline-bg-color) !important;
  border: 1px solid var(--waline-border-color) !important;
}

/* ========== 评论统计 ========== */
.wl-count {
  color: var(--waline-theme-color) !important;
  font-size: 1.5em !important;
  font-weight: 700 !important;
}

/* ========== 空状态 ========== */
.wl-empty {
  color: var(--waline-info-color) !important;
}

/* ========== 头像样式 ========== */
.wl-avatar {
  border-radius: var(--waline-avatar-radius) !important;
  border: 2px solid var(--waline-border-color) !important;
  box-shadow: var(--waline-box-shadow) !important;
}

/* ========== 回复引用框 ========== */
.wl-quote {
  border-left-color: var(--waline-border-color) !important;
}

/* ========== 预览区域 ========== */
.wl-preview .wl-content {
  background: var(--waline-bg-color-light) !important;
  border-radius: var(--waline-btn-radius) !important;
}

/* ========== 反应区域 ========== */
.wl-reaction-title {
  color: var(--waline-color) !important;
}

.wl-reaction-item.active .wl-reaction-text {
  color: var(--waline-theme-color) !important;
}

.wl-reaction-votes {
  border-color: var(--waline-theme-color) !important;
  color: var(--waline-theme-color) !important;
}

.wl-reaction-item.active .wl-reaction-votes {
  background: var(--waline-theme-color) !important;
  color: white !important;
}

/* ========== 加载动画 ========== */
.wl-loading svg {
  color: var(--waline-theme-color) !important;
}

/* ========== 滚动条样式 ========== */
[data-waline] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-waline] ::-webkit-scrollbar-track-piece {
  background: var(--waline-bg-color-light);
  border-radius: 3px;
}

[data-waline] ::-webkit-scrollbar-thumb {
  background: var(--waline-theme-color);
  border-radius: 3px;
}

[data-waline] ::-webkit-scrollbar-thumb:hover {
  background: var(--waline-active-color);
}

/* ========== 链接样式 ========== */
[data-waline] a {
  color: var(--waline-theme-color) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

[data-waline] a:hover {
  color: var(--waline-active-color) !important;
}

/* ========== 代码块样式 ========== */
.wl-content pre,
.wl-content pre[class*="language-"] {
  background: var(--waline-code-bg-color) !important;
  border-radius: var(--waline-btn-radius) !important;
}

/* ========== 移动端适配 ========== */
@media (max-width: 640px) {
  .wl-panel {
    border-radius: var(--radius-md, 0.5rem) !important;
  }

  .wl-btn {
    font-size: 0.8em !important;
    padding: 0.4em 0.8em !important;
  }

  .wl-editor {
    min-height: 6em !important;
  }
}