/* ============================================================
   公共聊天区 —— 页面样式（沿用站点 :root 配色，light 主题）
   ============================================================ */

.chat-wrap{max-width:820px;margin:0 auto;padding:22px 16px 96px}
.chat-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.back{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  color:var(--text-2,#42555f);font-size:13.5px;padding:6px 11px;border-radius:9px;
  border:1px solid var(--line,#e2eaf0);background:var(--surface,#fff);flex:0 0 auto;
}
.back:hover{border-color:var(--primary,#2b6f8f);color:var(--primary-d,#225a75)}
.chat-tt{flex:1;min-width:0}
.chat-tt h1{font-size:19px;margin:0;letter-spacing:-.02em}
.chat-tt p{margin:2px 0 0;font-size:12px;color:var(--muted,#71858f)}
.online{
  font-size:12px;color:var(--primary-d,#225a75);background:var(--primary-soft,#e8f2f7);
  border-radius:999px;padding:5px 11px;white-space:nowrap;flex:0 0 auto;
}
.online b{font-weight:700}

/* ---------- 常驻危机横幅 ---------- */
.crisis-banner{
  display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;
  padding:11px 13px;border-radius:12px;margin-bottom:12px;
  background:#fdeceb;border:1px solid #f3c9c5;color:#8a2018;font-size:13px;line-height:1.6;
}
.crisis-banner svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.crisis-banner .cb-txt{flex:1;min-width:200px}
.crisis-banner a{color:#b3261e;font-weight:700;text-decoration:underline}

.notice-strip{
  font-size:11.5px;color:var(--muted,#71858f);line-height:1.6;
  background:var(--bg-alt,#eef4f7);border:1px solid var(--line-soft,#eef3f7);
  border-radius:10px;padding:8px 11px;margin-bottom:14px;
}

/* ---------- 消息区 ---------- */
.chat-box{
  background:var(--surface,#fff);border:1px solid var(--line,#e2eaf0);
  border-radius:var(--r,14px);box-shadow:var(--shadow-sm,0 1px 2px rgba(19,45,60,.06));
  display:flex;flex-direction:column;overflow:hidden;
}
.msgs{
  height:min(56vh,520px);min-height:300px;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain;
}
.msgs::-webkit-scrollbar{width:7px}
.msgs::-webkit-scrollbar-thumb{background:#c9d5dd;border-radius:4px}

.msg{display:flex;flex-direction:column;gap:3px;max-width:82%;animation:chIn .25s ease both}
@keyframes chIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg-h{font-size:11px;color:var(--muted,#71858f);display:flex;gap:7px;align-items:baseline}
.msg-h .t{font-variant-numeric:tabular-nums}
.msg-bub{
  font-size:14.2px;line-height:1.72;white-space:pre-wrap;word-break:break-word;
  padding:9px 12px;border-radius:13px;background:var(--bg-alt,#eef4f7);
  border:1px solid var(--line-soft,#eef3f7);border-top-left-radius:4px;color:var(--text,#16262f);
}
.msg.mine .msg-bub{
  background:linear-gradient(135deg,#2b6f8f,#225a75);color:#fff;border-color:transparent;
  border-top-left-radius:13px;border-top-right-radius:4px;
}
.msg-bub.masked{color:#8a5a2a;background:#fdf6ec;border-color:#f3e2c4}

/* 系统卡（入房提示 / 在线数 / 安全提示） */
.syscard{
  align-self:center;max-width:92%;text-align:center;font-size:12.5px;line-height:1.65;
  color:var(--text-2,#42555f);background:var(--bg-alt,#eef4f7);
  border:1px dashed var(--line,#e2eaf0);border-radius:11px;padding:8px 12px;
}
.syscard.alert{
  background:#fdeceb;border-color:#f3c9c5;color:#8a2018;text-align:left;
}
.syscard.alert a{color:#b3261e;font-weight:700;text-decoration:underline}
.syscard b{color:var(--text,#16262f)}

.notice-err{
  align-self:center;max-width:92%;font-size:12.8px;line-height:1.65;
  background:#fdf6ec;border:1px solid #f3e2c4;color:#8a5a2a;border-radius:11px;padding:9px 12px;
}

/* ---------- 输入区 ---------- */
.chat-foot{flex:0 0 auto;border-top:1px solid var(--line-soft,#eef3f7);background:var(--surface,#fff)}
.nickrow{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:9px 12px;border-bottom:1px solid var(--line-soft,#eef3f7);
  font-size:12px;color:var(--muted,#71858f);
}
.nickrow input{
  font:inherit;font-size:12.5px;padding:5px 9px;border-radius:8px;width:132px;
  border:1px solid var(--line,#e2eaf0);background:var(--bg,#f5f8fa);color:var(--text,#16262f);
}
.nickrow input:focus{outline:none;border-color:var(--primary,#2b6f8f);background:var(--surface,#fff)}
.status{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--muted,#71858f);display:block}
.status[data-s="open"] i{background:var(--green,#3f8f6b)}
.status[data-s="open"]{color:var(--green,#3f8f6b)}
.status[data-s="connecting"] i{background:var(--yellow,#c8972c)}
.status[data-s="connecting"]{color:var(--yellow,#c8972c)}
.status[data-s="closed"] i{background:var(--red,#b3261e)}
.status[data-s="closed"]{color:var(--red,#b3261e)}

.sendrow{display:flex;gap:9px;align-items:flex-end;padding:11px 12px}
.sendrow textarea{
  flex:1;resize:none;font:inherit;font-size:14px;line-height:1.6;min-height:42px;max-height:120px;
  padding:10px 12px;border-radius:11px;border:1px solid var(--line,#e2eaf0);
  background:var(--bg,#f5f8fa);color:var(--text,#16262f);
}
.sendrow textarea:focus{outline:none;border-color:var(--primary,#2b6f8f);background:var(--surface,#fff)}
.sendrow .btn{
  border:0;cursor:pointer;padding:0 20px;height:42px;border-radius:11px;flex:0 0 auto;
  background:var(--primary,#2b6f8f);color:#fff;font-size:14px;font-weight:600;transition:.18s;
}
.sendrow .btn:hover{background:var(--primary-d,#225a75)}
.sendrow .btn:disabled{background:#9db3bf;cursor:not-allowed}
.hint{padding:0 12px 10px;font-size:11px;color:var(--muted,#71858f);line-height:1.6}

@media (max-width:640px){
  .chat-wrap{padding:16px 12px 88px}
  .msgs{height:62vh}
  .msg{max-width:88%}
}
@media print{
  .chat-foot,.crisis-banner,.notice-strip{display:none}
}