/* ═══════════════════════════════════════════════════════════════════════
   风暴方舟 · App v2（2026-10-13）
   —— 应用外壳（侧栏/顶栏/抽屉）+ 聊天 + 页面模式 + 手机端 app 化。
   依赖 foundation.css（tokens/组件）。选择器沿用现有 DOM 类名，JS 不动结构。
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 骨架 ═══ */
body.app{padding-left:var(--side-w);background:var(--bg)}
.page-wrap{max-width:1100px;margin:0 auto;padding:32px 24px 96px}

/* ═══ 侧栏 ═══ */
.side{
  position:fixed;left:0;top:0;bottom:0;width:var(--side-w);
  background:var(--sub);border-right:.5px solid var(--line);
  display:flex;flex-direction:column;z-index:100;overflow:hidden;
}
.sbrand{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.sbrand b{font-size:15px;font-weight:600;letter-spacing:var(--ls-head);color:var(--tx1);white-space:nowrap}
.seal{width:28px;height:28px;border-radius:var(--r-md);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.seal img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.snew{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;margin:0 8px 6px;
  border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:500;color:var(--tx1);
  background:transparent;border:0;transition:background var(--dur-1);
}
.snew:hover{background:var(--hover)}
.snew svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.cred{margin:2px 10px 10px!important}
.credtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.cred-lb{font-size:var(--fs-xs);color:var(--tx3)}
.cred-val{font-size:var(--fs-xs);color:var(--tx2);font-weight:500}
.side .ds-tier{color:var(--tx3)}
.prog{height:3px;background:var(--hover);border-radius:var(--r-full);overflow:hidden}
.prog i{display:block;height:100%;background:var(--btn-bg);border-radius:inherit;transition:width .4s var(--ease-enter)}
.side-scroll{flex:1;overflow-y:auto;padding:0 8px 8px}
.slbl{font-size:var(--fs-xs);font-weight:500;color:var(--tx3);padding:14px 10px 4px;letter-spacing:0;text-transform:none}
.snav{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.item{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:var(--r-lg);
  font-size:var(--fs-sm);font-weight:400;color:var(--tx1);
  transition:background var(--dur-1);position:relative;
}
.item:hover{background:var(--hover)}
.item.active{background:var(--sel);font-weight:500}
.item.active::before{display:none}
.side .chip{width:20px;height:20px;padding:0;border-radius:0;background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side .chip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--tx2)}
.side .item.active .chip svg{color:var(--tx1)}
.side .team{display:flex;align-items:center;gap:10px;margin:8px 2px 10px;padding:10px;background:var(--hover);border-radius:var(--r-xl)}
.side .team .tt{font-size:var(--fs-xs);font-weight:500;color:var(--tx1)}
.side .team .ts{font-size:11px;color:var(--tx3)}
.stack{display:flex;flex-shrink:0}
.stack img,.stack .more{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--sub);margin-left:-8px;object-fit:cover}
.stack img:first-child,.stack .more:first-child{margin-left:0}
.more{display:flex;align-items:center;justify-content:center;background:var(--sel);color:var(--tx2);font-size:11px;font-weight:500}
.sfoot{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:.5px solid var(--line);margin-top:auto}
.sfoot .lo{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r-md);font-size:var(--fs-xs);color:var(--tx3);background:none;border:0}
.sfoot .lo:hover{background:var(--hover);color:var(--tx1)}
.sfoot .lo:hover[aria-label*="退出"],.sfoot .lo:hover[aria-label*="退出登录"]{color:var(--danger)}
.sfoot svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 手机抽屉按钮（桌面隐藏） */
.menu-toggle{display:none;position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:200;width:40px;height:40px;border-radius:var(--r-full);background:var(--surface);box-shadow:var(--hairline),var(--sh-1);align-items:center;justify-content:center;transition:left var(--dur-2) var(--ease-move)}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:16px;height:1.5px;background:var(--tx1);border-radius:1px;position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:'';position:absolute;left:0}
.menu-toggle span::before{top:-5px}.menu-toggle span::after{top:5px}

/* ═══ 顶栏（ds-topbar） ═══ */
.ds-topbar{
  display:flex;align-items:center;gap:10px;height:var(--topbar-h);padding:0 16px;
  position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:.5px solid var(--line);
}
.ds-topbar h1{font-size:15px;font-weight:600;letter-spacing:var(--ls-head);color:var(--tx1);white-space:nowrap}
.ds-spacer{flex:1}
.ds-crumb{font-size:var(--fs-xs);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-online{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-full);background:var(--hover);font-size:var(--fs-xs);color:var(--tx2);white-space:nowrap}
.ds-online i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.ds-online-sub{color:var(--tx3)}
.ds-icobtn{width:32px;height:32px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;color:var(--tx2)}
.ds-icobtn:hover{background:var(--hover);color:var(--tx1)}
body.has-ds-topbar .chat-layout{height:calc(100vh - var(--ds-top-h,44px));height:calc(100dvh - var(--ds-top-h,44px))}

