/* ============================================================
   法小狐 · 助手人格
   所有动效只用 transform / opacity，不触发重排；尊重 prefers-reduced-motion。
   头像优先用 assets/brand/fox-avatar.png，没有就回退到品牌标记。
   ============================================================ */

.fx-fox {
  --fx-fox-size: 40px;
  --fx-fox-ring: rgba(37, 99, 235, .55);
  --fx-fox-glow: rgba(37, 99, 235, .18);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fx-fox-size);
  height: var(--fx-fox-size);
  flex: 0 0 auto;
  vertical-align: middle;
}

.fx-fox-av {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #eef4ff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
  transform-origin: 50% 78%;
}

.fx-fox-lg { --fx-fox-size: 56px; }
.fx-fox-sm { --fx-fox-size: 28px; }
.fx-fox-xl { --fx-fox-size: 96px; }

/* 状态环 / 光晕（不占用额外素材） */
.fx-fox::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  pointer-events: none;
}
.fx-fox::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--fx-fox-glow);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ---------- 待机：缓慢呼吸 ---------- */
.s-idle .fx-fox-av { animation: fxFoxBreath 3.6s ease-in-out infinite; }
@keyframes fxFoxBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* ---------- 聆听：脉冲环（用户正在输入） ---------- */
.s-listen { --fx-fox-ring: rgba(37, 99, 235, .6); }
.s-listen::before { border-color: var(--fx-fox-ring); animation: fxFoxPulse 1.8s ease-out infinite; }
@keyframes fxFoxPulse {
  0%   { opacity: .8; transform: scale(.92); }
  100% { opacity: 0;  transform: scale(1.35); }
}

/* ---------- 思考：转环 + 三点 ---------- */
.s-think::before {
  border-color: transparent;
  border-top-color: #2563eb;
  border-right-color: #93c5fd;
  opacity: 1;
  animation: fxFoxSpin 1.1s linear infinite;
}
.s-think .fx-fox-av { animation: fxFoxBob 1.6s ease-in-out infinite; }
@keyframes fxFoxSpin { to { transform: rotate(360deg); } }
@keyframes fxFoxBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.02); }
}

/* ---------- 检索：三页翻动 ---------- */
.s-read::after { opacity: .8; animation: fxFoxScan 1.9s ease-in-out infinite; }
@keyframes fxFoxScan {
  0%, 100% { transform: scale(1);     opacity: .25; }
  50%      { transform: scale(1.16);  opacity: .7; }
}
.s-read .fx-fox-av { animation: fxFoxSway 2.4s ease-in-out infinite; }
@keyframes fxFoxSway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* ---------- 书写：轻微点头 ---------- */
.s-write .fx-fox-av { animation: fxFoxNod 1.4s ease-in-out infinite; }
@keyframes fxFoxNod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(2px) rotate(-1.5deg); }
  70%      { transform: translateY(-1px) rotate(1deg); }
}

/* ---------- 提醒：一次抖动 + 琥珀光环 ---------- */
.s-alert { --fx-fox-ring: rgba(217, 119, 6, .75); --fx-fox-glow: rgba(251, 191, 36, .3); }
.s-alert::after { opacity: 1; }
.s-alert .fx-fox-av { animation: fxFoxShake .6s ease-in-out 1; }
@keyframes fxFoxShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(1px); }
}

/* ---------- 完成：一次弹跳 + 绿色光环 ---------- */
.s-ok { --fx-fox-ring: rgba(22, 163, 74, .7); --fx-fox-glow: rgba(34, 197, 94, .28); }
.s-ok::after { opacity: 1; }
.s-ok .fx-fox-av { animation: fxFoxPop .55s cubic-bezier(.34, 1.56, .64, 1) 1; }
@keyframes fxFoxPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* ---------- 空闲打盹：浮动 + z ---------- */
.s-sleep .fx-fox-av { animation: fxFoxFloat 3.4s ease-in-out infinite; filter: saturate(.75); }
@keyframes fxFoxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.fx-fox-zzz {
  position: absolute;
  right: -2px;
  top: -6px;
  z-index: 3;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  animation: fxFoxZzz 2.6s ease-in-out infinite;
}
@keyframes fxFoxZzz {
  0%   { opacity: 0; transform: translate(0, 2px) scale(.8); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(4px, -8px) scale(1.1); }
}

/* ---------- 额度耗尽：灰度 ---------- */
.s-quota .fx-fox-av { filter: grayscale(1); opacity: .7; animation: fxFoxBreath 5s ease-in-out infinite; }

/* ---------- 可点击时 ---------- */
.fx-fox-btn { border: 0; background: none; padding: 0; cursor: pointer; }
.fx-fox-btn:hover .fx-fox-av { transform: scale(1.06); box-shadow: 0 4px 14px rgba(37, 99, 235, .28); }

