:root {
  /* ==========================================
     🎨 基礎變數（包含最新優化的輸入框與氣泡設定）
     ========================================== */
  --chat--color-primary: #e74266;
  --chat--color-primary-shade-50: #db4061;
  --chat--color-primary-shade-100: #cf3c5c;
  --chat--color-secondary: #20b69e;
  --chat--color-secondary-shade-50: #1ca08a;
  --chat--color-white: #ffffff;
  --chat--color-light: #f2f4f8;
  --chat--color-light-shade-50: #e6e9f1;
  --chat--color-light-shade-100: #c2c5cc;
  --chat--color-medium: #d2d4d9;
  --chat--color-dark: #101330;
  --chat--color-disabled: #d2d4d9;
  --chat--color-typing: #404040;

  --chat--spacing: 1rem;
  --chat--border-radius: 0.25rem;
  --chat--transition-duration: 0.2s;
  --chat--font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);

  /* 📱 響應式核心：手機端預設為全螢幕 */
  --chat--window--width: 100%;
  --chat--window--height: 100%;
  --chat--window--bottom: 0px;
  --chat--window--right: 0px;
  --chat--window--z-index: 9999;
  --chat--window--border: 1px solid var(--chat--color-light-shade-50);
  --chat--window--border-radius: 0px;
  --chat--window--margin-bottom: 0px;

  /* Header 樣式 */
  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: var(--chat--color-dark);
  --chat--header--color: var(--chat--color-light);
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--header--border-left: none;
  --chat--header--border-right: none;
  --chat--heading--font-size: 1.5rem;
  --chat--subtitle--font-size: inherit;
  --chat--subtitle--line-height: 1.5;

  /* 💬 現代化訊息氣泡變數 */
  --chat--message--font-size: 0.95rem;
  --chat--message--padding: 0.85rem 1.1rem;
  --chat--message--border-radius: 16px;
  --chat--message-line-height: 1.6;
  --chat--message--margin-bottom: 0.8rem;
  --chat--message--bot--background: #ffffff;
  --chat--message--bot--color: #2c3e50;
  --chat--message--bot--border: 1px solid rgba(16, 19, 48, 0.05);
  --chat--message--user--background: var(--chat--color-secondary);
  --chat--message--user--color: var(--chat--color-white);
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 0, 0, 0.05);
  --chat--messages-list--padding: var(--chat--spacing);

  /* 🛒 膠囊艙輸入框與內嵌按鈕變數 */
  --chat--textarea--height: 52px;
  --chat--textarea--max-height: 15rem;
  --chat--input--font-size: 0.95rem;
  --chat--input--border: 1px solid rgba(16, 19, 48, 0.08);
  --chat--input--border-radius: 26px;
  --chat--input--padding: 0.9rem 60px 0.9rem 1.2rem;
  --chat--input--background: #ffffff;
  --chat--input--text-color: #2c3e50;
  --chat--input--line-height: 1.4;
  --chat--input--placeholder--font-size: var(--chat--input--font-size);
  --chat--input--border-active: 1px solid rgba(32, 182, 158, 0.6);
  --chat--input--send--button--background: var(--chat--color-secondary);
  --chat--input--send--button--color: var(--chat--color-white);
  --chat--input--send--button--background-hover: var(--chat--color-secondary-shade-50);
  --chat--input--send--button--color-hover: var(--chat--color-white);
  --chat--input--file--button--background: transparent;
  --chat--input--file--button--color: var(--chat--color-secondary);
  --chat--input--file--button--background-hover: transparent;
  --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
  --chat--files-spacing: 0.5rem;

  /* 切換按鈕與底盤 */
  --chat--toggle--size: 56px;
  --chat--toggle--width: var(--chat--toggle--size);
  --chat--toggle--height: var(--chat--toggle--size);
  --chat--toggle--border-radius: 50%;
  --chat--toggle--background: var(--chat--color-primary);
  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
  --chat--toggle--active--background: var(--chat--color-primary-shade-100);
  --chat--toggle--color: var(--chat--color-white);
  --chat--body--background: var(--chat--color-light);
  --chat--footer--background: #ffffff;
  --chat--footer--color: var(--chat--color-dark);
}

/* ==========================================
   💻 響應式斷點：寬螢幕桌機（大於 480px）
   ========================================== */
@media (min-width: 480px) {
  :root {
    --chat--window--width: 400px;
    --chat--window--height: 600px;
    --chat--window--bottom: var(--chat--spacing);
    --chat--window--right: var(--chat--spacing);
    --chat--window--margin-bottom: var(--chat--spacing);
    --chat--window--border-radius: var(--chat--border-radius);
    --chat--heading--font-size: 2em;
    --chat--toggle--size: 64px;
  }
  .chat-message { max-width: 75% !important; }
}