/* 移动端横排页签（新设计废弃：导航收进抽屉） */
.ds-mtabs{display:none}

/* ═══ 页面模式 ═══ */
.page-title{font-size:var(--fs-2xl);font-weight:600;letter-spacing:var(--ls-head);color:var(--tx1);margin-bottom:4px}
.page-sub{font-size:var(--fs-sm);color:var(--tx3);margin-bottom:24px}
.section-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 12px}
.section-hd h2{font-size:var(--fs-lg);font-weight:600}
.hero{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.eyebrow{font-size:var(--fs-xs);color:var(--tx3);margin-bottom:4px}
.htitle{font-size:var(--fs-xl);font-weight:600;letter-spacing:var(--ls-head);color:var(--tx1);line-height:1.35}
.htitle em{color:var(--accent);font-style:normal}
.hsub{font-size:var(--fs-sm);color:var(--tx2);margin-top:6px;max-width:560px;line-height:1.6}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-full);background:var(--hover);color:var(--tx2);font-size:var(--fs-xs);font-weight:500;flex-shrink:0;white-space:nowrap}
.pill .g{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.online{width:10px;height:10px;background:var(--ok);border:2px solid var(--surface);border-radius:50%;position:absolute;bottom:1px;right:1px}

/* 统计卡 */
.stat-card{padding:18px 20px;background:var(--surface);border-radius:var(--r-4xl);box-shadow:var(--hairline);position:relative;transition:box-shadow var(--dur-1)}
.stat-card:hover{box-shadow:0 0 0 .5px var(--line-2)}
.stat-card::before{display:none}
.stat-label{font-size:var(--fs-xs);color:var(--tx3);margin-bottom:8px;letter-spacing:0;text-transform:none}
.stat-value{font-size:var(--fs-2xl);font-weight:600;color:var(--tx1);line-height:1.2;font-variant-numeric:tabular-nums}
.ring-card{display:flex;align-items:center;gap:20px}
.ring .rbg{stroke:var(--hover)}
.ring .rfg{stroke-linecap:round;stroke:var(--accent)}
.ring-txt{fill:var(--tx1);font-weight:600;font-size:20px}

/* 快捷入口 */
.quick-action{display:flex;align-items:center;gap:14px;padding:18px;background:var(--surface);border-radius:var(--r-4xl);box-shadow:var(--hairline);transition:box-shadow var(--dur-1);text-decoration:none;color:inherit;position:relative;overflow:hidden}
.quick-action::after{display:none}
.quick-action:hover{box-shadow:0 0 0 .5px var(--line-2)}
.quick-action:hover .qa-icon{background:var(--pressed)}
.qa-icon{width:40px;height:40px;border-radius:var(--r-xl);background:var(--hover);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-1);color:var(--tx2)}
.qa-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qa-title{font-weight:500;font-size:var(--fs-sm);color:var(--tx1);margin-bottom:1px}
.qa-desc{font-size:var(--fs-xs);color:var(--tx3)}

/* 员工头像网格（员工市场/落地） */
.emps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:16px}
.emp-q{text-align:center;padding:14px 8px 12px;border-radius:var(--r-2xl);transition:background var(--dur-1);text-decoration:none;color:inherit;display:block}
.emp-q:hover{background:var(--hover)}
.emp-q .nm{font-size:var(--fs-xs);font-weight:500;color:var(--tx1);margin-top:8px}
.emp-q .tg{font-size:11px;color:var(--tx3);margin-top:2px}
.av{width:56px;height:56px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:var(--fs-lg);color:var(--tx2);background:var(--hover);border:0;margin:0 auto;transition:box-shadow var(--dur-1)}
.emp-q:hover .av{box-shadow:0 0 0 1.5px var(--line-2)}
.av img{width:100%;height:100%;object-fit:cover}
.ava-wrap{position:relative;display:inline-block}

/* Tabs（官方分段控件风） */
.tabs{display:inline-flex;gap:2px;margin-bottom:20px;background:var(--hover);padding:2px;border-radius:var(--r-xl)}
.tab-btn{padding:6px 14px;border-radius:var(--r-lg);border:0;background:transparent;font-size:var(--fs-xs);font-weight:500;color:var(--tx2);cursor:pointer;transition:all var(--dur-1)}
.tab-btn:hover{color:var(--tx1)}
.tab-btn.active{background:var(--surface);color:var(--tx1);box-shadow:var(--hairline),var(--sh-1)}
.sort-btn{padding:6px 12px;border-radius:var(--r-lg);background:transparent;font-size:var(--fs-xs);color:var(--tx2);cursor:pointer}
.sort-btn:hover{background:var(--hover);color:var(--tx1)}
.sort-btn.active{background:var(--sel);color:var(--tx1)}

