/* ==========================================================================
   forum.css —— 友人@机器人「评论区」静态页面样式（原生 CSS，无任何 UI 框架）
   承载两页：
     · forum.html       评论区主页面（顶部标签栏 + 筛选条 + 主贴流 + 分页）
     · forum-post.html  主贴详情页（主贴 + 平铺回帖 + 引用块 + 底部回帖框）
   颜色、字体、圆角、阴影全部取自 css/styles.css 第 1 节的变量（暖白纸面 + 淡蓝），
   保证论坛页与首页是同一套语气；类名统一 yf- 前缀，避免与 styles.css 里
   弹窗用的 .forum-* 相互覆盖。
   需求依据：《友人网论坛设计方案-prd2》v1.5
     · 主贴内外都不展示二级标签徽章，标签入口只在顶部标签栏（3.5 / 4.4）
     · 回帖平铺、每页 20 条（5.2 / 5.3）；正文 >300 字折叠（5.6）
     · 引用块只显示前 100 字，点击弹窗看全文（5.5 / 5.6）
     · 详情页头像 40×40 圆角矩形（技术实施方案 8.12）
   目录：
     0. 页面骨架与背景
     1. 顶栏
     2. 顶部标签栏（板块 / 公共标签 / 板块专属标签 / 极简描述）
     3. 筛选条（板块 + 标签 + 排序 + 计数）
     4. 主贴卡片流
     5. 分页
     6. 空态 / 骨架 / 提示
     7. 详情页：面包屑与主贴
     8. 详情页：回帖列表（引用块 / 300 字折叠）
     9. 详情页：底部回帖框
    10. 引用弹窗 / 发帖弹窗 / toast
    11. 响应式与减弱动效
   ========================================================================== */

/* ---------------- 0. 页面骨架与背景 ---------------- */
/* 背景沿用首页的暖白纸面，左上角一层极淡的蓝光晕、右上角一层极淡的暖光，
   让论坛页不至于是一块死白的板；详情页底部要给固定回帖框留出位置 */
.yf-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 520px at 10% -8%, #eef5fb 0%, rgba(238, 245, 251, 0) 64%),
    radial-gradient(760px 460px at 94% 4%, #f7f2e8 0%, rgba(247, 242, 232, 0) 62%),
    var(--yn-paper);
  background-attachment: fixed;
  color: var(--yn-gray-deep);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: clamp(24px, 5vh, 48px);
}
/* 详情页底部有固定回帖框，正文区底部多留一段，末尾的内容不会被压住 */
.yf-body[data-yf-page="post"] { padding-bottom: 210px; }

.yf-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px clamp(12px, 3vw, 24px) 0;
}
/* 列表页的 main 顶部不再留内边距：标签栏（含公共/专属标签那一层）到筛选条之间
   的距离只由 .yf-filter 的 margin-top 一处决定，两个来源叠加就不会是整齐的 20px */
.yf-body[data-yf-page="feed"] .yf-main { padding-top: 0; }

/* ---------------- 1. 顶栏 ---------------- */
/* 论坛页不沿用首页 15vh 的大标题留白：一行小字站名 + 右侧入口就够，
   首屏要尽量留给主贴。只让这一行吸顶（约 48px）：标签栏与筛选条跟着正文滚走，
   视线往下读主贴时不会被一百多像素的筛选区一直占着。 */
/* styles.css 给 body 设了 overflow-x: hidden，这会让 body 变成滚动容器，
   顶栏的 sticky 就被困在里面、跟着页面一起滚走。
   overflow-x: clip 只裁切不建立滚动容器，横向溢出照样不会出现滚动条。 */
.yf-body { overflow-x: clip; }

/* 吸顶要靠「父元素够高」：.yf-top 只包住顶栏（详情页）或顶栏+标签栏（列表页），
   它的盒子太矮，sticky 的顶栏最多只能挪这么点就跟着滚走了。
   用 display: contents 让顶栏的包含块直接变成 body，才能整页吸顶。 */
.yf-top { display: contents; }