@media (max-width: 479px) {
  .chat-message { max-width: 88% !important; }
}

/* ==========================================
   ✨ 核心重構一：對話訊息流氣泡美化
   ========================================== */
.chat-messages-list, [class*="messages-list"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: var(--chat--messages-list--padding) !important;
  box-sizing: border-box !important;
}

.chat-message {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  margin-bottom: var(--chat--message--margin-bottom) !important;
  box-sizing: border-box !important;
}

/* 訊息左右靠邊判定 */
.chat-message.user, [class*="message"].user, .chat-message[class*="user"], .chat-message:has([class*="user"]), .chat-message style+div[style*="text-align: right"] {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
.chat-message.bot, .chat-message.assistant, [class*="message"].bot, .chat-message[class*="bot"], .chat-message:has([class*="bot"]) {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

/* 氣泡本體與不對稱圓角 */
.chat-message-bubble, .chat-message .bubble, [class*="message--content"], .chat-message > div:not([class]) {
  display: inline-block !important;
  padding: var(--chat--message--padding) !important;
  font-family: var(--chat--font-family) !important;
  font-size: var(--chat--message--font-size) !important;
  line-height: var(--chat--message-line-height) !important;
  letter-spacing: 0.02em !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
.chat-message.bot .chat-message-bubble, .chat-message.assistant [class*="content"], .chat-message:not(.user) > div:not([class]) {
  background-color: var(--chat--message--bot--background) !important;
  color: var(--chat--message--bot--color) !important;
  border: var(--chat--message--bot--border) !important;
  border-radius: 4px 16px 16px 16px !important; 
}
.chat-message.user .chat-message-bubble, .chat-message.user [class*="content"], .chat-message.user > div:not([class]) {
  background-color: var(--chat--message--user--background) !important;
  color: var(--chat--message--user--color) !important;
  border: var(--chat--message--user--border) !important;
  border-radius: 16px 4px 16px 16px !important;
  box-shadow: 0 3px 10px rgba(32, 182, 158, 0.15) !important; 
}

/* ==========================================
   🎯 核心重構二：膠囊內嵌式輸入框美化
   ========================================== */
form, .chat-footer, [class*="chat--footer"], [class*="input-panel"] {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 0.8rem 1.2rem !important;
  background-color: var(--chat--footer--background) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.chat-footer textarea, .chat-footer input, [class*="chat--textarea"], [class*="chat--input"], form input[type="text"], form textarea {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--chat--textarea--height) !important;
  min-height: var(--chat--textarea--height) !important;
  padding: var(--chat--input--padding) !important;
  border-radius: var(--chat--input--border-radius) !important;
  border: var(--chat--input--border) !important;
  background-color: var(--chat--input--background) !important;
  color: var(--chat--input--text-color) !important;
  font-family: inherit !important;
  font-size: var(--chat--input--font-size) !important;
  line-height: var(--chat--input--line-height) !important;
  box-sizing: border-box !important;
  resize: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 2px rgba(0, 0, 0, 0.01) !important;
  transition: all var(--chat--transition-duration) ease-in-out !important;
}

.chat-footer textarea:focus, .chat-footer input:focus, [class*="chat--textarea"]:focus, [class*="chat--input"]:focus {
  outline: none !important;
  border: var(--chat--input--border-active) !important;
  box-shadow: 0 4px 12px rgba(32, 182, 158, 0.12) !important;
}

/* 絕對定位正圓內嵌按鈕，帶有 Q 彈點擊縮放動畫 */
.chat-footer button, .chat-footer input[type="submit"], [class*="send--button"], [class*="file--button"], form button, form input[type="submit"] {
  position: absolute !important;
  right: calc(0.1rem + 1px) !important;
  top: 35% !important;
  transform: translateY(-50%) scale(1) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--chat--input--send--button--background) !important;
  color: var(--chat--input--send--button--color) !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  box-shadow: 0 2px 5px rgba(32, 182, 158, 0.2) !important;
  transition: all var(--chat--transition-duration) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.chat-footer button:hover, [class*="send--button"]:hover {
  background-color: var(--chat--input--send--button--background-hover) !important;
  color: var(--chat--input--send--button--color-hover) !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 4px 10px rgba(28, 160, 138, 0.35) !important;
}

.chat-footer button:active, [class*="send--button"]:active {
  transform: translateY(-50%) scale(0.95) !important;
}