/* ============================================================================
   设计层（2026-10-24）
   ----------------------------------------------------------------------------
   为什么单独一个文件：style.css 里已经有一套骨架，全量重写会把功能改坏。
   这一层只做"好看 + 好用"，并且**所有颜色都走变量**，所以：
     · 换 away 皮肤 → 整套跟着变（theme.js 往 :root 写 --p/--bg/--card/--bd…）
     · 切深色 → 同一批变量换值，这里一行不用改
   写死的颜色只允许出现在"跟主题无关"的地方（阴影透明度、遮罩黑）。

   设计口径：
     ① 不要一片纯白。底色带主色极浅染色，卡片才用纯白 → 层次来自"底色 vs 卡片"
     ② 主色只出现在"该出声"的地方：选中态、点击态、发送键、焦点环
     ③ 圆角统一 12/16/20 三档；阴影只做三层，且都带主色相
     ④ 移动端不是缩小版：左栏变抽屉、右栏变整页、输入区贴底
   ========================================================================== */

/* ---------------------------------------------------------------- 基础基调 */
:root{
  --on-p:#fff;
  --accent:var(--p);
  --ring:0 0 0 3px var(--p-soft);
  --r-xs:8px; --r-md:12px; --r-xl:18px;
  /* 栏间分隔线（用户 2026-10-26：「左侧和中间、中间和右侧需要增加一个间隔标识」）。
     不能用 --bd / --bd2 —— 那两个接近白，浅色下三栏读起来是一张白纸。
     按正文灰调深一档，浅色 46%、深色 52%（26% 试过，看不见）。 */
  --sep:color-mix(in srgb, var(--t3) 46%, var(--bd));
}
html[data-theme="dark"]{ --sep:color-mix(in srgb, var(--t3) 52%, var(--bd)); }

html,body{height:100%}
body{
  background:
    radial-gradient(1200px 520px at 8% -10%, var(--p-soft), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, var(--p-soft2), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  letter-spacing:.008em;
}

/* 顶栏 / 侧栏这类"结构件"用细一点的描边，视觉更干净 */
/* 三块的关系：侧栏（最浅、贴顶栏）→ 画布（染色）→ 卡片/气泡（纯白）。
   原来 main 直接铺 var(--card)，整屏就只剩白色了 —— 这是"全是白色"的根。 */
/* 左栏右沿：用 --sep（跟顶栏左段右沿同一条色），三段式才有一条贯通的缝。
   层级提到 21，压过顶栏的 20 —— 数字人像要往顶栏那一行里画，不然会被顶栏盖住。 */
.side{border-right:1px solid var(--sep);background:var(--sidebar);position:relative;z-index:21;
  grid-row:2}

/* 主区也在第 2 行（列由自动排布给：左栏固定后它就是第 2 列）。
   不写死 grid-column，是因为手机上栅格只剩一列，写死第 2 列会凭空多出一列。 */
.main{grid-row:2}
.main{background:var(--bg)}
/* ---------------------------------------------------------------- 顶栏：横贯三栏
   2026-10-26 落地原型 A。三件事一起做，少一件都不成立：
     ① 顶栏从 .main 里搬出来，成为 .app 的第一行、横跨整幅宽度 ——
        否则左栏上面永远空着一块，跟中栏看着是脱节的（用户第一次提的就是这个）；
     ② 顶栏自己分成三段，宽度跟下面三栏一一对应（292 / 1fr / --pw），
        于是「品牌压在左栏上、当前智能体贴着中栏右边界、图标在右栏宽度内等分」
        是布局算出来的，不是靠 padding 凑的；
     ③ 底色换成当期皮肤的渐变 —— 主色 14% 起，往右退到纯卡片色，到图标区再回一丝。
        浅色 14/6/4，深色 30/14/10：深底上按浅色那套比例几乎看不出来，等于白做，
        所以两套主题必须各给一组，不能共用。 */
.top{
  display:grid;
  /* 必须显式跨满整幅宽度 + 占第 1 行：只写 grid 模板的话它是"第 1 行第 1 列"的
     一个普通格子，左栏会被挤到第 2 列去（整屏就散了）。 */
  grid-column:1/-1;grid-row:1;
  grid-template-columns:292px minmax(0,1fr) var(--pw,300px);
  height:54px;padding:0;gap:0;
  background:linear-gradient(102deg,
    color-mix(in srgb, var(--p) 14%, var(--card)) 0,
    color-mix(in srgb, var(--p) 6%, var(--card)) 24%,
    var(--card) 50%,
    color-mix(in srgb, var(--p) 4%, var(--card)) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--p) 15%, var(--sep));
  position:relative;z-index:20;
}
html[data-theme="dark"] .top{
  background:linear-gradient(102deg,
    color-mix(in srgb, var(--p) 30%, var(--card)) 0,
    color-mix(in srgb, var(--p) 14%, var(--card)) 26%,
    color-mix(in srgb, var(--p) 3%, var(--card)) 56%,
    color-mix(in srgb, var(--p) 10%, var(--card)) 100%);
}
/* 右栏收起时没有第三段，图标组收到右边自己那一格，不再留一条空列 */
.app:not(.withpanel) .top{grid-template-columns:292px minmax(0,1fr) auto}

/* 三段：竖线用的是同一个 --sep，跟 .side / .panel 的边一条色，
   三条线才像"一堵墙上的两道缝"，从 y=0 贯到底。 */