.yf-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 252, 248, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--yn-hairline);
}
.yf-topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px clamp(12px, 3vw, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.yf-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.yf-brand-friend { font-family: var(--font-heiti); font-size: 19px; letter-spacing: .04em; color: var(--yn-sky); }
.yf-brand-at { font-family: var(--font-tech); font-size: 20px; color: var(--yn-gray-sign); }
.yf-brand-robot {
  font-family: var(--font-tech);
  font-size: 17px;
  letter-spacing: .18em;
  margin-right: -.18em;
  color: transparent;
  -webkit-text-stroke: .6px var(--yn-sky);
  opacity: .85;
}
.yf-brand-sub {
  margin-left: 8px;
  padding-left: 9px;
  border-left: 1px solid var(--yn-hairline);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--yn-gray-soft);
}
.yf-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.yf-toplink {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--yn-gray-mid);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.yf-toplink:hover { background: var(--sky-50); color: var(--yn-sky-deep); }
.yf-post-btn { padding: 6px 16px; font-size: 13px; }

/* 账号区：已登录显示昵称 + 退出，游客显示「登录」小按钮（true/false 两套顶部栏） */
.yf-account { display: inline-flex; align-items: center; gap: 2px; }
.yf-account-name {
  max-width: 8em;
  padding: 5px 8px;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--yn-gray-deep);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.yf-account-name:hover { background: var(--sky-50); color: var(--yn-sky-deep); }
.yf-login-btn { padding: 6px 16px; font-size: 13px; }

/* ---------------- 2. 顶部标签栏 ---------------- */
/* 标签栏：第一行 5 个板块一级标签，第二行公共二级标签（行首带「公共标签」
   分组标签），选中板块后再多一行板块专属小圆片。标签只显示名字，原本
   跟在下面的那句描述改成了 title 悬停提示（PRD 3.5）。 */
.yf-tagbar {
  max-width: 960px;
  margin: 0 auto;
  /* body 是 flex 纵向容器（styles.css），.yf-top 是 display: contents，
     标签栏因此是 body 的 flex item；光靠 margin: 0 auto 会让它按内容
     收缩宽度再居中（比 .yf-main 窄、整体偏右），必须显式给 100% 才能
     和筛选条、主贴列表同一条左边缘 */
  width: 100%;
  /* 20px 是标签栏与顶栏之间的距离：标签栏和它下面的列表整体下移，不再贴着导航。
     底部不再留内边距：标签栏下沿到板块下拉框的距离统一在 .yf-filter 上给 */
  padding: 20px clamp(12px, 3vw, 24px) 0;
}
/* 详情页的标签栏直接放在 .yf-main 里，横向内边距由 main 提供，避免双重缩进 */
.yf-main > .yf-tagbar {
  max-width: none;
  padding: 0;
  margin: 0 0 12px;
}
/* 标签栏分两行：第一行 5 个板块一级标签，第二行 6 个公共二级标签（行首带
   一个「公共标签」分组标签）。两行都是 flex-wrap（宽屏换行、窄屏自动折行），
   不再需要横向滚动与竖线分隔。 */
.yf-tagbar-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px 0 0;
}

/* 「公共标签」和「专属标签」两行一起包在这一层里（forum.js 里渲染的
   .yf-taggroup-panel）：两行当一个整体，比上面板块那一行再往下挪 20px；
   这一层的下沿到下面的板块下拉框之间固定 20px（见 .yf-filter 与
   .yf-body[data-yf-page="feed"] .yf-main） */
.yf-taggroup-panel {
  padding-top: 20px;
}

/* 板块级标签：字大一点、颜色深一点 */
.yf-tag {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 1px 0 7px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
  color: var(--yn-gray-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease;
}
/* 标签只显示名字：下面那句描述（brief）不再渲染，改挂在 title 悬停提示上，
   所以这里不需要 <small> 的样式 */
.yf-tag:hover { color: var(--yn-sky-deep); }
.yf-tag.is-active { color: var(--yn-sky-deep); font-weight: 600; }
.yf-tag.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--yn-sky);
}
/* 当前选中标签的极简描述：移动端也要留这一行（PRD 3.5） */
.yf-tagbrief {
  margin: 10px 0 0;
  font-family: var(--font-fangsong);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--yn-gray-soft);
}
.yf-tagbrief b { color: var(--yn-sky-deep); font-weight: 400; }

/* 标签栏下面两行小圆片：「公共标签」一行 + 进入板块后的「专属标签」一行。
   两行是同一套：行首一个椭圆分组标签，后面一串长圆角小片（.yf-subtag），
   最前面都是「全部」。 */
.yf-subtags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 0 9px;
}
/* 公共标签那一行只有间距不同：上 20px 是它跟板块那一行之间的距离，
   下 10px 是它跟「专属标签」那一行之间的间隔 */
