:root{--danger:#DC2626;--danger-deep:#B91C1C;--danger-text:#991B1B;--danger-soft:#F87171;--danger-tint:#FEF2F2;--danger-border:#FECACA;--danger-rgb:220 38 38;--warn:#D97706;--warn-text:#92400E;--warn-tint:#FFFBEB;--warn-border:#FDE68A;--warn-rgb:217 119 6;--accent:#F59E0B;--accent-soft:#FBBF24;--accent-rgb:245 158 11;--report:#7C3AED;--report-deep:#6D28D9;--report-tint:#F5F3FF;--report-border:#C4B5FD;--report-rgb:124 58 237;--info:#2563EB;--info-deep:#1D4ED8;--info-text:#1E40AF;--info-soft:#3B82F6;--info-tint:#EFF6FF;--info-border:#BFDBFE;--info-rgb:37 99 235}
/* ============================================================
   大狮兄 AI 助手 浮窗（全局：PC + 手机一套代码）
   品牌绿：--ok #16a34a（深态 #15803D），金色高亮 --pri #f5a623
   z-index 取 1600/1601，避让底部 tabbar（z:60）与各类 fixed 弹层
   ============================================================ */
#lionFab {
  position: fixed;
  right: 0;
  bottom: 15%;
  width: 200px;
  height: 200px;
  padding: 0;
  border: none;
  background: transparent;
  z-index: 1600;
  pointer-events: none;            /* 仅视频区域可交互 */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .18));
  transform: translateX(0); /* 常态完整显示（20261008i zoe 拍板：登录即见，不藏 26px） */
  transition: transform .3s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 移动端（≤768px）：浮窗 200px→128px，bottom:15% 不变；canvas/video 用 width:100% 自动跟随。登录即见默认态不变 */
@media (max-width: 768px) {
  #lionFab { width: 128px; height: 128px; }
}
/* .revealed 与默认态视觉一致（translateX 均为 0），保留仅为 JS 状态标记 */
#lionFab.revealed { transform: translateX(0); }
/* ⑦ 拖拽换边：换到左侧时整个浮窗容器 scaleX(-1) 镜像，狮子探头方向自然翻转 */
#lionFab.is-mirror { transform: scaleX(-1); }
/* ⑤ 拖拽期间暂停 hover 探出 / 画布缩放，并给出 grabbing 光标 */
#lionFab.is-dragging { cursor: grabbing; }
#lionFab.is-dragging:hover canvas { transform: none; transition: none; }
/* ============================================================
   20261008i 静态趴框（zoe 拍板 18:38）：入场探头眨眼一次后收进去，
   常态只露半张脸趴在屏幕边缘安静眨眼。
   ⚠️ 20261008 修正：素材构图狮子在画面右侧 55%~90% 处（左半边是绿幕空景），
   原 translateX(40%) 把整个狮子推出屏外、只留下 9px 鬃毛尖（"收起过多漏不出脸"）。
   改 25%：可见窗口到画布 x=150，双眼+腮红露出，鼻吻/爪子收在屏外 = 半脸趴框。
   hover/触碰 JS 移除 .nest → 完整探出+挥手；离开/播完加回 .nest → 缩回。
   ============================================================ */
#lionFab.nest canvas,
#lionFab.nest video.lion-clip {
  transform: translateX(25%);
  transition: transform .5s ease;
}
#lionFab.nest:hover canvas,
#lionFab.nest:hover video.lion-clip { transform: translateX(0); }
#lionFab.nest.is-dragging canvas { transform: none; }
/* ============================================================
   双架构显示层：
   - 默认（非微信/WebView）：视频可见 + SVG 滤镜(#lionGreenKey) 抠像
     （Chrome/Safari 实测通过，纯绿幕透明；毛发细节由高码率 webm 保证）
   - 微信/X5：<video> 是原生组件、SVG 滤镜对 video 失效、绿底会穿透，
     故 fab.wechat 切到「视频离屏 + canvas 实时抠像」独占显示
   ============================================================ */
/* ============================================================
   双架构显示层 · 位置规则（修复 10-07 浮窗视频 -9999 bug）
   核心原则：视频的位置【永远保持在浮窗容器内】，显示 / 隐藏【只用 opacity + visibility】
   控制；绝不用 left/top/transform 把视频移出视口来“藏”。
   - 非微信 / WebView：视频就贴在 #lionFab 内（position:absolute; inset:0），
     .active 切换 opacity + visibility（淡入淡出）。这是线上 -9999 旧 bug 的修复点。
   - 微信 / X5：<video> 是原生组件，无视 z-index / opacity，会把绿底盖在 canvas 上，
     因此视频【必须】离屏作为 canvas 实时抠像的纯帧源（位置固定 -9999，与 .active 无关，
     不随切换变化）。可见层是 canvas（在浮窗内）。这是唯一允许视频在视口外的场景，且恒定，
     不是“藏 / 显”的切换；.active 仍只决定 canvas 抠哪一帧。
   ============================================================ */