/* ---------- 气泡（点一下说人话） ---------- */
.fx-bubble {
  position: relative;
  display: inline-block;
  /* width:max-content 是关键：气泡绝对定位在 28px 宽的头像里，
     默认的 shrink-to-fit 会算成「可用宽度 = 头像宽 − left 偏移」= 负数，
     结果被压到 50 多像素，一排只放得下两个字。max-content 按文字排，
     再用 max-width 封顶。 */
  width: max-content;
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
  background: #fff;
  color: #1f2937;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 12.8px;
  line-height: 1.75;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
  animation: fxBubbleIn .22s ease both;
}
.fx-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
@keyframes fxBubbleIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- 行内助手提示条 ---------- */
.fx-fox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f5f9ff;
  border: 1px solid #dbe7f8;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 12.8px;
  color: #334155;
  line-height: 1.75;
}
.fx-fox-line b { color: #1e3a5f; }
.fx-fox-line .fx-fox-line-t { flex: 1; min-width: 0; }
.fx-fox-line .fx-fox-line-t { color: #334155; }
.fx-fox-act {
  flex: 0 0 auto; align-self: center;
  border: 1px solid #bfdbfe; background: #fff; color: #1d4ed8;
  height: 32px; padding: 0 14px; border-radius: 9px;
  font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.fx-fox-act:hover { background: #eef4ff; border-color: #93c5fd; }
.fx-fox-tech { margin-top: 6px; font-size: 11.5px; color: #94a3b8; }
.fx-fox-tech summary { cursor: pointer; color: #b6c2d2; }
.fx-fox-tech[open] summary { margin-bottom: 4px; }

/* 出错时的块：琥珀底，和成功态区分开 */
.fx-fox-line.--warn { background: #fffbf0; border-color: #f0ddb4; }
.fx-fox-line.--warn .fx-fox-line-t { color: #7a5a10; }

/* ---------- 空状态 ---------- */
.fx-fox-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 24px; text-align: center;
}
.fx-fox-empty .fx-fox { --fx-fox-size: 88px; }
.fx-fox-empty-t { max-width: 380px; font-size: 13.5px; color: #64748b; line-height: 1.85; }
.fx-fox-empty-a { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* 空状态里的角色：只取头肩，比整身更适合"还没有内容"这种安静场合 */
.fx-fox-head { display: inline-block; width: 96px; height: 100px; }
.fx-fox-head .fx-char-svg { width: 100%; height: 100%; display: block; }

/* ---------- 加载叙事：三段式 ---------- */
.fx-fox-load {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
.fx-fox-load .fx-fox-steps { flex: 1; min-width: 0; }
.fx-fox-load .fx-fox-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.8px;
  color: #94a3b8;
  line-height: 1.6;
  transition: color .3s ease;
}
.fx-fox-load .fx-fox-step .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: 0 0 auto;
  transition: background .3s ease, transform .3s ease;
}
.fx-fox-load .fx-fox-step.on { color: #1e3a5f; font-weight: 700; }
.fx-fox-load .fx-fox-step.on .dot { background: #2563eb; transform: scale(1.35); }
.fx-fox-load .fx-fox-step.done { color: #94a3b8; }
.fx-fox-load .fx-fox-step.done .dot { background: #86efac; }

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-fox-av,
  .fx-fox::before,
  .fx-fox::after,
  .fx-fox-zzz { animation: none !important; }
  .s-think::before { opacity: .9; }
  .s-think .fx-fox-av { opacity: .85; }
}

/* ============================================================
   常驻助手（右下角那只会跟着你动的小狐狸）
   ============================================================ */
.fx-dock {
  position: fixed;
  /* 高于导航栏（9999/10000）：角色能被拖到任意位置，拖到导航上也不会被盖住点不到；
     但低于各种弹窗（11000+），弹出对话框时它不抢戏 */
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  touch-action: none;         /* 支持拖动 */
  user-select: none;
}
/* 默认蹲在右下角；拖走后由 JS 写 left/top。
   位置故意不做记忆：用户下次打开网站，它还在右下角，不会找不到 */
.fx-dock.corner-br { right: 14px; bottom: 14px; }
.fx-dock.fx-free { right: auto; bottom: auto; }
/* 在屏幕右半边，气泡和菜单往左伸；左半边则往右伸 */
.fx-dock.fx-align-r { align-items: flex-end; }
.fx-dock.fx-align-l { align-items: flex-start; }

/* 角色本体 + 旁边那颗设置钮 */
.fx-dock-row { display: flex; align-items: flex-end; gap: 6px; }
.fx-dock.fx-align-l .fx-dock-row { flex-direction: row-reverse; }
.fx-dock-fox {
  width: 104px; height: 122px;   /* 真实尺寸由 JS 按"小/标准/大"写行内样式 */
  padding: 0; border: 0; background: none; cursor: grab;
  display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .18));
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.fx-dock-fox:hover { transform: translateY(-3px) scale(1.04); }
.fx-dock-fox:active { cursor: grabbing; transform: scale(.97); }
.fx-dock-fox svg { width: 100%; height: 100%; display: block; }
.fx-dock.fx-dragging .fx-dock-fox { cursor: grabbing; transform: scale(1.06); }
.fx-dock.fx-dragging { z-index: 10600; }
.fx-dock-gear {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid #e2e8f0; background: rgba(255, 255, 255, .92);
  color: #64748b; font-size: 12px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
  opacity: .5; transition: all .18s ease;
}
.fx-dock-gear:hover { opacity: 1; color: #1d4ed8; border-color: #93c5fd; }

/* 点它一下冒出来的对话框 */
.fx-dock-bubble {
  position: absolute;               /* 脱离排版：只取决于内容，不被角色尺寸挤窄 */
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 236px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
  font-size: 12.8px;
  line-height: 1.75;
  color: #334155;
  cursor: pointer;
}
.fx-dock-bubble[hidden] { display: none; }
.fx-dock.fx-align-r .fx-dock-bubble { right: 0; }
.fx-dock.fx-align-l .fx-dock-bubble { left: 0; }
/* 聊天里的对话才显示"换一句"和收起钮；报错、提醒这类系统话不显示 */
.fx-dock-bubble-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed #eef2f7;
}
.fx-dock-bubble[data-chat="0"] .fx-dock-bubble-foot { display: none; }
.fx-dock-bubble-hint { font-size: 11px; color: #9aa8bd; }
.fx-dock-bubble-x {
  width: 20px; height: 20px; flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 50%; background: #f1f5f9; color: #7c8aa0;
  font-size: 13px; line-height: 1; cursor: pointer; transition: all .15s ease;
}
.fx-dock-bubble-x:hover { background: #e2e8f0; color: #334155; }
/* 角色靠近屏幕顶部时，气泡改到它下面，别顶出屏幕 */
.fx-dock.fx-below .fx-dock-bubble { bottom: auto; top: calc(100% + 8px); }
.fx-dock.fx-below .fx-dock-bubble::after {
  bottom: auto; top: -6px;
  border-right: none; border-bottom: none;
  border-left: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
}
.fx-dock-bubble::after {
  content: '';
  position: absolute; bottom: -6px; right: 44px;   /* 小尾巴对准角色的头 */
  width: 10px; height: 10px; background: #fff;
  border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
.fx-dock.fx-align-l .fx-dock-bubble::after { right: auto; left: 44px; }
.fx-dock-bubble.fx-in { animation: fxDockIn .2s cubic-bezier(.34, 1.3, .64, 1) both; }

/* 展开面板 */
.fx-dock-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 244px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
  overflow: hidden;
}
.fx-dock.fx-align-l .fx-dock-panel { right: auto; left: 0; }
.fx-dock.fx-below .fx-dock-panel { bottom: auto; top: calc(100% + 8px); }
.fx-dock-panel[hidden] { display: none; }
.fx-dock-panel.fx-in { animation: fxDockIn .22s cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes fxDockIn {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fx-dock-sizes {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 12px 4px;
}
.fx-dock-lb { font-size: 12px; font-weight: 700; color: #64748b; margin-right: 2px; }
.fx-dock-size {
  height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #dbe3ee; background: #fff; color: #475569;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .16s ease;
}
.fx-dock-size:hover { border-color: #93c5fd; color: #1d4ed8; }
.fx-dock-size.on { background: #e8f0fe; border-color: #93c5fd; color: #1d4ed8; }
.fx-dock-note { padding: 2px 12px 10px; font-size: 11.5px; line-height: 1.6; color: #94a3b8; }
.fx-dock-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfd;
}
.fx-dock-act {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px; border-radius: 9px;
  border: 1px solid #dbe3ee; background: #fff; color: #475569;
  font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: all .16s ease;
}
.fx-dock-act:hover { border-color: #93c5fd; color: #1d4ed8; background: #eef4ff; }
.fx-dock-act i { font-size: 11px; }

/* 手机端：小一点，别挡操作 */
@media (max-width: 700px) {
  .fx-dock-fox { width: 84px; height: 99px; }
  .fx-dock.corner-br { right: 10px; bottom: 10px; }
  .fx-dock-panel { width: 216px; }
  .fx-dock-bubble { max-width: 200px; }
  .fx-fox-head { width: 78px; height: 82px; }
}

/* 用户关掉过就不再出现（由 JS 控制挂载，这里只兜底） */
.fx-dock.fx-hidden { display: none !important; }