/*
 * SvAiProgress／SvAiModal —— 全站 AI 生成共用元件樣式（任務#139）。
 *
 * 取代舊版 ai_progress.css（任務#112 M2 的三點呼吸動畫版）。沿用 app.css
 * 既有色彩變數（--brand-cyan/--brand-blue/--brand-violet/--danger/
 * --card-bg/--border-strong/--radius/--shadow-pop/--ease 等）與既有元件
 * class（.aireview-overlay/.aireview-card/.aireview-close/.btn-primary/
 * .btn-ghost/.btn-danger/.toast/.toast-stack），不重新定義一套配色或按鈕
 * 樣式系統——這裡只新增「品牌 Logo 迷你動畫」「關閉防呆確認層」「背景
 * 生成膠囊」三塊本任務新增的視覺。
 *
 * 三個區塊：
 *   1. .sv-ai-logo* —— 品牌神經網路 Logo 迷你動畫（核心＋6 節點＋流動線），
 *      抽自 index.html 導覽列 SVG Logo 的 .nd1~.nd6 資料流脈動動畫，簡化
 *      掉 <defs> 漸層／濾鏡（避免同頁多次插入時的 SVG id 衝突），純
 *      keyframes + stroke-dasharray，CPU 佔用趨近靜態頁面。
 *   2. .sv-ai-progress* —— 生成中進度卡（沿用舊版命名，行為升級：Logo
 *      動畫取代三點脈衝、新增誠實 ETA 區間文案）＋ .sv-ai-quota-card 配額
 *      用完狀態（原封不動搬過來）。
 *   3. .sv-ai-guard*／.sv-ai-capsule* —— 關閉防呆確認層（modal 內覆蓋層，
 *      不彈第二個視窗）＋背景生成膠囊（右下角，堆疊於意見回饋浮鈕上方，
 *      見 app.css .feedback-fab position: right 20px/bottom 20px/48px
 *      方形，這裡 bottom 留到 78px 起跳避免互疊）。
 */

/* ---------- 1. 品牌 Logo 迷你動畫 ---------- */

.sv-ai-logo {
  display: block;
  flex-shrink: 0;
}

.sv-ai-logo-md { width: 56px; height: 56px; }
.sv-ai-logo-sm { width: 22px; height: 22px; }

.sv-ai-logo .ndl {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-opacity: 0.8;
}
.sv-ai-logo .ndl.nd1 { stroke: var(--brand-cyan); stroke-dasharray: 10 22; animation: svai-flow 2.4s linear infinite; }
.sv-ai-logo .ndl.nd2 { stroke: var(--brand-blue); stroke-dasharray: 8 24; animation: svai-flow 3.1s linear infinite .5s; }
.sv-ai-logo .ndl.nd3 { stroke: var(--brand-violet); stroke-dasharray: 10 22; animation: svai-flow 2.7s linear infinite 1.1s; }
.sv-ai-logo .ndl.nd4 { stroke: var(--brand-cyan); stroke-dasharray: 8 24; animation: svai-flow 3.4s linear infinite .8s; }
.sv-ai-logo .ndl.nd5 { stroke: var(--brand-blue); stroke-dasharray: 10 22; animation: svai-flow 2.9s linear infinite 1.6s; }
.sv-ai-logo .ndl.nd6 { stroke: var(--brand-violet); stroke-dasharray: 8 24; animation: svai-flow 2.5s linear infinite .3s; }

@keyframes svai-flow {
  from { stroke-dashoffset: 32; }
  to { stroke-dashoffset: 0; }
}

