/* chat/chat-core.css — 對話 UI 本體（訊息、按鈕、rich text、生成中動畫）
 *
 * 2026-08-18 從 chat.css 拆出來。
 *
 * 原本這些規則跟 /chat 整頁的外框（header/footer/body 版面）混在同一支檔案
 * 裡，而且是裸選擇器：`.msg`、`.chip`、`body { display:flex }`、`:root` 上
 * 一組 --primary/--bg/--text。那在「只有 /chat 這一頁會載入它」的前提下沒
 * 問題，但右下角的浮動諮詢視窗要出現在全站每一頁，那個前提就沒了 ——
 * `body { display:flex; background: var(--bg) }` 會直接把首頁版面弄壞，
 * `:root { --text: … }` 會蓋掉 redesign.css 的同名 token。
 *
 * 所以這支檔案的每一條規則都掛在 .chat-ui 底下，連 CSS 變數也是宣告在
 * .chat-ui 而不是 :root。它可以安全地載到任何一頁：沒有 .chat-ui 容器就
 * 什麼事都不會發生。
 *
 * 用它的有兩個地方：
 *   public/chat/index.html          （/chat 全頁）
 *   src/components/ChatWidget.astro （右下角浮窗，全站）
 */

.chat-ui {
  --primary: #e07070;
  --primary-deep: #d05a5a;
  --bubble-ai: #ffffff;
  --bubble-user: #e07070;
  --chat-text: #2a2520;
  --chat-text-muted: #6a635a;
  --chat-border: #ece4dc;

  box-sizing: border-box;
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--chat-text);
}
.chat-ui *, .chat-ui *::before, .chat-ui *::after { box-sizing: border-box; }

.chat-ui .chat-log {
  flex: 1;
  /* 跟 .chat-main 同一個道理：flex 子項預設 min-height:auto，會被內容撐開，
     overflow-y 因此永遠沒有機會作用。 */
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
}

.chat-ui .msg {
  display: flex;
  margin-bottom: 12px;
  gap: 10px;
}
.chat-ui .msg.ai { justify-content: flex-start; }
.chat-ui .msg.user { justify-content: flex-end; }

.chat-ui .msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.chat-ui .msg-avatar svg { width: 100%; height: 100%; display: block; }
.chat-ui .msg-avatar:not(:has(svg)) {
  background: var(--primary);
  color: white;
  font-weight: bold;
}
.chat-ui .msg.user .msg-avatar { display: none; }

.chat-ui .msg-bubble {
  max-width: min(520px, calc(100% - 60px));
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--bubble-ai);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.chat-ui .msg.user .msg-bubble {
  background: var(--bubble-user);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-ui .msg.ai .msg-bubble {
  border: 1px solid var(--chat-border);
  border-bottom-left-radius: 4px;
}

.chat-ui .tw-cursor::after {
  content: '|';
  animation: chat-blink 1s step-end infinite;
}
@keyframes chat-blink { 50% { opacity: 0; } }

.chat-ui .chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--chat-border);
}
.chat-ui .chat-input textarea {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  resize: none;
  font: inherit;
  color: inherit;
  background: #fff;
  /* 一行起跳、跟著內容長高、兩行封頂（實際高度由 chat.js 的 autoGrowInput
     設成 inline style，這兩條是它的上下界，超過上界就自己出捲軸）。

     單位用 em 而不是 px：1em 是這個元素自己的字級，所以同一條規則同時對得上
     全頁的 16px 與浮窗的 14px。22px 是上下內距 20 加上下邊框 2。

     line-height 也必須寫死 —— 預設的 `normal` 由字體決定，算式會跟著字體漂移，
     而 CJK 字體的 normal 通常比 1.45 高不少。 */
  line-height: 1.45;
  min-height: calc(1.45em + 22px);
  max-height: calc(2.9em + 22px);
  overflow-y: auto;
}
.chat-ui .chat-input button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.chat-ui .chat-input button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.chat-ui .fallback-banner {
  background: #fff4d6;
  border: 1px solid #e6c66a;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 8px 0;
  font-size: 14px;
}
.chat-ui .fallback-banner a { color: var(--primary-deep); }

/* 下一步按鈕。兩種，刻意長得不一樣。

   先前兩者是同一顆 pill 只差填色 —— 客戶看不出哪一個會把他帶離對話，而
   顏色是很弱的訊號。現在分成兩區、各自有一行說明，而且形狀不同：

     前往頁面  方角、有邊框、右上箭頭 ↗   →  離開這一頁（<a>）
     或這樣問  圓角 pill                  →  繼續對話（<button>）

   內容由伺服器的 next_actions 事件決定，見
   backend/api/app/domain/chat_actions.py。 */