.yf-subtags--public {
  padding: 20px 0 10px;
}
/* 「公共标签 / 专属标签」两个分组标签：椭圆小片，与同一行的小圆片同尺寸 */
.yf-taggroup-label {
  flex: 0 0 auto;
  border: 1px solid var(--yn-hairline);
  border-radius: 999px;
  color: var(--yn-gray-soft);
  white-space: nowrap;
  letter-spacing: .06em;
  /* 与同一行的小圆片同尺寸（.yf-subtag：11.5px / 2px 10px / 1.7） */
  padding: 2px 10px;
  font-size: 11.5px;
  line-height: 1.7;
}
.yf-subtag {
  border: 1px solid var(--sky-100);
  background: var(--sky-50);
  color: var(--yn-sky-deep);
  padding: 2px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.7;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.yf-subtag:hover { background: var(--sky-100); border-color: var(--sky-200); }
.yf-subtag.is-active { background: var(--yn-sky); border-color: var(--yn-sky); color: #fff; }

/* ---------------- 3. 筛选条 ---------------- */
/* 上 20px 就是上面那一层（公共标签 + 专属标签）的下沿到「板块下拉框」的净距；
   下拉框自己不设高度、跟着这一行拉伸（见 .yf-select 的 align-self），
   不会被垂直居中往下推，这 20px 才在任何板块、任何宽度下都是准的 */
.yf-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}
.yf-select {
  appearance: none;
  -webkit-appearance: none;
  /* 跟同一行的「最新 / 最热」小片一样高：下拉框原本比它矮一截、被垂直居中
     往下压 2px，标签层到下沿的 20px 就会变成 18px，拉伸后两者等高也更好看 */
  align-self: stretch;
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--yn-hairline);
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa6b2' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 9px auto;
  font-family: inherit;
  font-size: 13px;
  color: var(--yn-gray-deep);
  cursor: pointer;
}
.yf-select:hover { border-color: var(--sky-200); }

/* 排序：一个胶囊里两段，选中段浅蓝底 */
.yf-sort {
  display: inline-flex;
  border: 1px solid var(--yn-hairline);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.yf-sort button {
  border: 0;
  background: none;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--yn-gray-mid);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.yf-sort button:hover { background: var(--sky-50); }
.yf-sort button.is-active { background: var(--sky-50); color: var(--yn-sky-deep); font-weight: 600; }

.yf-count { margin-left: auto; font-size: 12.5px; color: var(--yn-gray-soft); }
.yf-count b { color: var(--yn-sky-deep); font-weight: 500; }

/* ---------------- 4. 主贴卡片流 ---------------- */
/* 每张卡片左头像、右正文：摘要（120 字，三行封顶）+ 可选首图 + 一行互动数据。
   卡片里不出现任何二级标签徽章（PRD 3.5 / 4.4），只留板块名作为归属提示。 */
.yf-feed { display: flex; flex-direction: column; gap: 10px; }

.yf-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 17px;
  background: var(--paper);
  border: 1px solid var(--yn-hairline);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(122, 146, 168, .07);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.yf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--sky-200); }
.yf-card:focus-visible { outline: 2px solid var(--sky-500); outline-offset: 2px; }

/* 头像：40×40 圆角矩形（radius 4px），缺省是灰色人像 SVG，不用首字母（技术方案 8.12） */
.yf-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: #f2f2f2;
}
.yf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yf-avatar--sm { width: 32px; height: 32px; }

.yf-card-body { min-width: 0; }
.yf-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yf-name { font-size: 13.5px; font-weight: 600; color: var(--yn-gray-deep); }
.yf-time { font-size: 11.5px; color: var(--yn-gray-soft); }

/* 「最后回复」后面的两类标签：公共=暖灰描边，专属=淡蓝底，前面统一带 # */
.yf-tagset {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.yf-tagchip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
  white-space: nowrap;
}
.yf-tagchip--public {
  color: var(--yn-gray-mid);
  background: transparent;
  border: 1px solid var(--yn-hairline);
}
.yf-tagchip--own {
  color: var(--yn-sky-deep);
  background: var(--sky-50);
  border: 1px solid var(--sky-100);
}

.yf-excerpt {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--yn-gray-deep);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.yf-card-media { margin-top: 10px; }
.yf-card-media img {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  border: 1px solid var(--yn-hairline);
}

.yf-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--yn-gray-soft);
}
.yf-board { color: var(--yn-sky-deep); }
.yf-foot-num { display: inline-flex; align-items: center; gap: 4px; }
.yf-foot-num svg { width: 13px; height: 13px; }

