/* ===== 云枢智控 · 移动端组件库（mobile.components.css） =====
   20260818 组件库接入：全部 .wb-* 组件类引用 mobile.tokens.css Design Token（一键全局改）。
   权威基准：《移动端UI参照微信》气泡/按钮/Tab 规格 + 《全局UI配色规范》。
   亮色默认 + 暗色随 Token 切换；被 /static/mobile.html 在 mobile.css 之前引用。单文件 ≤500 行。
   覆盖：输入框/消息气泡/按钮/Tab/表格卡/底部导航/弹窗/抽屉/顶栏/图标钮/图片卡/
   按住说话守卫/思考回看条/分区标题/面板。 */

/* ===== 输入框（全局统一组件） =====
   圆角16 底surface 左麦克风 占位 右+；文字随字数向上自动扩展（配合 JS 动态 height）；
   键盘弹出盖住底部、不顶导航。 */
.wb-input{
  display:flex;align-items:flex-end;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-input);padding:12px 14px;min-height:56px;
}
.wb-input textarea,.wb-input input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  color:var(--text);font-size:var(--fs-l3);line-height:1.5;
  resize:none;max-height:calc(var(--fs-l3) * 4);
}
.wb-input textarea::-webkit-input-placeholder,
.wb-input input::-webkit-input-placeholder{color:var(--text-3)}
.wb-input textarea:focus,.wb-input input:focus{border-color:var(--accent)}
.wb-input .wb-mic{color:var(--accent);flex-shrink:0;display:inline-flex}
.wb-input .wb-plus{color:var(--text-2);flex-shrink:0;display:inline-flex}

