/* 评论区回复生成 · 样式（2026-10-03 新建）
 * 命名全部 cr- 前缀，且关键规则用 #page-comment-reply 容器限定，
 * 避免和主站既有的 #page-xxx .cls 规则互相污染。
 * 视觉沿用 Galaxy / uiverse.io：cubic-bezier 缓动、scale 按压、hover 上浮。 */
:root {
  --cr-brand: #D81B37;
  --cr-brand-soft: rgba(255, 92, 114, .12);
  --cr-line: rgba(120, 120, 140, .18);
  --cr-card: #fff;
  --cr-text: #1f2430;
  --cr-sub: #6b7280;
  --cr-ease: cubic-bezier(.34, 1.56, .64, 1);
}

#page-comment-reply .cr-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4px 40px;
}

/* ---------- Hero ---------- */
#page-comment-reply .cr-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 92, 114, .10), rgba(255, 175, 92, .08));
  border: 1px solid var(--cr-line);
  margin-bottom: 16px;
}
#page-comment-reply .cr-hero-l {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cr-brand-soft);
  color: var(--cr-brand);
}
#page-comment-reply .cr-hero-l i { width: 22px; height: 22px; }
#page-comment-reply .cr-hero-r { display: flex; flex-direction: column; gap: 4px; }
#page-comment-reply .cr-hero-r b { font-size: 15px; color: var(--cr-text); }
#page-comment-reply .cr-hero-r span { font-size: 12.5px; color: var(--cr-sub); line-height: 1.6; }

#page-comment-reply .cr-exttip {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 9px 12px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.6; color: #2A5FD9;
  background: rgba(8, 145, 178, .08); border: 1px solid rgba(8, 145, 178, .25);
}
#page-comment-reply .cr-exttip i { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- 上传区 ---------- */
#page-comment-reply .cr-drop {
  border: 2px dashed var(--cr-line);
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  background: var(--cr-card);
  transition: border-color .25s var(--cr-ease), background .25s var(--cr-ease), transform .18s var(--cr-ease);
}
#page-comment-reply .cr-drop:hover { border-color: var(--cr-brand); background: rgba(255, 92, 114, .04); }
#page-comment-reply .cr-drop.over { border-color: var(--cr-brand); background: var(--cr-brand-soft); transform: scale(1.008); }
#page-comment-reply .cr-drop:active { transform: scale(.995); }
#page-comment-reply .cr-drop:focus-visible { outline: 3px solid var(--cr-brand-soft); outline-offset: 2px; }
#page-comment-reply .cr-drop-ico { color: var(--cr-brand); margin-bottom: 8px; }
#page-comment-reply .cr-drop-ico i { width: 30px; height: 30px; }
#page-comment-reply .cr-drop-t { font-size: 14px; color: var(--cr-text); }
#page-comment-reply .cr-drop-t b { color: var(--cr-brand); }
#page-comment-reply .cr-drop-s { font-size: 12px; color: var(--cr-sub); margin-top: 8px; line-height: 1.7; }

#page-comment-reply .cr-shots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
#page-comment-reply .cr-shot { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cr-line); }
#page-comment-reply .cr-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
#page-comment-reply .cr-shot-del {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 13px; cursor: pointer; padding: 0;
}
#page-comment-reply .cr-shot-del:hover { background: var(--cr-brand); }

/* ---------- 选项 ---------- */
#page-comment-reply .cr-opts {
  display: grid; grid-template-columns: 1fr 180px; gap: 14px; margin-top: 16px;
}
#page-comment-reply .cr-opt label { display: block; font-size: 12.5px; color: var(--cr-sub); margin-bottom: 6px; }
#page-comment-reply .cr-opt textarea,
#page-comment-reply .cr-opt select {
  width: 100%; border: 1px solid var(--cr-line); border-radius: 10px;
  padding: 9px 11px; font-size: 13px; color: var(--cr-text);
  font-family: inherit; background: var(--cr-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#page-comment-reply .cr-opt textarea { resize: vertical; line-height: 1.6; }
#page-comment-reply .cr-opt textarea:focus,
#page-comment-reply .cr-opt select:focus {
  outline: none; border-color: var(--cr-brand);
  box-shadow: 0 0 0 3px var(--cr-brand-soft);
}

