/**
 * =============================================================================
 * wpforo-reply.css — 话题详情页：清杂 + 极简双态回复框
 * =============================================================================
 * 配套：inc/wpforo-reply.php（正文改纯 textarea、收起态行 markup）
 *       assets/js/wpf-reply.js（展开/收起、图片代理、emoji 弹层、按钮态）
 * 入队：inc/enqueue.php，仅 is_wpforo_page()，压在 wpforo-align.css 之后。
 *
 * 视觉 token 对齐广场发帖框（wpforo-align.css 的 .mytheme-wpf-composer）：
 * 白卡 + var(--myt-wpf-color-line) 边 + 14px 圆角；文字 #222/#666/#999；品牌红 var(--myt-wpf-color-primary)。
 *
 * 选择器里大量用 `#wpforo #wpforo-wrap` 前缀 + !important，是为了压过
 * 插件自带的同前缀通用 reset / 主题 2026 的默认表单样式，跟 align css 同一套路。
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * 一、话题页清杂
 * ------------------------------------------------------------------------- */

/* 顶栏「订阅新的回复」按钮（游客态也有个空占位）——X 式极简不留 */
#wpforo .wpf-head-bar .wpf-subscribe-topic,
#wpforo .wpf-head-bar .wpf-unsubscribe-topic {
  display: none !important;
}

/* 底部「Forum Jump」下拉（无后台开关，只能藏）；上下主题样式见 wpforo-unify.css */
#wpforo .wpf-navi-wrap .wpf-forum-jump {
  display: none !important;
}

/* 话题头：统计卡已由后台设置关掉；剩下的管理条（已解决/置顶/关闭/私密/
   删除/工具）只有管理员和帖主能看见，默认也收起，右上角一个「管理」小开关
   （wpf-reply.js 注入，仅当条里真的有按钮时才出现）点开才显示 */
#wpforo .wpforo-topic-head-wrap {
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: right;
}
#wpforo .wpforo-topic-head-wrap .wpf-post-head-bottom {
  display: none;
}
#wpforo .wpforo-topic-head-wrap.myt-manage-open .wpf-post-head-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--myt-wpf-color-line-soft);
  border-radius: 14px;
  background: var(--myt-wpf-color-hover);
  text-align: left;
}

.myt-manage-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  /* 13px = footnote 档：纯管理员辅助入口 */
  font-size: 13px;
  color: var(--myt-wpf-color-ink-tertiary);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.myt-manage-toggle:hover {
  color: var(--myt-wpf-color-ink);
  background: var(--myt-wpf-color-surface-muted);
}
.myt-manage-toggle:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 二、极简双态回复框
 * 结构（Template::reply_form 输出，PHP filter 已换标题行 markup）：
 *   .wpf-form-wrapper.myt-reply
 *     p.wpf-reply-form-title > span.myt-reply-collapsed-row
 *         > img.myt-reply-avatar + span.myt-reply-placeholder + span.myt-reply-fake-btn
 *     .wpf-post-create > form.wpforoeditor.wpforo-main-form
 * `.myt-reply` 由 JS 加；:has() 兜底同样式，避免脚本就绪前闪一下原始表单。
 * ------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-form-wrapper.myt-reply,
#wpforo #wpforo-wrap .wpf-form-wrapper:has(> .wpf-post-create > form.wpforo-main-form) {
  border: 1px solid var(--myt-wpf-color-line) !important;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px 16px !important;
  margin-top: 16px;
  transition: border-color 0.2s ease;
}
#wpforo #wpforo-wrap .wpf-form-wrapper.myt-reply.is-expanded {
  border-color: var(--myt-wpf-color-ink-disabled) !important;
  padding: 16px !important;
}

/* —— 收起态：一行 = 头像 + 占位 + 假按钮 —— */
#wpforo .myt-reply .wpf-reply-form-title,
#wpforo .wpf-form-wrapper:has(> .wpf-post-create > form.wpforo-main-form) .wpf-reply-form-title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-weight: 400 !important;
  cursor: text;
}
.myt-reply-collapsed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
#wpforo img.myt-reply-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  flex: none;
}
.myt-reply-placeholder {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: var(--myt-wpf-color-ink-tertiary);
}
.myt-reply-fake-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  border-radius: 9999px;
  background: var(--myt-wpf-color-line-soft);
  color: var(--myt-wpf-color-ink-tertiary);
  font-size: 15px;
  font-weight: 500;
}

/* 收起态藏表单（JS 版 + :has 兜底版） */
#wpforo .myt-reply:not(.is-expanded) > .wpf-post-create,
#wpforo .wpf-form-wrapper:not(.myt-reply):has(> .wpf-post-create > form.wpforo-main-form) > .wpf-post-create {
  display: none;
}

/* —— 展开态：头像列 + 表单列 —— */
#wpforo #wpforo-wrap .wpf-form-wrapper.myt-reply.is-expanded {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
#wpforo .myt-reply.is-expanded .wpf-reply-form-title {
  cursor: default;
}
#wpforo .myt-reply.is-expanded .myt-reply-placeholder,
#wpforo .myt-reply.is-expanded .myt-reply-fake-btn {
  display: none;
}
#wpforo .myt-reply.is-expanded > .wpf-post-create {
  display: block;
  min-width: 0;
}

/* —— 表单内部（展开态）—— */