/* 徽章别名（旧类名 → 新语义） */
.badge-green{background:var(--ok-soft);color:var(--ok)}
.badge-red{background:var(--danger-soft);color:var(--danger)}
.badge-amber{background:var(--warn-soft);color:var(--warn)}
.badge-blue{background:var(--accent-soft);color:var(--accent)}
.badge-purple{background:var(--accent-soft);color:var(--accent)}
.tag{font-size:11px;padding:2px 8px;border-radius:var(--r-full);background:var(--hover);color:var(--tx2);font-weight:500;margin-left:6px}
.btn-outline{background:transparent;color:var(--tx1);box-shadow:0 0 0 .5px var(--line-2)}
.btn-outline:hover{background:var(--hover)}
.btn-danger{background:none;color:var(--danger);box-shadow:0 0 0 .5px var(--danger-soft)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-block{width:100%}

/* 工具类（旧名，页面在用） */
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:16px}.gap-4{gap:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mt-1{margin-top:8px}.mt-2{margin-top:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.text-xs{font-size:var(--fs-xs)}.text-sm{font-size:var(--fs-sm)}.text-muted{color:var(--tx3)}.text-red{color:var(--danger)}.text-center{text-align:center}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-bold{font-weight:600}.num{font-variant-numeric:tabular-nums}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px;flex:none}

/* 空态/加载（旧类名） */
.empty-state{text-align:center;padding:48px 20px}
.empty-state .icon{display:block;margin-bottom:12px;color:var(--tx3)}
.empty-state .icon svg{width:36px;height:36px;margin:0 auto}
.empty-state h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:4px}
.empty-state p{color:var(--tx3);font-size:var(--fs-sm);margin-bottom:16px}
.spinner-lg{width:28px;height:28px;border-width:2px}
.loading-wrap{display:flex;align-items:center;justify-content:center;padding:48px}
.avatar-fallback{font-size:var(--fs-xs);font-weight:500}
.avatar-text{font-size:var(--fs-xs);font-weight:500}
.code-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;flex-wrap:wrap;gap:12px}

/* ── 弹窗（旧 API：.modal-overlay.open） ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r-4xl);padding:24px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-3)}
.modal-overlay.open .modal{animation:modalIn var(--dur-2) var(--ease-enter)}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:var(--ls-head);color:var(--tx1);margin-bottom:16px}
.modal input,.modal select,.modal textarea{width:100%;padding:9px 12px;border-radius:var(--r-lg);border:0;box-shadow:0 0 0 .5px var(--line-2);font-size:var(--fs-sm);background:var(--surface);color:var(--tx1);outline:none;transition:box-shadow var(--dur-1)}
.modal input:focus,.modal select:focus,.modal textarea:focus{box-shadow:0 0 0 1px var(--tx1)}
.modal label{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--tx2);margin-bottom:4px}
.modal-content{}

/* ── Toast（旧结构：.toast-container） ── */
.toast-container{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 14px;border-radius:var(--r-xl);font-size:var(--fs-sm);font-weight:400;background:var(--surface);color:var(--tx1);box-shadow:var(--hairline),var(--sh-2);display:flex;align-items:center;gap:8px;animation:slideIn var(--dur-2) var(--ease-enter)}
.toast-success{color:var(--tx1)}
.toast-success .toast-ico{color:var(--ok)}
.toast-error .toast-ico{color:var(--danger)}
.toast-info .toast-ico{color:var(--accent)}
.toast-ico{display:inline-flex;width:16px;height:16px;flex-shrink:0}
.toast-ico svg{width:16px;height:16px}
@keyframes slideIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ═══════════════════════ 聊天页 ═══════════════════════ */
.chat-layout{display:flex;height:100vh;height:100dvh;flex-direction:column}
.chat-main{max-width:820px;margin:0 auto;width:100%;display:flex;flex-direction:column;height:100%;min-height:0}
.chat-messages{flex:1;overflow-y:auto;padding:24px 20px 12px;scroll-behavior:smooth}