.hd-l{
  height:100%;min-width:0;display:flex;align-items:center;gap:9px;padding:0 14px;
  border-right:1px solid var(--sep);
}
.hd-logo{width:27px;height:27px;border-radius:9px;flex:0 0 auto;display:block}
.hd-bn{min-width:0;font-size:14px;font-weight:650;letter-spacing:.2px;line-height:1.14;white-space:nowrap}
.hd-bn small{
  display:block;font-size:10.5px;font-weight:400;color:var(--t3);letter-spacing:.25px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 「个人皮肤把单位皮肤盖掉了」的提醒胶囊：只在两者不一致时出现，
   平时不占位（display:none），点了就跟随单位那套。 */
.skin-tip{
  height:23px;padding:0 10px;border-radius:12px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--p-bd);background:var(--p-soft);color:var(--p);
  font-size:11px;font-weight:600;white-space:nowrap;transition:.13s;
}
.skin-tip:hover{background:var(--p);border-color:var(--p);color:var(--on-p,#fff)}
.skin-tip b{font-weight:700}
.hd-m{
  height:100%;min-width:0;display:flex;align-items:center;gap:8px;padding:0 14px;
}
.hd-r{
  height:100%;min-width:0;display:flex;align-items:center;justify-content:space-evenly;padding:0 6px;
  border-left:1px solid var(--sep);
}
/* 右栏收起时这一格还在（通知/语音/主题/入口都在里面），只是不再有那条竖线 */
.app:not(.withpanel) .hd-r{border-left:none}

/* 图标组：均匀排开，没有格子、没有底色块
   （用户 2026-10-26：「不要周围的框框，要看起来舒服一些」。
    原来 flex:1 均分 + 格间竖线 + hover 灰底，读起来像一排按钮格子。） */
.hd-r .iconbtn{
  /* 不写 display: 这里只改尺寸和手感 —— 一旦写成 display:grid，
     就会盖掉后面 .pnlbtn{display:none}（选择器权重更高），手机上那颗入口键
     会跑到桌面顶栏里来。 */
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;color:var(--t2);
  transition:color .16s, transform .16s, background .16s;
}
.hd-r .iconbtn:hover{color:var(--p);transform:translateY(-1px);background:transparent}
.stage{background:transparent}

/* 品牌块：原来写死 #5AA0FF，深色皮肤下会跳出一块亮蓝 */
.logo{background:linear-gradient(140deg,var(--p),var(--accent));box-shadow:0 4px 12px color-mix(in srgb, var(--p) 34%, transparent)}
.aimark{background:linear-gradient(140deg,var(--p),var(--accent));box-shadow:0 2px 8px color-mix(in srgb, var(--p) 28%, transparent)}
.newbtn{background:linear-gradient(135deg,var(--p),color-mix(in srgb, var(--p) 74%, var(--accent)));box-shadow:0 6px 16px color-mix(in srgb, var(--p) 30%, transparent)}
.newbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ---------------------------------------------------------------- 左栏 */
.brand{padding:16px 14px 12px}
.bname{font-size:13.5px;letter-spacing:.3px}
.bname small{font-size:10px;color:var(--t3)}

/* 三个 tab 做成"胶囊分段"，选中态用主色染，比原来纯文字下划更清楚 */
.stitabs{
  display:flex;gap:3px;margin:0 12px 10px;padding:3px;
  background:var(--bd2);border-radius:10px;
}
.stitab{
  flex:1;height:28px;border-radius:8px;font-size:12.5px;color:var(--t2);
  display:flex;align-items:center;justify-content:center;gap:4px;transition:.14s;
}
.stitab:hover{color:var(--t1)}
.stitab.on{background:var(--card);color:var(--p);font-weight:600;box-shadow:var(--sh)}
.stitab .n{margin-left:2px}

.item{border-radius:9px;padding:9px 10px}
.item:hover{background:color-mix(in srgb, var(--p) 6%, transparent)}
.item.on{background:var(--p-soft);box-shadow:inset 2px 0 0 var(--p)}
.item.on .ititle{color:var(--p-strong)}
.ititle{font-size:12.8px}
.isub{font-size:11px;color:var(--t3)}
.gtitle{font-size:10.5px;letter-spacing:.6px;text-transform:none;color:var(--t3);padding:12px 8px 5px}

.sfoot{background:color-mix(in srgb, var(--card) 55%, transparent);border-top:1px solid var(--bd2)}
.ava{background:linear-gradient(140deg,var(--p),var(--accent));color:var(--on-p);box-shadow:0 2px 8px color-mix(in srgb, var(--p) 28%, transparent)}

/* ---------------------------------------------------------------- 顶栏 */
/* 顶栏的尺寸与内边距统一在上面那段 .top 里定（三段网格），这里不再给 height/padding */
.ttitle{font-size:14px;font-weight:600}
.ttitle span{letter-spacing:.01em}
.iconbtn{color:var(--t3)}
.iconbtn:hover{background:var(--bd2);color:var(--t1)}
/* 右栏顶部（.hd-r）那几颗另算：只在字形上给反馈，不铺底色块 —— 见上面 .hd-r .iconbtn */
.tbtn{border-color:var(--bd);color:var(--t2);height:30px;font-size:12.5px;border-radius:9px}
.tbtn:hover{border-color:var(--p);color:var(--p)}

/* 顶栏那个"本次由谁接"：改成带主色的胶囊，一眼看到现在是谁在答 */
.agent-bar{display:flex;align-items:center;gap:8px;min-width:0}
.ab-who{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 4px;
  border-radius:999px;background:var(--p-soft);color:var(--p-strong);
  font-size:12px;font-weight:600;border:1px solid var(--p-bd);
}
.ab-ico{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:var(--p);color:var(--on-p);font-size:10.5px;font-style:normal;font-weight:700;
}
.ab-why{font-size:11px;color:var(--t3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .ab-more（顶部「换一个」按钮）2026-10-28 随按钮一起删掉 */

/* ---------------------------------------------------------------- 消息区 */
.msgs{padding:18px 0 6px}
.md, .msgs{font-size:14px}
.urow{justify-content:flex-end}
.ubub{
  max-width:min(78%,640px);
  background:linear-gradient(140deg,var(--p-soft),color-mix(in srgb,var(--p-soft) 70%,var(--card)));
  border:1px solid var(--p-bd);color:var(--t1);
  padding:10px 14px;border-radius:16px 16px 5px 16px;
  box-shadow:0 2px 10px color-mix(in srgb,var(--p) 8%,transparent);
}
.aihead{margin-bottom:6px}
.ainame{font-size:12px;color:var(--t2);letter-spacing:.02em}
.abadge{font-size:10px;padding:1px 6px;border-radius:5px;background:var(--ok-soft);color:var(--ok)}
.aibody{padding-left:32px}
.md h4{margin:18px 0 8px;font-size:13.5px}
.md p{line-height:1.72}
.md code{background:var(--bd2);border:1px solid var(--bd);padding:0 5px;border-radius:5px}

/* 表格别铺满整行白：加描边 + 表头染色，长表格看起来才不糊 */
.md table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.md thead th{background:var(--p-soft2);color:var(--t2);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--bd)}
.md tbody td{padding:7px 10px;border-bottom:1px solid var(--bd2)}
.md tbody tr:last-child td{border-bottom:none}
.md tbody tr:hover td{background:var(--p-soft2)}

/* 工作台卡片 */
.wb{background:linear-gradient(180deg,var(--p-soft2),transparent);border-bottom:1px solid var(--bd2)}
.wbcard{background:var(--card);border:1px solid var(--bd);border-radius:11px;box-shadow:var(--sh)}
.wbcard:hover{border-color:var(--p);box-shadow:var(--sh-md);transform:translateY(-1px)}
.wbi{background:var(--p-soft);color:var(--p-strong)}

/* ---------------------------------------------------------------- 输入区 */
.composer{padding:8px 0 14px;background:transparent}
.composer::before{
  background:linear-gradient(180deg,transparent,var(--bg) 55%);
}
.box{
  border:1px solid var(--bd);border-radius:18px;background:var(--card);
  box-shadow:var(--sh-md);transition:border-color .15s, box-shadow .15s;
}
.box.focus{border-color:var(--p);box-shadow:var(--ring),var(--sh-md)}
.box textarea{padding:13px 15px 2px;font-size:14px;min-height:54px}
.cbar{padding:2px 8px 8px;gap:2px}
.cbar .icobtn{width:30px;height:30px;border-radius:8px;color:var(--t3)}
.cbar .icobtn:hover{background:var(--bd2);color:var(--p)}
.mbtn{height:28px;border-radius:8px;padding:0 8px;font-size:11.5px;color:var(--t2);display:flex;align-items:center;gap:5px}
.mbtn:hover{background:var(--bd2)}
.send{
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(140deg,var(--p),color-mix(in srgb,var(--p) 76%,var(--accent)));
  color:var(--on-p);box-shadow:0 4px 12px color-mix(in srgb,var(--p) 32%,transparent);
}
.send:hover{filter:brightness(1.07)}
/* 语音转好之后把发送键"叫一下"：让人知道下一步就是按它 */
.send.ready{animation:sendReady 1.5s ease-in-out 3}
@keyframes sendReady{
  0%,100%{box-shadow:0 4px 12px color-mix(in srgb,var(--p) 32%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--p) 18%,transparent),0 4px 12px color-mix(in srgb,var(--p) 40%,transparent)}
}
.tip{font-size:10.5px;color:var(--t3);text-align:center;padding-top:7px}
.tip kbd{background:var(--bd2);border:1px solid var(--bd);border-radius:4px;padding:0 4px;font-size:10px;font-family:inherit}

/* ---------------------------------------------------------------- 当前智能体常驻条 */
/* 2026-10-28 整段删除（.agentstick / .as-ico / .as-tx / .as-btn / .as-x）：
   输入框上方那条「XX 在接这个对话 / 换人 / ×」用户要求去掉，同一信息顶部已有。
   如果以后要加回来，样式记得一起捡：这几条是配套的。 */

/* ---------------------------------------------------------------- 语音状态条（窄） */
.recp{
  display:none;align-items:center;gap:8px;
  margin:0 0 8px;padding:7px 10px;
  border:1px solid var(--p-bd);border-radius:12px;
  background:var(--card);box-shadow:var(--sh);
}
.recp.on{display:flex}
.recp.busy{border-color:var(--bd)}
.recp .recdot{width:8px;height:8px;border-radius:50%;background:var(--err);flex:0 0 auto;animation:recBlink 1.1s infinite}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.25}}
.recp .rectxt{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap}
.recp .rectime{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.recp .recwave{flex:0 0 120px;height:20px;display:flex;align-items:center;gap:1.5px;overflow:hidden}
.recp .recwave i{flex:1;background:var(--p);opacity:.55;border-radius:2px;height:100%;transform-origin:center}
.recp .recgap{flex:1}
.recp .reclive{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
.recp .recbtn{height:26px;padding:0 11px;border-radius:8px;font-size:11.5px;white-space:nowrap}
.recp .recbtn.ghost{color:var(--t2);border:1px solid var(--bd)}
.recp .recbtn.ghost:hover{background:var(--bd2)}
.recp .recbtn.pri{background:var(--p);color:var(--on-p)}
.recp .recbtn.pri:hover{filter:brightness(1.07)}
.recp .recbtn:disabled{opacity:.5}

/* ---------------------------------------------------------------- IM 输入框（微信式） */
.imp-in{padding:10px 14px 12px;display:block}
.imp-field{
  border:1px solid var(--bd);border-radius:16px;background:var(--card);
  box-shadow:var(--sh);transition:border-color .15s,box-shadow .15s;
  overflow:hidden;
}
.imp-field:focus-within{border-color:var(--p);box-shadow:var(--ring),var(--sh-md)}
.imp-field textarea{
  width:100%;border:none;outline:none;background:transparent;resize:none;
  padding:10px 13px 2px;font-size:13.5px;line-height:1.6;min-height:44px;max-height:150px;
}
.imp-tools{display:flex;align-items:center;gap:2px;padding:2px 8px 8px}
.imp-hintk{font-size:10.5px;color:var(--t3);margin-right:6px;white-space:nowrap}
.imp-ib{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--t3);font-size:15px;line-height:1;
}
.imp-ib:hover{background:var(--bd2);color:var(--p)}
.imp-send{
  height:30px;padding:0 15px;border-radius:9px;font-size:12.5px;font-weight:500;
  background:linear-gradient(140deg,var(--p),color-mix(in srgb,var(--p) 76%,var(--accent)));
  color:var(--on-p);box-shadow:0 3px 10px color-mix(in srgb,var(--p) 28%,transparent);
}
.imp-send:hover{filter:brightness(1.07)}
.imp-send:disabled{opacity:.45;box-shadow:none}
.imp-btns{display:none}   /* 旧结构，留着不显示（工具栏已经进框里） */

/* 气泡：自己发的用主色，对面用卡片色 —— 微信也是这个意思 */
.imp-bub{max-width:min(72%,560px);font-size:13.5px;line-height:1.6;padding:9px 13px;border-radius:14px}
.imp-bub.me{background:linear-gradient(140deg,var(--p),color-mix(in srgb,var(--p) 78%,var(--accent)));color:var(--on-p);border-bottom-right-radius:5px}
.imp-bub.you{background:var(--card);border:1px solid var(--bd);color:var(--t1);border-bottom-left-radius:5px}

/* ---------------------------------------------------------------- 右栏 */
.panel{border-left:1px solid var(--bd2);background:color-mix(in srgb,var(--card) 62%,var(--sidebar))}
.ptabs{border-bottom:1px solid var(--bd2);gap:2px}
.ptab{font-size:12.5px;border-radius:8px 8px 0 0}
.ptab.on{color:var(--p);font-weight:600}

/* 工具面 */
.tp-load{padding:24px 10px;text-align:center;font-size:11.5px;color:var(--t3);line-height:1.7}
.tp-hd{padding:2px 2px 10px}
.tp-hl{font-size:12.5px;color:var(--t2)}
.tp-hl b{color:var(--t1);font-weight:600}
.tp-hs{font-size:10.5px;color:var(--t3);margin-top:3px;line-height:1.5}
.tp-g{
  display:flex;align-items:center;gap:6px;margin:12px 0 5px;
  font-size:10.5px;color:var(--t3);letter-spacing:.4px;
}
.tp-g span{font-weight:600}
.tp-g i{font-style:normal;background:var(--bd2);border-radius:5px;padding:0 5px;font-size:9.5px}
.tp-g::after{content:'';flex:1;height:1px;background:var(--bd2)}
.tp-row{
  display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;
  border:1px solid transparent;
}
.tp-row:hover{background:var(--p-soft2);border-color:var(--bd2)}
.tp-row code{
  font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--p-strong);
  background:var(--p-soft);border-radius:5px;padding:1px 5px;flex:0 0 auto;
}
.tp-row.w code{color:var(--warn);background:var(--warn-soft)}
.tp-lb{font-size:11.5px;color:var(--t2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-w{font-size:9.5px;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:0 4px;flex:0 0 auto;font-style:normal}
.tp-call{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:7px}
.tp-call:hover{background:var(--bd2)}
.tp-cn{width:16px;height:16px;border-radius:5px;background:var(--bd2);color:var(--t3);font-size:9.5px;display:grid;place-items:center;flex:0 0 auto}
.tp-ct{flex:1;min-width:0}
.tp-ct b{display:block;font-size:11.5px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-ct i{display:block;font-size:10px;color:var(--t3);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-k{font-size:9.5px;color:var(--ok);background:var(--ok-soft);border-radius:4px;padding:0 4px;font-style:normal}
.tp-e{font-size:9.5px;color:var(--err);background:var(--err-soft);border-radius:4px;padding:0 4px;font-style:normal}
.tp-d{font-size:9.5px;color:var(--t3);font-style:normal}

/* ---------------------------------------------------------------- 外观设置 */
.thcur{
  display:flex;align-items:center;gap:10px;padding:10px 12px;margin:12px 0;
  border:1px solid var(--bd);border-radius:12px;background:var(--p-soft2);
}
.thsw{width:26px;height:26px;border-radius:9px;background:var(--sw);box-shadow:0 3px 9px color-mix(in srgb,var(--sw) 40%,transparent);flex:0 0 auto}
.thtx{flex:1;min-width:0}
.thtx b{display:block;font-size:12.5px}
.thtx i{display:block;font-size:10.5px;color:var(--t3);font-style:normal}
.thopts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 6px}
.thopt{
  position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--card);text-align:left;
}
.thopt:hover{border-color:var(--p)}
.thopt.on{border-color:var(--p);box-shadow:var(--ring)}
.thopt b{font-size:12px}
.thopt i{font-size:10.5px;color:var(--t3);font-style:normal;line-height:1.4}
.thopt em{position:absolute;right:7px;top:7px;font-size:9px;font-style:normal;color:var(--p);background:var(--p-soft);border-radius:4px;padding:0 4px}
.thpv{width:100%;height:30px;border-radius:8px;border:1px solid var(--bd)}
.thpv.light{background:linear-gradient(135deg,#fff,#eef2f8)}
.thpv.dark{background:linear-gradient(135deg,#1b2029,#2a3240)}
.thpv.auto{background:linear-gradient(135deg,#fff 0 50%,#1b2029 50% 100%)}
.thsec{font-size:10.5px;color:var(--t3);margin:14px 0 6px;letter-spacing:.3px}
.thpacks{display:flex;flex-wrap:wrap;gap:6px}
.thpack{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--t2);
  border:1px solid var(--bd);border-radius:8px;padding:3px 8px 3px 4px;background:var(--card);
}
.thpack i{width:11px;height:11px;border-radius:4px;display:block}
.thpack.on{border-color:var(--p);color:var(--p-strong);background:var(--p-soft)}

/* 提示条 */
.vtip.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.vtip.ok b{color:var(--ok)}

/* ---------------------------------------------------------------- 移动端 */
.navbtn{display:none}
@media (max-width:900px){
  .navbtn{display:grid}
  .app{grid-template-columns:1fr}
  /* 左栏变成抽屉：默认在屏幕外，点左上角拉出来。
     style.css 里的老规则是 .side{display:none}（当年手机上干脆不要侧栏），
     这里必须显式改回 flex，否则 position:fixed 白白生效、抽屉永远拉不出来。 */
  .side{
    display:flex;
    position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);z-index:70;
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 0 0 100vmax rgba(10,20,35,0);
  }
  .side.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(10,20,35,.38)}
  /* 手机上顶栏只剩中、右两段：左栏是抽屉，没有"压在左栏上"这回事 */
  .top,.app:not(.withpanel) .top{grid-template-columns:minmax(0,1fr) auto;height:52px}
  .hd-l{display:none}
  .hd-m{padding:0 10px}
  .hd-r{border-left:none;padding:0 4px}
  .ttitle{font-size:13.5px}
  .tbtn span{display:none}   /* 顶栏按钮只留图标，别把标题挤没 */
  /* 顶栏空间就这么点：先保住标题。当前是谁在接，输入框上方那条常驻条已经写着，
     顶栏这个胶囊在手机上纯占地方 —— 整块收掉。 */
  .agent-bar{display:none!important}

  .body,.body.withpanel{grid-template-columns:1fr}
  /* 右栏在手机上是一整页，不是挤在右边的窄条 */
  .panel{
    display:flex;   /* 同理：老规则是 display:none */
    position:fixed;inset:0;z-index:75;border-left:none;
    transform:translateX(102%);transition:transform .22s ease;
  }
  .panel.open{transform:translateX(0)}
  .px svg{transform:rotate(180deg)}

  .cwrap,.wbin{padding:0 12px}
  /* 手机上左右必须留白，否则字贴边（老规则给的是 16px 14px 6px，被上面覆盖掉会变 0） */
  .msgs{padding:12px 14px 4px}
  .ubub{max-width:86%}
  .aibody{padding-left:0}
  .md table{font-size:11.5px}
  .md thead th,.md tbody td{padding:6px 7px}
  .tip{display:none}         /* 手机上这行提示纯占地方，键盘一弹就顶上去 */
  .composer{padding:6px 0 calc(8px + env(safe-area-inset-bottom))}
  .box textarea{min-height:48px;font-size:15px}   /* 15px 才不会触发 iOS 自动放大 */
  .recp{flex-wrap:wrap;gap:6px}
  .recp .recwave{flex:1 1 90px}
  .recp .reclive{max-width:100%;order:9;flex:1 1 100%}
  .thopts{grid-template-columns:1fr}
  .imp-in{padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
  .imp-field textarea{font-size:15px}
  .wbcards{gap:6px}
  .wbcard{padding:4px 8px 4px 6px}
}
@media (max-width:560px){
  .brand{padding:12px 12px 8px}
  .stitabs{margin:0 10px 8px}
  .panel .pbody{padding:10px}
  .tp-row code{font-size:10px}
}

/* ---------------------------------------------------------------- 二轮：让"有设计"看得见
   上一轮只把底色染色，用户第一眼还是觉得"一片白"。这一轮加四件真正改变观感的东西：
     ① 顶栏一条极细的主色渐变线（品牌存在感，不占位置）
     ② 自己说的话用主色气泡（微信/企微都是这个语义：我的话是"实"的）
     ③ 侧栏顶部一层主色雾，跟画布区分开
     ④ 区块标题带主色短竖条
*/

/* 顶栏原来压着一条主色渐变线（上一轮"让有设计看得见"的产物）。
   三段式之后中栏是一条整体，再在它 54px 处横切一道亮色，就是"又分段了"。
   现在换成**右栏分隔线往上延伸**：一条 1px 淡线，从顶到底把中栏和右栏分开，
   三条栏在视觉上才拉到底、等高齐平。左右两条竖线由 .side / .panel 自己给。 */
/* 原来这里用 .top::after 在 right:--pw 处画一条假分隔线，让右栏看起来从 y=0 开始。
   现在顶栏自己分成三段、右段带 border-left，那条假线不需要了（同一位置真线，
   而且跟着 --pw 一起变宽窄，不会再和下面 .panel 的边错开一像素）。 */

.side{
  background:
    linear-gradient(180deg,var(--p-soft) 0,color-mix(in srgb,var(--p-soft) 42%,var(--sidebar)) 96px,var(--sidebar) 240px);
}

/* 自己的话：实心主色 + 白字 */
.ubub{
  background:linear-gradient(140deg,var(--p),color-mix(in srgb,var(--p) 82%,var(--accent)));
  color:var(--on-p);border:none;
  box-shadow:0 4px 14px color-mix(in srgb,var(--p) 24%,transparent);
}
.ubub .ufile{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:var(--on-p)}
.ubub .ufile b,.ubub .ufile small,.ubub .umeta b,.ubub .umeta small{color:var(--on-p)}
.ubub .uico{background:rgba(255,255,255,.2);color:var(--on-p)}

/* 区块标题的主色短竖条（.md h4 那种"二、发现的问题"） */
.md h4{
  position:relative;padding-left:9px;
}
.md h4::before{
  content:'';position:absolute;left:0;top:.35em;bottom:.35em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--p),var(--accent));
}

/* AI 头像旁边那行"数据来自系统"给人的可信感，再收一点 */
.aihead{padding-bottom:2px}
.macts button{color:var(--t3)}
.macts button:hover{background:var(--bd2);color:var(--p)}

/* ============================ 输入框里的 @（选人浮层） ============================ */
/* 左下角那个 @ 是文字不是图标，单独把字号撑住，不然跟旁边的 svg 不齐 */
#atBtn{font-size:15px;font-weight:700;line-height:1;letter-spacing:-.5px}
#atBtn:hover{background:var(--p-soft2);color:var(--p)}

.atmenu{
  position:fixed;z-index:95;width:280px;max-height:min(52vh,420px);overflow:auto;
  padding:6px;background:var(--card);border:1px solid var(--bd);border-radius:14px;
  box-shadow:0 14px 40px rgba(12,24,44,.18),0 2px 6px rgba(12,24,44,.08);
}
.atmt{
  padding:6px 10px 7px;font-size:11.5px;color:var(--t3);letter-spacing:.02em;
}
.atmi{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:10px;
  text-align:left;background:transparent;border:none;cursor:pointer;
}
.atmi:hover{background:var(--p-soft2)}
.atmi.on{background:var(--p-soft)}
.atmi.off{opacity:.5;cursor:not-allowed}
.atmi-i{
  flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--p-soft);color:var(--p);font-size:12px;font-weight:700;
}
.atmi-n{flex:1;min-width:0;font-size:13px;color:var(--t1);font-weight:600}
.atmi-n i{
  display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--t3);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.atmi-k{flex:none;font-size:11px;color:var(--p);font-weight:600}

/* 状态提示（语音说完 / 出错提示）不再绝对定位压住发送键：
   改成正常流，贴在输入框正上方 —— 输入区里现在有常驻条和语音条，高度是变的，
   写死 bottom:58px 必然骑到发送键上。 */
.vtip{
  position:static;bottom:auto;margin:0 0 8px;text-align:left;
}
.vtip.on{display:block}

/* ============================ IM 里的表格 / 长答 ============================ */
/* 同事与智能体在会话里贴表格时，气泡和结果卡宽度有限：小字号 + 横向滚动，
   宁可滚也不要挤成一堆竖线。 */
.imp-bub table,.imp-agent-b table{
  border-collapse:separate;border-spacing:0;width:100%;font-size:12px;
  border:1px solid var(--bd);border-radius:9px;overflow:hidden;margin:0;
}
.imp-bub table thead th,.imp-agent-b table thead th{
  background:var(--p-soft2);color:var(--t2);font-weight:600;text-align:left;
  padding:7px 9px;border-bottom:1px solid var(--bd);white-space:nowrap;
}
.imp-bub table tbody td,.imp-agent-b table tbody td{
  padding:6px 9px;border-bottom:1px solid var(--bd2);vertical-align:top;
}
.imp-bub table tbody tr:last-child td,.imp-agent-b table tbody tr:last-child td{border-bottom:none}
/* style.css 里 table.dt td.num{width:1%} 是为宽屏设计的：
   在气泡里会把数字列压到 30px，「57」直接被拆成「5」「7」两行。
   这里把宽度还回去，并且数字列一律不换行。 */
.imp-bub table th.num,.imp-bub table td.num,
.imp-agent-b table th.num,.imp-agent-b table td.num{
  text-align:right;width:auto;white-space:nowrap;min-width:56px;
}
/* 气泡里的标题/列表/引用也别顶格糊成一片 */
.imp-bub h2,.imp-bub h3,.imp-bub h4,.imp-agent-b h2,.imp-agent-b h3,.imp-agent-b h4{
  margin:10px 0 6px;font-size:13.5px;line-height:1.5;
}
.imp-bub p,.imp-agent-b p{margin:6px 0}
.imp-bub ul,.imp-bub ol,.imp-agent-b ul,.imp-agent-b ol{margin:6px 0;padding-left:20px}
.imp-bub code,.imp-agent-b code{
  background:var(--bd2);border-radius:4px;padding:1px 4px;
  font-family:Consolas,Monaco,monospace;font-size:11.5px;
}

/* 表格的滚动壳（md() 里套的）：列多时横向滚，不把列挤成竖排 */
.mdtb{overflow-x:auto;max-width:100%;margin:8px 0;-webkit-overflow-scrolling:touch}
.mdtb>table{margin:0}
.imp-bub .mdtb,.imp-agent-b .mdtb{margin:8px 0}

/* ============================ 正式标识（随肤 + 随深浅） ============================ */
/* 标识本体已经是"圆形 + 自身渐变"，外面再套一层渐变方块就变成"方块里贴个圆"，很脏。
   所以容器的底色/阴影/圆角全部去掉，只留尺寸；深色下靠一层柔光提起来。 */
.logo,.lgm{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.logo{width:30px!important;height:30px!important}
.lglogo .lgm{width:44px!important;height:44px!important}
.logo img,.lgm img{width:100%;height:100%;display:block;border-radius:50%}
.logo img{filter:drop-shadow(0 2px 6px rgba(16,34,66,.22))}
.lgm img{filter:drop-shadow(0 8px 20px rgba(16,34,66,.24))}
html[data-theme="dark"] .logo img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
html[data-theme="dark"] .lgm img{filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}

/* ============================ 外观：14 个皮肤包可选 ============================ */
.thcur .thlg{width:30px;height:30px;flex:0 0 auto;border-radius:50%}
.thpacks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px;margin-top:4px;
}
.thpack{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 5px 8px;border:1px solid var(--bd);border-radius:12px;
  background:var(--card);cursor:pointer;transition:.14s;
}
.thpack:hover{border-color:var(--p);transform:translateY(-1px)}
.thpack.on{border-color:var(--p);background:var(--p-soft2);box-shadow:var(--ring)}
.thpack img{width:24px;height:24px;border-radius:50%}
.thpack b{font-size:11.5px;font-weight:600;color:var(--t1);white-space:nowrap}
.thpack em{font-size:9.5px;font-style:normal;color:var(--t3);white-space:nowrap}
.thpack i{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%}
.thpk-all{
  width:24px;height:24px;border-radius:50%;
  background:conic-gradient(#C4121B,#1E63D0,#0E8F96,#B9820C,#4B3FCF,#C4121B);
}
.thpacks .thpack.on b{color:var(--p-strong)}

/* ============ 一条中轴：工作台 / 消息 / 输入框左右边缘对齐 ============ */
/* 用户原话「中间对话区域全占满了，输入框没占满，看着头重脚轻」。
   根因是三处各自算宽度：工作台铺满整列、消息区 788 居中、输入框 788 再减 52 内边距。
   现在统一到 1080 上限 + 26 内边距，三者对齐；窗口再宽也不会拉成一条线。 */
.wbin{max-width:1080px;margin:0 auto;width:100%;padding:0 26px}
@media (max-width:900px){
  .wbin{padding:0 14px}
}

/* ============================ 左下角「我」：头像 + 姓名 ============================ */
/* 原来这里是个首字母圆圈 + 账号名。头像和真名才是"这是谁"该有的样子。 */
.sfoot{cursor:pointer;border-radius:10px;transition:background .14s}
.sfoot:hover{background:var(--p-soft2)}
.ava{position:relative;overflow:hidden;background:var(--p-soft);color:var(--p-strong);
  font-weight:700;display:grid;place-items:center}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ava span{font-size:13px;line-height:1}

/* ============================ 我的：资料 / 头像 / 改密码 ============================ */
.memodal{
  position:relative;width:min(560px,94vw);max-height:min(760px,92vh);overflow:auto;
  background:var(--card);border:1px solid var(--bd);border-radius:18px;
  box-shadow:var(--sh-lg);padding:20px 22px 22px;
}
.mex{
  position:absolute;right:14px;top:12px;width:26px;height:26px;border-radius:8px;
  background:transparent;border:0;color:var(--t3);font-size:18px;line-height:1;cursor:pointer;
}
.mex:hover{background:var(--bd2);color:var(--t1)}
.mehead{display:flex;align-items:center;gap:14px;padding-right:30px}
.meava{
  position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--p-soft);color:var(--p-strong);display:grid;place-items:center;cursor:pointer;
  border:2px solid var(--bd);
}
.meava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.meava-init{font-size:22px;font-weight:700}
.meava em{
  position:absolute;left:0;right:0;bottom:0;height:20px;line-height:20px;text-align:center;
  font-style:normal;font-size:9.5px;color:#fff;background:rgba(10,18,32,.62);
  opacity:0;transition:opacity .15s;
}
.meava:hover em{opacity:1}
.meava.busy{opacity:.6}
.mewho b{display:block;font-size:16px;font-weight:650;color:var(--t1)}
.mewho span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}

.mebody{margin-top:16px}
.me-sec{
  display:flex;align-items:baseline;gap:8px;margin:16px 0 8px;
  font-size:12px;font-weight:600;color:var(--t1);
}
.me-sec em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--t3)}
.me-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.me-f{display:flex;flex-direction:column;gap:4px}
.me-f.wide{grid-column:1 / -1}
.me-f span{font-size:11px;color:var(--t3)}
.me-f input,.me-f select{
  height:34px;border:1px solid var(--bd);border-radius:9px;padding:0 10px;
  background:var(--card);color:var(--t1);font-size:13px;font-family:inherit;outline:none;
}
.me-f input:focus,.me-f select:focus{border-color:var(--p);box-shadow:var(--ring)}
.me-f input.ro,.me-f input:disabled,.me-f select:disabled{background:var(--bd2);color:var(--t3);cursor:not-allowed}
.me-act{display:flex;align-items:center;gap:10px;margin-top:10px}
.me-btn{
  height:32px;padding:0 14px;border-radius:9px;border:1px solid var(--bd);
  background:var(--card);color:var(--t1);font-size:12.5px;font-family:inherit;cursor:pointer;
}
.me-btn:hover{border-color:var(--p);color:var(--p)}
.me-btn.pri{background:var(--p);border-color:var(--p);color:var(--on-p);font-weight:600}
.me-btn.pri:hover{background:var(--p-strong);color:var(--on-p)}
.me-btn.ghost{color:var(--t2)}
.me-btn:disabled{opacity:.55;cursor:not-allowed}
.me-hint{font-size:10.5px;color:var(--t3)}
.me-msg{font-size:12px;border-radius:9px;padding:8px 11px;margin-bottom:10px;line-height:1.5}
.me-msg.ok{background:var(--ok-soft);color:var(--ok)}
.me-msg.err{background:var(--err-soft);color:var(--err)}
.me-loading{padding:26px 4px;color:var(--t3);font-size:12.5px}
@media (max-width:560px){
  .me-grid{grid-template-columns:1fr}
  .memodal{width:96vw;padding:16px}
}

