/* =========================================
   1. 基本變數與排版設定 (新生兒照護溫暖主題)
   ========================================= */
:root {
  /* 背景：柔和的奶油白，安撫父母焦慮 */
  --bg: #FFFBF2;
  /* 面板：純白，保持醫療衛生的乾淨感 */
  --panel: #FFFFFF;
  /* 邊框：極淡的暖黃色或淺灰，降低銳利感 */
  --border: #FDE68A; 
  --text: #374151;
  --muted: #9CA3AF;
  /* 主按鈕：溫暖的琥珀/向日葵黃，給人正面希望的感覺 */
  --primary: #F59E0B;
  --primary-600: #D97706;
  /* 使用者泡泡：淺暖黃底，深琥珀色字 */
  --bubble-user: #FEF3C7;
  --bubble-user-text: #92400E;
  /* 客服泡泡：純白底，深灰字 */
  --bubble-bot: #FFFFFF;
  --bubble-bot-text: #1F2937;

  /* ★ Header 高度變數，方便統一計算 */
  --header-h: 64px;
  --composer-h: 72px;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  /* ★ 防止 iOS Safari 彈性捲動造成版面跳動 */
  overflow: hidden;
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans CJK TC", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  display: flex; flex-direction: column;
  /* ★ 使用 dvh 讓整體高度包含手機網址列變化 */
  height: 100dvh;
}

.hidden { display: none !important; }

/* =========================================
   2. 頂部列 (Header)
   ========================================= */
.topbar {
  position: sticky; top: 0; z-index: 10;
  /* ★ 改為 min-height，手機上若文字多可自動展開 */
  min-height: var(--header-h);
  height: auto;
  background: var(--panel); 
  border-bottom: 1px solid #FEF08A; /* 柔和的底線 */
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.05); /* 微微的暖色陰影 */
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  /* ★ 防止內容溢出 */
  overflow: hidden;
  flex-shrink: 0;
}
.logo {
  width: auto; height: 36px; border-radius: 50%; /* 如果 logo 是圓的會更親切 */
  /* ★ logo 不縮放，保持固定大小 */
  flex-shrink: 0;
}
.brand {
  /* ★ 讓文字區塊可縮放，不撐破 header */
  min-width: 0;
  flex: 1;
}
.brand .title {
  font-weight: 600;
  color: #92400E; /* 標題使用較沈穩的暖色 */
  /* ★ 標題文字過長時自動換行 */
  white-space: normal;
  word-break: break-word;
  font-size: 15px;
}
.brand .subtitle {
  font-size: 12px;
  color: var(--muted);
  /* ★ subtitle 換行而非溢出 */
  white-space: normal;
  word-break: break-word;
  margin-top: 2px;
}

/* =========================================
   3. 主體與訊息清單
   ========================================= */
.main {
  /* ★ flex:1 + overflow:hidden，讓 .messages 自行管理捲動 */
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px 12px;
  overflow: hidden;
}
.messages {
  width: 100%; max-width: 820px;
  /* ★ 改用 flex:1 填滿剩餘空間，避免 calc() 在手機算錯 */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* ★ iOS 慣性捲動 */
  -webkit-overflow-scrolling: touch;
  padding: 16px 4px;
  display: flex; flex-direction: column; gap: 14px; /* 加大一點間距讓閱讀無壓 */
}

/* 單則訊息容器 */
.msg { display: flex; align-items: flex-start; gap: 10px; }
.msg.user { flex-direction: row-reverse; }
.avatar {
  width: 36px; height: 36px; border-radius: 999px;
  background: #FFF; border: 2px solid #FEF08A; /* 給大頭貼一個溫柔的邊框 */
  flex-shrink: 0;
}

/* =========================================
   4. 對話泡泡 (Bubble)
   ========================================= */
