/* 使用 border-box 讓元素寬高計算更直覺，避免 padding 撐破版面。 */
* {
  box-sizing: border-box;
}

/* 設定全站基本字體、深色背景與文字顏色。 */
body {
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #edf2ff;
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.35), transparent 34rem),
    linear-gradient(135deg, #0f172a 0%, #111827 48%, #020617 100%);
}

/* 讓螢幕閱讀器可讀取 label，但視覺上隱藏。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 聊天外框置中顯示，並限制最大寬度，讓桌機閱讀更舒服。 */
.chat-shell {
  display: flex;
  flex-direction: column;
  width: min(920px, calc(100vw - 32px));
  height: min(860px, calc(100vh - 32px));
  margin: 16px auto;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 28px;
  background: rgba(15, 23, 42, 0.78);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.48);
  backdrop-filter: blur(22px);
}

/* 頁首使用漸層背景，讓聊天介面看起來更完整。 */
.chat-header {
  padding: 28px 32px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.28), rgba(14, 165, 233, 0.08));
}

/* 小標籤用來標示產品名稱。 */
.eyebrow {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #93c5fd;
  text-transform: uppercase;
}

/* 主標題設定較大的字重與間距。 */
.chat-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
}

/* 頁首描述文字使用較淡的顏色，避免干擾主標題。 */
.chat-header p:last-child {
  max-width: 620px;
  margin: 10px 0 0;
  color: #cbd5e1;
  line-height: 1.7;
}

/* 對話紀錄區可滾動，新的訊息會由 JavaScript 自動捲到底部。 */
.messages {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
}

/* 單則訊息用 flex 排版，依照 user 或 ai class 決定靠左或靠右。 */
.message {
  display: flex;
  margin-bottom: 18px;
}

/* 使用者訊息靠右顯示。 */
.message.user {
  justify-content: flex-end;
}

/* AI 訊息靠左顯示。 */
.message.ai {
  justify-content: flex-start;
}

/* 訊息泡泡限制寬度並保留換行，方便顯示較長回答。 */
.bubble {
  max-width: min(680px, 82%);
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  color: #e5e7eb;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* 使用者訊息用亮色漸層，與 AI 回覆做出視覺區隔。 */
.message.user .bubble {
  border-bottom-right-radius: 6px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* AI 訊息使用較低彩度背景，維持深色主題一致性。 */
.message.ai .bubble {
  border-bottom-left-radius: 6px;
  background: rgba(30, 41, 59, 0.92);
}

/* 表單固定在底部，輸入欄與按鈕水平排列。 */
.chat-form {
  display: flex;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.5);
}

/* 多行輸入欄支援較長訊息，並與深色 UI 搭配。 */
textarea {
  flex: 1;
  max-height: 160px;
  resize: none;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.9);
  font: inherit;
  line-height: 1.5;
  outline: none;
}

/* 聚焦輸入欄時顯示藍色外框，提示目前可輸入。 */
textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
}

/* 送出按鈕使用漸層與明顯 hover 狀態。 */
button {
  min-width: 92px;
  border: 0;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

/* hover 時微微上移，讓使用者知道按鈕可互動。 */
button:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* 送出中停用按鈕，避免重複送出同一則訊息。 */
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 手機版改成較小邊距與直向表單，提升窄螢幕可用性。 */
@media (max-width: 640px) {
  .chat-shell {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .chat-header,
  .messages {
    padding: 22px;
  }

  .chat-form {
    flex-direction: column;
  }

  button {
    min-height: 48px;
  }
}