/* 阿福（ALF）視覺系統
 *
 * 設計參考：emergent.sh 的對話式入口（分析報告見 docs/research/emergent-ui-分析.md）——
 * 淺色白底、克制留白、單一強調色、pill 圓角、雙層圓角輸入卡配多層柔和陰影、
 * 用「建議 chips」引導開場、AI 動作以獨立狀態列呈現（不混進對話氣泡）。
 * 差異：強調色改用 ACpay 品牌色（teal→blue 漸層）——阿福是 ACpay 的子品牌不是獨立產品；
 * logo 一律用官方 PNG 圖檔（assets/brand/），不用文字排版假裝 logo。
 *
 * 版面有兩種模式（2026-08-04 改版，Tesla 嫌開場一片死白）：
 *   開場（body 沒有 .started）：hero 置中——icon＋標題＋輸入卡＋建議題群聚在畫面中央，
 *     像 emergent / ChatGPT 的空狀態；.chat 隱藏。
 *   對話（body.started）：hero 收起，恢復「訊息流＋底部輸入卡」的傳統聊天版面。
 *   切換由 chat.js 的 addMsg() 加上 .started（第一則訊息或載入歷史都會觸發）。
 */

:root {
  /* ACpay 品牌色（見 claude-config/ACpay_company_data.md 品牌規範） */
  --teal: #13B0B6;
  --blue: #2563B5;
  --brand-gradient: linear-gradient(96deg, #15CDCA 0%, #3D4FD4 100%);

  --bg: #FFFFFF;
  --bg-soft: #F7F9FB;
  --text-primary: #0B1220;
  --text-secondary: #5A6B7C;
  --text-muted: #8A99A8;

  --chip-bg: rgba(255, 255, 255, .72);
  --chip-border: #E2EAF2;
  --chip-text: #41576B;

  --card-border: rgba(11, 18, 32, .10);
  --hairline: #E9EEF3;

  --radius-card-inner: 16px;
  --radius-pill: 160px;
  --radius-chip: 40px;

  --shadow-card:
    0 1px 2px rgba(11, 18, 32, .04),
    0 8px 24px rgba(37, 99, 181, .07),
    0 24px 48px -12px rgba(19, 176, 182, .10);
  --shadow-bubble: 0 1px 3px rgba(11, 18, 32, .04);

  --font-system: -apple-system, "system-ui", "Segoe UI", "PingFang TC",
    "Noto Sans TC", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 860px;
}

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

body {
  font-family: var(--font-system);
  color: var(--text-primary);
  /* 極淡的品牌色暈染：白底不死白，捲動時漸層固定不跟著跑 */
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(21, 205, 202, .10), transparent 62%),
    radial-gradient(900px 460px at 88% -4%, rgba(61, 79, 212, .07), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 頁首：ACpay logo（官方圖檔）＋服務名 ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(233, 238, 243, .9);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* 官方 PNG（透明底）：固定高度、寬度自適應，不變形也不重上色 */
.brand-logo { height: 22px; width: auto; display: block; flex: none; }
.brand-divider { width: 1px; height: 18px; background: var(--hairline); flex: none; }

.brand-name { font-size: 16px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.brand-sub {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: rgba(255, 255, 255, .7);
  transition: border-color .15s, color .15s;
}
.help-link:hover { color: var(--text-primary); border-color: var(--card-border); }

/* ---------- 開場 hero（body 尚未 .started 時的置中歡迎區） ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-height: 0;
  text-align: center;
  padding: 24px 20px 22px;
}

.hero-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 16px rgba(37, 99, 181, .22));
}

.hero-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}
.hero-grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub,
.hero-note {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 34em;
  white-space: pre-line; /* 租戶頁的身分狀態訊息帶換行 */
}

/* 開場模式的版面：hero → 輸入卡 → 建議題，整組群聚在畫面中央偏上 */
body:not(.started) .chat { display: none; }
body:not(.started) .composer-wrap { order: 1; }
body:not(.started) .suggestions {
  order: 2;
  justify-content: center;
  margin-top: 14px;
}
body:not(.started)::after { content: ''; order: 3; flex: 1.25 1 0; }

/* 對話模式：hero 收起，回到訊息流＋底部輸入卡 */
body.started .hero { display: none; }
body.started::after { content: none; }

/* ---------- 對話區 ---------- */

.chat {
  flex: 1;
  overflow-y: auto;
  padding: 28px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.msg { display: flex; }
.msg.user { justify-content: flex-end; }

.bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: var(--radius-card-inner);
  line-height: 1.75;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-bubble);
}

/* 使用者訊息：品牌漸層、右對齊、右下收角（對話方向感） */
.msg.user .bubble {
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px rgba(37, 99, 181, .22);
}
.msg.assistant .bubble { border-bottom-left-radius: 6px; }

/* 思考中：三點呼吸動畫（比轉圈更像「在想」，也不會看起來像當機） */
.typing .bubble { display: flex; gap: 5px; align-items: center; min-height: 44px; }
.typing .bubble .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
  animation: alf-blink 1.3s infinite ease-in-out;
}
.typing .bubble .dot:nth-child(2) { animation-delay: .18s; }
.typing .bubble .dot:nth-child(3) { animation-delay: .36s; }
@keyframes alf-blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* 工具執行狀態列：AI「做了什麼」跟「說了什麼」分開呈現（emergent 的關鍵做法） */
.sys-line {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-chip);
  padding: 6px 14px;
  max-width: 92%;
  text-align: center;
}
.sys-line::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  flex: none;
}
.sys-line.error { color: #9B2C2C; background: #FEF2F2; border-color: #FCD9D9; }
.sys-line.error::before { background: #D64545; }

/* 開場建議 chips：降低「不知道能問什麼」的門檻 */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: var(--container);
  margin: 4px auto 0;
  padding: 0 20px;
}
/* 同 .composer[hidden] 的理由：display:flex 特異度蓋過瀏覽器對 [hidden] 的預設，
   沒這條「點過建議題收起整排」會失效（2026-08-04 實測抓到）。 */
.suggestions[hidden] { display: none; }
.suggestion {
  font: inherit;
  font-size: 13px;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-chip);
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .03);
  transition: border-color .15s, transform .15s, color .15s, box-shadow .15s;
}
.suggestion:hover {
  color: var(--text-primary);
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(19, 176, 182, .14);
}

