/* dwxComment 评论组件样式 v0.3.0
 *
 * 视觉风格：与后台管理统一，低饱和紫灰、2px 小圆角、玻璃态表面。
 * 所有颜色、圆角、间距均通过 CSS 变量声明，用户覆盖 .lc-wrap 内的变量即可自定义。
 */
.lc-wrap {
  --lc-bg: transparent;
  --lc-surface: rgba(255, 255, 255, 0.65);
  --lc-surface-strong: rgba(255, 255, 255, 0.85);
  --lc-text: #24262b;
  --lc-text-2: rgba(36, 38, 43, 0.62);
  --lc-border: rgba(36, 38, 43, 0.1);
  --lc-border-hover: rgba(36, 38, 43, 0.22);
  --lc-accent: #70687a;
  --lc-accent-text: #fff;
  --lc-hover: rgba(36, 38, 43, 0.04);
  --lc-danger: rgba(220, 38, 38, 0.85);
  --lc-admin-bg: rgba(217, 119, 6, 0.14);
  --lc-admin-text: #92400e;
  --lc-admin-border: rgba(217, 119, 6, 0.4);
  --lc-pending-bg: rgba(217, 119, 6, 0.14);
  --lc-pending-border: rgba(217, 119, 6, 0.45);
  --lc-radius: 2px;
  --lc-gap: 16px;

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 300;
  color: var(--lc-text);
  background: var(--lc-bg);
  font-size: 14px;
  line-height: 1.7;
  padding-top: var(--lc-gap);
  max-width: 100%;
}

/* 暗黑模式：容器 data-theme 覆盖系统偏好 */
@media (prefers-color-scheme: dark) {
  .lc-wrap:not([data-theme="light"]) {
    --lc-bg: transparent;
    --lc-surface: rgba(255, 255, 255, 0.04);
    --lc-surface-strong: rgba(255, 255, 255, 0.07);
    --lc-text: rgb(255, 252, 225);
    --lc-text-2: rgba(196, 184, 206, 0.65);
    --lc-border: rgba(255, 255, 255, 0.08);
    --lc-border-hover: rgba(255, 255, 255, 0.18);
    --lc-accent: #c4b8ce;
    --lc-accent-text: #030305;
    --lc-hover: rgba(255, 255, 255, 0.04);
    --lc-danger: #fca5a5;
    --lc-admin-bg: rgba(251, 191, 36, 0.14);
    --lc-admin-text: #fbbf24;
    --lc-admin-border: rgba(251, 191, 36, 0.45);
    --lc-pending-bg: rgba(251, 191, 36, 0.16);
    --lc-pending-border: rgba(251, 191, 36, 0.5);
  }
}
.lc-wrap[data-theme="light"] {
  --lc-bg: transparent;
  --lc-surface: rgba(255, 255, 255, 0.65);
  --lc-surface-strong: rgba(255, 255, 255, 0.85);
  --lc-text: #24262b;
  --lc-text-2: rgba(36, 38, 43, 0.62);
  --lc-border: rgba(36, 38, 43, 0.1);
  --lc-border-hover: rgba(36, 38, 43, 0.22);
  --lc-accent: #70687a;
  --lc-accent-text: #fff;
  --lc-hover: rgba(36, 38, 43, 0.04);
  --lc-danger: rgba(220, 38, 38, 0.85);
}
.lc-wrap[data-theme="dark"] {
  --lc-bg: transparent;
  --lc-surface: rgba(255, 255, 255, 0.04);
  --lc-surface-strong: rgba(255, 255, 255, 0.07);
  --lc-text: rgb(255, 252, 225);
  --lc-text-2: rgba(196, 184, 206, 0.65);
  --lc-border: rgba(255, 255, 255, 0.08);
  --lc-border-hover: rgba(255, 255, 255, 0.18);
  --lc-accent: #c4b8ce;
  --lc-accent-text: #030305;
  --lc-hover: rgba(255, 255, 255, 0.04);
  --lc-danger: #fca5a5;
  --lc-admin-bg: rgba(251, 191, 36, 0.14);
  --lc-admin-text: #fbbf24;
  --lc-admin-border: rgba(251, 191, 36, 0.45);
  --lc-pending-bg: rgba(251, 191, 36, 0.16);
  --lc-pending-border: rgba(251, 191, 36, 0.5);
}

