/* ===== ThinkSphere Sales Assistant Widget CSS =====
   命名皆以 .tsw- 前綴，避免與站台 CSS 衝突
   可用 CSS 變數自訂主題色
   ------------------------------------------------- */


/* ===== Palette - Light ===== */
#tsw-root-container {
  --tsw-primary: #4f46e5;               /* 主色（藍紫） */
  --tsw-primary-contrast: #ffffff;      /* 主色上的文字 */

  --tsw-bg: #ffffff;                    /* 整體底色 */
  --tsw-surface: #ffffff;               /* 卡片/面板 */
  --tsw-border: #e5e7eb;                /* 邊框 */
  --tsw-shadow: 0 20px 40px rgba(0, 0, 0, .18);

  --tsw-text: #0f172a;                  /* 主要文字 */
  --tsw-muted: #475569;                 /* 次要文字 */
  --tsw-muted-bg: #f8fafc;              /* 次要區塊底 */
  --tsw-chip-bg: #f3f4f6;               /* chip / ghost 按鈕底 */

  --tsw-success: #16a34a;
  --tsw-danger: #dc2626;

  /* 聊天泡泡文字顏色（可覆寫） */
  --tsw-bubble-user-text: var(--tsw-primary-contrast);
  --tsw-bubble-bot-text: var(--tsw-text);

  color-scheme: light;
}

/* ===== Palette - Auto Dark (跟隨系統) ===== */
@media (prefers-color-scheme: dark) {
  #tsw-root-container.tsw-auto-dark {
    --tsw-primary: #6366f1;
    --tsw-primary-contrast: #ffffff;

    --tsw-bg: #0b0f17;
    --tsw-surface: #0f172a;
    --tsw-border: #1e293b;
    --tsw-shadow: 0 20px 40px rgba(0, 0, 0, .5);

    --tsw-text: #e5e7eb;
    --tsw-muted: #94a3b8;
    --tsw-muted-bg: #0b1220;
    --tsw-chip-bg: #111827;

    --tsw-bubble-user-text: #ffffff;
    --tsw-bubble-bot-text: #e5e7eb;

    color-scheme: dark;
  }
}

/* ===== Palette - Force Dark（外層 .tsw-dark）===== */
#tsw-root-container.tsw-dark {
  --tsw-primary: #6366f1;
  --tsw-primary-contrast: #ffffff;

  --tsw-bg: #0b0f17;
  --tsw-surface: #0f172a;
  --tsw-border: #1e293b;
  --tsw-shadow: 0 20px 40px rgba(0, 0, 0, .5);

  --tsw-text: #e5e7eb;
  --tsw-muted: #94a3b8;
  --tsw-muted-bg: #0b1220;
  --tsw-chip-bg: #111827;

  --tsw-bubble-user-text: #ffffff;
  --tsw-bubble-bot-text: #e5e7eb;

  color-scheme: dark;
}

/* === 基礎 === */
.tsw-hidden { display: none !important; }

/* 強化 Reset，避免外站汙染 */
/* 1. 字體風格調整：更現代、簡潔、中文字重優化 */
/* - 移除 Windows 的 'Microsoft JhengHei'，改用更現代的 Noto Sans TC / PingFang TC
   - 將 system-ui 提前，確保在不同系統上都能有良好的本地字體渲染
*/
.tsw-reset {
  /* * 保留原本的 all: unset; box-sizing: border-box; color: var(--tsw-text);
   * 僅修改 font-family 
   */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, "Helvetica Neue", Arial, 
               "Noto Sans TC", "PingFang TC", sans-serif;
  /* 增加字體渲染優化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tsw-reset * { box-sizing: border-box; }

/* === 浮動氣泡 === */
.tsw-bubble {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tsw-primary);
  color: var(--tsw-primary-contrast);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.tsw-bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .18);
}

