/* ============================================================
 * css/screens/chat.css — 「江湖·世界」世界聊天 + 「传书」邮件（联网版）
 * 归属：chat/mail 组（js/screens/chat.js + js/screens/mail.js）。
 * 前缀：.ct-（聊天） .ml-（传书）；只依赖 theme.css 的变量与 .btn/.badge/.seal/.modal-input 组件，
 *       不改 theme.css / screens.css / home.css。木框宣纸风，画布 448×960 内像素写死。
 * ============================================================ */

/* ===================== 通用：两个弹窗都做成近全屏木框 ===================== */
.ct-modal, .ml-modal { width: 432px; max-height: 900px; }
.ct-modal .modal-body, .ml-modal .modal-body { padding: 8px; }

/* ===================== 世界聊天 ===================== */
.ct-wrap { display: flex; flex-direction: column; height: 604px; }

/* 顶条：自己的江湖名帖 + 驿站状态 */
.ct-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 28px; padding: 0 8px; margin-bottom: 6px; border-radius: 5px;
  background: var(--tex-wood), linear-gradient(180deg, #6b3a16, #3f1f0b);
  box-shadow: inset 0 0 0 1px rgba(242,194,69,.5), inset 0 -2px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.45);
  font-size: 12px; color: #e8cf9a; }
.ct-bar .ct-mine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-bar .ct-gid { color: var(--gold); font-weight: 700; letter-spacing: .5px; cursor: pointer;
  border-bottom: 1px dashed rgba(242,194,69,.6); padding-bottom: 1px; }
