/* ==========================================================================
   Pace — 互動原型 SPA 樣式
   單一色彩來源：design-system/tokens.css（全站不寫裸 hex）
   ========================================================================== */
@import url("../design-system/tokens.css?v=6");

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }

html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: radial-gradient(120% 120% at 50% 0%,
    color-mix(in srgb, var(--color-bg-base) 88%, var(--c-surface-elevated)) 0%,
    color-mix(in srgb, var(--color-bg-base) 88%, var(--c-ink-muted)) 100%);
  overflow: hidden;
}

.serif { font-family: var(--font-serif); font-weight: var(--fw-semibold); }

/* ---------- 舞台與縮放 ---------- */
.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-slot { flex: none; }               /* JS 設定縮放後尺寸 */
.phone { transform-origin: top left; }

/* ---------- iPhone 外框 ---------- */
.phone {
  width: 399px;
  padding: 12px;
  background: var(--color-scrim);
  border-radius: 58px;
  box-shadow: 0 40px 80px -24px color-mix(in srgb, var(--c-ink) 45%, transparent),
              0 8px 24px color-mix(in srgb, var(--c-ink) 20%, transparent);
}
.phone-screen {
  position: relative;
  width: 375px;
  height: 812px;
  background: var(--color-bg-base);
  border-radius: 46px;
  overflow: hidden;
}
.island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 32px; background: var(--color-scrim);
  border-radius: var(--radius-full); z-index: 60;
}
.home-indicator {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 5px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--c-ink) 28%, transparent); z-index: 60;
  pointer-events: none;
}

/* ---------- 畫面切換 ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--color-bg-base);
  overflow: hidden;               /* 禁止內容撐出手機框（水平捲動根因防線） */
  opacity: 0; pointer-events: none; visibility: hidden; z-index: 1;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.screen.anim-up   { transform: translateY(28px); }
.screen.anim-push { transform: translateX(36px); }
.screen.active {
  opacity: 1; pointer-events: auto; visibility: visible; z-index: 2;
  transform: none;
  transition: opacity .3s ease, transform .3s ease;
}

/* 首頁情緒卡 → 記錄頁滑桿卡 FLIP morph（JS 建立 overlay，300ms 過渡矩形）
   讀起來要是「同一張卡自己長大」：overlay 承接卡片視覺；過渡期間首頁原卡
   visibility:hidden、記錄頁 mood-card 也 morph-hold 藏著——畫面上永遠只有一張卡；
   overlay 到位後本尊接手（矩形重合）、內容才淡入 */
.morph-card {
  position: absolute; z-index: 40;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-card);
  pointer-events: none;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, opacity .26s ease;
}
.morph-card.fade { opacity: 0; }
/* overlay 內容層：同一隻步步、同一條滑桿跟著卡片一起 tween（300ms 同步）；
   標題與 caption 則在起飛時 150ms 快速淡出，mood-card 到位後由 morph-reveal 淡入完整內容 */
.morph-card .morph-creature {
  position: absolute; object-fit: contain;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.morph-card .morph-slider {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--emo-gradient); opacity: .92;   /* mini-slider 樣式起手 */
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, opacity .3s ease;
}
.morph-card .morph-slider.grown { opacity: 1; }    /* crossfade 成大軌道的實色漸層 */
.morph-card .m-fade {
  position: absolute; margin: 0; text-align: center;
  transition: opacity .15s ease;
}
/* morph 進場時記錄頁取消上滑位移（卡片 morph 本身就是轉場，也讓終點矩形量測即定位） */
.screen.morphing { transform: none; }
.mood-card.morph-hold { visibility: hidden; }
.mood-card > * { transition: opacity .25s ease; }
.mood-card.morph-reveal > * { opacity: 0; }

/* ---------- 狀態列 ---------- */
.statusbar {
  height: 52px; flex: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 28px 6px;
  font-weight: var(--fw-semibold); font-size: 15px;
  color: var(--color-text-primary);
}
.statusbar .icons { display: flex; align-items: center; gap: 6px; color: var(--color-text-primary); }
.statusbar svg { display: block; }

/* ---------- 通用 ---------- */
.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 24px;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; height: 48px; flex: none; padding-top: 4px; }
.topbar-center { padding: 4px 24px 0; }
.topbar-title { font-size: 15px; line-height: 22px; font-weight: var(--fw-bold); color: var(--color-text-primary); }
.topbar-spacer { width: 36px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary); font-size: 16px; flex: none;
}
.text-btn { font-size: 14px; color: var(--color-text-secondary); }
/* ‹ 字形基線偏低，墊高讓它在圓鈕內光學置中 */
.icon-btn[aria-label="返回"] { line-height: 1; padding-bottom: 3px; }

.overline { font-size: 14px; line-height: 20px; color: var(--color-text-muted); margin-top: var(--space-12); }
/* 金句：serif/quote 16/26；highlight＝文字後方半透明圓角色條（Figma 重點底色 · highlight） */
.quote {
  text-align: center;
  font-family: var(--font-serif); font-weight: var(--fw-regular);
  font-size: 16px; line-height: 26px;
  /* 全站金句統一吃 accent（首頁 HP①/④、週回顧、當天檢視），2026-07-19 定案 */
  color: var(--color-quote-accent);
  margin: var(--space-16) 0 var(--space-24);
}
.quote-amber { color: var(--color-quote-accent); } /* 保留舊 class：與 .quote 同色 */
/* 位置照 Figma：8px 高、r20、#EBDBCB、opacity .8，貼齊文字行「下緣」。
   用背景而非 ::after，換行時每一行各自帶一條，跟著文字對齊（2026-07-28）。 */
