/* ═══════════════════════════════════════════════════════════════
   光合引擎 · 云端版补充样式
   基础样式全部沿用 style.css（与本地工作台同源），这里只加
   云端版独有的：登录门、步骤条、两栏、流水表、码堆。
   ═══════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* ── 「只在某一种屏幕上出现」的通用开关（2026-10-10）──
   来历：后台租户表在手机上太宽要横滑，「注册 / 最后登录」那一列根本看不到。
   做法：同一份数据渲染两遍 —— 宽屏用单独一列（.when-wide），
   窄屏把它并进第一列（客户名下面，.when-narrow）。
   以后再有"宽表在某一边塞不下"的情况，用这两个类，别再各写各的。
   （窄屏的那半边在文件末尾的移动端块里打开） */
.when-narrow { display: none; }

/* ── 登录门 ── */
/* 基础样式里 input 的宽度规则只覆盖了 text/number/textarea/select，没含 password，
   导致密码框只有默认宽度 —— 这里补齐（只在本版补，不动本地工作台那份） */
input[type="password"] {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text);
  background: #fff; outline: none;
}
input[type="password"]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.gate {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 32px 18px;
}
.gate-card { width: 100%; max-width: 400px; padding: 26px 26px 22px; margin: 0; }
.brandline { display: flex; align-items: center; gap: 9px; justify-content: center; }
.brandline img { height: 26px; width: auto; display: block; }
.brandname { font-size: 13.5px; font-weight: 600; letter-spacing: .3px; }
.brandcap { text-align: center; font-size: 11.5px; color: var(--muted); margin: 6px 0 20px; }
.gate-foot { margin-top: 16px; text-align: center; max-width: 400px; }

.gate-card .seg { width: 100%; justify-content: space-between; }
.gate-card .seg button { flex: 1; padding: 6px 8px; font-size: 12.5px; }

/* 示例数据预览的顶部提示条（只在 ?demo=1 时出现） */
.demo-bar {
  background: var(--brand-soft); border: 1px solid #cfe0ff; color: #2c3f63;
  border-radius: 10px; padding: 9px 14px; font-size: 12.5px; margin-bottom: 16px;
}