.ct-bar .ct-gid:active { filter: brightness(1.25); }
.ct-status { flex: none; padding: 0 7px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 11px;
  background: rgba(0,0,0,.35); color: #cbb68c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ct-status.on { color: #a9e6bd; background: rgba(30,80,45,.55); box-shadow: inset 0 0 0 1px rgba(126,208,143,.35); }
.ct-status.off { color: #ffc9be; background: rgba(110,20,12,.6); box-shadow: inset 0 0 0 1px rgba(216,50,31,.45); }

/* 消息区 */
.ct-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none;
  padding: 8px 6px; border-radius: 5px; display: flex; flex-direction: column; gap: 8px;
  background: var(--tex-paper), linear-gradient(180deg, #f6ecd2, #ecdcb6 60%, #e2cea2);
  box-shadow: inset 0 0 0 1px rgba(255,248,225,.7), inset 0 0 22px rgba(150,105,45,.28); }
.ct-msgs::-webkit-scrollbar { display: none; }
.ct-empty { margin: auto; padding: 30px 12px; text-align: center; font-family: var(--font-brush);
  font-size: 21px; letter-spacing: 3px; line-height: 1.7; color: var(--ink-faint); }
.ct-empty .sm { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }

.ct-m { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%;
  animation: ctIn .22s ease-out; }   /* 不写 both：动画没跑起来时至少还看得见消息（同 css/screens.css .screen-enter） */
@keyframes ctIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ct-m .ct-meta { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 0 2px; }
.ct-lv { flex: none; min-width: 20px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px;
  font-weight: 700; line-height: 16px; text-align: center; color: #5a2b00;
  background: linear-gradient(180deg, #fff0b3, #f2c245 55%, #b8860b);
  box-shadow: 0 0 0 1px #7a4f00, inset 0 1px 0 rgba(255,255,255,.6); }
.ct-nm { font-size: 12px; font-weight: 700; color: var(--blue-dark); cursor: pointer;
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px dotted rgba(47,111,181,.55); }
.ct-nm:active { color: var(--red); }
.ct-tm { flex: none; font-size: 10px; color: var(--ink-faint); }

/* 气泡 */
.ct-bb { position: relative; max-width: 322px; padding: 7px 10px; border-radius: 4px 10px 10px 10px;
  font-size: 14px; line-height: 1.55; color: var(--ink); word-break: break-word; white-space: pre-wrap;
  background: linear-gradient(180deg, #fffaea, #f4e8c8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(90,60,20,.35), 0 0 0 1px rgba(120,85,35,.35); }
.ct-m.me { align-self: flex-end; align-items: flex-end; }
.ct-m.me .ct-meta { flex-direction: row-reverse; }
.ct-m.me .ct-nm { color: var(--jade-dark); border-bottom-color: rgba(33,92,52,.5); }
.ct-m.me .ct-bb { border-radius: 10px 4px 10px 10px; color: #16341f;
  background: linear-gradient(180deg, #dff3df, #bfe4c4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 1px 2px rgba(30,70,40,.35), 0 0 0 1px rgba(63,143,90,.55); }

/* 系统 / 盟主令 */
.ct-m.system, .ct-m.admin { align-self: stretch; flex-direction: row; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 5px; font-size: 13px; line-height: 1.5; }
.ct-m.system { color: #4a3a1c; background: linear-gradient(180deg, rgba(242,194,69,.18), rgba(184,134,11,.18));
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.45); }
.ct-m.admin { color: #fff3c2; text-shadow: 0 1px 0 rgba(0,0,0,.55);
  background: var(--tex-wood), linear-gradient(180deg, #a8261b, #6e140c);
  box-shadow: inset 0 0 0 1px rgba(255,214,120,.55), 0 0 10px rgba(242,194,69,.35); }
.ct-m .ct-tag { flex: none; padding: 0 6px; height: 18px; line-height: 18px; border-radius: 3px;
  font-family: var(--font-brush); font-size: 13px; letter-spacing: 1px; }
.ct-m.system .ct-tag { color: #6b4200; background: linear-gradient(180deg, #ffe9a3, #d49a1e); box-shadow: 0 0 0 1px #7a4f00; }
.ct-m.admin .ct-tag { color: #7a1e12; background: linear-gradient(180deg, #fff0b3, #f2c245); box-shadow: 0 0 0 1px #5a3800; }
.ct-m .ct-tx { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* 输入行 */
.ct-in { flex: none; display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ct-in .ct-inp { flex: 1 1 auto; min-width: 0; margin: 0; }
.ct-in .ct-send { flex: none; min-width: 74px; }
.ct-tip { flex: none; margin-top: 5px; text-align: center; font-size: 11px; color: var(--ink-faint); }

/* ===================== 传书（邮件） ===================== */
.ml-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 28px; padding: 0 8px; margin-bottom: 6px; border-radius: 5px;
  background: var(--tex-wood), linear-gradient(180deg, #6b3a16, #3f1f0b);
  box-shadow: inset 0 0 0 1px rgba(242,194,69,.5), inset 0 -2px 0 rgba(0,0,0,.4);
  font-size: 12px; color: #e8cf9a; }
.ml-bar .ml-cnt b { color: var(--gold); font-size: 14px; padding: 0 2px; }
.ml-st { flex: none; padding: 0 7px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 11px;
  color: #a9e6bd; background: rgba(30,80,45,.55); box-shadow: inset 0 0 0 1px rgba(126,208,143,.35); }
.ml-st.off { color: #ffc9be; background: rgba(110,20,12,.6); box-shadow: inset 0 0 0 1px rgba(216,50,31,.45); }

.ml-list { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto;
  padding: 2px; scrollbar-width: none; }
.ml-list::-webkit-scrollbar { display: none; }
.ml-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  cursor: pointer; background: var(--tex-paper), linear-gradient(180deg, #f7ecd0, #e9d7ac);
  box-shadow: inset 0 0 0 1px rgba(255,248,225,.75), 0 1px 2px rgba(90,60,20,.3), 0 0 0 1px rgba(120,85,35,.4); }
.ml-row:hover { filter: brightness(1.03); }
.ml-row:active { filter: brightness(.95); }
.ml-row.read { opacity: .72; }
.ml-row .ic { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.ml-row .ic svg { width: 44px; height: 44px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.ml-row .bd { flex: 1 1 auto; min-width: 0; }
.ml-row .ti { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-row .ti .new { display: inline-block; margin-left: 6px; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 3px;
  font-size: 11px; font-weight: 400; color: #fff; vertical-align: 1px;
  background: linear-gradient(180deg, #e0523a, #a8261b); }
.ml-row .ti .new.gold { color: #5a2b00; background: linear-gradient(180deg, #f2c245, #b8860b); }
.ml-row .sb { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ml-row .rt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 11px; color: var(--ink-faint); }
.ml-row .rt .seal { transform: rotate(-8deg); }

.ml-empty { padding: 40px 10px; text-align: center; font-family: var(--font-brush); font-size: 22px;
  letter-spacing: 3px; line-height: 1.7; color: var(--ink-faint); }
.ml-empty .sm { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }

.ml-detail { padding: 4px 2px; }
.ml-detail .h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 2px solid var(--paper-deep); padding-bottom: 6px; margin-bottom: 8px; }
.ml-detail .h .ti { font-family: var(--font-brush); font-size: 24px; letter-spacing: 2px; color: var(--ink); }
.ml-detail .h .fr { flex: none; font-size: 12px; color: var(--ink-soft); }
.ml-detail .txt { font-size: 14px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; min-height: 60px;
  max-height: 360px; overflow-y: auto; scrollbar-width: none;
  padding: 8px 10px; border-radius: 5px; background: rgba(255,250,232,.55);
  box-shadow: inset 0 0 0 1px rgba(120,85,35,.28); }
.ml-detail .txt::-webkit-scrollbar { display: none; }
.ml-note { margin-top: 8px; text-align: center; font-size: 12px; color: var(--ink-faint); }

.ml-att { margin-top: 10px; padding: 8px; border-radius: 6px; background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px rgba(120,80,30,.35); }
.ml-att .lab { font-family: var(--font-brush); font-size: 16px; color: var(--ink-soft); margin-bottom: 6px; letter-spacing: 1px; }
.ml-att .items { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-rw { width: 68px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ml-rw .ic { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 5px; background: linear-gradient(180deg, #3b2a18, #241608);
  box-shadow: inset 0 0 0 1px rgba(242,194,69,.55), 0 1px 2px rgba(0,0,0,.5); }
.ml-rw .ic svg, .ml-rw .ic img { width: 52px; height: 52px; object-fit: cover; }
.ml-rw .nm { width: 100%; text-align: center; font-size: 11px; line-height: 1.25; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ml-rw.q-甲 .ic { box-shadow: inset 0 0 0 1px var(--q-jia), 0 0 6px rgba(242,194,69,.55); }
.ml-rw.q-乙 .ic { box-shadow: inset 0 0 0 1px var(--q-yi), 0 0 6px rgba(155,89,214,.5); }
.ml-rw.q-丙 .ic { box-shadow: inset 0 0 0 1px var(--q-bing), 0 0 6px rgba(59,130,246,.45); }
.ml-rw.q-丁 .ic { box-shadow: inset 0 0 0 1px var(--q-ding), 0 0 6px rgba(76,175,80,.45); }
.ml-rw.q-传说 .ic { box-shadow: inset 0 0 0 1px var(--q-jia), 0 0 8px rgba(242,194,69,.7); }
.ml-rw.q-史诗 .ic { box-shadow: inset 0 0 0 1px var(--q-yi), 0 0 8px rgba(155,89,214,.6); }
.ml-rw.q-情缘 .ic { box-shadow: inset 0 0 0 1px #ff8ab4, 0 0 8px rgba(255,138,180,.6); }

.ml-foot { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }

/* ── 世界聊天：检举 / 不看此人 / 复读折叠（体验官 #10）───────────────────── */
.ct-more { flex: none; margin-left: 2px; padding: 0 5px; font-size: 13px; line-height: 1;
  color: var(--ink-faint); cursor: pointer; letter-spacing: 1px; border-radius: 4px; }
.ct-more:active { color: var(--red); background: rgba(168,38,27,.12); }
.ct-m.me .ct-more { display: none; }
.ct-rep { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px;
  font-size: 10px; font-weight: 700; color: #6b4a12; background: rgba(242,194,69,.45);
  box-shadow: inset 0 0 0 1px rgba(150,110,30,.5); vertical-align: 1px; }
.ct-unblock { cursor: pointer; color: var(--blue-dark); border-bottom: 1px dashed rgba(40,80,140,.5); }
.ct-unblock:active { color: var(--red); }

.ct-more-body { padding: 4px 2px 2px; }
.ct-more-gid { text-align: center; font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.ct-more-gid b { font-family: var(--font-brush); font-size: 16px; letter-spacing: 1px; color: var(--ink); }
.ct-more-btns { display: flex; flex-direction: column; gap: 8px; }
.ct-more-btns .btn { width: 100%; }
.ct-more-note { margin-top: 10px; font-size: 11px; line-height: 1.6; color: var(--ink-faint); text-align: center; }

/* ============================================================
 * 2026-09-09 · 修缮组·界面（体验官 #19）——传书页的三样新东西
 *   .ml-pend   待挑选台账（幻化装备任选 / 限定装束任选）
 *   .ml-pk*    挑件弹窗
 *   .ml-frag*  「这 N 片碎片怎么分」滑杆
 *   .ml-warn   有奖励项没能入账时的告警（绝不静默吞掉）
 * ============================================================ */

/* ---------- 待挑选台账 ---------- */
.ml-pend { margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.ml-pend .row {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #fff7dd, #f0dcaa 55%, #ddc287);
  border: 2px solid var(--gold-dark); box-shadow: inset 0 0 0 1px rgba(255, 252, 235, .8), 0 2px 3px rgba(0, 0, 0, .25);
}
.ml-pend .row:active { filter: brightness(.95); transform: translateY(1px); }
.ml-pend .nm { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: #7a1e12; }
.ml-pend .n { flex: none; font-size: 12px; color: var(--ink-soft); }
.ml-pend .go { flex: none; font-size: 13px; font-weight: 700; color: #8a2410; }

/* ---------- 挑件弹窗 ---------- */
.ml-pkwrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 380px; overflow-y: auto; }
.ml-pk {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; min-height: 118px; justify-content: center; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #fff7dd, #ecd8a8); border: 2px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, .8);
}
.ml-pk:active { transform: translateY(2px); filter: brightness(.96); }
.ml-pk .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2; }
.ml-pk .tg { font-size: 11px; color: var(--jade-dark); text-align: center; }
.ml-pk.had { cursor: default; filter: grayscale(1) brightness(.85); opacity: .68; border-color: var(--stone-dark); }
.ml-pk.had:active { transform: none; }
.ml-pk .mk {
  position: absolute; right: 4px; top: 4px; font-style: normal; font-size: 10px; line-height: 16px; padding: 0 6px;
  border-radius: 4px; color: #fff; background: rgba(40, 40, 44, .82); border: 1px solid #1a1a1e;
}
.ml-pkhint { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); }
.ml-pkhint b { color: #a8261b; }

/* ---------- 碎片分配滑杆 ---------- */
.ml-fnote { font-size: 12px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 8px; }
.ml-fg {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 6px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 252, 236, .85), rgba(233, 214, 172, .85));
  border: 1px solid var(--paper-deep);
}
.ml-fg .nm { flex: none; width: 84px; font-size: 13px; font-weight: 700; color: #7a1e12; }
.ml-fg .sb { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--ink-faint); }
.ml-fg .n { flex: none; min-width: 54px; text-align: right; font-family: var(--font-body); font-size: 20px; color: #1f5f37; }
/* 滑杆本体：轨道 10px、拇指 28px —— 手机上要能一把抓住 */
.ml-fsl { width: 100%; height: 44px; margin: 2px 0 6px; -webkit-appearance: none; appearance: none; background: transparent; }
.ml-fsl::-webkit-slider-runnable-track { height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #f2c245, #8a5a10); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.ml-fsl::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -9px;
  border-radius: 50%; background: linear-gradient(180deg, #fff6cf, #d8a53a); border: 2px solid #7a4f00;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.ml-fsl::-moz-range-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #f2c245, #8a5a10); }
.ml-fsl::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(180deg, #fff6cf, #d8a53a); border: 2px solid #7a4f00; }
.ml-fquick { display: flex; gap: 6px; }
.ml-fquick .qk { flex: 1 1 0; min-width: 0; height: 34px; line-height: 32px; border-radius: 6px; cursor: pointer;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; color: #7a1e12; background: linear-gradient(180deg, #fff6d8, #ecd8a8);
  border: 1px solid var(--gold-dark); }
.ml-fquick .qk:active { filter: brightness(.94); transform: translateY(1px); }

/* ---------- 未能入账告警 ---------- */
.ml-warn { font-size: 13px; line-height: 1.7; color: var(--ink); }
.ml-warn b { color: #a8261b; }
.ml-warn .hot { color: #1f5f37; font-weight: 700; }