/* AI 智富管家 展場 Demo
   版面照客戶 Figma：單欄，直放橫放都一樣，內容限欄寬置中。
   設計稿 frame 是 375×812pt，所有尺寸換算成相對 --fs 的倍數，字級再綁螢幕高度，
   所以 65 吋直立螢幕就是把同一支「375×812 的手機」等比放大，比例不走樣。 */

/* 色票取自客戶 Figma（docs/figma/）。
   取法：SVG 原件直接讀 hex，PNG 設計稿逐區域取樣統計，不靠肉眼判讀。
   對應關係記在 docs/figma/palette.md。 */
:root {
  --navy:      #041C43;   /* 主文字、深色底 */
  --navy-2:    #24395A;
  --blue:      #0044AD;   /* 品牌藍：按鈕、連結、強調 */
  --blue-2:    #205BB7;
  --sky:       #1877FF;   /* 亮藍 */
  --sky-soft:  #F2F6FF;   /* 淺藍底：使用者氣泡、輸入框 */
  --sky-cta:   #DCEAFF;   /* CTA 底 */
  --green:     #1FA463;
  --orange:    #FF833E;   /* IP 角色的橘 */
  --orange-2:  #FF4400;
  --red:       #D0453B;

  --ink:       #041C43;
  --ink-2:     #435572;
  --ink-note:  #4C5466;   /* 條款那兩行 */
  --ink-3:     #8994A5;   /* placeholder */
  --ink-4:     #A1AAB8;
  --line:      #E2E2E2;   /* 分隔線，設計稿實測 */
  --line-2:    #C0C6D0;
  --disabled:  #E2E2E2;
  --bg:        #FFFFFF;   /* 設計稿的聊天區是純白 */
  --card:      #FFFFFF;
  --card-2:    #F8FAFF;   /* 圖表卡片底，純白上要有一點區隔 */

  /* 設計稿是 375×812pt 的 frame，所有尺寸換算成相對內文字級（16pt）的倍數。
     812 / 16 = 50.75em，所以字級綁「高度」而不是寬度：--fs = 100vh / 50.75 ≈ 1.97vh，
     整份版面就等比縮放，在任何螢幕上都維持設計稿的比例。取 1.9vh 留一點餘裕。

     「首頁一頁看完」不靠手算預算保證——本專案的入口文案比設計稿長，在窄裝置上
     會折成兩行，手算一定會漏。改成把兩段大留白做成可壓縮的 .sp spacer，
     空間夠時維持設計稿的 2.44em / 3.56em，不夠時自動收，所以怎麼折行都不會溢出。
     量測值見 docs/figma/palette.md。 */
  --vh-raw:    1vh;       /* app.js 會把 --vh-px 鎖成固定 px，免得鍵盤彈出時整頁跟著縮 */
  --vh-unit:   var(--vh-px, var(--vh-raw));
  --fs:        calc(var(--vh-unit) * 1.9);
  --pad:       1.5625em;  /* 左右內距 25pt */
  --col:       23.44em;   /* 欄寬 375pt */
  --radius:    12px;
  --gap:       14px;
  --shadow:    0 2px 10px rgba(4, 28, 67, .06);
  --shadow-lg: 0 10px 36px rgba(4, 28, 67, .14);
}

/* 極端視窗的上下限保護 */
:root { --fs: clamp(13px, calc(var(--vh-unit) * 1.9), 48px); }
/* iOS Safari 的 vh 含被工具列遮住的部分，有 dvh 就用 dvh */
@supports (height: 100dvh) { :root { --vh-raw: 1dvh; } }
/* 手機上欄寬直接吃滿，不留兩側白邊 */
@media (max-width: 700px) { :root { --col: 100%; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 作者樣式的 display 會蓋掉瀏覽器對 hidden 屬性的預設 display:none，
   所以這裡明確宣告一次——語音浮層與麥克風鈕都靠 hidden 收合。 */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-size: var(--fs);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.62;
}

button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }

/* ───────────────────────────── 版面骨架 ───────────────────────────── */

/* 設計稿只有單欄的手機版面，所以直放橫放都用同一套：內容限欄寬置中。 */
.app { display: flex; justify-content: center; height: 100%; background: var(--sky-soft); }

.chat {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; max-width: var(--col); height: 100%;
  background: var(--card);
  position: relative;
}
@media (min-width: 701px) { .chat { box-shadow: 0 0 60px rgba(4, 28, 67, .08); } }

