/* ============================================================
   PatentLab 悬浮客服形象 · 组件样式
   所有类名带 cs- 前缀，不与站点原有样式冲突。
   位置、尺寸等参数在 widget.js 顶部的 CS_CONFIG 里改；
   本文件只放"长什么样"，一般不用动。
   ============================================================ */

#cs-agent {
  /* 这三个变量由 widget.js 的 CS_CONFIG 在运行时写入 */
  --cs-width: 106px;
  --cs-right: 30px;
  --cs-bottom: 26px;

  position: fixed;
  right: var(--cs-right);
  bottom: var(--cs-bottom);
  width: var(--cs-width);
  /* 高于主内容(10)与页头(30)，低于预览遮罩(40)与弹窗/toast(50)，
     这样打开预览或更新日志弹窗时，形象会被正常盖住 */
  z-index: 35;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.3s;
  animation: cs-enter 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.25s both;
}

@keyframes cs-enter {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 长时间呼吸浮动，让形象始终是"活"的 */
#cs-agent .cs-float { animation: cs-floaty 3.8s ease-in-out infinite; will-change: transform; }
@keyframes cs-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

#cs-agent .cs-frame { transition: filter 0.3s ease, transform 0.3s ease; }
#cs-agent:hover .cs-frame { filter: brightness(1.08) saturate(1.04); transform: translateY(-3px); }

/* ---------- 图片层：交叉淡入 ---------- */
#cs-agent .cs-stage { position: relative; width: 100%; padding-top: 149.83%; }
#cs-agent .cs-sprite {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 26px rgba(60, 20, 120, 0.42));
}
#cs-agent .cs-sprite.cs-show { opacity: 1; }
#cs-agent:hover .cs-sprite { filter: drop-shadow(0 20px 30px rgba(120, 60, 220, 0.5)); }

/* ---------- 各状态的动作 ---------- */
#cs-agent.cs-act-work  .cs-sprite.cs-show { animation: cs-actwork 2.8s ease-in-out infinite; }
#cs-agent.cs-act-phone .cs-sprite.cs-show { animation: cs-actphone 3.6s ease-in-out infinite; }
#cs-agent.cs-act-sleep .cs-sprite.cs-show { animation: cs-actsleep 3.4s ease-in-out infinite; }
#cs-agent.cs-act-alert .cs-sprite.cs-show { animation: cs-actalert 1.6s ease-in-out infinite; }

/* 工作：缓慢呼吸，专注在屏幕前 */
@keyframes cs-actwork {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.6px) scale(1.002); }
}
/* 看手机：身体轻轻摇摆 */
@keyframes cs-actphone {
  0%, 100% { transform: rotate(-0.9deg) translateY(0); }
  50%      { transform: rotate(0.9deg) translateY(-2px); }
}
/* 打盹：点头式轻轻晃动 */
@keyframes cs-actsleep {
  0%, 100% { transform: rotate(-1.3deg) translateY(1px); }
  45%      { transform: rotate(0.6deg) translateY(5px); }
  70%      { transform: rotate(1.1deg) translateY(4px); }
}
/* 精神：轻快起伏 */
@keyframes cs-actalert {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

#cs-agent .cs-ground {
  width: 62%; height: 9px; margin: -4px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(90, 40, 160, 0.5), transparent 72%);
  filter: blur(5px);
  transition: opacity 0.35s;
}

/* ---------- 点击「支棱起来」 ---------- */
#cs-agent.cs-wake .cs-float { animation: cs-pop 0.74s cubic-bezier(0.24, 1.3, 0.36, 1); }
@keyframes cs-pop {
  0%   { transform: scale(1) translateY(0); }
  16%  { transform: scale(0.92) translateY(7px); }
  44%  { transform: scale(1.13) translateY(-15px); }
  66%  { transform: scale(0.975) translateY(1px); }
  84%  { transform: scale(1.035) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}
#cs-agent .cs-ring {
  position: absolute;
  left: 50%; bottom: 12%;
  width: 74%; padding-bottom: 74%; height: 0;
  transform: translate(-50%, 0) scale(0.5);
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, 0.85);
  opacity: 0;
  pointer-events: none;
}
#cs-agent.cs-wake .cs-ring { animation: cs-ringout 0.85s ease-out; }
@keyframes cs-ringout {
  0%   { opacity: 0.95; transform: translate(-50%, 0) scale(0.45); }
  100% { opacity: 0;    transform: translate(-50%, 0) scale(1.5); }
}

/* ---------- 对话气泡 ---------- */
#cs-agent .cs-bubble {
  position: absolute;
  bottom: calc(100% + 9px);
  right: 2px;
  max-width: 140px;
  padding: 7px 10px;
  background: rgba(30, 20, 55, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #f2efff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(139, 92, 246, 0.18);
  opacity: 0;
  transform: translateY(9px) scale(0.9);
  transform-origin: bottom right;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.35);
  pointer-events: none;
  text-align: left;
}
#cs-agent .cs-bubble::after {
  content: '';
  position: absolute;
  right: 20px; bottom: -5px;
  width: 9px; height: 9px;
  background: rgba(30, 20, 55, 0.96);
  border-right: 1px solid rgba(167, 139, 250, 0.45);
  border-bottom: 1px solid rgba(167, 139, 250, 0.45);
  transform: rotate(45deg);
}
#cs-agent .cs-bubble.cs-show { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- 状态小标签 ---------- */
#cs-agent .cs-tag {
  position: absolute;
  left: 50%; bottom: -5px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 14, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10.5px;
  white-space: nowrap;
  transition: opacity 0.3s, color 0.3s;
}
#cs-agent .cs-tag .cs-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
#cs-agent .cs-t-work  { color: #a78bfa; }
#cs-agent .cs-t-phone { color: #f0abfc; }
#cs-agent .cs-t-sleep { color: #7dd3fc; }
#cs-agent .cs-t-alert { color: #6ee7b7; }
#cs-agent.cs-hide-tag .cs-tag { opacity: 0; }

/* ---------- 卡片形态 ---------- */
#cs-agent.cs-card-mode .cs-frame {
  padding: 14px 12px 6px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(46, 28, 84, 0.95), rgba(15, 10, 32, 0.97));
  border: 1px solid rgba(167, 139, 250, 0.34);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07),
              0 0 34px rgba(124, 58, 237, 0.2);
}
#cs-agent.cs-card-mode .cs-ground { opacity: 0; }
#cs-agent.cs-card-mode .cs-sprite { filter: none; }

/* ---------- 窄屏：再缩小一档并贴近边角，避免遮挡内容 ---------- */
@media (max-width: 760px) {
  #cs-agent {
    right: 12px;
    bottom: 12px;
    width: 92px;
  }
}