/* 05-common.css —— 通用 · 其余规则
   从 web/index.html 拆出（yourcopy v3 · 2026-10-06）。
   拆分原则：**严格保持原始行序**。CSS 后写的赢，重排会悄悄改掉视觉，
   所以这里的规则顺序跟原文件里一模一样，不要按功能重排。

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

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

.dirlist{flex:1;overflow:auto;min-height:0;padding-bottom:8px}

.chatpane{position:absolute;top:0;bottom:56px;left:0;right:0;display:none;flex-direction:column;background:#eef0f2;z-index:6}
.chatpane.open{display:flex}
.chatpane > .view{display:none}
.chatpane > .view.on{flex:1;min-height:0;display:flex;flex-direction:column}
.chatempty{display:flex;align-items:center;justify-content:center;color:#7a8794;flex:1;font-size:13px}
#chatBack{display:flex}

.mecard{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f4f5f7;
  border-bottom:1px solid #e6e8ea;cursor:pointer}
.mecard .av{width:52px;height:52px;font-size:18px}
.meinfo{flex:1;min-width:0}
.meinfo .oname{font-size:15px;color:#1f2c3a;font-weight:500}
.meinfo .ocode{font-size:11px;color:#6b7783;font-family:Consolas,monospace;margin-top:3px;
  word-break:break-all}
.mego{color:#6b7783;font-size:20px}
.memenu{margin-top:10px;background:#f4f5f7}
.mi{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #f3f4f6;
  cursor:pointer;font-size:13.5px;color:#2b3947}
.mi:last-child{border-bottom:none}
.mi:hover{background:#f5f6f8}
.mi-ico{width:22px;text-align:center;flex:none}
.mi-t{flex:1}
.mi-a{color:#6b7783;font-size:16px}
.pend{margin:8px 12px 0;background:#EFF7F3;border:1px solid #1D7A5F;border-radius:9px;padding:10px 12px}

.diritem{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;border-bottom:1px solid #f3f4f6}
.diritem:hover{background:#f3f4f6}
.diritem .av{width:42px;height:42px;font-size:14px}
.dirinfo{flex:1;min-width:0}
.dirname{font-size:13px;color:#1f2c3a;font-weight:500}
.dirname.bot{color:var(--clone)}
.dirsub{font-size:11px;color:#6b7783;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dirgo{color:#6b7783;font-size:18px;flex:none}

#pageMe .clones{display:flex;flex-wrap:wrap;gap:14px;padding:14px 16px}
#pageMe .clabel{display:none}
#pageMe .citem{display:flex;flex-direction:column;align-items:center;width:70px;cursor:pointer}
#pageMe .cav{width:46px;height:46px;font-size:16px;border-radius:50%}
#pageMe .cname{font-size:11px;color:var(--clone);margin-top:5px;text-align:center;max-width:70px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pageMe .ctag{display:block;font-size:9px;color:var(--clone);margin-top:3px;text-align:center}
#pageMe .cadd{width:46px;height:46px;border-radius:50%;border:1px dashed #d8dadc;color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}

/* ===== 桌面分栏（仿微信电脑版）：左好友列表 + 右对话框 + 中间可拖的分隔条 =====
   手机端仍是"整屏切换 + 左上角返回"，分隔条只在电脑端出现。 */
.splitter{display:none}

