/* ============ Wallcoo 评论（原生评论 + 旧项目二级树 / 公众号式操作）============ */
/* 默认浅色；暗色页（专辑 .wc-album-page、壁纸详情 .wc-detail-page）通过变量覆盖 */
.wc-comments {
  --c-text: #1d1d1f; --c-text2: #86868b; --c-text3: #aeaeb2;
  --c-bd: #e5e5e7; --c-accent: #667eea; --c-input: #f2f2f4; --c-hover: #f7f7f8;
  margin-top: 24px; font-size: 14px; color: var(--c-text);
}
.wc-album-page .wc-comments,
.wc-detail-page .wc-comments {
  --c-text: rgba(255,255,255,0.9); --c-text2: rgba(255,255,255,0.5); --c-text3: rgba(255,255,255,0.35);
  --c-bd: rgba(255,255,255,0.12); --c-input: rgba(255,255,255,0.08); --c-hover: rgba(255,255,255,0.06);
}

.wc-comments-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.wc-comments-head h3 { margin: 0; font-size: 16px; color: var(--c-text); }
.wc-comments-count { color: var(--c-text2); font-weight: normal; }
.wc-sort-tabs { display: flex; gap: 4px; }
.wc-sort { background: none; border: none; color: var(--c-text2); cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.wc-sort.active { color: var(--c-accent); background: rgba(102,126,234,0.12); font-weight: 600; }

/* 评论框（顶部，公众号风格） */
.wc-comment-box { display: flex; gap: 10px; margin-bottom: 18px; position: relative; }
.wc-cb-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.wc-cb-main { flex: 1; min-width: 0; }
.wc-cb-input { width: 100%; border: 1px solid var(--c-bd); border-radius: 12px; background: var(--c-input); color: var(--c-text);
  padding: 10px 12px; font-size: 14px; resize: none; overflow: hidden; box-sizing: border-box; font-family: inherit; line-height: 1.5; }
.wc-cb-input:focus { outline: none; border-color: var(--c-accent); }
.wc-cb-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wc-cb-emoji, .wc-reply-emoji { background: none; border: none; color: var(--c-text2); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; border-radius: 6px; }
.wc-cb-emoji:hover, .wc-reply-emoji:hover { color: var(--c-accent); background: rgba(102,126,234,0.12); }
.wc-cb-count { font-size: 12px; color: var(--c-text3); margin-left: auto; }
.wc-cb-count.warn { color: #f56c6c; }
.wc-cb-send, .wc-reply-send { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; border-radius: 10px; padding: 7px 18px; cursor: pointer; font-size: 13px; }
.wc-cb-send:disabled { opacity: .5; cursor: not-allowed; }
.wc-comment-login { padding: 16px; text-align: center; border: 1px dashed var(--c-bd); border-radius: 12px; margin-bottom: 18px; }
.wc-comment-login a { color: var(--c-accent); text-decoration: none; }

/* 列表 */
.wc-loading, .wc-empty { color: var(--c-text3); padding: 20px 0; text-align: center; }
.wc-thread { padding: 10px 0; }
.wc-thread + .wc-thread { border-top: 1px solid var(--c-bd); }
.wc-c { display: flex; gap: 10px; position: relative; }
.wc-c-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.wc-c-body { flex: 1; min-width: 0; }
.wc-c-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wc-c-meta-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wc-c-name { font-size: 13px; font-weight: 600; color: var(--c-text); text-decoration: none; white-space: nowrap; }
.wc-c-time { font-size: 11px; color: var(--c-text3); white-space: nowrap; }
.wc-c-content { font-size: 14px; line-height: 1.55; margin: 2px 0 0; color: var(--c-text); word-break: break-word; }
.wc-c-reply-to { color: var(--c-accent); }

/* 右侧操作区：hover 出现 回复/举报，点赞常驻 */
.wc-c-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wc-c-ops { display: flex; gap: 10px; opacity: 0; transition: opacity .15s; }
.wc-c:hover .wc-c-ops { opacity: 1; }
.wc-c-op { background: none; border: none; color: var(--c-text2); cursor: pointer; padding: 0; display: inline-flex; align-items: center; }
.wc-c-op:hover { color: var(--c-accent); }
.wc-c-op.report:hover { color: #e6a23c; }
.wc-c-like { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--c-text2); }
.wc-c-like.liked { color: var(--c-accent); }
.wc-c-like svg { width: 14px; height: 14px; }
.wc-c-like.liked svg { fill: var(--c-accent); }
.wc-c-like .n { font-size: 12px; }

/* 回复列表（缩进） */
.wc-replies { margin-left: 42px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.wc-replies-toggle { margin-left: 42px; margin-top: 6px; }
.wc-replies-toggle button { background: none; border: none; color: var(--c-accent); cursor: pointer; font-size: 12px; padding: 0; }

/* 内联回复框 */
.wc-reply-box { display: flex; gap: 8px; margin-top: 8px; background: var(--c-input); border-radius: 18px; padding: 6px 10px; align-items: center; position: relative; }
.wc-reply-box textarea { flex: 1; background: none; border: none; color: var(--c-text); resize: none; font-size: 13px; font-family: inherit; line-height: 1.4; outline: none; }
.wc-reply-cancel { background: none; border: none; color: var(--c-text3); cursor: pointer; font-size: 12px; }

/* 表情选择器（Teleport 到 body，避免被裁切） */
.wc-emoji-pop { position: fixed; z-index: 10001; width: 300px; max-height: 220px; overflow-y: auto;
  background: #1e1e2e; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.wc-emoji-pop span { cursor: pointer; text-align: center; font-size: 18px; padding: 3px 0; border-radius: 6px; }
.wc-emoji-pop span:hover { background: rgba(255,255,255,0.1); }