/* ============================================================
   Pace · 全人健康 App
   色彩 / 字級 / 間距皆對齊 Figma「PACE DESIGN SYSTEM v1.0」
   ============================================================ */

:root {
  /* 底色 */
  --bg:        #EFE7D8;  /* 主背景 · 暖米 */
  --surface:   #FBF6EC;  /* 浮起卡片 */
  --surface-2: #F7F1E5;  /* 週回顧卡片 */
  --nav:       #2A2A42;  /* 深藍夜 */
  /* 文字 */
  --ink:       #3D342A;  /* 主要文字 */
  --ink-soft:  #6E6456;  /* 次要文字 */
  --ink-muted: #7A6F5F;  /* 標籤 · 弱化 */
  /* 語意 */
  --warm:      #B77450;  /* 主要行動 · 強調 */
  --amber:     #8B5E3C;  /* 深琥珀 · 回應 */
  --line:      #E2D7C4;  /* 分隔線 / 停用 */
  --card-line: #E4DAC8;
  --terracotta:#A8734F;  /* 主色 · 陶土棕（次要按鈕外框） */
  --danger:    #C0392B;  /* 警告紅（僅 Error B 中性版使用） */
  /* 導覽 icon */
  --icon-on:   #C78A4F;
  --icon-off:  #9A8F7E;
  /* 字體 */
  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans:  "Noto Sans TC", -apple-system, "PingFang TC", sans-serif;
  --mono:  "Roboto Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #241f1a;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100dvh;
}

.svg-defs { position: absolute; width: 0; height: 0; }

/* ── 手機外框：固定 375×812，用 scale 貼合任何螢幕 ───────── */
.stage {
  display: grid;
  place-items: center;
  height: 100dvh;
  width: 100vw;
}
.phone {
  position: relative;
  width: 375px;
  height: 812px;
  background: var(--bg);
  border-radius: 40px;
  overflow: hidden;
  transform: scale(var(--s, 1));
  transform-origin: center;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.55);
}
@media (max-width: 500px) {
  .phone { border-radius: 0; box-shadow: none; }
}

/* ── 狀態列 ───────────────────────────────────────────── */
.statusbar {
  position: absolute; inset: 0 0 auto 0;
  height: 60px; z-index: 40;
  pointer-events: none;
}
.statusbar__time {
  position: absolute; left: 27px; top: 50%;
  transform: translateY(-50%);
  width: 54px; text-align: center;
  font: 600 17px/22px -apple-system, "SF Pro Text", var(--sans);
  letter-spacing: -0.408px; color: #000;
}
.statusbar__right {
  position: absolute; right: 23.6px; top: calc(50% - 0.5px);
  transform: translateY(-50%);
  width: 77.401px; height: 13px;
}

/* ── 畫面切換 ─────────────────────────────────────────── */
.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: block; }

.state { position: absolute; inset: 0; display: none; }
.state.is-active { display: block; }

/* ── 頁首 ─────────────────────────────────────────────── */
.pagehead {
  position: absolute; left: 32px; top: 70px; width: 311px;
  display: flex; align-items: center;
}
.pagehead__title {
  font: 600 20px/normal var(--serif);
  color: var(--ink); width: 138.5px;
}
.pagehead__date {
  flex: 1; text-align: right;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--ink-muted);
}

/* 大頁首（日子 / 回顧 / 今天列表） */
.bighead {
  font: 600 22px/1.7 var(--serif);
  color: var(--ink); white-space: nowrap;
}
.bighead__sub {
  font: 300 12px/normal var(--sans);
  color: var(--ink-soft); white-space: nowrap;
}
.bighead--static     { position: absolute; left: 32px; top: 70px; }
.bighead__sub--static{ position: absolute; left: 32px; top: 122px; }

/* ── 小太陽 ───────────────────────────────────────────── */
.mascot--hero {
  position: absolute; left: 50%; top: 167px;
  transform: translateX(-50%);
  width: 150px; height: 150px;
}
.mascot--reply {
  position: absolute; left: 50%; top: 129px;
  transform: translateX(-50%) rotate(12deg);
  width: 96px; height: 96px;
}
.mascot--corner {
  position: absolute; right: 32px; top: 0;
  width: 90px; height: 90px;
}
.mascot--modal {
  position: absolute; left: 50%; top: 20px;
  transform: translateX(-50%) rotate(6deg);
  width: 56px; height: 56px;
}

