/* GPT模組 專屬微微調與 Glassmorphism 樣式表 */

/* 全域完全隱藏所有捲軸 (Webkit + Firefox + IE) */
* {
  scrollbar-width: none !important;   /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}
*::-webkit-scrollbar {
  display: none !important;            /* Webkit (Chrome/Safari) */
  width: 0 !important;
  height: 0 !important;
}

/* 霧面玻璃效果 */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* 文字單行/多行截斷 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 打字機效果光標 */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-start infinite;
  color: #0D9488;
  font-weight: bold;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Material Symbols 實心填滿效果 */
.material-symbols-filled {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* Toast 彈入與淡出動畫 */
@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.toast-enter {
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-leave {
  animation: toastFadeOut 0.3s ease-in forwards;
}


/* 隱藏滾動條且保持可滾動 */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* 手機版底部安全邊距 (iOS Home Indicator Support) */
footer {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* 手機版觸控點擊優化 */
@media (max-width: 640px) {
  .touch-target {
    min-height: 38px;
  }
}


/* ==========================================================================
   🔒 視窗與對話艙鐵壁鎖定 (Viewport & Flex Layout Anti-Displacement Lock)
   徹底杜絕 scrollIntoView 或動態內容撐開導致 Header 消失、Footer 懸浮半空之問題
   ========================================================================== */
html, body {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: clip !important;
  overscroll-behavior: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#rightViewport {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: clip !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

#rightViewport > header {
  flex: 0 0 3.5rem !important;
  position: relative !important;
  top: 0 !important;
}

#mainScrollContainer {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 3.5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#rightViewport > footer {
  flex: 0 0 auto !important;
  position: relative !important;
  bottom: 0 !important;
}

/* ==========================================================================
   白底 (淺色) / 黑底 (深色) 系統級高對比主題自適應變數與覆寫
   ========================================================================== */
:root {
  --c-surface: #f7f9fb;
  --c-surface-low: #f2f4f6;
  --c-surface-container: #eceef0;
  --c-surface-high: #e6e8ea;
  --c-surface-lowest: #ffffff;
  --c-on-surface: #191c1e;
  --c-on-surface-variant: #45464d;
  --c-outline-variant: #c6c6cd;
  color-scheme: light;
}

html.dark {
  --c-surface: #0f141c;
  --c-surface-low: #161d27;
  --c-surface-container: #1f2937;
  --c-surface-high: #283548;
  --c-surface-lowest: #161d27;
  --c-on-surface: #f1f5f9;
  --c-on-surface-variant: #cbd5e1;
  --c-outline-variant: #334155;
  color-scheme: dark;
}

/* =========================================================================
   🌟 半色調四色重點與關鍵字標示系統 (藍・綠・橘・紅 Semi-Tone)
   一般未觸發重點時維持純粹單一系統色；觸發時以「半色調柔光底 + 清晰邊框與高對比字體」呈現
   ========================================================================= */

/* 1. 【橘色半色調 Orange Semi-Tone】搜尋關鍵字高亮 (mark / .kw-highlight) 與提煉關鍵詞 (.kw-badge) */
mark,
.kw-highlight {
  background-color: rgba(234, 88, 12, 0.14) !important;
  color: #9a3412 !important;
  font-weight: 700;
  padding: 0.05rem 0.32rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(234, 88, 12, 0.42) !important;
}

.kw-badge {
  background-color: rgba(234, 88, 12, 0.11) !important;
  color: #9a3412 !important;
  border-color: rgba(234, 88, 12, 0.38) !important;
  font-weight: 600;
}

html.dark mark,
html.dark .kw-highlight {
  background-color: rgba(251, 146, 60, 0.22) !important;
  color: #fdba74 !important;
  border: 1px solid rgba(251, 146, 60, 0.55) !important;
}

html.dark .kw-badge {
  background-color: rgba(251, 146, 60, 0.18) !important;
  color: #fdba74 !important;
  border-color: rgba(251, 146, 60, 0.48) !important;
}

/* 2. 【藍色半色調 Blue Semi-Tone】AI 解答正文內觸發之「核心重點 (strong)」與「引用結論框 (blockquote)」 */
.main-answer-host strong,
.whatif-expert-diagnosis strong,
.whatif-retort-diagnosis strong {
  color: #1e40af;
  background-color: rgba(59, 130, 246, 0.11);
  border: 1px solid rgba(59, 130, 246, 0.26);
  padding: 0.02rem 0.28rem;
  border-radius: 0.25rem;
  font-weight: 700;
}

html.dark .main-answer-host strong,
html.dark .whatif-expert-diagnosis strong,
html.dark .whatif-retort-diagnosis strong {
  color: #93c5fd !important;
  background-color: rgba(59, 130, 246, 0.20) !important;
  border: 1px solid rgba(96, 165, 250, 0.42) !important;
}

.main-answer-host blockquote {
  border-left: 3.5px solid rgba(37, 99, 235, 0.75) !important;
  background-color: rgba(59, 130, 246, 0.07) !important;
  color: #1e293b !important;
}

html.dark .main-answer-host blockquote {
  border-left: 3.5px solid rgba(96, 165, 250, 0.85) !important;
  background-color: rgba(59, 130, 246, 0.14) !important;
  color: #e2e8f0 !important;
}

/* 3. 【綠・紅・藍 半色調徽章】語意達標與風險警示在純白底與純黑底之清晰半色調呈現 */
.semantic-badge-green {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16, 185, 129, 0.42) !important;
}
html.dark .semantic-badge-green {
  background-color: rgba(52, 211, 153, 0.18) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(52, 211, 153, 0.50) !important;
}

.semantic-badge-red {
  background-color: rgba(225, 29, 72, 0.11) !important;
  color: #9f1239 !important;
  border: 1px solid rgba(225, 29, 72, 0.40) !important;
}
html.dark .semantic-badge-red {
  background-color: rgba(251, 113, 133, 0.20) !important;
  color: #fda4af !important;
  border: 1px solid rgba(251, 113, 133, 0.52) !important;
}

.semantic-badge-blue {
  background-color: rgba(59, 130, 246, 0.11) !important;
  color: #1e40af !important;
  border: 1px solid rgba(59, 130, 246, 0.38) !important;
}
html.dark .semantic-badge-blue {
  background-color: rgba(96, 165, 250, 0.18) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(96, 165, 250, 0.48) !important;
}

/* 黑底模式下：食研所向量毛筆黑色 LOGO 自動轉為高對比亮白線稿 */
html.dark img[src*="LOGO.svg"] {
  filter: invert(1) brightness(1.15);
}

/* 黑底模式下：文字反白選取 (::selection) 防止淺灰底吃掉白字 */
html.dark ::selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 黑底模式下：背景容器與卡片階層自適應（涵蓋所有透明度變體，徹底防止選取按鈕淺底吃掉白字） */
html.dark .bg-white,
html.dark .bg-white\/95,
html.dark .bg-white\/90,
html.dark .bg-white\/80 {
  background-color: #161d27 !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/95,
html.dark .bg-slate-50\/90,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/40 {
  background-color: #1b2432 !important;
}

html.dark .bg-slate-100,
html.dark .bg-slate-100\/95,
html.dark .bg-slate-100\/90,
html.dark .bg-slate-100\/80,
html.dark .bg-slate-100\/70 {
  background-color: #232f40 !important;
}

html.dark .bg-slate-200,
html.dark .bg-slate-200\/90,
html.dark .bg-slate-200\/80,
html.dark .bg-slate-200\/70,
html.dark .bg-slate-200\/60,
html.dark .bg-slate-200\/50,
html.dark .bg-slate-300 {
  background-color: #2e3d52 !important;
  color: #f8fafc !important;
}

/* 黑底模式下：全域預設邊框與所有分隔線（徹底消除 Tailwind 預設 #e5e7eb 白色界線與搶鏡白框） */
html.dark *,
html.dark ::before,
html.dark ::after {
  border-color: #1e293b;
}

/* 黑底模式下：選取中項目（歷史紀錄 active、模型選單 active、權限切換鈕）高對比突顯、無刺眼白邊 */
html.dark .history-item.bg-slate-200\/90,
html.dark .custom-option.active,
html.dark .custom-option.bg-slate-100,
html.dark #btnLoginSidebar {
  background-color: #2d3b4e !important;
  color: #ffffff !important;
  border-color: rgba(71, 85, 105, 0.45) !important;
}

/* 黑底模式下：發送按鈕 (#sendBtn) 確保背景深色石墨、箭頭純白，Hover 時不變淺色吃字 */
html.dark #sendBtn {
  background-color: #2d3b4e !important;
  color: #ffffff !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
}
html.dark #sendBtn:hover {
  background-color: #3b4d66 !important;
  color: #ffffff !important;
}

