.fob-root{
  /* 组件主题变量（跟随 html.dark 自动切换） */
  --fob-panel-bg: rgba(232,233,231,.78);
  --fob-panel-border: rgba(29,29,31,.10);
  --fob-panel-shadow: 0 24px 70px rgba(24,27,32,.14), 0 2px 10px rgba(24,27,32,.06);
  --fob-txt: #1d1d1f;
  --fob-txt-2: #6e6e73;
  --fob-bubble-ai: rgba(120,120,128,.13);
  --fob-chip-bg: rgba(255,255,255,.46);
  --fob-chip-border: rgba(29,29,31,.1);
  --fob-input-bg: rgba(255,255,255,.58);
  --fob-input-border: rgba(29,29,31,.12);
  --fob-hairline: rgba(29,29,31,.08);
  --fob-orb-shadow: saturate(.55) opacity(.76) drop-shadow(0 12px 26px rgba(24,27,32,.11));
  --fob-orb-shadow-active: saturate(.92) opacity(.98) drop-shadow(0 13px 28px rgba(24,27,32,.14));
}
html.dark .fob-root{
  --fob-panel-bg: rgba(28,28,34,.68);
  --fob-panel-border: rgba(255,255,255,.12);
  --fob-panel-shadow: 0 24px 90px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
  --fob-txt: #f5f5f7;
  --fob-txt-2: #98989d;
  --fob-bubble-ai: rgba(120,120,128,.22);
  --fob-chip-bg: rgba(255,255,255,.07);
  --fob-chip-border: rgba(255,255,255,.13);
  --fob-input-bg: rgba(255,255,255,.08);
  --fob-input-border: rgba(255,255,255,.14);
  --fob-hairline: rgba(255,255,255,.1);
  --fob-orb-shadow: drop-shadow(0 0 15px rgba(255,61,200,.22)) drop-shadow(0 0 30px rgba(34,232,213,.14)) drop-shadow(0 9px 20px rgba(0,0,0,.5));
}
.fob-root{ position:fixed; inset:0; pointer-events:none; z-index:9999;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.fob-root button{ font-family: inherit; }

/* ---------- 悬浮球 ---------- */
.fob-orb{
  position:fixed; left:0; top:0;
  width: 88px; aspect-ratio: 1;
  pointer-events:auto; cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none;
  will-change: transform; z-index:2;
}
.fob-orb.fob-docking{
  transition: left .32s cubic-bezier(.22,1,.36,1), top .32s cubic-bezier(.22,1,.36,1);
}
.fob-orb:active{ cursor:grabbing; }
.fob-orb.born{ animation: fobBorn .95s cubic-bezier(.2,1.45,.32,1) both; }
@keyframes fobBorn{ from{ transform: scale(0); } to{ transform: scale(1); } }
.fob-orb canvas{
  width:100%; height:100%; display:block;
  filter: var(--fob-orb-shadow);
  transition: filter .25s ease;
}
.fob-orb.fob-engaged canvas,
.fob-orb[data-state="wave"] canvas,
.fob-orb[data-state="think"] canvas,
.fob-orb[data-state="speak"] canvas{ filter: var(--fob-orb-shadow-active); }
@media (max-width: 640px){ .fob-orb{ width: 67px; } }

/* ---------- 聊天面板 ---------- */
.fob-panel{
  position:fixed; left:0; top:0; z-index:3;
  width: min(384px, calc(100vw - 24px));
  height: min(560px, calc(100dvh - 150px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius: 28px;
  background: var(--fob-panel-bg);
  border: 1px solid var(--fob-panel-border);
  backdrop-filter: blur(34px) saturate(1.9); -webkit-backdrop-filter: blur(34px) saturate(1.9);
  box-shadow: var(--fob-panel-shadow);
  color: var(--fob-txt);
  pointer-events:auto;
  opacity:0; visibility:hidden; transform: scale(.82) translateY(14px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.3,1.2,.35,1), visibility 0s linear .45s;
}
.fob-panel.open{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .26s ease, transform .55s cubic-bezier(.22,1.35,.32,1);
}
.fob-head{
  flex:none; display:flex; align-items:center; gap:11px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid var(--fob-hairline);
}
.fob-avatar{
  flex:none; width: 34px; height: 34px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(135deg, #9db8ff 0%, #b79bff 52%, #ff9ade 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 4px 12px rgba(122,92,255,.35);
  position:relative; overflow:hidden;
}
.fob-avatar::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.85), rgba(255,255,255,0) 55%);
  mix-blend-mode: overlay;
}
.fob-titles{ flex:1; min-width:0; line-height:1.25; }
.fob-titles strong{ display:block; font-size: 15px; font-weight: 650; letter-spacing:-.01em; }
.fob-titles small{ display:flex; align-items:center; gap:5px; font-size: 11.5px; color: var(--fob-txt-2); }
.fob-titles .dot{ width:6px; height:6px; border-radius:50%; background:#34c759; box-shadow:0 0 6px #34c759; }
.fob-close{
  flex:none; width: 28px; height: 28px; border-radius: 50%; border:none; cursor:pointer;
  display:grid; place-items:center; color: var(--fob-txt-2);
  background: color-mix(in srgb, var(--fob-txt) 7%, transparent);
  transition: transform .2s ease, background .2s ease;
}
.fob-close:hover{ transform: scale(1.1); background: color-mix(in srgb, var(--fob-txt) 13%, transparent); }

/* 消息区 */
.fob-msgs{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap: 10px;
  padding: 16px 16px 8px; scroll-behavior:smooth;
}
.fob-msgs::-webkit-scrollbar{ width: 5px; }
.fob-msgs::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--fob-txt) 18%, transparent); border-radius:99px; }
.fob-msgs::-webkit-scrollbar-track{ background: transparent; }
.fob-msg{ max-width: 80%; padding: 10px 14px; font-size: 14.5px; line-height: 1.6;
  border-radius: 20px; white-space: pre-wrap; word-break: break-word;
  animation: fobMsgIn .4s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes fobMsgIn{ from{ opacity:0; transform: translateY(10px) scale(.96);} to{ opacity:1; transform:none;} }
.fob-msg.user{
  align-self: flex-end; color:#fff;
  background: linear-gradient(135deg, #3e7bfa, #8a5cff);
  border-bottom-right-radius: 7px;
  box-shadow: 0 6px 18px rgba(94,92,255,.32);
}
.fob-msg.ai{
  align-self: flex-start; background: var(--fob-bubble-ai);
  border-bottom-left-radius: 7px;
}
.fob-questions { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.fob-questions button {
  max-width:100%; padding:9px 12px; border-radius:14px;
  border:1px solid var(--fob-input-border); background:var(--fob-input-bg);
  color:var(--fob-txt); font:inherit; font-size:13px; text-align:left; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.fob-questions button:hover, .fob-questions button:focus-visible {
  border-color:rgba(182,0,168,.4); background:rgba(182,0,168,.045);
}
.fob-questions button:focus-visible { outline:2px solid rgba(182,0,168,.5); outline-offset:2px; }
.fob-msg.ai.typing{ display:flex; gap:5px; align-items:center; padding: 13px 16px; }
.fob-msg.ai.typing i{ width:7px; height:7px; border-radius:50%; background: var(--fob-txt-2); opacity:.4;
  animation: fobDots 1.2s ease-in-out infinite; }
.fob-msg.ai.typing i:nth-child(2){ animation-delay:.15s; }
.fob-msg.ai.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes fobDots{ 0%,60%,100%{ transform:none; opacity:.4;} 30%{ transform: translateY(-4px); opacity:.9;} }

/* 输入区 */
.fob-input{
  flex:none; display:flex; align-items:center; gap:10px;
  padding: 12px 14px 8px;
}
.fob-input input{
  flex:1; min-width:0; height: 40px; border-radius: 999px;
  border: 1px solid var(--fob-input-border); background: var(--fob-input-bg);
  color: var(--fob-txt); padding: 0 17px; font-size: 14px; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.fob-input input::placeholder{ color: var(--fob-txt-2); }
.fob-input input:focus{ border-color: rgba(122,92,255,.55); box-shadow: 0 0 0 3.5px rgba(122,92,255,.16); }
.fob-send{
  flex:none; width: 36px; height: 36px; border-radius: 50%; border:none; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg, #3e7bfa, #8a5cff);
  box-shadow: 0 4px 14px rgba(94,92,255,.4);
  transition: transform .2s ease, opacity .25s ease, box-shadow .25s ease;
}
.fob-send:hover:not(:disabled){ transform: scale(1.08); }
.fob-send:active:not(:disabled){ transform: scale(.94); }
.fob-send:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.fob-foot{ flex:none; text-align:center; font-size: 11px; color: var(--fob-txt-2); padding: 0 0 10px; opacity:.8; }