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

/* ===== 基礎（管理後台沿用淺色主題） ===== */
body {
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  background: #f4f6f8; color: #1f2937; min-height: 100vh;
  display: flex; flex-direction: column;
}
header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px; background: #ffffff; border-bottom: 1px solid #e5e7eb;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 18px; font-weight: 700; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; display: inline-block; }
.dot.open { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.dot.closed { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: #6b7280; }
.hidden { display: none !important; }

/* ===== 學生端：亮色系（文學院・宣紙風格） ===== */
.chat-app { background: #f6f2ea; color: #332d24; }

/* 登入頁 */
.chat-app .login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.chat-app .login-card {
  background: #fffdf8; border: 1px solid #e5dcc8; border-radius: 20px; padding: 38px 30px;
  width: 100%; max-width: 400px; text-align: center; box-shadow: 0 18px 45px rgba(90, 70, 40, .12);
}
.chat-app .login-card .logo {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px;
  background: linear-gradient(135deg, #a63d2f, #c0532f); color: #fffdf8;
  font-size: 28px; display: flex; align-items: center; justify-content: center;
}
.chat-app .login-card h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: #332d24; }
.chat-app .login-card .sub { color: #948a76; font-size: 13px; margin-bottom: 24px; }
.chat-app .login-card input {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #d9cfba;
  background: #fffdf8; color: #332d24; font-size: 16px; text-align: center; outline: none;
}
.chat-app .login-card input:focus { border-color: #a63d2f; box-shadow: 0 0 0 3px rgba(166,61,47,.10); }
.chat-app .login-card input::placeholder { color: #b3a990; }
.chat-app .login-error { color: #a63d2f; font-size: 13px; margin-top: 12px; }
.chat-app .login-card button {
  width: 100%; margin-top: 16px; padding: 13px; border: none; border-radius: 12px;
  background: #a63d2f; color: #fffdf8;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.chat-app .login-card button:hover { background: #8f3327; }
.chat-app .login-card button:disabled { opacity: .55; cursor: not-allowed; }
.chat-app .login-card .hint { color: #a89e89; font-size: 12px; margin-top: 16px; }

/* 對話頁 */
.chat-app .chat-wrap {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 880px; margin: 0 auto;
}
.chat-app .chat-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: rgba(255, 253, 248, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5dcc8; flex-shrink: 0;
}
.chat-app .chat-header .brand { flex: 1; }
.chat-app .chat-header .brand h1 { font-size: 16px; font-weight: 600; color: #332d24; }
.chat-app .chat-header .meta { align-items: flex-end; font-size: 12px; color: #948a76; line-height: 1.5; }
.chat-app .chat-header .switch-btn {
  background: #f1ead9; color: #6b5f48; border: 1px solid #d9cfba; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.chat-app .chat-header .switch-btn:hover { background: #e9e0cb; }
.chat-app .identity-chip {
  background: #f1ead9; border: 1px solid #d9cfba; color: #6b5f48;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; flex-shrink: 0;
}
.chat-app .chat-main { flex: 1 1 auto; overflow-y: auto; padding: 22px 18px 14px; min-height: 0; }
.chat-app #chat { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.chat-app .bubble {
  max-width: 84%; padding: 10px 15px; border-radius: 14px; font-size: 15px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.chat-app .bubble.user {
  align-self: flex-end; background: #3d5a80; color: #f5f8fc; border-bottom-right-radius: 4px;
}
.chat-app .bubble.assistant {
  align-self: flex-start; background: #fffdf8; color: #332d24;
  border: 1px solid #e5dcc8; border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(90, 70, 40, .06);
}
.chat-app .composer-wrap {
  position: relative; z-index: 10;
  border-top: 1px solid #e5dcc8; padding: 12px 18px 8px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(246,242,234,0) 0%, #f6f2ea 45%);
}
.chat-app .detail-bar { max-width: 780px; margin: 0 auto 10px; display: flex; align-items: center; gap: 8px; }
.chat-app .detail-label { font-size: 12px; color: #948a76; }
.chat-app .detail-btn {
  background: #f1ead9; color: #6b5f48; border: 1px solid #d9cfba; border-radius: 999px;
  padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.chat-app .detail-btn:hover { background: #e9e0cb; }
.chat-app .detail-btn.active { background: #a63d2f; color: #fffdf8; border-color: #a63d2f; }
.chat-app .composer {
  max-width: 780px; margin: 0 auto; display: flex; gap: 12px; align-items: flex-end;
  background: #fffdf8; border: 1px solid #ddd2bd; border-radius: 20px; padding: 13px 15px;
  box-shadow: 0 8px 24px rgba(90, 70, 40, .10);
}
.chat-app .composer textarea {
  flex: 1; border: none; outline: none; resize: none; background: transparent; color: #332d24;
  font-size: 16px; font-family: inherit; min-height: 50px; max-height: 180px; line-height: 1.6;
  padding: 6px 2px;
}
.chat-app .composer textarea::placeholder { color: #b3a990; }
.chat-app .composer button {
  width: 46px; height: 46px; border: none; border-radius: 50%; flex-shrink: 0;
  background: #a63d2f; color: #fffdf8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-app .composer button:hover { background: #8f3327; }
.chat-app .composer button:disabled { opacity: .45; cursor: not-allowed; }
.chat-app .disclaimer {
  max-width: 780px; margin: 0 auto; text-align: center; font-size: 11px; color: #a89e89; padding: 8px 12px;
}

/* ===== 金鑰啟用／恢復碼 ===== */
.chat-app .login-card .hint { margin-top: 14px; font-size: 12px; color: #948a76; }
.chat-app .login-card .hint a { color: #a63d2f; text-decoration: none; border-bottom: 1px dashed #c8b99c; }
.chat-app .login-card .hint a:hover { border-bottom-style: solid; }
.chat-app .recovery-box {
  text-align: left; background: #f6f0e1; border: 1px dashed #c8b99c; border-radius: 12px;
  padding: 14px 16px; font-size: 14px; color: #5d5340; line-height: 2;
}
.chat-app .recovery-box span { font-weight: 700; color: #332d24; letter-spacing: .06em; }
.chat-app .recovery-box .recovery-note {
  margin-top: 8px; line-height: 1.6; font-size: 12px; color: #a63d2f;
}



/* =======================================================
   v2 實作：信任元件（來源卡/建議問題/拒絕卡）＋呼吸美學
   ======================================================= */

/* 色票：開放狀態改松綠、警示改赭紅（取代泛用綠/紅） */
.chat-app .dot.open { background: #4a7c59; box-shadow: 0 0 0 3px rgba(74,124,89,.18); }
.chat-app .dot.closed { background: #b4533f; box-shadow: 0 0 0 3px rgba(180,83,63,.15); }

/* 標題字體：一點明體書卷氣（本機宋體堆疊，零外部依賴） */
.chat-app .brand h1,
.chat-app .login-card h1,
.chat-app .guide-title,
.chat-app .source-card summary,
.chat-app .suggest-card {
  font-family: "Songti TC", "Noto Serif TC", "STSong", "SimSun", serif;
}

/* 額度進度條 */
.chat-app .quota-box {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 12px; color: #948a76; flex-shrink: 0;
}
.chat-app .quota-bar { width: 96px; height: 6px; border-radius: 999px; background: #e9e0cb; overflow: hidden; }
.chat-app .quota-fill { height: 100%; width: 0%; border-radius: 999px; background: #4a7c59; transition: width .3s ease, background .3s ease; }
.chat-app .quota-fill.low { background: #b4533f; }

/* 訊息進場：整張卡淡入上移 */
.chat-app .bubble { animation: fadeUp .24s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 思考中：呼吸圓點（吐納節奏） */
.chat-app .bubble.assistant.typing { min-width: 64px; }
.chat-app .typing-dots { display: inline-flex; gap: 6px; align-items: center; padding: 6px 2px; }
.chat-app .typing-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #c8b99c;
  animation: breathe 1.2s ease-in-out infinite;
}
.chat-app .typing-dots i:nth-child(2) { animation-delay: .15s; }
.chat-app .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes breathe {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}


/* 來源卡：出處升級為可展開卡片 */
.chat-app .source-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e5dcc8;
}
.chat-app .source-card { background: #faf5ea; border: 1px solid #e9e0cd; border-radius: 10px; font-size: 13px; color: #5d5340; }
.chat-app .source-card summary {
  padding: 8px 12px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.chat-app .source-card summary::-webkit-details-marker { display: none; }
.chat-app .source-card summary::after { content: "▾"; margin-left: auto; font-size: 11px; color: #a89e89; transition: transform .2s ease; }
.chat-app .source-card[open] summary::after { transform: rotate(180deg); }
.chat-app .source-card.plain { padding: 8px 12px; }
.chat-app .source-excerpt {
  padding: 0 12px 10px; color: #6b5f48; font-size: 12.5px; line-height: 1.8; white-space: pre-wrap;
}

/* 回答動作列：複製／換程度／回報 */
.chat-app .bubble-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.chat-app .action-btn {
  background: none; border: 1px solid #e5dcc8; color: #948a76;
  border-radius: 999px; font-size: 11.5px; padding: 4px 10px; cursor: pointer;
}
.chat-app .action-btn:hover { background: #f1ead9; color: #5d5340; }
.chat-app .report-panel {
  display: flex; gap: 4px; flex-wrap: wrap; width: 100%;
  margin-top: 4px; padding-top: 6px; border-top: 1px dashed #e5dcc8;
}
.chat-app .report-ok { font-size: 12px; color: #4a7c59; padding: 4px 2px; }

/* 拒絕卡：溫柔的「不回答」 */
.chat-app .decline-card { display: flex; flex-direction: column; gap: 8px; }
.chat-app .decline-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #332d24; }
.chat-app .decline-icon { font-size: 18px; }
.chat-app .decline-body { color: #6b5f48; font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
.chat-app .decline-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #948a76; flex-wrap: wrap; }
.chat-app .suggest-inline {
  background: #f6f0e1; border: 1px dashed #c8b99c; color: #a63d2f;
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
}
.chat-app .suggest-inline:hover { border-style: solid; }

/* 窄屏：header 換行、收合次要資訊 */
@media (max-width: 560px) {
  .chat-app .chat-header { flex-wrap: wrap; row-gap: 6px; }
  .chat-app .chat-header #scheduleText { display: none; }
  .chat-app .quota-bar { width: 72px; }
}


/* =======================================================
   v4：單一對話框 — 打字機游標、輸入框內詳細程度、金句泡泡
   ======================================================= */

/* 打字機游標（問候語與導讀共用） */
.chat-app .guide-caret { color: #a63d2f; animation: caretBlink .8s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* 輸入框內的詳細程度小選單（取代原本一整列按鈕） */
.chat-app .detail-wrap { position: relative; flex-shrink: 0; }
.chat-app .detail-toggle {
  border: 1px solid #d9cfba; background: #f1ead9; color: #6b5f48;
  border-radius: 999px; padding: 8px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.chat-app .detail-toggle:hover { background: #e9e0cb; }
.chat-app .detail-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  background: #fffdf8; border: 1px solid #e5dcc8; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(90,70,40,.14); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; min-width: 104px;
}
.chat-app .detail-menu button {
  border: none; background: none; text-align: left; padding: 8px 12px;
  font-size: 13.5px; color: #4a4232; border-radius: 8px; cursor: pointer;
}
.chat-app .detail-menu button:hover { background: #f1ead9; }
.chat-app .detail-menu button.active { background: #a63d2f; color: #fffdf8; }

/* 對話中的金句泡泡（導讀用） */
.chat-app .bubble.assistant.quote-bubble {
  background: #f8f1e2; border-left: 3px solid #a63d2f;
}


/* v5：串流等待回饋 — 階段狀態列 */
.chat-app .stream-status {
  font-size: 12px; color: #948a76; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed #e5dcc8; line-height: 1.6;
}


/* =======================================================
   v6 等待動畫：呼吸圈（氣）＋輪播句子＋串流游標＋送出鍵呼吸
   ======================================================= */

/* 呼吸圈：像吐納般 8 秒一輪（吸→停→吐） */
.chat-app .breath-wrap { position: relative; width: 46px; height: 46px; margin: 6px 2px; }
.chat-app .breath-ring {
  position: absolute; inset: 0; border: 2px solid #c8b99c; border-radius: 50%;
  animation: breatheRing 8s ease-in-out infinite;
}
.chat-app .breath-qi {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Songti TC", "Noto Serif TC", "STSong", "SimSun", serif;
  font-size: 17px; color: #a63d2f; animation: breatheQi 8s ease-in-out infinite;
}
@keyframes breatheRing {
  0% { transform: scale(.78); opacity: .3; }
  42% { transform: scale(1.12); opacity: .9; }
  58% { transform: scale(1.12); opacity: .9; }
  100% { transform: scale(.78); opacity: .3; }
}
@keyframes breatheQi { 0%, 100% { opacity: .55; } 42%, 58% { opacity: 1; } }

/* 串流游標 */
.chat-app .stream-caret { color: #a63d2f; animation: caretBlink .8s step-end infinite; margin-left: 1px; }

/* 送出鍵呼吸（回答期間） */
.chat-app .composer button.breathing { animation: btnBreath 2.4s ease-in-out infinite; }
@keyframes btnBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166,61,47,.28); }
  50% { box-shadow: 0 0 0 8px rgba(166,61,47,0); }
}

/* 來源卡收尾淡入 */
.chat-app .source-list { animation: fadeUp .3s ease both; }


/* =======================================================
   v7 視覺 refresh：輕鬆・正向・友好配色 ＋ 字體調整 ＋ 全尺寸適配
   ======================================================= */

/* 新色票：奶油白底、蜜橘珊瑚主色、柔和藍學生氣泡、正向松綠 */
.chat-app {
  background: #fdf9f1; color: #3d362c;
  font-family: "Segoe UI", -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  font-size: 16px;
}
.chat-app .chat-header { background: rgba(255, 254, 251, .88); border-bottom: 1px solid #ecdcc4; }
.chat-app .brand h1 {
  font-family: "Songti TC", "Noto Serif TC", "STSong", "SimSun", serif;
  font-size: 17px; letter-spacing: .03em; color: #3d362c;
}
.chat-app .meta { color: #a08e6f; font-size: 12.5px; }
.chat-app .dot.open { background: #3f8f63; box-shadow: 0 0 0 3px rgba(63,143,99,.16); }
.chat-app .dot.closed { background: #c05a4a; box-shadow: 0 0 0 3px rgba(192,90,74,.14); }
.chat-app .quota-box { color: #a08e6f; font-size: 12.5px; }
.chat-app .quota-bar { background: #ecdcc4; }
.chat-app .quota-fill { background: #3f8f63; }
.chat-app .quota-fill.low { background: #c05a4a; }

/* 訊息氣泡：更輕盈的字與間距 */
.chat-app .bubble { font-size: 16px; line-height: 1.85; }
.chat-app .bubble.user { background: #5b8fb8; color: #fdfcfa; box-shadow: 0 3px 10px rgba(91,143,184,.25); }
.chat-app .bubble.assistant { background: #fffefb; border: 1px solid #ecdcc4; color: #3d362c; box-shadow: 0 2px 10px rgba(120, 96, 50, .05); }
.chat-app .bubble.assistant.quote-bubble { background: #fdf1e2; border-left: 3px solid #e8795a; }

/* 輸入框與主行動色（蜜橘珊瑚） */
.chat-app .composer { background: #fffefb; border: 1px solid #e6d5ba; box-shadow: 0 8px 24px rgba(120, 96, 50, .08); }
.chat-app .composer textarea { color: #3d362c; font-size: 16.5px; }
.chat-app .composer textarea::placeholder { color: #c0ad88; }
.chat-app .composer button { background: #e8795a; }
.chat-app .composer button:hover { background: #d5663f; }
.chat-app .composer button.breathing { animation: btnBreath 2.4s ease-in-out infinite; }
@keyframes btnBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,121,90,.30); } 50% { box-shadow: 0 0 0 8px rgba(232,121,90,0); } }
.chat-app .detail-toggle { background: #f7efe0; border: 1px solid #e6d5ba; color: #8a7458; }
.chat-app .detail-toggle:hover { background: #f0e5cf; }
.chat-app .detail-menu { background: #fffefb; border: 1px solid #ecdcc4; }
.chat-app .detail-menu button { color: #4a4232; }
.chat-app .detail-menu button:hover { background: #f7efe0; }
.chat-app .detail-menu button.active { background: #e8795a; color: #fffefb; }

/* 等待動畫與小字 */
.chat-app .stream-status { color: #a08e6f; font-size: 12.5px; }
.chat-app .breath-ring { border-color: #dcc59c; }
.chat-app .breath-qi { color: #e8795a; }
.chat-app .guide-caret, .chat-app .stream-caret { color: #e8795a; }

/* 來源卡與動作列 */
.chat-app .source-list { border-top-color: #ecdcc4; }
.chat-app .source-card { background: #fbf6ea; border-color: #ecdcc4; color: #6a5c44; font-size: 13.5px; }
.chat-app .source-card summary::after { color: #b3a284; }
.chat-app .source-excerpt { color: #7a6c52; font-size: 13px; }
.chat-app .action-btn { border-color: #ecdcc4; color: #a08e6f; }
.chat-app .action-btn:hover { background: #f7efe0; color: #6a5c44; }
.chat-app .decline-head { color: #3d362c; }
.chat-app .decline-body { color: #6a5c44; }
.chat-app .suggest-inline { background: #fdf1e2; border-color: #e2b99a; color: #c9633f; }
.chat-app .disclaimer { color: #b3a284; font-size: 11px; }

/* ===== 全尺寸適配 ===== */
/* 手機（≤640px） */
@media (max-width: 640px) {
  .chat-app .chat-header { padding: 10px 12px; gap: 8px; }
  .chat-app .chat-header .meta { font-size: 11px; }
  .chat-app .chat-header #scheduleText { display: none; }
  .chat-app .quota-bar { width: 60px; }
  .chat-app .chat-main { padding: 14px 10px 8px; }
  .chat-app .bubble { max-width: 90%; font-size: 15px; line-height: 1.8; }
  .chat-app .composer-wrap { padding: 10px 10px calc(8px + env(safe-area-inset-bottom)); }
  .chat-app .composer { border-radius: 16px; padding: 10px 12px; gap: 8px; }
  .chat-app .composer textarea { font-size: 16px; min-height: 44px; }
  .chat-app .composer button { width: 42px; height: 42px; }
  .chat-app .detail-toggle { font-size: 12px; padding: 7px 10px; }
  .chat-app .source-card { font-size: 12.5px; }
  .chat-app .disclaimer { font-size: 10.5px; padding: 6px 8px; }
  .chat-app .breath-wrap { width: 40px; height: 40px; }
  .chat-app .bubble-actions .action-btn { padding: 5px 10px; font-size: 11px; }
}
/* 桌機（≥1280px）：稍微放寬閱讀寬度 */
@media (min-width: 1280px) {
  .chat-app .chat-wrap { max-width: 980px; }
  .chat-app .bubble { max-width: 78%; }
  .chat-app .composer, .chat-app .disclaimer { max-width: 900px; }
}


/* =======================================================
   v8 桌機雙欄：左 240px 淺灰章節目錄＋右白底黑字對話（仿此對話介面）
   ======================================================= */

/* 基礎：白底黑字，中性配色 */
.chat-app { background: #ffffff; color: #17181a; font-size: 16px; }
.chat-app .chat-cols { display: flex; flex: 1 1 auto; min-height: 0; }
.chat-app .chat-col-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #ffffff; }

/* 左欄章節目錄：淺灰底 */
.chat-app .chapter-panel {
  display: flex; flex-direction: column; width: 240px; flex-shrink: 0;
  background: #f5f5f7; border-right: 1px solid #e8e8ec; min-height: 0;
}
.chat-app .chapter-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; font-size: 13px; font-weight: 700; color: #6b6b73;
}
.chat-app .chapter-close { border: none; background: none; font-size: 18px; color: #8a8a92; cursor: pointer; display: none; }
.chat-app .chapter-list { flex: 1; overflow-y: auto; padding: 0 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.chat-app .chapter-item {
  text-align: left; border: none; cursor: pointer; background: none;
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  color: #3f3f46; transition: background .15s ease;
}
.chat-app .chapter-item:hover { background: #ebebef; }
.chat-app .chapter-item.active { background: #e2e2e8; color: #17181a; font-weight: 600; }
.chat-app .chapter-empty { padding: 12px 14px; font-size: 12.5px; color: #8a8a92; line-height: 1.7; }

/* Header／主題列：白底黑字 */
.chat-app .chat-header { background: rgba(255,255,255,.92); border-bottom: 1px solid #ececf0; }
.chat-app .brand h1 { color: #17181a; font-size: 17px; font-family: "Songti TC", "Noto Serif TC", "STSong", serif; letter-spacing: .03em; }
.chat-app .meta { color: #6b6b73; }
.chat-app .switch-btn { background: #f0f0f2; border: 1px solid #e0e0e4; color: #3f3f46; }
.chat-app .switch-btn:hover { background: #e6e6ea; }
.chat-app .topic-bar {
  padding: 10px 20px; border-bottom: 1px solid #ececf0; background: #ffffff;
  font-size: 13px; color: #3f3f46; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.chat-app .topic-bar .topic-icon { font-size: 14px; }

/* 額度條中性化 */
.chat-app .quota-box { color: #6b6b73; }
.chat-app .quota-bar { background: #e2e2e8; }
.chat-app .quota-fill { background: #3f8f63; }
.chat-app .quota-fill.low { background: #c05a4a; }
.chat-app .dot.open { background: #3f8f63; }
.chat-app .dot.closed { background: #c05a4a; }

/* 氣泡：使用者＝淺灰底黑字；助手＝白底黑字無框（仿此介面） */
.chat-app .bubble { font-size: 16px; line-height: 1.85; color: #17181a; }
.chat-app .bubble.user { background: #f0f0f2; color: #17181a; box-shadow: none; border-bottom-right-radius: 6px; }
.chat-app .bubble.assistant { background: #ffffff; border: none; color: #17181a; box-shadow: none; padding: 2px 6px; }
.chat-app .bubble.assistant.quote-bubble { background: #f7f7f8; border-left: 3px solid #9a9aa2; }

/* 輸入框：白底、黑按鈕 */
.chat-app .composer { background: #ffffff; border: 1px solid #e0e0e4; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.chat-app .composer textarea { color: #17181a; }
.chat-app .composer textarea::placeholder { color: #a6a6ae; }
.chat-app .composer button { background: #17181a; }
.chat-app .composer button:hover { background: #3a3a40; }
.chat-app .composer button.breathing { animation: btnBreath2 2.4s ease-in-out infinite; }
@keyframes btnBreath2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(23,24,26,.25); } 50% { box-shadow: 0 0 0 8px rgba(23,24,26,0); } }
.chat-app .detail-toggle { background: #f0f0f2; border: 1px solid #e0e0e4; color: #3f3f46; }
.chat-app .detail-menu { background: #ffffff; border: 1px solid #e0e0e4; }
.chat-app .detail-menu button:hover { background: #f0f0f2; }
.chat-app .detail-menu button.active { background: #17181a; color: #ffffff; }

/* 等待動畫中性化 */
.chat-app .stream-status { color: #6b6b73; }
.chat-app .breath-ring { border-color: #c9c9cf; }
.chat-app .breath-qi { color: #17181a; }
.chat-app .guide-caret, .chat-app .stream-caret { color: #17181a; }
.chat-app .typing-dots i { background: #c9c9cf; }

/* 來源卡／動作列中性化 */
.chat-app .source-list { border-top-color: #ececf0; }
.chat-app .source-card { background: #f7f7f8; border-color: #e8e8ec; color: #3f3f46; }
.chat-app .source-excerpt { color: #5c5c64; }
.chat-app .action-btn { border-color: #e0e0e4; color: #6b6b73; }
.chat-app .action-btn:hover { background: #f0f0f2; color: #17181a; }
.chat-app .decline-body { color: #3f3f46; }
.chat-app .suggest-inline { background: #f7f7f8; border-color: #d5d5db; color: #3f3f46; }
.chat-app .disclaimer { color: #a6a6ae; }

/* 手機：左欄變抽屜 */
@media (max-width: 1023px) {
  .chat-app .chapter-panel {
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; z-index: 60;
    width: min(280px, 80vw); box-shadow: 10px 0 32px rgba(0,0,0,.12);
    transform: translateX(-105%); transition: transform .22s ease;
  }
  .chat-app .chapter-panel.open { transform: translateX(0); }
  .chat-app .chapter-close { display: block; }
}
@media (min-width: 1024px) {
  .chat-app #chapterBtn { display: none; }
  .chat-app .chat-wrap { max-width: 1500px; }
  .chat-app .chat-cols { height: 100%; }
  .chat-app .composer, .chat-app .disclaimer { max-width: 920px; }
}


/* v8 補正：輸入區底色與分隔線改中性（舊的米色漸層殘留） */
.chat-app .composer-wrap { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 45%); border-top: 1px solid #ececf0; }
.chat-app .chat-main { background: #ffffff; }
.chat-app .bubble.assistant { border-radius: 12px; }


/* v8.1 修正：輸入區按鈕範圍、手機標題、主題列 */
.chat-app .composer .detail-toggle { background: #f0f0f2; border: 1px solid #e0e0e4; color: #3f3f46; }
.chat-app .composer .detail-toggle:hover { background: #e6e6ea; }

@media (max-width: 640px) {
  .chat-app .chat-header { padding: 8px 12px; gap: 8px; }
  .chat-app .chat-header .brand h1 { font-size: 14.5px; line-height: 1.35; font-weight: 600; }
  .chat-app .chat-header .meta { font-size: 10.5px; }
  .chat-app .chat-header .meta #scheduleText { display: none; }
  .chat-app .quota-box { font-size: 11px; gap: 3px; }
  .chat-app .quota-bar { width: 50px; }
  .chat-app .topic-bar { padding: 8px 14px; font-size: 12.5px; }
}


/* v8.2：修正 .chat-wrap 在 flex 直向容器中因 margin:auto 變成內容寬 */
.chat-app .chat-wrap { width: 100%; }
@media (min-width: 1024px) {
  .chat-app .chat-wrap { max-width: 1280px; }
}


/* =======================================================
   v8.3：回答深度選單（強弱暗示）＋手機鍵盤高度鎖定
   ======================================================= */

/* 深度選單：清楚的字級與對比，用長條暗示強弱 */
.chat-app .detail-menu {
  min-width: 228px; padding: 8px; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.chat-app .detail-menu-title {
  font-size: 11.5px; letter-spacing: .08em; color: #8a8a92;
  padding: 4px 10px 8px;
}
.chat-app .detail-menu button {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; padding: 9px 10px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: #1f1f22; text-align: left;
}
.chat-app .detail-menu button .d-label { flex: 1; }
.chat-app .detail-menu button .d-desc {
  width: 100%; font-size: 11.5px; font-weight: 400; color: #8a8a92; margin-top: 1px;
}
.chat-app .detail-menu button:hover { background: #f4f4f6; }
.chat-app .detail-menu button.active { background: #17181a; color: #ffffff; }
.chat-app .detail-menu button.active .d-desc { color: #c9c9cf; }

/* 強弱長條：level 1–4 */
.chat-app .d-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.chat-app .d-bars i { width: 4px; background: #cfcfd6; border-radius: 1px; }
.chat-app .d-bars i:nth-child(1) { height: 4px; }
.chat-app .d-bars i:nth-child(2) { height: 6px; }
.chat-app .d-bars i:nth-child(3) { height: 9px; }
.chat-app .d-bars i:nth-child(4) { height: 12px; }
.chat-app .detail-menu button[data-lvl="1"] .d-bars i:nth-child(-n+1),
.chat-app .detail-menu button[data-lvl="2"] .d-bars i:nth-child(-n+2),
.chat-app .detail-menu button[data-lvl="3"] .d-bars i:nth-child(-n+3),
.chat-app .detail-menu button[data-lvl="4"] .d-bars i:nth-child(-n+4) { background: #17181a; }
.chat-app .detail-menu button.active .d-bars i { background: #5c5c64; }
.chat-app .detail-menu button.active[data-lvl="1"] .d-bars i:nth-child(-n+1),
.chat-app .detail-menu button.active[data-lvl="2"] .d-bars i:nth-child(-n+2),
.chat-app .detail-menu button.active[data-lvl="3"] .d-bars i:nth-child(-n+3),
.chat-app .detail-menu button.active[data-lvl="4"] .d-bars i:nth-child(-n+4) { background: #ffffff; }

/* 觸發鈕：字級與對比提高，附強弱長條 */
.chat-app .detail-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: #1f1f22;
  padding: 9px 12px;
}
.chat-app .detail-toggle .d-bars i { background: #b9b9c2; }

/* 手機：固定高度跟隨 visualViewport，避免鍵盤開啟時跳動 */
@media (max-width: 1023px) {
  .chat-app { overflow: hidden; }
  .chat-app .chat-wrap {
    position: fixed; inset: 0;
    width: 100%; max-width: 100vw; margin: 0;
    height: var(--app-h, 100dvh);
  }
  .chat-app .chat-main { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 1024px) {
  .chat-app .chat-wrap { height: var(--app-h, 100dvh); }
}


/* v8.3 補：觸發鈕長條隨目前等級填充 */
.chat-app .detail-toggle[data-lvl="1"] .d-bars i:nth-child(-n+1),
.chat-app .detail-toggle[data-lvl="2"] .d-bars i:nth-child(-n+2),
.chat-app .detail-toggle[data-lvl="3"] .d-bars i:nth-child(-n+3),
.chat-app .detail-toggle[data-lvl="4"] .d-bars i:nth-child(-n+4) { background: #1f1f22; }


/* v8.4 修正：深度選單按鈕被 .composer button 黑底蓋掉 */
.chat-app .detail-menu button { background: transparent; }
.chat-app .detail-menu button:hover { background: #f4f4f6; }
.chat-app .detail-menu button.active { background: #17181a; }
.chat-app .detail-menu button .d-desc { color: #6b6b73; font-size: 12px; }
.chat-app .detail-menu button.active .d-desc { color: #d4d4da; }
.chat-app .detail-menu .detail-menu-title { color: #7c7c84; }


/* v8.5：修正選單按鈕被 .composer button 的 46px 固定高度壓住 */
.chat-app .detail-menu button {
  height: auto; min-height: 0; width: 100%;
  border-radius: 10px; padding: 9px 10px;
  justify-content: flex-start; align-items: center;
}
.chat-app .detail-menu { max-height: 52vh; overflow-y: auto; }


/* =======================================================
   v8.6：① iOS 鍵盤可視視窗位移補償 ② 每則對話獨立淺色窗格
   ======================================================= */

/* 手機：fixed 容器跟隨 visualViewport 的位移與高度（解決注音輸入時空白） */
@media (max-width: 1023px) {
  .chat-app .chat-wrap {
    position: fixed; left: 0; right: 0; top: 0; bottom: auto;
    height: var(--app-h, 100dvh);
    transform: translateY(var(--vv-top, 0px));
    margin: 0; max-width: 100vw;
  }
}

/* 對話窗格：助手訊息＝極淺灰白窗、使用者訊息＝淺藍窗（區隔對話段落） */
.chat-app .bubble.assistant {
  background: #f7f7f9;
  border: 1px solid #ececf0;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.chat-app .bubble.user {
  background: #e9eef7;
  color: #1b2330;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  padding: 10px 14px;
}
.chat-app .bubble.assistant.quote-bubble {
  background: #f2f3f6;
  border-left: 3px solid #b9b9c2;
}
/* 來源卡放在淺色窗格上改用白底，層次更清楚 */
.chat-app .source-list { border-top-color: #e3e3e8; }
.chat-app .source-card { background: #ffffff; border-color: #e6e6ea; }


/* =======================================================
   v9：字體大小（直接調整）＋設定與說明面板（三語聲明）
   ======================================================= */

/* 字體縮放變數：以 --fs 為基準，各處等比縮放 */
:root { --fs: 16px; }
.chat-app { font-size: var(--fs); }
.chat-app .bubble { font-size: var(--fs); }
.chat-app .bubble-text { line-height: 1.85; }
.chat-app .composer textarea { font-size: calc(var(--fs) * 1.03); }
.chat-app .topic-bar { font-size: calc(var(--fs) * 0.81); }
.chat-app .source-card { font-size: calc(var(--fs) * 0.84); }
.chat-app .source-excerpt { font-size: calc(var(--fs) * 0.81); }
.chat-app .disclaimer { font-size: calc(var(--fs) * 0.69); }
.chat-app .stream-status { font-size: calc(var(--fs) * 0.78); }
.chat-app .decline-body { font-size: calc(var(--fs) * 0.875); }
.chat-app .detail-menu button { font-size: calc(var(--fs) * 0.9); }
.chat-app .detail-menu button .d-desc { font-size: calc(var(--fs) * 0.72); }
.chat-app .action-btn { font-size: calc(var(--fs) * 0.72); }
.chat-app .chapter-item { font-size: calc(var(--fs) * 0.84); }
.chat-app .chapter-empty { font-size: calc(var(--fs) * 0.78); }
.chat-app .chat-header .brand h1 { font-size: calc(var(--fs) * 1.06); }
.chat-app .chat-header .meta, .chat-app .quota-box { font-size: calc(var(--fs) * 0.78); }
@media (max-width: 640px) {
  .chat-app .composer textarea { font-size: max(16px, calc(var(--fs) * 1.03)); }
  .chat-app .chat-header .brand h1 { font-size: calc(var(--fs) * 0.91); }
}

/* 字體大小按鈕與選單 */
.chat-app .font-toggle { gap: 5px; }
.chat-app .fs-icon { font-weight: 700; letter-spacing: -.02em; }
.chat-app .fs-preview { margin-left: auto; color: #3f3f46; font-weight: 400; }
.chat-app .detail-menu button.active .fs-preview { color: #d4d4da; }

/* 設定與說明面板 */
.chat-app .info-panel {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
  width: min(460px, 92vw); background: #ffffff; z-index: 90;
  border-left: 1px solid #e8e8ec; box-shadow: -12px 0 40px rgba(0,0,0,.14);
  display: flex; flex-direction: column;
}
.chat-app .info-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #ececf0;
}
.chat-app .info-head h2 { font-size: 16px; font-weight: 700; color: #17181a; }
.chat-app .info-close {
  border: none; background: none; font-size: 22px; line-height: 1; color: #8a8a92;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.chat-app .info-close:hover { background: #f0f0f2; }
.chat-app .info-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.chat-app .info-section { margin-bottom: 22px; }
.chat-app .info-section h3 {
  font-size: 13px; letter-spacing: .06em; color: #8a8a92; font-weight: 700;
  margin-bottom: 10px;
}
.chat-app .info-section p { font-size: 13.5px; line-height: 1.85; color: #3f3f46; margin-bottom: 8px; }
.chat-app .info-section p.legal-title { font-weight: 700; color: #17181a; margin-top: 14px; margin-bottom: 4px; }
.chat-app .fs-row, .chat-app .lang-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-app .fs-row button, .chat-app .lang-row button {
  border: 1px solid #e0e0e4; background: #ffffff; color: #3f3f46;
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; cursor: pointer;
}
.chat-app .fs-row button:hover, .chat-app .lang-row button:hover { background: #f4f4f6; }
.chat-app .fs-row button.active, .chat-app .lang-row button.active {
  background: #17181a; color: #ffffff; border-color: #17181a;
}
.chat-app .info-foot {
  padding: 12px 20px; border-top: 1px solid #ececf0;
  font-size: 11.5px; color: #a6a6ae; text-align: center;
}
.chat-app .disclaimer a { color: #6b6b73; text-decoration: underline; }
@media (max-width: 640px) {
  .chat-app .info-panel { width: 100vw; border-left: none; }
}


/* v9 補：來源卡版權註記 */
.chat-app .source-note { padding: 0 12px 10px; font-size: 11px; color: #a6a6ae; line-height: 1.6; }


/* v10：首次進入聲明同意閘門 */
.chat-app .consent-gate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(23,24,26,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.chat-app .consent-card {
  width: min(660px, 100%); max-height: 92vh; background: #ffffff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column;
  padding: 22px 24px 18px;
}
.chat-app .consent-card h2 { font-size: 17px; font-weight: 700; color: #17181a; margin-bottom: 10px; }
.chat-app .consent-lang { display: flex; gap: 6px; margin-bottom: 12px; }
.chat-app .consent-lang button {
  border: 1px solid #e0e0e4; background: #fff; color: #3f3f46; border-radius: 999px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.chat-app .consent-lang button.active { background: #17181a; color: #fff; border-color: #17181a; }
.chat-app .consent-body {
  flex: 1; overflow-y: auto; padding-right: 6px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.85; color: #3f3f46;
}
.chat-app .consent-body p { margin-bottom: 8px; }
.chat-app .consent-body p.legal-title { font-weight: 700; color: #17181a; margin-top: 12px; margin-bottom: 3px; }
.chat-app .consent-check {
  display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 12px;
  font-size: 13.5px; color: #17181a; cursor: pointer;
}
.chat-app .consent-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: #17181a; }
.chat-app .consent-btn {
  width: 100%; border: none; border-radius: 12px; background: #17181a; color: #fff;
  padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.chat-app .consent-btn:disabled { background: #c9c9cf; cursor: not-allowed; }
.chat-app .consent-foot { margin-top: 10px; text-align: center; font-size: 11px; color: #a6a6ae; }


/* =======================================================
   v10.1：輸入區排版優化 — 上方工具列（字體／深度）＋下方輸入列
   ======================================================= */
.chat-app .composer {
  flex-direction: column; align-items: stretch; gap: 8px;
  padding: 10px 12px 12px; border-radius: 18px;
}
.chat-app .composer-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-app .composer-tools .detail-wrap > button {
  width: auto; height: 28px; border-radius: 999px; padding: 0 10px;
  font-size: 12.5px; font-weight: 600; color: #3f3f46;
  background: #f4f4f6; border: 1px solid #e6e6ea;
  display: inline-flex; align-items: center; gap: 6px;
}
.chat-app .composer-tools .detail-wrap > button:hover { background: #ececf0; }
.chat-app .composer-input { display: flex; align-items: flex-end; gap: 10px; }
.chat-app .composer-input textarea { flex: 1; min-width: 0; }
.chat-app #send {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .chat-app .composer { padding: 8px 10px 10px; gap: 6px; border-radius: 16px; }
  .chat-app .composer-tools .detail-wrap > button { height: 26px; font-size: 12px; padding: 0 9px; }
  .chat-app .composer-input textarea { min-height: 42px; }
  .chat-app #send { width: 40px; height: 40px; }
}


/* v10.2：手機 header 排版 — 標題不換行、隱藏次要狀態文字、額度縮短 */
@media (max-width: 640px) {
  .chat-app .chat-header { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .chat-app .chat-header .brand { flex: 1 1 auto; min-width: 0; }
  .chat-app .chat-header .brand h1 {
    font-size: 14px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  .chat-app .chat-header .meta { display: none; }
  .chat-app .quota-box { font-size: 11px; flex-shrink: 0; }
  .chat-app .quota-bar { width: 44px; }
  .chat-app #infoBtn { flex-shrink: 0; width: 34px; height: 34px; padding: 0; font-size: 15px; }
}


.chat-app .info-hint {
  font-size: 12px; line-height: 1.7; color: #6b6b73;
  background: #f7f7f8; border: 1px solid #ececf0; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 18px;
}


/* v10.3：設定面板點擊外部關閉 */
.chat-app .info-backdrop {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(17,18,20,.14);
}

/* v10.4：閱讀流程（不鎖視窗）＋ 資料來源收合 ＋ 跳到最新 */
.chat-app .jump-btn {
  position: absolute; right: 22px; bottom: 118px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffffff; color: #17181a; border: 1px solid #e3e3e8;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-app .jump-btn:hover { background: #f4f4f6; }
.chat-app .sources-block { margin-top: 10px; border-top: 1px dashed #e6e6ea; padding-top: 8px; }
.chat-app .sources-block > summary {
  cursor: pointer; font-size: 12.5px; color: #5b5b63; font-weight: 600;
  list-style: none; padding: 4px 0;
}
.chat-app .sources-block > summary::-webkit-details-marker { display: none; }
.chat-app .sources-block > summary::before { content: "▸ "; color: #a6a6ae; }
.chat-app .sources-block[open] > summary::before { content: "▾ "; }
@media (max-width: 640px) {
  .chat-app .jump-btn { right: 14px; bottom: 128px; width: 34px; height: 34px; }
}

/* v10.5：回答的輕量 Markdown 樣式（粗體／清單／小標） */
.chat-app .bubble-text p { margin: 0 0 .55em; }
.chat-app .bubble-text p:last-child { margin-bottom: 0; }
.chat-app .bubble-text p.md-h { font-weight: 700; margin: .2em 0 .45em; }
.chat-app .bubble-text strong { font-weight: 700; }
.chat-app .bubble-text ul, .chat-app .bubble-text ol { margin: .2em 0 .6em; padding-left: 1.25em; }
.chat-app .bubble-text li { margin: .18em 0; }
.chat-app .bubble-text code { background: #f0f0f3; border-radius: 4px; padding: 0 .25em; font-size: .92em; }

/* v10.6：額度重設倒數（第二行） */
.chat-app .quota-reset { font-size: 11px; color: #a08e6f; letter-spacing: .01em; }
.chat-app .quota-reset.hidden { display: none; }