/* ───────────────────────────── 桌機展示版面 ─────────────────────────────
   只在「有滑鼠的橫向大視窗」生效：展場的 65 吋是直立（portrait）、
   iPad 是觸控（pointer: coarse），兩者都不會套到，維持 Figma 的單欄。   */

.stage { display: none; }

@media (min-width: 1000px) and (orientation: landscape) and (pointer: fine) {
  .app {
    align-items: center; gap: 4vw;
    background:
      radial-gradient(120% 90% at 78% 12%, rgba(24,119,255,.12), transparent 62%),
      radial-gradient(90% 70% at 8% 88%, rgba(255,131,62,.09), transparent 58%),
      linear-gradient(152deg, #061A38 0%, #0B2A57 46%, #0E3E7E 100%);
  }

  /* 手機畫面維持設計稿的 375×812 比例，做成一台置中的裝置 */
  .chat {
    flex: none;
    height: 88vh; max-height: 980px;
    aspect-ratio: 375 / 812;
    width: auto; max-width: none;
    border-radius: 2.2rem;
    box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
  }
  /* 裝置變矮了，字級跟著收一點，維持「首頁一頁看完」的比例 */
  :root { --vh-unit: calc(var(--vh-px, var(--vh-raw)) * .88); }

  .stage {
    display: flex; flex-direction: column;
    width: min(30rem, 30vw); color: #fff;
    animation: rise .5s both;
  }
  .stage-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 3.5rem; }
  .kgi-mark {
    width: 2rem; height: 2rem; flex: none;
    display: grid; grid-template: 1fr 1fr / 1fr 1fr;
    transform: rotate(45deg); border-radius: .2rem; overflow: hidden;
  }
  .kgi-mark i:nth-child(1) { background: #E8B300; }
  .kgi-mark i:nth-child(2) { background: #0A66B0; }
  .kgi-mark i:nth-child(3) { background: #E2571E; }
  .kgi-mark i:nth-child(4) { background: #1FA463; }
  .stage-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
  .stage-brand-text b { font-size: 1rem; letter-spacing: .24em; }
  .stage-brand-text small { font-size: .62rem; opacity: .6; letter-spacing: .18em; }

  .stage-title {
    font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 700;
    margin: 0 0 .3rem; letter-spacing: .04em;
  }
  .stage-sub { margin: 0 0 2.6rem; font-size: .95rem; opacity: .6; letter-spacing: .14em; }

  .stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
  .stage-list li {
    display: flex; gap: .9rem; align-items: flex-start;
    padding-left: 1rem; border-left: 2px solid rgba(255,255,255,.16);
    animation: rise .5s both;
  }
  .stage-list li:nth-child(1) { animation-delay: .06s; border-left-color: #1877FF; }
  .stage-list li:nth-child(2) { animation-delay: .12s; border-left-color: #6EAFFF; }
  .stage-list li:nth-child(3) { animation-delay: .18s; border-left-color: #FF833E; }
  .stage-list li:nth-child(4) { animation-delay: .24s; border-left-color: #BBDDFF; }
  .stage-list li.locked { opacity: .45; border-left-color: rgba(255,255,255,.2) !important; }
  .stage-list .k { font-size: .95rem; font-weight: 600; letter-spacing: .03em; }
  .stage-list .v { font-size: .78rem; opacity: .55; line-height: 1.6; margin-top: .1rem; }
  .stage-list div { display: flex; flex-direction: column; }

  .stage-foot {
    margin: 3.2rem 0 0; font-size: .72rem; opacity: .42; line-height: 1.8;
    display: flex; flex-direction: column;
  }
}

/* ───────────────────────────── 聊天頂欄 ───────────────────────────── */

.chat-head {
  flex: none; display: flex; align-items: center; gap: .5em;
  padding: max(.6em, env(safe-area-inset-top)) var(--pad) .6em;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.chat-head .back, .chat-head .reset {
  width: 2.1em; height: 2.1em; border-radius: 50%; color: var(--ink-2);
  display: grid; place-items: center; flex: none;
}
.chat-head .back:hover, .chat-head .reset:hover { background: var(--sky-soft); color: var(--blue); }
.chat-title { flex: 1; text-align: center; font-weight: 700; letter-spacing: .06em; }

.consent {
  flex: none; margin: 0; padding: .9em var(--pad) 0;
  font-size: .75em; line-height: 1.6; color: var(--ink-note);
}
.consent a, .consent .lnk { color: var(--blue); }

/* ───────────────────────────── 捲動區 ───────────────────────────── */

.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  padding: 0 var(--pad) 1.5em;
  scroll-behavior: smooth;
}
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* 欄寬由 .chat 的 --col 控制，這裡不再另外限寬 */

/* ───────────────────────────── 首頁 ───────────────────────────── */

/* flex:1 讓首頁高度被捲動區框住，裡面的 .sp 才有東西可以壓縮 */
.home { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.home.hide { display: none; }

/* 設計稿的兩段大留白：空間夠就照設計稿，不夠就讓它收 */
.sp { width: 100%; flex: 0 1 auto; }
.sp-top { height: 2.44em; min-height: .8em; }
.sp-mid { height: 3.56em; min-height: 1em; }

.bot-svg, .bot-img { width: 4.75em; height: auto; display: block; }
.bot-svg .eye { animation: blink 4.6s infinite; transform-origin: center; }
@keyframes blink { 0%,92%,100% { transform: scaleY(1);} 95% { transform: scaleY(.12);} }

.home-greeting {
  font-size: 1.5em; font-weight: 700; color: var(--navy);
  margin: .87em 0 .7em; letter-spacing: .02em; text-align: center;
}
.home-sub {
  margin: 0 0 3.56em; color: var(--navy); font-size: 1em;
  text-align: center; max-width: 18em; line-height: 1.65;
}

/* 設計稿的入口是一行文字＋下緣分隔線＋右箭頭，沒有卡片也沒有編號圓 */
.entries { width: 100%; flex: none; display: flex; flex-direction: column; }
.entry {
  display: flex; align-items: center; gap: .8em; width: 100%;
  flex: none;
  padding: .94em 0; text-align: left; line-height: 1.5;
  color: var(--navy); background: none;
  border-bottom: 1px solid var(--line);
  transition: color .16s;
}
.entry:hover { color: var(--blue); }
/* 尚未開放：照規格書留在畫面上，但淡一階，點了會說明 */
.entry.locked { color: var(--ink-3); }
.entry.locked:hover { color: var(--ink-2); }
.entry.locked .chev { opacity: .45; }
.entry:hover .chev { color: var(--blue); transform: translateX(.25em); }
.entry .t { flex: 1; }
.entry .n { display: none; }
.entry .chev { color: var(--ink-3); flex: none; transition: color .16s, transform .16s; }

/* ───────────────────────────── 訊息 ───────────────────────────── */

.messages { flex: none; display: flex; flex-direction: column; gap: 1.5em; padding-top: 1em; }
.messages:empty { padding-top: 0; }

.msg { display: flex; flex-direction: column; animation: rise .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.msg.user { align-items: flex-end; }
.msg.user .bubble {
  background: var(--sky-soft); color: var(--navy);
  padding: .7em 1.1em; border-radius: .6em;
  max-width: 84%;
}

.msg.bot .bubble { width: 100%; }
.bubble p { margin: 0 0 .55em; white-space: pre-wrap; }
.bubble p:last-child { margin-bottom: 0; }
.bubble .li { padding-left: 1.15em; text-indent: -1.15em; }

/* 打字游標 */
.caret {
  display: inline-block; width: .5em; height: 1.05em; vertical-align: -.16em;
  background: var(--blue); margin-left: .12em; border-radius: 1px;
  animation: caret .9s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* 思考中：設計稿是三顆藍點加一行灰字，沒有頭像 */
.thinking { display: flex; align-items: center; gap: .55em; color: var(--ink-3); font-size: .95em; }
.thinking .av { display: flex; align-items: center; gap: .22em; flex: none; }
.thinking .av i {
  width: .38em; height: .38em; border-radius: 50%; background: var(--blue);
  animation: dots 1.15s ease-in-out infinite;
}
.thinking .av i:nth-child(1) { animation-delay: 0s; }
.thinking .av i:nth-child(2) { animation-delay: .16s; }
.thinking .av i:nth-child(3) { animation-delay: .32s; }
@keyframes dots {
  0%, 100% { opacity: .28; transform: translateY(0) scale(.85); }
  45%      { opacity: 1;   transform: translateY(-.22em) scale(1.1); }
}

/* ───────────────────────────── 延伸問題 ───────────────────────────── */

.suggests { margin-top: 1.3em; }
.suggests h4 {
  margin: 0 0 .2em; font-size: 1em; color: var(--navy); font-weight: 700;
}
.suggests button {
  display: flex; align-items: center; justify-content: space-between; gap: .6em;
  width: 100%; text-align: left; line-height: 1.62;
  padding: .94em 0; color: var(--navy);
  border-bottom: 1px solid var(--line);
  transition: color .16s;
  animation: rise .3s both;
}
.suggests button:hover { color: var(--blue); }
.suggests button:hover .chev { color: var(--blue); transform: translateX(.25em); }
.suggests button .chev { color: var(--ink-3); flex: none; transition: color .16s, transform .16s; }

/* ───────────────────────────── 通用卡片 ───────────────────────────── */

.block { margin-top: .9em; animation: rise .4s both; }
.card {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1em 1.05em;
  box-shadow: var(--shadow);
}
.card-title { font-size: .82em; color: var(--ink-2); margin: 0 0 .7em; letter-spacing: .04em; }
.big-num { font-size: 1.7em; font-weight: 700; color: var(--navy); letter-spacing: .01em; }

/* 甜甜圈 */
.donut-head { text-align: center; margin-bottom: .9em; }
.donut-head small { display: block; font-size: .72em; color: var(--ink-3); }
.donut-head strong { font-size: 1.55em; color: var(--navy); letter-spacing: .01em; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1em; }
.donut { width: 10em; height: 10em; flex: none; position: relative; }
.donut svg { transform: rotate(-90deg); overflow: visible; }
.donut circle { transition: stroke-dasharray .9s cubic-bezier(.2,.8,.3,1); }
.donut-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.donut-center span {
  font-size: .78em; color: var(--ink-2); max-width: 5.6em; line-height: 1.4;
}
.legend { width: 100%; display: flex; flex-direction: column; gap: .55em; }
.legend-row { display: flex; align-items: center; gap: .55em; font-size: .88em; }
.legend-row .dot { width: .72em; height: .72em; border-radius: .2em; flex: none; }
.legend-row .lb { flex: 1; }
.legend-row .vl { font-weight: 600; color: var(--navy); }
.legend-row .pc { color: var(--ink-3); font-size: .88em; min-width: 3.2em; text-align: right; }

/* 分組明細 */
.group + .group { margin-top: .85em; padding-top: .85em; border-top: 1px dashed var(--line); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; }
.group-head .nm { font-weight: 700; color: var(--navy); }
.group-head .am { font-weight: 700; }
.group-head .pc { font-size: .78em; color: var(--ink-3); }
.group-items { margin-top: .5em; display: flex; flex-direction: column; gap: .32em; }
.group-items .row { display: flex; gap: .8em; font-size: .86em; color: var(--ink-2); }
.group-items .row .k { flex: 1; }
.group-items .row .v { font-variant-numeric: tabular-nums; color: var(--ink); }

/* 橫條 */
.bar-row { margin-bottom: .8em; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head { display: flex; justify-content: space-between; font-size: .88em; margin-bottom: .32em; }
.bar-head .v { font-weight: 600; color: var(--navy); }
.bar-track { height: .5em; border-radius: .25em; background: #EAF0FA; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: .25em;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  width: 0; transition: width .9s cubic-bezier(.2,.8,.3,1);
}

/* 優惠清單 */
.benefit { display: flex; gap: .7em; padding: .6em 0; align-items: flex-start; }
.benefit + .benefit { border-top: 1px dashed var(--line); }
.benefit .bn {
  width: 1.45em; height: 1.45em; border-radius: 50%; flex: none; margin-top: .12em;
  background: var(--sky-cta); color: var(--blue);
  display: grid; place-items: center; font-size: .8em; font-weight: 700;
}
.benefit .bt { font-weight: 600; }
.benefit .bc { font-size: .8em; color: var(--ink-2); line-height: 1.6; }

/* 匯率低點卡 */
.fx-cards { display: flex; flex-direction: column; gap: .6em; }
.fx-card { display: flex; align-items: center; gap: .9em; }
.fx-card .code {
  width: 3.1em; height: 3.1em; flex: none; border-radius: calc(var(--radius) * .65);
  background: linear-gradient(150deg, var(--navy), var(--blue)); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .82em; letter-spacing: .03em;
}
.fx-card .mid { flex: 1; min-width: 0; }
.fx-card .nm { font-weight: 600; }
.fx-card .rg { font-size: .74em; color: var(--ink-3); }
.fx-card .spark { width: 5.5em; height: 2.2em; flex: none; }
.fx-card .now { text-align: right; flex: none; }
.fx-card .now b { color: var(--navy); font-variant-numeric: tabular-nums; }
.fx-card .now small { display: block; font-size: .66em; color: var(--blue); }

.pos-scale { height: .34em; border-radius: .17em; background: linear-gradient(90deg, var(--blue), #8FC7FF, var(--orange)); position: relative; margin-top: .3em; }
.pos-scale i { position: absolute; top: 50%; width: .58em; height: .58em; border-radius: 50%; background: #fff; border: 2px solid var(--navy); transform: translate(-50%, -50%); }

/* 折線圖 */
/* 上下各留半行，讓最上與最下的刻度置中對齊格線時不會被切掉 */
.chart-box { position: relative; padding: .6em 0 .6em 3.4em; }
.chart-axis {
  position: absolute; left: 0; top: .6em; width: 3.2em; height: 11em;
  font-size: .68em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.chart-axis span {
  position: absolute; right: .5em; transform: translateY(-50%);
  white-space: nowrap;
}
.chart { width: 100%; height: 11em; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .area { fill: url(#gradBlue); }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot-now { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.chart-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .74em; color: var(--ink-3); margin-top: .5em;
}
.chart-foot .hl { color: var(--ink-2); }

/* 匯率牌 */
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.rate-cell { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) * .6); padding: .6em .75em; }
.rate-cell small { font-size: .72em; color: var(--ink-3); display: block; }
.rate-cell b { font-size: 1.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.rate-cell.hl { background: var(--sky-cta); box-shadow: inset 0 0 0 1px var(--blue); }

/* 換匯試算 */
.convert { display: flex; align-items: center; gap: .8em; }
.convert .side { flex: 1; text-align: center; }
.convert .side small { font-size: .74em; color: var(--ink-3); display: block; }
.convert .side b { font-size: 1.22em; color: var(--navy); }
.convert .arrow { color: var(--sky); flex: none; }
.convert-note { margin-top: .7em; font-size: .76em; color: var(--ink-3); text-align: center; }

/* 利率級距 */
.tier { display: flex; align-items: center; gap: .8em; padding: .6em 0; }
.tier + .tier { border-top: 1px dashed var(--line); }
.tier .rt { font-size: 1.5em; font-weight: 700; color: var(--ink-2); min-width: 3.4em; font-variant-numeric: tabular-nums; }
.tier.hl .rt { color: var(--orange-2); }
.tier .mid { flex: 1; }
.tier .lb { font-weight: 600; }
.tier .cap { font-size: .78em; color: var(--ink-3); }
.tier .badge {
  font-size: .66em; padding: .18em .6em; border-radius: 1em;
  background: var(--orange); color: #fff; font-weight: 700; white-space: nowrap;
}
.tier-foot { margin-top: .7em; font-size: .76em; color: var(--ink-3); line-height: 1.55; }

/* 表格（利率、回饋） */
.tbl { width: 100%; border-collapse: collapse; font-size: .82em; }
.tbl th, .tbl td { padding: .5em .6em; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { background: var(--navy); color: #fff; font-weight: 600; font-size: .92em; }
.tbl th:first-child { border-radius: .5em 0 0 0; }
.tbl th:last-child { border-radius: 0 .5em 0 0; }
.tbl td { font-variant-numeric: tabular-nums; }
.tbl tr.hl td { background: var(--sky-soft); font-weight: 600; }
.tbl-wrap { overflow-x: auto; }

/* 任務清單 */
.task { display: flex; gap: .7em; padding: .6em 0; align-items: flex-start; }
.task + .task { border-top: 1px dashed var(--line); }
.task .ck {
  width: 1.45em; height: 1.45em; border-radius: 50%; flex: none; margin-top: .12em;
  background: var(--sky-soft); color: var(--blue);
  display: grid; place-items: center; font-size: .8em; font-weight: 700;
}
.task .tt { font-weight: 600; }
.task .dd { font-size: .76em; color: var(--ink-3); margin-top: .2em; line-height: 1.55; display: none; }
.task.open .dd { display: block; }
.task .more { font-size: .72em; color: var(--sky); }

/* 時間軸 */
.timeline { position: relative; padding: 1.4em 0 .5em; }
.tl-track { height: .42em; border-radius: .21em; background: linear-gradient(90deg, var(--sky), var(--blue)); position: relative; }
.tl-track .pin { position: absolute; top: -1.55em; transform: translateX(-50%); text-align: center; font-size: .72em; color: var(--navy); white-space: nowrap; }
.tl-track .pin::after { content: ""; display: block; width: .5em; height: .5em; border-radius: 50%; background: var(--navy); margin: .2em auto 0; }
.tl-ex { margin-top: 1.1em; display: flex; flex-direction: column; gap: .45em; }
.tl-ex div { font-size: .82em; color: var(--ink-2); padding-left: 1em; text-indent: -1em; }

/* 信用卡促案 */
.cards-row { display: flex; gap: .7em; margin-bottom: .8em; }
.credit-face {
  flex: 1; aspect-ratio: 1.58; border-radius: calc(var(--radius) * .6);
  display: flex; align-items: flex-end; padding: .6em;
  color: #fff; font-size: .74em; font-weight: 600;
  box-shadow: var(--shadow);
}
.credit-face.green { background: linear-gradient(145deg, #2F4F3E, #1E3A2C); }
.credit-face.red   { background: linear-gradient(145deg, #A33B22, #6E2414); }
.gift-row { display: flex; gap: .5em; margin-top: .7em; }
.gift {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) * .55);
  padding: .6em .4em; text-align: center; font-size: .72em; color: var(--ink-2); line-height: 1.45;
}
.notes { margin-top: .8em; font-size: .72em; color: var(--ink-3); line-height: 1.6; }
.notes div { padding-left: 1em; text-indent: -1em; }

/* 停車 */
.parking-hl {
  background: linear-gradient(135deg, var(--blue), var(--sky)); color: #fff;
  border-radius: calc(var(--radius) * .7); padding: .8em 1em; font-weight: 700; text-align: center;
}
.store-chips { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .8em; }
.chip { font-size: .74em; padding: .3em .75em; border-radius: 1em; background: var(--sky-soft); color: var(--navy); }

/* 商品卡 */
.products { display: flex; flex-direction: column; gap: .6em; }
.prod {
  border: 1px solid var(--line); border-radius: calc(var(--radius) * .8);
  padding: .8em .9em; background: var(--card-2);
  transition: border-color .16s, box-shadow .16s;
}
.prod:hover { border-color: var(--sky); box-shadow: var(--shadow); }
.prod-top { display: flex; align-items: flex-start; gap: .6em; }
.prod-kind {
  font-size: .66em; font-weight: 700; padding: .18em .55em; border-radius: .4em; flex: none;
  background: var(--sky-cta); color: var(--blue);
}
.prod-kind.bond { background: #FFEEE4; color: #C2521A; }
.prod-name { flex: 1; font-weight: 600; font-size: .92em; line-height: 1.45; }
.prod-cur { font-size: .72em; color: var(--ink-3); flex: none; font-weight: 600; }
.prod-facts { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .6em; }
.fact { background: var(--sky-soft); border-radius: .5em; padding: .35em .6em; font-size: .74em; }
.fact b { color: var(--navy); font-variant-numeric: tabular-nums; }
.fact small { color: var(--ink-3); margin-right: .35em; }
.prod-tags { display: flex; gap: .35em; margin-top: .5em; flex-wrap: wrap; }
.tag { font-size: .68em; padding: .18em .55em; border-radius: .4em; background: var(--sky-soft); color: var(--ink-2); }
/* 風險標籤：基金是客戶的 P1～P4 分級（class 會被空格拆成「P2」「穩健型」兩個），
   債券沿用「穩健／積極」。由低風險到高風險：綠 → 黃 → 橘 → 紅。 */
.tag.P1, .tag.保守型 { background: #E7F6EE; color: var(--green); }
.tag.P2, .tag.穩健型, .tag.穩健 { background: #E7F6EE; color: var(--green); }
.tag.P3, .tag.成長型 { background: #FFF6E0; color: #A97A00; }
.tag.P4, .tag.積極型, .tag.積極 { background: #FFEEE4; color: var(--orange-2); }
.tag.中等 { background: #FFF6E0; color: #A97A00; }
.prod-feat { margin-top: .5em; font-size: .76em; color: var(--ink-2); line-height: 1.6; }

/* 比較表 */
.cmp { width: 100%; border-collapse: collapse; font-size: .82em; }
.cmp th { background: var(--navy); color: #fff; padding: .55em; }
.cmp th:first-child { background: var(--navy-2); }
.cmp td { padding: .55em; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp td:first-child { color: var(--ink-3); font-size: .92em; white-space: nowrap; }

/* CTA */
/* 設計稿的「前往使用」是淺藍底、藍字的膠囊，不是實心深藍 */
.cta { margin-top: .9em; }
.cta button {
  background: var(--sky-cta); color: var(--blue);
  padding: .65em 1.5em; border-radius: 2em; font-weight: 600;
  transition: background .16s;
}
.cta button:hover { background: #C8DEFF; }
.cta small { display: block; margin-top: .5em; font-size: .72em; color: var(--ink-3); }

/* 問卷 QR */
.survey {
  margin-top: 1.1em; padding: 1.1em; border-radius: var(--radius);
  background: var(--sky-soft);
  border: 1px solid var(--line); text-align: center;
}
.survey p { margin: 0 0 .8em; font-size: .86em; color: var(--navy); }
.qr {
  width: 10em; height: 10em; margin: 0 auto; border-radius: .6em; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
  padding: .55em;                      /* QR 四周要留白邊，鏡頭才對得到焦 */
}
.qr img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr.empty {
  color: var(--ink-3); font-size: .74em; text-align: center;
  line-height: 1.5; white-space: pre-line; padding: .8em;
}
.survey small { display: block; margin-top: .7em; font-size: .72em; color: var(--ink-3); }

/* ───────────────────────────── 輸入列 ───────────────────────────── */

.composer {
  flex: none; display: flex; align-items: center; gap: .6em;
  padding: .7em var(--pad) calc(.7em + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--card);
}
/* 設計稿的輸入框是淺藍底圓角矩形，不是膠囊 */
.input {
  flex: 1; min-width: 0; border: 1px solid transparent; background: var(--sky-soft);
  border-radius: .5em; padding: .8em 1.1em; outline: none; color: var(--navy);
  transition: border-color .16s, background .16s;
}
.input:focus { border-color: var(--blue); background: #fff; }
.input::placeholder { color: var(--ink-3); }
.composer .send, .composer .mic {
  width: 2.7em; height: 2.7em; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.composer .send { background: var(--blue); color: #fff; }
.composer .send svg { width: 1.1em; height: 1.1em; }
.composer .send:disabled { background: var(--disabled); }
.composer .mic { background: var(--sky-soft); color: var(--ink-2); }
.composer .mic.rec { background: var(--red); color: #fff; border-color: var(--red); animation: pulse 1.3s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(208,69,59,.45);} 50% { box-shadow: 0 0 0 .55em rgba(208,69,59,0);} }

/* ───────────────────────────── 語音浮層 ───────────────────────────── */

.voice-sheet {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(4,28,67,.45); backdrop-filter: blur(3px);
  display: grid; place-items: end center; padding: 1.2em;
  animation: fade .2s both;
}
@keyframes fade { from { opacity: 0; } }
.voice-card {
  width: 100%; max-width: 34rem; background: #fff; border-radius: var(--radius);
  padding: 1.3em; box-shadow: var(--shadow-lg); animation: rise .28s both;
}
.voice-wave { display: flex; align-items: center; justify-content: center; gap: .3em; height: 2.6em; }
.voice-wave i {
  width: .34em; border-radius: .17em; background: var(--blue);
  animation: wave 1s ease-in-out infinite;
}
.voice-wave i:nth-child(1) { height: 30%; animation-delay: 0s; }
.voice-wave i:nth-child(2) { height: 62%; animation-delay: .12s; }
.voice-wave i:nth-child(3) { height: 100%; animation-delay: .24s; }
.voice-wave i:nth-child(4) { height: 62%; animation-delay: .36s; }
.voice-wave i:nth-child(5) { height: 30%; animation-delay: .48s; }
@keyframes wave { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.voice-hint { text-align: center; color: var(--ink-3); font-size: .82em; margin: .3em 0 .8em; }
.voice-text {
  width: 100%; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7);
  padding: .7em .9em; resize: none; outline: none; background: var(--sky-soft);
}
.voice-text:focus { border-color: var(--blue); background: #fff; }
.voice-actions { display: flex; gap: .6em; margin-top: .9em; }
.btn { flex: 1; padding: .7em; border-radius: 2em; font-weight: 700; }
.btn.ghost { background: var(--sky-soft); color: var(--ink-2); }
.btn.primary { background: var(--blue); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}