/* 黑底模式下：所有區塊界線、側欄分隔線、頂部與底部區分線、表格分隔線全部轉為低調深灰藍，絕不出現白色界線 */
html.dark .border-outline-variant,
html.dark .border-outline-variant\/60,
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/20,
html.dark .border-surface-container,
html.dark .border-surface-container\/60,
html.dark .border-slate-50,
html.dark .border-slate-100,
html.dark .border-slate-100\/80,
html.dark .border-slate-200,
html.dark .border-slate-200\/90,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/50,
html.dark .border-slate-200\/40,
html.dark .border-slate-300,
html.dark .border-slate-300\/80,
html.dark .border-slate-300\/60,
html.dark .border-slate-300\/40,
html.dark hr,
html.dark th,
html.dark td {
  border-color: rgba(51, 65, 85, 0.55) !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200\/60 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(51, 65, 85, 0.5) !important;
}

/* 黑底模式下：選取中分頁底線 (.border-slate-900) 採用柔和灰藍，不刺眼搶鏡 */
html.dark .border-slate-900 {
  border-color: #64748b !important;
}

/* 黑底模式下：輸入框 Focus 時的外框光暈改為低調深灰藍，不發白光 */
html.dark .focus-within\:border-slate-400:focus-within {
  border-color: #475569 !important;
}
html.dark .focus-within\:ring-slate-200:focus-within {
  --tw-ring-color: rgba(71, 85, 105, 0.35) !important;
}

