/*
 * AI 等待状态通用 UI——给所有 LLM 调用按钮统一的"加载中"体验。
 *
 * 两种用法：
 *   - 模态：占据屏幕中央的卡片（适合长流程，如 import / evaluation）
 *   - 内联：替换某个目标元素的内容（适合在 panel 里就地显示进度）
 *
 * CSS variables (--bg/--surface/--border/--accent/--text) 来自 base.html，
 * 自动跟随 wutrix 暗色主题。
 */

/* ─── Modal mode ────────────────────────────────────────────────────────── */

.aiwait-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.aiwait-modal-card {
  background: var(--bg, #1c1c1e);
  border: 1px solid var(--border, #3a3a3c);
  border-radius: 12px;
  padding: 28px 32px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
  text-align: center;
}


/* ─── Inline mode ───────────────────────────────────────────────────────── */

.aiwait-inline {
  background: var(--surface, #2c2c2e);
  border: 1px solid var(--border, #3a3a3c);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}


/* ─── Spinner (shared by both modes) ────────────────────────────────────── */

.aiwait-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border, #3a3a3c);
  border-top-color: var(--accent, #d97706);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: aiwait-spin 0.85s linear infinite;
}
.aiwait-inline .aiwait-spinner { width: 24px; height: 24px; margin-bottom: 10px; }

@keyframes aiwait-spin {
  to { transform: rotate(360deg); }
}


/* ─── Text rows ─────────────────────────────────────────────────────────── */

.aiwait-message {
  color: var(--text, #f0f0f0);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}
.aiwait-inline .aiwait-message { font-size: 13px; }

.aiwait-stage {
  color: var(--accent, #d97706);
  font-size: 12px;
  margin-bottom: 10px;
  min-height: 1em;        /* reserve space so layout doesn't jump */
}

.aiwait-meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  color: var(--muted, #999);
  font-family: ui-monospace, monospace;
}

.aiwait-elapsed {
  color: var(--text, #f0f0f0);
}

.aiwait-overdue .aiwait-elapsed {
  /* When elapsed > expected*2, gently warn */
  color: #c8b46e;
}

.aiwait-hint {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #3a3a3c);
  font-size: 11px;
  color: var(--muted, #999);
  line-height: 1.5;
}
.aiwait-inline .aiwait-hint { margin-top: 8px; padding-top: 8px; }


/* ─── Cancel button ─────────────────────────────────────────────────────── */

.aiwait-cancel {
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--border, #3a3a3c);
  color: var(--muted, #aaa);
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.aiwait-cancel:hover {
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}


/* ─── Error state ──────────────────────────────────────────────────────── */

.aiwait-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
}
.aiwait-error .aiwait-error-icon { font-size: 28px; margin-bottom: 8px; }
.aiwait-error .aiwait-error-msg {
  color: var(--danger, #ef4444);
  font-size: 13px;
  margin-bottom: 4px;
}
.aiwait-error .aiwait-error-detail {
  color: var(--muted, #999);
  font-size: 11px;
  font-family: ui-monospace, monospace;
}


/* ─── Chat thinking bubble ─────────────────────────────────────────────── */
/*
 * 对话流里的"正在想"。上面那个居中卡片是给 import / 评估那种整页流程的，
 * 聊天不适用：回答马上要出现在对话流里，等待态就该长在同一个位置、同样
 * 宽度，首字一到原地换成正文。塞在输入框旁边那一小行里，用户根本注意不到
 * 自己在等什么，只觉得点了没反应。
 *
 * 不做假进度条 —— 模型不给进度信号。只有跳动的点、诚实的已等待秒数，
 * 以及等久了的一句实话。
 */
.aiwait-think { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                font-size:13px; line-height:1.7; color:var(--muted,#999); }

/* 落在没有底色的对话流里时给自己一个面 —— 看着就是"回答的位子占上了" */
.aiwait-think.boxed { padding:14px 16px; border-radius:12px;
                      background:var(--surface,#2c2c2e);
                      border:1px solid var(--border,#3a3a3c); }

.aiwait-think-dots { display:inline-flex; gap:5px; flex:0 0 auto; }
.aiwait-think-dots i { display:block; width:7px; height:7px; border-radius:50%;
                       background:var(--accent,#d97706);
                       animation:aiwait-bounce 1.3s ease-in-out infinite; }
.aiwait-think-dots i:nth-child(2) { animation-delay:.16s; }
.aiwait-think-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes aiwait-bounce {
  0%, 70%, 100% { opacity:.3; transform:translateY(0); }
  35%           { opacity:1;  transform:translateY(-4px); }
}

.aiwait-think-txt  { flex:1 1 150px; min-width:0; color:var(--text,#f0f0f0); }
.aiwait-think-time { flex:0 0 auto; font-size:11px; color:var(--muted,#999);
                     font-family:ui-monospace, monospace; }
.aiwait-think-stop { flex:0 0 auto; background:none; border:none; padding:0;
                     font-size:11px; color:var(--muted,#999); cursor:pointer;
                     text-decoration:underline; font-family:inherit; }
.aiwait-think-stop:hover { color:var(--danger,#ef4444); }

/* 减弱动效由 wutrix-components.css 的全局块压制(animation + transition 一起)。
   这里只补一件全局块做不到的事: 动画停下后点会停在任意透明度上, 显式定住。 */
@media (prefers-reduced-motion: reduce) {
  .aiwait-think-dots i { opacity:.65; }
}