/* ===== 消息气泡（权威规格：自己=蓝底#007AFF白字右对齐，右下角4pt；对方=白底灰字左对齐，左下角4pt；圆角8-12pt；文字16pt；最大宽80%） ===== */
.wb-bubble{
  max-width:80%;padding:11px 14px;border-radius:var(--r-bubble);
  font-size:var(--fs-l3);line-height:1.5;word-break:break-word;
  box-shadow:var(--sh-card);
}
.wb-bubble-user{align-self:flex-end;background:var(--bubble-user);color:#fff;border-bottom-right-radius:4px}
.wb-bubble-ai{align-self:flex-start;background:var(--bubble-ai);color:var(--text);border-bottom-left-radius:4px}
.wb-bubble-foot{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:var(--fs-l5);color:var(--text-3)}
.wb-bubble-ops{display:flex;align-items:center;gap:2px;margin-left:auto}

/* ===== 按钮（胶囊20 / 主操作纯色蓝#007AFF；选中蓝/白字 未选灰字；按压反馈） ===== */
.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 20px;border:1px solid var(--border);
  border-radius:var(--r-btn);background:var(--surface);color:var(--text);
  font-size:var(--fs-l3);font-weight:600;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.wb-btn:active{opacity:.85;transform:scale(.98)}
.wb-btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.wb-btn.ghost{background:transparent;color:var(--text-2)}
.wb-btn.selected{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.wb-btn[disabled]{opacity:.5;pointer-events:none}

/* ===== Tab 切换（底 surface 圆角25；选中纯色蓝/白字；未选灰字；无重阴影） ===== */
.wb-tab{
  display:flex;align-items:center;gap:4px;padding:4px;
  background:var(--surface);border-radius:var(--r-tab);
}
.wb-tab-item{
  flex:1;min-height:40px;padding:0 16px;border:none;border-radius:calc(var(--r-tab) - 4px);
  background:transparent;color:var(--text-2);font-size:var(--fs-l3);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.wb-tab-item.active{background:var(--accent);color:#fff}
.wb-tab-item:active{opacity:.85}

/* ===== 表格卡（surface 圆角12-16；表头16 SemiBold；行分隔 border；蓝对勾） ===== */
.wb-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:12px;box-shadow:var(--sh-card);
}
.wb-card table{width:100%;border-collapse:collapse;font-size:var(--fs-l3);color:var(--text)}
.wb-card th{font-size:var(--fs-l3);font-weight:600;text-align:left;padding:8px;border-bottom:1px solid var(--border)}
.wb-card td{padding:8px;border-bottom:1px solid var(--border);color:var(--text-2)}
.wb-card tr:last-child td{border-bottom:none}
.wb-check{display:inline-flex;align-items:center;gap:4px;color:var(--success);font-weight:600}
.wb-check::before{content:"✓";font-weight:700}
.wb-card .wb-icon-btn{float:right}

/* ===== 底部导航（锁贴底 / 键盘盖住不顶起 / SVG 线性图标 / 选中蓝点缀） ===== */
.wb-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:40;max-width:480px;margin:0 auto;
  display:flex;background:var(--surface);border-top:1px solid var(--border);
  min-height:calc(56px + env(safe-area-inset-bottom));
  padding:4px 0 calc(4px + env(safe-area-inset-bottom));
}
.wb-nav-item{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:2px 0 4px;background:none;border:none;color:var(--text-2);font-size:var(--fs-l5);cursor:pointer;
}
.wb-nav-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-nav-item.active{color:var(--accent);font-weight:600}
.wb-nav-item.active::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.wb-nav-item .wb-nav-badge{
  position:absolute;top:4px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:8px;
  background:var(--danger);color:#fff;font-size:var(--fs-l6);line-height:16px;text-align:center;padding:0 4px;
}

/* ===== 弹窗（surface 圆角16；居中；轻阴影） ===== */
.wb-modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:24px}
.wb-modal{
  width:100%;max-width:340px;background:var(--surface);border-radius:var(--r-bubble);
  padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;
}
.wb-modal h3{font-size:var(--fs-l2);color:var(--text);font-weight:700}
.wb-modal-desc{font-size:var(--fs-l3);color:var(--text-2);line-height:1.5}
.wb-modal .wb-btn{align-self:stretch;min-height:46px}

/* ===== 抽屉面板（靠左；宽≤1/2 默认） ===== */
.wb-drawer-mask{position:fixed;inset:0;z-index:249;background:rgba(0,0,0,.5)}
.wb-drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:250;width:min(50%,260px);
  background:var(--surface);border-right:1px solid var(--border);
  box-shadow:var(--sh);display:flex;flex-direction:column;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ===== 顶栏（fixed + safe-area-inset-top 补偿；不再随滚动滑走） ===== */
.wb-topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;max-width:480px;margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.wb-topbar h1{font-size:var(--fs-l2);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-topbar .wb-sub{font-size:var(--fs-l5);color:var(--text-2);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== SVG 线性图标按钮（2px 20-24px；白/浅灰；填充仅用于状态） ===== */
.wb-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:6px;background:transparent;border:none;cursor:pointer;
  color:var(--text);border-radius:var(--r-icon);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.wb-icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-icon-btn:active{opacity:.7;background:var(--bar-bg)}

/* ===== 图片卡容器（object-fit:cover 全屏无吞——首页像素办公室/附件图） ===== */
.wb-img-cover-wrap{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--surface)}
.wb-img-cover{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 按住说话守卫（防文本选择/长按菜单——安卓按住说话触发选择跳掉） ===== */
.wb-press-talk{
  touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}

/* ===== 思考回看条（深度思考折叠/展开回看） ===== */
.wb-thinking{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:8px 12px;margin:6px 0;
  font-size:var(--fs-l3);color:var(--text-2);cursor:pointer;
}
.wb-thinking .wb-thinking-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:wb-pulse 1s ease-in-out infinite}
@keyframes wb-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== 分区标题（页面分区小标，替代硬编码色值） ===== */
.wb-section{
  display:flex;align-items:center;gap:8px;padding:8px 4px;
  font-size:var(--fs-l3);font-weight:600;color:var(--text-2);
}

/* ===== 面板（归拢：连接电脑面板收窄 → 宽≤1/2 默认） ===== */
.wb-panel{
  width:min(50%,260px);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:12px;box-shadow:var(--sh-card);
}