.quote mark {
  color: inherit; padding: 0 4px;
  background: linear-gradient(
      color-mix(in srgb, var(--color-bubble-user) 80%, transparent),
      color-mix(in srgb, var(--color-bubble-user) 80%, transparent)
    ) left bottom / 100% 8px no-repeat;
  border-radius: var(--radius-md);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.dot { width: 7px; height: 7px; border-radius: var(--radius-full); display: inline-block; flex: none; }
.dot-warm  { background: var(--c-warm); }

/* 四扇窗標籤 icon（14px 實心，2026-07-19 Figma 比較後定案取代 7px 圓點） */
.win-ico { width: 14px; height: 14px; flex: none; display: block; }
.ico-sleep { color: var(--color-metric-sleep); }
.ico-move  { color: var(--color-metric-exercise); }
.ico-food  { color: var(--color-metric-diet); }
.ico-mood  { color: var(--color-metric-emotion); }

/* ---------- Skeleton（開機 pulse） ---------- */
.skel {
  background: var(--color-bg-skeleton);
  border-radius: var(--radius-xs);
  animation: skel-pulse 1.5s ease-in-out infinite;
}
.skel-lg { width: 72%; height: 22px; margin-top: var(--space-12); }
.skel-sm { width: 52%; height: 12px; margin-top: var(--space-8); }
.skel-line { width: 60%; height: 12px; margin: var(--space-20) 0 0; }
@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* ==========================================================================
   首頁（HP① / HP④）
   ========================================================================== */
.home-head { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-8); }
.home-date { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.home-headicons { display: flex; gap: var(--space-16); color: var(--color-text-secondary); }
.home-headicons svg { display: block; }
.greet { font-size: 28px; line-height: 38px; margin-top: var(--space-16); }
.greet-sub { font-size: 16px; line-height: 24px; color: var(--color-text-muted); margin-top: var(--space-8); }

.hero-card {
  margin-top: var(--space-16);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  box-shadow: var(--elev-card);
  text-align: center;
  cursor: pointer;
}
/* 步步插圖：無底色圓，插圖直接放（HP① 帶 6° 微傾） */
.hero-avatar {
  width: 100px; height: 100px; margin: 0 auto;
  background: none; border-radius: var(--radius-sm);
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); transform: rotate(6deg); }
.hero-creature { height: 100px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; }
.hero-creature img { height: 100px; width: auto; object-fit: contain; }
.hero-title { font-size: 18px; line-height: 26px; margin-top: var(--space-8); }
.mini-slider {
  position: relative; height: 12px; width: 240px; margin: var(--space-16) auto 0;
  border-radius: var(--radius-full); background: var(--emo-gradient); opacity: .92;
}
.mini-thumb {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--color-control-thumb);
  border: 2px solid var(--color-border-hairline);
  box-shadow: var(--elev-thumb-mini);
  transition: left .3s ease;
}
.hero-cap { font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); color: var(--color-text-muted); margin-top: var(--space-16); }

/* 步步 idle：輕微浮動＋±2° 搖擺的溫柔循環（模擬 Figma smart animate） */
.idle-float { animation: idle-sway 4s ease-in-out infinite; }
@keyframes idle-sway {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg); }
}
/* 睡著的步步（HP① 未記錄 hero）：搖籃式搖擺，照 Figma 兩幀 smart-animate
   （465:1518 ↔ 502:502 為基準，擺幅加倍：img 自帶 +6° 基準，
   wrapper +6° ↔ -18° 即絕對角度 +12° ↔ -12°；位移同步加倍且對稱） */
/* 搖籃：純旋轉、轉軸在步步身體上（略低於中心），才是「原地搖」而不是「繞圈飄」 */
.cradle-sway { animation: cradle-sway 3.5s ease-in-out infinite alternate; transform-origin: 50% 62%; }
@keyframes cradle-sway {
  from { transform: rotate(6deg); }
  to   { transform: rotate(-18deg); }
}

.win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-16); }
.win {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  min-height: 104px;
}
.win-label { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); color: var(--color-text-muted); }
.win-num { font-size: 26px; line-height: 30px; margin-top: var(--space-4); font-weight: var(--fw-medium); }
.win-num small { font-size: 11px; line-height: 14px; font-family: var(--font-sans); color: var(--color-text-secondary); font-weight: var(--fw-regular); }
.win-cap { font-size: 11px; line-height: 14px; color: var(--color-text-muted); margin-top: var(--space-4); }
.win-none { font-size: 13px; line-height: 18px; font-weight: var(--fw-medium); color: var(--color-accent-warm); margin-top: var(--space-12); }
.win { cursor: pointer; }   /* 四塊統計磚都可點：前三塊通週回顧，情緒磚通編輯 */
#screen-home .home-headicons svg:first-child { cursor: pointer; }   /* 圖表 icon 通週回顧 */

.teaser {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-16); padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-hairline);
}
.teaser span {
  font-family: var(--font-serif); font-weight: var(--fw-regular);
  font-size: 16px; line-height: 26px; color: var(--color-text-primary);
}
.teaser-link { font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); color: var(--color-text-muted); }

/* ---------- 底部分頁 ---------- */
.tabbar {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--space-12) var(--space-12) var(--space-8);
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-hairline);
  min-height: 82px;
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  font-size: 11px; line-height: 14px; color: var(--color-text-muted);
  cursor: default;   /* tabbar 是 Attrappe，button 預設的 pointer 會騙人 */
}
.tabbar .tab:last-child { cursor: pointer; }   /* 只有情緒 tab 真的通到記錄頁 */
.tab svg { display: block; }
.tab.on { color: var(--color-action-primary); font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); }

