，表示「我自己发的」）。
裸类名会让顶栏样式泄漏到消息上；下面 @media(max-width:620px) 里的
`.me { flex: 0 1 auto; overflow: hidden }` 泄漏后
→ `flex` 简写把 flex-shrink 重置回 1 → 消息在手机端被压扁裁切。
全项目凡styling 顶栏用户区，一律写 `.topbar .me`。 */
.topbar .me { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fs, 1)); color: var(--ink-2); }
#meName { cursor: pointer; padding: 3px 8px; border-radius: 7px; }
/* ============================================================
z100：手机端顶栏「单行工具条」（方案 A）
------------------------------------------------------------
用户反馈（附截图）：手机版顶栏占三行、还占得很难看 ——
行1 品牌名 + 肖先金 + 外观 + 退出 （挤满，必换行）
行2 z99 + 说明 （只剩两个小东西飘在右边，纯浪费）
行3 工作台 / AI 团队 / 知识库 / 经验 / 模型设置
病根：`.brand-inline`（含用户名 + 外观 + 退出）本身就宽约 300px，
再和 `.me`（z99 + 说明）抢同一行 → `.me` 被 `flex-wrap` 挤到第二行，
而 `.topnav` 的 `order:3` 又占了第三行。
正解：**窄屏把「用户名 / 外观 / 退出」整块收进右侧 ⋮**，第一行只剩
「● 平台名 … z99 说明 ⋮」，一律放得下；页签回到第二行。
三行 ≈140px → 两行 ≈80px，首屏多出约 60px。
⚠️ 桌面端一行都不动：⋮ 由基础规则 `display:none` 隐藏（下面这条），
`.brand-user` 只在 ≤620px 里被隐藏。
============================================================ */
/* z271：⋮ 从「只在窄屏出现」改成**全端出现** —— 外观 / 字号 / 密聊 / 退出都收进它。
⚠️ 下面 ≤620px 的媒体查询里还有一条同名规则（只覆盖字号与内边距），不要删。 */
.topbar-more {
display: inline-flex; align-items: center; justify-content: center;
line-height: 1; padding: 3px 8px;
font-size: calc(15px * var(--fs, 1));
}
/* 密聊有未读时的小红点（不带数字，免得在窄按钮上挤成一团；具体条数看菜单里那一行）。 */
.topbar-more.has-badge { position: relative; }
.topbar-more.has-badge::after {
content: ''; position: absolute; top: 3px; right: 4px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--danger); box-shadow: 0 0 0 2px var(--panel);
}
/* 密聊页没有对应的导航项了，用 ⋮ 的高亮表示「当前就在密聊里」 */
.topbar-more.on { background: var(--teal-soft); color: var(--teal); }
.sheet-head {
padding: 2px 8px 12px; margin-bottom: 4px;
font-size: calc(15px * var(--fs, 1)); font-weight: 600; color: var(--ink);
border-bottom: 1px solid var(--line-soft);
}
.sheet-list { display: flex; flex-direction: column; }
.sheet-row {
display: block; width: 100%; text-align: left; cursor: pointer;
padding: 14px 8px; border: 0; border-bottom: 1px solid var(--line-soft);
background: transparent; color: var(--ink); font-size: calc(15px * var(--fs, 1));
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row:active { background: var(--line-soft); }
.sheet-row.danger { color: var(--danger); }
/* z338：桌面端 ⋮ 弹层（贴着按钮的小面板）。
手机端不用它（走 #/more 整页），所以这组规则不进媒体查询。 */
.more-mask { position: fixed; inset: 0; z-index: 120; background: transparent; }
.more-pop {
position: fixed; top: 52px; right: 16px; z-index: 121; width: 208px;
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 16px 40px rgba(20, 40, 35, .16); overflow: hidden;
animation: morePopIn .13s ease-out;
}
@keyframes morePopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* z366：面板改成跟着 ⋮ 的实际位置弹出（在底部就向上展开），动画方向也要跟着翻 */
.more-pop.up { animation-name: morePopUp; }
@keyframes morePopUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.more-pop .sheet-head { padding: 11px 14px 9px; margin: 0; font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); }
.more-pop .sheet-row { padding: 11px 14px; font-size: calc(13.5px * var(--fs, 1)); display: flex; align-items: center; gap: 8px; }
.more-pop .sheet-row .sub {
margin-left: auto; font-style: normal; font-size: calc(10.5px * var(--fs, 1));
font-family: var(--mono); color: var(--ink-4);
}
.more-pop .sheet-row .sub.warn {
font-family: inherit; font-weight: 600; color: var(--amber);
background: var(--amber-soft); border-radius: 6px; padding: 1px 5px;
}
.more-pop .sheet-row .sub.warn:empty { display: none; }
#meName:hover { background: var(--teal-soft); color: var(--teal); }
.build-tag {
font-family: var(--mono); font-size: calc(10px * var(--fs, 1)); color: var(--ink-4);
background: var(--line-soft); padding: 2px 6px; border-radius: 5px;
letter-spacing: .3px; white-space: nowrap;
}
main { max-width: 1240px; margin: 0 auto; padding: 24px 22px 60px; }
/* ---------- 工作台 ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h2 { font-family: var(--serif); font-size: calc(22px * var(--fs, 1)); margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--ink-3); font-size: calc(13px * var(--fs, 1)); }
/* z234：统计行从「等宽网格」改为「一张主卡 + 三张窄卡」
------------------------------------------------------------
用户要求：通知公告卡**和其他三个卡同一行**，位于**最左边**，
宽度是「放了其他三个卡片后剩余的宽度」。
所以三张窄卡给固定宽度，通知卡 flex:1 吃掉剩余空间 ——
不需要算百分比，容器变宽变窄都自适应（红线 115 的教训：别用 1fr 硬算）。 */
.stat-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .n { font-family: var(--serif); font-size: calc(26px * var(--fs, 1)); line-height: 1.2; }
.stat .l { font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); margin-top: 2px; }
/* 三张窄卡：固定宽度（够放「待我处理」四个字 + 两位数字），不参与伸缩 */
.stat-row > .stat:not(.stat-notice) { flex: 0 0 148px; min-width: 0; }
/* 通知·公告·动态主卡（z240 · 方案 B：浅底色带 + 左侧竖条 + 大字标题）
★ 卡片自身 padding 归零，左右留白交给 --sn-px：
「表头」要整条铺满底纹，列表却要左右缩进，只有把 padding 提到子元素上才做得到。
手机上只需改 --sn-px / --sn-py 两个变量，头部与列表不会一边宽一边窄。
★ overflow:hidden 是必须的：底纹带要贴着卡片圆角裁掉，否则四角会露出白方块。 */
.stat.stat-notice { --sn-px: 13px; --sn-py: 9px;
flex: 1 1 auto; min-width: 0; cursor: pointer; padding: 0; overflow: hidden;
transition: transform .12s ease, box-shadow .12s ease; }
.stat.stat-notice:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .10); }
.sn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: var(--sn-py) var(--sn-px);
/* ★ 底纹必须用主题变量，不能写死颜色：站内有 warm / tea / sakura / bamboo 四套主题，
写死一个冷调浅绿在「暖阳陶土」主题下会明显偏色（实测 #f4f8f6 在那边显得发灰）。
选 --line-soft 而不是 --teal-soft：后者与列表里「通知」标签的底色撞色，
而这条带子应该是中性的，不能跟彩色标签抢注意力。 */
background: var(--line-soft); border-bottom: 1px solid var(--line); }
.sn-l { display: inline-flex; align-items: center; gap: 8px;
font-size: calc(16px * var(--fs, 1)); font-weight: 700; color: var(--ink); }
/* z240：3px 青绿竖条 —— 纯装饰，用 flex 子元素而不是 border-left，
这样它跟着标题字号走、也不会被 .sn-l 的 gap 吃掉位置 */
.sn-bar { flex: 0 0 auto; width: 3px; height: 15px; border-radius: 2px; background: var(--teal-2); }
.sn-body { padding: 2px var(--sn-px) 5px; }
.sn-dot { font-style: normal; font-size: calc(11px * var(--fs, 1)); line-height: 1;
background: #d64541; color: #fff; border-radius: 999px; padding: 2px 7px; }
.sn-more { font-size: calc(11px * var(--fs, 1)); color: var(--teal-2); white-space: nowrap; }
.sn-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; min-width: 0; }
.sn-row + .sn-row { border-top: 1px dashed var(--line-soft); }
.sn-tag { flex: 0 0 auto; font-size: calc(10.5px * var(--fs, 1)); line-height: 1.5;
padding: 1px 6px; border-radius: 5px; border: 1px solid transparent; }
.sn-tag.k-notice { color: var(--teal); background: var(--teal-soft); border-color: #cfe4e0; }
.sn-tag.k-announcement { color: var(--amber); background: var(--amber-soft); border-color: #f0dfbe; }
.sn-tag.k-update { color: var(--violet); background: var(--violet-soft); border-color: #e3d8f7; }
.sn-t { flex: 1 1 auto; min-width: 0; font-size: calc(13px * var(--fs, 1)); color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-d { flex: 0 0 auto; font-size: calc(11px * var(--fs, 1)); color: var(--ink-3); }
.sn-empty { font-size: calc(12.5px * var(--fs, 1)); color: var(--ink-3); padding: 8px 0 4px; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
/* 工作台 · 团队卡（课题讨论区只展示团队卡，点卡片进入团队页看房间） */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* z338：去掉「房间名预览」那一行之后整体收一档（14/16 → 12/14，gap 8 → 6），
统计压成两组两列，卡片比原来矮约 30px，同屏能多看一排团队。 */
.team-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.team-card:hover { border-color: var(--teal-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.team-card .tc-top { display: flex; align-items: center; gap: 8px; }
.team-card .team-ico { font-size: calc(16px * var(--fs, 1)); }
.team-card .tc-top b { font-size: calc(15px * var(--fs, 1)); }
.team-card .tc-rooms { font-size: calc(12.5px * var(--fs, 1)); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* z236：团队卡的四个数字分**两行**（课题·Run / 手稿·发表论文）。
z237：先试过并成一行，用户看后要求还是两行 —— 已回退；「进入团队 →」也随之从右上角
挪回**右下角**（在 .tc-foot 里靠右、与第二行数字底部对齐）。 */
.team-card .tc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.team-card .tc-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* z338：四项统计（课题 / Run / 手稿 / 论文）要在 280~290px 的卡宽里**排成一行**，
所以把项间距与字号各收一点（12 → 11.5px，gap 12 → 9px）。实测 289px 卡宽可一行放下。 */
.team-card .tc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 9px; }
/* z240：团队卡统计数字放大到与房间卡 `.room-stats .rs b` 同一口径（13px / 700 / --ink），
量词仍是 12px 次要色 —— 只放大数字，四类目在 280px 窄卡上才排得下、不会挤成四行。 */
.team-card .tc-num { font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3); white-space: nowrap; }
.team-card .tc-num b { color: var(--ink); font-weight: 700; font-size: calc(13px * var(--fs, 1)); }
.team-card .team-count { font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3); }
/* 卡片右上角只放未读 / 待审徽标。
⚠️ 用 margin-left:auto 把徽标推到右边，而不是绝对定位 —— 卡片宽度随栅格变化，
绝对定位会在窄卡上压住标题。 */
.team-card .tc-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.team-card .tc-top > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* z237：「进入团队 →」回到右下角 —— 与第二行数字的底边对齐，不再占标题行的位置。 */
.team-card .team-enter { flex: 0 0 auto; font-size: calc(12px * var(--fs, 1)); color: var(--teal); font-weight: 600; white-space: nowrap; }
.team-room-wrap { display: flex; flex-direction: column; gap: 6px; }
/* z237：团队页同一行的卡片等高（栅格拉伸）——把底栏钉到底部，
否则标题折成两行的卡会把「申请加入」按钮顶下去，一排按钮高低不齐。 */
#teamGrid .room-card { display: flex; flex-direction: column; }
#teamGrid .room-card .foot { margin-top: auto; }
.team-room-wrap > .room-card { flex: 1; }
.team-adjust { align-self: flex-start; }
/* 调整分组弹窗 */
.pick-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.pick-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-soft); cursor: pointer; font-size: calc(13px * var(--fs, 1)); }
.pick-item:hover { border-color: var(--teal-2); }
.pick-item input { margin: 0; }
.room-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; }
/* z356：hover 反馈只在**真鼠标**下生效（.has-mouse 由 app.js 按 pointerType 加）。
原来靠 @media (hover: hover) 判断，但企业微信/微信内置 WebView 等会把它误报为 true，
手机点按仍会套上 hover 样式 ⇒ 房间卡闪一下。pointerType 是浏览器自己派发的，判得准。 */
.has-mouse .room-card:hover { border-color: var(--teal-2); box-shadow: var(--shadow); }
.room-card h3 { margin: 0 0 3px; font-family: var(--serif); font-size: calc(16.5px * var(--fs, 1)); }
/* z272（版式 D）：房间卡左侧 3px 课题类型色条 —— 和「撰写」卡的琥珀左边条同一手法，
远看就能按类型分堆。四条规则只改 border-left，:hover 的青色描边依然作用在其余三边，
所以鼠标移上去是「青框 + 类型色左边条」，两边信息都在。
⚠️ 写房间（kind=writing）不会带 rt-* class，琥珀色条不会被顶掉。
⚠️ 颜色一律引用主题变量（--c-* 在文件末尾定义，全部转发到 --violet/--blue/…），
否则换「暖阳陶土」等主题后这四个色条会跟主题打架。 */
.room-card.rt-science { border-left: 3px solid var(--c-science); }
.room-card.rt-major { border-left: 3px solid var(--c-major); }
.room-card.rt-minor { border-left: 3px solid var(--c-minor); }
.room-card.rt-extend { border-left: 3px solid var(--c-extend); }
.room-card .meta { font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); margin-bottom: 10px; }
.room-card .desc { font-size: calc(12.5px * var(--fs, 1)); color: var(--ink-2); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
/* z236：房间卡的统计行 —— 取代原来的「课题说明」（用户要求）。
保留与原 desc 相同的最小高度，让「已加入 / 未加入」两种卡的底部仍然对齐。 */
.room-card .room-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 34px; align-content: flex-start; margin: 0 0 6px; font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); }
.room-card .room-stats .rs { white-space: nowrap; }
.room-card .room-stats .rs b { color: var(--ink); font-weight: 700; font-size: calc(13px * var(--fs, 1)); }
.room-card .foot { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3); }
/* z235：未加入房间的卡片（团队页 / 临时测试区）。
它不能点进去（还没有权限），所以不给手型、不加悬停高亮 —— 否则用户会以为点了有反应。
底部同样是「左成员名单 + 右申请按钮」，成员名过长时省略，全名在 title 里。
z237：成员徽标**按内容自适应宽度**（原来是 `flex:1 1 auto`，在长卡片上被拉成一条横贯的色块，
用户截图反馈「红框太长」）。改成 0 1 auto：自适应 + 空间不足时才收缩省略，
与已加入的房间卡完全一致；按钮与提示包进 .jc-act，避免被 space-between 拆散。 */
.room-card.join-card { cursor: default; }
.room-card.join-card:hover { border-color: var(--line); box-shadow: none; }
.room-card.join-card .foot { gap: 8px; }
.room-card.join-card .foot .badge.exp { flex: 0 1 auto; min-width: 0; }
.jc-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.jc-hint { font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-3); white-space: nowrap; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: calc(11px * var(--fs, 1)); font-weight: 500; }
/* z148：房间卡上的「实验成员」chip。
原来这里显示「我是管理员」，对看卡片的人没有信息量；改成"这个房间是谁在做实验"。
卡片宽度有限，所以**必须 nowrap + 省略号**：名字多时由 JS 截成「等 N 人」，
完整名单在 title 里（悬停可看）。 */
.badge.exp { background: var(--teal-soft); color: var(--teal); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.badge.exp.none { background: var(--line); color: var(--ink-3); }
.badge.exp.loading { background: var(--line); color: var(--ink-3); }
.badge.mentor { background: var(--amber-soft); color: var(--amber); }
.badge.student { background: var(--teal-soft); color: var(--teal); }
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel); }
.empty h3 { font-family: var(--serif); color: var(--ink-2); margin: 0 0 6px; }
/* ---------- 房间 ---------- */
/* ★ z317（用户要求：「可以缩小房间名称的字体」+「整个页面的上下有一些空区域」）：
房间头的标题 20px→17px、行距收紧、与聊天卡之间 14px→8px；
页面上下留白由 body.in-room main 单独收（见文件末尾 z317 段），
省出来的高度全部给聊天区（fitRoomViewport 按真实可用高度写死 .discuss 的 height）。 */
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.room-head h2 { font-family: var(--serif); font-size: calc(17px * var(--fs, 1)); line-height: 1.35; margin: 0; }
.room-head .sub { font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3); line-height: 1.5; }
/* z103：房间头的「返回上级」（`‹`）**只在手机端出现** —— 桌面端已经有全局顶栏，
再放一个就是重复入口。手机端房间页会把全局顶栏整个隐藏（body.in-chat .topbar），
没有这个按钮就彻底出不去，详见 js/app.js 里 initMobileRoomChrome 的说明。 */
.room-head .rm-back { display: none; }
/* z94：这排按钮（房间信息/分组/AI模型/刷新/归档/删除）。
原来靠内联 style="display:flex;gap:8px;…"，z94 要在手机端隐藏它，
但**内联样式优先级高于样式表**，写 `.room-acts{display:none}` 会被覆盖 ——
所以内联样式已删到样式表这里（桌面端外观不变，手机端才 display:none）。 */
.room-head .room-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.room-layout { display: grid; grid-template-columns: 1fr 330px; gap: 14px; align-items: start; }
/* 讨论区 */
.discuss { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
/* ⚠️ z96：`flex: none` 是**必须**的，不是装饰。
`.discuss` 是 column flex 容器，`.scope-tabs` / `.msgs` / `.composer` 是它的三个子项。
页签原来没写 flex → 取默认 `flex: 0 1 auto`（flex-shrink:1）→ **会被压缩**；
而它自己 `overflow-x: auto` 又让「自动最小尺寸」变成 0（规范：overflow 非 visible
的 flex item，min-height:auto 解析为 0）→ 没有任何下限兜底。
实测（390×844）：页签基准 39px、`.msgs` 基准 = 内容高度。
溢出按 flex-shrink × 基准 的比例分摊：
- 空房间（内容 683 < 容器 791）不溢出 → 页签 39px 正常；
- design 分区溢出 146px → 页签 39 → 31px；
- 历史几千 px 时溢出几千 px → 页签被压到 ≈5px = **看起来完全消失**。
这正是「有历史消息的房间三个分区出不来、没消息的房间能出来」的真正原因。
修法：页签锁死不压缩（与 `.composer` 已有的 `flex: none` 同理，当初漏了页签）。 */
.scope-tabs { flex: none; display: flex; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.scope-tabs button { flex: 1; padding: 11px 8px; border: 0; background: transparent; font-size: calc(13.5px * var(--fs, 1)); color: var(--ink-3); border-bottom: 2px solid transparent; }
.scope-tabs button.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; background: var(--panel); }
/* z61 分区未读红点：贴在分区 tab 标题右侧，进房间就知道「哪个分区有我没看的」 */
.scope-unread { display: inline-block; margin-left: 5px; padding: 0 5px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: #e5484d; color: #fff; font-size: calc(10.5px * var(--fs, 1)); font-weight: 600; vertical-align: 1px; text-align: center; }
.scope-tabs button.on .scope-unread { display: none; }
/* ══ z485：闲聊区（第四个分区）══
闲聊区的三条硬约束在界面上必须**看得见**，否则用户会以为 AI "忘了资料"：
· 顶部一条提示条（只在闲聊区出现）
· 输入区不出现「文件」按钮（闲聊区一律不产出、不归档文件）
两者都由 `.discuss.chat-mode` 一个类控制 —— 切分区时只 toggle 这一个类，
不去改内联样式，避免重绘时闪一下。 */
.chat-scope-bar { display: none; }
.discuss.chat-mode .chat-scope-bar {
flex: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
padding: 8px 12px; border-bottom: 1px solid var(--line);
background: #fff8e6; color: #8a6212; font-size: calc(11.5px * var(--fs, 1)); line-height: 1.5;
}
.chat-scope-bar b { font-weight: 700; color: #7a5410; }
.chat-scope-bar span { opacity: .92; }
.discuss.chat-mode .gen-doc-btn { display: none !important; }
/* 闲聊区的消息气泡整体压暗一档，和三个课题分区在视觉上区分开 */
.discuss.chat-mode .scope-tabs button[data-scope="chat"].on { color: #8a6212; border-bottom-color: #d8a13a; }
/* z61 房间卡上的未读分区提示行 */
.unread-hint { margin: -2px 0 6px; font-size: calc(11px * var(--fs, 1)); color: #e5484d; }
.msgs { flex: 1; overflow-y: auto; padding: 16px; max-height: 52vh; min-height: 340px; display: flex; flex-direction: column; gap: 14px; }
/* ⚠️ z92：.msgs 的**所有**直接子项都不许被压缩（flex item 的 flex-shrink 默认 1）。
不只是 .msg —— 未读分隔线 / 历史折叠卡 / 空态提示同样是 flex item，
内容一多它们也会被压扁。统一在这里兜底，比逐个加更不容易漏。
（真正的病根与逐条解释见下面 .msg 那段注释） */
.msgs > * { flex-shrink: 0; }
/* ⚠️⚠️ z91：这里原来只有 `display: flex; gap: 10px`，缺三样东西，
后果在窄屏（手机）上**自己的消息整行溢出容器、被裁掉右侧**：
用户报「手机端我自己发的消息看不到了，电脑端可以看到」。
原因（三个都要补，缺一个都还会溢出）：
① `align-items: flex-start` —— flex 子项默认 `stretch`，
.msg.me 是 row-reverse，头像会被拉成和气泡一样高。
② `min-width: 0` —— flex item 的 min-width 默认 auto，
里面的 .txt 按内容宽度撑开，把整行顶出容器。
③ `width: 100%` —— .msgs 是 flex column 容器，
.msg 作为子项宽度由内容决定，不写 100% 就没有确定宽度可供收缩。
（这是 z90 移动端输入框同一个坑的另一个表现，见红线 115。） */
.msg { display: flex; gap: 10px; align-items: flex-start; min-width: 0; width: 100%; }
.msg .av { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fs, 1)); font-weight: 600; flex-shrink: 0; }
.msg .body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
/* 气泡本身也要能收缩：.txt 是 inline-block，max-width:100% 相对的是 .body，
而 .body 曾经没有 min-width:0 → 链条断在最上游。 */
.msg .txt { min-width: 0; overflow-wrap: anywhere; }
/* ⚠️⚠️⚠️ z92：这条修的是「手机端看不到自己发的消息」，与横向溢出无关。
`.msgs` 是 `display:flex; flex-direction:column`，所以每条 `.msg` 都是一个
**column 方向的 flex item**，而 flex item 的 `flex-shrink` 默认值是 **1**。
于是只要消息总高度超过 `.msgs` 的 `max-height`（手机端 60vh），浏览器不会
让容器滚动，而是**按比例把每条消息压扁**来「塞进去」：
· 自己刚发的那条（永远在最后、最靠近底边）被压得最狠
· 气泡文字被从中间切断、z89 的「N 人未读」回执被 overflow 直接裁掉
→ 用户看到的正是「自己的消息像跳到屏幕外面去了」。
为什么电脑端没事：`max-height` 是 52vh 且视口高，内容通常没超；手机端
60vh 的盒子在窄屏上更容易被填满，一超就触发。
为什么「刷新后依然看不到」：这是纯布局行为，与数据、缓存、Service Worker 全无关。
⚠️ 判据（下次排查同类问题记牢）：`.msgs` 里若出现 `scrollHeight === clientHeight`
却「内容明明超了」，就是 flex-shrink 在压缩，而不是容器没滚动。 */
.msg { flex-shrink: 0; }
.msg .who { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.msg .who b { font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; }
.msg .who .time { font-size: calc(11px * var(--fs, 1)); color: var(--ink-4); }
.msg .who .model { font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-3); background: var(--line-soft); padding: 1px 7px; border-radius: 20px; }
.msg .who .doc-tag { font-size: calc(10.5px * var(--fs, 1)); color: var(--amber); background: var(--amber-soft); padding: 1px 7px; border-radius: 20px; }
.msg .txt { font-size: calc(13.5px * var(--fs, 1)); color: var(--ink); word-break: break-word; position: relative; max-width: 100%; }
/* ===== 微信式对话：自己的消息靠右（绿色气泡），他人与 AI 靠左 ===== */
.msg.me { flex-direction: row-reverse; }
.msg.me .body { align-items: flex-end; }
.msg.me .who { justify-content: flex-end; }
.msg.me .av { background: var(--teal); color: #fff; }
.msg.ai .av { color: #fff; }
.msg.other .txt, .msg.ai .txt, .msg.me .txt {
display: inline-block; max-width: 100%; border-radius: 12px; padding: 9px 12px;
border: 1px solid transparent; box-shadow: 0 1px 1px rgba(28, 43, 42, .03);
}
.msg.other .txt { background: var(--bubble-other-bg); border-color: var(--bubble-other-bd); border-top-left-radius: 4px; }
.msg.ai .txt { background: var(--bubble-ai-bg); border-color: var(--bubble-ai-bd); border-top-left-radius: 4px; }
.msg.me .txt { background: var(--bubble-me-bg); border-color: var(--bubble-me-bd); border-top-right-radius: 4px; }
/* 气泡小尾巴（指向头像） */
.msg.other .txt::before, .msg.ai .txt::before, .msg.me .txt::before {
content: ''; position: absolute; top: 10px; width: 8px; height: 8px;
transform: rotate(45deg); border: 1px solid transparent; background: inherit;
}
.msg.other .txt::before { left: -5px; border-left-color: var(--bubble-other-bd); border-bottom-color: var(--bubble-other-bd); }
.msg.ai .txt::before { left: -5px; border-left-color: var(--bubble-ai-bd); border-bottom-color: var(--bubble-ai-bd); }
.msg.me .txt::before { right: -5px; border-top-color: var(--bubble-me-bd); border-right-color: var(--bubble-me-bd); }
.msg .txt p { margin: 0 0 7px; }
.msg .txt p:last-child { margin-bottom: 0; }
.msg .txt ul, .msg .txt ol { margin: 5px 0; padding-left: 20px; }
.msg .txt li { margin: 2px 0; }
.msg .txt h3, .msg .txt h4 { margin: 9px 0 5px; font-size: calc(13.5px * var(--fs, 1)); font-family: var(--serif); }
.msg .txt code { background: var(--line-soft); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: calc(12px * var(--fs, 1)); }
.msg .txt pre { background: var(--line-soft); padding: 9px 11px; border-radius: 7px; overflow-x: auto; font-family: var(--mono); font-size: calc(12px * var(--fs, 1)); }
/* 表格样式统一由 .tbl-wrap 提供（md 渲染的所有表格都包裹其中） */
.msg .txt .refs { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: calc(12px * var(--fs, 1)); }
.msg .txt .refs .refs-title { font-weight: 600; color: var(--ink-3); font-size: calc(11.5px * var(--fs, 1)); margin-bottom: 3px; }
.msg .txt .refs .ref-item { margin: 3px 0; line-height: 1.5; }
.msg .txt .refs .ref-no { color: var(--teal); font-weight: 600; margin-right: 5px; }
.msg .txt .refs a { color: var(--blue); word-break: break-all; }
.msg .txt blockquote { margin: 6px 0; padding: 3px 12px; border-left: 3px solid var(--line); color: var(--ink-2); }
.typing::after { content: '▋'; color: var(--teal-2); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* 推理模型思考中的进度提示（否则长时间空白，用户以为没回复） */
.thinking-box {
display: flex; align-items: center; gap: 7px;
font-size: calc(12.5px * var(--fs, 1)); color: var(--ink-3);
}
.thinking-box em {
font-style: normal; color: var(--ink-4); font-size: calc(11.5px * var(--fs, 1));
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.dot-pulse {
width: 7px; height: 7px; border-radius: 50%; background: var(--teal-2); flex-shrink: 0;
animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* ★★ z314（用户要求，附微信截图）：输入框外面也要白的，和聊天区融为一体。
原来是 var(--panel-soft) 米色 —— 聊天区是白卡，输入区是米色带，
两条色带之间还夹着一道边框，看着像"两个框拼在一起"。
现在整块跟聊天区同一个白底，只靠输入框自己的那道细边做分隔（微信就是这个观感）。
⚠️ 不要把 --panel-soft 加回来。 */
.composer { border-top: 1px solid var(--line-soft); padding: 10px 12px; background: var(--panel); }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: calc(13.5px * var(--fs, 1)); font-family: inherit; resize: none; min-height: 40px; max-height: 130px; background: var(--panel); line-height: 1.6; }
.composer textarea:focus { outline: 0; border-color: var(--teal-2); box-shadow: 0 0 0 3px var(--teal-soft); }
.composer-hint { display: flex; justify-content: space-between; font-size: calc(11px * var(--fs, 1)); color: var(--ink-4); margin-top: 5px; }
/* z214：@ 弹层必须能在手机上**滚**（用户报障 2：只能看到 5 个人）
- touch-action: pan-y → 手指纵向拖动交给本层滚动（原来 JS 在 pointerdown 里
preventDefault，把滚动一起掐死了；JS 已改，这里把浏览器侧的判定也写明确）
- -webkit-overflow-scrolling: touch → iOS 惯性滚动
- overscroll-behavior: contain → 滚到头不要把整页/消息区带着滚
- max-height 用 min()：键盘弹起后可视高度只剩一半时，别让弹层顶出屏幕 */
.at-pop { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; z-index: 40; min-width: 172px; max-width: calc(100vw - 24px); max-height: 232px; max-height: min(232px, 46vh); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.at-item { padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: calc(13px * var(--fs, 1)); }
.at-item:hover, .at-item.sel { background: var(--teal-soft); }
.at-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.at-hint { padding: 5px 10px; border-top: 1px solid var(--line-soft); font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-3); }
/* ---- 对话内附件 ---- */
.attach-btn {
width: 34px; height: 34px; flex-shrink: 0; padding: 0;
border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
color: var(--ink-2); display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden; /* z99：铺满式 file input 的定位宿主 */
}
.attach-btn:hover { border-color: var(--teal-2); color: var(--teal); background: var(--teal-soft); }
/* z108：「实验数据」专用上传入口已删除（改走「消息右键 → 归档到课题文件 → 实验数据」），
对应 .data-btn 样式一并移除。实验数据经由 .attach-btn / 手机端「+」面板发送。 */
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.attach-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
background: var(--panel-soft); font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); max-width: 240px;
}
.attach-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .sz { color: var(--ink-3); font-size: calc(11px * var(--fs, 1)); flex-shrink: 0; }
.attach-chip .x { cursor: pointer; color: var(--ink-3); font-size: calc(14px * var(--fs, 1)); line-height: 1; flex-shrink: 0; }
.attach-chip .x:hover { color: var(--danger); }
.attach-chip img { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.attach-chip.uploading { opacity: .6; }
.msg .txt .attach-view { margin: 6px 0; }
.msg .txt .attach-view img { max-width: 220px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.msg .txt .attach-file {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); font-size: calc(12.5px * var(--fs, 1));
}
/* 侧栏 */
.side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: sticky; top: 68px; }
.side-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.side-tabs button { flex: 1; padding: 9px 2px; border: 0; background: transparent; font-size: calc(12.5px * var(--fs, 1)); color: var(--ink-3); border-bottom: 2px solid transparent; }
.side-tabs button.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; background: var(--panel); }
/* z64：房间内「待我处理」徽标 —— 侧栏页签小红点 + 头部 chip。
原来房间内完全没有待审批提示，用户必须切到「成员」/「知识库」页签才知道有事要处理。 */
.side-tab-badge {
display: inline-block; margin-left: 4px; padding: 0 5px; min-width: 15px; height: 15px;
line-height: 15px; border-radius: 8px; background: var(--amber); color: #fff;
font-size: calc(10px * var(--fs, 1)); font-weight: 600; vertical-align: 1px; text-align: center;
}
.side-tabs button.on .side-tab-badge { background: var(--teal); }
.pending-chip {
display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px;
background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber);
font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; cursor: help; white-space: nowrap;
}
.side-body { padding: 13px; max-height: 62vh; overflow-y: auto; }
.side-sec { margin-bottom: 16px; }
.side-sec:last-child { margin-bottom: 0; }
.side-sec h4 { margin: 0 0 8px; font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.file-item { display: flex; gap: 9px; align-items: flex-start; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 6px; background: var(--panel-soft); }
.file-item .ico { width: 25px; height: 25px; border-radius: 6px; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: calc(11px * var(--fs, 1)); flex-shrink: 0; }
.file-item .n { font-size: calc(12.5px * var(--fs, 1)); font-weight: 500; word-break: break-all; }
.file-item .m { font-size: calc(11px * var(--fs, 1)); color: var(--ink-3); margin-top: 1px; }
/* 课题文件条目（z29）：单行精简卡，与 .kb-row 一致；完整信息在 title tooltip */
.file-row { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; background: var(--panel-soft); border: 1px solid var(--line-soft); margin-bottom: 4px; font-size: calc(12px * var(--fs, 1)); }
.file-row:hover { border-color: var(--line); background: var(--panel); }
.file-row .fdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.file-row .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: calc(12px * var(--fs, 1)); }
.file-row .kbadge { font-size: calc(10px * var(--fs, 1)); padding: 0 5px; border-radius: 20px; background: var(--teal-soft); color: var(--teal); flex-shrink: 0; }
/* z149：待确认的实验结论 —— 一眼能看出"还没归档"，且不能被当成已归档文件 */
.file-row.is-pending { border-style: dashed; border-color: var(--amber); background: var(--amber-soft); }
.file-row .kbadge.pend { background: #fff4e0; color: #a4620a; border: 1px solid #f0cf9a; }
.file-row .fr-wait { font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-3); flex-shrink: 0; }
.file-row .fsz { font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-3); flex-shrink: 0; }
.file-row .fact { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.file-row .fact .btn-ghost.sm { padding: 1px 6px; font-size: calc(10.5px * var(--fs, 1)); }
.file-row .fact .btn-danger { padding: 1px 5px; font-size: calc(10.5px * var(--fs, 1)); }
/* ⚠️ z91：这里原来没有 min-width / flex-wrap，窄屏下姓名会被压成**逐字竖排**
（用户截图里「李龙杰 / 导师 / 1 个房间」全竖着占了好几行）。
原因同红线 115：flex item 的 min-width 默认 auto，且 nowrap 的中文文本不会断行。
正解：① 姓名容器 min-width:0 + 允许省略；② 整行可换行，按钮另起一行。 */
.member-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; min-width: 0; flex-wrap: wrap; }
.member-row > * { min-width: 0; }
.member-row .m-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row .av { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; }
/* z98：上传区改成 `