/* ==================================================================
   分步填表：右边这一块就是「当前这一步的卡片」
   ------------------------------------------------------------------
   原来是字段直接铺在面板上，右边只剩 pbody 的 12px。
   一屏 6 个字段看过去，控件右边像被裁掉一截；
   包成卡片之后边界清楚，"这一步填什么"是一整块。
   ================================================================== */
.fstepwrap.wide{border-bottom:0}
.fstepwrap.wide .fnav{padding:9px 0 10px 3px}
.fstepwrap.wide .fmain{
  min-width:0;
  margin:9px 10px 10px;
  padding:11px 13px 13px;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:11px;
}
.fstepwrap.wide .fmain .fstep-hint{padding:0 0 9px}
.fstepwrap.wide .fmain .frm-hd{margin-bottom:12px}
.fstepwrap.wide .fmain .frm-note{padding:0 0 8px}
/* 窄面板是上下堆叠的，卡片照样要有一圈边界 */
.fstepwrap:not(.wide) .fmain{padding:10px 0 0}
/* 操作条跟卡片同一条边：不然「下一步」会比卡片多伸出 10px */
.fstepwrap + .frm-act{margin:0 10px;padding:11px 3px 0;border-top:0}
.fstepwrap + .frm-act + .frm-tip{padding:0 13px}

