Tolan/frontend/src/styles/chatbot-fix copy.css

/**
 * ChatBotPage 小屏幕修复
 * 解决宽度 < 280px 或高度 < 500px 时的白屏问题
 */

/* 极小屏幕降级：允许滚动 */
html[data-too-small="true"] .chatbot-container,
body[data-too-small="true"] .chatbot-container,
#root[data-too-small="true"] .chatbot-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 600px;
  height: auto;
  /* 确保背景始终覆盖 */
  background: linear-gradient(to bottom, #25232E, #2B2A2F) !important;
}

/* 确保内层容器也能正确显示 */
html[data-too-small="true"] .chatbot-container > div,
body[data-too-small="true"] .chatbot-container > div,
#root[data-too-small="true"] .chatbot-container > div {
  min-height: 600px;
}

/* 极小屏幕时，确保背景图片可见 */
html[data-too-small="true"] .chatbot-bg,
body[data-too-small="true"] .chatbot-bg,
#root[data-too-small="true"] .chatbot-bg {
  position: absolute;
  min-height: 600px;
}

.energy-stone-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.energy-stone {
  position: absolute;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
  /* 移除浮动动画，因为现在由容器处理 */
  animation: none;
}

.energy-stone img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.energy-stone[data-type='mission'] {
  animation-duration: 8s;
}

/* 能量石容器：应用浮动动画，让光晕和能量石按钮一起浮动 */
/* 关闭能量石的浮动动画，保持静止，避免路径被叠加 */
.energy-stone-container {
  animation: none !important;
}

/* 调试生成的能量石允许恢复浮动动画 */
.energy-stone-container.debug-float {
  animation: energyStoneContainerFloat 6s ease-in-out infinite !important;
}


.energy-stone-container[data-fading='true'][data-anim-ready='true'][data-stone-id] {
  /* 移除浮动动画，应用移动动画 */
  animation: energyStoneMoveToAvatar 1s ease-in-out forwards !important;
  /* 确保 transform 能够正确应用 */
  transform-origin: center center !important;
  /* 使用 fixed 定位，以便正确使用像素值进行动画 */
  position: fixed !important;
  z-index: 10000 !important;
  pointer-events: none !important;
}

/* 正式能量石动画时，保持大小，仅透明度渐隐 */
.energy-stone-container[data-fading='true'][data-anim-ready='true'][data-stone-id] .energy-stone {
  animation: energyStoneShrink 1.4s ease-in-out forwards !important;
}

.energy-stone-container[data-fading='true'][data-anim-ready='true'][data-stone-id] .energy-stone-hint {
  animation: energyStoneHintShrink 1.4s ease-in-out forwards !important;
}

/* 正式能量石移动到动画形象中心的动画 - 从当前位置移动到终点 */
/* 使用 CSS 变量来设置起点和终点，支持横向和纵向移动 */
@keyframes energyStoneMoveToAvatar {
  0% {
    /* 起点：使用 transform 位移为 0，位置由元素当前 left/top 决定 */
    transform: translate(-50%, -50%) translate3d(0, 0, 0) !important;
    opacity: 1 !important;
  }
  85% {
    /* 大部分时间保持可见，降低提前消失感知 */
    transform: translate(-50%, -50%) translate3d(
      var(--animation-dx, 0),
      var(--animation-dy, 0),
      0
    ) !important;
    opacity: 1 !important;
  }
  100% {
    /* 终点：在 transform 中叠加位移，避免依赖 left/top 动画 */
    transform: translate(-50%, -50%) translate3d(
      var(--animation-dx, 0),
      var(--animation-dy, 0),
      0
    ) !important;
    opacity: 0 !important;
  }
}

/* 正式能量石缩小动画 - 从 48px 缩小到 4.8px (10%) */
@keyframes energyStoneShrink {
  0% {
    width: min(calc(48 * min(100vw, 600PX) / 393), calc(5.633802816901408 * var(--vh, 1vh))) !important;
    height: min(calc(48 * min(100vw, 600PX) / 393), calc(5.633802816901408 * var(--vh, 1vh))) !important;
    opacity: 1 !important;
  }
  100% {
    width: min(calc(48 * min(100vw, 600PX) / 393), calc(5.633802816901408 * var(--vh, 1vh))) !important;
    height: min(calc(48 * min(100vw, 600PX) / 393), calc(5.633802816901408 * var(--vh, 1vh))) !important;
    opacity: 0 !important;
  }
}

/* 正式能量石光晕缩小动画 - 从 92px 缩小到 9.2px (10%) */
@keyframes energyStoneHintShrink {
  0% {
    width: min(calc(92 * min(100vw, 600PX) / 393), calc(10.7981220657277 * var(--vh, 1vh))) !important;
    height: min(calc(92 * min(100vw, 600PX) / 393), calc(10.7981220657277 * var(--vh, 1vh))) !important;
    opacity: 1 !important;
  }
  100% {
    width: min(calc(92 * min(100vw, 600PX) / 393), calc(10.7981220657277 * var(--vh, 1vh))) !important;
    height: min(calc(92 * min(100vw, 600PX) / 393), calc(10.7981220657277 * var(--vh, 1vh))) !important;
    opacity: 0 !important;
  }
}

@keyframes energyStoneContainerFloat {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

.chatbot-avatar-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0.25;
  pointer-events: none;
  animation: avatarHintPulse 2.6s ease-in-out infinite;
  z-index: 0;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
  display: block;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

@keyframes avatarHintPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.2;
  }
}

/* 能量石光晕呼吸灯效果 */
.energy-stone-hint {
  animation: energyStoneHintPulse 2s ease-in-out infinite;
}

/* 当光晕在 energy-stone 容器内时，只需要缩放和透明度动画 */
/* 浮动效果由容器处理，确保光晕和能量石按钮完全同步 */
.energy-stone .energy-stone-hint {
  animation: energyStoneHintPulseScale 2s ease-in-out infinite;
}

@keyframes energyStoneHintPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

/* 光晕的呼吸灯和缩放动画，同时跟随能量石按钮的浮动效果 */
/* transform 必须包含 translate(-50%, -50%) 保持居中，以及 scale 缩放效果 */
/* 光晕和能量石按钮都使用相同的基准点（50%, 50%），确保中心一致 */
@keyframes energyStoneHintPulseWithScale {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

/* 光晕的呼吸灯动画（只包含透明度和缩放） */
/* 浮动效果由容器处理，确保光晕和能量石按钮完全同步 */
/* transform 必须包含 translate(-50%, -50%) 保持居中 */
@keyframes energyStoneHintPulseScale {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.7);
  }
}