/* ---------- Snack bar（FP②A 斷線 / FP②B 恢復・在日期 header 下方的內容流內，由上滑入） ---------- */
.snackbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-feedback-error-surface);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-12);
  max-height: 0; margin-top: 0; overflow: hidden;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: max-height .35s ease, margin .35s ease, padding .35s ease,
              transform .35s ease, opacity .35s ease;
}
.snackbar.show {
  max-height: 64px; margin-top: var(--space-12);
  padding: var(--space-8) var(--space-12);
  transform: none; opacity: 1; pointer-events: auto;
}
.snackbar.ok { background: var(--color-feedback-recover-surface); }
.snackbar-avatar { width: 32px; height: 32px; object-fit: contain; flex: none; }
/* 恢復版微笑頭像是特寫、視覺偏大 → 同 32px 容器內縮到 26px，與結冰步步視覺同大 */
.snackbar.ok .snackbar-avatar { border-radius: var(--radius-full); width: 26px; height: 26px; margin: 3px; }
.snackbar-text { flex: 1; font-size: 13px; line-height: 18px; color: var(--color-text-primary); }
.snackbar-action { font-size: 13px; line-height: 18px; font-weight: var(--fw-bold); color: var(--color-feedback-error-action); flex: none; }
/* 恢復版（FP②B）動作字「聊聊」吃專屬 token（深色 #C9F1AE，淺色沿用既有 accent） */
.snackbar.ok .snackbar-action { color: var(--color-feedback-recover-accent); }

/* ==========================================================================
   記錄（HP② / HP⑤）
   ========================================================================== */
.rec-scroll { padding-bottom: var(--space-32); }
.rec-title { font-size: 28px; line-height: 38px; margin-top: var(--space-8); }
.rec-sub { font-size: 16px; line-height: 24px; color: var(--color-text-muted); margin-top: var(--space-8); }
.rec-meta { font-size: 13px; line-height: 18px; color: var(--color-text-muted); margin-top: var(--space-8); }

.rec-footer { flex: none; padding: var(--space-12) 40px 28px; }
.btn-primary {
  width: 100%; height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary); color: var(--color-action-on-primary);
  font-size: 15px; line-height: 22px; font-weight: var(--fw-bold);
  box-shadow: var(--elev-button);
  transition: opacity .25s ease;
}
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-ghost { display: block; width: 100%; text-align: center; margin-top: var(--space-12); font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.btn-ghost.danger { color: var(--color-feedback-error-text); }

.blk-label { font-size: 13px; line-height: 18px; font-weight: var(--fw-medium); color: var(--color-text-secondary); margin-bottom: var(--space-8); display: flex; justify-content: space-between; align-items: baseline; }

/* ---------- 整體狀態動畫卡（自 card_animation/App.tsx 移植） ----------
   卡片 327×254、不裁切（overflow visible）讓跳躍動畫不被切頭
   生物區 top:12 h:100 / 標題列 top:118 h:26 / 漸層 bar top:150 h:52 / 刻度 top:208 h:24 */
.mood-card {
  position: relative;
  width: 327px; height: 254px;
  margin: var(--space-16) auto 0;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-card);
  /* 不設 overflow:hidden —— 動畫需要向上超出 */
}
.mc-creature { position: absolute; top: 12px; left: 20px; right: 20px; height: 100px; overflow: visible; }
.mc-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; }
.mc-layer.on { opacity: 1; }
.mc-wrap { width: 100%; height: 100%; }
.mc-wrap.bottom { display: flex; align-items: flex-end; }
.creature-img { width: 100%; height: 100%; object-fit: contain; }

.mc-header { position: absolute; top: 118px; left: 20px; right: 20px; height: 26px; display: flex; align-items: center; justify-content: space-between; }
.mc-label { font-size: 15px; line-height: 22px; font-weight: var(--fw-bold); color: var(--color-text-primary); }
.mc-state { position: relative; height: 26px; min-width: 96px; display: block; }
.mc-statelabel {
  position: absolute; right: 0; top: 0; height: 26px; line-height: 26px;
  font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-text-primary);
  white-space: nowrap; opacity: 0; transition: opacity .2s ease;
}
.mc-statelabel.on { opacity: 1; }
.mc-statelabel.mc-hint { font-size: 11px; font-weight: var(--fw-regular); color: var(--color-text-muted); }

.mc-bar {
  position: absolute; top: 150px; left: 20px; right: 20px; height: 52px;
  border-radius: var(--radius-full);
  background: var(--emo-gradient);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.mc-dot {
  position: absolute; top: 23px; width: 6px; height: 6px;
  border-radius: var(--radius-full); background: var(--c-ink);
  opacity: .5; transition: opacity .2s ease; pointer-events: none;
}
.mc-dot.hide { opacity: 0; }
.mc-thumb {
  position: absolute; top: -1px; left: 0; width: 54px; height: 54px;
  touch-action: none; cursor: grab;
}
.mc-thumb.dragging { cursor: grabbing; }
.mc-thumb.snap { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.mc-thumb-circle {
  width: 54px; height: 54px; border-radius: var(--radius-full);
  background: var(--color-control-thumb);
  border: 2px solid var(--color-border-hairline);
  box-shadow: var(--elev-thumb-sm);
  transition: box-shadow .3s ease;
}
/* 進頁提示：左右輕晃 2–3 下 + 橘色光暈（在卡片轉場完成後由 JS 觸發）
   動畫掛在內層 .mc-thumb-circle（不攔截 pointer），拖曳事件在外層 .mc-thumb——
   晃動期間隨時可以直接按下拖動，一按下 JS 即移除 .hint 停止提示。
   光暈晃完不熄：整個「未醒」狀態亮著，第一次拖動/點選才移除 .hint 淡出 */
.mc-thumb-circle.hint {
  animation: mc-wobble 1.5s ease-in-out .15s 1;
  box-shadow: var(--elev-thumb-glow), var(--elev-thumb-sm);
}
@keyframes mc-wobble {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(4px); }
  38%  { transform: translateX(-4px); }
  58%  { transform: translateX(4px); }
  78%  { transform: translateX(-3px); }
}

.mc-ticks { position: absolute; top: 208px; left: 20px; right: 20px; height: 24px; display: flex; align-items: center; }
.mc-tick {
  flex: 1; min-width: 0; text-align: center; white-space: nowrap;
  font-size: 11px; line-height: 14px; font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  transition: color .2s ease, font-weight .2s ease, font-size .2s ease;
}
.mc-tick.on { color: var(--color-text-secondary); font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); }

