/* 弈·司南 · AI UI 样式
 * 统一 AI 生成块的"AI 角标 + 刷新 + 反馈"工具条视觉
 */

/* 任何挂了 data-ai-block 的容器 · 统一给一层微光 */
[data-ai-block]{
  position:relative;
  transition:box-shadow .2s
}

/* AI 工具条：右上角贴出，不影响原布局 */
.ai-toolbar{
  position:absolute;top:12px;right:14px;z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px;background:color-mix(in srgb,var(--bg-canvas) 75%,transparent);
  border:1px solid var(--border-subtle);border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:all .2s;opacity:.85
}
[data-ai-block]:hover .ai-toolbar{opacity:1;box-shadow:0 4px 14px rgba(0,0,0,.08)}

/* AI 角标 chip */
.ai-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 8px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,transparent),color-mix(in srgb,var(--brand) 4%,transparent));
  border-radius:999px;
  font-family:"JetBrains Mono",monospace;font-size:10px;
  color:var(--brand);font-weight:600;letter-spacing:.08em
}
.ai-chip em{font-style:normal;font-weight:500}
.ai-chip .ai-spark{
  width:11px;height:11px;color:var(--brand);flex-shrink:0;
  animation:aiSparkle 3s ease-in-out infinite
}
@keyframes aiSparkle{
  0%,100%{transform:scale(1) rotate(0);opacity:1}
  50%{transform:scale(1.2) rotate(15deg);opacity:.7}
}

/* 小按钮 */
.ai-btn{
  width:24px;height:24px;padding:0;
  background:transparent;border:0;border-radius:50%;
  color:var(--fg-tertiary);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s
}
.ai-btn svg{width:12px;height:12px}
.ai-btn:hover{background:var(--bg-sunken);color:var(--brand)}
.ai-btn.active{color:var(--brand);background:var(--brand-soft)}
.ai-btn.ai-btn-down.active{color:var(--data-neg);background:color-mix(in srgb,var(--data-neg) 10%,transparent)}

/* 刷新旋转 */
.ai-btn.spinning svg{animation:aiSpin .7s linear infinite}
@keyframes aiSpin{to{transform:rotate(360deg)}}

/* 重新生成中：内容加骨架闪烁 */
[data-ai-block].ai-regenerating{pointer-events:none}
[data-ai-block].ai-regenerating::after{
  content:"司南生成中…";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg-canvas) 82%,transparent);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font-family:"Ma Shan Zheng","Noto Serif SC",serif;font-size:20px;
  color:var(--brand);letter-spacing:.12em;z-index:4;
  border-radius:inherit;
  animation:aiBreath 1.2s ease-in-out infinite
}
@keyframes aiBreath{0%,100%{opacity:.75}50%{opacity:1}}

/* 小屏适配：手机上工具条更紧凑 */
@media (max-width:640px){
  .ai-toolbar{top:8px;right:8px;gap:2px;padding:2px}
  .ai-chip{font-size:9px;padding:3px 8px 3px 6px}
  .ai-chip em{display:none}
  .ai-btn{width:22px;height:22px}
}

/* 深色 */
[data-theme="dark"] .ai-toolbar{background:color-mix(in srgb,var(--bg-raised) 80%,transparent);border-color:var(--border-subtle)}
[data-theme="dark"] [data-ai-block].ai-regenerating::after{background:color-mix(in srgb,var(--bg-canvas) 82%,transparent)}