/* === 面板（bubble 模式使用） === */
.tsw-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 2147483000;
  width: 420px;
  min-width: 320px; /* 最小寬度避免過小 */
  max-height: 90vh;
  max-width: 90vw; /* 限制最大寬度為視窗寬度的 90% */
  max-height: 80vh;
  background: var(--tsw-surface);
  border: 1px solid var(--tsw-border);
  border-radius: 16px;
  box-shadow: var(--tsw-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: tsw-pop .18s ease-out;
}

/* === 內嵌（inline 模式使用） === */
.tsw-container {
  width: 100%;
  max-width: 720px;
  height: 560px;
  background: var(--tsw-surface);
  border: 1px solid var(--tsw-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--tsw-shadow);
}

/* === 標頭 === */
.tsw-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tsw-border);
  background: var(--tsw-muted-bg);
}
.tsw-agent {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsw-title { font-size: 14px; font-weight: 600; }
.tsw-flex-1 { flex: 1; }
.tsw-btn {
  border: none;
  background: transparent;
  color: var(--tsw-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
}

/* === 訊息流 === */
.tsw-msgs {
  padding: 4px;
  overflow: auto;
  flex: 1;
  background: var(--tsw-bg);
}
.tsw-msg {
  margin: 8px 0;
  max-width: 360px;
  word-wrap: break-word;
}
.tsw-msg-user { margin-left: auto; text-align: right; }

/* === 泡泡（統一用變數）=== */
#tsw-root-container .tsw-bubble-msg { 
  font-weight: 500; /* 略為調低字重，讓閱讀更舒適 */
  letter-spacing: .01em;
  display: inline-block;
  padding: 4px 4px; /* 恢復合理的內邊距 (文字與泡泡邊緣的距離) */
  border-radius: 4px; /* 恢復到統一的 12px 或您喜歡的值 */
  line-height: 1.55; /* 保持舒適的行距 */
  font-size: 16px; /* 保持字體大小 */
  white-space: pre-wrap;
  word-break: break-all;
  color: inherit;
}

#tsw-root-container .tsw-bubble-user {
  background: var(--tsw-primary);
  color: var(--tsw-bubble-user-text) !important;
}
#tsw-root-container .tsw-bubble-bot {
  background: var(--tsw-muted-bg);
  color: var(--tsw-bubble-bot-text) !important;
}
/* 泡泡內的連結/強調也繼承顏色 */
#tsw-root-container .tsw-bubble-msg a,
#tsw-root-container .tsw-bubble-msg strong,
#tsw-root-container .tsw-bubble-msg em,
#tsw-root-container .tsw-bubble-msg code {
  color: inherit;
}

/* 由於您已經將 p 元素邊距設為 0，因此如果 Bot 訊息只有一段，您需要確保整體泡泡內文字不會貼到泡泡頂端或底部 */
/* 一般來說，line-height 會處理這個問題，但如果需要微調，可以考慮給 .tsw-bubble-msg 增加 padding */

/* 確保所有 Markdown 區塊元素 (p, h1, ul, ol, blockquote, pre) 的上下間距保持一致 */
/* 這是解決「多一行空白」和「間距過大」的根本方法 */
.tsw-msg-bot .tsw-bubble-msg > *, /* 選擇泡泡內容中所有頂層區塊元素 */
.tsw-msg-bot .tsw-bubble-msg h1, 
.tsw-msg-bot .tsw-bubble-msg h2, 
.tsw-msg-bot .tsw-bubble-msg h3, 
.tsw-msg-bot .tsw-bubble-msg h4, 
.tsw-msg-bot .tsw-bubble-msg h5, 
.tsw-msg-bot .tsw-bubble-msg h6 {
  /* 統一給予一個適中的間距，例如 0.6em (大約 9.6px) */
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  /* 確保沒有內部填充 (padding) */
  padding: 0; 
}

/* 確保連續段落不會因為 margin-collapse 導致邊界消失，並保持標題大小適中 */
.tsw-msg-bot .tsw-bubble-msg h1 { font-size: 1.4em; } 
.tsw-msg-bot .tsw-bubble-msg h2 { font-size: 1.25em; } 
.tsw-msg-bot .tsw-bubble-msg h3 { font-size: 1.15em; } 
.tsw-msg-bot .tsw-bubble-msg h4 { font-size: 1.05em; } 