.sv-ai-logo .node {
  animation: svai-node-pulse 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.sv-ai-logo .node.n1 { fill: var(--brand-cyan); animation-delay: 0s; }
.sv-ai-logo .node.n2 { fill: var(--brand-blue); animation-delay: .15s; }
.sv-ai-logo .node.n3 { fill: var(--brand-violet); animation-delay: .3s; }
.sv-ai-logo .node.n4 { fill: var(--brand-cyan); animation-delay: .45s; }
.sv-ai-logo .node.n5 { fill: var(--brand-blue); animation-delay: .6s; }
.sv-ai-logo .node.n6 { fill: var(--brand-violet); animation-delay: .75s; }

@keyframes svai-node-pulse {
  0%, 80%, 100% { opacity: .4; transform: scale(.72); }
  40% { opacity: 1; transform: scale(1); }
}

.sv-ai-logo-core-halo {
  fill: var(--brand-blue);
  fill-opacity: .18;
  animation: svai-core-pulse 3s ease-in-out infinite;
}
.sv-ai-logo-core {
  fill: var(--brand-cyan);
  fill-opacity: .92;
}

@keyframes svai-core-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .7; }
}

/* 尊重「減少動態效果」偏好：關掉流動/脈衝動畫，只留靜態透明度差異表達
   節點語意，不強迫有前庭疾患的使用者承受閃動（比照舊版 ai_progress.css
   既有作法）。 */
@media (prefers-reduced-motion: reduce) {
  .sv-ai-logo .ndl,
  .sv-ai-logo .node,
  .sv-ai-logo-core-halo {
    animation: none;
  }
  .sv-ai-logo .node.n1 { opacity: 1; }
  .sv-ai-logo .node.n2 { opacity: .85; }
  .sv-ai-logo .node.n3 { opacity: .7; }
  .sv-ai-logo .node.n4 { opacity: .85; }
  .sv-ai-logo .node.n5 { opacity: .7; }
  .sv-ai-logo .node.n6 { opacity: .55; }
}

/* ---------- 2. 生成中進度卡 ---------- */

.sv-ai-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 16px;
  text-align: center;
}

.sv-ai-progress-label {
  font-size: 13.5px;
  color: var(--text-muted);
  min-height: 18px;
  animation: sv-ai-label-fade 260ms ease-out;
}

@keyframes sv-ai-label-fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.sv-ai-progress-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.sv-ai-progress-elapsed {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sv-ai-progress-eta {
  font-size: 11px;
  color: var(--text-faint);
}

.sv-ai-progress-eta.is-overdue {
  color: var(--brand-blue);
  font-weight: 600;
}

/* ---------- 配額用完狀態（原封不動搬自 ai_progress.css） ---------- */
.sv-ai-quota-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px 26px;
  text-align: center;
}

.sv-ai-quota-img {
  display: block;
  width: 140px;
  max-width: 55%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm, 9px);
}

.sv-ai-quota-text {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 320px;
  margin: 0;
}

/* ---------- 3a. 關閉防呆確認層（modal 內覆蓋，不彈第二個視窗） ---------- */

.sv-ai-guard {
  position: absolute;
  inset: 0;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 24px;
  text-align: center;
  border-radius: var(--radius);
  animation: fadeIn 150ms var(--ease);
  z-index: 5;
}

.sv-ai-guard-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.sv-ai-guard-elapsed {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.sv-ai-guard-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin-top: 4px;
}

.sv-ai-guard-actions .btn-primary,
.sv-ai-guard-actions .btn-ghost,
.sv-ai-guard-actions .btn-danger {
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  font-size: 13.5px;
  border-radius: var(--radius-sm, 9px);
}

.sv-ai-guard-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-faint);
}

/* 點數提示插槽（未來 #138 試用點數系統掛字用，本任務只留位置不實作）。 */
[data-slot="ai-credit-cost"] {
  font-size: 11px;
  color: var(--text-faint);
}
[data-slot="ai-credit-cost"][hidden] { display: none; }

/* ---------- 3a-2. 常駐「縮到背景」鈕（多工改造 2026-08-20：卡片頭直達
   進入點，生成中才顯示，與 × 關閉鈕並列於卡片右上） ---------- */

.sv-ai-bg-btn {
  position: absolute;
  top: 12px;
  right: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
}

.sv-ai-bg-btn:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.sv-ai-bg-btn[hidden] { display: none; }

