/* WorkBuddy 模拟窗口（落地页 hero）
 *
 * 外壳按真实客户端还原（参照 public/workbuddy-1.webp，源图 1920x1008）：
 * Windows 菜单栏 + 左侧边栏（占宽 20.3%）+ 主区（标题行 / 内容流 / 输入框）。
 *
 * 为什么手绘而不裁切截图：主区标题与侧边栏账号要跟品牌变（7 品牌共用本模板），
 * 位图冻结改不了；且深浅主题各需一套素材。
 *
 * 两个关键约定：
 *   1) 窗口比例走 --wb-ratio（用户要求可调）。所有尺寸相对窗口宽度（cqw / em），
 *      改一处宽度整窗等比缩放，不需要逐个调数值。
 *   2) 主区内容轨 .wb-flow 贴底（bottom:0）绝对定位 —— 内容变高时自然向上顶，
 *      溢出部分被 .wb-stream 裁掉。等价于真对话的"往上滚"，且不需要监听 scroll。
 */

/* 图标 sprite：定义一次、全窗复用。
   ⚠️ 描边属性必须设在**外层 <svg class="i">** 上，不能写在 `.wb-sprite symbol` 上 ——
   <use> 的实例树继承链是「use ← 外层 svg」，symbol 自身的计算样式不会带进实例，
   写在 symbol 上等于没写：图标会退回浏览器默认的 fill:black / stroke:none，
   整排渲染成黑色实心块（截图对比时表现为"远看像一排小方块"）。
   颜色走 currentColor，父级设 color 即可（.wb-navi / .wb-mark 等）。 */
.wb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wb-win svg.i {
  fill: none; stroke: currentColor; stroke-width: 1.45;
  stroke-linecap: round; stroke-linejoin: round;
}

.wb { container-type: inline-size; position: relative; }

