/* ═══════════════ 朋友圈与论坛（2026-10-30） ═══════════════
 *
 * 这两屏**刻意不穿游戏里那一身暗底描金**：创作者要的是"现代活泼"——
 * 白底、浅米、论坛再按版面上几支带魔法气息的颜色（浅蓝 / 深紫 / 深蓝 / 深绿…），
 * 各人的气泡一人一色，主打一个五彩斑斓。
 *
 * ⚠️ 老规矩：这一屏里的**每一个表面**都要穿这套皮——
 *    顶栏、返回、卡片、每一颗按钮（含 hover / active / disabled 三态）、
 *    底部输入栏、滚动条、以及从这一屏弹出去的那两张纸（发动态 / 发一帖 / 清空确认）。
 *    皮挂在两个作用域上：`.social`（整屏那一层）与 `.sheet.social-sheet`（弹出去的纸）。
 *    **不许在调用处一颗一颗加 kind**——那样必漏。
 *    所以默认那张羊皮纸（.btn 的通用米黄底 + 左边一道红条）在这两个作用域里一律被盖掉。
 *
 * 一人一色那一支颜色不在这里：它从 data/social-cast.js 查出来，
 * 由 ui/social.js 的 socialColor / socialTint 内联成 --soc-c 与 rgba 底色。
 * 一版一色那一支在这里（.social[data-board=…]），改主题只改这一段。
 */

/* ───────── 整屏那一层 ───────── */

.social-host { position: fixed; inset: 0; z-index: 46; pointer-events: none; }
.social-host:empty { display: none; }

/*
 * 刷朋友圈的时候页面那一层让开（和 body.owl-live 同一条理由）：
 * 这一层铺满整屏，底下那屏的牌子会从边上露出来。
 * 用 visibility 不用 display：留着占位，页面高度不塌，合上时滚动位置不跳。
 */
body.social-live .view,
body.social-live .tray { visibility: hidden; }

/*
 * 这一身皮的那几个变量。
 *
 * ⚠️ **两个作用域都要挂**：整屏那一层（.social）与从它弹出去的那几张纸
 * （.sheet.social-sheet）。弹纸是挂在 body 底下的 #overlay-card 里的，**不在 .social 里面**——
 * 只挂在 .social 上，纸里那些 `var(--soc-accent)` 就取不到值，
 * 整条 background 会当无效声明丢掉、变成透明（2026-10-30 实测：【发布】那颗钮成了白字透明底）。
 */
.social,
.sheet.social-sheet {
  /*
   * ⚠️ 全局 body 上有一道 `text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.6)`
   *    ——那是给"压在照片上的亮字"配的暗晕。这一身皮是白底黑字，继承下来每个字都套一圈
   *    黑边，11px 的时间行直接糊成一团（2026-10-30 他截图点出来的「字有晕影看不清」）。
   *    所以这两屏**一律不继承那道晕**，这里摘干净。
   */
  text-shadow: none;

  --soc-bg: #f6f2e9;          /* 浅米：这一屏的底 */
  --soc-card: #ffffff;        /* 卡片：纯白，压在浅米上才跳得出来 */
  --soc-ink: #2f2a24;         /* 正文墨色 */
  --soc-ink-2: #6f675c;       /* 压暗一档：时间、日期、计数 */
  --soc-ink-3: #9a9184;       /* 再压一档：英文小字 */
  --soc-line: rgba(47, 42, 36, 0.12);
  --soc-accent: #4a7fb5;      /* 这一屏的主色（朋友圈：浅蓝） */
  --soc-accent-soft: rgba(74, 127, 181, 0.12);
  --soc-c: #4a7fb5;           /* 发帖人自己那一色（内联覆盖） */
}

.social {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #fbf8f1 0%, var(--soc-bg) 42%, #efe9dc 100%);
  color: var(--soc-ink);
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
}

