/* ============ AI 占卜：角色选择 + 立绘 + 状态动画 ============ */
/* 角色配色通过 --ai-accent / --ai-accent2 / --ai-glow 注入（result.js 按角色设置） */

.ai-stage {
  --ai-accent: #00f0ff;
  --ai-accent2: #7c3aed;
  --ai-glow: rgba(0, 240, 255, 0.55);
  display: flex;
  gap: 28px;
  align-items: stretch;
}

/* ---------- 角色选择卡 ---------- */
.ai-char-select {
  display: flex;
  gap: 16px;
}
.ai-char-card {
  flex: 1;
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(20, 10, 40, 0.4);
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.15s;
  overflow: hidden;
}
.ai-char-card:hover { transform: translateY(-2px); }
.ai-char-card .acc-avatar {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  color: #fff;
  background: radial-gradient(circle, rgba(255,255,255,0.08), #0c0620 70%);
  border: 1px solid var(--c-accent);
  box-shadow: 0 0 14px var(--c-accent), inset 0 0 12px rgba(0,0,0,0.5);
}
.ai-char-card .acc-info { flex: 1; min-width: 0; }
.ai-char-card .acc-name { font-size: 18px; font-weight: 700; color: #fff; }
.ai-char-card .acc-title { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.ai-char-card .acc-domains { font-size: 11px; color: var(--c-accent); margin-top: 5px; letter-spacing: 0.5px; }
.ai-char-card.active {
  border-color: var(--c-accent);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(10, 5, 20, 0.4));
  box-shadow: 0 0 24px var(--c-accent), inset 0 0 30px rgba(124, 58, 237, 0.1);
}
/* 占卜进行中：未选中的卡片半透明禁用 */
.ai-char-select.divining .ai-char-card:not(.active) {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.5);
}
.ai-char-select.divining .ai-char-card.active {
  cursor: default;
}
.ai-char-card.active::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-accent);
  box-shadow: 0 0 12px var(--c-accent);
}

/* ---------- 立绘舞台 ---------- */
.ai-portrait-col {
  flex: 0 0 auto;
  width: 210px;
  display: flex; flex-direction: column; align-items: center;
  align-self: flex-start;
}
.ai-portrait {
  position: relative;
  width: 210px; height: 300px;
  display: flex; align-items: center; justify-content: center;
}
.ai-portrait-ring {
  position: absolute; inset: -8% -2% 6% -2%;
  z-index: 1;
  border-radius: 50%;
  /* fallback：不支持 conic-gradient 的浏览器（微信 X5 / 旧 WKWebView）*/
  background: linear-gradient(135deg, transparent 0%, var(--ai-accent) 35%, var(--ai-accent2) 65%, transparent 100%);
  opacity: 0.18;
  animation: ai-spin 22s linear infinite;
}
@supports (background: conic-gradient(from 0deg, red, blue)) {
  .ai-portrait-ring {
    background: conic-gradient(from 0deg, transparent, var(--ai-accent), transparent 38%, var(--ai-accent2), transparent 70%);
    opacity: 0.22;
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 100%);
    mask: radial-gradient(circle, transparent 60%, #000 62%, #000 100%);
  }
}
.ai-portrait-layers {
  position: relative; z-index: 3;
  width: 210px; height: 300px;
  animation: ai-idle 4.5s ease-in-out infinite;
}
.ai-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  pointer-events: none; user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
}
.ai-portrait-base {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 64%; height: 18px; z-index: 2;
  background: radial-gradient(ellipse at center, var(--ai-glow), transparent 70%);
  filter: blur(5px);
}
.ai-portrait-name {
  margin-top: 16px;
  font-size: 22px; font-weight: 700; color: #fff;
  text-shadow: 0 0 14px var(--ai-glow);
  letter-spacing: 2px;
}
.ai-portrait-title {
  margin-top: 2px;
  font-size: 12px; color: var(--ai-accent); letter-spacing: 1px;
}

