/* ============================================
 * Live2D 对话气泡自定义样式
 * 描述: 暗夜星空魔法款 + 打字机效果
 * 使用超高特异性选择器压制主题默认样式
 * ============================================ */

/* —— 默认隐藏 —— */
html body div#live2d-tips {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
  pointer-events: none !important;
}

/* —— 说话时显示（星空魔法款） —— */
html body div#live2d-tips.live2d-tips-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  color: #F8EEFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  max-width: 260px !important;
  word-break: break-word !important;
  border-radius: 16px !important;
  border: 1px solid rgba(180, 150, 255, 0.4) !important;
  z-index: 9999 !important;

  /* 星空背景 */
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.7) 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.6) 1px, transparent 2px),
    linear-gradient(135deg, rgba(55,35,90,.95), rgba(30,20,55,.95)) !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.7) 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.6) 1px, transparent 2px),
    linear-gradient(135deg, rgba(55,35,90,.95), rgba(30,20,55,.95)) !important;

  box-shadow:
    0 0 20px rgba(138, 43, 226, 0.4),
    inset 0 0 15px rgba(255, 255, 255, 0.05) !important;

  text-shadow: 0 0 8px rgba(177, 156, 217, 0.8) !important;

  animation:
    tipsBounce 0.4s ease,
    starTwinkle 3s infinite !important;
}

/* —— 打字机光标 —— */
html body div#live2d-tips.live2d-tips-active::after {
  content: "▋";
  margin-left: 2px;
  color: #B19CD9;
  animation: cursorBlink 0.8s infinite;
}

/* —— 弹出动画 —— */
@keyframes tipsBounce {
  0%   { transform: translateY(-8px) scale(0.95); }
  60%  { transform: translateY(2px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* —— 星光闪烁 —— */
@keyframes starTwinkle {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(138, 43, 226, 0.4),
      inset 0 0 15px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 30px rgba(177, 156, 217, 0.8),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
}

/* —— 光标闪烁 —— */
@keyframes cursorBlink {
  50% { opacity: 0; }
}