/*
 * 论坛那一屏：主色跟着版面走（一版一色，改主题只改这一段）。
 *
 * ⚠️ 每一行都写了**两个选择器**：整屏那一层（`.social.forum[data-board=…]`）
 *    和从这一版弹出去的那张纸（`.sheet.social-sheet.board-…`，类名由 ui/forum.js 传进 openSheet）。
 *    纸挂在 body 底下的 #overlay-card 里，**不在 .social 这一层里面**，取不到 data-board；
 *    早先试过开完纸再用 JS 把主色抄过去，那条路在页面不在前台时会被 CSS 过渡卡在起点
 *    （computed 一直是旧色），所以改成类名——纸上先天就是这一版的色。
 *    颜色只此一处，两个选择器共用同一行。
 */
.social.forum { --soc-accent: #4a7fb5; --soc-accent-soft: rgba(74, 127, 181, 0.12); }

.social.forum[data-board="daily"],     .sheet.social-sheet.board-daily
  { --soc-accent: #4a7fb5; --soc-accent-soft: rgba(74, 127, 181, 0.13); }   /* 浅蓝 */
.social.forum[data-board="potions"],   .sheet.social-sheet.board-potions
  { --soc-accent: #2f6b52; --soc-accent-soft: rgba(47, 107, 82, 0.13); }    /* 深绿 */
.social.forum[data-board="quidditch"], .sheet.social-sheet.board-quidditch
  { --soc-accent: #8a3b2f; --soc-accent-soft: rgba(138, 59, 47, 0.13); }    /* 深红 */
.social.forum[data-board="housecup"],  .sheet.social-sheet.board-housecup
  { --soc-accent: #7a5c1e; --soc-accent-soft: rgba(122, 92, 30, 0.14); }    /* 麦金 */
.social.forum[data-board="help"],      .sheet.social-sheet.board-help
  { --soc-accent: #33408f; --soc-accent-soft: rgba(51, 64, 143, 0.13); }    /* 深蓝 */
.social.forum[data-board="gossip"],    .sheet.social-sheet.board-gossip
  { --soc-accent: #6b4f9e; --soc-accent-soft: rgba(107, 79, 158, 0.13); }   /* 深紫 */
.social.forum[data-board="market"],    .sheet.social-sheet.board-market
  { --soc-accent: #2f6f6a; --soc-accent-soft: rgba(47, 111, 106, 0.13); }   /* 青绿 */

/* ───────── 顶栏 ───────── */

.soc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--soc-line);
  box-shadow: 0 2px 10px rgba(47, 42, 36, 0.06);
}

.soc-back {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--soc-line);
  border-radius: 10px;
  background: #fff;
  color: var(--soc-accent);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.soc-back:hover { background: var(--soc-accent-soft); }
.soc-back:active { transform: scale(.94); }

.soc-title { flex: 1 1 auto; min-width: 0; }
.soc-zh {
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--soc-ink);
  line-height: 1.2;
}
.soc-en {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soc-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.soc-head .soc-en { color: var(--soc-accent); opacity: .8; }

/* ───────── 按钮：这一屏里的每一颗都穿这套皮 ───────── */

/*
 * 作用域是 `.social .btn` 与 `.sheet.social-sheet .btn`（下面那一段），
 * **不是**给每颗钮加 kind：调用处一颗颗加必漏。
 * 通用那张羊皮纸（米黄底 + 左边一道红条）在这儿整条盖掉。
 */
.social .btn,
.sheet.social-sheet .btn {
  position: relative;
  flex: 0 0 auto;
  /*
   * ⚠️ `.btn` 在 main.css 里生来是 `width: 100%` 的整行块（那一身是给纸上的大动作钮用的）。
   * 这一屏顶栏那两颗（清空 / 刷一条）是并排的小钮——不收回来，它们各占满一行，
   * 中间那格标题会被 flex 压成 0 宽、竖成一个字一行（2026-10-30 量出来的）。
   * 按工程那条"动作钮按内容宽"的规矩：这里一律 auto。
   */
  width: auto;
  padding: 7px 14px;
  border: 1px solid var(--soc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--soc-ink);
  font-family: inherit;
  font-size: var(--fs-s);
  letter-spacing: .04em;
  box-shadow: 0 1px 3px rgba(47, 42, 36, 0.08);
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}
/* 通用那颗左边那道红条：这一屏里不要 */
.social .btn::before,
.sheet.social-sheet .btn::before { content: none !important; }

.social .btn:hover,
.sheet.social-sheet .btn:hover { background: var(--soc-accent-soft); color: var(--soc-accent); }
.social .btn:active,
.sheet.social-sheet .btn:active { transform: scale(.97); }

.social .btn:disabled,
.sheet.social-sheet .btn:disabled {
  background: #f1ece2;
  color: #b3aa9c;
  border-color: rgba(47, 42, 36, 0.08);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* 主色那几颗：刷一条 / 刷一版 / 发布 */
.social .btn.soc-refresh,
.sheet.social-sheet .btn.soc-go {
  background: var(--soc-accent);
  border-color: var(--soc-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(47, 42, 36, 0.16);
}
.social .btn.soc-refresh:hover,
.sheet.social-sheet .btn.soc-go:hover { filter: brightness(1.08); color: #fff; }
.social .btn.soc-refresh:disabled,
.sheet.social-sheet .btn.soc-go:disabled {
  background: #ddd6c9; border-color: #ddd6c9; color: #fff; filter: none;
}

/* 次一级那颗（清空）：不抢眼，但一眼看得出是能点的 */
.social .btn.soc-ghost { color: var(--soc-ink-2); }
.social .btn.soc-ghost:hover { color: #a33b2f; background: rgba(163, 59, 47, 0.1); }

/* 确认纸上那颗真删的：整颗红，不靠图标吓人 */
.sheet.social-sheet .btn.soc-danger {
  background: #b23a2c;
  border-color: #b23a2c;
  color: #fff;
  font-weight: 600;
}
.sheet.social-sheet .btn.soc-danger:hover { filter: brightness(1.08); color: #fff; }

/* ───────── 中间那一栏 ───────── */

.soc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 滚动条也穿这套皮（浅底上一条细灰，别露出系统那根粗的） */
.soc-body::-webkit-scrollbar { width: 8px; }
.soc-body::-webkit-scrollbar-track { background: transparent; }
.soc-body::-webkit-scrollbar-thumb { background: rgba(47, 42, 36, 0.18); border-radius: 999px; }
.soc-body::-webkit-scrollbar-thumb:hover { background: rgba(47, 42, 36, 0.3); }

/* ───────── 版那一排（论坛） ───────── */

.soc-boards {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.soc-boards::-webkit-scrollbar { height: 0; }

.soc-board {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 13px;
  border: 1px solid var(--soc-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--soc-ink-2);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.soc-board .soc-board-zh { font-size: var(--fs-s); letter-spacing: .04em; line-height: 1.25; }
.soc-board .soc-board-en {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soc-ink-3); line-height: 1.2;
}
.soc-board:hover { background: #fff; color: var(--soc-accent); border-color: var(--soc-accent); }
.soc-board:active { transform: scale(.96); }
.soc-board:disabled { opacity: .5; cursor: default; transform: none; }
/* 现在停在这一版：整颗穿上这一版的主色 */
.soc-board.on {
  background: var(--soc-accent);
  border-color: var(--soc-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(47, 42, 36, 0.18);
}
.soc-board.on .soc-board-en { color: rgba(255, 255, 255, 0.78); }

/* 版面那一句（这一版该聊什么，直述一行） */
.soc-board-note {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 2px;
}
.soc-board-note .soc-board-zh {
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--soc-accent);
  letter-spacing: .05em;
}
.soc-board-note .soc-board-say { font-size: var(--fs-xs); color: var(--soc-ink-3); }

/* ───────── 卡片（一条动态 / 一帖） ───────── */

.soc-card {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 14px 10px 15px;
  background: var(--soc-card);
  border: 1px solid var(--soc-line);
  /* 左边那道竖条 = 发帖人自己那一色（内联的 --soc-c） */
  border-left: 3px solid var(--soc-c);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 2px 10px rgba(47, 42, 36, 0.07);
}
/* 玩家自己发的那一条：底换成浅米，一眼分得出"这是我发的" */
.soc-card.mine {
  background: linear-gradient(180deg, #fffdf7, #f8f2e4);
  border-left-color: #b8862b;
}

.soc-card-head { display: flex; align-items: flex-start; gap: 9px; }
.soc-card-who { flex: 1 1 auto; min-width: 0; }
.soc-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.soc-name { font-size: var(--fs-s); font-weight: 600; color: var(--soc-ink); letter-spacing: .02em; }
.soc-time { font-size: 11px; color: var(--soc-ink-3); margin-top: 2px; line-height: 1.3; }

/* 一颗圆头像（没有立绘的那些人：人设表里那一人一色 + 首字） */
.soc-face {
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(47, 42, 36, 0.16);
  user-select: none;
}
.soc-face.anon { box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.14); }
.soc-face.me {
  background: linear-gradient(160deg, #b8862b, #8c5f1c);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(47, 42, 36, 0.18);
}
/* 在册那四位走的是真正的头像（shell.js 的 .who-face），在浅底上补一圈边才不吃底 */
.soc-card .who-face { border: 1px solid var(--soc-line); box-shadow: 0 1px 3px rgba(47, 42, 36, 0.14); }

/* 学院那一枚 / 身份那一枚：浅色族 + 同族细边，一眼分档 */
.soc-house {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.5;
}
.soc-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.5;
  background: rgba(47, 42, 36, 0.07);
  color: var(--soc-ink-2);
}
.soc-tag.t-ghost    { background: rgba(125, 138, 153, 0.16); color: #4f5c6b; }
.soc-tag.t-portrait { background: rgba(122, 92, 30, 0.14);   color: #6b5218; }
.soc-tag.t-staff    { background: rgba(51, 64, 143, 0.13);   color: #2c3878; }
.soc-tag.t-anon     { background: rgba(107, 79, 158, 0.14);  color: #5b4288; }

/* 正文 */
.soc-text {
  margin-top: 8px;
  font-size: var(--fs-s);
  line-height: 1.65;
  color: var(--soc-ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/*
 * 配图那一格：这是一张**会动的魔法照片**，工程里没有图可挂，
 * 所以摆一个浅蓝相框 + 一句"照片里正在发生什么"，框里那层光慢慢游——
 * 照片是活的，这一格就不该是死的。
 */
.soc-photo {
  position: relative;
  margin-top: 9px;
  padding: 12px 13px;
  border: 1px solid rgba(74, 127, 181, 0.28);
  border-radius: 3px 12px 12px 3px;
  background: linear-gradient(150deg, #eef4fb, #e3ecf6 55%, #f2f6fb);
  overflow: hidden;
}
.soc-photo-shine {
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
  animation: socShine 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes socShine {
  0%   { transform: translate3d(-38%, 0, 0); }
  55%  { transform: translate3d(38%, 0, 0); }
  100% { transform: translate3d(-38%, 0, 0); }
}
.soc-photo-tx {
  position: relative;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: #33506e;
  font-style: italic;
}
.soc-photo-tx::before { content: '📷 '; font-style: normal; opacity: .7; }

/* 点赞那一行 */
.soc-likes {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: 3px 10px 10px 3px;
  background: rgba(178, 58, 44, 0.07);
}
.soc-heart { color: #c0453a; font-size: var(--fs-xs); line-height: 1.6; }
.soc-likes-tx { font-size: var(--fs-xs); line-height: 1.6; color: #8d4238; }

/* 评论区（一人一色的底，从内联的 rgba 长出来） */
.soc-comments,
.soc-replies {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.soc-replies-head {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--soc-ink-3);
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--soc-line);
  margin-bottom: 2px;
}
.soc-comment {
  padding: 6px 10px;
  border: 1px solid var(--soc-line);
  border-left: 2px solid var(--soc-line);
  border-radius: 3px 10px 10px 3px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--soc-ink);
  overflow-wrap: break-word;
}
.soc-comment.mine { background: rgba(184, 134, 43, 0.1) !important; border-color: rgba(184, 134, 43, 0.3) !important; }
.soc-cm-name { font-weight: 600; }
.soc-cm-to { color: var(--soc-ink-3); }
.soc-cm-tx { color: var(--soc-ink); }
.soc-comment .soc-house { margin: 0 4px; transform: scale(.92); }

/* 卡片底那一排（赞 / 火花 / 日期） */
.soc-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--soc-line);
}
.soc-day { margin-left: auto; font-size: 11px; color: var(--soc-ink-3); }

.soc-like,
.soc-spark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid var(--soc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--soc-ink-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.soc-like:hover { background: rgba(192, 69, 58, 0.09); color: #b23a2c; border-color: rgba(178, 58, 44, 0.35); }
.soc-like.on { background: rgba(192, 69, 58, 0.13); color: #b23a2c; border-color: rgba(178, 58, 44, 0.4); font-weight: 600; }
.soc-spark:hover { background: var(--soc-accent-soft); color: var(--soc-accent); border-color: var(--soc-accent); }
.soc-spark.on {
  background: var(--soc-accent);
  border-color: var(--soc-accent);
  color: #fff;
  font-weight: 600;
}
.soc-like:active, .soc-spark:active { transform: scale(.95); }
.soc-spark-ico { font-size: var(--fs-s); line-height: 1; }
.soc-spark-n { font-variant-numeric: tabular-nums; }

/* 论坛帖子的标题 */
.soc-th-title {
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--soc-ink);
  margin-bottom: 8px;
  overflow-wrap: break-word;
}
.social.forum .soc-th-title { border-bottom: 1px solid var(--soc-accent-soft); padding-bottom: 7px; }

/* ───────── 加载中 / 空态 / 出错 ───────── */

.soc-busy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px dashed rgba(74, 127, 181, 0.4);
  border-radius: 3px 12px 12px 3px;
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-xs);
  color: var(--soc-accent);
}
.soc-busy .dots { display: inline-flex; gap: 4px; }
.soc-busy .dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: socBlot 1s ease-in-out infinite;
}
.soc-busy .dots i:nth-child(2) { animation-delay: .15s; }
.soc-busy .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes socBlot {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.soc-empty { flex: 0 0 auto; text-align: center; padding: 26px 12px 4px; }
.soc-empty-zh { font-size: var(--fs-s); color: var(--soc-ink-2); letter-spacing: .04em; }
.soc-empty-en { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--soc-ink-3); margin-top: 3px; }
.soc-hint { flex: 0 0 auto; text-align: center; font-size: var(--fs-xs); color: var(--soc-ink-3); padding: 0 18px; line-height: 1.6; }

/* 屏顶那一行失败原因（直述，不俏皮） */
.soc-err {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(178, 58, 44, 0.35);
  border-left: 3px solid #b23a2c;
  border-radius: 3px 10px 10px 3px;
  background: rgba(178, 58, 44, 0.08);
  color: #8d3226;
  font-size: var(--fs-xs);
  line-height: 1.55;
}
/* 玩家自己那一条下面那句"这一趟砸了"（动态本身还在，所以只压一行小字） */
.soc-why { margin-top: 8px; font-size: 11px; color: #a3564a; line-height: 1.5; }

/* ───────── 底部输入栏 ───────── */

.soc-bar {
  flex: 0 0 auto;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--soc-line);
  box-shadow: 0 -2px 10px rgba(47, 42, 36, 0.05);
}

/* 那一整条就是颗按钮（点开才是那张写字的纸）：像聊天软件底下那条输入框 */
.soc-compose {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--soc-line);
  border-radius: 999px;
  background: #fbf9f4;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.soc-compose:hover { background: #fff; border-color: var(--soc-accent); }
.soc-compose:active { transform: scale(.995); }
.soc-compose:disabled { background: #f1ece2; border-color: rgba(47, 42, 36, 0.08); cursor: default; transform: none; }
.soc-compose-tx {
  flex: 1 1 auto; min-width: 0;
  text-align: left;
  font-size: var(--fs-s);
  color: var(--soc-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soc-compose-go {
  flex: 0 0 auto;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--soc-accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
}
.soc-compose:disabled .soc-compose-go { background: #ddd6c9; }

/* ───────── 从这一屏弹出去的那几张纸 ───────── */

/*
 * 发动态 / 发一帖 / 清空确认，三张纸都挂 skin: 'social-sheet'。
 * 纸本身也要穿这套皮：底、标题、那个 × 、滚动条、每一颗按钮、输入框。
 * ⚠️ 头部已经有一个 ×，所以底部只摆真动作（发布 / 清空），不再放第二颗"关闭"。
 */
.sheet.social-sheet {
  background: linear-gradient(180deg, #fffdf8, #f7f2e7);
  border: 1px solid var(--soc-line, rgba(47, 42, 36, 0.14));
  color: #2f2a24;
  box-shadow: 0 18px 50px rgba(20, 15, 10, 0.4);
}
.sheet.social-sheet .sheet-head { border-bottom: 1px solid rgba(47, 42, 36, 0.12); }
.sheet.social-sheet .sheet-head h2 { color: #2f2a24; letter-spacing: .05em; }
.sheet.social-sheet .x-btn {
  background: #fff;
  border: 1px solid rgba(47, 42, 36, 0.14);
  border-radius: 50%;
}
.sheet.social-sheet .x-btn:hover { background: rgba(178, 58, 44, 0.1); border-color: rgba(178, 58, 44, 0.4); }
.sheet.social-sheet::-webkit-scrollbar { width: 8px; }
.sheet.social-sheet::-webkit-scrollbar-thumb { background: rgba(47, 42, 36, 0.18); border-radius: 999px; }

/* 写字那几格 */
.soc-field { display: block; margin-top: 12px; }
.soc-field-zh { display: block; font-size: var(--fs-s); color: #2f2a24; letter-spacing: .05em; }
.soc-field-en {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a9184;
  margin: 1px 0 6px;
}
.soc-ta,
.soc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(47, 42, 36, 0.18);
  border-radius: 3px 11px 11px 3px;
  background: #fff;
  color: #2f2a24;
  font-family: inherit;
  font-size: var(--fs-s);
  line-height: 1.6;
  resize: vertical;
}
.soc-input { border-radius: 999px; }
.soc-ta:focus,
.soc-input:focus {
  outline: none;
  border-color: #4a7fb5;
  box-shadow: 0 0 0 3px rgba(74, 127, 181, 0.14);
}
.soc-ta::placeholder,
.soc-input::placeholder { color: #b3aa9c; }
.soc-count { margin-top: 4px; text-align: right; font-size: 11px; color: #9a9184; font-variant-numeric: tabular-nums; }

/* 确认纸上那句后果（直述） */
.soc-confirm { margin: 6px 0 0; font-size: var(--fs-s); line-height: 1.7; color: #4a4238; }

/* ═══════════════ 两屏怎么分开（2026-10-30 他点「样式太雷同」之后） ═══════════════
 *
 * 上面那一大段是**两屏共用**的骨架（顶栏、卡片、评论、底部输入栏），
 * 这一节只做区分：同一套零件，两屏各长成自己的样子——
 *
 *   朋友圈 = 暖白、圆润、松弛     （手机里那条动态流：大圆角、留白多、相框大）
 *   论坛   = 冷灰蓝、方正、密排   （校园公告板：报头压一条主色、直角卡片、标题用衬线）
 *
 * ⚠️ 区分靠的是**形状 / 底色 / 字族 / 密度**，不是"同一个框换个颜色"——
 *    论坛那一排版块改成带下划线的标签页（不再是圆药丸），帖子标题换成衬线大字，
 *    火花从圆钮退成一行小字，卡片从 18px 圆角压成 3px 直角。一眼就该看得出是两个地方。
 */

/* ───────── 朋友圈：暖白、圆润、松弛 ───────── */

.social.moments .soc-body { gap: 12px; padding: 14px 12px 20px; }

.social.moments .soc-card {
  border-radius: 4px 18px 18px 4px;
  padding: 14px 15px 12px 16px;
  box-shadow: 0 3px 14px rgba(90, 66, 34, 0.08);
}
.social.moments .soc-card.mine {
  box-shadow: 0 3px 16px rgba(150, 110, 40, 0.12);
}

/* 相框：朋友圈里这是主角，给足高度与圆角（照片是"会动的"，所以那道光一直在游） */
.social.moments .soc-photo {
  margin-top: 10px;
  min-height: 92px;
  padding: 13px 14px;
  border-radius: 4px 14px 14px 4px;
}
.social.moments .soc-photo-tx { font-size: var(--fs-s); line-height: 1.7; }

/* 点赞那一行做得像一颗软药丸（论坛那边不用这一套） */
.social.moments .soc-likes {
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(192, 69, 58, 0.08);
}

/* 评论：比论坛松一点、圆一点 */
.social.moments .soc-comment {
  border-radius: 4px 12px 12px 4px;
  padding: 7px 11px;
  line-height: 1.7;
}

/* 正文：朋友圈的字可以大一点、行距松一点（一条动态就那么几句话） */
.social.moments .soc-text { font-size: var(--fs-s); line-height: 1.75; margin-top: 9px; }

/* ───────── 论坛：冷灰蓝、方正、密排 ───────── */

/*
 * 底色换成冷的灰蓝（和朋友圈那层暖米一眼就分开）。
 * 只换底色不够——真正的分辨点是下面那条**报头**与**直角卡片**。
 */
.social.forum {
  background:
    linear-gradient(180deg, #f3f7fb 0%, #e8eef5 46%, #dde6ef 100%);
}
.social.forum .soc-body { gap: 7px; padding: 8px 10px 16px; }

/* 报头：整条压上这一版的主色，白字。像论坛顶上那块横额 */
.social.forum .soc-head {
  padding: 9px 12px;
  background: var(--soc-accent);
  border-bottom: none;
  box-shadow: 0 3px 14px rgba(25, 38, 52, 0.22);
}
.social.forum .soc-back {
  background: rgba(255, 255, 255, 0.94);
  border-color: transparent;
  color: var(--soc-accent);
  border-radius: 8px;
}
.social.forum .soc-back:hover { background: #fff; }
.social.forum .soc-zh {
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-l);
  letter-spacing: 0.14em;
}
.social.forum .soc-head .soc-en { color: rgba(255, 255, 255, 0.72); opacity: 1; }

/* 报头上那两颗钮：穿白的，不许露出米黄 */
.social.forum .soc-head .btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  box-shadow: none;
}
.social.forum .soc-head .btn:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.social.forum .soc-head .btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.55);
}
.social.forum .soc-head .btn.soc-refresh {
  background: #fff;
  border-color: #fff;
  color: var(--soc-accent);
}
.social.forum .soc-head .btn.soc-refresh:disabled {
  background: rgba(255, 255, 255, 0.42);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.85);
}

/*
 * 版块那一排：**标签页**，不是圆药丸。
 * 一条细底线压着，选中的那一格底下一条主色横杠——论坛顶上那种分版条。
 */
.social.forum .soc-boards {
  gap: 2px;
  padding: 0 0 0;
  border-bottom: 1px solid rgba(40, 58, 78, 0.14);
}
.social.forum .soc-board {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 6px 11px 7px;
  color: var(--soc-ink-2);
  box-shadow: none;
}
.social.forum .soc-board:hover { background: transparent; color: var(--soc-accent); border-color: var(--soc-accent-soft); }
.social.forum .soc-board.on {
  background: transparent;
  border-bottom-color: var(--soc-accent);
  color: var(--soc-accent);
  box-shadow: none;
}
.social.forum .soc-board.on .soc-board-zh { font-weight: 600; }
.social.forum .soc-board.on .soc-board-en { color: var(--soc-accent); opacity: 0.6; }
.social.forum .soc-board:disabled { opacity: 0.45; }

.social.forum .soc-board-note { padding: 2px 4px 6px; }
.social.forum .soc-board-say { font-size: 11px; }

/*
 * 帖子卡片：直角、密、左边那道竖条压粗一点。
 * 论坛是"一版里有很多帖"，所以密度优先——它和朋友圈那种"一条一条慢慢看"正好相反。
 */
.social.forum .soc-card {
  border-radius: 3px;
  border-left-width: 4px;
  padding: 9px 12px 8px;
  box-shadow: 0 1px 3px rgba(30, 45, 60, 0.1);
}
.social.forum .soc-card.mine { background: #fdfaf2; }

/* 帖子标题：衬线大字 + 一道细线——这是论坛里最像"帖子"的那一处 */
.social.forum .soc-th-title {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--soc-accent-soft);
}
.social.forum .soc-text { font-size: 13px; line-height: 1.72; margin-top: 7px; color: #3a4654; }
.social.forum .soc-time { font-size: 11px; color: #6d7885; }
.social.forum .soc-name { font-size: 12px; }

/* 回复：缩在一块浅底里，每条左边一道短竖条（引用帖子的那种排法） */
.social.forum .soc-replies {
  margin-top: 7px;
  padding: 6px 8px 7px;
  border-radius: 2px;
  background: rgba(56, 78, 100, 0.045);
  gap: 4px;
}
.social.forum .soc-replies-head {
  font-size: 10px;
  letter-spacing: 0.1em;
  border-bottom: none;
  padding-bottom: 1px;
  margin-bottom: 1px;
  color: #7c8794;
}
.social.forum .soc-comment {
  border-radius: 2px;
  border-left-width: 2px;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.65;
}

/* 火花：从圆钮退成一行小字（点一下才亮），帖子里不该抢标题的戏 */
.social.forum .soc-card-foot { margin-top: 7px; padding-top: 6px; }
.social.forum .soc-spark {
  border: none;
  background: transparent;
  padding: 2px 6px;
  color: #6b7785;
  font-size: 11px;
}
.social.forum .soc-spark:hover { background: var(--soc-accent-soft); color: var(--soc-accent); border: none; }
.social.forum .soc-spark.on {
  background: var(--soc-accent-soft);
  color: var(--soc-accent);
  font-weight: 600;
}
.social.forum .soc-day { font-size: 11px; color: #7c8794; }

/* 底部那条：论坛是"发一帖"，做成方的；朋友圈那条是圆的（两屏各走各的） */
.social.forum .soc-bar {
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(40, 58, 78, 0.14);
  box-shadow: 0 -2px 10px rgba(30, 45, 60, 0.06);
}
.social.forum .soc-compose {
  border-radius: 3px;
  background: #fff;
  border-color: rgba(40, 58, 78, 0.16);
}
.social.forum .soc-compose:hover { background: #fff; border-color: var(--soc-accent); }
.social.forum .soc-compose-go { border-radius: 2px; }

/* 论坛的"正在写"那一行：也跟着方一点 */
.social.forum .soc-busy { border-radius: 2px; }