.chat-ui .actions {
  margin: 4px 0 14px 46px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-ui .action-group { display: flex; flex-direction: column; gap: 5px; }
.chat-ui .action-label {
  font-size: 12px;
  color: var(--chat-text-muted);
  letter-spacing: 0.04em;
}
.chat-ui .action-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 導頁的那種。<a> 而不是 button，中鍵開新分頁與右鍵複製網址才會是正常的
   瀏覽器行為。方角 + 箭頭：那兩個記號在網路上普遍代表「這會帶你去別的
   地方」，比「填色比較深」好懂得多。 */
.chat-ui .action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.chat-ui .action-link:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.chat-ui .action-arrow { font-size: 12px; opacity: 0.85; }

/* 快速回覆。圓角 pill，看起來像「你可以說的話」而不是按鈕。 */
.chat-ui .chip {
  background: #fff;
  border: 1.5px solid var(--primary);
  color: var(--primary-deep);
  padding: 7px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.chat-ui .chip:hover:not(:disabled) { background: #fce8e8; }
.chat-ui .chip.selected { background: var(--primary); color: #fff; }
.chat-ui .chip:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 480px) { .chat-ui .actions { margin-left: 8px; } }


/* === Rich text rendering for assistant bubbles === */

/* msg-bubble 內 p 重設 margin（壓掉瀏覽器預設 1em） */
.chat-ui .msg-bubble p {
  margin: 0 0 6px 0;
}
.chat-ui .msg-bubble p:last-child {
  margin-bottom: 0;
}

/* 訊息小標題 */
.chat-ui .msg-h {
  font-weight: 600;
  font-size: 0.98em;
  color: var(--primary);
  margin: 4px 0 2px 0;
  letter-spacing: 0.02em;
}
.chat-ui .msg-h:first-child { margin-top: 0; }

/* 訊息條列 */
.chat-ui .msg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
}
.chat-ui .msg-list li {
  position: relative;
  padding: 2px 0 4px 14px;
  line-height: 1.5;
}
.chat-ui .msg-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.7;
}

/* bullet 子說明 */
.chat-ui .msg-sub {
  margin-top: 1px;
  font-size: 0.92em;
  color: var(--chat-text-muted);
  line-height: 1.45;
}

/* inline strong: 只變粗，不換色 */
.chat-ui .msg-bubble strong {
  font-weight: 600;
  color: inherit;
}

/* === Pre-stream thinking indicator === */

.chat-ui .msg-bubble.tw-thinking {
  color: var(--chat-text-muted);
  font-style: italic;
  font-size: 0.95em;
  min-height: 1.4em;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.chat-ui .msg-bubble.tw-thinking::before {
  content: "生成中";
}

.chat-ui .msg-bubble.tw-thinking::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle;
  background-color: var(--primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path d='M2 14 Q 2 10 6 10 L 11 10 Q 13 10 13 14 Z' fill='black'/><circle cx='15' cy='9' r='5' fill='black'/><path d='M3 11 L 3 7' stroke='black' stroke-width='1.4' stroke-linecap='round'/><circle cx='3' cy='6.5' r='1' fill='black'/><path d='M5 10 L 6 6' stroke='black' stroke-width='1.4' stroke-linecap='round'/><circle cx='6' cy='5.5' r='1' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path d='M2 14 Q 2 10 6 10 L 11 10 Q 13 10 13 14 Z' fill='black'/><circle cx='15' cy='9' r='5' fill='black'/><path d='M3 11 L 3 7' stroke='black' stroke-width='1.4' stroke-linecap='round'/><circle cx='3' cy='6.5' r='1' fill='black'/><path d='M5 10 L 6 6' stroke='black' stroke-width='1.4' stroke-linecap='round'/><circle cx='6' cy='5.5' r='1' fill='black'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 24px 16px;
  mask-size: 24px 16px;
  /* Off-screen wrap: snail enters left, crawls across, exits right; loop seamless */
  animation: snail-crawl 4s linear infinite;
}

@keyframes snail-crawl {
  0%   { -webkit-mask-position: -24px center; mask-position: -24px center; }
  100% { -webkit-mask-position: 60px center;  mask-position: 60px center; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-ui .msg-bubble.tw-thinking::after { animation: none; }
  .chat-ui .tw-cursor::after { animation: none; }
}