/* 步步狀態動畫（照 App.tsx KEYFRAMES_CSS） */
@keyframes anim-flat  { 0%, 100% { transform: scale(1); }     50% { transform: scale(1.03); } }
@keyframes anim-okay  { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }
@keyframes anim-light { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes anim-lean  { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(-6deg); } }
@keyframes anim-tired { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes anim-float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(3deg); } 100% { transform: translateY(0) rotate(0deg); } }

/* ---------- 緊繃感滑桿 ---------- */
.tension-block { margin-top: var(--space-20); padding: 0 var(--space-20); }
.tension-track {
  position: relative; height: 8px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--c-sage) 0%, var(--c-dust) 55%, var(--c-terracotta) 100%);
  opacity: .92; margin: var(--space-8) 0 var(--space-8);
  cursor: pointer; touch-action: none;
}
.tension-thumb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: var(--radius-full);
  background: var(--color-control-thumb);
  border: 2px solid var(--color-border-hairline);
  box-shadow: var(--elev-thumb-sm);
}
.tension-ends { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--color-text-muted); }

/* ---------- Chips ---------- */
.chips-block { margin-top: var(--space-16); padding: 0 var(--space-20); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-full);
  font-size: 12px; line-height: 16px; font-weight: var(--fw-medium);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  color: var(--color-text-secondary);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.chip.on { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-action-on-primary); }
/* 按壓感：縮 .96＋底色加深（120ms） */
.chip:active {
  transform: scale(.96);
  background: color-mix(in srgb, var(--color-bg-surface) 85%, var(--c-ink));
}
.chip.on:active { background: color-mix(in srgb, var(--color-action-primary) 85%, var(--c-ink)); }

/* ---------- 刪除確認底板 ---------- */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 45;
  background: color-mix(in srgb, var(--color-scrim) 38%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.sheet-scrim.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 28px 24px 44px;
  text-align: center;
  transform: translateY(105%);
  transition: transform .32s ease;
  box-shadow: var(--elev-3);
}
.sheet.show { transform: none; }
.sheet-title { font-size: 21px; }
.sheet-sub { font-size: 14px; color: var(--color-text-muted); margin-top: var(--space-8); }
.sheet .btn-primary { margin-top: var(--space-20); }
.del-confirm { display: block; width: 100%; margin-top: var(--space-16); font-size: 14px; font-weight: var(--fw-medium); color: var(--color-feedback-error-accent); }

/* ==========================================================================
   AI 載入 / 回饋 / 02b
   ========================================================================== */
.ai-title { font-size: 28px; line-height: 38px; margin-top: var(--space-8); }
.recap-line { font-size: 13px; line-height: 20px; letter-spacing: -0.02em; color: var(--color-text-muted); margin-top: var(--space-8); }

.chat { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-16); }
.msg { display: flex; align-items: flex-end; gap: var(--space-8); }
.msg-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; flex: none; }
.bubble-wrap { max-width: 244px; }
.msg.noavatar { padding-left: 48px; }
.who { font-size: 11px; color: var(--color-text-muted); margin: 0 0 5px 4px; letter-spacing: .4px; }
.bubble {
  padding: var(--space-16); border-radius: 20px 20px 20px 6px;
  font-size: 16px; line-height: 24px; color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-hairline);
}
.msg.me { justify-content: flex-end; }
.msg.me .bubble {
  background: var(--color-bubble-user);
  border: none; border-radius: 20px 20px 6px 20px;
}
.msg.appear { animation: msg-in .35s ease both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* 回饋頁逐條出現：chips 與呼吸卡先藏、後顯 */
.stage-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }
.stage-in { opacity: 1; transform: none; pointer-events: auto; transition: opacity .35s ease, transform .35s ease; }

/* typing dots */
.bubble.typing { display: inline-flex; gap: 5px; align-items: center; padding: 16px 18px; min-width: 64px; }
.tdot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-text-muted);
  animation: tdot 1.2s ease-in-out infinite;
}
.tdot:nth-child(2) { animation-delay: .18s; }
.tdot:nth-child(3) { animation-delay: .36s; }
@keyframes tdot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.reply-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: var(--space-16); }
.reply-chips .chip { background: transparent; padding: var(--space-8) var(--space-16); font-size: 13px; line-height: 18px; }
.reply-chips .chip:active { background: color-mix(in srgb, var(--color-bg-surface) 85%, var(--c-ink)); }
/* 呼吸完成後「幫我放鬆一下」chip 淡入 */
.chip-in { animation: msg-in .35s ease both; }