.btn.wide { display: block; width: 100%; }
.btnlink {
  border: 0; background: transparent; color: var(--brand); font: inherit;
  font-size: 12.5px; padding: 0; cursor: pointer;
}
.btnlink:hover { text-decoration: underline; }
.btnlink.quiet { color: var(--muted); }
.links { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* ── 步骤条（第一次使用：填邮箱 / 收邮件 / 设密码）── */
.steps { display: flex; gap: 8px; margin-bottom: 18px; }
.step { flex: 1; text-align: center; }
.step b {
  display: block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%;
  background: #f1f3f6; color: var(--muted); font-size: 12px; margin: 0 auto 6px; font-weight: 600;
}
.step.on b { background: var(--brand); color: #fff; }
.step.done b { background: var(--brand-soft); color: var(--brand); }
.step em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.step.on em { color: var(--text); font-weight: 600; }

/* ── 顶栏的账号条 ── */
.acctbar { display: flex; align-items: center; gap: 10px; }

/* ── 总览的数字卡：略收窄，宽屏能一行放下 5 张（否则第五张孤零零换行）── */
.grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

/* ── 两栏（账号页）── */
/* 两栏等高：右边框体要和左边齐平（阿和 2026-09-22 指出不对齐看着不舒服） */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* ── 积分用量说明：常驻可查，但不抢眼（阿和 2026-09-22：不用这么明显）── */
.pts { font-size: 12.5px; }
.pts td { padding: 4px 0; border-bottom: 0; color: var(--muted); }
.pts td:last-child { text-align: right; white-space: nowrap; }
.pts tr:last-child td { border-bottom: 0; }
.pts tbody tr:hover { background: transparent; }

/* ── 积分流水表 ── */
.ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
.ledger th, .ledger td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ledger th { color: var(--muted); font-weight: 500; font-size: 12px; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger td:last-child { text-align: right; }
.minus { color: #d64545; }
.plus { color: var(--ok); }

/* 积分流水：标题行 + 筛选条 + 分页（2026-10-26 阿和：「下拉太多了，要分页 + 查询分类」） */
.ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ledger-sum { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ledger-sum .sep { color: #d8dde5; }
.ledger-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.ledger-bar select, .ledger-bar input {
  height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  padding: 0 10px; font-size: 13px; color: var(--text); font-family: inherit; width: auto;
}
.ledger-bar select { flex: 0 0 auto; min-width: 130px; max-width: 220px; }
.ledger-bar input { flex: 1 1 200px; min-width: 150px; }
.ledger-bar select:focus, .ledger-bar input:focus { outline: none; border-color: var(--brand); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager .sub { font-size: 12.5px; color: var(--muted); }
.pager.pager-top { margin: 10px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ── 码堆（生成后一片可复制的码）── */
.codepile {
  max-height: 320px; overflow: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px;
}
.codepile .copyline { font-size: 12.5px; text-align: center; padding: 8px; letter-spacing: .4px; }

/* 空态／表格里的次级文字沿用 style.css，不再重复定义 */

/* ═══════════════════════════════════════════════════════════════
   以下是 2026-09-17 补的：把「提示」做成一定看得见的浮层，
   并补上本地工作台有、这份基础样式里没有的几个类。
   起因：原来的 .toast 只是"页面里的一行小字"，页面没插容器就完全不显示
   → 用户点了按钮像"没反应"。提示必须浮在最上层，任何页面都能看见。
   ═══════════════════════════════════════════════════════════════ */

/* ── 提示浮层：固定底部居中，出现即有底色与阴影 ── */
.toastbar {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  z-index: 90; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 0;
  pointer-events: none;
}
.toastbar .toast {
  padding: 10px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: #232a35; color: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.toastbar .toast.on { opacity: 1; transform: translateY(0); }
.toastbar .toast.ok { background: #146c43; }
.toastbar .toast.err { background: #b0322d; }

/* ── 全局错误条：任何未捕获的脚本错误都显示在这里（不许静默失败）── */
.errbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  background: #b0322d; color: #fff; font-size: 13px; line-height: 1.5;
  padding: 10px 16px; display: flex; align-items: flex-start; gap: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
/* ⚠️ 必须显式写 `[hidden]` 的隐藏：上面的 `display:flex` 会盖掉浏览器对 `hidden` 的默认 display:none，
   结果"空错误条"一直挂在页面顶端挡住内容（2026-09-17 截图自查抓到）。 */
.errbar[hidden] { display: none; }
.errbar b { font-weight: 600; }
.errbar .eb-close {
  margin-left: auto; border: 0; background: rgba(255, 255, 255, .18); color: #fff;
  font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 7px; cursor: pointer; flex: 0 0 auto;
}
.errbar .eb-close:hover { background: rgba(255, 255, 255, .3); }

/* 有错误条时把整页往下让一点，别挡住顶栏 */
body.has-errbar .app, body.has-errbar .gate { padding-top: 44px; }

/* ── 二级筛选：整行下划线 tab（本地工作台同款，这份基础样式里没有）── */
.tabs.flat { gap: 20px; border-bottom: 1px solid var(--line); }

/* 工具条里的筛选组要占满剩余宽度。
   ⚠️ 这原本是写在 HTML 上的行内 `style="flex:1"` —— 行内样式优先级压过了响应式规则，
   于是手机上那条「占满整行」的媒体查询**完全失效**，容器被挤到最窄、按钮只好竖着堆，
   表现是右侧一竖列（阿和 2026-09-29 截图）。行内样式一律挪进这里。 */
.toolbar .tabs.flat { flex: 1; min-width: 0; }

/* 手机端才用的「图标行」和「展开行」（搜索 / 筛选）：桌面端一律不显示 —— 桌面用 .insp-tabs 那排按钮。
   手机上在 @media 里改成 flex / block。 */
.micons, .mrow { display: none; }
.tabs.flat .tab {
  border: 0; background: transparent; border-radius: 0; padding: 8px 0 10px;
  color: var(--muted); font-size: 13px;
}
.tabs.flat .tab:hover { background: transparent; color: var(--text); }
.tabs.flat .tab.active {
  color: var(--text); font-weight: 600; background: transparent; border-color: transparent;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.tabs.flat .tab.dim { opacity: .45; }

/* 新生成 / 刚变更的那一行：短暂高亮 */
tbody tr.fresh { background: #f6f9ff; }
tbody tr.fresh td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* 复盘的分项数字框：一排等宽小框，都不必填 */
.metrics { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.metric { display: flex; flex-direction: column; gap: 4px; flex: 1 1 96px; max-width: 152px; min-width: 88px; }
.metric em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.metric input { width: 100%; }

/* 内容详情里"只读段落"的阅读感：正文要有呼吸 */
.pre { white-space: pre-wrap; }

/* 侧栏导航分组标题（把"创作"与"账号/后台"分开） */
.nav-split { height: 1px; background: var(--line); margin: 10px 12px; }

/* ── 人设问答的对话气泡（建人设卡走问答，不让客户对着空字段发呆）──
   ⚠️ 字号别调小：这是客户要**读进去**的内容（AI 的提问、给的人设草稿），
   2026-09-18 阿和反馈 13.5px "太小、不显眼"，改成 15px 且行距放宽。 */
/* 聊天区：**消息贴着输入框往上长**（2026-10-20 四次）。
   之前消息从顶部往下排，只有几条时全堆在上半屏、下面一大片空（阿和：「聊天文案像凭空出来的」）。
   `margin-top:auto` 把第一条往下推：内容少时整体贴底，多到溢出时自动失效、正常滚动。
   ⚠️ 只对"已有消息"生效；空态的 .chat-idle 另有垂直居中，别打架。 */
.chat:not(.chat-idle) > :first-child { margin-top: auto; }
/* 聊天区：**固定高度、内部滚动**（2026-09-21 阿和：「聊的越多页面越来越长」）。
   卡是自动写入的，对话只是过程记录 —— 所以给它一个高度，长了自己在框里滚，页面不再被撑长。
   配合 app.js 的 CHAT_MAX（只留最近 40 条）+ 「清空对话」按钮，三件一起才治本。 */
.chat {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 14px;
  max-height: 300px; overflow-y: auto;
  padding: 4px 2px;   /* 给滚动条留位，气泡不贴边 */
}
/* ── 气泡（2026-10-20 二次重做）──
   上一版：自己的话浅灰气泡、对面的话**裸文本**（想学 ChatGPT 的排法）—— 阿和说
   「我发出的文字和 AI 发出的文字，排版也太丑了」。中文长段落裸排 + 一侧气泡，
   左右轻重差太大，像没排完。这一版两边都给气泡：
     · 自己的话：浅灰实底、右下角收角（指代"我说的"）
     · 对面的话：白底 + 一道浅描边、左下角收角 —— 在白色卡片上仍看得出是一块话
   两边的字号、行高、内边距**完全一样**，只有底色和对齐不同，视觉重量才对称。 */
.bubble {
  max-width: min(640px, 78%); padding: 12px 16px; border-radius: 16px;
  font-size: 15px; line-height: 1.8; word-break: break-word;
}
.bubble.assistant {
  align-self: flex-start;
  background: #fff; border: 1px solid #e9edf2;
  border-bottom-left-radius: 6px;   /* 靠近说话人那一侧收角 */
  color: var(--text);
}
.bubble.user {
  align-self: flex-end;
  background: #eef1f5; color: var(--text);
  border-bottom-right-radius: 6px;
}
.bubble code { background: rgba(0, 0, 0, .07); padding: 1px 5px; border-radius: 5px; font-size: 13.5px; }
.bubble.user code { background: rgba(0, 0, 0, .06); }
/* 正在思考/正在输出：一直有个转圈 + 实时字数，客户知道"它在干活"，不是死机 */
.bubble.think {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); background: #f5f7fa; border: 0;
  padding: 10px 14px; border-radius: 14px; max-width: 100%;
}
/* 出错：留在对话里（不是一闪而过的提示），带「重试」 */
.bubble.err { background: #fdf3f3; border: 1px solid #f0c9c9; color: #a33232; align-self: flex-start; }
.bubble.err .anchor { color: #a33232; text-decoration: underline; }
/* 「建议写进人设卡」确认卡（2026-10-20）：模型给建议 → 客户确认 → 才写库。
   这张卡是**对话里的一步**，不是设置页 —— 所以做得轻：浅底、无重边框、按钮在下面。 */
.bubble.propbubble { max-width: min(640px, 92%); background: #fbfcfe; border: 1px solid #e6ebf2; padding: 15px 17px; }
.prop-h { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; }
.prop-h span { font-size: 12px; font-weight: 400; color: var(--muted); }
.prop-list { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 9px; }
.prop-list li b { display: block; font-size: 11.5px; font-weight: 400; color: #98a1ac; }
.prop-list li span { display: block; font-size: 12.5px; line-height: 1.7; color: var(--text); margin-top: 1px; }
.prop-del { display: block; font-style: normal; font-size: 11.5px; color: #b4633a; margin-top: 3px; }
.prop-more { font-size: 12px; color: var(--muted); margin-top: 7px; }
.prop-btns { display: flex; gap: 10px; margin-top: 14px; }
/* 改稿（2026-11-02）：长期规矩建议条 + 改稿记录 —— 都不自动写，客户点了才动 */
/* 改稿区（2026-11-02 阿和：那一行解释小字不需要，排干净一点） */
.rvbox { min-height: 96px; padding: 12px 14px; margin-top: 10px; font-size: 14px; line-height: 1.85; border-radius: 10px; }
.rv-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rv-foot #rvHint { flex: 1 1 auto; min-width: 0; }
.rv-foot #rvGo { flex: 0 0 auto; white-space: nowrap; }
.rev-sug { margin-top: 12px; padding: 12px 14px; background: #f7f7f8; border-radius: 10px; }
.rev-sug-t { font-size: 13px; line-height: 1.8; color: var(--text); }
.revlog { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.revlog summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.revlog ul { margin: 8px 0 0; padding-left: 18px; }
.revlog li { font-size: 12.5px; color: var(--muted); line-height: 1.95; }
.revlog li .tag { margin-left: 6px; font-size: 11px; }
/* 完整草稿放进对话框（2026-10-28）：默认收起，点开看全 11 项 —— 不让内容藏在右栏 */
.prop-full { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; }
.prop-full summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.prop-full .kv { margin-top: 9px; max-height: 240px; overflow: auto; }
.prop-done { font-size: 13px; color: #2f7d4f; }
.prop-done.err { color: #a33232; }
/* 还没开始时的引导：一行标题 + 一行说明 + 例句，整块居中 ——
   旧版只有一句灰字飘在 800px 宽的白卡中间，空得像没做完。 */
.chat-empty { padding: 2px; text-align: left; max-width: 520px; }
.chat-empty b { display: block; font-size: 18px; font-weight: 650; letter-spacing: .1px; margin-bottom: 8px; }
.chat-empty span { display: block; font-size: 13.5px; color: #8a929d; line-height: 1.9; }
.lead { font-size: 14px; color: #6b7480; line-height: 1.9; }

/* 输入行：输入框吃掉剩余宽度，按钮**永远不换行**（窄窗口也不许把按钮挤到下一行） */
.chatrow { display: flex; gap: 10px; align-items: center; }
.chatrow > input { flex: 1 1 auto; min-width: 0; }
.chatrow > .btn { flex: 0 0 auto; white-space: nowrap; }

/* ── 内容中控页：**一整张卡**，对话撑满，输入行钉在底部（2026-10-19 重排）──
   阿和原话：「对话框太小了，高度太小」＋「上面是人设卡，下面红圈里是跟中控说，也太奇怪了」。
   原来是**两张卡上下叠**、对话被 max-height:300px 限死，主体被挤成底下一窄条。
   现在并成一张卡，高度全走 flex：折叠条（它记住的你）→ 对话（flex:1、内部滚）→ 输入行。
   ⚠️ 不写死 px / 100vh：手机上地址栏收展、底部导航安全区都不一样，写死一定错位。
   ⚠️ .chat 那条 max-height:300px 在这张卡里必须压掉，否则又变回"小对话框"。 */
/* ⚠️ 这里必须 `height: 100%`，不能是 `min-height: 100%`：
   min-height 只是"下限"，容器仍会被内容撑高 —— 30 条对话时聊天区量到 **5900px**，
   整页跟着滚 5000 多 px（线上实测，不是理论）。height 才是确定高度，
   有了它 .chat 的 flex-shrink + overflow-y:auto 才真的生效。 */
.chatpage { display: flex; flex-direction: column; height: 100%; }
/* 静默更新设定的那轮：不渲染空气泡（空壳会把间距打乱），改一行居中小字 */
.chat .silent { align-self: center; font-size: 12px; color: #b3b9c2; }
/* 设定展开时**不再换高度模式**（2026-10-19 下午）：字段表已限高 28vh 内部滚，
   展开后内容总量可控，height:100% 直接装得下（对话区还能吃到 ~290px）。
   旧的「height:auto + 对话区锁 260px」在桌面上把多余空间全沉到输入行下面 ——
   展开后输入行下面一大片白（线上截图实测），已废。
   ⚠️ 手机仍用 height:auto 模式（见文件末尾媒体查询）：字段表整块展开、由内容区滚。 */
.chatpage > .card { margin-bottom: 0; }
.card.chatcard {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px;
  min-height: 430px;                      /* 兜底：折叠条展开/草稿卡出现时不至于把对话压没 */
}
.card.chatcard > #pDraft:empty { display: none; }   /* 空占位会白吃一个 gap */
.card.chatcard > .chat { flex: 1 1 auto; min-height: 220px; max-height: none; margin-top: 0; }
/* 对话列宽（2026-10-20 三次）：1120px 封顶（随屏宽走），气泡用 min(640px, 78%) ——
   气泡最宽 640（约 32 字）；窄屏时按 78% 收，跟着列宽走，不会再被拉成横条。 */
.card.chatcard > .chat,
.card.chatcard > .chatrow.chatinput,
.card.chatcard > #pDraft,
.card.chatcard > .row { width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto; }
/* 还没建卡（一问一答阶段）：问答要占地方，但不能把输入框顶出屏幕 ——
   这个阶段标题 + 引导语 + 问答气泡 + 「差不多了」按钮全挤在一屏里，
   对话区不给上限的话，客户进来第一眼看不到输入框（还得先滚一下）。 */
.card.chatcard.build > .chat { max-height: 34vh; }
.card.chatcard > .chatrow { margin-top: 0; }
/* 输入行：一条细线隔开，永远贴在卡底 —— 对话再长也挤不下去 */
.card.chatcard > .chatrow.chatinput {
  flex: 0 0 auto; border-top: 1px solid var(--line); padding-top: 12px;
}
/* 输入框（2026-10-20 三次）：**输入和发送合成一个圆角框**。
   上一版按钮在框外面，输入框的右边缘和气泡的右边缘永远差一个按钮宽 —— 看着就是没对齐。
   现在整个 .chatbox 就是消息列的宽度，输入框在里面裸奔，聚焦只让整块浮白 + 描边。 */
.chatbox {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #f5f7fa; border: 1px solid transparent; border-radius: 14px;
  padding: 6px 6px 6px 14px;
  transition: background .15s, border-color .15s;
}
.chatbox:focus-within { background: #fff; border-color: #d5dae1; }
.chatbox > input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; border-radius: 0; padding: 8px 0;
  font-size: 14.5px; box-shadow: none;
}
.chatbox > input:focus { background: transparent; border: 0; outline: 0; box-shadow: none; }
.chatbox > .btn { flex: 0 0 auto; white-space: nowrap; }
/* 滚动条收细（默认 17px 的灰条在右栏里很扎眼） */
.arch-list::-webkit-scrollbar, .chat::-webkit-scrollbar { width: 6px; }
.arch-list::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb { background: #e3e7ec; border-radius: 3px; }
.arch-list::-webkit-scrollbar-track, .chat::-webkit-scrollbar-track { background: transparent; }
/* 折叠条右边的「10 / 10 项」：比标题再小一档、淡一档，不跟标题抢视觉 */
.memcount { font-size: 12px; color: #b3b9c2; }
/* 空对话时的例句标签：**点一下直接发出去**。
   为什么要有：对话框撑满之后空对话是一大片白（手机 400px、桌面近 500px），
   客户盯着白屏不知道能说什么。标签比提示语管用，聊起来就自己消失了。
   位置：跟引导话术一起放在 .chat 里、整块垂直居中（见 .chat-idle）——
   贴顶贴底分开放的话，中间会空出一大块，撑满高度反而更难看。 */
.chat-idle { justify-content: center; align-items: center; }
/* 空态整块居中（标题、说明、例句同一中线）：只居中例句、文字靠左，看着像没排完 */
.chat-idle .chat-empty { text-align: center; }
.chat-idle .chips { justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 13px; line-height: 1.2; color: #55606d;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
/* ── 人设卡面板（2026-10-19 晚）── */
/* 入口：对话卡顶部一个**真按钮**。阿和：「这个弹窗按钮不显眼」——
   之前是一条无边框细字，看着不像能点。白底 + 描边 + 圆角，hover 描边变品牌色。
   只在 <1100px 出现：桌面档案常驻右栏，这个按钮是多余的（见下面媒体查询）。 */
.membar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; cursor: pointer; font: inherit;
  transition: border-color .15s;
}
.membar-t { font-size: 13.5px; font-weight: 600; color: var(--text); transition: color .15s; }
.membar .foldcard-arrow { transform: rotate(-90deg); }
.membar:hover { border-color: var(--brand); }
.membar:hover .membar-t { color: var(--brand); }
/* 弹窗：居中白卡 + 半透明遮罩；面板在弹窗内部滚，✕ 在标题行右端 */
.pmodal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 20, 26, .42); padding: 24px;
}
.pmodal[hidden] { display: none; }
.pmodal-card {
  background: #fff; border-radius: 18px; width: min(620px, 100%); max-height: 84vh;
  display: flex; flex-direction: column; padding: 22px 24px 18px;
  box-shadow: 0 24px 60px rgba(17, 20, 26, .18);
}
.pmodal-head { display: flex; align-items: center; gap: 10px; }
.pmodal-t { font-size: 17px; font-weight: 650; }
.pmodal-x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: #98a1ac; padding: 4px 6px;
}
.pmodal-x:hover { color: var(--text); }
/* 面板（弹窗和桌面右栏共用一套结构：标题行 / 提示 / 列表 / 按钮行）。
   ⚠️ 修改就在面板里做（不跳整页表单）——阿和：「进逐条人工修改就退不回去了」。 */
.archmount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.arch-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.arch-t { font-size: 16px; font-weight: 650; }
.arch-hint { margin: 4px 0 10px; font-size: 12.5px; color: #9aa3ae; line-height: 1.7; }
.arch-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.arch-btns { flex: 0 0 auto; display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.arch-btns .arch-reset { margin-left: auto; font-size: 12px; color: #98a1ac; }
/* 字段表**上下排** + 每项一道细线隔开（2026-10-20）：
   330px 宽的右栏里套 96px 两栏，值只剩 220px，一行断三四次、密得像说明书（阿和截图）。
   现在标签一行、内容一段，项与项之间用一条极细的分隔线 —— 11 个字段才读得下去。
   弹窗也跟着改（手机 390px 里两栏只会更挤）。 */
.arch-list .kv { display: block; }
.arch-list .kv dt { font-size: 11.5px; color: #98a1ac; letter-spacing: .2px; }
.arch-list .kv dd { margin: 3px 0 0; font-size: 13px; line-height: 1.8; color: var(--text); }
.arch-list .kv dt:not(:first-child) { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f3f6; }
/* 桌面右栏（≥1100px）：阿和提议的三栏 —— 左导航（原有）不变、中间对话、右边档案常驻。
   低于 1100px 放不下三栏：aside 藏掉，走上面的弹窗。 */
.paside { display: none; }
@media (min-width: 1100px) {
  .chatpage {
    /* 🔴 2026-10-20 阿和：「中间和右边的框体都没有铺满整个界面，比例也不协调」——
       真因是这里原本 `max-width: 1180px; margin: 0 auto`：2560 宽的大屏上，
       内容只占中间 1180，左右各空 570px（他截图就是那样）。
       现在**不设上限、铺满内容区**；右栏宽度跟着视口走（26vw，340~520），
       宽屏上聊天/人设卡的比例才不会一边倒。 */
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 640px);
    /* 🔴 行高必须锁成 minmax(0,1fr)：默认 auto 行会跟随**人设卡的最小内容高**（11 个长字段
       ≈ 909px），把行撑到超过视口 —— 实测内容区溢出 141px、长对话下 49px。
       锁住行高之后，人设卡里多出来的高度交给 .arch-list 内部滚。 */
    grid-template-rows: minmax(0, 1fr);
    gap: 20px;
    width: 100%; max-width: none; margin: 0;
  }
  /* 还没建卡时右侧没有人设卡 —— 留两栏会空出一整列（2026-10-21 新用户截图里就是这样） */
  .chatpage.noaside { grid-template-columns: minmax(0, 1fr); }
  .paside { display: flex; min-height: 0; }
  .paside .archmount {
    background: #fff; border: 1px solid #edf0f4; border-radius: 16px;
    padding: 22px 22px 16px; box-shadow: 0 1px 2px rgba(17, 20, 26, .04);
  }
  .paside .arch-head { margin-bottom: 4px; }
  .paside .arch-t { font-size: 16px; }
  .paside .arch-hint { font-size: 12px; }
  .paside .arch-btns { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .paside .arch-list { padding-right: 8px; }
  .chatpage .membar { display: none; }   /* 档案就在旁边，入口按钮多余 */
  .chatpage .pmodal { display: none; }   /* 桌面不用弹窗（弹窗是手机窄屏的方案） */
}
/* ⚠️ 弹窗是覆盖层：打开/关闭都不影响对话区布局，不需要任何 fold-open 高度切换 */

.draftcard { background: #fbfcfe; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }

/* 页脚：备案号的落点。手机上侧栏收成底部导航、看不到侧栏页脚，
   所以「我的账号」页底部也要有一份（法规要求备案号在网站底部可见）。 */
.pagefoot { text-align: center; padding: 6px 0 2px; }

/* 窄屏：两栏与工具条都堆叠，手机上也别挤成一团 */
@media (max-width: 860px) {
  .toolbar { flex-wrap: wrap; gap: 10px; }
  .toolbar .seg.seg-view { flex: 1 1 auto; }
  .toolbar .tabs.flat { flex: 1 1 100%; overflow-x: auto; }
  .metrics { gap: 8px 10px; }
  .metric { min-width: 82px; }
  .bubble { max-width: 92%; }
  .chatrow { flex-wrap: wrap; }
  .chatrow > input { flex: 1 1 100%; }
  .chatrow > .btn { flex: 1 1 100%; }
}

/* ══════════ 手机端适配（2026-09-29 阿和：「手机界面太丑，优化一下」）══════════
   为什么写在 cloud.css 末尾：cloud.css 在 index.html 里排在 style.css **之后**，
   同优先级下后加载的胜出 —— 移动端规则放这儿才能压过上面的桌面规则。
   桌面端（>780px）完全不受影响。

   三处关键改动：
   ① 侧栏 → 底部导航栏。手机是拇指操作，底部可达性最好；而且不再横向挤占空间。
      （原来是「236px 缩成 62px 的小图标条」，但导航项文字没有 span 包裹、
        `.nav-item span{display:none}` 根本没生效 → 文字全挤在 62px 里，这是"丑"的主因）
   ② 表格 → 卡片。5~6 列定宽表在 390px 屏上必然挤成一团，改成一条记录一张卡。
   ③ 输入框字号 ≥16px。iOS 上小于 16px 会在聚焦时**自动放大整页**（画面突然跳一下）。
*/
@media (max-width: 780px) {

  /* ── 剪素材的说明：**只在手机上折叠**（2026-10-15 阿和：「电脑上看不用折叠，
     如果手机上看需要折叠的话，能不能只在手机上做折叠」）──
     open 的开关在 app.js 按屏宽做（≤780 摘掉 open），这里只负责折叠头的长相：
     品牌色文字 + 细线 chevron（mask 画的，形状跟 `FOLDCARD_ARROW` 一致）。 */
  .hintfold {
    border-top: 1px solid var(--line); padding-top: 10px;
  }
  .hintfold > summary {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13.5px; color: var(--brand);
  }
  .hintfold > summary::after {
    content: ""; margin-left: auto; width: 10px; height: 6px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    transition: transform .2s;
  }
  .hintfold[open] > summary::after { transform: rotate(180deg); }
  /* ⚠️ 别依赖 <details> 的原生收起：实测（Edge 143）摘掉 open 后内容照样渲染。
     必须用这条 CSS 明确藏内容，点击 summary 时浏览器 toggle open、`[open]` 放行显示。 */
  .hintfold:not([open]) > .hint { display: none; }

  /* ── ① 侧栏变成底部导航栏 ── */
  .app { flex-direction: column; }

  .side {
    position: fixed; z-index: 60;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; flex: 0 0 auto; height: auto;
    flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid var(--line);
    overflow: visible;
    padding: 4px 6px 4px;
  }
  /* 两条分开写：不支持 env() 的老浏览器忽略第二条，仍保留第一条的上下内边距 */
  .side { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }

  /* ⚠️ 必须限定在侧栏内（`.side .brand`）—— `.brand` 是个**会撞车的类名**：
     它同时是侧栏那个品牌区，也被 `.pill.brand`（顶栏积分 / 「新」标 / 「超级管理员」/ 结果页「余额」）
     当成变体类用。写成裸 `.brand` 会把那些 **pill 一起藏掉**，而且只在手机上看不见、电脑上完全正常。
     2026-10-10 实测踩到：作品页的「参考仿写 / 灵感创作」标签在手机上整个消失了。 */
  .side .brand, .side .brand-txt, .side-foot, .nav-split { display: none; }  .nav { flex-direction: row; flex: 1 1 auto; gap: 2px; }
  .nav-item {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; gap: 2px;
    min-height: 46px; padding: 6px 2px;
    font-size: 11px; line-height: 1.2; text-align: center;
  }

  /* ── ② 内容区：占满整屏，底部给导航栏让位（含 iPhone 底部安全区）── */
  .main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: 14px 14px 10px; }   /* 底部给一档，白底才不像"贴"在内容上（2026-10-14） */
  .topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .topbar { align-items: center; flex-wrap: wrap; gap: 6px; }
  .topbar h1 { font-size: 17px; }
  .view { padding: 14px 14px 28px; }

  /* 卡片与统计：一行放不下两张，改单列；内边距收紧 */
  .card { padding: 15px; margin-bottom: 12px; }
  .grid, .grid2 { grid-template-columns: 1fr; gap: 10px; }
  .stat { padding: 13px 15px; }
  .stat .n { font-size: 22px; }

  /* ── ③ 表单控件 16px（防 iOS 聚焦放大整页）+ 触控目标加高 ── */
  input[type="text"], input[type="number"], input[type="password"], input[type="email"],
  textarea, select { font-size: 16px; }
  .btn { padding: 10px 14px; }
  .tab { padding: 8px 14px; }
  .row > * { min-width: 100%; }
  .row > .shrink { min-width: 0; }
  /* 字段名那一列要放得下最长的一个（「常用表达/口头禅」8 个字，实测 89px）——
     78px 会被折成两行（阿和 2026-09-29 截图里就是这样）。
     ⚠️ 对齐：style.css 给 `dt` 加了 `padding-top:7px`（桌面端让标签和值视觉居中），
     实测在手机上就是「标签整列**比值低 7px**」——阿和：「左右两边没对齐」。
     手机上改成顶部对齐、去掉那个 7px，两列的**首行就齐**了（两种字号差不到 1px）。 */
  /* 手机端同样用基线对齐（以前这里写 `padding-top: 0`，所以手机上错位最明显） */
  .kv { grid-template-columns: 104px 1fr; gap: 12px 12px; align-items: baseline; }
  .kv dt { font-size: 12px; }

  /* ── ④ 表格 → 卡片 ── */
  :is(.insp-table, .insp-trash, .works-table, .works-arch), table.ledger { display: block; width: 100%; }
  :is(.insp-table, .insp-trash, .works-table, .works-arch) thead { display: none; }             /* 卡片模式下表头没有意义 */
  table.ledger tr:first-child { display: none; }   /* ledger 的表头是 tbody 的第一行 */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) tbody { display: block; }

  /* ── 列表：细线分隔的「行」，不再"卡里套卡" ──
     布局用 flex + 自动折行：标题类占满整行，次要信息横排（放不下自动折），
     操作按钮占满整行。以前每列各占一行，一条能占掉大半屏。
     四个表列数不同，所以按类名分别指定哪几列占满 —— 一套规则套所有表会错位。
     （运营后台那几张管理表列多信息密，手机上不适合卡片化，维持原样、保持可横滑。） */
  .insp-table tr, .insp-trash tr, .works-table tr, .works-arch tr, table.ledger tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    background: transparent; border: 0; border-radius: 0;
    padding: 12px 0; margin-bottom: 0;
    border-bottom: 1px solid var(--line);
  }
  .insp-table tr:last-child, .insp-trash tr:last-child, .works-table tr:last-child,
  .works-arch tr:last-child, table.ledger tr:last-child { border-bottom: 0; padding-bottom: 2px; }

  /* 标题那一列占满整行 */
  .insp-table td:nth-child(2), .insp-trash td:nth-child(2),
  .works-table td:nth-child(1), .works-arch td:nth-child(1) { flex: 1 1 100%; }
  /* 灵感库的「爆款逻辑」（已经限一行）也占满整行 */
  .insp-table td:nth-child(3) { flex: 1 1 100%; }
  /* 操作按钮占满整行 —— 否则会和平台/时间挤在一起 */
  .insp-table td:last-child, .insp-trash td:last-child,
  .works-table td:last-child, .works-arch td:last-child { flex: 1 1 100%; margin-top: 2px; }
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td, table.ledger td {
    display: block; width: auto !important;    /* 必须 !important：列宽是行内 style 锁死的 */
    padding: 2px 0 !important; border: 0;
  }
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td:first-child, table.ledger td:first-child { padding-left: 0 !important; }
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td:last-child, table.ledger td:last-child { padding-right: 0 !important; }
  /* 卡片第一格是标题：放大当"卡片名"；长标题允许换行显示全（不再省略号） */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td:first-child .strong { font-size: 14.5px; }
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td.ell, :is(.insp-table, .insp-trash, .works-table, .works-arch) td .ell, :is(.insp-table, .insp-trash, .works-table, .works-arch) td.nowrap {
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  /* 操作按钮：单独一行 */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td:last-child { margin-top: 8px; }
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td:last-child .btn { margin: 0 8px 0 0; }
  tbody tr:hover { background: var(--panel); }     /* 触屏没有 hover，去掉变色避免"粘住" */

  /* 其他容易挤成一条的地方 */
  .seg { overflow-x: auto; }
  .pre { padding: 12px 13px; max-height: none; }
  .bubble { max-width: 92%; }
  /* 提示条要和内容区左右对齐（.view 的边距是 14px） */
  .cardbar { margin-left: 14px; margin-right: 14px; }

  /* ── 工具行：一行搞完 —— 左边「灵感库 / 回收站」，右边两个图标 ──
     阿和 2026-09-29：「可点的东西太多、又散又占地方」＋「搜索做成小放大镜，点一下弹出来」。
     所以平台/类型和搜索**默认都收起**，这一屏只剩 seg + 两个图标。
     另外筛选区不再是独立卡片 —— 它和下面的列表一起装在大卡 .insp-panel 里。 */
  .toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0; margin-bottom: 0;
    border-bottom: 1px solid var(--line);
  }
  .toolbar .insp-tabs { display: none; }          /* 桌面那排按钮收起，改用图标展开 */
  /* seg 别撑满整行 —— 贴合内容就好，整行更透气（撑满会显得笨重、右边图标也孤立） */
  .toolbar > .seg.seg-view { flex: 0 1 auto; min-width: 0; }

  /* 运营后台的页签现在有 **7 个**（总览 / 发兑换码 / 兑换码 / 租户 / 积分流水 / 管理员 / AI 地图），
     一行放不下 → 原来被压缩到每格 ~55px，文字**一字一行竖着排**（阿和 2026-09-29 截图）。
     手机上排成 **4 列**（超管 4+3，普通管理员 4+2）：全部看得见、不用横滑、也不挤成竖排。
     （只作用于后台这一组，用 .admin-tabs 点名 —— 灵感页/作品页的 seg 只有 2 个，不受影响。） */
  .toolbar > .seg.admin-tabs {
    flex: 1 1 100%; min-width: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  }
  .toolbar > .seg.admin-tabs button { padding: 8px 2px; font-size: 12.5px; white-space: nowrap; }

  /* 后台「AI 地图」的流程条：桌面 6 列，手机上 3 列 2 行（每格只有编号 + 名字，不挤） */
  .aimap-steps { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .aimap-step { padding: 9px 10px; }
  .aimap-nm { font-size: 12.5px; }
  .aimap-w { font-size: 10.5px; }    /* 环节在哪个页面（"人设卡""灵感库"…）—— 手机上认不出来就白排了 */
  details.aimap-pw > .pre { margin: 0 10px 10px; max-height: 300px; }
  /* AI 地图：手机上"约几分 · 模型名"换行后靠左，别被 margin-left:auto 甩到最右边孤零零的 */
  .aimap-meta { margin-left: 0; flex: 1 1 100%; }
  /* 服务清单：手机上排成 2 行 —— 第一行「模型 + 网址入口」，第二行「它是干什么的」。
     （3 行太厚，5 条就是 600px；DOM 顺序是 模型/用途/入口，这里用 order 把入口提上来。） */
  .aimap-svcrow { grid-template-columns: 1fr auto; gap: 3px 10px; padding: 8px 0; }
  .aimap-svcrow .h { order: 2; text-align: right; }
  .aimap-svcrow .u { order: 3; grid-column: 1 / -1; font-size: 12px; line-height: 1.55; }

  .micons { display: flex; gap: 2px; flex: 0 0 auto; margin-left: auto; }
  .iconbtn {
    width: 36px; height: 36px; padding: 0; border: 0; background: transparent;
    color: var(--muted); border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .iconbtn.on { background: var(--brand-soft); color: var(--brand); }

  /* 点图标才出现的两行（平台/类型、搜索）。
     ⚠️ 必须 `flex: 1 1 100%`：`.toolbar` 是 flex 容器（桌面基础样式里就是），
     不占满整行的话这两行会和图标挤在一行、宽度也算不对。 */
  .mrow { flex: 1 1 100%; display: block; padding-top: 12px; }
  .mrow.hidden { display: none; }
  /* 平台 / 类型各一组，用分段控件（跟灵感库/回收站同款）；一组一行，放不下可横滑 */
  .mrow .seg { display: flex; width: 100%; overflow-x: auto; }
  .mrow .seg + .seg { margin-top: 10px; }
  .mrow .seg button { flex: 0 0 auto; }

  /* ── 卡片里的信息分层：一条灵感不要占好几屏 ── */
  /* 长文本（爆款逻辑）只留一行 —— 一条灵感不要占好几屏；想看全就点「写这篇」进创作页 */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td.ell {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.55;
  }
  /* 触屏上批量多选不顺手，而且复选框会独自占一行、很怪 → 手机上收掉 */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td.pick { display: none; }
  /* 「搜索」来源链接在手机上价值低，收掉减少噪音 */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) td.ref { display: none; }
  /* 紧跟在表格后面的批量操作条：复选框已经隐藏，这些按钮无从下手 → 一起收掉。
     用相邻选择器只选「表格后面那一条」，不碰详情页的「回列表」等其他 .bar。 */
  :is(.insp-table, .insp-trash, .works-table, .works-arch) + .bar { display: none; }

  /* 运营后台的管理表（管理员 / 兑换码 / 租户 / 积分流水）列多、信息密，不做卡片化 ——
     至少让它能**横向滑动**看全，别把字挤成竖排。 */
  #aBox table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #aBox table th, #aBox table td { white-space: nowrap; }

  /* 创作页那几个字段带**行内** max-width:150px（桌面端为了让并排的三个控件别拉太宽）——
     手机上必须占满整行，否则每个只占 150px、右边空一大块。
     只能用 !important 压行内样式。 */
  .row > label.field { max-width: none !important; }

  /* 人设卡的输入行：输入框 + 发送按钮**同一行**。
     860px 那条规则把它们各撑满一整行 —— 手机上那样又占地方、按钮还长得笨重。 */
  .chatrow { flex-wrap: nowrap; gap: 8px; }
  .chatrow > input { flex: 1 1 auto; min-width: 0; }
  .chatrow > .btn { flex: 0 0 auto; }

  /* 人设卡的字段值全是长句，手机上一屏全是字（阿和 2026-09-29：「文字排版看起来太多字了」）——
     字号和行高各收一点，让它轻一些。（`dt` 的字号见上面 .kv 那段，不在这里重复设。） */
  .kv dd { font-size: 13px; line-height: 1.6; }

  /* 卡片标题允许换行：标题右边常带一句说明（`.tag`），
     挤在一起会把标题本身顶到折行 —— 阿和截图里「让 AI 改一版」被折成了两行。
     说明单独占一行，标题就完整了。 */
  .card h2 { flex-wrap: wrap; }
  /* 第一个 tag（"灵感创作 / 参考仿写"这种）单独占一行 —— 保住 2026-09-29 的初衷：标题不被挤折。
     ⚠️ 2026-10-14 补：**后面的短 tag 改成同行** —— 原来全设 100%，
     结果「小红书 图文」「初稿」也各占一整行，三个短标签吃掉三行，很浪费（手机扫查时看出来的）。 */
  .card h2 .tag { flex: 0 1 auto; }
  .card h2 .tag:first-of-type { flex: 1 0 100%; }

  /* ── 作品项：信息项多，用 grid **固定成几行** ──
     自由折行时每条的断开位置都不一样（阿和 2026-09-29：「作品卡里面有点乱」）；
     固定成几行之后，每条结构一致，看着才有秩序：
       行1 选题（标题 + 副标题）
       行2 平台 · 形式
       行3 数据
       行4 时间（左）｜状态（右）
       行5 查看 / 归档
     ⚠️ 必须用 `order` 把「时间」排到「状态」**前面**：DOM 顺序是
       选题 → 平台 → 数据 → 状态 → 时间 → 按钮，只写 `grid-column` 的话，
        自动填充（稀疏模式不回退）会把「时间」挤到下一行 ——
        结果状态左边空一块、时间右边空一块，中间一大片留白（阿和当天截的就是这个）。 */
  .works-table tr, .works-arch tr {
    display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center;
  }
  .works-table td.meta { color: var(--muted); font-size: 12px; }
  .works-table td:nth-child(1) { order: 1; grid-column: 1 / -1; }   /* 选题（含副标题） */
  .works-table td:nth-child(2) { order: 2; grid-column: 1 / -1; }   /* 平台 · 形式 */
  .works-table td:nth-child(3) { order: 3; grid-column: 1 / -1; }   /* 数据 */
  .works-table td:nth-child(5) { order: 4; grid-column: 1 / 2; }    /* 时间（左） */
  .works-table td:nth-child(4) { order: 5; grid-column: 2 / 3; justify-self: end; }  /* 状态（右） */
  .works-table td:nth-child(6) { order: 6; grid-column: 1 / -1; }   /* 查看 / 归档 */
  /* 已归档表（选题 / 平台·形式 / 数据 / 时间 / 按钮）：全部竖排即可 */
  .works-arch td:nth-child(2), .works-arch td:nth-child(3),
  .works-arch td:nth-child(4), .works-arch td:nth-child(5) { grid-column: 1 / -1; }
  /* 还没填的那一格（比如「数据」为空）直接收掉 —— 否则会白留一行 */
  :is(.works-table, .works-arch) td:empty { display: none; }

  /* ── 「只在某一种屏幕上出现」的通用开关（2026-10-10）──
     来历：后台租户表在手机上太宽要横滑，「注册 / 最后登录」那一列根本看不到。
     做法：同一份数据渲染两遍 —— 宽屏用单独一列（.when-wide），
     窄屏把它并进第一列（客户名下面，.when-narrow）。
     以后再有"宽表在某一边塞不下"的情况，用这两个类，别再各写各的。 */
  .when-narrow { display: block; }
  .when-wide { display: none; }

  /* ── AI 大脑（2026-10-19）：手机上高度更紧，底栏 + 安全区吃掉一大块 ──
     所以楼上那个 430px 的兜底在手机上要撤掉（否则一定溢出整页滚），
     只给对话区留一个 200px 的下限；实际高度交给 flex 撑。 */
  .card.chatcard { min-height: 0; gap: 10px; }
  .card.chatcard > .chat { min-height: 200px; }
  .memcount { font-size: 11.5px; }
  /* 人设卡弹窗：手机上贴底成半屏 sheet（居中小窗在手机上太小气），
     字段表在弹窗内部滚 —— 弹窗是覆盖层，页面本身照旧不滚。 */
  .pmodal { padding: 0; align-items: flex-end; }
  .pmodal-card {
    width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }
}