/* **關鍵修正**：移除第一個和最後一個元素的多餘上下邊距 */
/* 這樣內容才會緊貼泡泡的 `padding: 10px 12px;` */
.tsw-msg-bot .tsw-bubble-msg > *:first-child { 
  margin-top: 0; 
}
.tsw-msg-bot .tsw-bubble-msg > *:last-child { 
  margin-bottom: 0; 
}

#tsw-root-container .tsw-bubble-msg .tsw-bubble-bot {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 0px, 0px;
}

p {
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 4px 4px;
}

/* === 快速動作 === */
.tsw-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-top: 1px dashed var(--tsw-border);
}
.tsw-chip {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--tsw-chip-bg);
  color: var(--tsw-text);
  cursor: pointer;
  border: 1px solid var(--tsw-border);
}

/* 針對 Markdown 標題 (h1-h6) 調整大小和間距 */
/* 這是 Bot 訊息泡泡內的 Markdown 內容 */
.tsw-msg-bot .tsw-msg-content h1,
.tsw-msg-bot .tsw-msg-content h2,
.tsw-msg-bot .tsw-msg-content h3,
.tsw-msg-bot .tsw-msg-content h4,
.tsw-msg-bot .tsw-msg-content h5,
.tsw-msg-bot .tsw-msg-content h6 {
  /* 移除瀏覽器預設的 margin */
  margin-top: 0.5em; 
  margin-bottom: 0.25em; /* 稍微縮小標題底部的間距 */
  font-weight: 700;
  line-height: 1.25;
  color: var(--tsw-text); /* 確保顏色是主文字色 */
}

/* 統一調整標題字體大小 (相對於 16px 的基礎) */
.tsw-msg-bot .tsw-msg-content h1 { font-size: 1.4em; } /* 22.4px (原本可能太大) */
.tsw-msg-bot .tsw-msg-content h2 { font-size: 1.25em; } /* 20px */
.tsw-msg-bot .tsw-msg-content h3 { font-size: 1.15em; } /* 18.4px (可作為主要小標) */
.tsw-msg-bot .tsw-msg-content h4 { font-size: 1.05em; } /* 16.8px (與內文接近，但更粗) */
.tsw-msg-bot .tsw-msg-content h5 { font-size: 1em; } /* 16px */
.tsw-msg-bot .tsw-msg-content h6 { font-size: 0.95em; } /* 15.2px */

/* 3. 解決 Markdown 段落間的額外空白行問題 */

/* 核心處理：將所有 Markdown 內容的段落邊距統一設為較小的值 */
/* 這會影響 <p>, <ul>, <ol>, <blockquote> 等區塊元素 */
.tsw-msg-bot .tsw-msg-content > p,
.tsw-msg-bot .tsw-msg-content > ul,
.tsw-msg-bot .tsw-msg-content > ol,
.tsw-msg-bot .tsw-msg-content > pre,
.tsw-msg-bot .tsw-msg-content > blockquote,
.tsw-msg-bot .tsw-msg-content > table,
.tsw-msg-bot .tsw-msg-content > hr {
  /* * 統一設定區塊元素的上下間距
   * 使用 0.75em 作為段落間距，比瀏覽器預設的 1em 更緊湊
   */
  margin-top: 0.75em; 
  margin-bottom: 0.75em;
}

/* 列表 (ul/ol) 內文字行距也調整，並移除左側預設 padding 避免縮排過多 */
.tsw-msg-bot .tsw-msg-content ul,
.tsw-msg-bot .tsw-msg-content ol {
  padding-left: 1.25em; /* 確保列表標記仍能顯示，但縮排不要太多 */
  line-height: 1.15;
}

/* 額外優化：讓 Markdown 連結和粗體在 bot 泡泡內更清晰 */
.tsw-msg-bot .tsw-msg-content a {
  color: var(--tsw-primary); /* 連結色使用主題色 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.tsw-msg-bot .tsw-msg-content strong {
  font-weight: 700; /* 加強粗體效果 */
  color: var(--tsw-text);
}