/* 呼吸卡 */
.breathe-card {
  margin: var(--space-16) 0 var(--space-24);
  padding: var(--space-12) var(--space-20);
  text-align: center;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-hairline);
}
.breathe-icon {
  width: 76px; height: 76px; margin: 0 auto 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-warm);
}
.breathe-icon svg { display: block; }
/* 花朵動態 gif（已逐幀裁去外圍留白）：填到圓形容器約 90% */
.breathe-icon img { width: 90%; height: 90%; display: block; }
/* 深色模式換 flower-dark.webp（米白花瓣底改深色 surface、棕線提亮成 dust） */
.breathe-icon .flower-dark { display: none; }
[data-theme="dark"] .breathe-icon .flower-light { display: none; }
[data-theme="dark"] .breathe-icon .flower-dark { display: block; }
.breathe-ttl { font-size: 16px; line-height: 26px; font-weight: var(--fw-regular); }
.breathe-desc { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
/* 時長 pill（呼吸卡上）：單選；選中＝terracotta 底白字（比照 chips 選中語言） */
.breathe-durs { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-8); }
.dur-pill {
  padding: var(--space-4) var(--space-8); border-radius: var(--radius-full);
  font-size: 11px; line-height: 16px; font-weight: var(--fw-medium);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  color: var(--color-text-secondary);
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.dur-pill.on { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-action-on-primary); }
.dur-pill:active { transform: scale(.96); }
/* pill 排與「好，開始」之間留 16 */
.breathe-durs + .btn-pill { margin-top: var(--space-16); }
.btn-pill {
  display: inline-block; margin-top: var(--space-8);
  height: 52px; line-height: 52px; min-width: 140px; padding: 0 var(--space-40);
  border-radius: var(--radius-full);
  background: var(--color-action-primary); color: var(--color-action-on-primary);
  font-size: 15px; font-weight: var(--fw-bold);
}
.btn-ghost-sm { display: block; width: 100%; margin-top: var(--space-12); margin-bottom: var(--space-4); font-size: 14px; line-height: 20px; color: var(--color-text-muted); }

/* ---------- 呼吸練習 overlay（4-7-8 沉浸式，2026-07-19 自 Gemini 原型移植重做） ----------
   結構：四層背景 crossfade → 漂浮光斑 → SVG 細環/節點 → 循軌光珠 → 分階段光球 → 文字/控件
   orb/珠/blob 樣式全在 JS rAF 迴圈逐幀更新；顏色一律 tokens 的 breathe-* 系列 */
.breathe-overlay {
  position: absolute; inset: 0; z-index: 50;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* 底色完全不透明：bo-bg 兩層 crossfade 中點各 0.5 時，靠這層墊底，
     不會透出底下的訊息頁 */
  background: var(--breathe-bg-rest);
  opacity: 0; pointer-events: none; transition: opacity .8s ease;
}
.breathe-overlay.show { opacity: 1; pointer-events: auto; }

/* 第 1 層・分階段背景：四層漸層疊放，切階段時 opacity crossfade 2000ms（照原型 duration-[2000ms]） */
.bo-bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bo-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease-in-out; }
.bo-bg.on { opacity: 1; }
.bo-bg[data-bg="rest"]    { background: var(--breathe-bg-rest); }
.bo-bg[data-bg="in"]      { background: var(--breathe-bg-in); }
.bo-bg[data-bg="hold_in"] { background: var(--breathe-bg-hold); }
.bo-bg[data-bg="out"]     { background: var(--breathe-bg-out); }

/* 第 2 層・兩顆大 blur 漂浮光斑（mix-blend screen，transform 由 rAF 更新） */
.bo-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bo-blob {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen; filter: blur(60px); will-change: transform;
}
.bo-blob-1 {
  width: 320px; height: 320px; top: 10%; left: 5%;
  background: color-mix(in srgb, var(--c-sage) 24%, transparent);
}
.bo-blob-2 {
  width: 300px; height: 300px; bottom: 15%; right: 5%;
  background: color-mix(in srgb, var(--c-dust) 22%, transparent);
}

/* 左上退出鈕（36px 半透明圓鈕，island 下方；隨時可退回 AI 回饋頁） */
.bo-close {
  position: absolute; top: 56px; left: 20px; z-index: 4;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--color-breathe-ctl);
  border: 1px solid var(--color-breathe-ctl-edge);
  color: var(--color-breathe-text);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}

/* 舞台：270×270（環 r=110 置中） */
.bo-stage { position: relative; z-index: 1; width: 270px; height: 270px; flex: none; margin-top: -16px; }
.bo-ring { position: absolute; inset: 0; pointer-events: none; }
.bo-ring-line { stroke: var(--color-breathe-ring); }
.bo-node { fill: var(--color-breathe-node); stroke: var(--color-breathe-node-edge); stroke-width: 1; }