.bubble {
  max-width: 85%;
  border: 1px solid #FDE68A; 
  border-radius: 20px 20px 20px 4px; /* 左側客服泡泡：左下角微尖，其餘圓潤 */
  padding: 12px 16px;
  background: var(--bubble-bot); color: var(--bubble-bot-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
  font-size: 15px; /* 稍微放大字體，讓疲憊的父母好閱讀 */
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
  /* ★ 防止寬圖表撐破泡泡 */
  overflow: hidden;
}
.user .bubble {
  background: var(--bubble-user);
  color: var(--bubble-user-text);
  border-color: transparent;
  border-radius: 20px 20px 4px 20px; /* 右側使用者泡泡：右下角微尖 */
  white-space: pre-wrap;
}

/* =========================================
   5. HTML 內容樣式 (表格、清單、連結)
   ========================================= */
.bubble a { color: #D97706; text-decoration: underline; word-break: break-all; }
.bubble a:hover { color: #B45309; }

.bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.95em;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.bubble th, .bubble td {
  border: 1px solid #FEF08A;
  padding: 8px 10px;
  text-align: left;
}
.bubble th { background-color: #FFFBEB; font-weight: 600; color: #92400E; }
.bubble tr:nth-child(even) { background-color: #FAFAFA; }

.bubble ul, .bubble ol { margin: 8px 0 8px 24px; padding: 0; }
.bubble li { margin-bottom: 6px; }
.bubble p { margin: 0 0 8px 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble h1, .bubble h2, .bubble h3 { margin: 12px 0 8px 0; font-size: 1.1em; font-weight: bold; color: #78350F; }
.bubble img { max-width: 100%; height: auto; border-radius: 8px; margin-top: 8px; display: block; }

/* =========================================
   6. 思考中動畫 (Thinking)
   ========================================= */
.thinking {
  width: 100%; max-width: 820px;
  display: flex; align-items: center; gap: .5rem;
  margin: 8px 12px 0;
  padding: .6rem .8rem;
  border-radius: 16px; background: #FFFBEB; color: #B45309;
  border: 1px dashed #FCD34D;
  box-shadow: 0 1px 3px rgba(0,0,0,.02);
  font-size: 14px;
  flex-shrink: 0;
}
.thinking .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35; display: inline-block;
  animation: dotBounce 1.05s infinite ease-in-out;
}
.thinking .dot:nth-child(1) { animation-delay: 0s; }
.thinking .dot:nth-child(2) { animation-delay: .15s; }
.thinking .dot:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: .35; }
  40% { transform: scale(1); opacity: 1; }
}

/* =========================================
   7. 輸入列 (Composer)
   ========================================= */
.composer {
  min-height: var(--composer-h);
  height: auto;
  background: var(--panel);
  border-top: 1px solid #FEF08A;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.02);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  /* ★ 手機鍵盤彈出時固定在底部 */
  flex-shrink: 0;
  justify-content: center;
  /* ★ iOS 安全區域（瀏海/Home 條）留白 */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.composer .input {
  width: 100%; max-width: 620px;
  min-height: 44px; /* 稍微加高方便手指點擊 */
  max-height: 120px;
  height: auto;
  padding: 10px 14px;
  line-height: 1.4;
  border: 1px solid #FDE68A;
  border-radius: 20px; /* 圓潤的輸入框 */
  outline: none;
  overflow-y: auto;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
  background: #FAFAFA;
  /* ★ iOS 不要自動放大字型 */
  font-size: 16px;
}
.composer .input:focus {
  border-color: var(--primary);
  background: #FFFFFF;
}
.btn {
  height: 44px; padding: 0 16px; border-radius: 20px;
  border: 1px solid transparent; cursor: pointer;
  flex-shrink: 0;
  font-weight: 500;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-600); }
.btn-outline { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.btn-outline:hover { background: #FEF3C7; }

/* =========================================
   8. 行動裝置 RWD 微調
   ========================================= */
@media (max-width: 600px) {
  .brand .title { font-size: 14px; }
  .brand .subtitle { font-size: 11px; }
  .bubble { max-width: 90%; font-size: 14px; padding: 10px 14px; }
  .messages { padding: 12px 6px; }

  /* ★ 手機上表格橫向捲動 */
  .bubble table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .logo { height: 28px; }
  .brand .title { font-size: 13px; }
  .composer { gap: 6px; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .btn { padding: 0 12px; }
}