/* 03-chat.css —— 聊天窗 · 气泡/输入区/语音
   从 web/index.html 拆出（yourcopy v3 · 2026-10-06）。
   拆分原则：**严格保持原始行序**。CSS 后写的赢，重排会悄悄改掉视觉，
   所以这里的规则顺序跟原文件里一模一样，不要按功能重排。

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

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

.row.out .vbub{background:#95EC69;color:#1f2c3a;border-top-right-radius:3px}
.vbub .vi{width:26px;height:26px;border-radius:50%;background:rgba(31,44,58,.09);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:10px;color:#1f2c3a}
.vbub.playing .vi{background:var(--brand);color:#fff}
.vbub .vb{flex:1;height:20px;display:flex;align-items:center;gap:2px;overflow:hidden}
.vbub .vb i{width:3px;background:#8b9aa6;border-radius:2px;flex:none;height:4px}
.vbub.playing .vb i{background:#2f7d4f}
.vbub .vd{font-family:Consolas,monospace;font-size:11.5px;opacity:.65;flex:none}
/* 未下载的语音：点一下会去中继取回来，这时要给个可点的样子 */
.vbub.pending{opacity:.72}
.vbub.pending .vd{color:#8A6420;opacity:1}
.vbub .spin{width:12px;height:12px;border:1.5px solid rgba(31,44,58,.2);border-top-color:var(--brand);
  border-radius:50%;flex:none;animation:trsp .7s linear infinite}
.vfail{font-size:10.5px;color:var(--brand);margin-top:4px}

/* ---------- 工作目录 / 素材库 ---------- */
.wpath{font-size:11px;color:#6b7783;background:#ffffff;border:1px solid #f3f4f6;border-radius:6px;
  padding:7px 10px;margin-bottom:10px;word-break:break-all;font-family:Consolas,monospace}
.wtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.wtab{font-size:11px;padding:4px 10px;border-radius:20px;background:#f5f6f8;color:#5f6b76;cursor:pointer;border:1px solid transparent}
.wtab:hover{color:#1f2c3a}
.wtab.on{background:#f7efe2;color:var(--clone);border-color:#5a3c17}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;
  max-height:46vh;overflow-y:auto;padding-right:4px}
.witem{background:#ffffff;border:1px solid #f3f4f6;border-radius:8px;overflow:hidden;cursor:pointer;position:relative}
.witem:hover{border-color:#e4e6e8}
.witem.sel{border-color:var(--clone);box-shadow:0 0 0 1px var(--clone) inset}
.wimg{width:100%;height:72px;object-fit:cover;display:block;background:#eef0f2}
.wico{height:72px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#6b7783;background:#eef0f2}
.wname{font-size:10px;color:#5a6b78;padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsize{font-size:9px;color:#7a8794;padding:0 6px 5px}
.wtick{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;
  background:var(--clone);color:#ffffff;font-size:11px;display:none;align-items:center;justify-content:center}
.witem.sel .wtick{display:flex}
.wempty{grid-column:1/-1;text-align:center;color:#7a8794;font-size:12px;padding:26px 0}
.fslist{max-height:44vh;overflow-y:auto;border:1px solid #f3f4f6;border-radius:8px;background:#ffffff}
.fsdir{padding:9px 12px;font-size:12px;color:#2b3947;cursor:pointer;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px}
.fsdir:hover{background:#f5f6f8;color:var(--clone)}
.fsdir:last-child{border-bottom:none}
.wnote{font-size:11px;color:#7a8794;margin-top:8px;line-height:1.6}
.wrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wrow .fin{flex:1;min-width:200px}

.prof{position:absolute;inset:0;background:#ffffff;transform:translateX(100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;z-index:20}
.prof.show{transform:translateX(0)}
.phead{padding:12px 14px;border-bottom:1px solid #e6e8ea;display:flex;align-items:center;gap:10px}
.ptitle{font-size:14px;color:#1f2c3a;font-weight:500}
.pbody{flex:1;overflow:auto;padding:20px 18px}
.pbig{width:76px;height:76px;font-size:26px;margin:0 auto 10px;background:var(--brand)}
.pnick{font-size:16px;color:#1f2c3a;text-align:center;font-weight:500}
.pnick.bot{color:var(--clone)}
.psig{font-size:12px;color:#5f6b76;text-align:center;margin-top:6px;line-height:1.6}
.pai{font-size:10px;text-align:center;margin-top:3px;letter-spacing:.4px;color:#7a8794}
.pai b{color:#5f6b76;font-weight:400}
.psec{margin-top:20px}
.psec h4{font-size:10.5px;color:#6b7783;letter-spacing:.7px;font-weight:500;margin-bottom:9px}
.pcard{background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:11px 13px}
.pcard.code{border-color:var(--brand);background:#f7eef0}
.codeline{display:flex;align-items:center;gap:10px}
.codeval{flex:1;font-family:Consolas,monospace;font-size:14px;color:#1f2c3a;letter-spacing:1px;word-break:break-all}
.codehint{font-size:10.5px;color:#5f6b76;margin-top:8px;line-height:1.6}
.qr{width:52px;height:52px;flex:none;background:#fff;border-radius:5px;padding:4px;display:grid;
  grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:0}
.qr i{background:#fff}
.qr i.f{background:#111}
.copybtn{background:var(--brand);color:#fff;border:none;border-radius:5px;padding:5px 11px;font-size:11px;cursor:pointer}
.prow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:12.5px;line-height:1.6}
.prow+.prow{border-top:1px solid #e9eaec}
.pk{color:#6b7783;flex:none}
.pv{color:#2b3947;text-align:right;word-break:break-all}
.pv.ora{color:var(--clone)}
.trust{display:flex;gap:5px;margin-top:6px}
.tseg{flex:1;height:4px;border-radius:2px;background:#e6e8ea}
.tseg.on{background:var(--clone)}
.disclose{font-size:10.5px;color:#6b7783;line-height:1.7;margin-top:10px;padding-top:9px;border-top:1px solid #e9eaec}

.modal{position:absolute;inset:0;background:rgba(8,10,12,.78);z-index:60;display:none;
  align-items:center;justify-content:center}
.modal.show{display:flex}
.mbox{width:420px;background:#ffffff;border:1px solid #e6e8ea;border-radius:11px;padding:18px;
  max-height:80%;display:flex;flex-direction:column}
.mtitle{font-size:14px;color:#1f2c3a;font-weight:500;margin-bottom:13px}
.mlist{flex:1;overflow:auto;margin-bottom:12px}
.peer{display:flex;align-items:center;gap:11px;padding:10px 12px;background:#ffffff;
  border:1px solid #e6e8ea;border-radius:8px;margin-bottom:8px}
.pinfo{flex:1;min-width:0}
.pname{font-size:12.5px;color:#1f2c3a}
.pname.bot{color:var(--clone)}
.pmeta{font-size:10.5px;color:#6b7783;margin-top:2px;font-family:Consolas,monospace}
.mfield{width:100%;background:#ffffff;border:1px solid #e6e8ea;border-radius:8px;padding:10px 14px;
  font-size:13px;color:#1f2c3a;outline:none;margin-bottom:12px}
.mfield:focus{border-color:var(--brand)}
.mact{display:flex;justify-content:flex-end;gap:8px}
.hint{font-size:11px;color:#6b7783;line-height:1.7;margin-bottom:12px}

.sh{display:flex;flex-direction:column;height:100%}
.shead{padding:14px 26px;border-bottom:1px solid #e6e8ea;display:flex;align-items:center;gap:12px;flex:none}
.sbody{flex:1;overflow:auto;padding:22px 26px 30px}
.blk{margin-bottom:26px}
.bhead{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.btitle{font-size:13px;color:#1f2c3a;font-weight:500}
.bcount{font-size:10px;color:#6b7783;background:#e9eaec;padding:2px 7px;border-radius:9px}
.bdesc{font-size:11px;color:#6b7783;line-height:1.6;margin-bottom:12px}
.shelf{display:flex;gap:14px;flex-wrap:wrap}
.book{width:66px;cursor:pointer}
.cover{width:66px;height:88px;border-radius:3px 5px 5px 3px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;padding:9px 8px 8px 13px;box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.cover:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(0,0,0,.28)}
.cover:after{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.bico{font-size:15px;color:#fff;opacity:.92;line-height:1}
.bname{font-size:10px;color:#fff;margin-top:auto;line-height:1.4;opacity:.95;word-break:break-all}
.bsub{font-size:8px;color:rgba(255,255,255,.6);margin-top:2px;line-height:1.3;word-break:break-all}
.bcap{font-size:10px;color:#5f6b76;margin-top:6px;text-align:center;line-height:1.35}
.bcap.own{color:var(--clone)}
.book.unmounted .cover{opacity:.4}
.book.add .cover{border:1px dashed #d8dadc;background:transparent;box-shadow:none;
  align-items:center;justify-content:center;color:var(--brand);font-size:20px}
.book.add .cover:before,.book.add .cover:after{display:none}
.todo{border:1px dashed #d8dadc;border-radius:8px;padding:16px;text-align:center;
  font-size:11.5px;color:#6b7783;line-height:1.8}
.todo b{color:var(--clone);font-weight:500}

.bar{width:1180px;display:flex;gap:14px;align-items:center;font-size:11.5px;color:#6b7783;line-height:1.7}
.bar b{color:#5a6b78;font-weight:500}