/* ---------- 动作行 ---------- */
#page-comment-reply .cr-act { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
#page-comment-reply .cr-shot-n { font-size: 12px; color: var(--cr-sub); }
#page-comment-reply .cr-act .btn { display: inline-flex; align-items: center; gap: 6px; }
#page-comment-reply .cr-act .btn i { width: 16px; height: 16px; }
#page-comment-reply .cr-act .btn:disabled { opacity: .5; cursor: not-allowed; }
#page-comment-reply .cr-act .btn:not(:disabled):active { transform: scale(.97); }

#page-comment-reply .cr-paste { margin-top: 12px; }
#page-comment-reply .cr-paste textarea {
  width: 100%; border: 1px solid var(--cr-line); border-radius: 12px;
  padding: 12px; font-size: 13px; line-height: 1.7; font-family: inherit;
  color: var(--cr-text); resize: vertical;
}
#page-comment-reply .cr-paste textarea:focus { outline: none; border-color: var(--cr-brand); box-shadow: 0 0 0 3px var(--cr-brand-soft); }
#page-comment-reply .cr-paste-act { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- 进度 ---------- */
#page-comment-reply .cr-prog { margin-top: 18px; }
#page-comment-reply .cr-prog-bar { height: 6px; border-radius: 99px; background: var(--cr-line); overflow: hidden; }
#page-comment-reply .cr-prog-bar i { display: block; height: 100%; width: 12%; border-radius: 99px; background: linear-gradient(90deg, #ff5c72, #ffaf5c); }
#page-comment-reply .cr-prog-t { font-size: 12.5px; color: var(--cr-sub); margin-top: 8px; }

/* ---------- 工具栏 ---------- */
#page-comment-reply .cr-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding: 10px 12px;
  border: 1px solid var(--cr-line); border-radius: 12px; background: var(--cr-card);
  flex-wrap: wrap;
}
#page-comment-reply .cr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#page-comment-reply .cr-chip {
  border: 1px solid var(--cr-line); background: transparent;
  border-radius: 99px; padding: 5px 11px; font-size: 12px;
  color: var(--cr-sub); cursor: pointer;
  transition: all .2s var(--cr-ease);
}
#page-comment-reply .cr-chip:hover { border-color: var(--c, var(--cr-brand)); color: var(--c, var(--cr-brand)); }
#page-comment-reply .cr-chip.on {
  background: rgba(120, 120, 140, .10); /* 老浏览器兜底：不支持 color-mix 时也有底色 */
  background: color-mix(in srgb, var(--c, #ff5c72) 12%, transparent);
  border-color: var(--c, var(--cr-brand));
  color: var(--c, var(--cr-brand));
  font-weight: 600;
}
#page-comment-reply .cr-tool-right { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- 列表 ---------- */
#page-comment-reply .cr-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#page-comment-reply .cr-item {
  border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card);
  padding: 14px 16px;
  transition: transform .25s var(--cr-ease), box-shadow .25s var(--cr-ease);
  border-left: 3px solid var(--c, #475569);
}
#page-comment-reply .cr-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 20, 40, .08);
}
#page-comment-reply .cr-item-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-comment-reply .cr-ck input { width: 15px; height: 15px; accent-color: var(--cr-brand); cursor: pointer; }
#page-comment-reply .cr-tag {
  font-size: 12px; padding: 3px 9px; border-radius: 99px; font-weight: 600;
  color: var(--c, #475569);
  background: rgba(120, 120, 140, .10);
  background: color-mix(in srgb, var(--c, #475569) 12%, transparent);
  border: 1px solid rgba(120, 120, 140, .35);
  border-color: color-mix(in srgb, var(--c, #475569) 35%, transparent);
}
#page-comment-reply .cr-name { font-size: 12.5px; color: var(--cr-sub); }
#page-comment-reply .cr-edited { font-size: 12px; color: #2A5FD9; border: 1px solid rgba(8, 145, 178, .3); border-radius: 99px; padding: 1px 7px; }
#page-comment-reply .cr-idx { margin-left: auto; font-size: 12px; color: var(--cr-sub); opacity: .7; }
#page-comment-reply .cr-item-ops { display: flex; gap: 4px; }
#page-comment-reply .cr-item-ops button {
  border: 1px solid var(--cr-line); background: transparent;
  border-radius: 8px; padding: 4px 9px; font-size: 12px;
  color: var(--cr-sub); cursor: pointer;
  transition: all .18s var(--cr-ease);
}
#page-comment-reply .cr-item-ops button:hover { border-color: var(--cr-brand); color: var(--cr-brand); }
#page-comment-reply .cr-item-ops button:active { transform: scale(.95); }

#page-comment-reply .cr-cmt {
  margin-top: 10px; font-size: 13.5px; color: var(--cr-text); line-height: 1.7;
  padding: 9px 12px; border-radius: 10px; background: rgba(120, 120, 140, .06);
}
#page-comment-reply .cr-reply {
  width: 100%; margin-top: 10px; border: 1px solid var(--cr-line);
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7;
  font-family: inherit; color: var(--cr-text); background: var(--cr-card); resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#page-comment-reply .cr-reply:focus {
  outline: none; border-color: var(--cr-brand); box-shadow: 0 0 0 3px var(--cr-brand-soft);
}

#page-comment-reply .cr-risk {
  margin-top: 8px; font-size: 12px; line-height: 1.6; padding: 8px 11px;
  border-radius: 9px; border: 1px solid;
}
#page-comment-reply .cr-risk b { display: block; margin-bottom: 2px; }
#page-comment-reply .cr-risk.high { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .3); color: #b91c1c; }
#page-comment-reply .cr-risk.mid { background: rgba(202, 138, 4, .08); border-color: rgba(202, 138, 4, .3); color: #a16207; }
#page-comment-reply .cr-risk.low { background: rgba(100, 116, 139, .08); border-color: rgba(100, 116, 139, .3); color: #475569; }