/* ── 空狀態 ───────────────────────────────────────────── */
.greeting {
  position: absolute; left: 50%; top: 347px;
  transform: translateX(-50%);
  width: 311px; text-align: center;
  font: 600 24px/1.7 var(--serif);
  color: var(--ink);
}
.subtle-note {
  position: absolute; left: 50%; top: 437px;
  transform: translateX(-50%);
  width: 311px; text-align: center;
  font: 400 16px/1.8 var(--serif);
  color: var(--ink-soft);
}

/* ── 語音聆聽中 ───────────────────────────────────────── */
.wave {
  position: absolute; left: 50%; top: 305px;
  transform: translateX(-50%);
  width: 230px; height: 56px;
  display: flex; align-items: center; gap: 10px;
}
.wave__bar {
  width: 5px; border-radius: 3px;
  background: var(--warm);
  transform-origin: center;
  animation: wave 1.1s ease-in-out infinite alternate;
}
@keyframes wave {
  from { transform: scaleY(.42); }
  to   { transform: scaleY(1);   }
}
.listening-label {
  position: absolute; left: 50%; top: 421px;
  transform: translateX(-50%);
  width: 311px; text-align: center;
  font: 400 20px/1.8 var(--serif);
  color: var(--amber);
}
.transcript {
  position: absolute; left: 50%; top: 477px;
  transform: translateX(-50%);
  width: 311px; text-align: center;
  font: 400 16px/1.8 var(--serif);
  color: var(--ink-soft);
  min-height: 58px;
}
.transcript::after {
  content: "▍"; color: var(--warm);
  animation: caret 1s steps(1) infinite;
}
.transcript.is-done::after { content: none; }
@keyframes caret { 50% { opacity: 0; } }

/* ── AI 回應卡 ────────────────────────────────────────── */
.reply-card {
  position: absolute; left: 32px; top: 245px; width: 311px;
  display: flex; flex-direction: column; gap: 11px;
  padding: 24px; border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  animation: rise .45s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.reply-card__label {
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--ink-muted);
}
.reply-card__text {
  font: 400 16px/1.65 var(--sans);
  letter-spacing: .2px; color: var(--ink);
}
.rule { height: 1px; width: 100%; background: var(--line); }

/* ── 按鈕 ─────────────────────────────────────────────── */
.btn {
  border: 0; cursor: pointer;
  font: 400 16px/1.65 var(--sans);
  letter-spacing: .2px;
  padding: 13px 30px; border-radius: 100px;
  transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--warm); color: var(--surface); }
.btn--primary:hover { filter: brightness(1.06); }
/* 用 left 定位而非 translateX(-50%)，才不會被 rise 動畫的 transform 蓋掉 */
.btn--save {
  position: absolute; left: 32px; top: 422px;
  width: 311px;
  animation: rise .45s .1s cubic-bezier(.22,.9,.3,1) both;
}

/* ── 錯誤畫面（A 溫柔版 / B 中性版） ──────────────────── */
.is-gone { display: none !important; }
.warn {
  position: absolute; left: 151.5px; top: 211px;
  width: 72px; height: 72px;
  color: var(--danger);
}
.err-sub {
  position: absolute; left: 50%; top: 396px;
  transform: translateX(-50%);
  width: 311px; text-align: center;
  font: 400 16px/1.8 var(--sans);
  color: var(--ink-soft);
}
/* B 中性版的副標用襯線，A 溫柔版用黑體 —— 照 Figma 原樣 */
.err-sub--serif { font-family: var(--serif); }

.btn--wide { position: absolute; left: 32px; width: 311px; }
.btn--retry { top: 522px; }
.btn--type  { top: 588px; }
.btn--outline {
  background: none;
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
}
.btn--outline:hover { background: rgba(168, 115, 79, .07); }

