/* ============================================================
   全局反馈抽屉（评论 / 回复 / 留言共用）
   触发方式：给任意按钮加 .fb-open，
   data-action   表单提交地址（必填）
   data-title    抽屉标题（默认「写评论」）
   data-parent   回复目标评论 id（可选）
   data-replyto  回复目标昵称（可选，配合 data-parent）
   data-placeholder 正文占位文案（可选）
   ============================================================ */

.fb-mask {
  position: fixed; inset: 0; z-index: 1600;
  background: rgba(15, 15, 20, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.fb-mask.open { opacity: 1; visibility: visible; }

.fb-drawer {
  position: fixed; top: 0; right: 0; bottom: var(--toolbar-comp, 0px); z-index: 1700;
  width: min(420px, 100%);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(0, 0, 0, .18);
  transform: translateX(103%);
  transition: transform .32s cubic-bezier(.32, .72, .28, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px clamp(18px, 4.5vw, 28px) 32px;
}
.fb-drawer.open { transform: none; }
body.fb-locked { overflow: hidden; }

.fb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--text);
}
.fb-head h3 {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 700;
  letter-spacing: .06em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-close {
  flex-shrink: 0;
  font-size: 12.5px; color: var(--text-3);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-secondary);
  transition: var(--t);
}
.fb-close:hover { color: var(--danger, #e05252); border-color: var(--danger, #e05252); }

/* 回复上下文提示条 */
.fb-cancel-reply {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-3);
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-top: 12px;
}
.fb-cancel-reply b { color: var(--brand); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-cancel-reply button {
  margin-left: auto; flex-shrink: 0;
  font-size: 12px; color: var(--brand);
  background: none; border: none; cursor: pointer;
  transition: var(--t);
}
.fb-cancel-reply button:hover { text-decoration: underline; }

.fb-label {
  display: block;
  font-size: 12px; color: var(--text-3);
  letter-spacing: .04em;
  margin: 16px 0 6px;
}
.fb-input, .fb-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-secondary);
  font-size: 14px; color: var(--text);
  transition: var(--t);
}
.fb-input:focus, .fb-textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--brand-op);
}
.fb-textarea { resize: vertical; min-height: 112px; line-height: 1.7; }

/* emoji 快捷表情行 */
.fb-emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.fb-emoji-row button {
  width: 32px; height: 32px;
  border: none; background: none;
  border-radius: 8px;
  font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--t);
}
.fb-emoji-row button:hover { background: var(--brand-op); transform: scale(1.15); }

/* 验证码 */
.fb-captcha-row { display: flex; gap: 10px; align-items: center; }
.fb-captcha-row .fb-input { flex: 1; min-width: 0; }
.fb-captcha-img {
  height: 42px; flex-shrink: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  cursor: pointer;
}

.fb-submit { width: 100%; margin-top: 22px; }
.fb-tip { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 10px; }

/* ---------- 触发按钮：极简文字幽灵按钮（评论「回复/写评论」、留言板入口共用） ---------- */
.fb-open.reply-btn {
  font-size: 12px; color: var(--text-3);
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: none;
  cursor: pointer;
  transition: var(--t);
}
.fb-open.reply-btn:hover { color: var(--brand); border-color: var(--brand); }
/* 评论区头部 / 留言板页头的 CTA 靠右 */
.fb-cta { margin-left: auto; }