/* ---------- 輸入卡（圓角＋多層柔和陰影） ---------- */

.composer-wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 20px 22px;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 12px 12px 12px 18px;
  box-shadow: var(--shadow-card);
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within {
  border-color: var(--teal);
  box-shadow:
    0 0 0 3px rgba(21, 205, 202, .14),
    var(--shadow-card);
}
/* .composer 的 display:flex 特異度高過瀏覽器對 [hidden] 的預設 display:none——
   沒有這條，身分尚未確立（例如連結過期）時輸入框仍會出現。 */
.composer[hidden] { display: none; }

.composer textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  padding: 6px 0;
  max-height: 160px;
  color: var(--text-primary);
}
.composer textarea::placeholder { color: var(--text-muted); }

/* 送出鍵：品牌漸層圓形＋SVG 箭頭（阿福的主動作就該是品牌色，不用黑） */
.composer button {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(37, 99, 181, .28);
  transition: opacity .15s, transform .15s, box-shadow .15s;
}
.composer button svg { width: 18px; height: 18px; display: block; }
.composer button:hover:not(:disabled) {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(37, 99, 181, .34);
}
.composer button:disabled { opacity: .35; cursor: default; box-shadow: none; }

.composer-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ---------- 使用說明頁 ---------- */

.guide {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  line-height: 1.9;
  overflow-y: auto;
}
.guide h1 { font-size: 24px; margin-bottom: 6px; letter-spacing: -.01em; }
.guide .lead { color: var(--text-secondary); font-size: 15px; margin-bottom: 24px; }
.guide h2 {
  font-size: 16px;
  margin: 28px 0 8px;
  padding-left: 11px;
  border-left: 3px solid var(--teal);
}
.guide p { font-size: 15px; margin-bottom: 10px; }
.guide .note {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card-inner);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

.error-note { text-align: center; color: #9B2C2C; font-size: 13px; padding: 4px; }

/* 動態偏好：關閉裝飾性動畫（thinking 三點保留透明度變化、拿掉位移） */
@media (prefers-reduced-motion: reduce) {
  .suggestion, .composer button { transition: none; }
  .suggestion:hover, .composer button:hover:not(:disabled) { transform: none; }
  @keyframes alf-blink {
    0%, 60%, 100% { opacity: .25; transform: none; }
    30% { opacity: 1; transform: none; }
  }
}

@media (max-width: 640px) {
  .chat { padding: 20px 14px 6px; }
  .composer-wrap { padding: 12px 14px 18px; }
  .suggestions { padding: 0 14px; }
  .bubble { max-width: 88%; font-size: 14.5px; }
  .brand-sub { display: none; }
  .hero { padding: 16px 16px 14px; }
  .hero-icon { width: 46px; height: 46px; margin-bottom: 14px; }
  .hero-title { font-size: 26px; }
  .hero-sub, .hero-note { font-size: 14px; }
  body:not(.started)::after { flex: 1 1 0; }
}