/* ── 語音鍵 ───────────────────────────────────────────── */
.voice {
  position: absolute; left: 50%; top: 584px;
  transform: translateX(-50%);
  width: 124px; height: 122px;
  background: none; border: 0; cursor: pointer;
  z-index: 20;
}
.voice__halo {
  position: absolute; left: 50%; top: 36px;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px; border-radius: 50%;
  background: #E2A55C; filter: blur(13px);
  animation: halo 3.5s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { opacity: .25; }
  50%      { opacity: .72; }
}
.voice__btn {
  position: absolute; left: 50%; top: 44px;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--warm);
  display: grid; place-items: center;
  animation: breathe 3.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     }
  50%      { transform: translate(-50%, -50%) scale(1.056); }
}
.voice__mic { width: 28px; height: 28px; color: var(--surface); }
.voice__label {
  position: absolute; left: 50%; top: 94px;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--ink);
}
.voice.is-hidden { opacity: 0; pointer-events: none; }
.voice { transition: opacity .3s ease; }

/* ── 捲動區 ───────────────────────────────────────────── */
.scrollarea {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.scrollarea::-webkit-scrollbar { width: 0; }
.scrollarea__sticky {
  position: sticky; top: 0; z-index: 10;
  height: 160px;
  background: var(--bg);
  pointer-events: none;
}
.screen--today .scrollarea__sticky .bighead { position: absolute; left: 32px; top: 82px; }
.screen--days  .scrollarea__sticky .bighead { position: absolute; left: 32px; top: 76px; }
.screen--days  .scrollarea__sticky .bighead__sub { position: absolute; left: 32px; top: 130px; }
.scrollarea__sticky .mascot--corner { top: 70px; }

.bottomfade {
  position: absolute; left: 0; top: 594px;
  width: 375px; height: 163px;
  z-index: 15; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(239,231,216,0) 0%,
    var(--bg) 72%,
    var(--bg) 100%);
}

/* ── 日記卡（今天列表） ───────────────────────────────── */
.daylabel {
  margin: 30px 0 0 28px;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: 2px; color: var(--ink-muted);
}
.cards {
  display: flex; flex-direction: column; gap: 14px;
  margin: 8px 32px 220px;
}
.card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 24px; border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.card.is-new { animation: rise .5s cubic-bezier(.22,.9,.3,1) both; }
.card__time {
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--ink-muted);
}
.card__said {
  font: 400 16px/1.65 var(--sans);
  letter-spacing: .2px; color: var(--ink);
}
.card__reply { display: flex; gap: 8px; align-items: flex-start; }
.card__dot {
  flex: none; width: 11px; height: 11px; margin-top: 4px;
  border-radius: 50%; background: var(--warm);
}
.card__reply p {
  flex: 1;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--amber);
}

/* ── 我的日子 ─────────────────────────────────────────── */
.trace {
  position: relative;
  margin: 30px 32px 120px;
  width: 311px;
}
.trace::before {        /* 時間軸直線 */
  content: "";
  position: absolute; left: 5px; top: 6px; bottom: 34px;
  width: 1px; background: var(--line);
}
.trace-entry {
  position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  height: 100px;
}
.trace-entry__dot {
  flex: none; width: 11px; height: 11px; margin-top: 5px;
  border-radius: 50%; background: var(--warm);
  z-index: 1;
}
.trace-entry--empty .trace-entry__dot {
  width: 14px; height: 14px; margin: 4px 0 0 -1.5px;
  background: var(--bg);
  border: 1.5px solid #C9B99F;
}
.trace-entry__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.trace-entry__date {
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--ink-soft);
}
.trace-entry__wrap {
  padding: 11px 16px; border-radius: 12px;
  background: var(--surface);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; color: var(--ink);
}
.trace-entry--empty .trace-entry__wrap {
  padding: 11px 0; background: none; color: var(--ink-muted);
}