/* 欢迎空态 */
.welcome{text-align:center;padding:16vh 20px 40px}
.welcome-icon{width:56px;height:56px;margin:0 auto 16px;box-shadow:none;border-radius:var(--r-2xl)}
.welcome h2{font-size:var(--fs-2xl);font-weight:600;letter-spacing:var(--ls-head);margin-bottom:6px}
.welcome p{color:var(--tx3);font-size:var(--fs-sm);margin-bottom:20px}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;margin:0 auto}
.ex-chip{padding:8px 14px;border-radius:var(--r-full);background:var(--hover);font-size:var(--fs-xs);color:var(--tx2);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.ex-chip:hover{background:var(--pressed);color:var(--tx1)}
.ex-chip:active{background:var(--pressed)}
#exChips .ex-chip,.ex-chips .ex-chip{padding:8px 14px}

/* 消息 */
.msg{display:flex;gap:0;margin-bottom:24px;animation:msgIn .18s ease;min-width:0}
.msg.user{flex-direction:row-reverse}
.msg .msg-avatar{display:none}
.msg>div:last-child,.msg-body{flex:1;min-width:0;display:flex;flex-direction:column}
.msg-bubble{max-width:100%;padding:0;border-radius:0;font-size:var(--fs-base);line-height:1.65;word-break:break-word;width:auto;letter-spacing:var(--ls-body)}
.msg.assistant .msg-bubble{background:none;color:var(--tx1);border:0;box-shadow:none}
.msg.user .msg-bubble{align-self:flex-end;max-width:78%;background:var(--bubble-bg);color:var(--bubble-tx);padding:10px 16px;border-radius:22px;box-shadow:none}
.msg.user .msg-bubble a{color:inherit;text-decoration:underline}
.msg .msg-meta{order:-1;font-size:var(--fs-xs);color:var(--tx3);margin:0 0 6px}
.msg.user .msg-meta{display:none}
.msg.user .msg-bubble~.msg-meta{display:none}
.msg-bubble p{margin:0 0 10px}.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble ol,.msg-bubble ul{padding-left:1.4em;margin:0 0 10px}
.msg-bubble ol li{list-style:decimal}.msg-bubble ul li{list-style:disc}
.msg-bubble code{font-family:var(--f-mono);font-size:.9em;background:var(--code-bg);color:var(--code-tx);padding:1px 5px;border-radius:5px}
.msg-bubble pre{background:var(--code-bg);color:var(--code-tx);border-radius:var(--r-xl);padding:12px 14px;overflow-x:auto;margin:0 0 10px}
.msg-bubble pre code{background:none;padding:0}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:8px}
.img-grid img{border-radius:var(--r-xl);cursor:zoom-in;width:100%}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.auto-link{color:var(--accent);word-break:break-all;text-decoration:none}
.auto-link:hover{text-decoration:underline}

/* 流式/生成态 */
.typing{display:flex;gap:4px;align-items:center;padding:2px 0}
.typing span{width:5px;height:5px;border-radius:50%;background:var(--tx3);animation:blink 1.4s infinite ease-in-out both}
.typing span:nth-child(2){animation-delay:.16s}.typing span:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.generating-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-full);background:var(--hover);font-size:var(--fs-xs);color:var(--tx2);margin:8px 0}
.generating-badge .spinner{width:12px;height:12px;border-width:1.5px}
.vid-bar{height:4px;background:var(--hover);border-radius:var(--r-full);overflow:hidden;margin-top:8px}
.vid-bar-fill{height:100%;background:var(--accent);border-radius:inherit;transition:width .5s var(--ease-enter)}
.err-text{color:var(--danger);font-size:var(--fs-xs);margin-top:6px}
.doc-download-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 14px;border-radius:var(--r-full);background:var(--surface);box-shadow:var(--hairline);font-size:var(--fs-xs);color:var(--tx1);cursor:pointer}
.doc-download-btn:hover{background:var(--hover)}

/* 附件 chips */
.attach-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;border-radius:var(--r-full);background:var(--hover);font-size:var(--fs-xs);color:var(--tx2);max-width:240px}
.attach-chip .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--tx3);background:none;border:0}
.chip-x:hover{background:var(--pressed);color:var(--tx1)}

/* 提问卡（ask） */
.ask-card{margin:0 0 20px 0;padding:14px 14px 10px;border:0;border-radius:var(--r-2xl);background:var(--sub);max-width:min(560px,86%)}
.ask-card.stale{opacity:.5;pointer-events:none}
.ask-card.stale::before{content:"这轮提问已跳过——请回答下方最新提问";display:block;font-size:12px;color:var(--tx3);margin-bottom:8px}
.ask-title{font-size:var(--fs-xs);color:var(--tx3);font-weight:500;margin-bottom:8px}
.ask-q{margin-bottom:6px}
.ask-head{font-size:var(--fs-sm);font-weight:500;margin-bottom:2px}
.ask-body{font-size:var(--fs-sm);line-height:1.55;margin-bottom:8px;white-space:pre-wrap;color:var(--tx2)}
.ask-opt{display:block;width:100%;text-align:left;border:0;box-shadow:0 0 0 .5px var(--line);background:var(--surface);border-radius:var(--r-xl);padding:10px 12px;margin-bottom:6px;cursor:pointer;font-size:var(--fs-sm);color:var(--tx1);transition:box-shadow var(--dur-1),background var(--dur-1)}
.ask-opt:hover{background:var(--hover)}
.ask-opt.picked{box-shadow:0 0 0 1.5px var(--accent)}
.ask-opt-label{font-weight:500;margin-right:6px}
.ask-opt-desc{color:var(--tx3);font-size:var(--fs-xs)}
.ask-free{display:flex;gap:6px;margin-top:4px}
.ask-input{flex:1;border:0;box-shadow:0 0 0 .5px var(--line-2);border-radius:var(--r-lg);padding:8px 10px;font-size:var(--fs-xs);background:var(--surface);color:var(--tx1);outline:none}
.ask-send{border:0;border-radius:var(--r-lg);padding:0 14px;background:var(--btn-bg);color:var(--btn-tx);cursor:pointer;font-size:var(--fs-xs)}
.ask-submit-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.ask-submit{border:0;border-radius:var(--r-full);padding:8px 18px;background:var(--btn-bg);color:var(--btn-tx);cursor:pointer;font-size:var(--fs-xs)}
.ask-submit:disabled{background:var(--g200);color:var(--g0);cursor:not-allowed}
[data-theme="dark"] .ask-submit:disabled{background:var(--g600);color:var(--g300)}
.ask-progress{font-size:var(--fs-xs);color:var(--tx3)}
.ask-answered{font-size:var(--fs-xs);color:var(--ok);margin-top:4px}
.ask-card.ask-failed::after{content:"回复失败——请直接在对话里说明您的选择";display:block;font-size:12px;color:var(--danger);margin-top:6px}

