/* ========================================================================== novel-studio 前端样式 · 真源（唯一） 本文件单向裁剪自灵溪（E:\VibeCoding\company-operations\web\style.css，1680 行）。 保留：令牌层 / 基础 / 底栏与页头 / 侧栏 / 浮层与二级页骨架 / 通用按钮与列表行 / toast / L4 公共件 / APP端媒体查询 / WEB端常驻侧栏 / 桌面四栏域 / 表单与空态通用件。 删除：任务业务 / 知识库 / 实体库 / 首页经营 / 任务日历 / 考勤日报 / 组织人员 / 登录与忘记密码三通道 等业务段。 规矩（闸门 G2 强制）：新类名先查 docs 目录下的「前端样式规范」§3 组件词典并登记，再写代码。 颜色只用语义令牌，禁裸色值；字号只取 §7 阶梯；间距只取刻度；z-index 只取分配表。 注：本段注释刻意不写"点号开头"的类名写法 —— 闸门 G2 的正则**不剥注释**， 注释里写一个类名就等于把它当成"已登记"，会让类名对账失真。 ========================================================================== */ /* ================= 设计母版 tokens（来源 convoai-kit/tokens.css v0.1） ================= */ :root{ --brand-5:#F4F3FE;--brand-10:#E2E0FB;--brand-20:#C7C5F8;--brand-30:#A7A4F4;--brand-40:#8A86F0; --brand-50:#6B67EB;--brand-60:#4F46E5;--brand-70:#433AC7;--brand-80:#372FAA;--brand-90:#2B248E;--brand-95:#1F1A72; --sec-5:#FFF8F3;--sec-10:#FEEEDD;--sec-20:#FDD9B5;--sec-30:#FCC185;--sec-40:#FAA04D;--sec-50:#F9841F; --sec-60:#F97316;--sec-70:#DA6513; --gray-0:#FFFFFF;--gray-5:#F8FBFC;--gray-10:#EDF0F7;--gray-20:#DEDEE8;--gray-30:#B6B6C2;--gray-40:#9DA4B1; --gray-50:#6E7386;--gray-60:#4A4959;--gray-70:#3D3C4A;--gray-80:#32313D;--gray-90:#25242E;--gray-100:#19181F; --success:#76F057;--warning:#FFD143;--destructive:#FF6565;--info:#53D5FF; --bg:var(--gray-5);--card:var(--gray-0);--line:var(--gray-10);--line-strong:var(--gray-20); --t1:var(--gray-100);--t2:var(--gray-60);--t3:var(--gray-40); --primary:var(--brand-60);--primary-hover:var(--brand-70);--primary-soft:var(--brand-5); --primary-border:var(--brand-20);--on-primary:var(--gray-0); --font-ui:"Rubik",-apple-system,"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Microsoft YaHei",sans-serif; --fs-title-lg:24px;--fs-title:20px;--fs-body-lg:16px;--lh-body-lg:22px;--fs-body:14px;--lh-body:20px;--fs-caption:12px;--lh-caption:16px; --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:14px;--r-2xl:16px;--r-pill:360px; --sp-2:2px;--sp-4:4px;--sp-6:6px;--sp-8:8px;--sp-10:10px;--sp-12:12px;--sp-14:14px;--sp-16:16px;--sp-20:20px;--sp-24:24px; --shadow-card:0 0 4px rgba(174,188,220,.24); --shadow-primary:0 3px 4px -1px rgba(79,70,229,.95); --shadow-pop:0 8px 28px rgba(23,27,38,.16); --grad-brand:linear-gradient(135deg,var(--brand-50),var(--brand-80)); } :root[data-theme="dark"]{ --bg:var(--gray-100);--card:var(--gray-80);--line:var(--gray-70);--line-strong:var(--gray-60); --t1:#EBEBF5;--t2:var(--gray-30);--t3:var(--gray-50); --primary:var(--brand-60);--primary-hover:var(--brand-50); --primary-soft:var(--gray-90);--primary-border:var(--brand-80);--on-primary:#FFFFFF; --shadow-card:none;--shadow-primary:0 4px 10px rgba(0,0,0,.5); --shadow-pop:0 10px 32px rgba(0,0,0,.55); /* 状态色在深底上的提亮字色（2026-09-14 批四）：这些值原本只出现在深色规则里， 收进覆盖层后 base 保持浅色语义，规则体一律 var() 且随主题自动切换。 */ --brand-bright:#A5B4FC;--good-bright:#4ADE80;--warn-bright:#FBBF24;--risk-bright:#F87171; --sec-bright:#F0A878;--gold-bright:#E7C24A; } /* 深色模式：body 文字/背景跟随（修复继承自根作用域的浅色文字） */ :root[data-theme="dark"] body{color:var(--t1)} /* 截图/自动化用：?noanim 禁用全部动画过渡 */ html.noanim *,html.noanim *::before,html.noanim *::after{animation:none!important;transition:none!important} /* 图标：允许出_viewBox 的线条完整显示（Solar broken 风格需要） */ symbol{overflow:visible} /* ================= 基础 ================= */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* 全局 heading reset：本文件所有标题样式均为显式 margin（见弹层标题 .dlg h3 等）， 浏览器默认 margin 会把卡头类元素撑高。新组件标题不再各自清 margin。 */ h1,h2,h3,h4{margin:0} html,body{height:100%} body{margin:0;background:var(--canvas);font-family:var(--font-ui);color:var(--t1); display:flex;align-items:center;justify-content:center} .stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%} .phone{width:430px;max-width:100vw;height:min(932px,100vh);background:var(--bg);position:relative; overflow:hidden;display:flex;flex-direction:column;transition:background .25s} /* 主区：必须是"撑满的纵向 flex 容器"，否则 .page{flex:1} 撑不满高度 —— 表现为主题色通铺只铺到内容末尾、下半截露底色（灵溪当初用内联样式写，这里收成类规则）。 min-height:0 是给内部 .page 的 overflow-y 留出滚动空间，缺了则滚动失效。 */ /* 主区：必须是"撑满的纵向 flex 容器"，否则 .page{flex:1} 撑不满高度。 （灵溪把这个 inline 写在
上，这里收回骨架层，两边等效。） */ .phone>main{display:flex;flex-direction:column;flex:1;min-height:0} .page{flex:1;overflow-y:auto;overflow-x:hidden;display:none;padding-bottom:calc(76px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px)));scrollbar-width:none} .page::-webkit-scrollbar{display:none} /* 切页不做透明渐入动画：新页从透明开始会露出底色，底部导航快速切换时表现为闪白。 即切即显，保证不闪。如需过渡后续可改交叉淡入（新旧页同时绘制）。 */ .page.on{display:block} .ic{width:22px;height:22px;flex:none;display:block} .chips{display:flex;gap:8px;overflow-x:auto;padding:6px 16px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{flex:none;padding:8px 14px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line); font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:6px; transition:all .15s;user-select:none} .chip.on{background:var(--primary-soft);border-color:var(--primary-border);color:var(--primary);font-weight:600} :root[data-theme="dark"] .chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .chip .cnt{font-size:11px;color:var(--t3)} .chip.on .cnt{color:var(--primary);opacity:.7} :root[data-theme="dark"] .chip.on .cnt{color:var(--on-primary)} /* 主题色通铺下页级 chip 组（dbody 直属：员工/部门/岗位/对账、审计分类、权限三页 tab）： 原 .chip.on=primary-soft 底+primary 字，12% 同色叠在同色通铺背景上=底字同色文字隐形（0913 老板元素1）。 深底：整组反白——未选中=白磨砂+白字（同 fsOn 白族），选中=纯白实底+主题色字（层级=最亮者选中）； 浅底（#E3EDFB/#D3F1F0 两档）：选中走 bgmode 既有约定（选中态转深字 t1），白实底+深字+主题描边区分 */ .phone.bgmode-dark .dbody>.chips .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.92)} .phone.bgmode-dark .dbody>.chips .chip.on{background:var(--on-dark);border-color:var(--on-dark);color:var(--primary)} .phone.bgmode-dark .dbody>.chips .chip.on .cnt{color:var(--primary);opacity:.8} .phone.bgmode-light .dbody>.chips .chip{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.08);color:var(--t2)} .phone.bgmode-light .dbody>.chips .chip.on{background:var(--on-dark);border-color:var(--primary-border);color:var(--t1)} .phone.bgmode-light .dbody>.chips .chip.on .cnt{color:var(--t1);opacity:.7} .empty{margin:40px 16px;text-align:center;color:var(--t2);font-size:var(--fs-body)} .empty b{display:block;font-size:var(--fs-body-lg);color:var(--t2);margin-bottom:6px;font-weight:600} /* ---- 任务行 ---- */ .trow{position:relative;margin:0 16px 10px;border-radius:var(--r-2xl)} .tcard{position:relative;background:var(--card);border-radius:var(--r-2xl);box-shadow:var(--shadow-card); padding:14px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;user-select:none; touch-action:pan-y;transition:transform .2s,box-shadow .2s} .trow.dragging{z-index:30;opacity:.95} .trow.dragging .tcard{box-shadow:var(--shadow-pop);transform:scale(1.03)} .tcard.dim{opacity:.55} .trow.simple .tcard{align-items:center} .tchev{color:var(--t3);align-self:center;margin-left:4px} /* ================= 底部导航 ================= */ /* 极简底栏（嘀嗒同款）：实心图标，激活着色 */ .tabbar .ntab .ntx{display:none} .tabbar .ntab .ic{width:30px;height:30px} .tabbar .ntab{padding-top:2px} /* 背景色通铺模式 */ /* 背景色通铺模式：按背景亮度分深底(bgmode-dark 白色前景)/浅底(bgmode-light 深色前景)两套， 避免主题色图标同色隐形、白字配浅底不可读两类问题 */ .phone.bgmode-dark .ntab{color:rgba(255,255,255,.55)} .phone.bgmode-dark .ntab.on{color:var(--on-dark)} .phone.bgmode-dark .wtop .tlt, .phone.bgmode-dark .subtop .pagettl{color:var(--on-dark)} .phone.bgmode-dark .wtop .wicon, .phone.bgmode-dark .subtop .wicon{color:rgba(255,255,255,.9)} .phone.bgmode-dark .wtop .wicon:active, .phone.bgmode-dark .subtop .wicon:active{background:rgba(255,255,255,.15)} .phone.bgmode-dark #pg-work .empty,.phone.bgmode-dark .setbody .empty{color:rgba(255,255,255,.85)} .phone.bgmode-dark #pg-work .empty b,.phone.bgmode-dark .setbody .empty b{color:var(--on-dark)} .phone.bgmode-dark #pg-work .wtop .tlt{color:var(--on-dark)} .phone.bgmode-dark #pg-work .wicon{color:rgba(255,255,255,.9)} .phone.bgmode-dark #pg-work .wicon:active{background:rgba(255,255,255,.15)} /* 深底/浅底：我的页配置项都在 .setcard 卡片表面内（卡片自带 --card 底色）， 文字/图标直接用标准前景色即可，白天黑夜与主题色通铺下都不需要额外覆盖 */ /* 明细页头部（.dtop 裸在通铺底色上，与 .subtop 同款深底转白规则） */ .phone.bgmode-dark .dtop .t{color:var(--on-dark)} .phone.bgmode-dark .dtop .wicon{color:rgba(255,255,255,.9)} .phone.bgmode-dark .dtop .wicon:active{background:rgba(255,255,255,.15)} .phone.bgmode-dark .dbody .empty{color:rgba(255,255,255,.85)} .phone.bgmode-dark .dbody .empty b{color:var(--on-dark)} /* 我的页：右指小箭头 + 行值文本（嘀嗒式配置行） */ .crarr{width:14px;height:14px;color:var(--t3);flex:none} .setrow2 .valr{font-size:12px;color:var(--t3);flex:none;max-width:56%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* 我的页两个同步状态位：信息性状态文字用 --t2（暗色下 --primary 紫字 2.03:1 近隐形，2026-09-03 P02） */ #entCount,#ddSync{color:var(--t2)} /* 图标一律按 SVG 原始朝向渲染，不做 CSS 方向调整（需要转向请直接改 icons/ 素材） */ /* 手机全屏自适应 */ @media (max-width:540px){ body{display:block;background:var(--bg)} .phone{width:100%;height:100dvh;max-width:none} } /* 底部安全区：APP 通铺模式下让底栏背景延伸进手势条/导航条区域。 底栏不透明（--pagebg 恒等于所在页背景色，同色相接=无形分割线）：滚动内容从栏下穿过时被同色遮住， 不再与图标叠字；主题色通铺时 --pagebg 由 applyThemeColor 同步为主题色 */ .tabbar{position:absolute;left:0;right:0;bottom:0;height:calc(64px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px)));background:var(--pagebg,var(--bg)); display:flex;align-items:stretch;padding:0 6px max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px));z-index:99} /* 层级总则（规范§2.2-2）：底栏=主页面专属——任一二级页/弹层/对话框打开即隐藏(.hide-tab 由 JS 统一切换)， 退出=系统返回键(__nativeBack 全层注册)/点遮罩空白/WEB端轨道与ESC；底栏只服务主页面跳转 */ .phone.hide-tab .tabbar{display:none} #mSheet{z-index:97} /* 菜单(pmenu)最上：优先级/标签/更多等编辑页菜单压在编辑弹层之上（APP WebView 用 id 选择器兜底优先级） */ #pmenu{z-index:150} /* 弹出菜单（嘀嗒式，锚在工具栏下方）。 ⚠ 这块在从灵溪抽取时整段丢了，只剩上面那行 z-index —— 后果是 .pmenu 没有 display:none，菜单**一进页面就常驻显示**（实测露在页头右上角）。本项目第一个 用到下拉菜单的是书库「新建」钮，M3 发现并补回。骨架公共件必须留在骨架层。 */ .pmenu{position:absolute;background:var(--card);border-radius:var(--r-lg); box-shadow:var(--shadow-pop);border:1px solid var(--line);min-width:190px;padding:6px;z-index:92; display:none;animation:pmup .16s ease} .pmenu.on{display:block} @keyframes pmup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* 菜单条目。prow 及其修饰件（flag/hash/grow/pv/pcheck）沿用灵溪骨架那一套， 不要再另造第二套 —— 同一功能只允许一处真源。 注：GA 闸门的类名对账**不剥注释**，本段刻意不写点号开头的类名， 否则注释里的名字会被当成"已登记"，掩盖真正的未登记类。 */ .prow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer; font-size:var(--fs-body);color:var(--t1);user-select:none;width:100%;border:none;background:none; font-family:var(--font-ui);text-align:left} .prow:active{background:var(--gray-10)} :root[data-theme="dark"] .prow:active{background:var(--gray-70)} .prow .flag{width:16px;height:16px;flex:none} .prow .hash{color:var(--primary);font-weight:700;flex:none} .prow .grow{flex:1;min-width:0} .prow .pv{color:var(--t3);font-size:12px} .prow .ic{width:18px;height:18px;color:var(--t3);flex:none} .pcheck{width:18px;height:18px;border-radius:50%;border:2px solid var(--gray-30);display:flex; align-items:center;justify-content:center;color:transparent;flex:none} .prow.on .pcheck{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .pcheck svg{width:10px;height:10px;stroke-width:3} .pmenu .phdr{font-size:11px;font-weight:700;color:var(--t3);padding:6px 12px 2px} .ntab{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;background:none;border:none;cursor:pointer;color:var(--t3);font-family:var(--font-ui);padding:0} .ntab .ic{width:22px;height:22px} .ntab .ntx{font-size:10.5px;font-weight:600;letter-spacing:.4px} .ntab.on{color:var(--primary)} /* ---------- 对话框 ---------- */ .dlgmask{position:absolute;inset:0;background:rgba(16,17,24,.45);z-index:99;display:none; /* 99=最顶层模态（老板 09-09 晚元素5：曾因同档98被分类管理面板遮住「新建分类」）；hide-tab 已藏底栏，与 99 档 tabbar 无共存 */ align-items:center;justify-content:center;padding:24px} .dlgmask.on{display:flex} /* 弹窗（需求9）：水平垂直居中、屏宽 50%（APP端窄屏由 min-width 320px 兜底，桌面端 由 max-width 680px 封顶防超宽），高度自适应内容，最多 80% 屏高，超出内部滚动 */ .dlg{width:40%;min-width:340px;max-width:600px;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-pop); padding:16px 18px;animation:pmup .18s ease;max-height:min(80vh,100%);overflow-y:auto; scrollbar-width:thin;scrollbar-color:var(--gray-30) transparent} /* 宽档：表单/列表类弹窗（openDlg(html, true)）—— 60% 视口宽，长篇封顶 860px */ .dlgmask.dlg-wide .dlg{width:60%;max-width:860px} /* M13 弹窗字号统一：标题 15 / 正文与表单 13 / 注释 11.5 */ .dlgmsg,.dlg .fin,.dlg .farea,.dlg .setrow2,.dlg .kv,.dlg .aip-vers,.dlg .chip{font-size:13px} .dlg .setnote,.dlg .poptip,.dlg .bt-note,.dlg .mp-note,.dlg .in-note{font-size:11.5px;line-height:1.6} /* M13：弹窗内输入件统一铺满可用宽度（左右间距一致；个别窄字段用更后置/行内宽度覆盖） */ .dlg .fin,.dlg textarea.farea{width:100%;box-sizing:border-box} .dlg .fr{gap:10px} .dlg .fr .k{width:72px} .dlg .fr{margin-bottom:10px} .dlg .fr:last-child{margin-bottom:0} /* ⓘ 说明气泡图标（M13：常驻说明行退役，必要说明收进它，点击 toast 展示） */ .hint-ic{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px; border-radius:50%;border:1px solid var(--gray-30);color:var(--t3);font-size:9.5px;font-weight:700; cursor:help;flex:none;user-select:none;font-family:var(--font-ui)} .hint-ic:active{color:var(--primary);border-color:var(--primary)} .dlg::-webkit-scrollbar{width:6px} .dlg::-webkit-scrollbar-thumb{background:var(--gray-20);border-radius:3px} :root[data-theme="dark"] .dlg::-webkit-scrollbar-thumb{background:var(--gray-70)} .dlg h3{margin:0 0 12px;font-size:16px;font-weight:700} .dlg .rowopt{display:flex;align-items:center;gap:10px;padding:11px 6px;cursor:pointer;font-size:14px;color:var(--t1)} .dlg .rowopt .rdo{width:18px;height:18px;border-radius:50%;border:2px solid var(--gray-30);flex:none; display:flex;align-items:center;justify-content:center;transition:all .15s} .dlg .rowopt.on .rdo{border-color:var(--primary);box-shadow:inset 0 0 0 4.5px var(--primary)} .dlgbtns{display:flex;justify-content:flex-end;gap:2px;margin-top:10px} .dlgbtn{border:none;background:none;color:var(--primary);font-weight:600;font-size:14px;padding:8px 12px; cursor:pointer;font-family:var(--font-ui);border-radius:var(--r-sm)} .dlgbtn.ghost{color:var(--t3)} .cdots{display:flex;gap:10px;margin:10px 0 2px;flex-wrap:wrap} .cdot{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;flex:none} .cdot.on{border-color:var(--primary);box-shadow:inset 0 0 0 3px var(--card)} /* 图标底座（侧边栏与设置页共用）：彩色圆角方块 + 白色 glyph */ .dic{display:flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:8px;color:var(--on-primary);flex:none} .dic .ic{width:15px;height:15px} .setrow2 .dic{width:26px;height:26px;border-radius:8px} .setrow2 .dic .ic{width:15px;height:15px} /* ---------- 标签/清单编辑页 ---------- */ .edpage{position:absolute;inset:0;background:var(--bg);z-index:88;display:none;flex-direction:column} .edpage.on{display:flex} /* ---------- 二级页面（搜索/清单设置/实体库/标签清单编辑）统一规范 ---------- 头部同款：同一 padding + 最左统一返回按钮(.wicon+i-back)；背景由 applyThemeColor 全局铺主题色 */ .edhd{display:flex;align-items:center;gap:2px;padding:calc(10px + max(env(safe-area-inset-top,0px),var(--sa-top,0px))) 12px 8px 8px} .edhd .edt{flex:1;font-size:18px;font-weight:700} .edbody{flex:1;overflow-y:auto;padding:2px 16px 30px} /* ---------- 清单设置页 ---------- */ .setpage{position:absolute;inset:0;background:var(--bg);z-index:85;display:none;flex-direction:column} .setpage.on{display:flex} .sethd{display:flex;align-items:center;gap:2px;padding:calc(10px + max(env(safe-area-inset-top,0px),var(--sa-top,0px))) 12px 4px 8px} /* ===== 二级页头部固定模板（.subtop+.pagettl）===== 与工作页头部（.wtop/.wicon/.tlt）大小/位置/间距/尺寸完全一致，新二级页直接套用； 主题色/深浅模式下标题与图标的颜色由下方 bgmode 规则统一接管 */ .subtop{display:flex;align-items:center;gap:2px;min-height:68px;padding:calc(16px + max(env(safe-area-inset-top,0px),var(--sa-top,0px))) 16px 12px 8px} .subtop .wicon{width:40px;height:40px} .subtop .wicon .ic{width:24px;height:24px} .pagettl{flex:1;min-width:0;font-size:20px;font-weight:700;line-height:24px;padding-left:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 二级页搜索框容器：与页面同色背景，列表滚动时行沉入其下缘，保持固定间隙不重叠 */ .searchwrap{background:inherit;padding:2px 16px 10px;position:relative;z-index:2} /* 页头→内容统一2px(09-10) */ /* 筛选/排序激活态：默认主题色；主题色通铺背景（bgmode-dark）下用白色+半透明底点 */ .subtop .wicon.fsOn{color:var(--primary)} .phone.bgmode-dark .subtop .wicon.fsOn{color:var(--on-dark);background:rgba(255,255,255,.18)} /* 二级页悬浮返回按钮：白色卡片底 + 主题色箭头（主题色通铺背景上清晰可见，全局一致） */ /* 卡内说明文字（在卡片白底上，任何背景主题下可读；全局规范：说明不放卡片外） */ .setnote{font-size:12px;color:var(--t3);line-height:1.7;padding:2px 16px 10px} .setbody{flex:1;min-height:0;overflow-y:auto;padding:2px 16px 40px;scrollbar-width:none} .setbody::-webkit-scrollbar{display:none} .setcard{background:var(--card);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);padding:3px 0;margin-bottom:14px;overflow:hidden} .setcard>.setrow2:only-child{min-height:40px;padding-top:0;padding-bottom:0} /* 单条动作卡=3+40+3=46 */ .setrow2{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;position:relative; background:var(--card);user-select:none;touch-action:pan-y} .setrow2 .flg{width:18px;height:18px;margin:0 4px;flex:none} .setrow2 .grow{flex:1;min-width:0;font-size:var(--fs-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .setrow2 .vis{font-size:13px;color:var(--primary);display:flex;align-items:center;gap:2px;flex:none} .setrow2 .vis.hid{color:var(--t3)} .setrow2.dragging{background:var(--gray-10);box-shadow:var(--shadow-pop);z-index:5;border-radius:var(--r-lg)} :root[data-theme="dark"] .setrow2.dragging{background:var(--gray-70)} .seth2{font-size:12px;font-weight:700;color:var(--t3);margin:2px 2px 8px} /* ---------- 页头辅助件 ---------- */ /* L2 侧栏呼出钮（页头最左）：与 .wicon 同尺寸；图标用 use 动态换符号（syncL2Icon 切 i-l2-hide / i-l2-show） */ .l2tog{color:var(--t2)} :root[data-theme="dark"] .l2tog{color:var(--gray-30)} .phone.bgmode-dark .l2tog{color:rgba(255,255,255,.9)} /* ================= 浮层 ================= */ .mask{position:absolute;inset:0;background:rgba(16,17,24,.5);z-index:50;opacity:0;pointer-events:none; transition:opacity .22s;display:flex;align-items:flex-end} .mask.on{opacity:1;pointer-events:auto} .sheet{width:100%;background:var(--bg);border-radius:20px 20px 0 0;max-height:94%;overflow-y:auto; transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,.28,1),height .22s ease;padding:8px 16px calc(18px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px))); scrollbar-width:none;position:relative} .sheet.full{height:min(94%,900px)} .sheet::-webkit-scrollbar{display:none} .mask.on .sheet{transform:none} .grab{width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:4px auto 6px} /* ================= 通用按钮与列表行（搜索结果等） ================= */ .btn{border:none;border-radius:var(--r-pill);font-family:var(--font-ui);font-weight:600;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:6px} .btn-p{background:var(--primary);color:var(--on-primary);padding:10px 14px;font-size:13px; box-shadow:var(--shadow-primary)} /* ================= 页头与侧栏 ================= */ /* 页头吸顶：滚动时标题与操作钮固定，内容从下滑过；背景取页面底色（通铺时 --pagebg 已同步）防透字。 页头规范：顶距 16px、标题下间距 12px；标题 20px/700；图标统一 24×24。 结构分解 = 按钮(40px)内居中余白 8 + flex 间隙 2 + 标题内边距 0， 故容器左内边距一律 8px、标题内边距归零。APP端与 WEB端同规。 */ .wtop{display:flex;align-items:center;gap:2px;min-height:68px;padding:calc(16px + max(env(safe-area-inset-top,0px),var(--sa-top,0px))) 16px 12px 8px; position:sticky;top:0;z-index:3;background:var(--pagebg,var(--bg))} .wtop .tlt{flex:1;font-size:20px;font-weight:700;padding-left:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:24px} .wtop .wicon{width:40px;height:40px} .wtop .wicon .ic{width:24px;height:24px} .wicon{width:38px;height:38px;border:none;background:transparent;color:var(--t2);border-radius:var(--r-md); display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none} /* 通用禁用档（260912 KB 本地文件链接钮首用：无桌面桥=置灰不可点） */ .wicon.dis{opacity:.35;pointer-events:none} .wicon:active{background:var(--gray-10)} :root[data-theme="dark"] .wicon:active{background:var(--gray-70)} :root[data-theme="dark"] .wicon{color:var(--gray-30)} .listcard{margin:2px 16px 14px;background:var(--card);border-radius:var(--r-2xl);box-shadow:var(--shadow-card); padding:4px 0;overflow:hidden} .listcard .trow{margin:0;border-radius:0} .listcard .trow .tcard{border-radius:0} /* 行卡并入组卡后去掉自身投影：逐行阴影会在卡片上下渲染出"多余的线条"，组卡只保留外框阴影 */ .listcard .trow .tcard{box-shadow:none} .listcard .trow.dragging .tcard{box-shadow:var(--shadow-pop)} .trow.simple{position:relative} .trow.simple .tcard{padding:13px 16px;align-items:center;background:transparent;box-shadow:none} /* 侧边栏抽屉（嘀嗒式）：上下满屏滑出、盖过底栏；未覆盖区为深色毛玻璃，点毛玻璃返回 */ .drawer{position:absolute;top:0;bottom:0;left:0;width:80%;max-width:330px;background:var(--card);z-index:110; transform:translateX(-103%);transition:transform .26s cubic-bezier(.32,.72,.28,1);display:flex;flex-direction:column; box-shadow:var(--shadow-pop)} .drawer.on{transform:none} .dmask{position:absolute;inset:0;background:rgba(16,17,24,.5);z-index:105;opacity:0;pointer-events:none;transition:opacity .22s; backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%)} .dmask.on{opacity:1;pointer-events:auto} /* 标题左缘对齐行内彩色底座图标(.dic)左缘：dsec 10px + ditem 12px = 22px（非选中高亮底色的 10px） */ .dhd{display:flex;align-items:center;gap:12px;min-height:68px;padding:calc(16px + max(env(safe-area-inset-top,0px),var(--sa-top,0px))) 22px 12px} .dhd .dname{flex:1;font-weight:700;font-size:20px;line-height:24px} .dhd .wicon .ic{width:24px;height:24px} .edhd .wicon .ic{width:24px;height:24px} /* 页头图标统一 24（09-10 定稿） */ /* 目录页头（#drawer 专属覆写）：对齐 L3 页头（.wtop）规格 —— 左内边距 8px + 40px 图标钮 = 图标字形离左缘 16px、标题 50px 起；右侧 16px = 字形离右缘 24px。 书架态没有返回钮，由 studio.js 给标题补 14px 内边距对齐行内内容（8+14=22px）。 板块侧栏（boardnav）的头不带按钮，维持灵溪 22px 原样，不受此覆写影响。 */ #drawer .dhd{gap:2px;padding-right:16px;padding-left:8px} #drawer .dhd .wicon{width:40px;height:40px} .dsec{flex:1;overflow-y:auto;padding:2px 10px 8px;scrollbar-width:none} .dsec::-webkit-scrollbar{display:none} .ditem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-lg);cursor:pointer; font-size:14px;color:var(--t1);user-select:none;width:100%;border:none;background:none;font-family:var(--font-ui);text-align:left} .ditem.on{background:var(--primary-soft);color:var(--primary);font-weight:600} .ditem .dic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--on-primary);flex:none} .ditem .dic .ic{width:15px;height:15px} .ditem .flg{width:18px;height:18px;flex:none;margin:0 4px} .ditem .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ditem .cnt{font-size:12px;color:var(--t3)} .ditem.on .cnt{color:var(--primary)} .ddiv{height:1px;background:var(--line-strong);margin:8px 14px} .dfoot{display:flex;align-items:center;gap:6px;padding:8px 14px calc(14px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px)));border-top:1px solid var(--line)} .dfoot .ditem{flex:1} /* toast */ .toast{position:absolute;bottom:calc(78px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px)));left:50%;transform:translate(-50%,16px);background:var(--gray-100); color:var(--on-primary);font-size:var(--fs-body);padding:11px 18px;border-radius:var(--r-pill);opacity:0;pointer-events:none; transition:all .25s;z-index:120;white-space:nowrap;box-shadow:var(--shadow-pop)} .toast.on{opacity:1;transform:translate(-50%,0)} :root[data-theme="dark"] .toast{background:var(--gray-0);color:var(--gray-100)} .toast button{background:none;border:none;color:var(--brand-30);font-weight:700;font-size:var(--fs-body); cursor:pointer;margin-left:8px;font-family:var(--font-ui)} /* ================= L4 公共件（卡头 / 下拉选择钮） ================= */ /* 卡头：全宽卡头（标题 + 计数 + 右置下拉选择），下接合并卡行 */ .dlist>.cardhd{display:flex;align-items:center;gap:8px;min-height:48px;margin:-3px -12px 0; padding:8px 12px;border-bottom:1px solid var(--line)} .cardhd b{flex:1;min-width:0;font-size:var(--fs-body-lg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cardhd .cnt{font-size:var(--fs-caption);color:var(--t3);font-weight:400;flex:none} /* 下拉选择钮（卡头右置分类 / 编辑页属性行），点击弹选择弹窗 */ .ddsel{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:var(--r-pill); background:var(--gray-10);color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;flex:none;user-select:none} .ddsel:active{background:var(--gray-20)} :root[data-theme="dark"] .ddsel{background:var(--gray-70)} .ddsel .dv{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ddsel .ic{width:14px;height:14px;color:var(--t3);flex:none} .dlist{background:var(--card);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);padding:3px 12px;margin-bottom:16px} /* ================= 宽屏适配（WEB端 541–1199px）：侧栏常驻 + 内容居中 ================= 放在桌面四栏域之前，供其覆盖同名基础规则（同优先级后者胜）。 ⚠ 这块是 WEB端 布局的前置依赖，缺了会导致 541–1199px 档侧栏不常驻、浮层不右让。 */ @media (min-width:541px){ body{display:block;background:var(--bg)} .phone{flex-direction:row;width:100%;height:100dvh;max-width:none;background:var(--bg)} .phone>main{flex:1;min-width:0;max-width:860px;width:100%;margin:0 auto} /* 抽屉变常驻侧栏 */ .drawer{position:relative;order:-1;transform:none;width:300px;max-width:none;flex:none; box-shadow:none;border-right:1px solid var(--line);z-index:1} .dmask{display:none!important} /* 浮层只覆盖内容区，不盖住侧栏 */ .mask,.dlgmask,.edpage,.setpage,.searchpage{left:300px} .toast{left:calc(300px + (100% - 300px)/2)} /* 底栏跟随内容区 */ .tabbar{left:300px} } /* ================= 宽屏桌面模式（≥1200px 或手动强制，靠 #phone 挂 .ldesk 开关） ================= 全部桌面样式收在本域，去掉开关即回 APP端 */ .rail{display:none} .rpanel{display:none} .phone.ldesk .tabbar{display:none} .phone.ldesk .rail{display:flex;position:relative;order:-2;flex:none;width:var(--railw,56px);flex-direction:column;align-items:center; gap:14.4px;padding:16px 0 14px;background:var(--primary);border-right:none;z-index:41} .phone.ldesk>main{max-width:none;margin:0} .phone.ldesk .page{padding-bottom:24px} /* 浮层让开轨道+侧栏（默认 56+300，栏宽设置可调），只盖主区与右栏（#dpage 例外，见下方停靠规则） */ /* 弹窗遮罩例外（M13）：全屏盖住轨道与侧栏 —— 对话框全屏居中，不是主区+右栏内居中 */ .phone.ldesk .mask, .phone.ldesk .edpage, .phone.ldesk .setpage{left:calc(var(--railw,56px) + var(--navw,300px))} .phone.ldesk .dlgmask{left:0} .phone.ldesk .toast{left:calc(var(--railw,56px) + var(--navw,300px) + (100% - var(--railw,56px) - var(--navw,300px))/2)} /* 轨道按钮 */ .rbtn{width:40px;height:40px;border:none;background:none;border-radius:12px;color:var(--t3);cursor:pointer;flex:none; display:flex;align-items:center;justify-content:center;position:relative;font-family:var(--font-ui)} .rbtn .ic{width:28.6px;height:28.6px} /* 老板 09-09 晚元素7：字形+30%（16→20.8），40px 按钮底色范围不变 */ .rbtn:hover{background:var(--gray-10)} .rbtn.on{color:var(--primary);background:var(--primary-soft)} /* 宽屏三层主题配色（轨道=主题色，白系图标）：轨道底已是 --primary，悬停/激活改白色半透明 */ .phone.ldesk .rbtn{color:rgba(255,255,255,.72)} .phone.ldesk .rbtn:hover{background:rgba(255,255,255,.14);color:var(--on-dark)} .phone.ldesk .rbtn.on{color:var(--on-dark);background:rgba(255,255,255,.18)} .rbadge{position:absolute;top:0;right:0;min-width:15px;height:15px;padding:0 4px;border-radius:8px; background:var(--risk);color:var(--on-dark);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center} /* 右栏工作面板：任务页常驻空态；新建/任务明细(#mSheet)在桌面模式下改道为右栏面板。 宽度走 --rpw（栏宽设置按比例分配，拖拽分割线或默认 400） */ .phone.ldesk .rpanel{display:flex;flex:none;width:var(--rpw,400px);background:var(--bg);border-left:1px solid var(--line);flex-direction:column} /* R2 WEB 固化：任务抽屉头部的通知/我的图标在 WEB 冗余（rail 与五 tab 已覆盖），隐藏 */ /* R2 WEB 固化：抽屉头部的关闭钮在 WEB 冗余（侧栏常驻）——只藏它（.dhdx）。 目录页头的「返回书架 / 新增 +」两钮是功能件，桌面模式必须保留 */ .phone.ldesk #drawer .dhd .dhdx{display:none} /* R2 WEB 固化：rpanel 四栏长驻（上方 .phone.ldesk .rpanel 已 display:flex），此规则退役 */ /*.phone.ldesk.rp-task:not(.sheet-open) .rpanel{display:flex}*/ /* R2.3 修复（老板 09-06 反馈①）：右栏常驻后，编辑面板(mSheet)停靠时右栏必须让位—— 否则 main 的 margin-right 预留与常驻右栏叠加，主页区与编辑区之间出现 --rpw 宽的空白带，窄屏主区被挤没 */ .phone.ldesk.sheet-open .rpanel{display:none} /* 右栏空态：只留图标（2026-09-08 老板反馈11-12：说明文字删除，图标保留） */ .rp-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--t3);padding:24px;text-align:center} .rp-empty .ic{width:36px;height:36px;opacity:.55} /* 新建/编辑任务：底部弹层 → 右栏面板（复用全部既有逻辑，仅重排版）。 面板宽 --rpw 可拖拽分割线调整（320–640），主区 margin-right 同步让位，互不遮挡 */ .phone.ldesk #mSheet.on{left:auto;right:0;top:0;bottom:0;width:var(--rpw,400px);background:transparent; display:flex;align-items:stretch;justify-content:flex-end;padding:0;z-index:60} .phone.ldesk.sheet-open>main{margin-right:var(--rpw,400px)} .phone.ldesk #mSheet.on .sheet{width:100%;max-height:none;height:100%;border-radius:0;border-left:1px solid var(--line); box-shadow:none;transform:none;transition:none;background:var(--card);display:flex;flex-direction:column;overflow-y:auto;padding:16px 16px 16px} .phone.ldesk #mSheet.on .grab{display:none} /* 分割线拖拽手柄：悬停/拖动显主题色细线 */ .phone.ldesk #mSheet.on .rph{display:block;position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:5} .phone.ldesk #mSheet.on .rph::before{content:'';position:absolute;left:3px;top:0;bottom:0;width:2px;border-radius:1px; background:transparent;transition:background .15s} .phone.ldesk #mSheet.on .rph:hover::before,.phone.ldesk #mSheet.on .rph.drag::before{background:var(--primary)} /* 侧栏可见性（宽屏默认模式）：默认无侧栏主区铺满；有侧栏的板块各自接管槽位 */ .phone.ldesk .drawer{display:none} .phone.ldesk.rp-task .drawer{display:flex} /* 侧栏宽度走 --navw（栏宽设置：侧栏/主页/编辑区按剩余宽比例分配；默认 300） */ .phone.ldesk .drawer{width:var(--navw,300px)} /* 首页板块侧栏（标题=导航菜单名，选项=板块列表，后续新增页面往 boardNavList 追加） */ /* R2 固化：侧栏列表撑满、foot 沉底（通知设置的右下角按钮位） */ .boardnav .dsec{flex:1 1 auto;min-height:0;overflow-y:auto} /* 首页板块侧栏：手机=抽屉（首页左上按钮呼出），宽屏=接管侧栏槽位 */ .boardnav{position:absolute;top:0;bottom:0;left:0;width:80%;max-width:330px;background:var(--card);z-index:110; transform:translateX(-103%);transition:transform .26s cubic-bezier(.32,.72,.28,1);box-shadow:var(--shadow-pop); display:flex;flex-direction:column} .boardnav.on{transform:none} .phone.ldesk.homeboard .boardnav{position:relative;order:-1;flex:none;width:var(--navw,300px);max-width:none;transform:none; box-shadow:none;border-right:1px solid var(--line);transition:none} /* WEB L2 收起（老板 09-09 晚交互规则）：默认展开四栏，L3 页头呼出钮切换； 收起=L1+L3+L4，主区/浮层坐标走 --navw:0 自动让位（L3/L4 自然分配剩余宽，无需额外开发） */ .phone.ldesk.l2hide{--navw:0px!important} .phone.ldesk.l2hide .boardnav,.phone.ldesk.l2hide .drawer{display:none!important} /* 桌面模式侧栏=在流槽位件，不与二级整页比层级（2026-09-08 老板反馈①"页面跨区超出工作区"根因： APP端抽屉档 z=110 残留到桌面，板块侧栏盖住 z85 二级页与其自带侧栏——数据管理页的数据表侧栏 被「配置中心」侧栏整条盖住）。APP端抽屉/遮罩档位不受影响（仅 .ldesk 域内改写） */ .phone.ldesk .drawer,.phone.ldesk .boardnav{z-index:auto} /* WEB四栏规则（2026-09-09 P1）：二级功能页/编辑器/搜索一律停靠4级编辑区（与 #dpage/#kbedpage 同位同宽）， 1级轨道与2级侧栏全程可见不再被覆盖；手机端 inset:0 全屏不变 */ .phone.ldesk .setpage, .phone.ldesk .edpage{left:auto;right:0;width:var(--rpw,400px); border-left:1px solid var(--line-strong);box-shadow:none} /* 构思画布例外（M9）：不做右栏窄停靠 —— 画布要的是整个主区（轨道+侧栏让位后铺到右缘， 盖过 AI 栏；返回键/ESC 走 LAYERS 的 brainClose） */ .phone.ldesk #brainPage{left:calc(var(--railw,56px) + var(--navw,300px));right:0;width:auto; border-left:none} /* sheet-open（任务编辑/日报停靠）z=97 高于二级页 z=85 / 实体详情 z=87，同区自然覆盖，无需再让位 */ /* 桌面侧栏 / 主区 / 右栏底色：随主题色轻度染色（见下方 @supports）； color-mix 不支持时回退 --bg / --card（优雅降级）。APP端通铺配色不受影响。 */ .phone.ldesk .drawer,.phone.ldesk .boardnav{background:var(--card)} @supports (background:color-mix(in srgb,red 10%,blue)){ .phone.ldesk .drawer,.phone.ldesk .boardnav{background:color-mix(in srgb,var(--primary) 10%,var(--bg))} .phone.ldesk>main,.phone.ldesk .dpage,.phone.ldesk .setpage,.phone.ldesk .searchpage,.phone.ldesk .edpage, .phone.ldesk #entpage,.phone.ldesk #syncpage,.phone.ldesk .rpanel{background:color-mix(in srgb,var(--primary) 3%,var(--bg))} } /* WEB端结构分隔线统一加强档（规范 §1.3：--line → --line-strong，仍 1px 不加粗）： 板块侧栏右缘 / 右栏工作面板与停靠弹层左缘（主区↔编辑区边界太淡） */ .phone.ldesk .drawer,.phone.ldesk .boardnav{border-right-color:var(--line-strong)} .phone.ldesk .rpanel, .phone.ldesk #mSheet.on .sheet{border-left-color:var(--line-strong)} /* 宽屏停靠弹层关闭动画消除：停靠弹层无论开关都保持右栏几何+透明底， 关闭即隐——否则摘掉 .on 后回退手机端底部弹层过渡（右栏"向下滑动"+遮罩瞬间全屏变暗再淡出）。 同理首页侧栏 boardnav 切走板块时不做手机抽屉的向左滑出过渡（多余的"向左闪动"）。 */ .phone.ldesk #mSheet{ left:auto;right:0;top:0;bottom:0;width:var(--rpw,400px);background:transparent; align-items:stretch;justify-content:flex-end;padding:0;transition:none} .phone.ldesk #mSheet .sheet{ transform:none;transition:none} .phone.ldesk .boardnav{transition:none} /* 宽屏分隔线：任务行之间 / 事项行之间（淡·细；手机端不受影响） */ .phone.ldesk .listcard .trow+.trow .tcard{border-top:1px solid var(--line)} /* ================= 语义状态令牌补全 ================= 注意：这些令牌在灵溪定义于业务段（1199+），但未被切掉的骨架规则引用了它们， 故必须显式收回令牌层。遗漏会让引用处颜色静默失效（无报错、无提示）。 */ :root{--risk:#DC2626;--warn-tx:#D97706;--good-tx:#16A34A;--good-soft:#F0FBF5; --good-fill:#DCFCE7;--warn-fill:#FEF3C7;--risk-fill:#FEECEC; --on-dark:#FFFFFF; /* 深色画布族：桌面舞台底色，独立于主题切换，故单独成组 */ --canvas:#14151C;--canvas-panel:#1E2030;--canvas-hover:#262840; --canvas-line:#33354A;--canvas-tx:#C9CBE0} /* ================= 表单与详情通用件（.kv / .frm / .saveb） ================= 底部常驻胶囊主按钮（改编板块「采纳」用，见项目根目录的开发文档 §十五） 必须收在骨架层，不得散落在业务段。 */ .kv{display:flex;gap:12px;padding:7px 2px;font-size:12px} .kv+.kv{border-top:1px solid var(--line)} .kv .k{width:72px;flex:none;color:var(--t3)} .kv .v{flex:1;min-width:0;color:var(--t1);word-break:break-all;line-height:1.5} .frm{background:var(--card);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);padding:8px 14px;margin-bottom:12px} .fr{display:flex;align-items:center;gap:12px;padding:7px 0} .fr .k{width:76px;flex:none;font-size:13px;color:var(--t3)} .fr .v{flex:1;min-width:0} /* 输入型字段统一盒式输入框：每行同高 38px（替代下划线） */ .fr input.fin{width:100%;box-sizing:border-box;height:38px;border:1px solid var(--line-strong);outline:none; background:var(--bg);font-size:14px;color:var(--t1);font-family:var(--font-ui); padding:0 12px;border-radius:var(--r-md)} .fr input.fin:focus{border-color:var(--primary)} .fr input.fin[readonly]{cursor:pointer} .fchips{display:flex;flex-wrap:wrap;gap:6px;min-height:38px;align-items:center} .fchips .chip{padding:4px 10px;font-size:12px} .saveb{width:100%;border:none;background:var(--primary);color:var(--on-primary);border-radius:var(--r-pill);padding:14px;min-height:48px; font-size:var(--fs-body-lg);font-weight:600;cursor:pointer;font-family:var(--font-ui)} /* ================= 空态 / 说明文字 ================= */ .dempty{margin:40px 16px;text-align:center;color:var(--t3);font-size:var(--fs-body)} .dempty b{display:block;font-size:var(--fs-body-lg);color:var(--t2);margin-bottom:6px;font-weight:600} /* ================= 创作板块（M4：书库 + 创作 + 改编三板块合并） ================= 四栏分工（详见 web/pages/studio.js 顶部注释）： L1 轨道（核心层）| L2 侧栏（.drawer，本板块自管内容） L3 主区 #studioBody = 正文编辑区 / 分类列表 | L4 #aiPanel = AI 编辑区 ⚠ L2 的树必须是真树（书→卷→章同时可见），不要退回墨叙那种"单数据集模式 切换器"（点小说看列表、点章节看列表，两者互斥）—— 写正文时能一眼看到 自己写到哪里，是这个板块存在的理由。 形态覆写：.page 默认是 display:block + 自己滚动（骨架给列表页的设计）。 创作页要的是「正文区内部滚动 + 保存栏固定贴底」，所以这里改成不滚动的 纵向 flex 容器 —— 否则 flex:1 不生效，保存栏会跟着内容飘在中途。 ⚠ padding-bottom 必须保留骨架给底栏留的那段：底栏是**绝对定位**在底部 64px、z-index 99 的，会直接盖住贴底的保存栏。把这段抹成 0 的后果是 保存钮看着"消失"（实测踩过）。桌面模式底栏不显示，才可归零。 */ #pg-studio{display:none;flex-direction:column;overflow:hidden; padding-bottom:calc(76px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px)))} #pg-studio.on{display:flex} /* W 页头底色透明：桌面模式下主区底色由 color-mix 轻染，.wtop 自带的 --pagebg 底色会渲染出一条色差带 —— 创作页页头直接透出主区底色 */ #pg-studio .wtop{background:transparent} .phone.ldesk #pg-studio{padding-bottom:0} .st-body{flex:1;min-height:0;display:flex;flex-direction:column} .st-scroll{flex:1;min-height:0;overflow-y:auto;padding:2px 0 24px;scrollbar-width:none} .st-scroll::-webkit-scrollbar{display:none} /* ---- 欢迎页（没开书时） ---- */ .st-welcome{margin:auto;padding:24px 28px;text-align:center;max-width:420px} .st-wl-ic{width:60px;height:60px;margin:0 auto 14px;border-radius:var(--r-2xl);background:var(--primary-soft); display:flex;align-items:center;justify-content:center;color:var(--primary)} .st-wl-ic .ic{width:30px;height:30px} .st-wl-ttl{font-size:var(--fs-title);font-weight:700;color:var(--t1);margin-bottom:8px} .st-wl-txt{font-size:var(--fs-body);color:var(--t2);line-height:1.7;margin-bottom:20px} .st-wl-acts{display:flex;flex-direction:column;gap:10px} .st-btn2{width:100%;border:1px solid var(--line);background:var(--card);color:var(--t1); border-radius:var(--r-pill);padding:13px;font-size:var(--fs-body);font-weight:600; cursor:pointer;font-family:var(--font-ui)} /* ---- L2 侧栏：树 ---- 卷头是可点按钮（需求4：卷可收起、默认收起）；缺省收起，当前章所在卷由 JS 置 open。 页头与目录之间的分割线已按老板要求去掉：首卷头贴着页头，只留 2px 顶距 （+ 页头自身 12px 下内边距 = 16px 可视间距，对齐 L3 页头→内容的节奏）。 左对齐（需求3）：卷头图标、章序号要与目录页头返回钮的**字形**对齐，不是容器对齐 —— 返回钮 = dhd 左距 8 + 40px 钮内居中 8 = 图标盒 16px 起，方块字形（viewBox -1.44 起） 左缘再 +2.4px ≈ 18.4px；卷头 16px 加/减号方块字形内缩 3.04px → 盒左距 5.4px； 章序号数字盒左距 8px（墨缘同样 ≈18.4px）。 */ .st-volname{font-size:11px;font-weight:700;color:var(--t3);padding:10px 12px 4px 5.4px; display:flex;align-items:center;gap:6px;width:100%;border:none;background:none; text-align:left;font-family:var(--font-ui);cursor:pointer;user-select:none} .st-volname:first-child{padding-top:2px} button.st-volname:hover{color:var(--t2)} .st-volname.st-volhead{cursor:default;padding-left:22px} /* 卷头加/减号方块：可视方块高 ≈11px，与 11px 卷名文字同高（需求6）； 收起/展开由 JS 换 #i-sqplus / #i-sqminus 符号，不再用旋转 */ .st-volchev{width:16px;height:16px;flex:none;color:var(--gray-40)} .st-voidx{font-size:12px;color:var(--t3);padding:4px 22px 6px} /* 章行：序号绝对定位在 74px 基准线（左缘 8px，墨缘仍与页头返回钮字形对齐）； 标题左缘 27.4px = 卷名文字左缘（5.4 + 16 图标 + 6 间距），与元素4同线（需求3） */ .ditem.st-ch{position:relative;padding:8px 12px 8px 27.4px;font-size:13px} .st-chidx{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:19.4px; font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums} .ditem.st-ch.on .st-chidx{color:var(--primary)} .ditem.st-ch .cnt{font-size:11px} /* 行尾三点菜单钮（章行 / 书架行共用；span——不能把 button 嵌进 button 行里）。 点它弹 .pmenu，事件在行内 stopPropagation，不触发行的打开动作 */ .st-more{flex:none;width:22px;height:22px;border-radius:var(--r-sm);color:var(--t3); display:flex;align-items:center;justify-content:center;cursor:pointer} .st-more .ic{width:15px;height:15px} .st-more:active{background:var(--gray-10)} :root[data-theme="dark"] .st-more:active{background:var(--gray-70)} /* ---- L3 正文编辑区 ---- 章节页头左内边距 18px：与 W 页头左侧图标钮的可视字形对齐 （wtop 左距 8 + 40px 钮内居中 8 + 图标字形内缩 ≈2.4 = 18.4）； 编辑器左右内边距同 18px —— 页宽拉满时正文与页头内容左右同线。 顶距 2px：章节行可视顶与 L2 侧栏卷头可视顶同线（元素3/4/5 对齐）。 */ .st-chhd{padding:2px 18px 10px} .st-chtop{display:flex;align-items:center;gap:10px;margin-bottom:8px} .st-chtitle{flex:1;min-width:0;font-size:18px;font-weight:700;color:var(--t1); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 页头右侧标签组：上一章 / 下一章 / 历史版本 收成三枚可点标签； 阅读模式的「全屏 / 设置」走右侧图标钮（.st-ico），与文字标签同排 */ .st-acts{display:flex;align-items:center;gap:6px;flex:none} .st-act{flex:none;border:none;background:var(--gray-10);color:var(--t2);border-radius:var(--r-pill); padding:5px 12px;font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font-ui)} .st-act:active{background:var(--gray-20)} :root[data-theme="dark"] .st-act{background:var(--gray-70)} /* L3 页头右侧的小图标钮（搜索 / 全屏 / 自动滚动播放 / 阅读设置）；播放钮开着给 .on */ .st-ico{flex:none;width:28px;height:28px;border:none;background:var(--gray-10);color:var(--t2); border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .st-ico.on{background:var(--primary-soft);color:var(--primary)} .st-ico .ic{width:15px;height:15px} .st-ico:active{background:var(--gray-20)} :root[data-theme="dark"] .st-ico{background:var(--gray-70)} /* 章节标题前的文档小图标：盒 22px（doc-text 字形内缩 ≈19.7px），视觉与 18px 标题同高 */ .st-chico{width:22px;height:22px;flex:none;color:var(--t2)} /* ---- 精致滑块（滚动速度 / 行间距 / 页宽同款）---- appearance:none 自绘：细轨道 3px，已走过部分用 --p 百分比填主题色， 拇指 12px 白底主题描边带投影；数字列 .slidval / 页头数字 .slidnum */ .sliderr{-webkit-appearance:none;appearance:none;width:150px;flex:none;height:20px;margin:0; background:transparent;cursor:pointer;--p:50%} .sliderr::-webkit-slider-runnable-track{height:3px;border-radius:2px; background:linear-gradient(to right,var(--primary) var(--p),var(--gray-20) var(--p))} .sliderr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px; border-radius:50%;background:var(--card);border:2px solid var(--primary); box-shadow:0 1px 4px rgba(23,27,38,.22);margin-top:-5px;transition:transform .12s} .sliderr::-webkit-slider-thumb:hover{transform:scale(1.15)} .sliderr::-moz-range-track{height:3px;border-radius:2px;background:var(--gray-20)} .sliderr::-moz-range-progress{height:3px;border-radius:2px;background:var(--primary)} .sliderr::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--card); border:2px solid var(--primary);box-shadow:0 1px 4px rgba(23,27,38,.22)} .st-speed{width:88px} /* 页头速度数字 / 弹窗滑块数字列（定宽，两行滑块数字对齐） */ .slidnum{flex:none;min-width:14px;text-align:center;font-size:11px;font-weight:600; color:var(--t2);font-variant-numeric:tabular-nums} .slidval{flex:none;min-width:52px;text-align:right;font-size:12px;font-weight:600; color:var(--t2);font-variant-numeric:tabular-nums} .dlgslider{width:170px} /* 表单里的多行文本（设定表单的简介/详情/样本等） */ textarea.farea{height:auto;min-height:64px;padding:8px 12px;line-height:1.7;resize:vertical; font-family:var(--font-ui)} /* 导入上传进度条（footbar 内，saveb 上方） */ .in-prog{display:flex;align-items:center;gap:10px;margin-bottom:8px} .in-prog-bar{height:6px;border-radius:3px;background:var(--primary);transition:width .2s;flex:1} .in-prog-tx{flex:none;font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums} /* AI 悬浮钮拖拽态（拖动中禁用过渡，否则跟手延迟） */ .ai-fab.drag{transition:none} /* 搜索结果列表里的序号底座 */ .dic.schidx{background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700} /* 全文搜索命中：正文黄底高亮 / 目录章名红字 */ mark.st-hlmark{background:var(--warning);color:inherit;border-radius:3px;padding:0 1px} :root[data-theme="dark"] mark.st-hlmark{color:#231a00} .ditem.st-ch .grow.hit{color:var(--risk)} .ditem.st-ch.on .grow.hit{color:var(--risk);font-weight:700} /* 自动滚动播放中：滚动容器顶部渐隐遮罩 —— 文字滚出视口时柔和消失（需求5） */ .st-fade{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 46px); mask-image:linear-gradient(to bottom,transparent 0,#000 46px)} /* 自动保存状态字（#stSaveState）：编辑中/失败给警告色，其余随 .st-para。 （清洗/摘要/抽取/音频状态 chip 行已随需求7删除） */ .st-para{font-size:11px;color:var(--t3);margin-left:2px;flex:none} .st-para.warn{color:var(--warn-tx)} .st-sum{font-size:12px;color:var(--t2);line-height:1.7;background:var(--card); border-radius:var(--r-lg);padding:10px 12px;margin-top:10px} /* 正文编辑区：contenteditable 排版面 —— 与全屏阅读同一套段落渲染 （逐段