/* ── 這週的你 ─────────────────────────────────────────── */
.week-card {
  position: absolute; left: 50%; top: 166px;
  transform: translateX(-50%);
  width: 311px; height: 220px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 8px;
  border-radius: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.week-card__range {
  font: 400 12px/normal var(--mono);
  color: var(--ink-soft);
}
.week-card__text {
  font: 400 17px/1.9 var(--serif);
  color: var(--ink);
}
.weekdots {
  position: absolute; left: 50%; top: 416px;
  transform: translateX(-50%);
  width: 280.571px; height: 35px;
  display: flex; justify-content: space-between;
}
.weekdot { width: 20px; text-align: center; }
.weekdot__mark {
  width: 14px; height: 14px; margin: 0 auto;
  border-radius: 50%; background: var(--warm);
}
.weekdot--soft  .weekdot__mark { background: #C4805C; }
.weekdot--empty .weekdot__mark {
  background: none; border: 1.5px solid #C9B99F;
}
.weekdot__day {
  margin-top: 8px;
  font: 400 11px/normal var(--sans);
  color: var(--ink-soft);
}
.week-note {
  position: absolute; left: 50%; top: 481px;
  transform: translateX(-50%);
  width: 312px; text-align: center;
  font: 300 12px/1.8 var(--sans);
  color: var(--ink-muted);
}

/* ── 底部導覽 ─────────────────────────────────────────── */
.nav {
  position: absolute; left: 0; bottom: 0; z-index: 30;
  width: 375px; height: 84px;
  background: var(--nav);
}
.nav__item {
  position: absolute; top: 7px;
  width: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
}
.nav__item:nth-child(1) { left: 37px; }
.nav__item:nth-child(2) { left: 157px; }
.nav__item:nth-child(3) { left: 277px; }
.nav__icon {
  width: 24px; height: 24px;
  color: var(--icon-off);
  transition: color .2s ease;
}
.nav__label {
  min-width: 100%;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .5px; text-align: center;
  color: var(--ink-muted);
  transition: color .2s ease;
}
.nav__item.is-active .nav__icon  { color: var(--icon-on); }
.nav__item.is-active .nav__label { color: var(--warm); }
.nav__home {
  position: absolute; left: 50%; bottom: 8px;
  transform: translateX(-50%);
  width: 144px; height: 5px;
  border-radius: 100px; background: var(--line);
}

/* ── 已存檔 彈出卡 ────────────────────────────────────── */
.modal {
  position: absolute; inset: 0; z-index: 50;
  display: none;
}
.modal.is-open { display: block; }
.modal__scrim {
  position: absolute; inset: 0;
  background: var(--ink); opacity: .45;
  animation: fade .25s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: .45; } }
.modal__card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 311px; height: 240px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  box-shadow: 0 12px 32px -8px rgba(61,52,42,.3);
  overflow: hidden;
  animation: pop .3s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes pop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
}
.modal__title {
  position: absolute; left: 0; top: 93px; width: 311px;
  text-align: center;
  font: 600 20px/normal var(--serif);
  color: var(--ink);
}
/* 單一確認鍵置中：文案是「已存好了」的通知，不該再給選擇題 */
.modal__actions {
  position: absolute; left: 0; top: 167px; width: 311px;
  display: flex; justify-content: center;
}
.modal__actions .btn { width: 160px; padding: 13px 0; text-align: center; }

/* ── Demo 控制面板（不屬於 App，刻意做成開發工具的樣子） ── */
.demo {
  position: fixed; left: 24px; top: 24px; z-index: 100;
  width: 232px;
  font-family: var(--sans);
  color: #cfc6b8;
}
.demo__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px; letter-spacing: 1px;
  user-select: none;
}
.demo__toggle::-webkit-details-marker { display: none; }
.demo__toggle::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #6fbf8b;
}
.demo[data-failing="true"] .demo__toggle::before { background: #d9822b; }
.demo__toggle:hover { background: rgba(255,255,255,.12); }

.demo__body {
  margin-top: 8px; padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.demo__title {
  font-size: 11px; letter-spacing: 1px;
  color: #9a9186; margin-bottom: 10px;
}
.demo__opts { display: flex; flex-direction: column; gap: 6px; }
.demo__opt {
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05);
  border: 1px solid transparent;
  color: #cfc6b8; font-size: 13px; text-align: left;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.demo__opt:hover { background: rgba(255,255,255,.11); }
.demo__opt.is-on {
  background: rgba(199,138,79,.22);
  border-color: rgba(199,138,79,.55);
  color: #e8c9a4;
}
.demo__hint {
  margin-top: 12px;
  font-size: 11px; line-height: 1.6; color: #8b8378;
}

/* 手機沒有外框留白，面板只能疊在 App 上。
   擺底部、往上展開（column-reverse），才不會蓋掉頁首文字；加毛玻璃表明它是浮層。 */
@media (max-width: 500px) {
  .demo {
    left: 12px; top: auto; bottom: 96px; width: auto;
    display: flex; flex-direction: column-reverse; align-items: flex-start;
  }
  .demo__toggle,
  .demo__body { backdrop-filter: blur(12px); background: rgba(36,31,26,.78); }
  .demo__body { width: 232px; margin: 0 0 8px; }
}

/* ── 減少動態偏好 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}