/* 头部 */
.lc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.lc-title { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -0.02em; }
.lc-count { color: var(--lc-text-2); font-size: 13px; }
.lc-spacer { flex: 1; }
.lc-sort { position: relative; display: inline-block; }
.lc-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  color: var(--lc-text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.lc-sort-btn:hover, .lc-sort-btn:focus { border-color: var(--lc-border-hover); background-color: var(--lc-surface-strong); }
.lc-sort-btn:focus-visible { box-shadow: 0 0 0 2px var(--lc-border-hover); }
.lc-sort-arrow { color: var(--lc-text-2); transition: transform .15s ease; }
.lc-sort.lc-open .lc-sort-arrow { transform: rotate(180deg); }
.lc-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--lc-surface-strong);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lc-sort-menu[hidden] { display: none; }
.lc-sort-menu li {
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lc-text);
  border-radius: var(--lc-radius);
  cursor: pointer;
}
.lc-sort-menu li:hover { background: var(--lc-hover); }
.lc-sort-menu li:focus-visible { background: var(--lc-hover); outline: none; }
.lc-sort-menu li[aria-selected="true"] { color: var(--lc-accent); }

.lc-empty { color: var(--lc-text-2); text-align: center; padding: 32px 0; font-size: 13px; }
.lc-error { color: var(--lc-danger); padding: 12px 0; font-size: 13px; }

/* 评论项：卡片式 */
.lc-comment {
  display: flex;
  gap: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  box-shadow: 0 1px 2px rgba(36,38,43,.04), 0 2px 8px rgba(36,38,43,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* 待审核评论（提交后前端假性通过）：背景加深标识，审核通过后刷新即恢复正常样式 */
.lc-comment.lc-pending {
  background: var(--lc-pending-bg);
  border-color: var(--lc-pending-border);
}
/* 锚点跳转高亮：邮件链接定位到评论后短暂闪烁提示 */
@keyframes lc-highlight-flash {
  0% { background-color: rgba(217, 119, 6, 0.22); border-color: rgba(217, 119, 6, 0.5); }
  100% { background-color: var(--lc-surface); border-color: var(--lc-border); }
}
.lc-comment.lc-highlight {
  animation: lc-highlight-flash 2s ease-out;
}
.lc-avatar { flex: 0 0 auto; width: 44px; height: 44px; }
.lc-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
}
.lc-avatar-letter {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  background: var(--lc-surface-strong);
  border: 1px solid var(--lc-border);
}
.lc-body { flex: 1; min-width: 0; }

.lc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-nick { color: var(--lc-text); font-weight: 500; font-size: 14px; text-decoration: none; }
a.lc-nick:hover { color: var(--lc-accent); }
.lc-at { color: var(--lc-text-2); font-weight: 400; }
.lc-pin {
  background: var(--lc-accent); color: var(--lc-accent-text);
  font-size: 11px; font-weight: 500;
  padding: 2px 6px; border-radius: var(--lc-radius);
  letter-spacing: .04em;
}
.lc-admin {
  background: var(--lc-admin-bg); color: var(--lc-admin-text);
  border: 1px solid var(--lc-admin-border);
  font-size: 11px; font-weight: 500;
  padding: 1px 6px; border-radius: var(--lc-radius);
  letter-spacing: .04em;
}
.lc-time { color: var(--lc-text-2); font-size: 12px; }

.lc-content { margin: 10px 0; word-break: break-word; font-size: 14px; line-height: 1.7; }
.lc-img {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--lc-radius);
  margin: 8px 0;
  display: block;
}

