/*
 * 评论编辑器（通用组件，2026-09-13）：输入框 + 底部功能条（emoji / 图片 / 链接）+ 回复态。
 * SSR 内容页用（static/js/comment-editor.js 挂载），放在 fe/src/styles 下是为了走同一条样式管线
 * （打包时拷进 /css/app/**），将来 React 侧也能复用。颜色一律用 tokens 变量（AGENTS 第 8 条）。
 *
 * 交互参考 surmon.me：底部功能条背景略区别于输入框；悬停 emoji 在功能条上方展开一行 emoji
 * （左右箭头翻页），鼠标离开即收起；点图片 / 链接在光标处插入 markdown 模板。
 */

.cmte {
  display: grid;
  gap: var(--space-2);
}

/* 昵称 / 邮箱：并排两格，用 placeholder 表达必填（*），不占外置 label */
.cmte-identity-row {
  display: flex;
  gap: var(--space-2);
}

.cmte-identity-row input {
  flex: 1;
  min-width: 0;
  /* 加高到和多行评论框观感一致（作者反馈：29px 显得矮小） */
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

/* 折叠态：默认只显示一行「写下你的真知灼见...」，点击才展开（JS 生效时才折叠；
   没有 JS 时 .cmte-box 直接可见，表单照常可用） */
.cmte-collapsed {
  display: none;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  color: var(--text-tertiary);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: text;
}

.cmte.is-collapsed .cmte-collapsed {
  display: block;
}

.cmte.is-collapsed .cmte-identity-row,
.cmte.is-collapsed .cmte-box {
  display: none;
}

/*
 * 没有 JS 时（<html> 上没有 .js）：始终给完整表单，保证原生 form 能提交；
 * 折叠提示行不出现。SSR 直接渲染折叠态，避免 JS 执行前先闪一下多行输入框（2026-09-13 作者反馈）。
 */
html:not(.js) .cmte.is-collapsed .cmte-collapsed {
  display: none;
}

html:not(.js) .cmte.is-collapsed .cmte-identity-row {
  display: flex;
}

html:not(.js) .cmte.is-collapsed .cmte-box {
  display: block;
}

/* 展开动画（作者：别直接展示）：折叠 → 展开时淡入上滑，动画结束由 JS 摘掉 .is-opening */
.cmte.is-opening .cmte-identity-row,
.cmte.is-opening .cmte-box {
  animation: cmte-open 0.28s var(--ease-standard) both;
}

/* 输入框容器：正文 + 底部功能条内嵌在同一个框里（surmon 那种排版） */
.cmte-box {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
  overflow: hidden;
  transition: border-color 0.2s var(--ease-standard);
}

.cmte-box:focus-within {
  border-color: var(--accent);
}

/* 回复态：默认整行不占位（没点「回复」时连「取消」都不该出现），由 JS 加 .is-replying 打开 */
.cmte-replyto {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cmte.is-replying .cmte-replyto {
  display: flex;
}

.cmte-replyto b {
  color: var(--accent);
  font-weight: 600;
}

.cmte-replyto button {
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-xs);
}

.cmte-replyto button:hover {
  color: var(--text-primary);
}

.cmte-box textarea {
  width: 100%;
  /* 作者反馈：评论区默认在顶部了，输入框给大一点更像「主入口」（原 92px） */
  min-height: 148px;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  resize: none;
}

.cmte-box textarea:focus-visible {
  outline: none;
}

/* 底部功能条：背景用 bg-muted，比输入框的 bg-inset 略浅/略深一档（明暗主题各自成立） */
.cmte-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-muted);
}

.cmte-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* emoji 按钮 + 悬停条的组合外壳（React 侧用：把按钮和它上方那条绝对定位的 emoji 条约在同一个
   悬停区域里，鼠标从按钮移到 emoji 条上不会中途收起）。 */
.cmte-emoji-slot {
  display: inline-flex;
}

/* 工具按钮：图标统一 Lucide（线性 + 圆角端点），只放图标，文案走 title / aria-label */
.cmte-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}

.cmte-tool svg {
  width: 17px;
  height: 17px;
}

.cmte-tool:hover,
.cmte-tool.is-active {
  background: var(--bg-inset);
  color: var(--text-primary);
}

/* emoji 条：悬停 emoji 按钮时贴在功能条正上方展开一行（盖住输入框底部），离开即收起 */
.cmte-emoji-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px var(--space-2);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-muted);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s var(--ease-standard), visibility 0.16s var(--ease-standard);
}

.cmte-emoji-bar.is-open {
  opacity: 1;
  visibility: visible;
}

.cmte-emoji-page {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}

.cmte-emoji-page button {
  width: 26px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.cmte-emoji-page button:hover {
  background: var(--bg-inset);
}

.cmte-emoji-nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.cmte-emoji-nav svg {
  width: 15px;
  height: 15px;
}

.cmte-emoji-nav:hover:not(:disabled) {
  background: var(--bg-inset);
  color: var(--text-primary);
}

.cmte-emoji-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.cmte-submit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cmte-submit button {
  padding: 6px 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.cmte-submit button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cmte-hint {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}