/* Vape With A Bang · 3D 人偶悬浮挂件样式 */

/* 动作片段改成 1:1 取景（不再左右裁切），挂件盒子也随之改成方形，
   这样平面仍是「撑满盒子高度」——人偶在屏幕上的大小和旧版一致，
   街舞（2:3 旧片）按高度限幅，渲染结果完全不变。 */
#mascotWidget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9000;            /* 低于年龄门(9999)与入场动画(10050)，不会遮挡 */
  width: 224px;
  height: 224px;
  touch-action: none;       /* 移动端：拖动由我们接管，不交给浏览器滚动 */
  cursor: grab;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#mascotWidget.is-dragging { cursor: grabbing; opacity: .92; }
/* smooth glide back when a drag ends without tucking the widget away */
#mascotWidget:not(.is-dragging) { transition: left .22s ease, top .22s ease; }
#mascotWidget.is-collapsed { transition: none; }

/* Close: slide out to the right and shrink, then leave only the edge arrow.
   Kept as a transform so the 3D stage is not re-laid out mid-animation. */
#mascotWidget.is-closing {
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
  transform: translate(46px, 34px) scale(.3);
  transform-origin: 100% 100%;
  opacity: 0;
  pointer-events: none;
  cursor: default;
}
#mascotWidget.is-closing .mascot-ai-bubble,
#mascotWidget.is-closing .mascot-ai-badge,
#mascotWidget.is-closing .mascot-close { opacity: 0; transition: opacity .12s ease; }

#mascotWidget .mascot { width: 100%; height: 100%; }
#mascotWidget model-viewer {
  width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
}
/* 视频动作（DJ/街舞/抛接/打坐）背景透明，融入页面 */
#mascotWidget .mascot video { background: transparent; }

/* ---------- 3D stage (mascot-3d.js) ----------
   动作片段在这里被画进一个真实 3D 场景：接触阴影 + 地面反光 + 指针视差。
   2D 素材本身没有深度可恢复，放进 3D 场景是为了让它有体积、有地面、有光源。 */
#mascotWidget .mascot-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;      /* 拖动/点击仍归 widget 管 */
  opacity: 0;
  transition: opacity .26s ease;
}
/* 片段在 3D 舞台上时，悬浮由舞台自己驱动（阴影才能钉在地面上），
   所以停掉 CSS float —— 交接时会先继承 float 的相位，不会跳。 */
#mascotWidget .mascot.mascot--float.m3d-live { animation: none; }

/* 滑出屏幕收起态：人偶隐藏，仅保留边缘小标签 */
#mascotWidget.is-collapsed { width: 0; height: 0; overflow: visible; cursor: default; }
#mascotWidget.is-collapsed .mascot { display: none; }

/* 收起后留在边缘的小标签（小箭头/品牌标） */
.mascot-tab {
  position: fixed;
  bottom: 16px;
  z-index: 9001;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c5cff, #a78bfa);
  color: #fff;
  font-size: 22px; line-height: 46px; text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .55);
  padding: 0;
  transition: transform .15s;
}
.mascot-tab:active { transform: scale(.92); }
.mascot-tab.hidden { display: none; }
.mascot-tab.tab-left  { left: 8px; }
.mascot-tab.tab-right { right: 8px; }
/* tucked to a horizontal edge: the arrow points back into the screen */
.mascot-tab.tab-top,
.mascot-tab.tab-bottom { left: 50%; right: auto; transform: translateX(-50%); }
.mascot-tab.tab-top { top: 8px; bottom: auto; }
.mascot-tab.tab-bottom { bottom: 8px; }
.mascot-tab.tab-top:active,
.mascot-tab.tab-bottom:active { transform: translateX(-50%) scale(.92); }

/* close button — tucks the widget to the right edge, arrow only */
.mascot-close {
  position: absolute; right: -2px; top: -2px; z-index: 5;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .34);
  background: rgba(10, 17, 32, .85);
  color: #b9c6d8; font-size: 16px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mascot-close:hover { background: var(--vv-gold, #7c5cff); border-color: var(--vv-gold, #7c5cff); color: #ffffff; }
#mascotWidget.is-collapsed .mascot-close { display: none; }

/* 平板/手机：尺寸更小，并抬高避开底部 tabbar */
@media (max-width: 820px), (pointer: coarse) {
  #mascotWidget { width: 176px; height: 176px; right: 10px; bottom: 74px; }
  .mascot-tab { bottom: 74px; }
  .mascot-tab.tab-bottom { bottom: 74px; }
  .mascot-close { width: 30px; height: 30px; font-size: 17px; }
}

/* ---------- AI assistant entry: question bubble + badge ---------- */
.mascot-ai-badge {
  position: absolute;
  left: -4px;
  top: 0;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, .65);
  background: linear-gradient(135deg, #7c5cff, #a78bfa);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(124, 92, 255, .5);
  animation: mascot-ai-pulse 2.6s ease-in-out infinite;
  transition: opacity .2s, visibility .2s;
}
.mascot-ai-badge:hover { filter: brightness(1.12); }
@keyframes mascot-ai-pulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(124, 92, 255, .5); }
  50%      { box-shadow: 0 6px 24px rgba(124, 92, 255, .9); }
}

.mascot-ai-bubble {
  position: absolute;
  right: -2px;
  bottom: calc(100% + 12px);
  z-index: 3;
  width: max-content;
  max-width: 205px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: linear-gradient(135deg, #2a1d5e 0%, #150f30 100%);
  border: 1px solid rgba(124, 92, 255, .5);
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 10px 26px rgba(2, 4, 10, .55);
  color: #e9eef7;
  font-family: var(--vv-sans, system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 9px 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s ease, transform .3s ease;
}
.mascot-ai-bubble.is-in { opacity: 1; transform: none; }
.mascot-ai-bubble:hover { border-color: rgba(167, 139, 250, .85); }
.mascot-ai-bubble i { color: #a78bfa; font-style: normal; font-size: 11px; line-height: 1.5; }
.mascot-ai-bubble span { flex: 1; }
/* speech tail */
.mascot-ai-bubble::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: #150f30;
  border-right: 1px solid rgba(124, 92, 255, .5);
  border-bottom: 1px solid rgba(124, 92, 255, .5);
  transform: rotate(45deg);
}

/* tucked away or chat panel open -> hide both entries */
#mascotWidget.is-collapsed .mascot-ai-bubble,
#mascotWidget.is-collapsed .mascot-ai-badge,
#mascotWidget.ai-busy .mascot-ai-bubble,
#mascotWidget.ai-busy .mascot-ai-badge {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 820px), (pointer: coarse) {
  .mascot-ai-badge { width: 28px; height: 28px; font-size: 13px; }
  .mascot-ai-bubble { max-width: 168px; font-size: 12px; padding: 8px 10px; bottom: calc(100% + 8px); }
}