/* 黑底模式下：文字與灰色線稿符號自動提亮，確保高對比清晰閱讀 */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f1f5f9 !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

/* 黑底模式下：深色主行動按鈕 (.bg-slate-900 / .bg-slate-800) 低調內斂邊框，避免亮白邊框搶鏡 */
html.dark .bg-slate-900,
html.dark .bg-slate-800 {
  background-color: #283548 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
}

html.dark .bg-slate-900:hover,
html.dark .bg-slate-800:hover {
  background-color: #334155 !important;
}

/* 黑底模式下：所有 Hover 狀態背景統一轉為深灰藍高光，絕不變成淺白底吃掉白字 */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-100\/80:hover,
html.dark .hover\:bg-slate-100\/70:hover,
html.dark .hover\:bg-slate-200:hover,
html.dark .hover\:bg-slate-200\/60:hover,
html.dark .hover\:bg-slate-200\/50:hover,
html.dark .hover\:bg-slate-300:hover,
html.dark .hover\:bg-slate-300\/70:hover,
html.dark .hover\:bg-white:hover {
  background-color: #2d3b4e !important;
  color: #ffffff !important;
}

html.dark .hover\:text-slate-900:hover,
html.dark .hover\:text-slate-800:hover,
html.dark .hover\:text-slate-700:hover {
  color: #ffffff !important;
}

