/*
 * ai-orb —— 数字客服**入口（球）**的样式。
 *
 * 🔴 **这里没有面板样式**：点开弹出的对话界面由平台官方 `widget.js` 渲染，
 *    它在自己的 shadow DOM 里带样式 —— 我们既不改也不补（2026-09-29 修订）。
 *
 * 🔴 球的形态**照抄设计侧参考实现**（`ai-orb` v13），不许自己发明
 *    （2026-09-29 设计师打回一次：第一版做成"实心圆 + 白点"）。
 *    对应关系：`.ai-orb__orb` = 参考的 `.ai-orb`、`__orb-body` = `.orb-container`、
 *    `__orb-glass` = `.orb-glass`；要点 =
 *    **主题色实心球（`size/2`）+ 球外光晕（两层十字椭圆、50% 硬停）
 *      + 球面缓慢自转的装饰色晕（4 个渐变圆 + blur）+ 玻璃高光**，
 *    整体 `scale(1.4)`（盒子仍是 `--size`），hover 上浮放大 + 投影。
 *    ⇒ 改形态前先看参考实现，别凭感觉调。
 *
 * 🎨 颜色口径：球体吃**站点主题令牌** `--color-theme-primary`（参考实现就是
 *    `var(--color-theme-primary, #8b3fd0)`）；**光晕不跟主题**（参考缺省是那层淡紫
 *    `rgba(230,168,255,.1)`），要同色系就传 `--ai-orb-halo`。
 *    面板主题色由**平台端**的客服实例配（`themeColor`），与本文件无关。
 *
 * 类名全部 `ai-orb__*` **命名空间化**：站点级 CSS 未分层时恒赢组件样式，
 * 通用类名（`.ball` / `.orb`）在任何站点上都是定时炸弹。
 */

.ai-orb {
  --ai-orb-accent: var(--color-theme-primary, #2563eb);
  --ai-orb-size: 56px;
  --ai-orb-x: 24px;
  --ai-orb-y: 78px;
  --ai-orb-z: 1200;
  --ai-orb-halo: rgba(230, 168, 255, 0.1);
}

/* 外层 = 参考实现的 `.ai-orb-fab`：贴角定位 + 按钮态（hover 上浮/放大 + 投影） */
.ai-orb__ball {
  position: fixed;
  z-index: var(--ai-orb-z);
  width: var(--ai-orb-size);
  height: var(--ai-orb-size);
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease;
  will-change: transform;
}

.ai-orb__ball:hover {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.28));
}

.ai-orb__ball:active {
  transform: translateY(-1px) scale(1.02);
}

.ai-orb__ball:focus-visible {
  outline: 2px solid var(--ai-orb-accent);
  outline-offset: 4px;
  border-radius: 50%;
}

/* 中层的盒子（= 参考实现的 `.ai-orb`，`--s` 的网格盒，整体放大 1.4）。
 * 🔴 尺寸都用 `calc(var(--size) / 2)` 直接给死，不用 `width:100%`：
 *    父盒有 padding，`height:100%` 若按内边距盒解会把球拉成竖椭圆（参考实现 2026-09-17 实报）。 */
.ai-orb__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ai-orb-size);
  height: var(--ai-orb-size);
  aspect-ratio: 1;
  padding: calc(var(--ai-orb-size) / 4);
  border-radius: 50%;
  transform: scale(1.4);
}

/* ⓪ 球外光晕：两层十字椭圆（同色 10%、50% 硬停），照参考实现几何。
 *   ⚠️ 画在伪元素上而不是盒子背景：出码侧有一条历史兜底 `background:none!important`。 */
.ai-orb__orb::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--ai-orb-size);
  height: var(--ai-orb-size);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(60% 75% at center, var(--ai-orb-halo) 50%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(75% 60% at center, var(--ai-orb-halo) 50%, rgba(0, 0, 0, 0) 50%);
}

/* ① 球体（= 参考实现的 `.orb-container`）：主题色实心球，直径 `--size/2` */
.ai-orb__orb-body {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: calc(var(--ai-orb-size) / 2);
  height: calc(var(--ai-orb-size) / 2);
  border-radius: 50%;
  aspect-ratio: 1;
  background: var(--ai-orb-accent);
}

/* ② 装饰色晕（= `.orb-container::before`）：4 个圆（2 白 2 黑，位置/大小照参考实现）
 *    + 整层模糊 + 缓慢公转/呼吸 —— 球面因此是"平滑过渡"而不是硬边高光。 */
.ai-orb__orb-body::before {
  content: '';
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  background:
    radial-gradient(17% 17% at 50% 34%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%),
    radial-gradient(16% 16% at 66% 50%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 100%),
    radial-gradient(12% 12% at 50% 66%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0) 100%),
    radial-gradient(8% 8% at 34% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 100%);
  filter: blur(calc(var(--ai-orb-size) * 0.06));
  animation: ai-orb-orbit 6s cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite,
    ai-orb-glow 6s ease-in-out infinite;
}

@keyframes ai-orb-orbit {
  from {
    transform: rotate(360deg) scale(0.92);
  }
  30% {
    transform: rotate(252deg) scale(1.3);
  }
  70% {
    transform: rotate(108deg) scale(0.98);
  }
  to {
    transform: rotate(0deg) scale(0.92);
  }
}

@keyframes ai-orb-glow {
  from {
    opacity: 1;
  }
  30% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.42;
  }
  98% {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

/* ③ 玻璃高光（= `.orb-glass`）：右上白光 + 左下暗部，照参考实现的比例 */
.ai-orb__orb-glass {
  position: absolute;
  inset: 0;
  margin: auto;
  overflow: hidden;
  width: calc(var(--ai-orb-size) * 0.56);
  height: calc(var(--ai-orb-size) * 0.56);
  border-radius: 50%;
  pointer-events: none;
  perspective: 120px;
  background:
    radial-gradient(circle closest-side at 70% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 80%),
    radial-gradient(circle closest-side at 34% 80%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 76%);
}

.ai-orb--bottom-right .ai-orb__ball {
  right: var(--ai-orb-x);
  bottom: var(--ai-orb-y);
}
.ai-orb--bottom-left .ai-orb__ball {
  left: var(--ai-orb-x);
  bottom: var(--ai-orb-y);
}
.ai-orb--top-right .ai-orb__ball {
  right: var(--ai-orb-x);
  top: var(--ai-orb-y);
}
.ai-orb--top-left .ai-orb__ball {
  left: var(--ai-orb-x);
  top: var(--ai-orb-y);
}

/* 无障碍：用户在系统里声明「减少动效」时停掉球的动画，只留静态玻璃球 */
@media (prefers-reduced-motion: reduce) {
  .ai-orb__orb-body::before {
    animation: none;
  }

  .ai-orb__ball {
    transition: none;
  }
}