/* ═══ 输入胶囊（composer） ═══ */
.chat-input-area{
  width:min(768px,calc(100% - 32px));margin:0 auto 14px;
  background:var(--surface);border:0;border-radius:var(--r-pill);
  box-shadow:var(--hairline),var(--sh-2);padding:8px;
  transition:box-shadow var(--dur-1);
}
.chat-input-area:focus-within{box-shadow:0 0 0 .5px var(--line-2),var(--sh-2)}
#attachBar{display:none;gap:6px;align-items:center;flex-wrap:wrap;padding:2px 4px 6px}
.chat-toolbar{display:flex;align-items:center;gap:6px;padding:2px 2px 0;margin:0;flex-wrap:wrap}
.chat-toolbar #charCount,.chat-toolbar [id="charCount"]{margin-left:auto;padding-right:8px;font-size:11px!important;color:var(--tx3)!important;font-variant-numeric:tabular-nums}
.chat-input-row{display:flex;gap:6px;align-items:flex-end;padding:0}
.chat-input-row textarea{
  flex:1;padding:9px 10px;border-radius:0;border:0;box-shadow:none;
  font-family:var(--f-ui);font-size:15px;line-height:1.5;resize:none;outline:none;
  background:transparent;color:var(--tx1);min-height:38px;max-height:180px;letter-spacing:var(--ls-body);
}
.chat-input-row textarea::placeholder{color:var(--tx3)}
.chat-input-row textarea:focus{border:0;box-shadow:none}
.send-btn{
  width:34px;height:34px;border-radius:50%;background:var(--btn-bg);color:var(--btn-tx);
  border:0;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-1),opacity var(--dur-1);margin-bottom:2px;
}
.send-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.send-btn:hover{background:var(--btn-hover);box-shadow:none}
.send-btn:disabled{background:var(--g200);color:var(--g0);cursor:not-allowed}
[data-theme="dark"] .send-btn:disabled{background:var(--g600);color:var(--g300)}
.tool-btn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-full);
  background:transparent;border:0;box-shadow:none;font-size:var(--fs-xs);color:var(--tx2);cursor:pointer;transition:background var(--dur-1),color var(--dur-1);
}
.tool-btn:hover{background:var(--hover);color:var(--tx1);border:0}
.tool-btn.active{background:var(--accent-soft);color:var(--accent)}
.tool-btn .ico{width:15px;height:15px}

/* 员工选择器 */
.agent-picker{position:relative}
.agent-btn{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 10px 0 4px;
  border-radius:var(--r-full);background:var(--hover);border:0;
  cursor:pointer;font-size:var(--fs-xs);font-weight:500;color:var(--tx1);transition:background var(--dur-1);white-space:nowrap;
}
.agent-btn:hover{background:var(--pressed)}
.agent-btn-av{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}
.agent-btn-av img{width:100%;height:100%;object-fit:cover}
.agent-btn-arrow{display:inline-flex;width:12px;height:12px;color:var(--tx3);margin-left:1px}
.agent-btn-arrow svg{width:12px;height:12px}
.agent-popover{
  position:absolute;top:calc(100% + 8px);left:0;z-index:100;
  background:var(--surface);border:0;border-radius:var(--r-xl);
  box-shadow:var(--hairline),var(--sh-2);padding:6px;min-width:260px;max-width:340px;
  display:none;max-height:340px;overflow-y:auto;
}
.agent-popover.up{top:auto;bottom:calc(100% + 8px)}
.agent-popover.open{display:block;animation:popIn .18s var(--ease-enter)}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.agent-popover-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-lg);cursor:pointer;transition:background var(--dur-1)}
.agent-popover-item:hover{background:var(--hover)}
.agent-popover-item.active{background:var(--sel)}
.agent-popover-item .ap-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0}
.agent-popover-item .ap-av img{width:100%;height:100%;object-fit:cover}
.agent-popover-item .ap-nm{font-weight:500;font-size:var(--fs-xs);color:var(--tx1)}
.agent-popover-item .ap-tg{font-size:11px;color:var(--tx3);margin-top:1px}
.agent-popover-item .ap-tier{margin-left:auto}