/* ---------------- 5. 分页 ---------------- */
.yf-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px 0 6px;
  font-size: 13px;
}
.yf-pager[hidden] { display: none; }
.yf-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--yn-hairline);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--yn-gray-deep);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.yf-page-btn:hover:not(:disabled) { background: var(--sky-50); border-color: var(--sky-200); color: var(--yn-sky-deep); }
.yf-page-btn.is-active {
  background: linear-gradient(180deg, #8fb6d2, #5c86a6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(123, 167, 201, .3);
}
.yf-page-btn:disabled { color: var(--yn-gray-sign); cursor: not-allowed; background: #fbfaf7; }
.yf-page-gap { padding: 0 2px; color: var(--yn-gray-soft); }
.yf-page-info { font-size: 12.5px; color: var(--yn-gray-soft); margin-left: 2px; }

/* ---------------- 6. 空态 / 骨架 / 提示 ---------------- */
.yf-empty {
  margin: 0;
  padding: 30px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: rgba(253, 252, 248, .75);
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
}
.yf-empty .btn { margin-top: 12px; }

.yf-skel {
  height: 104px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f7f5f0 25%, #fcfbf8 37%, #f7f5f0 63%);
  background-size: 400% 100%;
  animation: yfShimmer 1.4s ease infinite;
}
@keyframes yfShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- 7. 详情页：面包屑与主贴 ---------------- */
.yf-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: 12.5px;
  color: var(--yn-gray-soft);
}
.yf-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  color: var(--yn-gray-mid);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.yf-back:hover { background: var(--sky-50); color: var(--yn-sky-deep); }
.yf-back svg { width: 13px; height: 13px; }
.yf-crumb-board { color: var(--yn-sky-deep); text-decoration: none; }
.yf-crumb-board:hover { text-decoration: underline; }

/* 主贴：正文完整展示，不截断（PRD 3.5 主贴正文不受回帖 300 字限制） */
.yf-mainpost {
  padding: 20px 20px 16px;
  background: var(--paper);
  border: 1px solid var(--yn-hairline);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(122, 146, 168, .07);
}
.yf-mainpost .yf-post-head { display: flex; align-items: flex-start; gap: 12px; }
.yf-mainpost-body { min-width: 0; flex: 1 1 auto; }

.yf-text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--yn-gray-deep);
  white-space: pre-wrap;
  word-break: break-word;
}
.yf-mainpost-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.yf-mainpost-media img {
  display: block;
  width: 100%;
  max-width: 380px;
  border-radius: 10px;
  border: 1px solid var(--yn-hairline);
}

/* 主贴 / 回帖共用的操作行：点赞、引用 */
.yf-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--yn-gray-soft);
}
.yf-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--yn-gray-soft);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.yf-act svg { width: 14px; height: 14px; }
.yf-act:hover { background: var(--sky-50); color: var(--yn-sky-deep); border-color: var(--sky-100); }
.yf-act.is-on { color: var(--red); border-color: #f0ddd6; background: #fdf4f1; }

/* ---------------- 8. 详情页：回帖列表 ---------------- */
.yf-replies { margin-top: 18px; }
.yf-replies-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--yn-hairline);
}
.yf-replies-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--yn-gray-deep);
  letter-spacing: .02em;
}
.yf-replies-head h2 span { color: var(--yn-sky-deep); font-weight: 500; }
.yf-replies-sort { margin-left: auto; font-size: 12px; color: var(--yn-gray-soft); }

/* 每条回帖：左 36px 头像 + 右内容；平铺、无缩进、无父子层级（PRD 5.1） */
.yf-reply {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px dashed var(--yn-hairline);
}
.yf-reply:last-child { border-bottom: 0; }
.yf-reply-body { min-width: 0; }
.yf-reply-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* 回帖正文：超 300 字由 js 截断并加「展开全文」按钮 */
.yf-reply-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--yn-gray-deep);
  white-space: pre-wrap;
  word-break: break-word;
}
.yf-more {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--yn-sky-deep);
  cursor: pointer;
}
.yf-more:hover { text-decoration: underline; }