：首行缩进 2em + 对话高亮着色），字号/行距/页宽走阅读设置变量， 两态所见即所存；高度随内容自然生长，滚动交给外层 .st-scroll */ .st-editor{flex:none;min-height:280px;width:100%;box-sizing:border-box;border:none;outline:none; background:transparent;color:var(--t1);font-family:var(--font-ui); font-size:var(--st-fs,15px);line-height:var(--st-lh,1.95); padding:4px 18px 24px;margin:0 auto;overflow-wrap:break-word;caret-color:var(--primary)} .st-editor p,.st-editor div{margin:0;text-indent:2em} .st-editor:empty::before{content:attr(data-placeholder);color:var(--t3);pointer-events:none} /* ---- 全屏阅读模式（复刻墨叙「阅读模式」配置：自动滚动/行距/字号/对话高亮/宽度） ---- 进入后 .st-read 挂 #phone：收侧栏 / AI 栏 / 底栏，正文页吃满；正文由 textarea 切成只读排版页（.st-reader）—— 对话高亮（着色/加粗）只能在排版页里渲染， 编辑回编辑态、互不干扰。 */ .phone.st-read .drawer,.phone.st-read .aipanel{display:none!important} .phone.st-read .tabbar{display:none} .phone.st-read #pg-studio{padding-bottom:12px} /* 阅读态章节行（需求8）：固定在正文上方不随滚动（studioReadHtml 把它放在滚动容器外）； 下滚时模糊+上移淡出，上滚或回到顶部淡入（studioBindReadScroll 翻 .gone） */ .st-rhd{flex:none;transition:opacity .3s ease,filter .3s ease,transform .3s ease} .st-rhd.gone{opacity:0;filter:blur(8px);transform:translateY(-12px);pointer-events:none} .st-reader{max-width:720px;margin:0 auto;padding:4px 16px 48px; font-size:var(--st-fs,16px);line-height:var(--st-lh,1.95);color:var(--t1)} .st-reader p{margin:0;text-indent:2em} /* 次要小按钮（AI 结果区的「丢弃」等） */ .st-tbtn{flex:none;border:1px solid var(--line);background:var(--card);color:var(--t2); border-radius:var(--r-pill);padding:7px 14px;font-size:12px;font-weight:500; cursor:pointer;font-family:var(--font-ui)} .st-tbtn:active{background:var(--gray-10)} /* ---- L3 设置类（六个分类里的后五个） ---- */ .st-sethd{display:flex;align-items:center;gap:2px;padding:4px 16px 8px 8px;border-bottom:1px solid var(--line)} .st-sethd .st-chtitle{padding-left:0} .st-welcome .saveb,.st-wl-acts .saveb{width:100%} /* ================= L4 AI 编辑区（#aiPanel） ================= 桌面模式＝常驻第三栏（.phone.ldesk.rp-ai）。它是**在流槽位件**，不是覆盖层： 必须在正常文档流里占一列，且开着的时候不能被 #mSheet 的停靠规则挤掉。 APP端＝底部滑层（复用 .mask>.sheet 骨架，见 studioAiOpenSheet）。 */ .aipanel{display:none} /* 明暗两档底色。 ⚠ 骨架里右栏的浅色底是由 @supports color-mix 那条规则统一染的，只覆盖 #rpanel / .drawer / .boardnav / main —— **不含 .aipanel**（M4 新增的槽位）。不补这两条， AI 栏在桌面模式下会是纯 --bg，与左侧栏的淡主题染色对不上，看着像没做完。 color-mix 不支持时回退 --bg（保留上面那条基础底色）。 */ @supports (background:color-mix(in srgb,red 10%,blue)){ .phone.ldesk .aipanel{background:color-mix(in srgb,var(--primary) 3%,var(--bg))} } .phone.ldesk.rp-ai .aipanel{ display:flex;flex:none;width:min(var(--rpw,400px),520px);flex-direction:column; border-left:1px solid var(--line-strong);position:relative;z-index:auto} /* AI 栏开着时，主区不吃右栏宽度冲突：让它自然排列（不需要 margin-right，因为 .aipanel 是自己的 flex 兄弟，与 #mSheet 的停靠覆盖语义不同） */ .phone.ldesk.rp-ai #rpanel{display:none} /* AI 助手页头：与 L3/L2 页头同一规格（高 68、上距 16 下距 12、标题 20px/700、 图标 24 可视居中）；**无分割线**，整个页头可点 = 收起面板 */ .aip-hd{display:flex;align-items:center;gap:8px;min-height:68px;cursor:pointer;user-select:none; padding:calc(16px + max(env(safe-area-inset-top,0px),var(--sa-top,0px))) 16px 12px 16px} .aip-hd:active{background:var(--gray-10)} :root[data-theme="dark"] .aip-hd:active{background:var(--gray-70)} .aip-ico{width:24px;height:24px;flex:none;color:var(--t2)} .aip-ttl{flex:1;font-size:var(--fs-title);font-weight:700;color:var(--t1)} /* AI 助手收起后的悬浮钮：右下角（右/下 16px 等距边距，不挡阅读），圆形主题底 + send 图标 */ .ai-fab{display:none;position:absolute;right:16px;bottom:16px; width:46px;height:46px;border:none;border-radius:50%;background:var(--primary);color:var(--on-primary); cursor:pointer;z-index:45;align-items:center;justify-content:center; box-shadow:var(--shadow-primary);opacity:0;pointer-events:none;transition:opacity .2s} .ai-fab.on{display:flex;opacity:1;pointer-events:auto} .ai-fab .ic{width:20px;height:20px} .aip-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden} .aip-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:2px 14px 14px} .aip-sheet{max-height:80vh;display:flex;flex-direction:column} /* 消息流（M14 主流 AI 对话式）：用户输入=右缘气泡，AI 输出=左缘开放文本， 完成后操作收进图标行；空态给引导文案 */ .aip-msgs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none; display:flex;flex-direction:column;gap:14px;padding:4px 2px 10px} .aip-msgs::-webkit-scrollbar{display:none} .aip-m{display:flex} .aip-m.me{justify-content:flex-end} .aip-m.ai{justify-content:flex-start} /* 用户气泡：淡主题底。生成条件卡（.aip-cfgc）里放设定摘要与 编辑/重新生成 */ .aip-ub{max-width:88%;box-sizing:border-box;background:var(--primary-soft); border:1px solid var(--primary-border);border-radius:var(--r-xl); padding:8px 12px;font-size:13px;line-height:1.7;color:var(--t1); white-space:pre-wrap;word-break:break-word} /* AI 开放文本：不套气泡壳（Beautiful UI 03/07 的 answer 区），流式光标复用 aipblink */ .aip-ab{max-width:100%;font-size:13.5px;line-height:1.85;color:var(--t1); white-space:pre-wrap;word-break:break-word} .aip-ab.live::after{content:'▍';color:var(--primary);animation:aipblink 1s steps(1) infinite} @keyframes aipblink{50%{opacity:0}} /* 生成条件卡：动作名 + 勾选的指令卡 + 篇幅/推演项 + 其它要求 */ .aip-cfgc{display:flex;flex-direction:column;gap:6px} .aip-cfgc-hd{display:flex;align-items:center;gap:8px} .aip-cfgc-hd b{flex:1;font-size:13px;font-weight:700;color:var(--t1)} .aip-cfgc-acts{display:flex;gap:6px} .aip-mini{border:1px solid var(--primary-border);background:var(--card);color:var(--primary); border-radius:var(--r-pill);padding:2px 10px;font-size:11px;font-weight:600; cursor:pointer;font-family:var(--font-ui)} .aip-mini:active{background:var(--primary);color:var(--on-primary)} .aip-cfgc-chips{display:flex;gap:5px;flex-wrap:wrap} .aip-cfgc-meta{font-size:11px;color:var(--t2)} .aip-cfgc-extra{font-size:12px;color:var(--t2);border-left:2px solid var(--primary-border); padding-left:8px;white-space:pre-wrap;word-break:break-word} /* AI 结果底部操作行：图标钮（复制 / 替换选中 / 插入光标处 / 采纳），主操作实心 */ .aip-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px} .aip-acti{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line); background:var(--card);color:var(--t2);display:flex;align-items:center;justify-content:center; cursor:pointer;font-family:var(--font-ui)} .aip-acti .ic{width:15px;height:15px} .aip-acti:active{background:var(--gray-10)} :root[data-theme="dark"] .aip-acti:active{background:var(--gray-70)} .aip-acti.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary); box-shadow:var(--shadow-primary)} /* 已写入正文后的说明行 */ .aip-note{font-size:11px;color:var(--t3);margin-top:4px} .aip-hello{margin:auto;text-align:center;color:var(--t3);font-size:12px;line-height:1.8;padding:20px; display:flex;flex-direction:column;align-items:center;gap:6px} .aip-hello .ic{width:26px;height:26px;color:var(--gray-30)} .aip-hello b{font-size:var(--fs-body-lg);color:var(--t2)} .aip-wait{color:var(--t3);font-size:12px} /* 输入坞（Beautiful UI 的 Prompt Bar）：圆角容器包住指令框与圆形发送钮， 聚焦时容器描边转主题色（而非输入框自己描边） */ .aip-dock{flex:none;display:flex;flex-direction:column;gap:8px} .aip-bar{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--bg); padding:9px 10px 8px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s} .aip-bar:focus-within{border-color:var(--primary)} .aip-ta{width:100%;box-sizing:border-box;border:none;outline:none;background:transparent;color:var(--t1); font-family:var(--font-ui);font-size:13px;line-height:1.7;padding:0 2px;resize:none} .aip-row{display:flex;align-items:center;gap:8px} .aip-sel{flex:1;font-size:11px;color:var(--t3)} .aip-go{flex:none;width:32px;height:32px;border-radius:50%;border:none;background:var(--primary); color:var(--on-primary);display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:var(--shadow-primary)} .aip-go .ic{width:15px;height:15px} .aip-go.stop{background:var(--risk);box-shadow:none} /* 上下文徽标行用的统计小片（评审弹窗 / 条件卡共用） */ .aip-ch{font-size:10.5px;padding:2px 7px;border-radius:var(--r-pill); background:var(--primary-soft);color:var(--primary);font-weight:600} .aip-ch.cut{background:var(--gray-10);color:var(--t3);text-decoration:line-through} :root[data-theme="dark"] .aip-ch{background:var(--gray-70);color:var(--t3)} :root[data-theme="dark"] .aip-ch.cut{background:transparent} /* 输入坞拉高手柄：悬停浮现的横柄（需求6） */ .aip-grip{height:10px;margin:2px -6px -4px;cursor:ns-resize;border-radius:4px;position:relative;opacity:0;transition:opacity .15s} .aip-grip::before{content:'';position:absolute;left:50%;top:3px;transform:translateX(-50%); width:36px;height:4px;border-radius:2px;background:var(--gray-30)} .aip-bar:hover .aip-grip{opacity:1} /* 剧情推演的候选走向列表 */ .aip-opts{flex:none;display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow-y:auto;scrollbar-width:none} .aip-opts::-webkit-scrollbar{display:none} .aip-opt{display:flex;align-items:flex-start;gap:8px;text-align:left;width:100%;border:none;cursor:pointer; background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px 11px; font-family:var(--font-ui);font-size:12.5px;line-height:1.7;color:var(--t1);transition:border-color .15s} .aip-opt:hover{border-color:var(--primary-border)} .aip-opt:active{background:var(--gray-10)} :root[data-theme="dark"] .aip-opt:active{background:var(--gray-70)} .aip-opt .n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--primary-soft); color:var(--primary);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px} .aip-opt .grow{flex:1;min-width:0} .aip-opttip{font-size:11px;color:var(--t3);text-align:center} /* 模型管理列表里的模型名副行 */ .me-mmodel{display:block;font-size:11px;color:var(--t3);margin-top:2px} /* 版本历史弹层里的列表（复用 .setrow2 的外观，但去掉卡片外边距） */ .aip-vers{max-height:46vh;overflow-y:auto;margin:6px 0 2px} /* 深色 + 主题色通铺下的正文区：底色由 .page 通铺，文字要跟着翻白 */ .phone.bgmode-dark .st-chtitle,.phone.bgmode-dark .st-wl-ttl{color:var(--on-dark)} .phone.bgmode-dark .st-wl-txt,.phone.bgmode-dark .st-para{color:rgba(255,255,255,.8)} .phone.bgmode-dark .st-editor{color:var(--on-dark)} .phone.bgmode-dark .st-editor:empty::before{color:rgba(255,255,255,.55)} .phone.bgmode-dark .st-reader{color:var(--on-dark)} /* ================= 聊天板块（pg-chat） ================= 结构＝消息流（滚动）+ 底部输入坞（固定）。页面形态与创作页同款： 不滚动的纵向 flex 容器，滚动交给 .chat-msgs；padding-bottom 保留骨架给 底栏留的那段（同 #pg-studio 的缘由）。 */ #pg-chat{display:none;flex-direction:column;overflow:hidden; padding-bottom:calc(76px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px)))} #pg-chat.on{display:flex} .phone.ldesk #pg-chat{padding-bottom:0} .chat-body{flex:1;min-height:0;display:flex;flex-direction:column} .chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:10px 14px;scrollbar-width:none} .chat-msgs::-webkit-scrollbar{display:none} .chat-hint{margin:56px 24px} /* 气泡：我方右缘主题色实底，AI 方左缘卡片底描边 */ .cmsg{display:flex;margin-bottom:10px} .cmsg.me{justify-content:flex-end} .cmsg-b{max-width:82%;padding:10px 13px;border-radius:var(--r-xl);font-size:var(--fs-body); line-height:1.75;white-space:pre-wrap;word-break:break-word} .cmsg.ai .cmsg-b{background:var(--card);border:1px solid var(--line);color:var(--t1)} .cmsg.me .cmsg-b{background:var(--primary);color:var(--on-primary)} /* 流式中的光标（.live 挂在正在接收的气泡上） */ .cmsg-b.live::after{content:'▍';opacity:.55;animation:aipblink 1s steps(1) infinite} /* 底部输入坞：圆角输入框 + 圆形发送/停止钮 */ .chat-bar{flex:none;display:flex;align-items:flex-end;gap:8px; padding:10px 14px calc(12px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px))); border-top:1px solid var(--line);background:var(--pagebg,var(--bg))} .chat-ta{flex:1;box-sizing:border-box;min-height:40px;max-height:140px;border:1px solid var(--line-strong); outline:none;background:var(--card);color:var(--t1);font-family:var(--font-ui);font-size:var(--fs-body); line-height:1.6;padding:9px 14px;border-radius:var(--r-xl);resize:none} .chat-ta:focus{border-color:var(--primary)} .chat-go{width:40px;height:40px;border-radius:50%;border:none;background:var(--primary); color:var(--on-primary);display:flex;align-items:center;justify-content:center;cursor:pointer; flex:none;box-shadow:var(--shadow-primary)} .chat-go .ic{width:18px;height:18px} .chat-go.stop{background:var(--risk);box-shadow:none} /* 主题色通铺（bgmode-dark）下气泡配色对齐 chips 的既有约定： AI 方=白磨砂，我方=白实底 + 主题色字（最亮者为我方消息） */ .phone.bgmode-dark .cmsg.ai .cmsg-b{background:rgba(255,255,255,.14);border-color:transparent;color:rgba(255,255,255,.92)} .phone.bgmode-dark .cmsg.me .cmsg-b{background:var(--on-dark);color:var(--primary)} /* ================= 书库列表（M4 起降级为「换书」弹层与侧栏书架态） ================= 版式对齐灵溪的卡片列表（经营卡与 listcard 用的是同一套外边距）： 卡片左右 16px；**首卡上边距 2px** —— 与页头自身 12px 下内边距相加 = 14px 可视间距； 卡与卡 上 2px + 前一张下 14px = 16px。 一行一个通栏，不再用网格。 封面色由书名哈希算出（纯前端，不用 AI）。 */ .liblist{flex:1;min-height:0;overflow-y:auto;padding:0 0 96px;scrollbar-width:none} .liblist::-webkit-scrollbar{display:none} /* ⚠ 卡片是