/* 修正 Tailwind 對 CSS Hex 變數加透明度 (bg-surface-container-low/80) 失效變透明之問題 */
.bg-surface-container-low\/80,
.bg-surface-container-low\/50,
.bg-surface-container-low\/30 {
  background-color: #f1f5f9 !important;
}

html.dark .bg-surface-container-low\/80,
html.dark .bg-surface-container-low\/50,
html.dark .bg-surface-container-low\/30 {
  background-color: #1c2635 !important;
}

/* ==========================================================================
   🏷️ 表格分類標籤與行內代碼 (.md-inline-code / inline code)
   確保「Top 10 食材排行榜 — 食品分類」等欄位在白底與黑底皆清晰高對比可見
   ========================================================================== */
.md-inline-code,
.main-answer-host :not(pre) > code {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html.dark .md-inline-code,
html.dark .main-answer-host :not(pre) > code {
  background-color: #243244 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(100, 116, 139, 0.45) !important;
}

html.dark .text-teal-900,
html.dark .text-teal-800,
html.dark .text-teal-700 {
  color: #f1f5f9 !important;
}

html.dark a.text-blue-700,
html.dark a.text-teal-700 {
  color: #60a5fa !important;
}

html.dark a.text-blue-700:hover,
html.dark a.text-teal-700:hover {
  color: #93c5fd !important;
}

/* ==========================================================================
   📚 典藏書籍與參考資料卡片（平面純色微差設計，去除浮誇立體陰影與粗邊條）
   維持白底極簡乾淨質感，並在黑底保持舒適的霧面色塊區隔
   ========================================================================== */

/* ── 白底模式 (Light Mode)：純平面極簡霧灰 (#f8fafc) + 1px 細緻淺灰線 (#e2e8f0)，零立體陰影、零粗左邊條 ── */
.citation-book-card {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.citation-book-card:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

.citation-snippet-well {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.citation-para-card {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

/* ── 黑底模式 (Dark Mode)：維持乾淨的深岩藍平面色塊區隔 (#1e293b / #131b26) + 1px 內斂邊線 (#334155) ── */
html.dark .citation-book-card {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: none !important;
}

html.dark .citation-book-card:hover {
  background-color: #243244 !important;
  border-color: #475569 !important;
  box-shadow: none !important;
}

html.dark .citation-snippet-well {
  background-color: #131b26 !important;
  border: 1px solid #283548 !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

html.dark .citation-meta-pill {
  background-color: #151d2a !important;
  color: #cbd5e1 !important;
  border-color: #2e3e54 !important;
}

html.dark .citation-card-footer {
  border-top-color: rgba(51, 65, 85, 0.55) !important;
}

html.dark .citation-book-card .btn-view-doc {
  background-color: #151d2a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

html.dark .citation-book-card .btn-view-doc:hover {
  background-color: #283548 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

html.dark .citation-book-card .btn-open-pdf {
  background-color: #2d3b4e !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
}

html.dark .citation-book-card .btn-open-pdf:hover {
  background-color: #3b4d66 !important;
  color: #ffffff !important;
  border-color: #64748b !important;
}

html.dark .citation-para-card {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   典藏真本封面微縮圖 (Book Cover Thumbnails)
   精確呈現實體出版書皮、平滑過渡、零破圖容錯、黑白極簡兼顧
   ========================================================================== */
.book-cover-thumb-wrap {
  width: 62px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.citation-book-card:hover .book-cover-thumb-wrap {
  transform: translateY(-2px);
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.book-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html.dark .book-cover-thumb-wrap {
  background-color: #131b26 !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html.dark .citation-book-card:hover .book-cover-thumb-wrap {
  border-color: #64748b !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   直達對話底部智慧浮動按鈕 (Scroll-To-Bottom Floating Pill)
   當閱讀前文離開底部時優雅浮現，點擊平滑降落最新回答，完全不遮擋輸入視窗
   ========================================================================== */
#btnScrollToBottom {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.15s ease;
}

#btnScrollToBottom.visible {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

#btnScrollToBottom.hidden-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

html.dark #btnScrollToBottom {
  background-color: rgba(30, 41, 59, 0.92) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

html.dark #btnScrollToBottom:hover {
  background-color: rgba(51, 65, 85, 0.96) !important;
}

/* ==========================================================================
   🌟 4 階段研發顧問模式 — 白底 / 黑底 100% 超高對比標籤與卡片護欄
   徹底杜絕「淺底配白字」或「深底配黑字」導致需要反白選取才能看字的問題
   ========================================================================== */

/* 1. 彩色標籤與膠囊 (Badges & Pills) — 強制同時鎖定背景色與文字色 */
.tm-badge-step {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
html.dark .tm-badge-step {
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #34d399 !important;
}

.tm-badge-kb {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
}
html.dark .tm-badge-kb {
  background-color: rgba(6, 95, 70, 0.55) !important;
  color: #a7f3d0 !important;
  border: 1px solid #10b981 !important;
}

.tm-badge-web {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
}
html.dark .tm-badge-web {
  background-color: rgba(30, 64, 175, 0.55) !important;
  color: #bfdbfe !important;
  border: 1px solid #60a5fa !important;
}

.tm-badge-ai {
  background-color: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}
html.dark .tm-badge-ai {
  background-color: rgba(146, 64, 14, 0.55) !important;
  color: #fde68a !important;
  border: 1px solid #f59e0b !important;
}

.tm-badge-neutral {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}
html.dark .tm-badge-neutral {
  background-color: #283548 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}

/* 2. 全域防護：防止黑底模式下 bg-emerald-100 / bg-amber-100 / bg-teal-100 / bg-blue-100 維持亮底卻配白字 */
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/40,
html.dark .bg-emerald-50\/50,
html.dark .bg-emerald-50\/60,
html.dark .bg-emerald-50\/70,
html.dark .bg-emerald-50\/80,
html.dark .bg-emerald-100,
html.dark .bg-emerald-100\/70,
html.dark .bg-emerald-100\/80 {
  background-color: rgba(6, 78, 59, 0.45) !important;
  color: #d1fae5 !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-50\/50,
html.dark .bg-amber-100 {
  background-color: rgba(120, 53, 15, 0.45) !important;
  color: #fef3c7 !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

html.dark .bg-teal-50,
html.dark .bg-teal-50\/40,
html.dark .bg-teal-50\/80,
html.dark .bg-teal-100,
html.dark .bg-teal-100\/60 {
  background-color: rgba(19, 78, 74, 0.5) !important;
  color: #ccfbf1 !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-50\/40,
html.dark .bg-blue-50\/50,
html.dark .bg-blue-50\/60,
html.dark .bg-blue-50\/70,
html.dark .bg-blue-50\/80,
html.dark .bg-blue-100,
html.dark .bg-blue-100\/70 {
  background-color: rgba(30, 58, 138, 0.45) !important;
  color: #dbeafe !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
}

html.dark .text-emerald-950,
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700 {
  color: #6ee7b7 !important;
}

html.dark .text-teal-950,
html.dark .text-teal-900,
html.dark .text-teal-800,
html.dark .text-teal-700 {
  color: #5eead4 !important;
}

html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700 {
  color: #fcd34d !important;
}

html.dark .text-blue-900,
html.dark .text-blue-800 {
  color: #93c5fd !important;
}

/* ============================================================================
   3. 4S 商策圖譜與階段推進按鈕：白底 / 黑底雙模高舒適度自適應系統
   ============================================================================ */
:root {
  --diag-ink: #0f172a;
  --diag-muted: #334155;
  --diag-soft: #64748b;
  --diag-accent: #047857;
  --diag-accent-bg: rgba(16, 185, 129, 0.08);
  --diag-accent-border: #059669;
  --diag-node-bg: #ffffff;
  --diag-node-alt-bg: #f8fafc;
  --diag-node-border: #94a3b8;
  --diag-line: #475569;
  --diag-rule: rgba(15, 23, 42, 0.16);
}

html.dark {
  --diag-ink: #f8fafc;
  --diag-muted: #cbd5e1;
  --diag-soft: #94a3b8;
  --diag-accent: #34d399;
  --diag-accent-bg: rgba(16, 185, 129, 0.18);
  --diag-accent-border: #10b981;
  --diag-node-bg: #1e293b;
  --diag-node-alt-bg: #172030;
  --diag-node-border: #64748b;
  --diag-line: #94a3b8;
  --diag-rule: rgba(148, 163, 184, 0.25);
}

/* 圖譜工作台頂部標頭列（雙模無違和融合） */
.tm-studio-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.dark .tm-studio-header {
  background-color: #1b2432 !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.65) !important;
}

/* 圖譜畫布透明容器（去除刺眼白底色塊，直接融合卡片底色） */
.tm-svg-canvas-wrap {
  background-color: transparent !important;
}
html.dark .tm-svg-canvas-wrap {
  background-color: transparent !important;
}

/* 主推進與核心下載行動按鈕（推進下一階段、下載總結企劃書 Word）— 雙模高對比翡翠綠 */
.tm-btn-primary {
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.22);
}
.tm-btn-primary:hover:not(:disabled) {
  background-color: #047857 !important;
  color: #ffffff !important;
  border-color: #065f46 !important;
}
html.dark .tm-btn-primary {
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #34d399 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}
html.dark .tm-btn-primary:hover:not(:disabled) {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: #6ee7b7 !important;
}

/* 次要操作按鈕（下載 SVG、匯出 HTML、返回修改條件）— 雙模清晰框線與高對比文字 */
.tm-btn-secondary {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
.tm-btn-secondary:hover:not(:disabled) {
  background-color: #f1f5f9 !important;
  color: #047857 !important;
  border-color: #059669 !important;
}
html.dark .tm-btn-secondary {
  background-color: #243244 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}
html.dark .tm-btn-secondary:hover:not(:disabled) {
  background-color: #2f4159 !important;
  color: #6ee7b7 !important;
  border-color: #10b981 !important;
}

/* 下拉選單在黑底模式下防止選單文字與底色衝突 */
html.dark #tmDiagramStyleSelect option,
html.dark .tm-visual-field-input option {
  background-color: #1b2432;
  color: #f1f5f9;
}

/* ============================================================================
   3b. 4S 概念視覺／統計圖表生成提示語工作台 — 原生介面無縫融合 (白底 / 黑底雙模)
   ============================================================================ */
.tm-visual-studio-section {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.dark .tm-visual-studio-section {
  background-color: #161f2c !important;
  border-top: 1px solid rgba(51, 65, 85, 0.65) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.65) !important;
}

.tm-visual-control-bar {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html.dark .tm-visual-control-bar {
  background-color: #1b2432 !important;
  border: 1px solid #2e3e54 !important;
}

.tm-visual-field-input {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.tm-visual-field-input:focus {
  background-color: #ffffff !important;
  border-color: #059669 !important;
}
html.dark .tm-visual-field-input {
  background-color: #111823 !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}
html.dark .tm-visual-field-input::placeholder {
  color: #64748b !important;
}
html.dark .tm-visual-field-input:focus {
  background-color: #0f172a !important;
  border-color: #10b981 !important;
}

.tm-visual-prompt-card-zh {
  background-color: #ffffff !important;
  border: 1px solid #a7f3d0 !important;
}
html.dark .tm-visual-prompt-card-zh {
  background-color: #1b2432 !important;
  border: 1px solid rgba(16, 185, 129, 0.42) !important;
}

.tm-visual-prompt-card-en {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
html.dark .tm-visual-prompt-card-en {
  background-color: #1b2432 !important;
  border: 1px solid #334155 !important;
}

.tm-visual-prompt-textarea {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
.tm-visual-prompt-textarea:focus {
  background-color: #ffffff !important;
  border-color: #059669 !important;
}
html.dark .tm-visual-prompt-textarea {
  background-color: #111823 !important;
  border: 1px solid #283548 !important;
  color: #e2e8f0 !important;
}
html.dark .tm-visual-prompt-textarea:focus {
  background-color: #0d131c !important;
  border-color: #10b981 !important;
}

/* ============================================================================
   4. 4S 頁內科研文獻與法規標準詳情彈窗 (#tmInPageCitationModal) — 雙模高質感設計
   ============================================================================ */
.tm-modal-card {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
}
html.dark .tm-modal-card {
  background-color: #161f2c !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important;
}

.tm-modal-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.dark .tm-modal-header {
  background-color: #1c2738 !important;
  border-bottom: 1px solid #2d3d52 !important;
}

.tm-modal-body {
  background-color: #ffffff !important;
}
html.dark .tm-modal-body {
  background-color: #161f2c !important;
}

.tm-modal-meta-grid {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
html.dark .tm-modal-meta-grid {
  background-color: #1d293a !important;
  border: 1px solid #2e3e54 !important;
}

.tm-modal-content-well {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 4px solid #059669 !important;
}
html.dark .tm-modal-content-well {
  background-color: #111823 !important;
  border: 1px solid #2e3e54 !important;
  border-left: 4px solid #10b981 !important;
}

.tm-modal-check-box {
  background-color: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
}
html.dark .tm-modal-check-box {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.32) !important;
}

.tm-modal-footer {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
html.dark .tm-modal-footer {
  background-color: #1c2738 !important;
  border-top: 1px solid #2d3d52 !important;
}

/* ============================================================================
   ✨ GPT 原生風格確認浮框 (Custom Floating Confirm Dialog — 白底/黑底無縫融合)
   取代瀏覽器預設 confirm() 系統彈窗
   ============================================================================ */
@keyframes gptModalPopIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gpt-confirm-card {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
  animation: gptModalPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html.dark .gpt-confirm-card {
  background-color: #161f2c !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.72) !important;
}

.gpt-confirm-subbox {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

html.dark .gpt-confirm-subbox {
  background-color: #111823 !important;
  border: 1px solid #283548 !important;
  color: #94a3b8 !important;
}

.gpt-confirm-btn-cancel {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.gpt-confirm-btn-cancel:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.dark .gpt-confirm-btn-cancel {
  background-color: #1e293b !important;
  border: 1px solid rgba(71, 85, 105, 0.55) !important;
  color: #cbd5e1 !important;
}

html.dark .gpt-confirm-btn-cancel:hover {
  background-color: #283548 !important;
  color: #ffffff !important;
}

.gpt-confirm-btn-danger {
  background-color: #be123c !important;
  border: 1px solid #9f1239 !important;
  color: #ffffff !important;
}

.gpt-confirm-btn-danger:hover {
  background-color: #9f1239 !important;
  color: #ffffff !important;
}

html.dark .gpt-confirm-btn-danger {
  background-color: rgba(225, 29, 72, 0.22) !important;
  border: 1px solid rgba(251, 113, 133, 0.48) !important;
  color: #fda4af !important;
}

html.dark .gpt-confirm-btn-danger:hover {
  background-color: rgba(225, 29, 72, 0.35) !important;
  border-color: rgba(251, 113, 133, 0.7) !important;
  color: #ffe4e6 !important;
}

.gpt-confirm-btn-primary {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}

.gpt-confirm-btn-primary:hover {
  background-color: #1e293b !important;
}

html.dark .gpt-confirm-btn-primary {
  background-color: #283548 !important;
  border: 1px solid rgba(96, 165, 250, 0.42) !important;
  color: #f8fafc !important;
}

html.dark .gpt-confirm-btn-primary:hover {
  background-color: #334155 !important;
}