#lionFab video.lion-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: auto;            /* 视频区域可交互 */
  cursor: pointer;
  display: block;
  filter: url(#lionGreenKey);      /* SVG 绿幕抠像（非微信） */
  opacity: 0;
  visibility: hidden;              /* 非 active 直接隐藏，避免 opacity:0 占位残影（第 2 条） */
  transition: opacity .25s ease;
}
#lionFab video.lion-clip.idle   { z-index: 1; }
#lionFab video.lion-clip.peek   { z-index: 2; }
#lionFab:not(.wechat) canvas { display: none; }   /* 非微信不显示 canvas（避免拦截点击） */

/* 微信 / X5：视频离屏、canvas 独占（离屏恒定，不参与 active 显隐切换） */
#lionFab.wechat video.lion-clip {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#lionFab.wechat canvas { display: block; }

/* 显示 / 隐藏【只用 opacity + visibility】。.active 优先级最高；position/left/top/width/height
   重复声明为防御性写法（20261008i -9999 bug 修复：确保切回 active 时位置绝对钉在浮窗内，
   即使未来有样式意外覆盖基础规则也能兜住）。微信下离屏恒定，仅翻状态位，显示由 canvas 负责。 */
#lionFab:not(.wechat) video.lion-clip.active {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}
#lionFab.wechat video.lion-clip.active {
  opacity: 1;                     /* 离屏恒定，仅把状态翻为可见，canvas 负责真正显示 */
  visibility: visible;
}
#lionFab canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: auto;            /* 仅 canvas 区域可交互 */
  cursor: pointer;
}
#lionFab.thinking canvas { animation: lionShake .6s ease-in-out infinite; }
/* 20261008i：去掉 transition——hover 缩放过渡会让 WebKit 反复建/销 canvas 合成层，
   与逐帧重绘叠加易产生"幽灵层"残影（拖拽/频繁触碰后"两个狮子"）。
   保留即时缩放（无过渡=单次层更新，不触发纹理快照残留）。 */
#lionFab:hover canvas { transform: scale(1.04); }

/* 右缘 8px 全高隐形触发条（hover 探出 / 触屏点击露出；cursor 为拖拽功能预留） */
#lionEdge {
  position: fixed;
  right: 0;
  top: 0;
  width: 8px;
  height: 100vh;
  background: transparent;
  z-index: 1600;
  pointer-events: auto;
  cursor: ew-resize;
}

@keyframes lionShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* 对话面板 */
#lionPanel {
  position: fixed;
  right: 18px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  width: 370px;
  max-width: calc(100vw - 24px);
  height: 540px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius:14px;
  box-shadow: 0 18px 60px rgba(19, 23, 42, .28);
  z-index: 1601;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: .22s;
}
#lionPanel.open { transform: none; opacity: 1; pointer-events: auto; }

.lion-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: linear-gradient(150deg, #16a34a, #15803d);
  color: #fff;
  flex: none;
}
.lion-head img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  padding: 2px;
  flex: none;
}
.lion-head .t { font-size: 15px; font-weight: 700; line-height: 1.1; }
.lion-head .s { font-size: 11px; opacity: .85; }
.lion-head .x {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .9;
  padding: 0 4px;
}

.lion-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: #f8f7f4;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lion-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 88%;
}
.lion-msg .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.lion-msg .av-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
}
.lion-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.lion-msg.bot { align-self: flex-start; }
.lion-msg.bot .lion-bubble {
  background: #fff;
  border: 1px solid #ECEAE5;
  border-bottom-left-radius: 4px;
  color: #1f2328;
}
.lion-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.lion-msg.me .lion-bubble {
  background: #16a34a;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.lion-msg.bot.thinking .av { animation: lionShake .6s ease-in-out infinite; }
/* @keyframes lionShake 定义在上方浮窗段（20261008i 合并去重，此前重复定义两次） */
.lion-typing { font-size: 12px; color: #8b949e; padding: 0 4px; }
.lion-retry {
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius:8px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}

.lion-foot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #ECEAE5;
  background: #fff;
  flex: none;
}
.lion-foot textarea {
  flex: 1;
  resize: none;
  border: 1px solid #ECEAE5;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 14px;
  line-height: 1.4;
  max-height: 96px;
  outline: none;
  font-family: inherit;
}
.lion-foot textarea:focus { border-color: #16a34a; }
.lion-send {
  border: none;
  cursor: pointer;
  flex: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: #15803d;
}
.lion-send:disabled { opacity: .5; cursor: default; }

/* 轻量 toast（语音失败等统一用户文案） */
.lion-toast {
  position: fixed;
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, 12px);
  background: rgba(19, 23, 42, .92);
  color: #fff;
  font-size: 13px;
  padding: 9px 16px;
  border-radius:8px;
  z-index: 1700;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  max-width: 80vw;
}
.lion-toast.show { opacity: 1; transform: translate(-50%, 0); }