/* 占卜特效层（默认隐藏，.divining 时激活） */
.ai-portrait-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; }
.ai-portrait-fx::before {
  content: ''; position: absolute; inset: -18%;
  border-radius: 50%;
  /* fallback：linear-gradient 替代 conic-gradient */
  background: linear-gradient(135deg, var(--ai-accent) 0%, var(--ai-accent2) 100%);
  opacity: 0; filter: blur(9px);
}
@supports (background: conic-gradient(from 0deg, red, blue)) {
  .ai-portrait-fx::before {
    background: conic-gradient(from 0deg, transparent 0%, var(--ai-accent) 12%, transparent 26%, var(--ai-accent2) 52%, transparent 64%, var(--ai-accent) 88%, transparent 100%);
  }
}
.ai-portrait-fx::after {
  content: ''; position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--ai-glow), transparent 62%);
  opacity: 0;
}
.ai-stage.divining .ai-portrait-fx::before { opacity: 0.6; animation: ai-spin 3s linear infinite; }
.ai-stage.divining .ai-portrait-fx::after { opacity: 0.7; animation: ai-pulse 1.4s ease-in-out infinite; }
.ai-stage.divining .ai-portrait-layers { animation: ai-channel 1.5s ease-in-out infinite; }
/* 立绘分层混合：默认走兼容版（半透明叠加），@supports 检测支持时升级为 screen 混合 */
.ai-stage.divining .ai-layer { opacity: 0.85; }
@supports (mix-blend-mode: screen) {
  .ai-stage.divining .ai-layer { mix-blend-mode: screen; opacity: 1; }
}
.ai-stage.divining .ai-portrait { animation: ai-shake 0.2s linear infinite; }
.ai-stage.divining .ai-portrait-ring { animation: ai-spin 5s linear infinite; opacity: 0.5; }
.ai-stage.divining .ai-portrait-name { animation: ai-namepulse 1s ease-in-out infinite; }

/* 数据流粒子（JS 注入若干 .ai-particle 到 .ai-portrait-fx） */
.ai-particle {
  position: absolute; bottom: 6%;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px var(--ai-accent), 0 0 16px var(--ai-accent), 0 0 26px var(--ai-accent2);
  opacity: 0;
}
.ai-stage.divining .ai-particle { animation: ai-rise 1.8s linear infinite; }

.ai-chat-col { flex: 1 1 auto; min-width: 0; }

/* ---------- 关键帧 ---------- */
@keyframes ai-idle {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 9px var(--ai-glow)); }
  50%      { transform: translateY(-8px) scale(1.02); filter: drop-shadow(0 0 16px var(--ai-glow)); }
}
@keyframes ai-channel {
  0%, 100% { transform: translateY(-3px) scale(1.012); filter: drop-shadow(0 0 22px var(--ai-glow)) drop-shadow(0 0 38px var(--ai-glow)); }
  50%      { transform: translateY(-11px) scale(1.04); filter: drop-shadow(0 0 32px var(--ai-glow)) drop-shadow(0 0 58px var(--ai-glow)); }
}
@keyframes ai-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
@keyframes ai-namepulse {
  0%, 100% { text-shadow: 0 0 14px var(--ai-glow); }
  50% { text-shadow: 0 0 26px var(--ai-accent), 0 0 42px var(--ai-glow); }
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-pulse {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%      { opacity: 0.6;  transform: scale(1.08); }
}
@keyframes ai-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-250px) scale(1.1); opacity: 0; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .ai-stage { flex-direction: column; align-items: center; gap: 18px; }
  .ai-portrait-col { width: 170px; }
  .ai-portrait, .ai-portrait-layers { width: 170px; height: 244px; }
  .ai-chat-col { width: 100%; }
  .ai-char-select { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-portrait-layers, .ai-portrait-ring, .ai-portrait-fx::before, .ai-portrait-fx::after,
  .ai-stage.divining .ai-portrait, .ai-stage.divining .ai-particle {
    animation: none !important;
  }
}

/* ============================================
   兼容模式（.compat-simple）
   JS 在 body 上加此类，针对微信 X5 / 旧 WKWebView 等内核
   即使 @supports 撒谎也能强制降级
   ============================================ */
.compat-simple .ai-portrait-base { filter: none; }

.compat-simple .ai-portrait-fx::before { filter: none; }
.compat-simple .ai-stage.divining .ai-portrait-fx::before {
  animation: ai-spin 5s linear infinite;
  opacity: 0.4;
}

/* 简化占卜进行时的滤镜叠加（GPU 负担最重） */
.compat-simple .ai-stage.divining .ai-portrait-layers {
  animation: ai-channel-simple 1.5s ease-in-out infinite;
}
.compat-simple .ai-portrait-layers {
  animation: ai-idle-simple 4.5s ease-in-out infinite;
}

@keyframes ai-idle-simple {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.02); }
}
@keyframes ai-channel-simple {
  0%, 100% { transform: translateY(-3px) scale(1.012); filter: drop-shadow(0 0 12px var(--ai-glow)); }
  50%      { transform: translateY(-11px) scale(1.04); filter: drop-shadow(0 0 18px var(--ai-glow)); }
}