/* chat/chat.css — /chat 整頁的外框
 *
 * 2026-08-18：對話 UI 本體（訊息泡泡、按鈕、rich text）搬到 chat-core.css，
 * 因為右下角的浮動諮詢視窗要共用那一份。留在這裡的只有「這一頁長什麼樣子」
 * ——header、footer、置中欄寬，以及那些只有在整頁情境下才成立的 body 規則。
 *
 * index.html 兩支都要載，chat-core.css 在前。
 */
:root {
  --primary: #e07070;
  --bg: #faf6f3;
  --text: #2a2520;
  --text-muted: #6a635a;
}

* { box-sizing: border-box; }

/* 2026-08-18：這一頁從「整份文件在捲」改成 app shell —— 頁面本身不捲，捲的
   是對話。

   之前 .chat-log 雖然寫著 overflow-y:auto，卻永遠不會溢出：沒有任何東西限制
   它的高度（.chat-main 是 align-items:start 的 grid），所以它就長到跟內容一樣
   高，捲的是 document。兩個後果：

     1. 輸入框被推到文件最底部。對話一長，客戶要打字得先捲很久。
     2. scrollLogToBottom() 在這一頁是空操作，串流時畫面不會跟著走。

   浮窗那邊本來就是真的捲動容器，所以這一改也讓兩個入口的行為一致，
   stick-to-bottom 只需要在 chat.js 寫一次。 */
body {
  margin: 0;
  font-family: 'Noto Sans TC', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  /* dvh 會隨著行動裝置的網址列與虛擬鍵盤伸縮，輸入框因此不會被鍵盤蓋住。
     不支援的瀏覽器退回 vh。 */
  height: 100vh;
  height: 100dvh;
}

.chat-header {
  text-align: center;
  padding: 20px 16px 12px;
  border-bottom: 1px solid #ece4dc;
  flex-shrink: 0;
}
.chat-header h1 { margin: 0 0 4px; font-size: 20px; }
.chat-header p { margin: 0; color: var(--text-muted); font-size: 14px; }

.chat-main {
  flex: 1;
  /* min-height:0 是 flex 子項能夠「縮到比內容小」的必要條件。少了它，這一層
     會撐到內容那麼高，底下的捲動容器就永遠不會溢出 —— 也就是改之前的狀況。 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 對話那一欄：訊息區吃掉剩下的高度，輸入框釘在底下。 */
.chat-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 欄寬 720px 是用內距做的，不是用 max-width。

   差別在捲軸的位置：如果限制的是捲動容器本身的寬度，捲軸會出現在那個 720px
   欄的右緣 —— 也就是頁面正中央偏右的地方，看起來像壞掉。捲動容器整頁寬、
   內容靠左右內距擠成一欄，捲軸就貼在視窗最右邊，跟改版前（整份文件在捲）
   的位置一樣。

   訊息區與輸入列共用同一條算式，兩者的內容才會對齊。 */
.chat-ui.chat-section .chat-log,
.chat-ui.chat-section .chat-input {
  padding-inline: max(16px, calc((100% - 720px) / 2));
}
.chat-ui.chat-section .chat-log {
  padding-block: 12px;
  /* 左右各預留一份捲軸寬度，內容欄才會維持在視窗正中央 —— 只留右邊的話，
     捲軸一出現整欄就往左偏半個捲軸寬。 */
  scrollbar-gutter: stable both-edges;
}

/* 輸入列吃下同一份捲軸保留，兩邊的內容欄才會**完全**對齊。

   `scrollbar-gutter` 只對捲動容器生效，所以這裡的 overflow:hidden 是為了讓
   它生效而存在的，不是真的怕內容溢出（裡面只有一個 textarea 跟一顆按鈕）。
   用它換來的是「不必知道捲軸有多寬」—— 那個數字每個作業系統與瀏覽器都不同，
   寫死一定會在某個環境上歪掉。

   實測 1200px 寬：訊息與輸入列的內容欄都是 255–945，送出鈕右緣與使用者泡泡
   右緣同一條線。不支援 scrollbar-gutter 的瀏覽器（Safari 18.2 以前）退回成
   「右側差一個捲軸寬」，也就是沒做這件事時的樣子。 */
.chat-ui.chat-section .chat-input {
  padding-block: 12px;
  overflow: hidden;
  scrollbar-gutter: stable both-edges;
}

.chat-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 16px 20px;
  flex-shrink: 0;
}
.alt-link { color: var(--primary); text-decoration: underline; }