/* Katex/LaTeX 渲染樣式調整 */
/* 確保 KaTeX 數學區塊也能從上下的 Markdown 內容中區分出來 */
/* KaTeX 的 display mode 預設會是 .katex-display */
.tsw-msg-bot .tsw-msg-content .katex-display {
  margin-top: 0.8em !important; 
  margin-bottom: 0.8em !important;
  padding: 0.5em 0; /* 讓顯示模式的數學式上下稍微留白 */
  overflow-x: auto; /* 防止過長的數學式溢出 */
}
/* 確保 KaTeX 區塊在泡泡內不會被截斷 */
.tsw-msg-bot .tsw-msg-content {
  overflow-wrap: break-word; /* 允許長單詞在必要時斷開 */
}


/* 確保列表、引言、代碼區塊等其他區塊元素能保持合理的間距 */
.tsw-msg-bot .tsw-bubble-msg ul,
.tsw-msg-bot .tsw-bubble-msg ol {
  padding-left: 1.25em;
  line-height: 1.15;
}
.tsw-msg-bot .tsw-bubble-msg > blockquote,
.tsw-msg-bot .tsw-bubble-msg > table {
  /* 這些元素可能還是需要一些間距來區隔 */
  margin-top: 0.75em; 
  margin-bottom: 0.75em;
}

/* 代碼塊的樣式調整 */
.tsw-msg-bot .tsw-bubble-msg pre {
  padding: 0.75em 1em; /* 給代碼塊增加內部 padding，視覺上會更清楚 */
  background: var(--tsw-bg); /* 使用主底色或專用顏色 */
  border-radius: 8px;
  overflow-x: auto;
}

/* === 輸入列 === */
.tsw-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--tsw-border);
  background: var(--tsw-surface);
}
.tsw-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--tsw-border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--tsw-bg);
  color: var(--tsw-text);
}
.tsw-input button {
  padding: 10px 14px;
  background: var(--tsw-primary);
  color: var(--tsw-primary-contrast);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* === 狹窄螢幕 === */
@media (max-width: 600px) {
  .tsw-panel {
    /* 1. 滿版寬度 (或接近滿版) */
    width: 100vw;
    max-width: 100vw;
    /* 2. 貼齊邊緣 */
    right: 0;
    left: 0; /* 讓面板居中或貼齊左側 */
    bottom: 0;
    /* 3. 佔滿高度 (讓它像一個 Modal) */
    height: 100vh;
    max-height: 100vh;
    /* 4. 移除圓角和邊框，使其真正滿版 */
    border-radius: 0;
    border: none;
  }
  .tsw-bubble {
    right: 16px;
    bottom: 16px;
  }
}

/* === 動畫 === */
@keyframes tsw-pop {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);  opacity: 1; }
}

/* === Product Card List (horizontal scroll) ===================== */
#tsw-root-container .tsw-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 泡泡變數補強（如需單獨反白可在此覆寫） */
  --tsw-bubble-user-text: var(--tsw-primary-contrast);
  --tsw-bubble-bot-text: var(--tsw-text);
}

/* 滑動列：水平捲動 + snap + 隱藏滾動條 */
#tsw-root-container .tsw-products-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;               /* 每張卡片寬度 */
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                  /* Firefox */
}
#tsw-root-container .tsw-products-scroll::-webkit-scrollbar { display: none; } /* WebKit */

/* 卡片本體 */
#tsw-root-container .tsw-product-card {
  scroll-snap-align: start;
  background: var(--tsw-surface);
  border: 1px solid var(--tsw-border);
  border-radius: 14px;
  box-shadow: var(--tsw-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 圖片區：維持比例、填滿裁切 */
#tsw-root-container .tsw-product-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;       /* 正方形，可改 4/3、3/4 等 */
  background: var(--tsw-muted-bg);
  overflow: hidden;
}
#tsw-root-container .tsw-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 內容區 */
#tsw-root-container .tsw-product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}