#page-comment-reply .cr-empty {
  margin-top: 24px; text-align: center; font-size: 13px; color: var(--cr-sub);
  padding: 30px 12px; border: 1px dashed var(--cr-line); border-radius: 14px;
}

/* ---------- 历史 ---------- */
#page-comment-reply .cr-hist { margin-top: 28px; }
#page-comment-reply .cr-hist-t { font-size: 13px; font-weight: 600; color: var(--cr-text); margin-bottom: 8px; }
#page-comment-reply .cr-hist-list { display: flex; gap: 8px; flex-wrap: wrap; }
#page-comment-reply .cr-hist-i {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--cr-line); border-radius: 10px; background: var(--cr-card);
  padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--cr-sub);
  transition: all .2s var(--cr-ease);
}
#page-comment-reply .cr-hist-i:hover { border-color: var(--cr-brand); color: var(--cr-brand); transform: translateY(-1px); }
#page-comment-reply .cr-hist-i b { color: var(--cr-text); }
#page-comment-reply .cr-hist-i i { font-style: normal; opacity: .7; }

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  #page-comment-reply .cr-opts { grid-template-columns: 1fr; }
  #page-comment-reply .cr-hero { padding: 14px; }
  #page-comment-reply .cr-drop { padding: 20px 14px; }
  #page-comment-reply .cr-toolbar { flex-direction: column; align-items: stretch; }
  #page-comment-reply .cr-tool-right { justify-content: flex-start; }
  #page-comment-reply .cr-item-ops { width: 100%; justify-content: flex-end; margin-top: 4px; }
  #page-comment-reply .cr-idx { display: none; }
}

/* ---------- 降低动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  #page-comment-reply .cr-item,
  #page-comment-reply .cr-hist-i,
  #page-comment-reply .cr-chip,
  #page-comment-reply .cr-drop { transition: none !important; }
  #page-comment-reply .cr-item:hover,
  #page-comment-reply .cr-hist-i:hover { transform: none !important; }
  #page-comment-reply .cr-prog-bar i { transition: none !important; }
}