.lc-actions { display: flex; gap: 8px; margin-top: 8px; }
.lc-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
  border: 1px solid var(--lc-border); background: var(--lc-surface);
  color: var(--lc-text-2);
  font-size: 12px; font-weight: 400;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--lc-radius);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.lc-actions button:hover { color: var(--lc-accent); background: var(--lc-surface-strong); border-color: var(--lc-border-hover); }

.lc-children { margin-top: 12px; padding-left: 16px; border-left: 1px solid var(--lc-border); }
.lc-collapse-btn {
  border: 1px solid var(--lc-border); background: var(--lc-surface); color: var(--lc-text-2);
  font-size: 12px; border-radius: var(--lc-radius); padding: 4px 10px; margin-top: 6px; cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.lc-collapse-btn:hover { color: var(--lc-accent); background: var(--lc-surface-strong); border-color: var(--lc-border-hover); }

/* 分页区域：加载更多按钮 / 页码分页器 */
.lc-pager { text-align: center; padding: 8px 0; }

/* 页码分页栏：每页条数选择 + 页码导航 + 跳至指定页 */
.lc-pager-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 每页条数下拉：复用排序下拉组件样式；菜单向下弹出，与排序下拉一致 */
.lc-pager-size-wrap .lc-sort-btn { height: 32px; padding: 0 10px; }

.lc-pager-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.lc-pager-pages { display: flex; align-items: center; gap: 4px; }

/* 分页按钮：低饱和紫灰、2px 圆角、数字等宽对齐 */
.lc-pager-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--lc-text-2);
  background: var(--lc-surface-strong);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.lc-pager-btn:hover:not(:disabled):not(.active) {
  color: var(--lc-accent);
  background: var(--lc-hover);
  border-color: var(--lc-border-hover);
}
.lc-pager-btn.active {
  color: var(--lc-accent-text);
  background: var(--lc-accent);
  border-color: var(--lc-accent);
  cursor: default;
}
.lc-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 省略号：仅占位提示，非可点击 */
.lc-pager-ellipsis {
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  color: var(--lc-text-2);
  user-select: none;
}

/* 页码信息：第 X/Y 页 */
.lc-pager-info {
  font-size: 12px;
  color: var(--lc-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 跳至指定页：输入框 + 跳转按钮 */
.lc-pager-goto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--lc-text-2);
  white-space: nowrap;
}
.lc-pager-input {
  width: 46px;
  height: 32px;
  padding: 0 6px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--lc-text);
  background: var(--lc-surface-strong);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  transition: border-color 0.15s ease;
}
.lc-pager-input:focus { outline: none; border-color: var(--lc-border-hover); }
/* 去掉 number 输入框的步进箭头，保持紧凑 */
.lc-pager-input::-webkit-outer-spin-button,
.lc-pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lc-pager-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* 移动端：按钮与间距收窄，导航允许换行 */
@media (max-width: 480px) {
  .lc-pager-bar { gap: 8px; }
  .lc-pager-btn { min-width: 30px; height: 30px; padding: 0 8px; }
  .lc-pager-prev, .lc-pager-next { padding: 0 8px; }
  .lc-pager-goto { margin-top: 2px; }
}

