/* 04-base.css —— 基础 · 骨架/分栏/头像/顶栏
   从 web/index.html 拆出（yourcopy v3 · 2026-10-06）。
   拆分原则：**严格保持原始行序**。CSS 后写的赢，重排会悄悄改掉视觉，
   所以这里的规则顺序跟原文件里一模一样，不要按功能重排。

   文件序号 01/02/… 就是加载顺序（index.html 里 link 的顺序）。
   想合并相邻文件：把内容按序号顺序拼起来即可，不会变样。

   ⚠️ 改样式前先知道两件事：
      1) 同一个类名可能出现在多个文件里 —— 那是按"这条规则在原文件的位置"
         切出来的，不是漏了。要改某个类，用浏览器 F12 选中元素，
         看命中的规则在哪个文件（会标出行号）。
      2) 整体换配色：搜 var(--brand)（品牌红）/ var(--clone)（分身橙），
         这两个值散在多个文件里，用全局替换。
*/

.bar .dot{width:7px;height:7px;border-radius:50%;background:#1D9E75;flex:none}
.bar .dot.off{background:#7a8794}
.bar .sp{margin-left:auto;display:flex;gap:14px}

/* ---------- 设置：头像 / 字段编辑 / 朋友圈 ---------- */
.avup{position:relative;cursor:pointer;border:1px dashed #d8dadc;border-radius:8px;
  width:84px;height:84px;flex:none;background:#ffffff;display:flex;align-items:center;
  justify-content:center;overflow:hidden;color:#6b7783;font-size:12px;text-align:center;transition:.12s}
.avup:hover{border-color:var(--brand);color:var(--brand)}
.avup.hasimg{font-size:11px}
.avup .avupimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avup .avuphint{position:relative;z-index:1;padding:4px;line-height:1.4}
.avrow{display:flex;gap:16px;align-items:center;margin-bottom:14px}
/* 头像库：从现成的图库里挑，不用自己去截图裁图 */
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;
  max-height:390px;overflow-y:auto;padding:2px}
.avcell{position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:#f3f4f6;transition:.12s}
.avcell img{width:100%;height:100%;object-fit:cover;display:block}
.avcell:hover{border-color:var(--brand)}
.avcell.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(196,30,58,.14)}
.avcell .avtag{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;text-align:center;
  padding:2px 0;background:rgba(15,20,25,.62);color:#fff}
.avcell.on .avtag{background:var(--brand)}
.avcell .avwho{position:absolute;top:4px;right:4px;font-size:9px;background:rgba(15,20,25,.6);
  color:#fff;padding:1px 5px;border-radius:8px;max-width:88%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 性别角标 + 反性别图弱化：灰掉但仍可点，选谁终究是主人说了算 */
.avcell .avg{position:absolute;left:4px;top:4px;font-size:9px;padding:1px 5px;
  border-radius:8px;color:#fff;background:rgba(15,20,25,.6)}
.avcell .avg.m{background:rgba(37,99,235,.86)}
.avcell .avg.f{background:rgba(219,39,119,.86)}
.avcell.off{opacity:.3;filter:grayscale(.9)}
.avcell.off:hover{opacity:.75;filter:none}
.avbtns{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.avmeta{flex:1;min-width:0}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:10.5px;color:#6b7783;letter-spacing:.5px;margin-bottom:6px}
.fin{width:100%;background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:9px 12px;
  font-size:12.5px;color:#1f2c3a;outline:none;font-family:inherit;box-sizing:border-box}
.fin:focus,.farea:focus{border-color:var(--brand)}
.farea{width:100%;background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:9px 12px;
  font-size:12.5px;color:#1f2c3a;outline:none;font-family:inherit;box-sizing:border-box;resize:vertical;min-height:84px;line-height:1.6}
.fbtn{background:var(--brand);color:#fff;border:none;border-radius:6px;padding:7px 14px;font-size:12px;
  cursor:pointer;font-family:inherit}
.fbtn:hover{background:var(--brand-hover)}
.fbtn.ghost{background:#e6e8ea;color:#5a6b78}
.fbtn.ghost:hover{background:#dfe2e5;color:#1f2c3a}
.fbtn:disabled{opacity:.5;cursor:default}
.fbtn.ghost{background:#e9eaec;color:#2b3947}
.fbtn.ghost:hover{background:#e9eaec}
.frow{display:flex;gap:8px;align-items:center;margin-top:8px}
.frow .fin{flex:1}
.fdone{font-size:11px;color:#1D9E75;margin-top:6px}
.fnote{font-size:10.5px;color:#6b7783;line-height:1.6;margin-top:5px}
.selmodel{width:100%;background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:9px 12px;
  font-size:12.5px;color:#1f2c3a;outline:none;font-family:inherit}
.selmodel:focus{border-color:var(--brand)}
/* 日期分隔条：跨天时插一条，气泡上就能只写 HH:MM */
.daysep{align-self:center;margin:2px 0;padding:2px 11px;border-radius:10px;
  background:#f5f6f8;border:1px solid #e9eaec;color:#6b7783;font-size:10px;letter-spacing:.3px;flex:none}
/* 断连提示：控制台进程被关掉时，页面不能装作没事发生 */
.offbar{width:1180px;margin-bottom:-8px;padding:8px 14px;border-radius:8px;
  background:#EFF7F3;border:1px solid #1D7A5F;color:#993426;font-size:11.5px;line-height:1.7;display:none}
.offbar.on{display:block}
/* 朋友圈 */
.mfeed{display:flex;flex-direction:column;gap:10px}
.moment{background:#ffffff;border:1px solid #e6e8ea;border-radius:9px;padding:11px 13px}
.mtxt{font-size:12.5px;color:#1f2c3a;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.mtime{font-size:10px;color:#6b7783;margin-top:7px}
/* 聚合时间线：每条要能看出是谁发的，点头像/名字能进它的资料页 */
.mwho{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mav{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:11px;cursor:pointer;
  background-size:cover;background-position:center}
.mname{font-size:12px;color:#1f2c3a;cursor:pointer}
.mname:hover{color:var(--clone)}
.mwho .mtime{margin-top:0;margin-left:auto;flex:none}
/* 自动记录标记：让人一眼分清哪些是分身自己写的、哪些是主人代发的 */
.mauto{display:inline-block;margin-right:6px;padding:0 5px;border-radius:3px;
  background:#e9f5ee;color:#0F6E56;font-size:9.5px;vertical-align:1px}
.chkrow{display:flex;align-items:center;gap:7px;margin-bottom:11px;cursor:pointer;user-select:none}
.chkrow input{width:14px;height:14px;cursor:pointer;accent-color:var(--brand)}
.chkrow span{font-size:11.5px;color:#5f6b76}
.chkrow:hover span{color:#2b3947}
/* 邮件配置：可点行 + 分步自检结果 */
.pv.ok{color:#1D9E75}
.prow.clickable{cursor:pointer;border-radius:6px;margin:2px -6px;padding:4px 6px}
.prow.clickable:hover{background:#e9eaec}
.dstep{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #e9eaec}
.dstep:last-child{border-bottom:none}
.dmark{width:15px;flex:none;text-align:center;font-size:12px}
.dmark.ok{color:#1D9E75}
.dmark.no{color:#1D7A5F}
.dbody{flex:1;min-width:0;font-size:11.5px}
.dname{color:#1f2c3a}
.dmsg{color:#5f6b76;margin-top:2px;word-break:break-all;line-height:1.5}
.dhint{color:var(--clone-hover);margin-top:4px;line-height:1.6}
.madd{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mempty{font-size:11px;color:#6b7783;line-height:1.6}
/* 大模型：绑定 Key 对话框 + 帮助找模型 */
.bmore{margin-left:auto;font-size:11px;color:#6b7783;cursor:pointer;padding:2px 7px;border-radius:4px}
.bmore:hover{background:#e9eaec;color:var(--clone)}
.mbox.wide{width:660px}
.hpgrid{display:flex;flex-direction:column;gap:9px;max-height:430px;overflow-y:auto;
  margin:6px 0 4px;padding-right:4px}
.hpcard{background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:11px 13px}
.hptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hpname{font-size:13px;color:#1f2c3a;font-weight:500}
.hptag{font-size:9.5px;padding:1px 6px;border-radius:3px;background:#e9eaec;color:#5f6b76}
.hptag.rec{background:#e9f5ee;color:#0F6E56}
.hpdesc{font-size:11.5px;color:#5f6b76;line-height:1.6;margin-top:5px}
.hplink{font-size:11.5px;color:var(--clone);text-decoration:none;word-break:break-all;
  font-family:Consolas,monospace;cursor:pointer}
.hplink:hover{text-decoration:underline}
.hpnote{font-size:10.5px;color:#6b7783;margin-top:5px;line-height:1.6}
.krow{margin-top:11px}
.klabel{font-size:11.5px;color:#5f6b76;margin-bottom:5px}
.kinp{width:100%;background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:9px 12px;
  font-size:12.5px;color:#1f2c3a;outline:none;font-family:Consolas,monospace}
.kinp:focus{border-color:var(--brand)}
.kadv{margin-top:12px;border-top:1px solid #e9eaec;padding-top:9px}
.kadvtog{font-size:11px;color:#6b7783;cursor:pointer;user-select:none}
.kadvtog:hover{color:#5f6b76}
.kadvbody{display:none;margin-top:9px}
.kadvbody.on{display:block}
.khint{font-size:11px;color:#5f6b76;line-height:1.65;background:#ffffff;border:1px solid #e9eaec;
  border-radius:7px;padding:9px 11px;margin-top:4px}
.mnote{font-size:11px;color:#6b7783;line-height:1.6;margin-top:7px}
.mnote.ok{color:#1D9E75}
.mnote.warn{color:var(--clone-hover)}

/* ===== 微信/WhatsApp 式响应式外壳（2026-09-06 重构） ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:0;align-items:stretch;display:flex;flex-direction:column;background:#eef0f2;color:#1f2c3a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden}
.offbar{order:0;max-width:100%;width:auto}
.bar{order:1;width:auto;max-width:100%;flex-wrap:wrap;padding:6px 14px}
.app{order:2;position:relative;flex:1;min-height:0;width:100%;max-width:1200px;margin:0 auto;display:block;background:#eef0f2}

.tabbar{position:absolute;left:0;right:0;bottom:0;height:56px;display:grid;grid-template-columns:repeat(5,1fr);
  background:#f4f5f7;border-top:1px solid #e6e8ea;z-index:15}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:none;cursor:pointer;color:#6b7783;font-size:11px;padding:0;font-family:inherit}
.tab .ti{font-size:20px;line-height:1}
.tab.active{color:var(--clone)}

.pages{position:absolute;top:0;left:0;right:0;bottom:56px;overflow:hidden;background:#eef0f2}
.page{position:absolute;inset:0;display:none;flex-direction:column;background:#eef0f2}
.page.on{display:flex}
.lpane{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.ptitle{padding:12px 16px;font-size:14px;color:#1f2c3a;font-weight:500;
  border-bottom:1px solid #e6e8ea;background:#f4f5f7;flex:none}
.convlist{flex:1;overflow:auto;min-height:0}