/* ============================================================
   英特费斯 INTERFACE · 吉祥物层 bot.css（2026-09-06）

   about/join.html 首屏那只「把 JOIN 推走、再把 SAVEHMI 拉出来」的小机器人
   反响很好，这一层把它从那一处动画里抽出来做成全站可复用的角色：
   同一副机身（几何与配色跟 join.css 里的 .m-* 逐点一致），
   13 种放置方式，各自一个交互点子。

   规则（沿用 vibe.css 的约束）：
     · 只加 .bot / .bot* 前缀的新类，不覆写 aw.css / vibe.css 的任何选择器
     · 机器人一律是装饰件：aria-hidden，没有 JS 就整只不出现，不影响内容
     · 位移 ≤ 22px、时长 ≤ 520ms（走路循环例外，它是持续动作）
     · prefers-reduced-motion 下：保留静止姿态与颜色，掐掉所有循环动画
     · .b-out 是「地色描边」，靠 --bot-bg 拿当前底色 —— 放到非 --ground
       的底上（深墨卡、浅彩卡）必须在宿主上重设 --bot-bg，否则会啃出白边

   机身零件（viewBox -4 -8 128 164，与 join 相同）：
     头 24,14 72×56 r21 · 屏 32,22 56×38 r14 · 眼 (52,40)(74,40) r6
     身 32,66 56×44 r22 · 前臂 74,78→112,82 · 后臂 72,84→106,92
     腿 前 66,104 后 38,104 · 影 (60,156) 34×6
   ============================================================ */

