/* 自建评论区 */
.rc-comments {
  max-width: 720px;
  margin: 3em auto 1em;
  --rc-bg: #faf7f1;
  --rc-line: #ece4d2;
  --rc-ink: #333;
  --rc-mute: #999;
  --rc-accent: #b0956e;
}
.rc-title { font-size: 1.05em; letter-spacing: 0.1em; margin: 0 0 0.8em; }
.rc-count { color: var(--rc-mute); font-weight: normal; font-size: 0.85em; }
.rc-empty { color: var(--rc-mute); font-size: 0.9em; }
.rc-item { padding: 0.8em 0; border-top: 1px dashed var(--rc-line); }
.rc-item:first-child { border-top: 0; }
.rc-children { margin: 0.4em 0 0 1.2em; padding-left: 0.9em; border-left: 2px solid var(--rc-line); }
.rc-children .rc-item { padding: 0.5em 0; border-top: 0; }
.rc-meta { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em; font-size: 0.82em; }
.rc-name { font-weight: 600; color: var(--rc-ink); }
.rc-badge { font-size: 0.8em; color: #fff; background: var(--rc-accent); border-radius: 3px; padding: 0 5px; }
.rc-to { color: var(--rc-mute); }
.rc-time { color: var(--rc-mute); font-variant-numeric: tabular-nums; }
.rc-reply-btn, .rc-cancel {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rc-mute);
  cursor: pointer;
}
.rc-reply-btn:hover, .rc-cancel:hover { color: var(--rc-accent); }
.rc-body { margin-top: 0.3em; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rc-ink); }
.rc-by-author > .rc-body { color: #6b5a3e; }
.rc-body a { color: var(--rc-accent); word-break: break-all; }
.rc-img { display: block; max-width: min(100%, 260px); max-height: 240px; border-radius: 6px; margin: 0.4em 0; }
.rc-form {
  margin-top: 1.2em;
  padding: 0.8em;
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  border-radius: 8px;
}
.rc-form textarea, .rc-form input[name=name] {
  box-sizing: border-box;
  font: inherit;
  color: var(--rc-ink);
  background: transparent;
  border: 0;
  outline: 0;
}
.rc-form textarea { width: 100%; resize: vertical; min-height: 5em; line-height: 1.7; }
.rc-row { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; border-top: 1px solid var(--rc-line); padding-top: 0.6em; }
.rc-form input[name=name] { flex: 1 1 8em; min-width: 0; font-size: 0.9em; }
.rc-reply-to { font-size: 0.82em; color: var(--rc-accent); }
.rc-reply-to .rc-cancel { margin-left: 0.2em; font-size: 1.1em; }
.rc-form button[type=submit] {
  font: inherit;
  font-size: 0.9em;
  color: #fff;
  background: #2b2620;
  border: 0;
  border-radius: 16px;
  padding: 0.3em 1.2em;
  cursor: pointer;
}
.rc-form button[type=submit]:disabled { opacity: 0.5; cursor: default; }
.rc-status { font-size: 0.82em; color: var(--rc-mute); min-height: 1.2em; margin-top: 0.3em; }
.rc-status.rc-err { color: #b5523b; }
.rc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* 表情回应 */
.rc-react-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 0.7em; margin: 0 0 1.6em; }
.rc-react-label { font-size: 0.8em; color: var(--rc-mute); letter-spacing: 0.15em; }
.rc-react-bar, .rc-reacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.9em;
  line-height: 1;
  color: var(--rc-ink);
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rc-react:hover { border-color: var(--rc-accent); transform: translateY(-1px); }
.rc-react:active { transform: scale(0.9); }
.rc-react .rc-e {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.rc-e img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rc-react.small .rc-e { width: 18px; height: 18px; font-size: 15px; }
.rc-react.zero .rc-e { filter: grayscale(0.5); opacity: 0.7; transition: filter 0.15s, opacity 0.15s; }
.rc-react.zero:hover .rc-e { filter: none; opacity: 1; }
.rc-n { font-size: 0.85em; color: var(--rc-mute); font-variant-numeric: tabular-nums; }
.rc-react.on { border-color: var(--rc-accent); background: rgba(176, 149, 110, 0.16); }
.rc-react.on .rc-n { color: var(--rc-accent); font-weight: 600; }
.rc-react.pop .rc-e { animation: rc-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rc-picker .rc-e { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 24px; }

/* 博文页：大号表情，图 + 数字 + 名字竖排（仿以前 Disqus 的样子） */
.rc-big .rc-react-wrap { flex-direction: column; gap: 0.9em; margin: 0.5em 0 2.6em; }
.rc-big .rc-react-label { font-size: 0.95em; letter-spacing: 0.25em; color: var(--rc-ink); }
.rc-big .rc-react-bar { justify-content: center; gap: 10px; }
.rc-big .rc-react-bar .rc-react {
  flex-direction: column;
  gap: 5px;
  min-width: 78px;
  padding: 12px 8px 9px;
  border-radius: 14px;
}
.rc-big .rc-react-bar .rc-e { width: 52px; height: 52px; font-size: 44px; }
.rc-big .rc-react-bar .rc-react:hover { transform: none; }
.rc-big .rc-react-bar .rc-react:hover .rc-e { transform: translateY(-4px) scale(1.08); }
.rc-big .rc-react-bar .rc-n { font-size: 1em; }
.rc-big .rc-react-bar .rc-lbl { font-size: 0.76em; color: var(--rc-mute); letter-spacing: 0.1em; }
.rc-big .rc-react-bar .rc-react.zero .rc-e { filter: grayscale(0.2); opacity: 0.85; }
@media (max-width: 560px) {
  .rc-big .rc-react-bar { gap: 6px; }
  .rc-big .rc-react-bar .rc-react { flex: 1 1 28%; min-width: 0; }
  .rc-big .rc-react-bar .rc-e { width: 44px; height: 44px; font-size: 36px; }
}
@keyframes rc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1); } }
.rc-reacts { position: relative; margin-top: 0.35em; }
.rc-react.small { font-size: 0.76em; padding: 3px 8px; }
.rc-react-add {
  font: inherit;
  font-size: 0.76em;
  color: var(--rc-mute);
  background: none;
  border: 1px dashed transparent;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* 「☺︎ +」放在评论标题行，回复按钮左边；鼠标移到评论上才出现 */
.rc-meta .rc-react-add { margin-left: auto; font-size: 0.92em; padding: 0 6px; }
.rc-meta .rc-react-add + .rc-reply-btn { margin-left: 0.4em; }
.rc-reacts[hidden] { display: none; }
.rc-meta .rc-picker { left: auto; right: 0; }
.rc-item:hover > .rc-meta .rc-react-add,
.rc-meta:has(.rc-picker) .rc-react-add,
.rc-react-add:focus-visible { opacity: 1; }
@media (hover: none) { .rc-react-add { opacity: 1; } }
.rc-react-add:hover { color: var(--rc-accent); border-color: var(--rc-line); }
.rc-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  animation: rc-in 0.15s ease;
}
.rc-picker button {
  font-size: 1.3em;
  line-height: 1;
  padding: 4px;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.rc-picker button:hover { transform: scale(1.35) translateY(-3px); }
.rc-picker button.on { background: rgba(176, 149, 110, 0.22); }
/* 只动位移不动透明度：选择器盖在正文上，半透明时字会透出来 */
@keyframes rc-in { from { transform: translateY(4px) scale(0.95); } }
.rc-particle, .rc-float-label { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%); }
.rc-particle { opacity: 0; animation: rc-fly 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes rc-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.1); }
}
.rc-float-label { font-size: 12px; font-weight: 600; color: #b0956e; white-space: nowrap; animation: rc-label 1.1s ease-out forwards; }
@keyframes rc-label {
  0% { opacity: 0; transform: translate(-50%, -20%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -260%); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-react.pop .rc-e, .rc-picker { animation: none; }
}

@media (prefers-color-scheme: dark) {
  .rc-comments { --rc-bg: #26241f; --rc-line: #3a352b; --rc-ink: #d6d0c4; --rc-mute: #888; }
  .rc-react.on { background: rgba(212, 168, 106, 0.18); }
  .rc-float-label { color: #d4a86a; }
  .rc-by-author > .rc-body { color: #d4b98a; }
  .rc-form button[type=submit] { background: #d4a86a; color: #1a1a1a; }
}