/* ---------- 输入框必须和消息区一样宽（2026-10-25 实测还差 52px） ----------
   根因：消息区和输入区各自算左右留白 —— .msgs 有 padding，.cwrap 是 max-width:1080
   再加 26 内边距，宽屏下两者差两个内边距（812 vs 760），看着就是"输入框缩在中间"。
   这里把两边钉在**同一个公式**上：1100 以内是 26px，再宽就居中到 1080 一条中轴。
   百分比 padding 是按包含块（.stage）算的，两边包含块相同，结果必然相等。 */
.msgs,.cwrap,
.msgs,.cwrap{
  padding-left:max(26px,calc((100% - 1080px) / 2));
  padding-right:max(26px,calc((100% - 1080px) / 2));
}
.cwrap{max-width:none}
@media (max-width:900px){
  .msgs,.cwrap{padding-left:14px;padding-right:14px}
}

/* ---------- 右栏：收起要真收起，拖拉要抓得住 ----------
   收起时只去掉 withpanel 是不够的：网格还是两列，面板被塞进隐式第二行（1152×423），
   把主区从 746 高压到 323。判据统一成"有没有 withpanel"，没就整块不显示。 */
.body:not(.withpanel) .panel{display:none}
.body.nopanel .panel{display:none}

/* 拖拉手柄原来只有 6px 宽、贴在面板外面，鼠标很难抓；
   给到 11px，平时是一条淡线，hover/拖动时才亮。 */