/* ═══ 其余页面模式（第二波页面共用） ═══ */
.policy-content{max-width:760px;margin:0 auto;font-size:var(--fs-sm);line-height:1.8;color:var(--tx1)}
.policy-content h1{font-size:var(--fs-2xl);margin-bottom:8px}
.policy-content h2{font-size:var(--fs-lg);margin:24px 0 8px}
.policy-content p{margin-bottom:10px;color:var(--tx2)}
.faq-item{background:var(--surface);border-radius:var(--r-2xl);box-shadow:var(--hairline);padding:16px 18px;margin-bottom:10px}
.faq-item h3{font-size:var(--fs-sm);font-weight:500;margin-bottom:6px}
.faq-item p{font-size:var(--fs-sm);color:var(--tx2)}
.wxqrd{background:var(--surface);border-radius:var(--r-4xl);box-shadow:var(--hairline);padding:24px;text-align:center}
/* .entrant 是入场动画包裹类（各页自定义），不在此定义布局 */
.gallery-thumb{border-radius:var(--r-2xl);overflow:hidden;background:var(--hover);cursor:zoom-in}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-prompt{font-size:var(--fs-xs);color:var(--tx3);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lightbox-nav{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.kb-tab,.kb-panel{}
footer{text-align:center;padding:24px;font-size:var(--fs-xs);color:var(--tx3)}

/* ═══════════════════════ 手机端 app 化 ═══════════════════════ */
@media(max-width:900px){
  body.app{padding-left:0}
  .menu-toggle{display:flex}
  /* 抽屉 */
  .side{
    transform:translateX(-102%);transition:transform var(--dur-2) var(--ease-enter);
    width:min(84vw,320px);border-right:0;border-radius:0 var(--r-4xl) var(--r-4xl) 0;
    box-shadow:var(--sh-3);background:var(--surface);
  }
  .side.open{transform:none}
  body.app:has(.side.open)::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:95}
  body:has(.side.open) .menu-toggle{opacity:0;pointer-events:none;transition:opacity var(--dur-1)}
  /* 顶栏：居中页名 */
  .ds-topbar{justify-content:center;height:48px;padding:0 56px}
  .ds-topbar .ds-spacer{display:none}
  .ds-topbar h1{font-size:15px}
  .ds-topbar .ds-crumb,.ds-topbar .ds-online{display:none}
  .page-wrap{padding:20px 16px 96px}
  .page-title{font-size:var(--fs-xl)}
  .emps{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:1fr}
  /* 聊天：输入胶囊钉底 + 安全区 */
  body.has-ds-topbar .chat-layout{height:calc(100dvh - var(--ds-top-h,48px))}
  .chat-messages{padding:16px 16px 8px}
  .chat-input-area{
    position:fixed;left:0;right:0;bottom:0;width:auto;
    margin:0 8px calc(8px + env(safe-area-inset-bottom));
    border-radius:var(--r-pill);
  }
  .chat-messages{padding-bottom:96px}
  .welcome{padding:12vh 16px 32px}
  .msg.user .msg-bubble{max-width:84%}
  .chat-input-row textarea,.modal input,.modal select,.modal textarea,.field,.login-card input,textarea.prompt-box,input.search-box{font-size:16px}
  .btn{height:38px}
  .btn-sm{height:32px}
  .toast-container{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(hover:hover){
  .item:hover{background:var(--hover)}
}

/* ═══ 无障碍：减弱动效（spinner/typing 例外——它们是"正在工作"的唯一信号） ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .typing span{animation-duration:1.4s!important;animation-iteration-count:infinite!important}
  .spinner,.generating-badge .spinner{animation-duration:.9s!important;animation-iteration-count:infinite!important}
}

/* ═══ 过渡桥：旧 token 名 → 新系统（存量页面内联样式/模板兼容层；Wave 2 全量清理后移除） ═══ */
:root,[data-theme]{
  --ink:var(--tx1);--ink-2:var(--tx2);--ink-3:var(--tx3);
  --text:var(--tx1);--text2:var(--tx2);--text3:var(--tx3);
  --card:var(--surface);--bg-sub:var(--sub);--bg-sunken:var(--sunken);--bg-hover:var(--hover);
  --bg2:var(--sub);--bg3:var(--sub);--bg4:var(--sunken);
  --border:var(--line);--border-strong:var(--line-2);--border2:var(--line-2);--border3:var(--line-2);
  --brand:var(--accent);--brand-hover:var(--accent);--brand-active:var(--accent);
  --brand-ink:var(--accent);--accent2:var(--accent);
  --brand-soft:var(--accent-soft);--brand-soft-2:var(--accent-soft);--brand-soft-border:var(--line-2);
  --blue-bg:var(--accent-soft);
  --green:var(--ok);--green-strong:var(--ok);--green-soft:var(--ok-soft);--green-border:var(--ok-soft);
  --red:var(--danger);--red-strong:var(--danger);--red-soft:var(--danger-soft);--red-border:var(--danger-soft);
  --amber:var(--warn);--amber-strong:var(--warn);--amber-soft:var(--warn-soft);--amber-border:var(--warn-soft);
  --gold:var(--warn);--gold-strong:var(--warn);--gold-soft:var(--warn-soft);--gold-border:var(--warn-soft);
  --jade:var(--ok);--jade-strong:var(--ok);--indigo2:var(--tx2);
  --sans:var(--f-ui);--serif:var(--f-ui);
  --r:14px;--radius:14px;--radius-sm:12px;--radius-xs:10px;--radius-lg:20px;--pill:9999px;
  --sh1:var(--sh-1);--sh2:var(--sh-2);--sh3:var(--sh-3);--sh4:var(--sh-3);
  --ring:0 0 0 3px var(--accent-soft);
  --t:var(--dur-1);--t-slow:var(--dur-2);--transition:var(--dur-1);--ease:var(--ease-enter);
}

/* ═══ 模块微色系应用（后置覆盖组件默认底色；容器 .tint-x + 图标块 .tic） ═══ */
.tic{background:var(--tint-soft,var(--hover))!important;color:var(--tint,var(--tx2))!important}
.empty-state .icon{color:var(--tint,var(--tx3))}

/* ═══════════════════════ 2026-10-16 使用优化（老板四图） ═══════════════════════ */

/* ── 图4：图片附件缩略图（员工群聊输入框上方，发送前所见即所得） ── */
.attach-img{position:relative;width:56px;height:56px;padding:0;border-radius:14px;background:var(--hover);overflow:visible}
.attach-img .chip-thumb{width:56px;height:56px;object-fit:cover;border-radius:14px;display:block;box-shadow:var(--hairline)}
.attach-img .chip-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:rgba(13,13,13,.78);color:#fff}
.attach-img .chip-x svg{width:9px;height:9px}
.attach-img .chip-x:hover{background:#000;color:#fff}
.attach-img.no-thumb{width:auto;height:30px;padding:0 8px 0 10px;border-radius:var(--r-full)}
.attach-img.no-thumb .chip-thumb{display:none}
.attach-img.no-thumb::before{content:'图片';font-size:var(--fs-xs);color:var(--tx2)}

/* ── 图3：员工群聊右侧「任务历史」栏（桌面常驻；≤1100px 收成浮层+右下角按钮） ── */
/* 2026-10-16 有头浏览器实测修复：加了第二列后 .chat-layout 必须转 row——
   否则 column 布局下 chat-main 被 flex-shrink 压到高度 0（消息区塌陷/输入框上浮）。
   .chat-main 补 flex:1 吃掉剩余宽度（max-width 820 + auto 居中仍生效）。 */
.chat-layout{flex-direction:row}
.chat-main{flex:1}
.chat-history{width:296px;flex:none;display:flex;flex-direction:column;min-height:0;border-left:.5px solid var(--line);background:var(--bg)}
.ch-head{display:flex;align-items:center;gap:2px;padding:12px 10px 8px 16px;flex-shrink:0}
.ch-title{font-size:var(--fs-sm);font-weight:600;color:var(--tx1);letter-spacing:var(--ls-head);margin-right:auto}
.ch-ibtn{width:28px;height:28px;border-radius:var(--r-lg);display:inline-flex;align-items:center;justify-content:center;color:var(--tx3);background:none;border:0;cursor:pointer;flex-shrink:0}
.ch-ibtn:hover{background:var(--hover);color:var(--tx1)}
.ch-ibtn svg{width:15px;height:15px}
.ch-close{display:none}
.ch-list{flex:1;overflow-y:auto;padding:2px 8px 12px}
.ch-loading{display:flex;justify-content:center;padding:24px}
.ch-empty{text-align:center;color:var(--tx2);font-size:var(--fs-sm);padding:28px 12px;line-height:1.9}
.ch-empty span{display:block;color:var(--tx3);font-size:var(--fs-xs)}
.ch-item{padding:10px;border-radius:var(--r-xl);cursor:pointer;transition:background var(--dur-1)}
.ch-item:hover{background:var(--hover)}
.ch-item.active{background:var(--sel)}
.ch-i-title{font-size:var(--fs-sm);color:var(--tx1);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ch-i-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:var(--fs-xs);color:var(--tx3);min-width:0}
.ch-i-agent{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-i-time{margin-left:auto;flex:none}
.ch-pill{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:var(--r-full);font-size:11px;flex:none}
.ch-pill.run{background:var(--accent-soft);color:var(--accent)}
.ch-pill.run i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite ease-in-out both}
.ch-fab{display:none;position:fixed;right:14px;bottom:calc(104px + env(safe-area-inset-bottom));z-index:90;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-full);border:0;background:var(--btn-bg);color:var(--btn-tx);font-size:var(--fs-xs);font-weight:500;cursor:pointer;box-shadow:var(--sh-2);font-family:inherit}
.ch-fab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){
  .chat-history{position:fixed;top:0;right:0;bottom:0;width:min(86vw,320px);z-index:150;background:var(--surface);box-shadow:var(--sh-3);border-left:0;transform:translateX(103%);transition:transform var(--dur-2) var(--ease-enter)}
  .chat-history.open{transform:none}
  .ch-fab{display:inline-flex}
  .ch-close{display:inline-flex}
}

/* ── 图1/图2：新手引导（「想怎么开始?」选择卡 + 聚光灯步骤） ── */
#hftWrap{position:fixed;inset:0;z-index:7500;display:none}
#hftWrap.on{display:block}
#hftSpot{position:fixed;pointer-events:none;border-radius:14px;box-shadow:0 0 0 2px var(--accent),0 0 0 9999px rgba(0,0,0,.55);transition:left var(--dur-2) var(--ease-move),top var(--dur-2) var(--ease-move),width var(--dur-2) var(--ease-move),height var(--dur-2) var(--ease-move),border-radius var(--dur-2) var(--ease-move)}
#hftTip{position:fixed;width:min(340px,calc(100vw - 24px));background:var(--surface);border-radius:var(--r-3xl);box-shadow:var(--hairline),var(--sh-3);padding:14px 16px 12px;z-index:7600;animation:modalIn var(--dur-2) var(--ease-enter)}
.hft-tip-head{display:flex;align-items:center;margin-bottom:6px}
.hft-step{font-size:var(--fs-xs);color:var(--tx3);font-variant-numeric:tabular-nums}
.hft-x{margin-left:auto;width:26px;height:26px;border-radius:var(--r-lg);display:inline-flex;align-items:center;justify-content:center;color:var(--tx3);background:none;border:0;cursor:pointer}
.hft-x:hover{background:var(--hover);color:var(--tx1)}
.hft-x svg{width:14px;height:14px}
.hft-tip-title{font-size:var(--fs-sm);font-weight:600;color:var(--tx1);letter-spacing:var(--ls-head);margin-bottom:4px}
.hft-tip-desc{font-size:var(--fs-xs);color:var(--tx2);line-height:1.75}
.hft-tip-foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.hft-sp{flex:1}
.hft-btn{border:0;border-radius:var(--r-full);height:30px;padding:0 14px;font-size:var(--fs-xs);font-weight:500;cursor:pointer;font-family:inherit;background:transparent;color:var(--tx2)}
.hft-btn:hover{background:var(--hover);color:var(--tx1)}
.hft-next{background:var(--btn-bg);color:var(--btn-tx)}
.hft-next:hover{background:var(--btn-hover);color:var(--btn-tx)}
#hftModal{position:fixed;inset:0;z-index:8600;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity var(--dur-2)}
#hftModal.on{display:flex;opacity:1}
.hft-chooser{background:var(--surface);border-radius:var(--r-4xl);box-shadow:var(--sh-3);width:min(520px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:22px 22px 14px;animation:modalIn var(--dur-2) var(--ease-enter)}
.hft-ch-head{display:flex;align-items:center}
.hft-ch-head h3{font-size:var(--fs-lg);font-weight:600;color:var(--tx1);letter-spacing:var(--ls-head)}
.hft-ch-head .hft-x{width:30px;height:30px}
.hft-ch-sub{font-size:var(--fs-xs);color:var(--tx3);margin:6px 0 16px;line-height:1.7}
.hft-opt{display:flex;gap:12px;width:100%;text-align:left;padding:14px;border-radius:var(--r-2xl);background:transparent;border:0;box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow var(--dur-1),background var(--dur-1);margin-bottom:10px;font-family:inherit}
.hft-opt:hover{background:var(--hover);box-shadow:0 0 0 1px var(--line-2)}
.hft-opt-ic{width:38px;height:38px;border-radius:var(--r-xl);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.hft-opt-ic svg{width:19px;height:19px}
.hft-opt-main{min-width:0}
.hft-opt-row{display:flex;align-items:center}
.hft-opt-row b{font-size:var(--fs-sm);font-weight:600;color:var(--tx1)}
.hft-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-full);background:var(--sel);color:var(--tx2);font-size:11px;font-style:normal;margin-left:8px}
.hft-opt-d{display:block;font-size:var(--fs-xs);color:var(--tx3);line-height:1.7;margin-top:3px}
.hft-ch-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.hft-manual{font-size:var(--fs-xs);color:var(--accent);text-decoration:none;padding:6px 0}
.hft-manual:hover{text-decoration:underline}
.hft-later{color:var(--tx3)}