/*
 * 頁首橫幅計數器（試用治理系統，任務#138新增）：試用/外部用戶專屬的
 * AI 點數餘量提示條，見 web/static/points_banner.js 模組頂部 docstring
 * 的完整行為說明（四態顏色機制／5 秒收斂／popover 展開／nav 晶片替代
 * 模式）。獨立成專屬檔案（不動 app.css，比照 admin_freshness.css／
 * ai_progress_modal.css 等既有「新元件獨立檔」慣例，降低多模板版號同步
 * 衝突風險）。
 *
 * 顏色沿用全站既有品牌色票（與 nav.js 走馬燈 .sv-announce-bar 同一組，
 * 視覺語言一致），2026-07-28 主題工程波次 2 已代幣化：青 var(--brand-cyan)
 * （寬裕）／琥珀 var(--warn-fg)（接近警戒）／紅 var(--danger)＋
 * var(--danger-rgb)（危險，脈動）／灰 var(--neutral-off-fg)＋
 * var(--neutral-off-rgb)（用罄）。
 */

.sv-points-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  overflow: hidden;
  background: rgba(var(--brand-cyan-rgb), 0.08);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--brand-cyan);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
  transition: height 260ms ease, padding 260ms ease, opacity 200ms ease;
  animation: sv-points-fade-in 220ms ease;
}

@keyframes sv-points-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sv-points-banner[data-state="warn"] {
  background: var(--warn-bg);
  border-left-color: var(--warn-fg);
}

.sv-points-banner[data-state="danger"] {
  /* 紅底走 --danger-rgb（不是 --up-rgb：扣點危險與漲跌語意不同家族），
     第三段收在 --scrim-rgb 遮罩底。 */
  background: radial-gradient(140% 220% at 0% 50%, rgba(var(--danger-rgb), 0.24), rgba(var(--danger-rgb), 0.08) 55%, rgba(var(--scrim-rgb), 0.85));
  border-left-color: var(--danger);
}

.sv-points-banner[data-state="danger"] .sv-points-banner-icon {
  animation: sv-points-pulse 1.4s ease-in-out infinite;
}

@keyframes sv-points-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.15); }
}

.sv-points-banner[data-state="empty"] {
  background: rgba(var(--neutral-off-rgb), 0.14);
  border-left-color: rgb(var(--neutral-off-rgb));
  color: var(--neutral-off-fg);
}

/* 收斂態：6px 色線駐留，內容全部隱藏，hover/focus 展開回全態。 */
.sv-points-banner.collapsed {
  height: 6px;
  padding: 0;
  border-bottom: none;
}

.sv-points-banner.collapsed .sv-points-banner-content {
  opacity: 0;
  pointer-events: none;
}

.sv-points-banner.collapsed:hover,
.sv-points-banner.collapsed:focus-within {
  height: 36px;
  padding: 0 12px;
}

.sv-points-banner.collapsed:hover .sv-points-banner-content,
.sv-points-banner.collapsed:focus-within .sv-points-banner-content {
  opacity: 1;
  pointer-events: auto;
}

.sv-points-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 180ms ease;
}

.sv-points-banner-icon {
  flex: 0 0 auto;
  font-size: 13px;
}

.sv-points-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-points-banner-caret {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text-muted);
}

/* 最後動作短註（會員後台＋點數全景，任務新增）：剩餘點數旁的
   「−N・功能名」pill，label 由後端動態解析（可能較長），過長 ellipsis。 */
.sv-points-banner-note {
  flex: 0 1 auto;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(var(--surface-tint-rgb), 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

@media (max-width: 480px) {
  .sv-points-banner-note {
    max-width: 110px;
  }
}

/* popover：點擊展開，展示各功能點價表＋重置倒數。 */
.sv-points-popover {
  position: absolute;
  top: 100%;
  left: 12px;
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  margin-top: 4px;
  background: var(--popover-bg);
  border: 1px solid rgba(var(--surface-tint-rgb), 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.45);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  z-index: 70;
  display: none;
  cursor: default;
}

.sv-points-popover.open {
  display: block;
}

.sv-points-popover-title {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.sv-points-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed var(--grid-line);
}

.sv-points-popover-row:last-of-type {
  border-bottom: none;
}

.sv-points-popover-reset {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
}

/* 今日使用明細區（會員後台＋點數全景，任務新增）：接在功能點價表之後，
   同一 popover 內以分隔線區隔的第二段（備註點了什麼功能）。 */
.sv-points-usage-title {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.sv-points-popover-empty {
  padding: 3px 0;
  color: var(--text-muted);
  font-size: 11.5px;
}

.sv-points-usage-failed {
  color: #ff9c9c; /* theme-exempt: 失敗態淡紅全站無對應代幣（--danger #ff5d5d 不等值） */
}

@media (max-width: 480px) {
  .sv-points-banner {
    font-size: 11.5px;
    padding: 0 8px;
  }
  .sv-points-popover {
    width: 84vw;
    left: 4px;
  }
}

/* nav 晶片替代模式（後台「橫幅⇄nav 晶片」切換開關，A/B 用；簡版，
   插入 .nav-actions，與 nav.js 的走馬燈重啟鈴鐺同一列橫向並排，
   flex 自然排版避免疊圖）。 */
.sv-points-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(var(--brand-cyan-rgb), 0.12);
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.3);
  color: var(--brand-cyan-text);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}

.sv-points-chip[data-state="warn"] {
  background: var(--watch-bg);
  border-color: rgba(var(--watch-rgb), 0.4);
  color: var(--watch-fg);
}

.sv-points-chip[data-state="danger"] {
  background: rgba(var(--danger-rgb), 0.14);
  border-color: rgba(var(--danger-rgb), 0.4);
  color: var(--danger);
}

.sv-points-chip[data-state="empty"] {
  background: rgba(var(--neutral-off-rgb), 0.16);
  border-color: rgba(var(--neutral-off-rgb), 0.4);
  color: var(--neutral-off-fg);
}

/* SvAiModal 插槽掛字（規格⑥，任務#138）：填入
   ai_progress_modal.js 既有 `[data-slot="ai-credit-cost"]` 兩個插槽的
   文字樣式，維持 modal 既有卡片內的視覺語言，不另外開一顆彈窗。 */
.sv-ai-credit-slot[data-slot="ai-credit-cost"] {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.sv-ai-credit-slot[data-slot="ai-credit-cost"].sv-points-cached {
  color: #6fdc8c; /* theme-exempt: 快取免費淡綠無對應代幣（--down #2fbf71／--score-high #2fe0a8 皆不等值） */
}