/* 通用按钮 */
.lc-btn {
  border: 1px solid var(--lc-border); background: var(--lc-surface); color: var(--lc-text);
  border-radius: var(--lc-radius); padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 400;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.lc-btn:hover { background: var(--lc-surface-strong); color: var(--lc-accent); border-color: var(--lc-border-hover); }
.lc-submit-btn { background: var(--lc-accent); color: var(--lc-accent-text); border-color: var(--lc-accent); }
.lc-submit-btn:hover { background: var(--lc-text-2); color: var(--lc-accent-text); border-color: var(--lc-text-2); }
.lc-submit-btn:disabled { opacity: .5; cursor: not-allowed; background: var(--lc-surface); color: var(--lc-text-2); border-color: var(--lc-border); }

/* 表单 */
.lc-form { margin-top: 16px; padding-top: 20px; padding-bottom: 20px; }
.lc-form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lc-input {
  flex: 1; min-width: 160px; padding: 0.65rem 0.85rem; font-size: 13px;
  border: 1px solid var(--lc-border); border-radius: var(--lc-radius); background: var(--lc-surface); color: var(--lc-text);
  outline: none; font-family: inherit; font-weight: 400;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.lc-input::placeholder, .lc-textarea::placeholder { color: var(--lc-text-2); }
.lc-input:focus, .lc-textarea:focus { border-color: var(--lc-border-hover); background: var(--lc-surface-strong); }
.lc-textarea {
  width: 100%; padding: 0.65rem 0.85rem; font-size: 13px; resize: vertical;
  border: 1px solid var(--lc-border); border-radius: var(--lc-radius); background: var(--lc-surface); color: var(--lc-text);
  font-family: inherit; font-weight: 400; box-sizing: border-box; outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.lc-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lc-toolbar { flex: 1; display: flex; gap: 8px; }
.lc-char-count { color: var(--lc-text-2); font-size: 12px; }

/* 回复栏 */
.lc-reply-bar {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); padding: 8px 10px; margin-bottom: 10px;
}
.lc-reply-info { color: var(--lc-accent); font-size: 13px; }

/* 表情面板 */
.lc-emoji-panel {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding: 8px;
  border: 1px solid var(--lc-border); border-radius: var(--lc-radius); background: var(--lc-surface);
}
.lc-emoji { font-size: 20px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--lc-radius); }
.lc-emoji:hover { background: var(--lc-hover); }

/* Toast */
.lc-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  padding: 9px 20px; border-radius: var(--lc-radius); font-size: 13px; z-index: 9999;
  max-width: 80%; font-weight: 400;
}
.lc-toast-success { background: var(--lc-accent); color: var(--lc-accent-text); }
.lc-toast-error { background: var(--lc-danger); color: var(--lc-accent-text); }
.lc-toast-info { background: var(--lc-accent); color: var(--lc-accent-text); }

@media (max-width: 480px) {
  .lc-comment { padding: 14px; gap: 12px; margin-bottom: 10px; }
  .lc-avatar { width: 40px; height: 40px; }
  .lc-avatar-img, .lc-avatar-letter { width: 40px; height: 40px; }
  .lc-avatar-letter { font-size: 16px; }
  .lc-content { font-size: 14px; }
  .lc-actions button { font-size: 12px; padding: 4px 8px; }
  .lc-form-foot { flex-wrap: wrap; }
  .lc-toolbar { flex: none; }
}

/* 移动端适配（<=640px）：回复不再递归嵌套，改为扁平回复列表（对齐 B 站移动端）。
 * JS 在断点内只把回复平铺到根评论下（见 buildFlatReplies），此处负责去掉缩进/卡片化，
 * 使多级回复在视觉上保持平铺不产生样式错乱。
 */
@media (max-width: 640px) {
  .lc-children-flat {
    margin-top: 12px;
    padding: 4px 12px;
    border-left: none;
    background: var(--lc-hover);
    border-radius: var(--lc-radius);
  }
  .lc-children-flat .lc-comment {
    margin-bottom: 0;
    padding: 12px 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lc-children-flat .lc-comment + .lc-comment {
    border-top: 1px solid var(--lc-border);
  }
  /* 待审核回复在扁平列表中仍保留标识背景 */
  .lc-children-flat .lc-comment.lc-pending {
    background: var(--lc-pending-bg);
    border: 1px solid var(--lc-pending-border);
  }
  /* 扁平回复行：小头像、紧凑布局 */
  .lc-children-flat .lc-comment { gap: 10px; }
  .lc-children-flat .lc-avatar,
  .lc-children-flat .lc-avatar-img,
  .lc-children-flat .lc-avatar-letter { width: 28px; height: 28px; }
  .lc-children-flat .lc-avatar-letter { font-size: 13px; }
  .lc-children-flat .lc-content { margin: 6px 0; }
  .lc-replies-toggle {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    text-align: center;
    color: var(--lc-accent);
  }
}