/* 標題與副標 */
#tsw-root-container .tsw-product-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tsw-text);
  line-height: 1.35;
}
#tsw-root-container .tsw-product-subtitle {
  font-size: 12px;
  color: var(--tsw-muted);
  line-height: 1.3;
}

/* 價格區 */
#tsw-root-container .tsw-product-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#tsw-root-container .tsw-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--tsw-text);
}
#tsw-root-container .tsw-compare {
  font-size: 12px;
  color: var(--tsw-muted);
  text-decoration: line-through;
}

/* 變體選擇（dropdown 版） */
#tsw-root-container .tsw-variant {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 4px;
}
#tsw-root-container .tsw-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--tsw-border);
  border-radius: 10px;
  background: var(--tsw-bg);
  color: var(--tsw-text);
  font-size: 13px;
}

/* 動作列：加入購物車 / 直接結帳 */
#tsw-root-container .tsw-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
#tsw-root-container .tsw-btn-primary {
  background: var(--tsw-primary);
  color: var(--tsw-primary-contrast);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#tsw-root-container .tsw-btn-ghost {
  background: var(--tsw-chip-bg);
  color: var(--tsw-text);
  border: 1px solid var(--tsw-border);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* 邊緣漸層提示（可選）：告知可以左右滑動 */
#tsw-root-container .tsw-products-edge { position: relative; }
#tsw-root-container .tsw-products-edge::before,
#tsw-root-container .tsw-products-edge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  pointer-events: none;
}
#tsw-root-container .tsw-products-edge::before {
  left: 0;
  background: linear-gradient(90deg, var(--tsw-surface) 0%, transparent 100%);
}
#tsw-root-container .tsw-products-edge::after {
  right: 0;
  background: linear-gradient(270deg, var(--tsw-surface) 0%, transparent 100%);
}

/* 手機：卡片稍微窄一點、多顯示幾張 */
@media (max-width: 420px) {
  #tsw-root-container .tsw-products-scroll { grid-auto-columns: 220px; }
}

/* === Overrides: bot bubble color + larger message text === */

/* Light theme 覆寫 */
#tsw-root-container {
  /* 新增更顯眼的機器人泡泡底色與文字色 */
  --tsw-bot-bubble-bg: #e8efff;    /* 淡藍紫，明顯不會接近白色 */
  --tsw-bot-bubble-text: #0f172a;  /* 深色文字 */
}

/* Auto Dark 覆寫 */
@media (prefers-color-scheme: dark) {
  #tsw-root-container.tsw-auto-dark {
    --tsw-bot-bubble-bg: #1f2a44;   /* 深藍灰，對比清楚 */
    --tsw-bot-bubble-text: #e5e7eb; /* 淡亮文字 */
  }
}

/* Force Dark 覆寫（外層 .tsw-dark 時） */
#tsw-root-container.tsw-dark {
  --tsw-bot-bubble-bg: #1f2a44;
  --tsw-bot-bubble-text: #e5e7eb;
}

/* 放大使用者與機器人訊息字體（原本 14px -> 16px）
#tsw-root-container .tsw-bubble-msg {
  font-size: 16px;
  line-height: 1.4;
} */

/* 套用新顏色到機器人泡泡 */
#tsw-root-container .tsw-bubble-bot {
  background: var(--tsw-bot-bubble-bg);
  color: var(--tsw-bot-bubble-text) !important;
}

/* === Typing indicator (bot is thinking) === */
#tsw-root-container .tsw-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tsw-bot-bubble-bg, #e8efff);
  color: var(--tsw-bot-bubble-text, #0f172a);
  font-size: 14px;           /* 你有把泡泡字放大到 16px 的話，也可改 16px */
  line-height: 1.35;
}
#tsw-root-container .tsw-typing-dots {
  display: inline-flex;
  gap: 4px;
}
#tsw-root-container .tsw-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: tsw-bounce 1s infinite ease-in-out;
}
#tsw-root-container .tsw-typing-dot:nth-child(2) { animation-delay: .15s; }
#tsw-root-container .tsw-typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes tsw-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%          { transform: translateY(-4px); opacity: 1;  }
}