/* 引用块：左边框 2px、浅灰底、圆角 4px，整块可点开弹窗（技术方案 8.5） */
.yf-quote {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 0;
  border-left: 2px solid var(--sky-200);
  border-radius: 4px;
  background: var(--sky-50);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.75;
  text-align: left;
  color: var(--yn-gray-mid);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.yf-quote:hover { background: var(--sky-100); border-left-color: var(--sky-500); }
.yf-quote b { color: var(--yn-sky-deep); font-weight: 600; }
.yf-quote span { display: block; margin-top: 2px; word-break: break-word; }
.yf-quote.is-deleted {
  border-left-color: var(--yn-line);
  background: #f7f5f0;
  color: var(--yn-gray-soft);
  cursor: default;
}

.yf-reply-media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.yf-reply-media img {
  display: block;
  width: 116px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--yn-hairline);
}

/* ---------------- 9. 详情页：底部回帖框 ---------------- */
.yf-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  background: rgba(253, 252, 248, .95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--yn-hairline);
  box-shadow: 0 -6px 20px rgba(122, 146, 168, .08);
}
.yf-composer-inner { max-width: 960px; margin: 0 auto; padding: 9px clamp(12px, 3vw, 24px) 11px; }

/* 引用预览：点「引用」后出现在输入框上方，右侧 ✕ 取消 */
.yf-quote-preview {
  position: relative;
  margin-bottom: 8px;
  padding: 7px 30px 7px 10px;
  border-left: 2px solid var(--sky-500);
  border-radius: 4px;
  background: var(--sky-50);
  font-size: 12px;
  line-height: 1.7;
  color: var(--yn-gray-mid);
}
.yf-quote-preview[hidden] { display: none; }
.yf-quote-preview b { color: var(--yn-sky-deep); font-weight: 600; }
.yf-quote-preview p {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yf-quote-cancel {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--yn-gray-soft);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yf-quote-cancel:hover { background: var(--sky-100); color: var(--yn-gray-deep); }

.yf-composer-row { display: flex; align-items: flex-end; gap: 10px; }
.yf-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--yn-hairline);
  border-radius: 12px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.yf-input-wrap:focus-within { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(123, 167, 201, .16); }
.yf-input {
  display: block;
  width: 100%;
  max-height: 132px;
  min-height: 44px;
  padding: 11px 13px 4px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: var(--yn-gray-deep);
  resize: none;
  outline: none;
}
.yf-input::placeholder { color: var(--yn-gray-sign); }
.yf-input-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px 8px;
  font-size: 11.5px;
  color: var(--yn-gray-soft);
}
.yf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--yn-gray-soft);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.yf-icon-btn:hover { background: var(--sky-50); color: var(--yn-sky-deep); }
.yf-icon-btn svg { width: 16px; height: 16px; }
.yf-char { margin-left: auto; }
.yf-char.is-over { color: #b3261e; font-weight: 600; }
.yf-send { height: 44px; padding: 0 22px; font-size: 13.5px; border-radius: 12px; }

/* ---------------- 10. 引用弹窗 / 发帖弹窗 / toast ---------------- */
/* 弹窗外壳直接复用 styles.css 第 6 节的 .modal / .modal-mask / .modal-card，
   这里只把宽度与内容收紧一点，保证两处弹窗与全站弹窗长得一样。 */
.yf-modal-card { width: min(560px, 94vw); max-height: 82vh; }
.yf-modal-card .modal-body { padding: 14px 18px 18px; }

.yf-quote-full-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--yn-hairline);
}
.yf-quote-full-head .yf-name { font-size: 14px; }
.yf-quote-full-body {
  margin: 12px 0 0;
  max-height: 46vh;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.9;
  color: var(--yn-gray-deep);
  white-space: pre-wrap;
  word-break: break-word;
}
.yf-quote-full-tip { margin: 10px 0 0; font-size: 12px; color: var(--yn-gray-soft); }

/* 发帖弹窗：标题写板块名、不选板块、正文必填、不提供二级标签选择（PRD 4.1 / 6.1） */
.yf-form { display: flex; flex-direction: column; gap: 12px; }
.yf-field { display: flex; flex-direction: column; gap: 6px; }
.yf-label { font-size: 12.5px; color: var(--yn-gray-mid); letter-spacing: .04em; }
.yf-label em { font-style: normal; color: var(--red); }
.yf-form-textarea {
  width: 100%;
  min-height: 132px;
  padding: 11px 12px;
  border: 1px solid var(--yn-hairline);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.8;
  color: var(--yn-gray-deep);
  resize: vertical;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.yf-form-textarea:focus { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(123, 167, 201, .16); }
/* 发帖弹窗里的选图 input：视觉上藏起来，但不使用 display:none ——
   有些浏览器（旧 Safari / 微信 WebView）不允许用脚本点击 display:none 的 file input */
.yf-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.yf-form-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--yn-gray-soft);
}
.yf-form-foot .yf-char { margin-left: 0; }
.yf-form-foot .btn-primary { margin-left: auto; }

