/* Artalk 评论区主题：对齐本站 Twikoo 那套定制外观（白底卡片 / 细边框 / 小圆角 / 深色小按钮）
   变量来自 src/styles/global.css，随系统暗色自动翻转。2026-09-20 */

#artalk-mount { font-family: inherit; font-size: 14px; color: var(--color-text); }
#artalk-mount .atk-main { padding: 0; background: transparent; box-shadow: none; }
#artalk-mount .atk-main * { font-family: inherit; }

/* ── 表单卡片 ── */
#artalk-mount .atk-main-editor {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 6px; box-shadow: none; padding: 0; font-size: 14px; overflow: hidden;
}
#artalk-mount .atk-header {
  display: flex; flex-wrap: nowrap; gap: 0; padding: 10px 5px 0; margin: 0; border: 0;
}
#artalk-mount .atk-header input {
  flex: 1 1 0; min-width: 0; height: 38px; padding: 6px 5px; font-size: 14px;
  background: transparent; border: 2px solid transparent; border-radius: 3px; box-shadow: none;
  color: var(--color-text);
}
#artalk-mount .atk-header input:focus { border-color: var(--color-line); }
#artalk-mount .atk-header input::placeholder,
#artalk-mount .atk-textarea::placeholder { color: #888; }
#artalk-mount .atk-textarea-wrap { margin: 2px 0 0; padding: 0 5px; border: 0; }
#artalk-mount .atk-textarea {
  width: 100%; min-height: 72px; padding: 10px; font-size: 15px; line-height: 1.6;
  background: transparent; color: var(--color-text); border: 2px solid transparent;
  border-radius: 3px; box-shadow: none; resize: vertical;
}
#artalk-mount .atk-textarea:focus { border-color: var(--color-line); }
#artalk-mount .atk-textarea-wrap .atk-word-count { color: var(--color-text-muted); font-size: 12px; }

/* ── 工具栏 / 发送按钮 ── */
#artalk-mount .atk-plug-btn-wrap { padding: 5px 5px 10px; }
#artalk-mount .atk-plug-btn {
  width: 30px; height: 30px; border-radius: 4px; color: #888;
  background: transparent; border: 0; box-shadow: none;
}
#artalk-mount .atk-plug-btn:hover { background: transparent; color: var(--color-text); }
#artalk-mount .atk-send-btn {
  height: 30px; padding: 0 12px; border: 0; border-radius: 4px;
  background: #020617; color: #fff; font-size: 13px; font-weight: 400; line-height: 30px;
}
#artalk-mount .atk-send-btn:hover { opacity: .85; }
#artalk-mount .atk-send-btn:disabled { opacity: .55; }

/* ── 评论列表 ── */
#artalk-mount .atk-list { padding: 0; background: transparent; }
#artalk-mount .atk-list-header {
  font-size: 13px; color: var(--color-text-muted); margin: 14px 0 8px; padding: 0; border: 0;
}
#artalk-mount .atk-list-body { padding: 0; }
#artalk-mount .atk-comment-wrap {
  border: 0; border-radius: 0; padding: 10px 0; margin: 0; background: transparent;
}
#artalk-mount .atk-comment { background: transparent; }
#artalk-mount .atk-avatar, #artalk-mount .atk-avatar img {
  width: 32px; height: 32px; border-radius: 50%;
}
#artalk-mount .atk-nick { font-size: 13px; font-weight: 400; color: var(--color-text); }
#artalk-mount .atk-time, #artalk-mount .atk-info { font-size: 12px; color: var(--color-text-muted); }
#artalk-mount .atk-content { font-size: 15px; line-height: 1.7; color: var(--color-text); }
#artalk-mount .atk-comment-children { border: 0; margin: 8px 0 0; padding: 0; }
#artalk-mount .atk-actions { font-size: 12px; color: var(--color-text-muted); }
#artalk-mount .atk-list-no-comment { font-size: 14px; color: var(--color-text-muted); }
#artalk-mount .atk-list-footer { display: none; }
#artalk-mount .atk-page-navigation { font-size: 13px; }

/* ── 表情面板 ── */
#artalk-mount .atk-editor-plug-emoticons { padding: 8px; }
#artalk-mount .atk-editor-plug-emoticons img { width: 28px; height: 28px; vertical-align: middle; }
#artalk-mount .atk-editor-plug-emoticons .atk-emoticon-item { padding: 3px; }

/* 未配置图片上传：收掉「上传图片」按钮（对齐 Twikoo 那套的干净工具栏） */
#artalk-mount .atk-plug-btn:has(i[aria-label="上传图片"]) { display: none !important; }
/* 表情面板限高，别把表单撑太长 */
#artalk-mount .atk-editor-plug-emoticons .atk-grp-wrap { max-height: 170px; overflow-y: auto; }
#artalk-mount .atk-editor-plug-emoticons .atk-item img { width: 26px; height: 26px; }
#artalk-mount .atk-editor-plug-emoticons .atk-item { padding: 4px; }

/* 评论区上方分隔线（原在 twikoo-theme.css，切 Artalk 后要一起带过来） */
#artalk-mount ~ .tk-divider, .comment-section > .tk-divider {
  display: flex; align-items: center; gap: 16px; height: 20px; margin-bottom: 40px;
}
.comment-section > .tk-divider::before, .comment-section > .tk-divider::after {
  content: ''; flex: 1; border-top: 1px solid var(--color-line);
}
.comment-section > .tk-divider > span {
  width: 12px; height: 12px; border: 2px solid var(--color-line); border-radius: 50%; box-sizing: border-box;
}
.comment-section > .comment-load-status { min-height: 24px; margin: 0 0 12px; color: var(--color-text-muted); font-size: 13px; }
.comment-section > .comment-load-status[hidden] { display: none; }
.comment-section > .comment-load-status button { margin-left: 8px; color: var(--color-text); text-decoration: underline; cursor: pointer; }