.p-drag{width:11px;left:-6px;z-index:6}
.p-drag::after{content:'';position:absolute;left:5px;top:0;bottom:0;width:1px;
  background:var(--bd);transition:background .14s,box-shadow .14s}
.p-drag:hover::after,.dragging .p-drag::after{background:var(--p);box-shadow:0 0 0 2px var(--p-soft)}
body.dragging{cursor:col-resize;user-select:none}
body.dragging *{cursor:col-resize!important}

/* ---------- 首页中间那枚标识 ----------
   原来是个渐变方块里塞一个白色图标，跟左边栏/登录页的正式标识不是一套。
   现在三处同一份 brand/<皮肤>.svg，随肤换；底色交给标识自己（是枚圆形标）。 */
.ebig{background:none!important;box-shadow:none!important;border-radius:0;
  width:64px;height:64px;margin-bottom:12px;display:grid;place-items:center}
.ebig .hlogo{width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(16,32,56,.16))}

/* ---------- 表单第一屏：选填法 / 没权限 ----------
   用户要求「填写/编辑业务的时候就让用户选择哪一种方式」，不要替他决定。 */
.fchoose{padding:14px 12px}
.fch-h{font-size:13.5px;font-weight:600;margin-bottom:5px}
.fch-p{font-size:11px;color:var(--t3);line-height:1.75;margin:0 0 12px}
.fch-c{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  border:1px solid var(--bd);border-radius:11px;background:var(--card);
  padding:11px 13px;margin-bottom:9px;cursor:pointer;font-family:inherit;color:var(--t1)}