/* ---------- 3b. 背景生成膠囊（右下角，堆疊於意見回饋浮鈕上方；多工版
   同時最多 2 顆並列） ---------- */

.sv-ai-capsule-host {
  position: fixed;
  right: 20px;
  bottom: 78px; /* 意見回饋浮鈕 48px + 20px 邊距 + 10px 緩衝，見 app.css .feedback-fab */
  z-index: 150; /* 低於 .aireview-overlay(210)，高於一般頁面內容與浮鈕(90) */
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}

.sv-ai-capsule {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 10px 7px 8px;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  max-width: 250px;
  animation: svai-capsule-in 200ms var(--ease);
}

.sv-ai-capsule:hover {
  border-color: var(--brand-blue);
}

@keyframes svai-capsule-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 生成中：柔和呼吸光暈（多工精緻化 2026-08-20）——搭配膠囊內既有的
   品牌 Logo 迷你動畫，一眼分得出「還在跑」與「已完成」。進場動畫與
   呼吸動畫用逗號並列，不互相覆蓋。 */
.sv-ai-capsule.is-running {
  animation: svai-capsule-in 200ms var(--ease), svai-capsule-breathe 2.6s ease-in-out 200ms infinite;
}

@keyframes svai-capsule-breathe {
  0%, 100% { box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
  50% { box-shadow: 0 6px 22px rgba(32, 160, 255, 0.30); border-color: var(--brand-blue); }
}

/* 完成態：綠 tint＋輕彈跳，Logo 動畫停格（不再暗示「進行中」）。 */
.sv-ai-capsule.is-done {
  border-color: var(--down);
  background: var(--down-bg);
  animation: svai-capsule-done-pop 320ms var(--ease);
}

@keyframes svai-capsule-done-pop {
  0% { transform: scale(.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.sv-ai-capsule.is-done .sv-ai-capsule-name {
  color: var(--down);
}

.sv-ai-capsule.is-done .sv-ai-logo .ndl,
.sv-ai-capsule.is-done .sv-ai-logo .node,
.sv-ai-capsule.is-done .sv-ai-logo-core-halo {
  animation: none;
}

/* 結束態（續接膠囊，2026-08-21 跨頁存活案）：job 已不存在——行程重啟把
   in-process 登記表清空、逾期清理、生成失敗或被別處取消。灰態、不呼吸、
   不可點（沒有結果可看），由 JS 在 3 秒後移除，見 ai_progress_modal.js
   ENDED_CAPSULE_LINGER_MS。 */
.sv-ai-capsule.is-ended {
  animation: none;
  opacity: .72;
  cursor: default;
  border-color: var(--border);
  box-shadow: none;
}

.sv-ai-capsule.is-ended:hover {
  border-color: var(--border);
}

.sv-ai-capsule.is-ended .sv-ai-capsule-name,
.sv-ai-capsule.is-ended .sv-ai-capsule-elapsed {
  color: var(--text-faint);
}

.sv-ai-capsule.is-ended .sv-ai-logo .ndl,
.sv-ai-capsule.is-ended .sv-ai-logo .node,
.sv-ai-capsule.is-ended .sv-ai-logo-core-halo {
  animation: none;
}

.sv-ai-capsule-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.sv-ai-capsule-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.sv-ai-capsule-elapsed {
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sv-ai-capsule.is-done .sv-ai-capsule-elapsed {
  color: var(--down);
  font-weight: 600;
}

.sv-ai-capsule-abort {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.sv-ai-capsule-abort:hover {
  color: var(--danger);
}

@media (max-width: 767px) {
  .sv-ai-capsule-host {
    right: 14px;
    bottom: 66px; /* 意見回饋浮鈕行動版 44px + 14px 邊距 + 8px 緩衝 */
  }
  .sv-ai-capsule {
    max-width: 210px;
  }
  .sv-ai-capsule-name {
    max-width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-ai-capsule,
  .sv-ai-capsule.is-running,
  .sv-ai-capsule.is-done,
  .sv-ai-capsule.is-ended {
    animation: none;
  }
}