/* 沿環跑的發光珠：20px、雙層光暈（核心＋ping 外圈），位置由 rAF 依 cycleProgress 設 left/top */
.bo-bead { position: absolute; width: 20px; height: 20px; z-index: 3; pointer-events: none; transition: opacity .8s ease; }
.bo-bead-core {
  position: absolute; inset: 0; border-radius: 50%; transform: scale(.9);
  background: rgba(var(--breathe-bead-rgb), 1);
  box-shadow: 0 0 12px rgba(var(--breathe-bead-rgb), 1),
              0 0 24px rgba(var(--breathe-orb-warm-rgb), 1);
}
.bo-bead-halo {
  position: absolute; inset: -4px; border-radius: 50%;
  background: rgba(var(--breathe-bead-rgb), .3);
  animation: bo-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes bo-ping {
  0%       { transform: scale(1); opacity: .6; }
  75%,100% { transform: scale(2); opacity: 0; }
}

/* 核心光球 170px：scale / radial-gradient / box-shadow 由 rAF 逐幀寫入（60ms 微過渡濾抖動）；
   rest（進場、緩停）落回這裡的 CSS 預設值，.done 時放大過渡時間＝「緩停」 */
.bo-orb {
  position: absolute; top: 50%; left: 50%;
  width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  z-index: 2;
  transform: scale3d(.8, .8, 1);
  background: radial-gradient(circle,
    rgba(var(--breathe-orb-hi-rgb), .9) 0%,
    rgba(var(--breathe-orb-mid-rgb), .7) 40%,
    rgba(var(--breathe-orb-deep-rgb), .3) 100%);
  box-shadow: 0 0 50px rgba(var(--breathe-orb-mid-rgb), .4),
              inset 0 0 30px rgba(var(--breathe-orb-hi-rgb), .6);
  transition: transform .06s ease-out, background .06s ease-out, box-shadow .06s ease-out;
  will-change: transform;
}
.breathe-overlay.done .bo-orb { transition: transform 1.6s ease, background 1.6s ease, box-shadow 1.6s ease; }
/* 球體中央柔光雙層（豐富層次） */
.bo-orb-soft {
  position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;
  border-radius: 50%; background: rgba(var(--breathe-orb-hi-rgb), .2); filter: blur(4px);
}
.bo-orb-heart {
  position: absolute; top: 27.5%; left: 27.5%; width: 45%; height: 45%;
  border-radius: 50%; background: rgba(var(--breathe-orb-hi-rgb), .6); filter: blur(2px);
}

/* 倒數秒數小 chip（環正下方） */
.bo-count {
  position: relative; z-index: 2; margin-top: var(--space-8);
  font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-bold);
  color: var(--color-breathe-text-dim);
  background: color-mix(in srgb, var(--c-ink) 10%, transparent);
  border: 1px solid var(--color-breathe-ctl-edge);
  padding: 3px 12px; border-radius: var(--radius-full);
}

/* 引導大字＋固定副標（crossfade 由 JS 控 opacity） */
.bo-text {
  position: relative; z-index: 2; margin-top: var(--space-20); min-height: 36px;
  font-size: 26px; line-height: 36px; letter-spacing: .04em;
  color: var(--color-breathe-text);
  text-shadow: 0 1px 8px rgba(var(--breathe-ink-rgb), .18);
  transition: opacity .35s ease;
}
.bo-sub {
  position: relative; z-index: 2; margin-top: var(--space-4);
  font-size: 13px; line-height: 18px; letter-spacing: .06em;
  color: var(--color-breathe-text-dim);
}

/* 暫停中改時長：以新 sequence 重新開始，前置 800ms 淡出淡入緩衝
   （stage／倒數／引導字先 400ms 淡出，重設節奏後再淡回） */
.bo-stage, .bo-count { transition: opacity .4s ease; }
.breathe-overlay.switching .bo-stage,
.breathe-overlay.switching .bo-count,
.breathe-overlay.switching .bo-text { opacity: 0; }

/* 暫停時淡入的時長 pill（深色 overlay 版）：未選＝半透明控件底、選中＝米白底 ink 字 */
.bo-durs {
  position: relative; z-index: 3; display: flex; gap: 8px; margin-top: var(--space-16);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.breathe-overlay.paused .bo-durs { opacity: 1; pointer-events: auto; }
.bo-dur {
  padding: var(--space-4) var(--space-8); border-radius: var(--radius-full);
  font-size: 11px; line-height: 16px; font-weight: var(--fw-medium);
  background: var(--color-breathe-ctl);
  border: 1px solid var(--color-breathe-ctl-edge);
  color: var(--color-breathe-text-dim);
  backdrop-filter: blur(6px);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.bo-dur.on {
  background: color-mix(in srgb, var(--color-breathe-text) 88%, transparent);
  border-color: transparent;
  color: rgb(var(--breathe-ink-rgb));
}
.bo-dur:active { transform: scale(.96); }

/* 控制列：中央暫停/繼續（64px 米白）＋右側靜音（48px 半透明）；.done 時淡出讓位給完成 pill */
.bo-controls {
  position: absolute; left: 0; right: 0; bottom: 56px; height: 64px; z-index: 3;
  transition: opacity .5s ease;
}
.breathe-overlay.done .bo-controls { opacity: 0; pointer-events: none; }
.bo-play {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--color-breathe-ctl);
  border: 1px solid var(--color-breathe-ctl-edge);
  color: var(--color-breathe-text);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform .2s ease;
}
.bo-play:active { transform: translateX(-50%) scale(.95); }
/* 暫停時：rAF 已停（orb/珠/blob），CSS 的 halo ping 也一起停 */
.breathe-overlay.paused .bo-bead-halo { animation-play-state: paused; }
.bo-mute {
  position: absolute; right: 56px; top: 8px;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-breathe-ctl);
  border: 1px solid var(--color-breathe-ctl-edge);
  color: var(--color-breathe-text);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.bo-mute.muted { color: var(--color-breathe-text-dim); }
.bo-play svg, .bo-mute svg { display: block; }

/* 完成 pill（緩停後 crossfade 進場，位置同控制列）
   置中用 left/right+margin auto——msg-in 的 transform 會蓋掉 translateX 置中法 */
.bo-done-btn {
  position: absolute; left: 0; right: 0; bottom: 62px;
  margin: 0 auto; width: fit-content;
  z-index: 3; margin-top: 0;
  animation: msg-in .6s ease both;
}
/* 「再來一輪」：完成 pill 下方的次要文字鈕（再跑 1 輪 19s） */
.bo-again-btn {
  position: absolute; left: 0; right: 0; bottom: 26px;
  margin: 0 auto; width: fit-content;
  z-index: 3; padding: var(--space-4) var(--space-12);
  font-size: 14px; line-height: 20px;
  color: var(--color-breathe-text-dim);
  animation: msg-in .6s ease both;
}

/* 02b */
.more-top {
  flex: none; display: flex; align-items: center; gap: var(--space-16);
  padding: 4px 24px 0; height: 48px;
}
.more-top .recap-line { flex: 1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-scroll { padding-bottom: var(--space-16); }
.more-input {
  flex: none; display: flex; align-items: flex-end; gap: var(--space-12);
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-24);
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-hairline);
}
.more-input textarea {
  flex: 1; resize: none; border: 1px solid var(--color-border-hairline);
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  font: inherit; font-size: 14px; line-height: 20px;
  border-radius: var(--radius-full); padding: var(--space-12) var(--space-16);
  outline: none; max-height: 96px;
}
.more-input textarea::placeholder { color: var(--color-text-muted); }
.send-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-action-primary); color: var(--color-action-on-primary);
  font-size: 20px; font-weight: var(--fw-bold);
}