.wb-win {
  font-size: clamp(9px, 1.05cqw, 13px);
  aspect-ratio: var(--wb-ratio, 1920 / 1008);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(var(--rgb-1), .25);
  box-shadow: 0 30px 90px rgba(var(--rgb), .28), 0 4px 18px rgba(0, 0, 0, .5);
  background: #fff;
  color: #1f1f1f;
  line-height: 1.55;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.wb-win *, .wb-win *::before, .wb-win *::after { box-sizing: border-box; }
.wb-win svg.i { width: 1.15em; height: 1.15em; flex: none; }

/* ===== 菜单栏 =====
   左上角是「☰ 🔍 ⌄ | 关于(A) 编辑(E) 窗口(W) 帮助(H)」——
   那三个图标属于标题栏，不属于侧边栏（第一版放错了位置）。 */
.wb-bar {
  flex: none; height: 1.95em;
  display: flex; align-items: center; gap: .95em;
  padding: 0 .9em;
  background: #f7f7f7; border-bottom: 1px solid #e8e8e8;
  font-size: .92em; color: #5f5e5a;
}
.wb-barico { display: flex; align-items: center; gap: .7em; }
.wb-sep { flex: none; width: 1px; height: 1.1em; background: #dcdcdc; }
.wb-winbtns { margin-left: auto; display: flex; align-items: center; gap: 1.7em; }
.wb-min { width: .85em; border-top: 1px solid #5f5e5a; }
.wb-max { width: .74em; height: .74em; border: 1px solid #5f5e5a; border-radius: 1px; }
.wb-close { position: relative; width: .82em; height: .82em; }
.wb-close::before, .wb-close::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #5f5e5a;
}
.wb-close::before { transform: rotate(45deg); }
.wb-close::after { transform: rotate(-45deg); }

/* ===== 主体两栏 ===== */
.wb-body { flex: 1; display: flex; min-height: 0; }

/* ===== 侧边栏 =====
   数值来自对 public/workbuddy-1.webp（1920×1008）的像素量化，再按 1100/1920 换算：
     导航行距 49~51px → 28.5px（本窗）    图标起点 36px → 20.6px
     导航字号 ≈20px/字 → 11.2px           文字起点 73px → 41.8px
   实测过：字号本来就接近，差异主要在内缩与行距 —— 第一版内缩少了约 8px、行距紧 1.6px，
   整列因此显得"贴边、发挤"，与截图观感不符。 */
.wb-side {
  flex: none; width: 20.3%;
  display: flex; flex-direction: column; gap: .15em;
  padding: .85em 1.05em;
  background: #fafafa; border-right: 1px solid #ededed;
  font-size: .95em;
  overflow: hidden;
}
.wb-brandrow { display: flex; align-items: flex-start; gap: .4em; margin-bottom: 1em; }
.wb-brandcol { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wb-brandcol b { font-size: 1.08em; font-weight: 500; white-space: nowrap; }
.wb-brandcol small { font-size: .8em; color: #a3a19a; }
.wb-pill {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .25em;
  border: 1px solid #e4e4e4; border-radius: 999px; padding: .1em .5em;
  font-size: .78em; color: #888780; white-space: nowrap;
}
.wb-navi {
  display: flex; align-items: center; gap: .75em; flex: none;
  padding: .45em .7em; border-radius: .5em; color: #444441;
}
/* 图标不透明度对齐真实客户端：那边导航图标是深色实描边，
   第一版给 .7 导致整列发灰、远看像一排小方块（对比截图后调高）。 */
.wb-navi svg.i { opacity: .88; }
.wb-navi.cur { background: #f0f0ef; color: #1f1f1f; }
.wb-navi.cur svg.i { opacity: 1; }
.wb-navr { margin-left: auto; font-size: .88em; color: #b4b2a9; }

/* 账号行贴底。**不留任务/空间列表** —— 2026-09-17 用户已拍板删掉那两块
   （原本展示的是真实数据：任务数、空间数、真实任务名）。少了列表后侧边栏下半截是空的，
   那是真实的：新账号本来就没有任务列表。别为了"看起来满"再编一份假数据进去。 */
.wb-me {
  margin-top: auto; flex: none; display: flex; align-items: center; gap: .55em;
}
/* 底部账号头像用官方图标（与助理标识同一素材）。
   不再自绘绿圆 + 通用机器人字形：那个字形并不存在于真实客户端里。 */
.wb-ava { width: 2em; height: 2em; flex: none; }
.wb-ava img { display: block; width: 100%; height: 100%; }
.wb-menm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95em; }
.wb-meico { flex: none; display: flex; align-items: center; gap: .6em; color: #8f8d86; }

/* ===== 主区 ===== */
.wb-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wb-head {
  flex: none; display: flex; align-items: center; gap: .8em;
  padding: .9em 1.3em; border-bottom: 1px solid #ededed;
}
.wb-head h3 { margin: 0; font-size: 1.15em; font-weight: 500; }
.wb-head .wb-ico { margin-left: auto; display: flex; gap: 1em; color: #b4b2a9; }

/* 内容流：从顶部起排（与真实客户端一致 —— 首条提问就在顶部）。
   高度超出 .wb-stream 时由 pushUp() 整体上移，把最新内容留在可视区，
   等价于真对话滚动，但不需要滚动条、也不受 scrollTop 与吸附的干扰。 */
.wb-stream { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.wb-flow {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: .85em;
  padding: 1em 1.3em;
  will-change: transform;
}

/* ===== 消息 ===== */
.wb-msg-u { display: flex; justify-content: flex-end; }
.wb-bubble {
  max-width: 78%; background: #f1efe8; border-radius: 1.15em;
  padding: .5em 1em; color: #2c2c2a;
}
.wb-asst { display: flex; flex-direction: column; gap: .6em; }
.wb-asthd { display: grid; grid-template-columns: 1.6em 1fr; column-gap: .55em; align-items: center; }
/* 助理标记走官方 WorkBuddy 图标（assets/landing/workbuddy.png，104×104）。
   不自己画：品牌标识由我们描一遍必然走样，用官方素材才不出错。
   不加 border-radius / overflow —— PNG 自带圆角与透明，再裁会啃掉它的角。 */
.wb-mark {
  grid-row: span 2; width: 1.6em; height: 1.6em; flex: none;
}
.wb-mark img { display: block; width: 100%; height: 100%; }
.wb-asthd b { font-size: 1.05em; font-weight: 500; }
.wb-asthd small { color: #888780; font-size: .92em; }

.wb-steps { display: flex; flex-direction: column; gap: .45em; }
.wb-step { display: flex; align-items: center; gap: .6em; color: #8f8d86; transition: color .3s ease; }
.wb-step.done { color: #2c2c2a; }
.wb-step .wb-sic { width: 1.15em; height: 1.15em; flex: none; display: grid; place-items: center; }
.wb-step em {
  font-style: normal; font-family: Consolas, "Cascadia Mono", monospace;
  font-size: .97em;
}
.wb-step .wb-arg { color: inherit; opacity: .75; }
.wb-spin {
  width: .95em; height: .95em; border-radius: 50%;
  border: .16em solid #ef9f27; border-top-color: transparent;
  animation: wb-rot .75s linear infinite;
}
@keyframes wb-rot { to { transform: rotate(360deg); } }

.wb-txt { color: #2c2c2a; }
.wb-meta { font-size: .92em; color: #888780; }
.wb-meta i { font-style: normal; color: #993c1d; }

/* ===== 图册 ===== */
.wb-album { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6em; margin-top: .6em; }
.wb-tile {
  border: 1px solid #d3d1c7; border-radius: .5em; background: #f1efe8;
  padding: .55em .3em .45em; display: flex; flex-direction: column;
  align-items: center; gap: .4em;
}
/* 图册格子里的主图位：有真实主图就是 <img>，没有则是中性占位块（不是"破图"）。 */
.wb-tile .wb-thumb {
  width: 68%; aspect-ratio: 4 / 3; border-radius: .3em;
  border: 1px solid #d9d5c9;
  background: linear-gradient(158deg, #faf8f3 0%, #ebe8de 58%, #dedacd 100%);
}
.wb-tile img.wb-thumb { display: block; object-fit: cover; background: #f4f2ec; }
.wb-tile b { font-size: .92em; color: #854f0b; font-weight: 500; }

/* ===== 输入区 =====
   真实客户端在输入框下方有免责声明；工具行是「+  权限  模型  麦克风  蓝色发送」。
   （输入框上方的「N 个后台任务运行中」胶囊按用户要求去掉，不还原。） */
.wb-input {
  flex: none; margin: 0 1.3em;
  border: 1px solid #d3d1c7; border-radius: 1.25em;
  padding: 1em 1.1em .8em;
  display: flex; flex-direction: column; gap: .95em;
}
.wb-foot { flex: none; margin: .55em 0 .7em; text-align: center; font-size: .82em; color: #b4b2a9; }
.wb-line { min-height: 1.55em; }
.wb-ph { color: #b4b2a9; }
.wb-typed, .wb-caret { display: none; }
.wb-input.wb-typing .wb-ph { display: none; }
.wb-input.wb-typing .wb-typed { display: inline; color: #1f1f1f; }
.wb-input.wb-typing .wb-caret {
  display: inline-block; width: 1px; height: 1.05em; margin-left: 1px;
  background: #1f1f1f; vertical-align: -.18em;
  animation: wb-blink 1.05s steps(1) infinite;
}
@keyframes wb-blink { 0%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }
.wb-inbar { display: flex; align-items: center; gap: .75em; color: #6f6d67; font-size: .92em; }
.wb-soft { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.wb-inbar .wb-mid { margin-left: auto; display: flex; align-items: center; gap: .7em; }
/* 发送键是品牌蓝，不是黑色（第一版画成黑圆，与真实客户端不符） */
.wb-send {
  width: 2em; height: 2em; border-radius: 50%; background: #2f7fd8;
  display: grid; place-items: center;
}
.wb-send svg.i { width: 1.1em; height: 1.1em; color: #fff; }

/* ===== 循环收尾 =====
   过渡统一由 JS 写在 flow 的内联样式上（pushUp 需要临时关掉它），
   所以这里只管终值，不重复声明 transition。 */
.wb-out .wb-flow { opacity: 0; }

/* ===== JS 未接管时的兜底（无 JS / 脚本加载失败）===== */
.wb-fallback {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(var(--rgb-1), .25);
  box-shadow: 0 30px 90px rgba(var(--rgb), .28);
}
.wb-fallback img { display: block; width: 100%; height: auto; }
.wb-fallback img + img { display: none; }
body.wb-ready .wb-fallback { display: none; }
body.wb-ready .wb { display: block; }
.wb { display: none; }

/* ===== 窄窗：改用固定窗高，不再按比例缩放 =====
   按 1.905 比例缩，窗高 = 窗宽 / 1.905，窄屏下会把对话区压到几十像素
   （真机 390×844 实测：窗 390×205、可视区仅 87px，用户提问被滚出视野 192px）。
   临界值 780px 是反推的：内容 ~288px + 外壳 ~120px ≈ 需要 410px 窗高，
   而 410 × 1.905 ≈ 781 —— 即此宽度以上按比例缩放本来就够高。
   侧边栏另在 620px 收（真实客户端窄窗也收侧边栏），两个临界点职责不同。 */
@container (max-width: 780px) {
  .wb-win { aspect-ratio: auto; height: 410px; }
}
/* 侧边栏收起临界点 700px（原 620px）。
   改的理由：最长标签「专家 · 技能 · 连接器」在字号触底 9px 时需要约 137px，
   而侧边栏宽 = 窗宽 × 20.3% —— 窗宽低于约 680px 就装不下会换行。
   780px 那个临界点管的是窗高（够不够放内容），这两个临界点职责不同，别合并。 */
@container (max-width: 700px) {
  .wb-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-spin, .wb-caret { animation: none; }
  .wb-flow, .wb-out .wb-flow { transition: none; }
}