.fch-c:hover{border-color:var(--p)}
.fch-c b{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.fch-c b em{font-style:normal;font-size:9.5px;font-weight:600;color:var(--on-p);
  background:var(--p);border-radius:20px;padding:1px 7px}
.fch-c span{font-size:10.5px;color:var(--t3);line-height:1.65}
.fch-c.pri{border-color:var(--p);background:var(--p-soft2)}
.fch-tip{font-size:10px;color:var(--t3);margin:2px 0 0}

.fdeny{padding:18px 14px}
.fdeny-h{font-size:13.5px;font-weight:600;margin-bottom:9px}
.fdeny-r{font-size:11.5px;line-height:1.75;background:var(--err-soft);color:var(--err);
  border-radius:9px;padding:9px 11px;margin:0 0 12px}
.fdeny-act{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fdeny-b{height:31px;padding:0 13px;border-radius:9px;border:1px solid var(--bd);
  background:var(--card);color:var(--t1);font-size:12px;font-family:inherit;cursor:pointer}
.fdeny-b:hover{border-color:var(--p);color:var(--p)}
.fdeny-b.pri{background:var(--p);border-color:var(--p);color:var(--on-p);font-weight:600}
.fdeny-tip{font-size:10.5px;color:var(--t3);line-height:1.7;margin:0}

/* ============================================================
   第 11 轮（2026-10-26）：品牌名 / 左栏头部 / 右栏分栏 / 手机入口 / 空态版式
   ============================================================ */

/* ---------- 品牌区：左上角不再放图标，只留字 ---------- */
.brand{padding:14px 14px 10px}
.bname{font-size:15px;letter-spacing:.3px}
.bname small{font-size:11px;letter-spacing:.2px;margin-top:1px}

/* 「新建对话」挪到数字人下面，和页签贴一档（原来是贴着品牌区） */
.newbtn{margin:2px 12px 8px}

/* 左栏三页签：对话 / 消息 / 通讯录。
   手机上左栏是抽屉，这三颗就是「手机怎么打开消息、通讯录」的答案。 */
.stitabs{padding:0 12px 8px}
.stitab{height:30px;font-size:12.5px}
.stitab .n{margin-left:4px}

/* ---------- 三段式：左 / 中 / 右 三栏并列（2026-10-26 第三次收敛） ----------
   用户原话：「希望三段式布局左边中间右边，三个区域高度一致，中间区域就无需再次
   分段了，三段布局彼此挨着无需间距，只是通过很轻微的线条或者颜色区分即可」。

   前两版没做到，是因为把它们当成了"贴在画布上的两张卡"：
     · 中间和右栏各带 12px 上下 margin + 1px 描边 + 16px 圆角 → 比左栏矮一截
     · body 上有 gap:12px / padding-right:12px → 三条竖缝，不是"挨着"
     · 给 .stage 套边框 = 在中间区域里面又分了一层，越看越碎

   现在的口径：
     · 三块**等高等长**、边缘齐平，一条缝都不留（gap / margin / padding 全归零）
     · 只靠 1px 的 --bd2 细线 + 三档极浅底色区分，不要粗边框、不要圆角、不要阴影
     · 中间那一栏就是"中栏"本身，不再往它里面套卡片（不需要再分段）
   高度由 grid 的 stretch 给足，写 height:100% 反而会和 margin 打架。 */
.body.withpanel{gap:0;padding-right:0}

.stage{
  margin:0;border:none;border-radius:0;
  background:var(--card);
  overflow:hidden;
  height:auto;
}

/* 右栏只留左边那一条淡线。底色比中栏深一点点（card 与 sidebar 之间），
   不描边也能一眼看出"这是另一栏"。 */
.panel{
  margin:0;border:none;border-radius:0;
  border-left:1px solid var(--sep);
  overflow:hidden;
  /* 比左栏再深一档：--bg 是"画布"，--sidebar 是"栏"。右栏取两者之间，
     跟左栏（纯 sidebar）拉开一点色差 —— 光有 1px 线、三栏都同色时线会被糊掉。 */
  background:color-mix(in srgb, var(--bg) 55%, var(--sidebar));
}
/* 收起右栏时（nopanel/没有 withpanel）那条线自然消失：它挂在 .panel 上 */
.body:not(.withpanel) .panel,
.body.nopanel .panel{border-left:none}

/* 1024 这类窄屏：右栏收窄一点，别把对话区挤成一条缝（用户手拖过就按他的来，inline 优先）
   —— 变量挂到 .app 上，顶栏那条分隔线也要读到它，挂 .body 顶栏看不到。 */
@media (max-width:1100px){ .app{--pw:264px} }

/* ---------- 顶栏：当前智能体贴中间区域最右 ---------- */
.agent-bar{flex:0 0 auto;margin-left:auto;justify-content:flex-end;gap:6px;min-width:0}
.ab-lbl{font-size:11px;color:var(--t3);white-space:nowrap;flex:0 0 auto}
/* 智能体名字可能很长（「智能路由 · Agent 协同」），长了就省略，别把标题挤没 */
.agent-bar .ab-who{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1180px){ .agent-bar .ab-why{display:none} }

/* ---------- 中间空态：logo 与「随说随查 · 随说随办」并排 ---------- */
.empty .ehead{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px}
.empty .ehlogo{width:46px;height:46px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 6px 16px rgba(16,32,56,.18))}
.empty .eh{font-size:23px;font-weight:680;letter-spacing:.8px;margin:0;line-height:1.2}
.empty .eh i{font-style:normal;color:var(--p);font-weight:400;margin:0 7px;opacity:.72}
.empty .eag{font-size:12.5px;color:var(--t2);line-height:1.75;margin:0 0 18px;max-width:620px;
  /* 后台写的描述可能很长（整段职责说明）。这里封两行 —— 空态是"入口"不是"介绍页"，
     想细看可以点智能体看右栏那张卡。 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty .eag b{color:var(--t1);font-weight:600}
/* 空态那四张卡也跟着栏宽走（原来封在 660，中栏 888 时两边各空 114，看着像"没排满"）。
   仍然限个 900 的上限：再宽下去每张卡一行字太长，反而不像"入口"。 */
.empty .cards{max-width:900px;width:100%}
@media (max-height:760px){
  .empty .eh{font-size:19px}
  .empty .ehlogo{width:38px;height:38px}
  .empty .eag{margin-bottom:13px}
}

/* ---------- 手机 / 窄屏入口 ---------- */
.pnlbtn,.newbtnm{display:none}
@media (max-width:900px){
  /* 右栏（智能体/工具）和新建对话在手机上各给一颗入口 */
  .pnlbtn,.newbtnm{display:grid}
  /* 抽屉里已经有通讯录和消息了，顶栏这两颗在手机上纯占地方 */
  #imBtn,#ear{display:none}
  .body.withpanel{gap:0;padding-right:0}
  /* 手机右栏是整页（fixed + inset:0），不能再带边距、圆角和那条竖线 */
  .panel{margin:0;border:none;border-radius:0}
  /* 手机上没有"三栏并排"这回事，原来那条假分隔线（.top::after）也已经删了 */
  /* 手机上寸土寸金，中间区那一圈边和留白反而挤掉内容 */
  .stage{margin:0;border:none;border-radius:0}
  .side .brand{padding:12px 12px 6px}
  .empty .eh{font-size:19px;letter-spacing:.4px}
  .empty .ehlogo{width:38px;height:38px}
  .empty .eag{font-size:12px;margin-bottom:14px}
  .empty .cards{max-width:none}
  .empty .qcard{padding:10px 12px}
  /* 手机上输入框那行：模型名太长会把发送键挤出去，收窄并省略 */
  .mbtn{max-width:126px;padding:0 8px}
  #curModel{max-width:70px}
  .imp-hintk{display:none}
}

/* ============================================================================
   2026-10-27 内测反馈 ②⑤
   ---------------------------------------------------------------------------- */

/* ② 表单卡头上的「换一种填法」：回到智能填表 / 系统填表的选择。
   安静一点，别跟标题抢注意力 —— 它是个退回入口，不是主操作。

   ★ 2026-10-27 二次修（用户："填到第一步要能退回去"，但截图里看不见这个键）：
     · 先用 display:none 藏起来 —— **还没选填表方式的时候，这个位置本身就在问
       "怎么填"，再挂一个"换一种填法"是没有意义的重叠**；
     · 只有真的进了填表（.fcard.open，智能填表/系统填表两条路都会加这个类）
       才露出来；
     · 已提交（.fcard.fcard-done）再藏回去 —— 提交后不给退。
     · 样式只写在 design.css 这一处。曾经在 view.css 里也写过一份，design.css
       后加载直接盖掉，白改一遍（同一个组件两处写布局，必然踩）。 */
.fc-back{
  margin-left:auto;flex:0 0 auto;
  display:none;
  height:24px;padding:0 9px;border-radius:999px;
  border:1px solid var(--bd2);background:transparent;
  color:var(--t2);font-size:12px;line-height:1;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.fcard.open .fc-back{display:inline-flex;align-items:center;gap:4px}
.fcard.fcard-done .fc-back{display:none}
.fc-back:hover{color:var(--p);border-color:var(--p-bd);background:var(--p-soft)}
.fc-back:active{transform:translateY(.5px)}

/* ⑤ 窄屏：系统页面不内嵌，改成一张"新窗口打开"的卡。
   系统页是桌面版，塞进手机宽度的 iframe 会挤成一列，不如直接把入口给它。 */
.vw-mob{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;padding:26px 20px 22px;
  border:1px dashed var(--bd2);border-radius:var(--r-md);
  background:color-mix(in srgb, var(--p-soft) 45%, var(--card));
}
.vw-mob-ico{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--p),var(--p-strong));color:#fff;
}
.vw-mob-t{font-size:14px;font-weight:500;color:var(--t1)}
.vw-mob-s{font-size:12px;line-height:1.7;color:var(--t3);max-width:300px}
.vw-mob-b{margin-top:4px;height:34px;padding:0 18px}

/* 窄屏：卡头塞不下「图标+标题+标签+换填法」，让标题独占一行、标签与按钮落第二行，
   否则「换一种填法」会被挤出卡头看不见。 */
@media (max-width:560px){
  .fcard .fc-h{flex-wrap:wrap;row-gap:6px}
  .fcard .fc-h .fc-t{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip}
  .fcard .fc-h .fc-tag,
  .fcard .fc-h .fc-tag2{margin-left:0}
  .fcard .fc-h .fc-back{margin-left:auto}
}