/* 仿 iOS 鍵盤（裝飾用圖片，取自 Figma Keyboard 元件）：進 02b 由下滑入。
   用 height 過渡：收起時鍵盤滑下、輸入列跟著沉到頁面最底（同一頁兩個狀態，300ms 順滑） */
.ios-kb {
  flex: none; height: 0; overflow: hidden;
  transition: height .3s ease;
}
.ios-kb.up { height: 342px; }
.ios-kb img { width: 100%; display: block; }
/* 鍵盤收起時輸入列在頁面最底：底 padding 加大避開 home indicator；鍵盤在時回到 12px */
#screen-more .more-input { padding-bottom: 26px; transition: padding .3s ease; }
#screen-more.kb-up .more-input { padding-bottom: var(--space-12); }

/* ==========================================================================
   週回顧 / 當天檢視
   ========================================================================== */
.wk-title { font-size: 28px; line-height: 38px; margin-top: var(--space-12); }
.wk-sub { font-size: 16px; line-height: 24px; color: var(--color-text-muted); margin-top: var(--space-12); }
.sec-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-16); }
.sec-l { font-size: 15px; line-height: 22px; font-weight: var(--fw-bold); color: var(--color-text-primary); }
.sec-r { font-size: 11px; line-height: 14px; color: var(--color-text-muted); }

/* 情緒色溫 7 欄：柱高隨當天情緒、未記錄空心、圓角矩形（Figma 703:3476） */
.week-row { display: flex; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-16); }
/* 當天檢視：上方留一條 tooltip 專用車道（最高柱 44 時 tip 頂端達 sqbox 上方 28px），
   tooltip 才不會壓到「情緒色溫／點每天切換」那行文字 */
.week-row.with-tip { margin-top: var(--space-4); padding-top: 30px; }
.week-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); position: relative; cursor: pointer; }
.week-col.empty { cursor: default; }
.week-sqbox { position: relative; height: 44px; width: 30px; display: flex; align-items: flex-end; justify-content: center; }
.week-sq {
  width: 30px; border-radius: var(--radius-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.week-col.empty .week-sq {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-border-hairline);
}
/* 選中的柱子不加框也不上浮，與其他格切齊，選取全靠 tooltip 標示（較溫柔安靜） */
.week-col.sel .week-sq {
  box-shadow: none;
}
.week-d { font-size: 11px; line-height: 14px; color: var(--color-text-muted); }
/* tooltip 掛在 week-sqbox 內、由底部往上定位：bottom = 柱高 + 6（箭頭底緣貼柱頂），
   JS 於 buildWeekRow 依當日 barH 設定 style.bottom，故矮柱也一樣緊貼（2026-07-19 定案） */
/* 深淺共用一組 token：淺色邊框＝transparent（無框、也無陰影，不會讀成線框），
   深色＝V3 深底描邊；箭頭同色同框、上半疊進 chip 蓋掉底框 → 視覺一體成形 */
.week-tip {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  background: var(--color-tooltip-surface);
  color: var(--color-tooltip-text);
  border: 1px solid var(--color-tooltip-border);
  border-radius: var(--radius-xs);
  box-shadow: none;
  font-size: 11px; line-height: 14px;
  padding: 3px 6px; white-space: nowrap; z-index: 5;
}
.week-tip::after {
  content: ""; position: absolute; bottom: -4.5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--color-tooltip-surface);
  border-right: 1px solid var(--color-tooltip-border);
  border-bottom: 1px solid var(--color-tooltip-border);
}
.insight {
  margin-top: var(--space-16);
  padding: var(--space-24) var(--space-24) var(--space-20);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-hairline);
}
.insight-over { display: flex; align-items: center; gap: var(--space-8); font-size: 14px; line-height: 20px; color: var(--color-text-muted); margin-bottom: var(--space-12); }
.insight-over .dot { width: 14px; height: 14px; }
.insight-h { font-size: 21px; line-height: 30px; }
.insight .insight-h { font-weight: var(--fw-regular); }
.insight-p { font-size: 14px; line-height: 20px; color: var(--color-text-muted); margin-top: var(--space-12); }
.insight-note { font-size: 11px; line-height: 14px; color: var(--color-text-muted); margin-top: var(--space-12); }