/* 标题字段藏掉但保留提交（value 已预填「RE: 话题名」，后端也会兜底） */
#wpforo .myt-reply .wpf-field-name-title,
#wpforo .myt-reply .wpf-label-wrap {
  display: none !important;
}
#wpforo #wpforo-wrap .myt-reply .wpf-tr,
#wpforo #wpforo-wrap .myt-reply .wpf-td {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}
#wpforo #wpforo-wrap .myt-reply .wpf-field {
  margin: 0 !important;
  padding: 0 !important;
}

/* 正文：无边框纯文本区，X 式「文字直接写在卡片上」 */
#wpforo #wpforo-wrap .myt-reply .wpf-field-name-body textarea {
  display: block;
  width: 100% !important;
  min-height: 64px;
  max-height: 400px;
  padding: 8px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 16px !important;
  line-height: 1.6;
  color: var(--myt-wpf-color-ink);
  resize: none;
  overflow-y: auto;
}
#wpforo #wpforo-wrap .myt-reply .wpf-field-name-body textarea:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
#wpforo .myt-reply .wpf-field-name-body textarea::placeholder {
  color: var(--myt-wpf-color-ink-disabled);
}

/* 原生附件行藏起来（input 仍在 DOM 里，图片按钮代理触发）；
   display:none 的 file input 依然可以被 JS .click() 拉起选择框 */
#wpforo .myt-reply .wpf-default-attachment {
  display: none !important;
}

/* 表单级 extra 字段（回复布局按钮等杂项）不需要 */
#wpforo .myt-reply form.wpforo-main-form > .wpf-extra-fields {
  display: none !important;
}

/* —— 第二排：图片/表情 + 回复按钮 —— */
#wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap {
  display: flex !important;
  align-items: center;
  gap: 2px;
  margin: 8px 0 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--myt-wpf-color-line-soft);
  float: none !important;
  width: 100% !important;
  text-align: left !important;
}

.myt-reply-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.myt-reply-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--myt-wpf-color-ink-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.myt-reply-icon-btn:hover {
  background: var(--myt-wpf-color-surface-muted);
  color: var(--myt-wpf-color-ink);
}
.myt-reply-icon-btn:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}
.myt-reply-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 已选文件小标签 */
.myt-reply-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--myt-wpf-color-hover);
  /* 13px = footnote 档：附件名属辅助信息 */
  font-size: 13px;
  color: var(--myt-wpf-color-ink-secondary);
}
.myt-reply-file-chip .myt-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myt-reply-file-chip .myt-chip-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--myt-wpf-color-ink-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.myt-reply-file-chip .myt-chip-remove:hover {
  color: var(--myt-wpf-color-ink);
  background: var(--myt-wpf-color-line-soft);
}

/* 回复按钮：品牌红胶囊；无内容时降透明度（disabled） */
#wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap input[type="submit"].wpf-button {
  margin-left: auto;
  height: 36px;
  padding: 0 22px !important;
  border: none !important;
  border-radius: 9999px !important;
  background: var(--myt-wpf-color-primary) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
#wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap input[type="submit"].wpf-button:hover:not(:disabled) {
  background: var(--myt-wpf-color-primary-hover) !important;
}
#wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap input[type="submit"].wpf-button:disabled {
  opacity: 0.45;
  cursor: default;
}
#wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap input[type="submit"].wpf-button:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* —— emoji 弹层 —— */
.myt-emoji-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: none;
  width: 296px;
  max-width: calc(100vw - 48px);
  padding: 10px;
  border: 1px solid var(--myt-wpf-color-line-soft);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.1);
}
.myt-emoji-pop.is-open {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.myt-emoji-pop button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  /* 22px：emoji 字符本身，非文字排版 */
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.myt-emoji-pop button:hover {
  background: var(--myt-wpf-color-surface-muted);
}
.myt-emoji-pop button:focus-visible {
  outline: 2px solid #111111;
  outline-offset: -2px;
}

/* —— 游客：登录提示做成同款单行卡 —— */
#wpforo #wpforo-wrap .wpf-please-login {
  margin-top: 16px;
  padding: 16px !important;
  border: 1px solid var(--myt-wpf-color-line) !important;
  border-radius: 14px;
  background: #ffffff;
  font-size: 15px;
  color: var(--myt-wpf-color-ink-secondary);
  text-align: left !important;
}

/* ---------------------------------------------------------------------------
 * 三、移动端与动效偏好
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #wpforo #wpforo-wrap .wpf-form-wrapper.myt-reply,
  #wpforo #wpforo-wrap .wpf-form-wrapper:has(> .wpf-post-create > form.wpforo-main-form) {
    padding: 10px 12px !important;
  }
  /* 移动端热区 ≥44px */
  .myt-reply-icon-btn {
    width: 44px;
    height: 44px;
  }
  .myt-manage-toggle {
    padding: 10px 12px;
  }
  #wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap input[type="submit"].wpf-button {
    height: 44px;
  }
  .myt-reply-fake-btn {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wpforo #wpforo-wrap .wpf-form-wrapper.myt-reply,
  .myt-manage-toggle,
  .myt-reply-icon-btn,
  .myt-emoji-pop button,
  #wpforo #wpforo-wrap .myt-reply .wpf-buttons-wrap input[type="submit"].wpf-button {
    transition: none;
  }
}