@media(min-width:860px){
  body{align-items:center;padding:24px}
  .app{max-width:1200px;margin:0 auto;border-radius:12px;--listw:360px}
  .pages{display:block}
  /* 注意：.page/.chatpane/.splitter 的父级是 .pages，而 .pages 自己已经 bottom:56px 让出底部 tab 了。
     这里再写 bottom:56px 就是减两次 —— 列表底部会凭空多出一条 56px 的空带。必须 bottom:0。 */
  .page{position:absolute;top:0;bottom:0;left:0;width:var(--listw);display:none}
  .page.on{display:flex}
  /* 单击会话：好友列表不动，右侧出现对话框（宽度跟着分隔条走） */
  .app.hasChat .chatpane{display:flex;position:absolute;top:0;bottom:0;left:var(--listw);right:0;z-index:6}
  .app.lens.hasChat .chatpane{top:46px}
  .app.lens:not(.hasChat) .page.on{top:46px}
  .app:not(.hasChat) .chatpane{display:none}
  .app:not(.hasChat) .page.on{left:0;right:0;width:auto}
  .app:not(.hasChat) #pageMe.on{width:100%;max-width:760px;margin:0 auto}
  /* 分隔条：鼠标移到两栏交界处出现 ↔ 缩放光标，按住可左右拖 */
  .app.hasChat .splitter{display:block;position:absolute;top:0;bottom:0;
    left:calc(var(--listw) - 4px);width:9px;z-index:9;cursor:col-resize;background:transparent}
  .app.lens.hasChat .splitter{top:46px}
  .app.hasChat .splitter::after{content:'';position:absolute;top:0;bottom:0;left:4px;width:1px;background:#e6e8ea}
  .app.hasChat .splitter:hover,.app.dragging .splitter{background:rgba(196,30,58,.12)}
  .app.hasChat .splitter:hover::after,.app.dragging .splitter::after{background:var(--brand);width:2px}
  /* 往左拖到极窄 → 好友列表整个收起，对话框接管列表的位置；左上角箭头把列表叫回来 */
  .app.chatfull .page{display:none}
  .app.chatfull .chatpane{left:0}
  .app.chatfull .splitter{left:-4px}
  .app.dragging{cursor:col-resize}
  .app.dragging *{user-select:none !important}
  #chatBack{display:none}
  .app.chatfull #chatBack{display:flex}
}

/* ===== 独立聊天窗模式（电脑端双击会话弹出的小窗口）：整窗只放这一路会话 ===== */
body.winmode{align-items:stretch;padding:0;background:#eef0f2}
body.winmode .offbar,body.winmode .bar,body.winmode .tabbar{display:none}
body.winmode .app{max-width:none;margin:0;border-radius:0;height:100%}
/* 🔴 #chatPane 是 .pages 的子节点（不是 #app 直属）—— 千万不要 hidden 掉 .pages，
   那会把聊天窗一起藏掉，整个弹出窗口变成一片空白。要藏只能藏 .page 那几块列表。 */
body.winmode .pages{display:block;top:0;bottom:0}
body.winmode .page{display:none !important}
body.winmode .chatpane{display:flex !important;top:0;bottom:0;left:0;right:0}
body.winmode .splitter{display:none !important}
body.winmode #chatBack{display:none}
/* 窗口窄，把留白收紧一点，别把输入框挤没 */
body.winmode .mhead{padding:12px 14px}
body.winmode .msgs{padding:16px 14px}
body.winmode .inp{padding:10px 12px;gap:8px}
/* ===== P0：分身视角（lens）===== */
.lensbar{position:absolute;top:0;left:0;right:0;height:46px;display:none;align-items:center;gap:10px;
  padding:0 12px;background:#f7efe6;border-bottom:1px solid var(--clone);z-index:20}
.app.lens .lensbar{display:flex}
.lbav{width:30px;height:30px;border-radius:50%;background:var(--clone);color:#f7efe6;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;flex:none}
.lbtxt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.lbname{color:var(--clone);font-weight:600;font-size:14px}
.lbsub{color:#B8A98A;font-size:11px}
.lbexit{margin-left:auto;background:var(--clone);color:#f7efe6;border:none;border-radius:6px;
  padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:600;flex:none}
.app.lens .pages{top:46px}
.app.lens .chatpane{top:46px}
#cloneMe .lpane, #cloneMe{padding:0}
.cmpad{padding:12px 14px;overflow:auto;flex:1;min-height:0}
.cmhead{display:flex;align-items:center;gap:12px;padding:14px;background:#f4f5f7;border-bottom:1px solid #e6e8ea}
.cmav{width:48px;height:48px;border-radius:50%;background:var(--clone);color:#f7efe6;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:18px;flex:none}
.cmname{color:var(--clone);font-weight:600;font-size:17px}
.cmsub{color:#5f6b76;font-size:12px}
.cmblk{margin:12px 14px;background:#f4f5f7;border:1px solid #e6e8ea;border-radius:10px;overflow:hidden}
.cmblk .cmh{padding:10px 14px;font-size:13px;color:#1f2c3a;border-bottom:1px solid #e6e8ea;font-weight:500}
.cmrow{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid #f4f5f7}
.cmrow:last-child{border-bottom:none}
.cmk{width:84px;flex:none;color:#5f6b76;font-size:12px;padding-top:2px}
.cmv{color:#1f2c3a;font-size:13px;word-break:break-all;flex:1;min-width:0}
.cmv.empty{color:#788795}
.cmselect{width:100%;background:#eef0f2;color:#1f2c3a;border:1px solid #e6e8ea;border-radius:6px;
  padding:6px 8px;font-size:13px;font-family:inherit}
.cmtag{display:inline-block;background:#f3f4f6;color:#2b3947;border-radius:5px;padding:3px 8px;font-size:12px;margin:2px 4px 2px 0}
.cmnote{margin:12px 14px;color:#6b7783;font-size:12px;line-height:1.5}
/* ===== 身份切换：分身头像 + 主人头像（点主人头像回主人） ===== */
.lbowner{width:30px;height:30px;font-size:12px;cursor:pointer;flex:none;
  box-shadow:0 0 0 2px #eef0f2,0 0 0 3.5px var(--brand);transition:transform .12s}
.lbowner:hover{transform:scale(1.08)}

/* ===== YOURCOPY 入口（聊天窗右上角 · 黑色人形剪影）=====
   纯黑剪影放在深色底上等于看不见，所以这里做成浅色"角色选择"牌子 ——
   黑剪影才立得住，也更像游戏里选人那个按钮。 */
.ycentry{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 9px 2px 2px;
  border-radius:16px;background:transparent;border:none;transition:.15s;flex:none;color:#1f2c3a}
.ycentry:hover{background:#f3f4f6}
.ycring{display:inline-block;width:30px;height:30px;border-radius:50%;padding:2px;
  background:conic-gradient(var(--brand) 0% 25%,var(--clone) 25% 50%,#4cb050 50% 75%,#3a7bd5 75% 100%);
  animation:ycSpin 3s linear infinite;flex:none}
.ycimg{display:block;width:100%;height:100%;border-radius:50%;background-color:#f4f5f7;
  background-size:cover;background-position:center}
.ycname{font-size:11px;letter-spacing:.6px;color:#1f2c3a;font-weight:600}
@keyframes ycSpin{to{transform:rotate(360deg)}}
.ycring:hover{animation-play-state:paused}
.app.lens .ycentry{display:none}

/* ===== 分身列表（QQ 式：一行一个）===== */
.rosterlist{flex:1;overflow-y:auto;padding:4px 0}
.rrow{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid #f5f6f8}
.rrow:hover{background:#f4f5f7}
.rrow .rav{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:15px;color:#fff;flex:none;
  background-size:cover;background-position:center}
.rrow .rbody{flex:1;min-width:0}
.rrow .rtop{display:flex;align-items:center;gap:6px}
.rrow .rname{font-size:14px;color:#1f2c3a;font-weight:600}
.rrow .rprev{font-size:12px;color:#6b7783;margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rrow .rgo{color:#828b95;font-size:17px;flex:none}
.rempty{padding:34px 20px;text-align:center;color:#7a8794;font-size:13px;line-height:1.7}

/* ── 独立应用窗口模式（--app / 已安装为应用）────────────────────────
   窗口本身就是外壳，所以把卡片铺满整窗：不留外边距、圆角、阴影。
   由 body 上的 .appwin 触发（见 body 后那段小脚本）。 */
body.appwin{padding:0;background:#ffffff;overflow:hidden}
body.appwin .app{width:100vw;height:100vh;max-width:none;margin:0;border-radius:0;border:none;box-shadow:none}

/* ── 登录门禁（登录 / 注册 / 找回密码）─────────────────────────────
   默认就显示，认过身份（body.authed）才让开。
   为什么不是"先看控制台、再弹登录框"：那样数据已经请求出去了，
   等于门是开着的，只是外面挂了块布。 */
#authWrap{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#eef1f5 0%,#e4e9ef 45%,#dfe6ee 100%);padding:20px;overflow:auto}
body.authed #authWrap{display:none}
/* 卡片上方一盏柔光，让大片背景不是死板的灰。纯色 #f5f6f8 在宽屏下显得空，
   加一层极淡的品牌色光晕 + 更深的下缘，看起来像"有地方放东西"而不是"没加载出来"。 */
#authWrap::before{content:'';position:fixed;left:50%;top:6%;width:min(720px,90vw);height:min(560px,70vh);
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(196,30,58,.09) 0%,rgba(196,30,58,0) 70%)}
.authcard{position:relative;width:100%;max-width:376px;background:#ffffff;border-radius:18px;
  box-shadow:0 1px 2px rgba(20,30,50,.04),0 12px 32px rgba(20,30,50,.09),0 32px 64px rgba(20,30,50,.06);
  padding:32px 30px 24px;box-sizing:border-box}
.authlogo{width:54px;height:54px;border-radius:16px;margin:0 auto 15px;
  background:linear-gradient(140deg,var(--brand-2),var(--brand) 55%,var(--brand-hover));display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(196,30,58,.26)}
.authlogo svg{width:29px;height:29px;display:block}
.authtitle{font-size:19px;font-weight:600;color:#1f2c3a;text-align:center;letter-spacing:.3px}
.authtitle,.authsub{transition:opacity .16s}
.authform{margin-top:22px}

/* ---------- 一键续登卡片 ---------- */
.aquick{margin-top:22px}
.aqcard{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;
  border:1px solid #e6e8ea;background:#fafbfc;cursor:pointer;text-align:left;font-family:inherit;
  transition:.15s;color:inherit}
.aqcard:hover{border-color:var(--brand);background:#fdf7f8}
.aqcard:active{transform:scale(.995)}
.aqav{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;letter-spacing:.5px;line-height:1;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:#fff}
.aqav svg{width:24px;height:24px;display:block}
.aqav img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.aqtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.aqname{font-size:15px;color:#1f2c3a;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===== 网站访客线索卡（2026-10-06）=====
   放在"等你拍板"那个区下面，视觉上属于同一类：有价值、需要你看一眼。
   配色全用 :root 变量，跟随主题走（换主题只改 01-base.css 的 :root）。 */
.wltop{font-size:12px;white-space:nowrap;overflow:hidden;color:#1D7A5F;font-weight:600;padding:9px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap}
/* 标题被挤成两行是因为「网站访客 · 23 个」和「点击看详情」抢宽度。
   左边的数字用 tabular-nums 固定宽度，右侧提示允许收缩并右对齐。 */
.wltop>span:first-child{flex:none}
.wltop em{flex:none;margin-left:auto}
.wltop em{font-style:normal;font-size:11.5px;color:#7a8794;font-weight:400}
.wlcard{background:#fff;border:1px solid #e6e8ea;border-radius:9px;
  padding:10px 12px;margin-bottom:7px;cursor:pointer;transition:.13s}
.wlcard:hover{border-color:#1D7A5F;box-shadow:0 2px 10px rgba(29,122,95,.10)}
.wlrow1{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.wlbadge{font-size:10.5px;padding:1.5px 6px;border-radius:4px;flex:none;font-weight:500}
.wlbadge.high{background:#1D7A5F;color:#fff}
.wlbadge.mid{background:#EFF7F3;color:#1D7A5F;border:1px solid #CFE3DA}
.wlname{font-size:13px;color:#1f2c3a;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlstate{font-size:11px;color:#7a8794;flex:none}
.wlprod{font-size:12px;color:#1D7A5F;background:#EFF7F3;border-radius:5px;
  padding:3px 7px;margin-bottom:4px;display:inline-block;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlc{font-size:12px;color:#5a6b78;margin-bottom:3px;line-height:1.5;
  word-break:break-all}
.wlr{font-size:11.5px;color:#9aa4ae;line-height:1.5}

/* 详情弹窗里的字段 */
.wlkv{font-size:13px;color:#2b3947;line-height:1.7;background:#f7f9fa;
  border:1px solid #eef0f2;border-radius:7px;padding:9px 11px;word-break:break-all}
.mhead{font-size:15px;font-weight:600;color:#1f2c3a;padding:16px 18px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #eef0f2}
.mhead .mx{cursor:pointer;font-size:20px;color:#9aa4ae;line-height:1}
.mhead .mx:hover{color:#1f2c3a}