/* ============================================================
   ⚠️ 全局兜底:hidden 属性必须真的隐藏
   本文件多处用了 display:grid / flex,会覆盖浏览器默认的
   [hidden]{display:none},导致 hidden 元素照样显示。
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   AI Chat 子端样式
   三级流程:板块 → 角色 → 聊天
   ============================================================ */

.chat-body {
  --ch-top-h: 54px;
  background: #0b0a0b;
  color: #e8e2dc;
  font-family: "Noto Sans SC", "Microsoft YaHei", -apple-system, sans-serif;
  /* ⚠️ 不要写 overflow-x:hidden ——
     CSS 规则:overflow-x:hidden + overflow-y:visible 会把 y 强制变成 auto,
     配合 min-height 会让 body 变成固定高度,内容被压扁、手机端滑不动。
     横向溢出改由具体容器自己处理。 */
  min-height: 100vh;
  /* 移动端安全区:底部有 Home Indicator 时别被挡住 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* iOS Safari 的 100vh 含地址栏,滚动时会跳。
   dvh = 动态视口高度,地址栏收起时自动变大 */
@supports (height: 100dvh) {
  .chat-body { min-height: 100dvh; }
  .ch-main { min-height: 100dvh; }
  .ch-chat { height: calc(100dvh - var(--ch-top-h)); }
  .chat-body.ch-locked { height: 100dvh; }
  .chat-body.ch-locked .ch-main { height: calc(100dvh - var(--ch-top-h)); }
}

/* ═══════════ 顶栏 ═══════════ */
.ch-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--ch-top-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: rgba(11,10,11,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #221d20;
}
.ch-back {
  font-size: 19px; color: #a89ea2; text-decoration: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid #2a2427;
}
.ch-back:hover { color: #d4a24a; border-color: #6b5326; }
.ch-top-title {
  font-size: 14px; font-weight: 600; letter-spacing: .16em;
  color: #e8e2dc;
}
.ch-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ch-ann-btn, .ch-logout {
  position: relative;
  padding: 5px 12px;
  font-size: 12px; font-family: inherit;
  color: #a89ea2; background: none;
  border: 1px solid #2a2427; cursor: pointer;
}
.ch-ann-btn:hover, .ch-logout:hover { color: #d4a24a; border-color: #6b5326; }

/* ⭐ 新建会话按钮 —— 顶栏,「已连接」左边,一直可见 */
.ch-new-btn {
  display: none;                 /* 没进聊天时隐藏 */
  padding: 5px 13px;
  font-size: 12px; font-family: inherit;
  color: #e8c98a;
  background: linear-gradient(135deg, rgba(184, 32, 46, .18), rgba(212, 162, 74, .10));
  border: 1px solid rgba(184, 32, 46, .55);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, color .18s, background .18s;
}
.ch-new-btn:hover {
  color: #f5d99b;
  border-color: rgba(212, 162, 74, .85);
  background: linear-gradient(135deg, rgba(184, 32, 46, .32), rgba(212, 162, 74, .18));
}
.ch-new-btn:active { transform: translateY(1px); }
/* 在聊天视图里显示 */
body.ch-in-chat .ch-new-btn { display: inline-block; }
/* 没登录时也隐藏 */
body:not(.ch-in-chat) .ch-new-btn { display: none; }
.ch-dot {
  position: absolute; top: -2px; right: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #b8202e;
}
.ch-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #6d6469;
}
.ch-status .ch-dot {
  position: static;
  width: 7px; height: 7px; border-radius: 50%;
  background: #5a5255;
}
.ch-status.on .ch-dot { background: #4caf7d; box-shadow: 0 0 6px rgba(76,175,125,.7); }
.ch-status.busy .ch-dot { background: #d4a24a; animation: chPulse 1s infinite; }
.ch-status.err .ch-dot { background: #d8455a; }
@keyframes chPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ═══════════ 主容器 ═══════════ */
.ch-main {
  padding-top: var(--ch-top-h);
  min-height: 100vh;
  /* ⭐ 聊天视图里 .ch-main 要能收缩到视口高度,
     否则里面的 .ch-chat 撑破 body → body 被锁 → 滑不动 */
  min-width: 0;
}

/* ═══════════ 聊天视图锁定(只有聊天页锁滚动)═══════════ */
/* 聊天视图内部自己滚动消息区,body 不该再滚 */
.chat-body.ch-locked {
  height: 100vh;
  /* 显式写两个方向,避免 overflow-x:hidden 把 y 变成 auto 的连带规则 */
  overflow-x: hidden;
  overflow-y: hidden;
}
.chat-body.ch-locked .ch-main {
  /* ⭐ 顶栏是 position:fixed 浮在上层的,
     所以 .ch-main 要占满整个视口,不能再减顶栏高度
     —— 减了会在底部留一条空白(手机上正好是输入框下面的空档)。
     顶栏的高度改由 .ch-thread 自己用 padding-top 让出来。 */
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  min-width: 0;
  padding-top: 0;
}
.chat-body.ch-locked .ch-chat {
  height: 100%;
}
.ch-panel { padding: 30px 24px 60px; max-width: 1180px; margin: 0 auto; }
.ch-panel-head { margin-bottom: 26px; }
.ch-panel-head h2 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 600; letter-spacing: .1em;
  color: #f0e9e2;
}
.ch-panel-sub { margin: 0; font-size: 13px; color: #6d6469; letter-spacing: .04em; }
.ch-back-btn {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-size: 12.5px; font-family: inherit;
  color: #a89ea2; background: none;
  border: 1px solid #2a2427; cursor: pointer;
}
.ch-back-btn:hover { color: #d4a24a; border-color: #6b5326; }

/* ═══════════ 登录 ═══════════ */
.ch-auth {
  min-height: calc(100vh - var(--ch-top-h));
  display: grid; place-items: center;
  padding: 30px 20px;
}
.ch-auth-box {
  width: min(400px, 100%);
  padding: 38px 34px;
  background: #131112;
  border: 1px solid #241f22;
  text-align: center;
}
.ch-auth-mark {
  width: 50px; height: 50px; margin: 0 auto 18px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: .06em;
  color: #d4a24a; border: 1px solid #d4a24a;
  transform: rotate(45deg);
}
.ch-auth-box h1 { margin: 0 0 6px; font-size: 18px; letter-spacing: .18em; font-weight: 600; }
.ch-auth-sub { margin: 0 0 24px; font-size: 12px; color: #6d6469; letter-spacing: .1em; }
.ch-tabs {
  display: flex; gap: 0; margin-bottom: 18px;
  border-bottom: 1px solid #241f22;
}
.ch-tab {
  flex: 1; padding: 9px;
  font-size: 13px; font-family: inherit;
  color: #6d6469; background: none;
  border: none; border-bottom: 2px solid transparent;
  cursor: pointer;
}
.ch-tab.active { color: #d4a24a; border-bottom-color: #b8202e; }
.ch-auth-box input {
  width: 100%; padding: 10px 13px; margin-bottom: 10px;
  font-size: 14px; font-family: inherit;
  color: #e8e2dc; background: #0e0c0d;
  border: 1px solid #2a2427; outline: none;
}
.ch-auth-box input:focus { border-color: #8b1a26; }
.ch-auth-btn { width: 100%; margin-top: 4px; }
.ch-auth-err { margin-top: 10px; font-size: 12.5px; color: #e06070; min-height: 16px; }

/* ═══════════ 板块卡片 ═══════════ */
.ch-world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.ch-world-card {
  position: relative;
  overflow: hidden;
  background: #131112;
  border: 1px solid #241f22;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.ch-world-card:hover { border-color: #6b5326; transform: translateY(-3px); }
.ch-world-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e0c0d;
  overflow: hidden;
}
.ch-world-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ch-world-card:hover .ch-world-cover img { transform: scale(1.05); }
.ch-world-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,10,11,.85));
}
.ch-world-count {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  padding: 3px 10px;
  font-size: 11px; letter-spacing: .08em;
  color: #d4a24a;
  background: rgba(11,10,11,.78);
  border: 1px solid rgba(212,162,74,.3);
}
.ch-world-info { padding: 16px 18px 18px; }
.ch-world-name {
  margin: 0 0 7px;
  font-size: 17px; font-weight: 600; letter-spacing: .1em;
  color: #f0e9e2;
}
.ch-world-intro {
  margin: 0;
  font-size: 12.5px; line-height: 1.75; color: #7d7378;
}

/* ═══════════ 角色卡片 ═══════════ */
.ch-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ch-char-card {
  padding: 18px;
  background: #131112;
  border: 1px solid #241f22;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.ch-char-card:hover { border-color: #6b5326; transform: translateY(-3px); }
.ch-char-av {
  width: 78px; height: 78px; margin: 0 auto 13px;
  object-fit: cover;
  background: #1c181a;
  border: 1px solid #332c30;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700; color: #d4a24a;
}
.ch-char-name {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 600; letter-spacing: .08em;
  color: #f0e9e2;
}
.ch-char-intro {
  margin: 0;
  font-size: 12px; line-height: 1.65; color: #7d7378;
}
.ch-char-lock {
  margin-top: 10px;
  font-size: 11px; color: #c08a3a;
}

/* ═══════════ 聊天 ═══════════ */
.ch-chat {
  display: grid;
  grid-template-columns: 210px 1fr;
  height: calc(100vh - var(--ch-top-h));
  /* ⭐ grid item 默认 min-height:auto,不给 0 的话
     里面的消息区会撑破 grid 行高 → 滑不动 */
  min-height: 0;
}
/* 聊天视图:顶栏 fixed 浮在上层 → 内容整体下移顶栏高度 */
.chat-body.ch-locked .ch-chat {
  height: 100%;
  padding-top: var(--ch-top-h);
}

/* 左侧角色栏 */
.ch-rail {
  border-right: 1px solid #221d20;
  background: #100e0f;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.ch-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid #221d20;
  font-size: 12.5px; color: #8b8186;
}
.ch-rail-head .ch-back-btn { margin: 0; padding: 3px 9px; }
.ch-rail-list { padding: 8px; }
.ch-rail-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px;
  margin-bottom: 4px;
  background: none; border: 1px solid transparent;
  cursor: pointer; text-align: left;
  font-family: inherit;
}
.ch-rail-item:hover { background: #1a1618; }
.ch-rail-item.active { background: rgba(139,26,38,.16); border-color: #5c2028; }
.ch-rail-av {
  width: 36px; height: 36px;
  object-fit: cover; flex-shrink: 0;
  background: #1c181a;
  border: 1px solid #332c30; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #d4a24a;
}
.ch-rail-name {
  font-size: 13px; color: #ded6d0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-rail-item.active .ch-rail-name { color: #f0e9e2; }

/* 消息区 */
.ch-thread {
  display: flex; flex-direction: column; min-width: 0; position: relative;
  /* ⭐ 同理:grid/flex 子项要能收缩,否则撑破高度限制 */
  min-height: 0;
  overflow: hidden;
}
.ch-thread-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid #221d20;
  background: rgba(19,17,18,.9);
  backdrop-filter: blur(6px);
  z-index: 5;
}
.ch-thread-char { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ch-thread-av {
  width: 38px; height: 38px;
  object-fit: cover; flex-shrink: 0;
  background: #1c181a;
  border: 1px solid #332c30; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #d4a24a;
}
.ch-thread-name { font-size: 14.5px; font-weight: 600; letter-spacing: .08em; }
.ch-thread-intro {
  font-size: 11.5px; color: #6d6469; line-height: 1.5;
  max-width: 420px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-thread-tools { margin-left: auto; display: flex; gap: 7px; }
.ch-tool {
  padding: 5px 11px;
  font-size: 12px; font-family: inherit;
  color: #a89ea2; background: none;
  border: 1px solid #2a2427; cursor: pointer;
  white-space: nowrap;
}
.ch-tool:hover { color: #d4a24a; border-color: #6b5326; }

/* 消息流 */
.ch-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 20px;
  /* ⭐ flex/grid 子项默认 min-height:auto,内容会把容器撑开
     → 消息区失去高度限制,内容溢出但滑不动。
     必须显式 min-height:0 才能让 overflow-y:auto 生效。 */
  min-height: 0;
  overscroll-behavior: contain;   /* 滚到底不要带动 body */
  -webkit-overflow-scrolling: touch;
}
.ch-msg { display: flex; gap: 12px; max-width: 780px; }
.ch-msg.user { flex-direction: row-reverse; align-self: flex-end; }
.ch-msg-av {
  width: 32px; height: 32px; flex-shrink: 0;
  object-fit: cover;
  background: #1c181a;
  border: 1px solid #332c30; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #d4a24a;
}
/* ⭐ 用户自己的头像 —— 和角色区分开(红金配色) */
.ch-msg-av-user {
  background: linear-gradient(135deg, #2a1418, #1a1013);
  border-color: rgba(184, 32, 46, .5);
  color: #f0c66a;
}
.ch-msg-body { min-width: 0; }
.ch-msg.user .ch-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.ch-bubble {
  padding: 11px 16px;
  font-size: 14px; line-height: 1.8;
  color: #ded6d0;
  background: #1a1618;
  border: 1px solid #2a2427;
  white-space: pre-wrap;
  word-break: break-word;
}
.ch-msg.user .ch-bubble {
  /* ⭐ 原来只有 16% 红,叠在亮背景(雪地/木屋)上白字看不清。
     改成「深色底 + 红色调」两层叠加,保证任何背景下都可读。 */
  background:
    linear-gradient(rgba(24,18,20,.78), rgba(24,18,20,.78)),
    rgba(139,26,38,.30);
  border-color: #5c2028;
  color: #f0e9e2;
}
.ch-msg-time {
  margin-top: 5px;
  font-size: 10.5px; color: #5a5255;
}
.ch-msg.user .ch-msg-time { text-align: right; }
.ch-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ch-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #6d6469;
  animation: chBlink 1.2s infinite;
}
.ch-typing i:nth-child(2) { animation-delay: .2s; }
.ch-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chBlink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

/* 输入区 */
.ch-composer {
  border-top: 1px solid #221d20;
  padding: 12px 20px 10px;
  background: rgba(16,14,15,.96);
  /* ⭐ 输入区不能被压缩 —— 否则底部会翘起来留空 */
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.ch-input-row { display: flex; gap: 10px; align-items: flex-end; }
.ch-attach {
  padding: 10px 12px;
  font-size: 16px; line-height: 1;
  background: #1c181a;
  border: 1px solid #2a2427;
  cursor: pointer;
  flex-shrink: 0;
  opacity: .8;
}
.ch-attach:hover { opacity: 1; border-color: #6b5326; }

/* 待发送的图片 */
.ch-pending {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.ch-pending-item {
  position: relative;
  width: 68px; height: 68px;
  border: 1px solid #2a2427;
  background: #0e0c0d;
}
.ch-pending-item img { width: 100%; height: 100%; object-fit: cover; }
.ch-pending-x {
  position: absolute; top: 2px; right: 2px;
  width: 17px; height: 17px;
  font-size: 10px; line-height: 15px;
  color: #fff; background: rgba(184,32,46,.92);
  border: none; cursor: pointer;
  text-align: center;
}
.ch-pending-x:hover { background: #d8455a; }
.ch-pending-tip {
  align-self: center;
  font-size: 11px; color: #6d6469;
}

/* 消息里的图片 */
.ch-msg-imgs {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-bottom: 7px;
}
.ch-msg-imgs img {
  max-width: 190px; max-height: 190px;
  object-fit: cover;
  border: 1px solid #2a2427;
  cursor: pointer;
}
.ch-msg-imgs img:hover { border-color: #6b5326; }
.ch-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px; font-family: inherit; line-height: 1.7;
  color: #e8e2dc;
  background: #0e0c0d;
  border: 1px solid #2a2427;
  outline: none;
  resize: none;
  max-height: 160px;
}
.ch-input:focus { border-color: #8b1a26; }
.ch-send {
  padding: 10px 22px;
  font-size: 13px; font-family: inherit;
  color: #fff; background: #8b1a26;
  border: 1px solid #a8202e;
  cursor: pointer;
  white-space: nowrap;
}
.ch-send:hover { background: #a8202e; }
.ch-send[disabled] { opacity: .4; cursor: not-allowed; }

/* 会话栏 */
.ch-sessions {
  display: flex; gap: 6px;
  margin-top: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.ch-sessions:empty { display: none; }
.ch-session {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  font-size: 11.5px; font-family: inherit;
  color: #8b8186; background: #171416;
  border: 1px solid #2a2427;
  cursor: pointer;
  white-space: nowrap;
}
.ch-session:hover { color: #d4a24a; border-color: #6b5326; }
.ch-session.active { color: #f0e9e2; border-color: #5c2028; background: rgba(139,26,38,.12); }
.ch-session-x {
  font-size: 12px; opacity: .5;
  background: none; border: none; color: inherit; cursor: pointer; padding: 0;
}
.ch-session-x:hover { opacity: 1; color: #e06070; }

/* 沉淀记忆 */
.ch-mem-picker {
  margin-bottom: 11px;
  padding: 14px 16px;
  background: #131112;
  border: 1px solid #5a4620;
}
.ch-mem-head {
  display: flex; align-items: center;
  font-size: 13px; color: #d4a24a; margin-bottom: 7px;
}
.ch-mem-x {
  margin-left: auto;
  font-size: 14px; background: none; border: none;
  color: #6d6469; cursor: pointer;
}
.ch-mem-x:hover { color: #e06070; }
.ch-mem-tip { margin: 0 0 9px; font-size: 11.5px; color: #6d6469; line-height: 1.6; }
.ch-mem-input {
  width: 100%; padding: 9px 12px; margin-bottom: 9px;
  font-size: 13.5px; font-family: inherit; line-height: 1.7;
  color: #e8e2dc; background: #0e0c0d;
  border: 1px solid #2a2427; outline: none;
  resize: vertical; min-height: 60px;
}
.ch-mem-input:focus { border-color: #8b1a26; }
.ch-mem-save { padding: 7px 18px; font-size: 12.5px; }

/* ═══════════ 公告弹窗 ═══════════ */
/* ⚠️ 必须显式处理 [hidden] —— 下面的 display:grid 会覆盖浏览器默认的 display:none */
.ch-modal[hidden] { display: none; }
.ch-modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(6,5,6,.8);
  backdrop-filter: blur(3px);
}
.ch-modal-box {
  width: min(560px, 100%); max-height: 80vh;
  display: flex; flex-direction: column;
  background: #131112;
  border: 1px solid #332c30;
}
.ch-modal-head {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #241f22;
}
.ch-modal-head h3 { margin: 0; font-size: 14.5px; letter-spacing: .12em; }
.ch-modal-x {
  margin-left: auto; font-size: 16px;
  background: none; border: none; color: #6d6469; cursor: pointer;
}
.ch-modal-x:hover { color: #e06070; }
.ch-modal-body { padding: 18px; overflow-y: auto; }
.ch-ann {
  padding: 13px 15px; margin-bottom: 12px;
  background: #171416;
  border-left: 2px solid #b8202e;
}
.ch-ann:last-child { margin-bottom: 0; }
.ch-ann.pinned { border-left-color: #d4a24a; }
.ch-ann h4 { margin: 0 0 6px; font-size: 14px; letter-spacing: .06em; color: #f0e9e2; }
.ch-ann p { margin: 0; font-size: 13px; line-height: 1.8; color: #a89ea2; white-space: pre-wrap; }
.ch-ann-time { margin-top: 7px; font-size: 11px; color: #5a5255; }
.ch-ann-pin {
  display: inline-block; margin-left: 7px;
  padding: 1px 7px; font-size: 10px;
  color: #d4a24a; background: rgba(212,162,74,.1);
  border: 1px solid #5a4620;
}

/* toast */
.ch-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  padding: 10px 18px;
  font-size: 13px; color: #e8e2dc;
  background: #1c181a; border: 1px solid #332c30;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.ch-toast.show { opacity: 1; transform: none; }
.ch-toast.err { border-color: #7a2a34; color: #f0a0ac; }
.ch-toast.ok { border-color: #2c5a42; color: #8fd8b0; }

/* ═══════════ 移动端 ═══════════ */
@media (max-width: 760px) {
  .ch-panel { padding: 20px 14px 50px; }
  .ch-world-grid { grid-template-columns: 1fr; gap: 13px; }
  .ch-char-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
  .ch-char-av { width: 62px; height: 62px; font-size: 22px; }
  .ch-char-name { font-size: 14px; }
  .ch-char-intro { font-size: 11px; }

  /* 聊天:左侧角色栏 → 顶部横滑条 */
  .ch-chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ch-rail {
    grid-row: 1;
    border-right: none;
    border-bottom: 1px solid #221d20;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ch-rail-head { border-bottom: none; padding: 8px 10px; flex-shrink: 0; }
  .ch-rail-list { display: flex; gap: 6px; padding: 8px 10px; }
  .ch-rail-item {
    margin: 0; padding: 5px 10px 5px 5px;
    border: 1px solid transparent;
    flex-shrink: 0;
  }
  .ch-rail-item.active { border-color: #5c2028; }
  .ch-rail-av { width: 30px; height: 30px; font-size: 12px; }

  .ch-thread-head { padding: 9px 12px; gap: 9px; }
  .ch-thread-av { width: 32px; height: 32px; font-size: 13px; }
  .ch-thread-name { font-size: 13px; }
  .ch-thread-intro { display: none; }
  .ch-tool { padding: 4px 9px; font-size: 11px; }

  .ch-msgs { padding: 16px 12px; gap: 15px; }
  .ch-msg { gap: 9px; }
  .ch-bubble { padding: 9px 13px; font-size: 13.5px; }
  .ch-composer { padding: 9px 12px 8px; }
  .ch-send { padding: 9px 16px; font-size: 12.5px; }

  /* ⭐ 手机上输入框行高压紧一点,免得占位文字换行被裁 */
  .ch-input {
    line-height: 1.5;
    padding: 9px 11px;
    /* ⭐ 16px —— 小于 16px iOS 会自动放大页面,用户再缩回来很难受 */
    font-size: 16px;
  }

  /* ⭐ 顶栏紧凑化 —— 390px 宽度下原来会挤到换行/竖排 */
  .ch-top { padding: 0 10px; gap: 8px; }
  .ch-top-title { font-size: 12.5px; letter-spacing: .08em; white-space: nowrap; }
  .ch-top-right { gap: 6px; }
  .ch-ann-btn, .ch-logout {
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;      /* ⭐ 别让「公告」「退出」竖排 */
  }
  .ch-new-btn {
    padding: 5px 9px;
    font-size: 11px;
    white-space: nowrap;
    letter-spacing: 0;
  }
  .ch-status {
    font-size: 11px;
    gap: 4px;
    white-space: nowrap;
  }
  /* 极窄屏:「已连接」只留绿点,省地方 */
  @media (max-width: 400px) {
    .ch-status #chStatusText { display: none; }
    .ch-top-title { font-size: 12px; }
  }

  /* ⭐ iPhone 底部横条安全区 —— 不加的话输入框会陷进横条里 */
  .ch-composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .ch-thread-head {
    padding-top: calc(9px + env(safe-area-inset-top, 0px));
  }
}