* { 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; }
}