.day-records { margin-top: var(--space-24); }
.day-rec-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-8); }
.day-rec-head span:first-child { font-family: var(--font-serif); font-size: 16px; font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.day-rec-head span:last-child { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.day-rec {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border-hairline);
}
.day-rec:last-child { border-bottom: none; padding-bottom: 2px; }
.day-rec .mood { font-family: var(--font-serif); font-size: 17px; font-weight: var(--fw-semibold); flex: 1; display: flex; align-items: center; gap: 8px; }
.day-rec .mood .dot { width: 8px; height: 8px; }
.day-rec .meta { text-align: right; }
.day-rec .meta .t { font-size: 12px; color: var(--color-text-secondary); }
.day-rec .meta .c { font-size: 12px; color: var(--color-text-secondary); margin-top: var(--space-4); }

/* 週回顧 snack bar：flex 流內（topbar 下方）；離線時 skeleton 下推讓位 */
.wk-snackbar { flex: none; margin-left: 24px; margin-right: 24px; position: relative; z-index: 25; }

/* 週回顧載入畫面（照 Figma dev CSS）：真標題文字 + skeleton 柱 / insight 卡 */
.wk-skeleton {
  position: absolute; inset: 0; top: 100px; z-index: 20;
  padding: 0 24px;
  background: var(--color-bg-base);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, top .35s ease;
}
.wk-skeleton.show { opacity: 1; }
#screen-weekly.snack-open .wk-skeleton { top: 160px; }
.wsk-bar { width: 30px; border-radius: var(--radius-sm); }        /* 柱 30 寬、r12、#E5E3DE、底對齊（week-sqbox） */
.wsk-card {                                                        /* insight skeleton 卡 327×116、r28 */
  margin-top: var(--space-16);
  height: 116px;
  padding: var(--space-24) var(--space-24) var(--space-20);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
}
.wsk-line { height: 14px; border-radius: var(--radius-full); }     /* 262×14 / 196×14、r7（14 高的全圓角） */
.wsk-line + .wsk-line { margin-top: var(--space-8); }

/* ==========================================================================
   展示選單
   ========================================================================== */
.demo-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 101;
  font-size: 12px; letter-spacing: 1px; color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  box-shadow: var(--elev-2);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.demo-fab:hover { color: var(--color-text-primary); }
.demo-panel {
  position: fixed; right: 16px; bottom: 58px; z-index: 100;
  display: none;
  width: 168px;
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  padding: 12px 12px 10px;
  backdrop-filter: blur(6px);
}
.demo-panel.open { display: block; }
.dp-head { font-size: 11px; letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: var(--space-8); }
.dp-btn {
  display: block; width: 100%; text-align: left;
  font-size: 13px; color: var(--color-text-primary);
  padding: 7px 8px; border-radius: var(--radius-xs);
  text-decoration: none;
}
.dp-btn:hover { background: var(--color-bg-surface); }
.dp-toggle {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--color-text-primary);
  padding: 7px 8px; cursor: pointer;
}
.dp-toggle input { display: none; }
.dp-switch {
  width: 34px; height: 20px; border-radius: var(--radius-full);
  background: var(--color-bg-skeleton); position: relative;
  transition: background .2s ease; flex: none;
}
.dp-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--color-bg-elevated); box-shadow: var(--elev-1);
  transition: left .2s ease;
}
.dp-toggle input:checked + .dp-switch { background: var(--color-action-primary); }
.dp-toggle input:checked + .dp-switch::after { left: 16px; }
/* 深色下未開啟的 track（--color-bg-skeleton 貼著面板底幾乎隱形）→ 亮一階半透明灰＋hairline 邊 */
[data-theme="dark"] .dp-switch {
  background: color-mix(in srgb, var(--color-text-muted) 38%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-border-hairline);
}
[data-theme="dark"] .dp-switch::after { background: var(--color-control-thumb); }
[data-theme="dark"] .dp-toggle input:checked + .dp-switch { background: var(--color-action-primary); box-shadow: none; }
.dp-sub {
  font-size: 12px; color: var(--color-text-muted);
  padding: 8px 8px 4px; cursor: pointer; user-select: none;
  display: flex; justify-content: space-between;
}
.dp-links { display: none; }
.dp-links.open { display: block; }
.dp-links button,
.dp-links a {
  display: block; width: 100%; text-align: left;
  font-size: 12px; color: var(--color-text-secondary);
  padding: 5px 8px; border-radius: var(--radius-xs);
  text-decoration: none;
}
.dp-links button:hover,
.dp-links a:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
/* 展示選單分隔線：外部連結（產品規劃簡報）與畫面跳轉分開 */
.dp-links a.dp-ext {
  margin-top: 6px; padding-top: 9px;
  border-top: 1px solid var(--color-border-hairline);
  color: var(--color-accent-warm);
}


/* 不做 prefers-reduced-motion 降級：展示 prototype，動畫為驗收重點（2026-07-19 定案） */


/* ═══════════ 中英切換（右下角，「☰ 展示」左側）═══════════ */
.lang-fab {
  position: fixed; right: 104px; bottom: 16px; z-index: 101;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 1px;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  box-shadow: var(--elev-2);
  backdrop-filter: blur(6px);
  text-decoration: none;
  cursor: pointer;
}
.lang-fab .on { color: var(--color-text-primary); }
.lang-fab i {
  width: 1px; height: 11px;
  background: var(--color-border-hairline);
}
.lang-fab:hover { color: var(--color-text-secondary); }