/* ============================================================
   大健康IP孵化专家 · 全局悬浮组件（样式）
   ------------------------------------------------------------
   设计约束：
     · 全站覆盖 —— 任何页面自动出现，右上角固定悬浮
     · 跟随主题 —— 全部用 wb.css 的主题变量，并带 fallback
     · 跟随缩放 —— 工作台用「改 html 字号」实现缩放（默认 1.42 倍）。
       组件所有尺寸都乘 --s，由 JS 按页面基准字号算出来，比例不走样。
   建立：2026-09-29
   ============================================================ */

.exp-root{
  /* --s 由 expert-widget.js 按页面基准字号写入（1 = 标准 26px 基准） */
  --s: 1;
  --exp-accent: var(--accent, #3EDC81);
  --exp-accent-2: var(--accent-2, #B9FF66);
  --exp-ink: var(--accent-ink, #0A0A0A);
  --exp-panel: var(--panel, #141414);
  --exp-panel2: var(--panel-2, #1C1C1C);
  --exp-well: var(--well, #202020);
  --exp-border: var(--border, #262626);
  --exp-text: var(--text, #F4F4F4);
  --exp-strong: var(--text-strong, #FFFFFF);
  --exp-muted: var(--muted, #9A9A9A);
  --exp-red: var(--red, #FF7B7B);
  --exp-redbg: var(--red-bg, rgba(255,107,107,.12));
  --exp-warn: var(--warn-fg, #FFA24D);
  /* 尺寸标尺：全部从 --s 派生，只有这里改数 */
  --fz:    calc(15px   * var(--s));
  --fz-sm: calc(12.5px * var(--s));
  --fz-xs: calc(11.5px * var(--s));
  --pad:   calc(14px   * var(--s));
  --gap:   calc(10px   * var(--s));
  --rad:   calc(12px   * var(--s));
  /* 导师形象倍数：想放大/缩小，只改这一个数字（1 = 84×112 基准） */
  --fabs:  1.7;
  --fab-w: calc(84px  * var(--s) * var(--fabs));
  --fab-h: calc(112px * var(--s) * var(--fabs));
  /* 右侧活页倍数：整个活页（含文字/控件/间距）整体放大，1 = 原始大小。
     注意别贪大：活页是满屏高的，倍数越大顶栏底栏占得越多、中间对话区越小。
     实测 1000px 高的窗口：1.3 → 对话区约 300px；1.7 → 只剩 85px（半条消息）。 */
  --ds:    1.3;
  /* 活页宽度：留 94vw / --ds 的上限，保证放大后也不会被挤出屏幕 */
  --dw:    min(calc(430px * var(--s)), calc(94vw / var(--ds)));
  /* 专家组件整体下移量：避免悬浮形象/气泡挡住页面右侧内容（如养胃定位标签）。想再靠下就调大这个数 */
  --exp-drop: 160px;
  --exp-ox: 0px; --exp-oy: 0px; /* 悬浮形象拖动偏移，由 JS 写入 */
  position: fixed; inset: 0; pointer-events: none; z-index: 9990;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: var(--fz); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.exp-root *{ box-sizing: border-box; }

/* ── 右上角悬浮形象（v3：人形 · 拿着话筒讲话，不再是圆圈）── */
/* 2026-10-28：贴右侧边缘 + 半透明，避免压住页面右上角的内容（表格列标题等） */
.exp-fab{
  position: fixed; top: calc(170px * var(--s) + var(--exp-drop)); right: calc(-6px * var(--s));
  width: var(--fab-w); height: var(--fab-h);
  border: 0; padding: 0; background: transparent;
  cursor: grab; pointer-events: auto; border-radius: 0;
  touch-action: none;
  transform: translate(var(--exp-ox,0px), var(--exp-oy,0px));
  transition: transform .18s ease, opacity .18s ease;
  opacity: .55; z-index: 40;
}
.exp-fab:hover{ transform: translate(var(--exp-ox,0px), var(--exp-oy,0px)) scale(1.05); opacity: 1; }
.exp-fab:active{ transform: translate(var(--exp-ox,0px), var(--exp-oy,0px)) scale(.95); opacity: 1; }
.exp-fab.dragging{ cursor: grabbing; transition: opacity .18s ease; }
.exp-fab.wiggle{ animation: expWiggle .9s ease-in-out; }

/* 人物画面：柔和投影把人物从任何底色里托出来（不画圆底、不描边框） */
.exp-fig{
  display: block; width: 100%; height: 100%; overflow: visible;
  animation: expFloat 3.6s ease-in-out infinite;
  /* 两道投影：深色给亮主题托底，浅色给暗主题勾边 */
  filter: drop-shadow(0 calc(5px * var(--s)) calc(10px * var(--s)) rgba(0,0,0,.42))
          drop-shadow(0 0 2px rgba(255,255,255,.35));
}

/* 人物配色：皮肤 / 发色 / 西装固定，领带与声波走主题色 —— night / cream / light 都成立 */
.exp-root .f-skin{ fill: #F3D3BA; }
.exp-root .f-skin2{ fill: #E7BFA2; }
.exp-root .f-hair{ fill: #2B3138; }
.exp-root .f-hairhi{ stroke: rgba(255,255,255,.22); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.exp-root .f-dark{ fill: #22302A; }
.exp-root .f-blush{ fill: #F4A98C; opacity: .5; }
.exp-root .f-mouth{ stroke: #22302A; stroke-width: 2; fill: none; stroke-linecap: round; }
.exp-root .f-shirt{ fill: #F7F8F6; }
.exp-root .f-suit{ fill: url(#expFigSuit); }
.exp-root .f-suitflat{ fill: #2F3A45; }
.exp-root .f-suitarm{ stroke: url(#expFigSuit); fill: none; stroke-linecap: round; }
.exp-root .f-suitline{ stroke: rgba(255,255,255,.22); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.exp-root .f-collar{ stroke: rgba(20,26,32,.55); stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.exp-root .f-tie{ fill: var(--exp-accent); }
.exp-root .f-lens{ fill: rgba(255,255,255,.16); stroke: #2A333C; stroke-width: 1.6; }
.exp-root .f-frame{ stroke: #2A333C; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.exp-root .f-palm{ stroke: #F3D3BA; fill: none; }
.exp-root .f-mic{ fill: #2A322E; }
.exp-root .f-michand{ fill: #3B4741; }
.exp-root .f-grill{ stroke: rgba(255,255,255,.22); stroke-width: 1.3; fill: none; }
.exp-root .f-ring{ stroke: rgba(255,255,255,.3); stroke-width: 1.6; fill: none; }
.exp-root .f-band{ fill: rgba(255,255,255,.3); }

/* 说话声波：依次亮起 → 一眼看出「他正在讲话」 */
.exp-fig .exp-wave path{ stroke: var(--exp-accent); stroke-width: 3; fill: none; stroke-linecap: round; opacity: 0; }
.exp-fig .w1{ animation: expWave 1.9s ease-in-out infinite; }
.exp-fig .w2{ animation: expWave 1.9s ease-in-out .24s infinite; }
.exp-fig .w3{ animation: expWave 1.9s ease-in-out .48s infinite; }
/* 话筒轻微起伏，让人物「活」着 */
.exp-fig .exp-mic{ transform-origin: 96px 86px; animation: expMic 2.6s ease-in-out infinite; }

/* 形象下方的小名牌：让人一眼知道这是谁（跟着形象大小自动落位） */
.exp-tag{
  position: fixed; top: calc(92px * var(--s) + var(--fab-h) + var(--exp-drop)); right: calc(8px * var(--s));
  padding: calc(3px * var(--s)) calc(9px * var(--s));
  border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--exp-panel); color: var(--exp-muted);
  border: 1px solid var(--exp-border);
  font-size: calc(11px * var(--s)); line-height: 1.5;
  opacity: 0;
  transform: translate(var(--exp-ox,0px), calc(var(--exp-oy,0px) - 4px * var(--s)));
  transition: opacity .25s, transform .25s;
}
.exp-tag.on{ opacity: 1; transform: translate(var(--exp-ox,0px), var(--exp-oy,0px)); }

/* ── 引诱追问：一句接一句从他身边冒出来（不是轮播一张）── */
.exp-talk{
  position: fixed; right: calc(24px * var(--s) + var(--fab-w)); top: calc(86px * var(--s) + var(--exp-drop));
  width: calc(258px * var(--s));
  display: flex; flex-direction: column; align-items: flex-end;
  gap: calc(7px * var(--s));
  pointer-events: none;
  transform: translate(var(--exp-ox,0px), var(--exp-oy,0px));
}
.exp-say{
  position: relative; max-width: 100%;
  background: var(--exp-panel); color: var(--exp-text);
  border: 1px solid var(--exp-border);
  border-radius: calc(14px * var(--s));
  padding: calc(8px * var(--s)) calc(12px * var(--s));
  font-size: var(--fz-sm); line-height: 1.5;
  box-shadow: 0 calc(6px * var(--s)) calc(20px * var(--s)) rgba(0,0,0,.2);
  opacity: 0; transform: translateY(calc(10px * var(--s))) scale(.94);
  transform-origin: 100% 100%;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
  pointer-events: auto; cursor: pointer;
}
.exp-say.on{ opacity: 1; transform: translateY(0) scale(1); }
.exp-say.out{ opacity: 0; transform: translateY(calc(-8px * var(--s))) scale(.96); }
/* 最后一句（离他最近）带个小尾巴，指向人物 */
.exp-say:last-child::after{
  content: ''; position: absolute; right: calc(-5px * var(--s)); bottom: calc(10px * var(--s));
  width: calc(10px * var(--s)); height: calc(10px * var(--s));
  background: inherit;
  border-right: 1px solid var(--exp-border); border-top: 1px solid var(--exp-border);
  transform: rotate(45deg);
}
/* 「正在说」的三个点 */
.exp-typing{ padding: calc(11px * var(--s)) calc(14px * var(--s)); }
.exp-typing i{
  display: inline-block; width: calc(5px * var(--s)); height: calc(5px * var(--s));
  border-radius: 50%; background: var(--exp-muted); margin-right: calc(4px * var(--s));
  animation: expDot 1.2s ease-in-out infinite;
}
.exp-typing i:last-child{ margin-right: 0; }
.exp-typing i:nth-child(2){ animation-delay: .18s; }
.exp-typing i:nth-child(3){ animation-delay: .36s; }

/* ── 遮罩 ── */
.exp-mask{
  position: fixed; inset: 0; background: rgba(8,10,8,.34);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.exp-mask.on{ opacity: 1; pointer-events: auto; }

/* ── 右侧活页抽屉 ── */
/* 整个活页按 --ds 整体放大（文字、控件、间距、圆角一起放大，不会漏改）。
   技巧：高度反过来除以 --ds，缩放后正好铺满全高，顶栏底栏不会被裁掉。 */
.exp-drawer{
  position: fixed; top: 0; right: 0;
  height: calc(100% / var(--ds));
  width: var(--dw);
  background: var(--exp-panel); border-left: 1px solid var(--exp-border);
  box-shadow: calc(-18px * var(--s)) 0 calc(52px * var(--s)) rgba(0,0,0,.26);
  transform-origin: right top;
  transform: translateX(200%) scale(var(--ds));
  transition: transform .34s cubic-bezier(.22,.7,.25,1);
  display: flex; flex-direction: column; pointer-events: auto;
}
.exp-drawer.on{ transform: translateX(0) scale(var(--ds)); }

.exp-head{
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--pad); border-bottom: 1px solid var(--exp-border);
  background: var(--exp-panel2);
}
/* 活页头部的导师头像：同一个人物（圆角方形，不是圆圈） */
.exp-ava{
  width: calc(42px * var(--s)); height: calc(42px * var(--s));
  border-radius: calc(13px * var(--s)); flex: none; overflow: hidden;
  background: linear-gradient(160deg, var(--exp-accent-2), var(--exp-accent));
  display: block;
}
.exp-ava svg{ display: block; width: 100%; height: 100%; }
.exp-htitle{ flex: 1; min-width: 0; }
.exp-htitle b{ display: block; font-size: var(--fz); color: var(--exp-strong); font-weight: 700; line-height: 1.3; }
.exp-htitle span{ display: block; font-size: calc(12px * var(--s)); color: var(--exp-muted); line-height: 1.4; }
.exp-x{
  width: calc(30px * var(--s)); height: calc(30px * var(--s)); flex: none;
  border-radius: calc(8px * var(--s)); cursor: pointer;
  border: 1px solid var(--exp-border); background: var(--exp-panel);
  color: var(--exp-muted); font-size: calc(16px * var(--s)); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.exp-x:hover{ color: var(--exp-strong); border-color: var(--exp-accent); }

/* 控制条：端 / 类型 / 阶段 */
.exp-ctrl{ padding: var(--pad); border-bottom: 1px solid var(--exp-border); }
.exp-crow{ display: flex; align-items: center; gap: calc(5px * var(--s)); flex-wrap: wrap; margin-bottom: calc(6px * var(--s)); }
.exp-crow:last-child{ margin-bottom: 0; }
.exp-lab{ font-size: var(--fz-xs); color: var(--exp-muted); flex: none; width: calc(28px * var(--s)); }
.exp-chip{
  font-size: var(--fz-sm); padding: calc(4px * var(--s)) calc(9px * var(--s));
  border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap;
  border: 1px solid var(--exp-border); background: var(--exp-well); color: var(--exp-muted);
}
.exp-chip:hover{ color: var(--exp-text); border-color: var(--exp-accent); }
.exp-chip.on{ background: var(--exp-accent); color: var(--exp-ink); border-color: var(--exp-accent); font-weight: 700; }
.exp-chip.tob.on{ background: var(--exp-warn); border-color: var(--exp-warn); color: var(--exp-ink); }

/* ── 今日剩余条数（常驻状态条）── */
.exp-quota{
  display: flex; align-items: center; gap: calc(7px * var(--s));
  padding: calc(9px * var(--s)) var(--pad);
  border-bottom: 1px solid var(--exp-border);
  background: var(--exp-panel2);
  font-size: var(--fz-sm); color: var(--exp-muted);
}
.exp-quota[hidden]{ display: none; }
.exp-quota .q-lab{ flex: none; }
.exp-quota .q-num{
  font-size: calc(19px * var(--s)); font-weight: 800; line-height: 1;
  color: var(--exp-accent); font-variant-numeric: tabular-nums;
}
.exp-quota .q-lim{ font-size: var(--fz-xs); color: var(--exp-muted); }
.exp-quota .q-up{
  margin-left: auto; flex: none; cursor: pointer;
  padding: calc(4px * var(--s)) calc(11px * var(--s)); border-radius: 999px;
  background: var(--exp-accent); color: var(--exp-ink);
  font-size: calc(12px * var(--s)); font-weight: 700; white-space: nowrap;
}
.exp-quota .q-up:hover{ filter: brightness(1.06); }
.exp-quota.low .q-num{ color: var(--exp-warn); }
.exp-quota.out .q-num{ color: var(--exp-red); font-size: calc(14px * var(--s)); }
.exp-quota.out .q-lab{ color: var(--exp-red); font-weight: 700; }

/* ── 额度用完后的开通会员卡 ── */
.exp-pay{
  background: var(--exp-panel2) !important;
  border: 1px solid var(--exp-warn) !important;
}
.exp-pay .pt{ font-weight: 800; color: var(--exp-warn); font-size: calc(14px * var(--s)); margin-bottom: calc(4px * var(--s)); }
.exp-pay .pd{ color: var(--exp-muted); font-size: var(--fz-sm); line-height: 1.65; }
.exp-pay .pbtn{
  display: inline-block; margin-top: calc(10px * var(--s)); cursor: pointer;
  padding: calc(8px * var(--s)) calc(16px * var(--s)); border: 0; border-radius: calc(9px * var(--s));
  background: var(--exp-accent); color: var(--exp-ink);
  font-size: calc(13px * var(--s)); font-weight: 800; font-family: inherit;
}
.exp-pay .pbtn:hover{ filter: brightness(1.06); }

/* ── 限流提示（请求太频繁 · 带倒计时）── */
.exp-limit{
  background: var(--exp-panel2) !important;
  border: 1px dashed var(--exp-warn) !important;
  transition: border-color .25s;
}
.exp-limit .lt{ font-weight: 800; color: var(--exp-warn); font-size: calc(13.5px * var(--s)); margin-bottom: calc(4px * var(--s)); }
.exp-limit .ld{ color: var(--exp-muted); font-size: var(--fz-sm); line-height: 1.65; }
.exp-limit .cd{ margin-top: calc(6px * var(--s)); font-size: var(--fz-sm); color: var(--exp-strong); }
.exp-limit .cd b{ color: var(--exp-warn); font-size: calc(16px * var(--s)); font-variant-numeric: tabular-nums; }
.exp-limit.done{ border-style: solid !important; border-color: var(--exp-accent) !important; }
.exp-limit.done .lt{ color: var(--exp-accent); }
.exp-send:disabled{ opacity: .5; cursor: not-allowed; }

/* 对话区 */
.exp-body{
  flex: 1; overflow-y: auto; padding: calc(12px * var(--s)) var(--pad);
  display: flex; flex-direction: column; gap: var(--gap);
}
.exp-welcome{
  font-size: calc(13px * var(--s)); color: var(--exp-muted); line-height: 1.7;
  background: var(--exp-well); border: 1px dashed var(--exp-border);
  border-radius: var(--rad); padding: calc(10px * var(--s)) calc(12px * var(--s));
}
.exp-welcome b{ color: var(--exp-strong); }
.exp-msg{
  font-size: calc(13.5px * var(--s)); line-height: 1.7;
  padding: calc(9px * var(--s)) calc(12px * var(--s));
  border-radius: var(--rad); white-space: pre-wrap; word-break: break-word;
}
.exp-msg.me{
  align-self: flex-end; max-width: 88%;
  background: var(--exp-accent); color: var(--exp-ink); font-weight: 600;
  border-bottom-right-radius: calc(4px * var(--s));
}
.exp-msg.ai{
  align-self: flex-start; width: 100%;
  background: var(--exp-well); color: var(--exp-text);
  border: 1px solid var(--exp-border);
  border-bottom-left-radius: calc(4px * var(--s));
}
.exp-msg.err{
  align-self: flex-start; max-width: 100%;
  background: var(--exp-redbg); color: var(--exp-red); border: 1px solid var(--exp-red);
}
.exp-msg.loading{ color: var(--exp-muted); }
.exp-msg.loading i{ display: inline-block; animation: expBlink 1.2s infinite; font-style: normal; }

/* 结果正文 */
.exp-out{ white-space: pre-wrap; }

/* 红线命中提示（改完还剩的：没有标准替换词，要人自己定夺） */
.exp-hits{
  margin-top: calc(9px * var(--s)); border-radius: calc(9px * var(--s));
  padding: calc(9px * var(--s)) calc(11px * var(--s));
  font-size: var(--fz-sm); line-height: 1.6;
  background: var(--exp-redbg); border: 1px solid var(--exp-red); color: var(--exp-text);
}
.exp-hits .hh{ font-weight: 700; color: var(--exp-red); margin-bottom: calc(5px * var(--s)); }
.exp-hits .hl{ display: block; margin-top: calc(3px * var(--s)); }
.exp-hits .hw{ font-weight: 700; color: var(--exp-red); }
.exp-hits .hs{ color: var(--exp-muted); }
.exp-hit{ background: var(--exp-redbg); color: var(--exp-red); font-weight: 700; border-radius: 3px; padding: 0 3px; }

/* ── 已自动改好的替换清单（告诉他改了什么，不是偷偷改）── */
.exp-fixed{
  margin-top: calc(9px * var(--s)); border-radius: calc(9px * var(--s));
  padding: calc(9px * var(--s)) calc(11px * var(--s));
  font-size: var(--fz-sm); line-height: 1.65;
  background: rgba(62,220,129,.1); border: 1px solid var(--exp-accent); color: var(--exp-text);
}
.exp-fixed .fh{ font-weight: 700; color: var(--exp-accent); margin-bottom: calc(5px * var(--s)); }
.exp-fixed .fl{ display: block; margin-top: calc(3px * var(--s)); }
.exp-fixed .fw{ color: var(--exp-red); text-decoration: line-through; }
.exp-fixed .ft{ color: var(--exp-accent); font-weight: 700; }
.exp-fixed .hs{ color: var(--exp-muted); }

/* ── 改前的原文（默认收起，可对照）── */
.exp-orig{
  margin-top: calc(8px * var(--s)); padding: calc(9px * var(--s)) calc(11px * var(--s));
  border-radius: calc(9px * var(--s));
  background: var(--exp-well); border: 1px dashed var(--exp-border);
  color: var(--exp-muted); font-size: var(--fz-sm); line-height: 1.7;
}
.exp-orig[hidden]{ display: none; }
.exp-safe{
  margin-top: calc(9px * var(--s)); font-size: var(--fz-sm);
  border-radius: calc(9px * var(--s));
  padding: calc(8px * var(--s)) calc(11px * var(--s));
  background: rgba(62,220,129,.1); border: 1px solid var(--exp-accent); color: var(--exp-accent);
}

/* 消息内操作按钮 */
.exp-acts{ display: flex; gap: calc(6px * var(--s)); margin-top: calc(8px * var(--s)); flex-wrap: wrap; }
.exp-mini{
  font-size: calc(12px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s));
  border-radius: calc(7px * var(--s)); cursor: pointer;
  border: 1px solid var(--exp-border); background: var(--exp-panel2); color: var(--exp-muted);
}
.exp-mini:hover{ color: var(--exp-accent); border-color: var(--exp-accent); }

/* 底部输入 */
.exp-foot{
  border-top: 1px solid var(--exp-border);
  padding: calc(10px * var(--s)) calc(12px * var(--s)) calc(12px * var(--s));
  background: var(--exp-panel2);
}
.exp-presets{ display: flex; gap: calc(6px * var(--s)); overflow-x: auto; padding-bottom: calc(8px * var(--s)); }
.exp-presets::-webkit-scrollbar{ height: 0; }
.exp-pre{
  font-size: calc(12px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s));
  border-radius: 999px; white-space: nowrap; cursor: pointer; flex: none;
  border: 1px dashed var(--exp-border); background: transparent; color: var(--exp-muted);
}
.exp-pre:hover{ color: var(--exp-accent); border-color: var(--exp-accent); border-style: solid; }
.exp-inrow{ display: flex; gap: calc(8px * var(--s)); align-items: flex-end; }
.exp-ta{
  flex: 1; min-height: calc(40px * var(--s)); max-height: calc(132px * var(--s));
  resize: none; overflow-y: auto;
  font-family: inherit; font-size: calc(13.5px * var(--s)); line-height: 1.6;
  padding: calc(9px * var(--s)) calc(11px * var(--s));
  border-radius: var(--rad); border: 1px solid var(--exp-border);
  background: var(--exp-well); color: var(--exp-text); outline: none;
}
.exp-ta:focus{ border-color: var(--exp-accent); }
.exp-ta::placeholder{ color: var(--exp-muted); }
.exp-send{
  flex: none; height: calc(40px * var(--s)); padding: 0 calc(16px * var(--s));
  border: 0; border-radius: var(--rad); cursor: pointer;
  background: var(--exp-accent); color: var(--exp-ink);
  font-size: calc(13.5px * var(--s)); font-weight: 700; font-family: inherit;
}
.exp-send:hover{ filter: brightness(1.06); }
.exp-send:disabled{ opacity: .45; cursor: not-allowed; }
.exp-tip{ font-size: var(--fz-xs); color: var(--exp-muted); margin-top: calc(6px * var(--s)); line-height: 1.5; }

@keyframes expFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(calc(-5px * var(--s))); } }
@keyframes expWave{ 0%,100%{ opacity: 0; } 42%{ opacity: .9; } }
@keyframes expMic{ 0%,100%{ transform: rotate(0deg); } 50%{ transform: rotate(-3.5deg); } }
@keyframes expDot{ 0%,100%{ opacity: .25; transform: translateY(0); } 40%{ opacity: 1; transform: translateY(calc(-2px * var(--s))); } }
@keyframes expWiggle{
  0%,100%{ transform: rotate(0deg) scale(1); }
  22%{ transform: rotate(-6deg) scale(1.04); }
  48%{ transform: rotate(5deg) scale(1.04); }
  72%{ transform: rotate(-2.5deg) scale(1.02); }
}
@keyframes expBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }

@media (max-width: 820px){
  /* 手机上不放大人形与活页（本身已是窄屏，放大就溢出） */
  .exp-root{ --s: 0.86; --fabs: 1.3; --ds: 1; }
  .exp-drawer{ width: min(calc(430px * 0.86), 100vw); }
}
@media (max-width: 480px){
  /* 手机上形象收小一点，别占掉半屏 */
  .exp-root{ --fabs: 0.95; }
  .exp-fab{ top: calc(70px * var(--s)); right: calc(6px * var(--s)); }
  .exp-talk{ display: none; }
  .exp-tag{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .exp-fig, .exp-fig .exp-wave path, .exp-fig .exp-mic, .exp-typing i, .exp-msg.loading i{ animation: none; }
}