:root {
  --bot-ease: cubic-bezier(0.22, 0.65, 0.25, 1);
  --bot-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   0. 宿主
   ------------------------------------------------------------ */
.bot {
  --bot-w: 72px;
  --bot-bg: var(--ground);
  display: block;
  width: var(--bot-w);
  aspect-ratio: 128 / 164;
  position: relative;
  flex: none;
  pointer-events: none;
}
.bot .b-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* JS 还没把机身塞进来之前不占位、不闪 */
.bot:empty { visibility: hidden; }

/* ------------------------------------------------------------
   1. 机身配色（= join.css 的 .m-* 同一套）
   ------------------------------------------------------------ */
.b-torso, .b-skull        { fill: var(--ink); }
.b-leg--f rect            { fill: var(--ink); }
.b-arm--f > path          { stroke: var(--ink); }
.b-leg--b rect, .b-ear    { fill: #5a5a5a; }
.b-arm--b path            { stroke: #5a5a5a; }
.b-hand                   { fill: #fff; stroke: var(--ink); stroke-width: 3.5; }
.b-hand--b                { fill: #eaeaea; stroke: #4d4d4d; }
.b-ant                    { stroke: var(--ink); }
.b-screen, .b-tag         { fill: var(--accent); }
.b-dot                    { fill: var(--violet); }
.b-glare                  { fill: #fff; opacity: 0.17; }
.b-sh                     { fill: rgba(34, 34, 34, 0.16); }
.b-eye                    { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.b-mouth                  { stroke: var(--ink); fill: none; }
.b-shut                   { stroke: var(--ink); fill: none; opacity: 0; }
.b-brow                   { stroke: var(--ink); fill: none; opacity: 0; }
.b-out                    { fill: var(--bot-bg); stroke: var(--bot-bg); }
.b-scan                   { fill: #fff; opacity: 0; }

/* 静止姿态：双臂垂下（与 join 终态同角度） */
.b-arm--f { transform-origin: 74px 78px; transform: rotate(48deg); }
.b-arm--b { transform-origin: 72px 84px; transform: rotate(52deg); }
.b-head   { transform-origin: 60px 66px; }
.b-leg--f, .b-leg--f .b-run { transform-origin: 74px 106px; }
.b-leg--b, .b-leg--b .b-run { transform-origin: 46px 106px; }

/* 天线灯：全站统一的呼吸，说明「它在待机」 */
.b-dot { transform-origin: 60px 1.5px; animation: botDot 2.6s ease-in-out infinite; }
@keyframes botDot {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.24); opacity: 0.72; }
}

/* ------------------------------------------------------------
   2. 表情状态机（JS 加类，CSS 只负责长相）
   ------------------------------------------------------------ */
.bot .b-eye  { transition: transform 90ms linear; }
.bot .b-mouth, .bot .b-shut, .bot .b-brow { transition: opacity 0.18s var(--bot-ease); }

/* 眨眼 */
.bot.is-blink .b-eye { transform: scaleY(0.1); }

/* 打瞌睡：眼睛变成两道横线，嘴收成小 o，ZZZ 往上飘 */
.bot.is-doze .b-eye  { opacity: 0; }
.bot.is-doze .b-shut { opacity: 1; }
.bot.is-doze .b-mouth { opacity: 0; }
.bot.is-doze .b-dot  { animation-duration: 5.2s; }
.bot.is-doze { animation: botSnore 3.4s ease-in-out infinite; }
@keyframes botSnore {
  0%, 100% { transform: translateY(0)     rotate(0); }
  50%      { transform: translateY(2.5px) rotate(-1.6deg); }
}
.bot__z {
  position: absolute; left: 82%; top: 0;
  font: 600 13px/1 var(--font); color: var(--mut-2);
  opacity: 0; pointer-events: none;
}
.bot.is-doze .bot__z { animation: botZ 2.4s ease-out infinite; }
.bot__z:nth-of-type(2) { animation-delay: 0.8s !important; font-size: 11px; }
.bot__z:nth-of-type(3) { animation-delay: 1.6s !important; font-size: 9px; }
@keyframes botZ {
  0%        { opacity: 0; transform: translate(0, 6px) scale(0.7); }
  22%       { opacity: 1; }
  100%      { opacity: 0; transform: translate(14px, -26px) scale(1.05); }
}

/* 惊醒：弹一下、眉毛出来 */
.bot.is-alert { animation: botStartle 0.5s var(--bot-pop) both; }
.bot.is-alert .b-brow { opacity: 1; }
@keyframes botStartle {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-7px) scale(0.94, 1.08); }
  62%  { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* 开心：嘴角上扬 + 屏幕更亮 */
.bot.is-happy .b-mouth { d: path("M54 49Q64 60 74 49"); }
.bot.is-happy .b-screen { fill: color-mix(in srgb, var(--accent) 82%, #fff); }

/* 走路循环：两条腿交替（跑动幅度比 join 的冲刺小一档） */
.bot.is-walk .b-leg--f { animation: botStepA 0.42s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
.bot.is-walk .b-leg--b { animation: botStepB 0.42s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
.bot.is-walk .b-svg    { animation: botBob 0.42s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
@keyframes botStepA {
  0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); }
}
@keyframes botStepB {
  0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); }
}
@keyframes botBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

/* 挥手 */
.bot.is-wave .b-arm--f { animation: botWave 1.15s ease-in-out infinite; }
@keyframes botWave {
  0%, 100% { transform: rotate(-150deg); }
  50%      { transform: rotate(-186deg); }
}

/* 开机自检：扫描线扫过屏幕 → 眼睛亮起 → 起身 */
.bot.is-boot .b-scan  { animation: botScan 0.9s linear 2; }
.bot.is-boot .b-eye   { animation: botEyeOn 0.9s steps(1) both; }
.bot.is-boot .b-svg   { animation: botStand 0.86s var(--bot-pop) both; }
@keyframes botScan {
  0%   { opacity: 0.5; transform: translateY(0); }
  100% { opacity: 0.5; transform: translateY(40px); }
}
@keyframes botEyeOn { 0%, 55% { opacity: 0; } 62% { opacity: 1; } 70% { opacity: 0.2; } 100% { opacity: 1; } }
@keyframes botStand {
  0%   { transform: translateY(16px) scale(1.1, 0.82); }
  62%  { transform: translateY(-4px) scale(0.97, 1.04); }
  100% { transform: translateY(0)    scale(1, 1); }
}

/* ------------------------------------------------------------
   创意 01 · 目光追随 —— 机器人一直盯着你的光标
   JS 写 --ex / --ey（-1…1），CSS 只做映射，转动幅度刻意压小
   ------------------------------------------------------------ */
.bot--look .b-eyes {
  transform: translate(calc(var(--ex, 0) * 3.6px), calc(var(--ey, 0) * 2.8px));
  transition: transform 0.16s linear;
}
.bot--look .b-head {
  transform: translate(calc(var(--ex, 0) * 2.6px), calc(var(--ey, 0) * 1.5px))
             rotate(calc(var(--ex, 0) * 4deg));
  transition: transform 0.3s var(--bot-ease);
}
.bot--look .b-ant  { transform-origin: 60px 14px; transform: rotate(calc(var(--ex, 0) * -7deg)); transition: transform 0.42s var(--bot-ease); }
/* 光标贴近时瞳孔放大一档 */
.bot--look.is-near .b-eye { transform: scale(1.16); }

/* ------------------------------------------------------------
   创意 02 · 顶部阅读进度：机器人推着进度条走
   创意 03 · 点它坐火箭回到顶部（它就站在页面顶边，往上窜最顺）
   创意 04 · 闲置 14s 打瞌睡，ZZZ 往上飘，鼠标一动惊醒

   三个点子共用这一只 —— 全站常驻角色只能有一只：
   右下角已经被另一套 AI 助手（assets/css/chat.css 的 .ai-*）占着，
   再放一只固定机器人就是两个吉祥物打架。
   接管 vibe.js 那条 2px 细线（html.has-botprog 把它藏掉）
   ------------------------------------------------------------ */
html.has-botprog .vb-progress { display: none !important; }

.botprog {
  position: fixed; inset: 0 0 auto; height: 0; z-index: 60;
  pointer-events: none;
}
.botprog__bar {
  position: absolute; left: 0; top: 0; height: 3px;
  width: calc(var(--p, 0) * 100%);
  background: var(--ink);
  border-radius: 0 2px 2px 0;
}
.botprog__bar::after {          /* 走过的部分留一小段柠檬绿尾迹 */
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  width: min(120px, 40%); background: linear-gradient(90deg, transparent, var(--accent));
}
/* 机器人本体是个按钮：点了回到顶部。热区比机身大一圈才好点 */
.botprog__hit {
  position: absolute; top: 0;
  left: calc(var(--p, 0) * 100%);
  translate: -62% 0;
  border: 0; padding: 5px 9px 12px; background: none;
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.botprog .bot { --bot-w: 30px; }
.botprog { transition: opacity 0.3s var(--bot-ease); }
.botprog[data-idle] { opacity: 0; }
.botprog[data-idle] .botprog__hit { pointer-events: none; }
/* 往回滚的时候它转身倒着走 */
.botprog.is-back .bot { scale: -1 1; }

/* 提示气泡：只有 hover 才出现，不常驻 */
.botprog__tip {
  position: absolute; left: 50%; top: 100%; translate: -50% 0;
  margin-top: 2px; white-space: nowrap;
  font: 500 11px/1 var(--font); color: #fff;
  background: var(--ink); padding: 6px 9px; border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s var(--bot-ease);
}
.botprog__hit:hover .botprog__tip,
.botprog__hit:focus-visible .botprog__tip { opacity: 1; }
.botprog__hit:hover .bot { animation: botHop 0.62s var(--bot-pop) infinite; }
@keyframes botHop {
  0%, 100% { transform: translateY(0)    scale(1, 1); }
  35%      { transform: translateY(-6px) scale(0.95, 1.06); }
  70%      { transform: translateY(0)    scale(1.05, 0.95); }
}

/* 点击：喷一股火，机器人往上窜出屏幕，落回来时再弹一下 */
.botprog.is-launch .bot { animation: botLaunch 0.62s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes botLaunch {
  0%   { transform: translateY(0)     scale(1, 1); }
  18%  { transform: translateY(5px)   scale(1.1, 0.88); }
  100% { transform: translateY(-90px) scale(0.8, 1.24); opacity: 0; }
}
.botprog__jet {
  position: absolute; left: 50%; top: 20px; translate: -50% 0;
  width: 11px; height: 0; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--accent), #ffb020 60%, transparent);
  opacity: 0; pointer-events: none;
}
.botprog.is-launch .botprog__jet { animation: botJet 0.5s ease-out both; }
@keyframes botJet {
  0%   { height: 0;    opacity: 0; }
  25%  { height: 24px; opacity: 1; }
  100% { height: 52px; opacity: 0; }
}
.botprog.is-drop .bot { animation: botDrop 0.66s var(--bot-pop) both; }
@keyframes botDrop {
  0%   { transform: translateY(-70px) scale(0.84, 1.2); opacity: 0; }
  60%  { transform: translateY(0)     scale(1.08, 0.92); opacity: 1; }
  100% { transform: translateY(0)     scale(1, 1); }
}

/* ------------------------------------------------------------
   创意 05 · 边缘偷看：区块进视口时它从卡片/图片背后探出半个身子
   ------------------------------------------------------------ */
.botpeek { position: absolute; z-index: 3; pointer-events: none; overflow: hidden; }
.botpeek--tr { right: 26px; bottom: 100%; width: 88px; height: 74px; }
.botpeek--tl { left: 26px;  bottom: 100%; width: 88px; height: 74px; }
.botpeek .bot { --bot-w: 82px; position: absolute; bottom: -46px; left: 50%; translate: -50% 0; }
.botpeek .bot { transform: translateY(74px); transition: transform 0.62s var(--bot-pop); }
.botpeek.is-in .bot { transform: translateY(0); }
/* 探头之后左右张望一下 */
.botpeek.is-in .b-head { animation: botLookAround 4.2s ease-in-out 0.7s infinite; }
@keyframes botLookAround {
  0%, 46%, 100% { transform: rotate(0) translateX(0); }
  14%           { transform: rotate(-6deg) translateX(-2px); }
  30%           { transform: rotate(6deg)  translateX(2px); }
}

/* ------------------------------------------------------------
   创意 06 · 举牌数字：数字滚动时机器人在下面举着牌子，牌子跟着晃
   ------------------------------------------------------------ */
.botsign { display: flex; align-items: flex-end; gap: 10px; }
.botsign .bot { --bot-w: 58px; }
.botsign__board {
  position: relative; margin: 0 0 16px;
  display: flex; align-items: baseline; gap: 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 16px 10px; transform-origin: 0 100%;
  font: 400 14px/1.5 var(--font); color: rgba(34, 34, 34, 0.72);
}
/* 牌子上的数字是主角，别跟说明文字一样大 */
.botsign__board b {
  font: 500 clamp(24px, 3vw, 32px)/1 var(--font);
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.botsign__board::before {          /* 举牌的杆 */
  content: ""; position: absolute; left: -13px; bottom: 6px;
  width: 18px; height: 5px; border-radius: 3px; background: var(--ink);
  transform: rotate(-18deg);
}
.botsign.is-in .botsign__board { animation: botBoardRaise 0.72s var(--bot-pop) both; }
.botsign.is-in .b-arm--f { animation: botArmRaise 0.6s var(--bot-pop) both; }
@keyframes botBoardRaise {
  0%   { transform: rotate(-14deg) translateY(12px); opacity: 0; }
  60%  { transform: rotate(3deg)   translateY(0);    opacity: 1; }
  100% { transform: rotate(0)      translateY(0);    opacity: 1; }
}
@keyframes botArmRaise { 0% { transform: rotate(48deg); } 100% { transform: rotate(-24deg); } }

/* ------------------------------------------------------------
   创意 07 · 擦亮客户墙：机器人沿着 logo 墙走，擦过的标识由灰变彩
   （标识墙本体样式见 wall.css，这里只管机器人和它手里的抹布）
   ------------------------------------------------------------ */
.botwipe {
  position: absolute; left: 0; top: 0; z-index: 4;
  translate: calc(var(--wx, 0) * 1px) calc(var(--wy, 0) * 1px);
  transition: translate 0.16s linear;
  pointer-events: none;
}
.botwipe .bot { --bot-w: 62px; }
.botwipe .b-arm--f { transform: rotate(-8deg); }
.botwipe .b-cloth  { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.botwipe .b-arm--f { animation: botScrub 0.46s ease-in-out infinite; }
@keyframes botScrub {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(-22deg); }
}
.botwipe__spark {                  /* 擦亮的瞬间冒一颗星 */
  position: absolute; right: -6px; top: 22%;
  width: 14px; height: 14px; opacity: 0;
  background: var(--accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: botSpark 0.9s ease-out infinite;
}
@keyframes botSpark {
  0%   { opacity: 0; transform: scale(0.3) rotate(0); }
  40%  { opacity: 1; transform: scale(1)   rotate(70deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(150deg); }
}

/* ------------------------------------------------------------
   创意 08 · 可拖拽贴纸：拖起来身体倾斜、手甩出去，松手橡皮筋弹回
   ------------------------------------------------------------ */
.botdrag {
  position: absolute; z-index: 6; cursor: grab; touch-action: none;
  translate: var(--dx, 0px) var(--dy, 0px);
}
.botdrag .bot { --bot-w: 74px; pointer-events: none; }
.botdrag.is-drag { cursor: grabbing; z-index: 9; }
.botdrag.is-drag .bot { transform: rotate(calc(var(--tilt, 0) * 1deg)); }
.botdrag.is-drag .b-arm--f { transform: rotate(calc(48deg + var(--tilt, 0) * 1.6deg)); }
.botdrag.is-drag .b-arm--b { transform: rotate(calc(52deg + var(--tilt, 0) * 1.2deg)); }
.botdrag.is-drag .b-sh { opacity: 0.5; transform: scale(0.8); }
.botdrag.is-home { transition: translate 0.62s var(--bot-pop); }
.botdrag__hint {
  position: absolute; left: 50%; top: -22px; translate: -50% 0;
  font: 500 11px/1 var(--font); color: var(--mut-2); white-space: nowrap;
  opacity: 0; transition: opacity 0.24s var(--bot-ease);
}
.botdrag:hover .botdrag__hint { opacity: 1; }
.botdrag.is-drag .botdrag__hint { opacity: 0; }

/* ------------------------------------------------------------
   创意 09 · 拉横幅：机器人拖着一条柠檬绿横幅从左边扫进来
   ------------------------------------------------------------ */
.bottape { position: relative; display: flex; align-items: center; overflow: hidden; padding: 18px 0; }
.bottape .bot { --bot-w: 64px; position: relative; z-index: 2; flex: none; }
.bottape__band {
  position: relative; flex: 1; min-width: 0; margin-left: -8px;
  background: var(--accent); border-radius: 0 999px 999px 0;
  padding: 13px 30px 13px 22px;
  font: 600 clamp(14px, 2vw, 19px)/1.25 var(--font); color: var(--ink);
  transform-origin: 0 50%;
}
.bottape .bot, .bottape__band { transform: translateX(-104%); }
.bottape.is-in .bot        { animation: botTapeWalk 1.15s var(--bot-ease) both; }
.bottape.is-in .bottape__band { animation: botTapePull 1.15s var(--bot-ease) 0.06s both; }
@keyframes botTapeWalk { to { transform: translateX(0); } }
@keyframes botTapePull {
  0%   { transform: translateX(-104%) scaleX(0.72); }
  100% { transform: translateX(0)     scaleX(1); }
}
.bottape.is-in .b-leg--f { animation: botStepA 0.34s cubic-bezier(0.42, 0, 0.58, 1) 4; }
.bottape.is-in .b-leg--b { animation: botStepB 0.34s cubic-bezier(0.42, 0, 0.58, 1) 4; }
.bottape .b-arm--b { transform: rotate(122deg); }   /* 后手往后拽着横幅 */

/* ------------------------------------------------------------
   创意 10 · 举放大镜：镜片里是真的放大（background-position 跟手），
   机器人的手臂跟着镜片转 —— 用来看 HMI 界面的细节
   ------------------------------------------------------------ */
.botmag { position: relative; border-radius: var(--r-media); overflow: hidden; cursor: crosshair; }
.botmag img { display: block; width: 100%; height: auto; }
.botmag__lens {
  position: absolute; width: 148px; height: 148px; border-radius: 50%;
  left: var(--lx, 50%); top: var(--ly, 50%); translate: -50% -50%;
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 3px var(--accent), 0 14px 34px rgba(0, 0, 0, 0.26);
  background-repeat: no-repeat;
  background-size: var(--zw) var(--zh);
  background-position: var(--bx) var(--by);
  opacity: 0; transition: opacity 0.26s var(--bot-ease);
}
.botmag__lens::after {           /* 镜面反光 */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 46%);
}
/* 机器人站在镜片左下方，举着的镜柄正好顶到镜片的边（-142% / 4% 是量出来的） */
.botmag .bot {
  --bot-w: 78px; position: absolute;
  left: var(--lx, 50%); top: var(--ly, 50%);
  translate: -142% 4%;
  opacity: 0; transition: opacity 0.26s var(--bot-ease);
}
.botmag.is-on .botmag__lens, .botmag.is-on .bot { opacity: 1; }
.botmag .b-arm--f { transform: rotate(-34deg); }
.botmag .b-stick { stroke: var(--ink); fill: none; }
.botmag .b-stick-end { fill: var(--ink); }
.botmag__cap {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font: 400 12.5px/1.5 var(--font); color: var(--mut);
}
.botmag__cap i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
}
.botmag__hint {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font: 500 12px/1 var(--font); color: var(--ink);
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 13px;
  transition: opacity 0.26s var(--bot-ease);
}
.botmag.is-on .botmag__hint { opacity: 0; }

/* ------------------------------------------------------------
   创意 11 · 页脚道别：挥手 + 轮换的说话气泡
   ------------------------------------------------------------ */
.bothi { display: flex; align-items: flex-end; gap: 12px; }
.bothi .bot { --bot-w: 66px; }
.bothi__say {
  position: relative; margin-bottom: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 15px; font: 500 13px/1.4 var(--font); color: var(--ink);
  min-height: 40px; display: grid; align-items: center;
}
.bothi__say::before {
  content: ""; position: absolute; left: -6px; bottom: 13px;
  width: 11px; height: 11px; rotate: 45deg;
  background: var(--card); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bothi__say span { display: block; transition: opacity 0.26s var(--bot-ease), translate 0.26s var(--bot-ease); }
.bothi__say.is-swap span { opacity: 0; translate: 0 -6px; }

/* ------------------------------------------------------------
   创意 12 · 横向追光标：机器人在一条窄带里左右跑着追你的鼠标
   ------------------------------------------------------------ */
.botchase {
  position: relative; height: 96px; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.botchase__floor {
  position: absolute; left: 0; right: 0; bottom: 18px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.botchase .bot {
  --bot-w: 70px; position: absolute; bottom: 12px;
  left: var(--cx, 76%); translate: -50% 0;
  transition: left 0.5s var(--bot-ease);
}
.botchase.is-flip .bot { scale: -1 1; }
/* 提示放左边、机器人默认停在 76% —— 两个都居中会叠在一起 */
.botchase__ask {
  position: absolute; left: 4px; top: 50%; translate: 0 -50%;
  font: 500 12.5px/1 var(--font); color: rgba(34, 34, 34, 0.55);
  transition: opacity 0.3s var(--bot-ease);
}
.botchase.is-moving .botchase__ask { opacity: 0; }

/* ------------------------------------------------------------
   创意 13 · 开机空状态：筛选没结果时机器人开机 + 摊手
   ------------------------------------------------------------ */
.botempty { display: grid; justify-items: center; gap: 14px; padding: 58px 0; text-align: center; }
.botempty .bot { --bot-w: 96px; }
.botempty__t { font: 600 17px/1.4 var(--font); color: var(--ink); }
.botempty__s { font: 400 14px/1.5 var(--font); color: var(--mut); }
.botempty .b-arm--f { transform: rotate(96deg); }   /* 摊手 */
.botempty .b-arm--b { transform: rotate(-96deg); }
.botempty .b-mouth  { d: path("M55 54Q64 47 73 54"); }  /* 撇嘴 */

/* ------------------------------------------------------------
   小屏：把常驻的两个（进度条 / 回到顶部）缩一档，偷看的收掉
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .botpeek { display: none; }
  .botmag  { cursor: default; }
  .botmag .bot { display: none; }
  .botprog__tip { display: none; }
  .botchase { height: 78px; }
}
@media (max-width: 700px) {
  /* 小屏客户墙一行只有两格，62px 的机器人会顶出墙外 */
  .botwipe .bot { --bot-w: 42px; }
  .botwipe__spark { width: 10px; height: 10px; }
}
@media (max-width: 640px) {
  .botprog .bot { --bot-w: 24px; }
  .botsign .bot { --bot-w: 46px; }
  .botsign__board { padding: 8px 12px 9px; }
  .bothi .bot { --bot-w: 54px; }
}

/* ------------------------------------------------------------
   动效敏感：留住姿态与颜色，掐掉所有循环 / 位移动画
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bot *, .bot, .botpeek .bot, .botsign__board,
  .bottape .bot, .bottape__band, .botwipe__spark, .bot__z {
    animation: none !important;
    transition: none !important;
  }
  .botpeek .bot, .bottape .bot, .bottape__band { transform: none !important; }
  .botprog, .botchase { display: none; }
  .botsign__board { opacity: 1 !important; }
}