/* 登录弹窗：只有游客会遇到，两项输入 + 一行错误提示 + 记住我 */
.yf-text-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--yn-hairline);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--yn-gray-deep);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.yf-text-input:focus { border-color: var(--sky-500); box-shadow: 0 0 0 3px rgba(123, 167, 201, .16); }
.yf-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--yn-gray-mid);
  cursor: pointer;
}
.yf-checkbox input { width: 14px; height: 14px; accent-color: var(--sky-500); }
.yf-login-error {
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(200, 90, 80, .08);
  font-size: 12.5px;
  color: var(--red);
}
.yf-login-note { font-size: 11.5px; color: var(--yn-gray-soft); }

/* toast：一句话提示，2.4 秒后自己收起来 */
.yf-toast {
  position: fixed;
  left: 50%;
  /* 放在顶部与发帖弹窗之间的空档里：吸顶顶栏 54 + 标签栏 113 ≈ 167px 高，
     弹窗卡片垂直居中后顶边在 1/3 视口处（900 高时约 303），提示落这两者中间，
     既不压住头部，也不盖住弹窗的标题和输入框；
     窗口变矮时 calc 那一段自动把提示往上带，保证始终在弹窗上面 */
  top: min(212px, calc(50vh - 210px));
  /* 必须高于 styles.css 里 .modal 的 z-index:100 ——
     发帖弹窗开着时（上传图片的「已插入 / 上传中 / 失败」提示都在弹窗里触发），
     提示要浮在弹窗和它那层模糊遮罩之上，否则得先关掉弹窗才看得见 */
  z-index: 120;
  /* 从上面滑下来：改到顶部后，位移方向跟着反过来 */
  transform: translateX(-50%) translateY(-8px);
  /* 定宽按内容撑开：left:50% 的收缩宽度只有半屏，字号变大后会把一句话挤成两行 */
  width: max-content;
  max-width: min(92vw, 640px);
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(74, 85, 96, .93);
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .02em;
  box-shadow: 0 10px 26px rgba(74, 85, 96, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.yf-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 登录提示：详情页底部回帖框左侧的一句浅灰小字 */
.yf-login-tip { margin: 0 0 6px; font-size: 11.5px; color: var(--yn-gray-soft); }
.yf-login-tip a { color: var(--yn-sky-deep); text-decoration: none; }
.yf-login-tip a:hover { text-decoration: underline; }

/* 详情页末尾：一句「以上为演示数据」的注脚 */
.yf-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--yn-gray-soft);
  letter-spacing: .02em;
}

/* ---------------- 11. 响应式与减弱动效 ---------------- */
@media (max-width: 720px) {
  /* 窄屏：标签栏字小一档、行距收紧；卡片首图缩一档；回帖头像与正文距离收一收 */
  .yf-tagbar-row { gap: 4px 16px; }
  .yf-tag { font-size: 13px; }
  .yf-tagbrief { margin-top: 8px; font-size: 12px; }
  .yf-filter { gap: 6px; }
  .yf-count { width: 100%; margin-left: 0; text-align: right; }
  .yf-card { padding: 13px 14px; gap: 10px; }
  .yf-card-media img { max-width: 100%; }
  .yf-mainpost { padding: 16px 15px 14px; border-radius: 16px; }
  .yf-mainpost-media img { max-width: 100%; }
  .yf-reply { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 13px 2px; }
  .yf-avatar--sm { width: 32px; height: 32px; }
  .yf-reply-media img { width: 92px; height: 72px; }
  /* 分页窄屏只留「上一页 / 第 X / Y 页 / 下一页」（技术方案 8.4） */
  .yf-page-num { display: none; }
  .yf-page-info { display: inline; }
  .yf-composer-inner { padding: 8px 12px 10px; }
  .yf-send { padding: 0 16px; }
  .yf-body[data-yf-page="post"] { padding-bottom: 190px; }
  .yf-topbar-inner { gap: 8px; }
  .yf-toplink { padding: 5px 6px; }
}

/* 桌面端：分页显示完整页码，隐藏「第 X / Y 页」文字 */
@media (min-width: 721px) {
  .yf-page-info { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .yf-card, .yf-skel, .yf-toast { transition: none; animation: none; }
  .yf-card:hover { transform: none; }
}