/**
 * 全站統一：右下角 FAB（返回頂端、工作列表、返回近期開啟檔案）與工作列表 Modal、Footer 訊息 Toast
 * 由 header 引入，確保各頁樣式一致，不受各頁 CSS 覆蓋影響。
 */
/* 右下角按鈕群組 */
.footer-fab-group {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  z-index: 1000;
}

.footer-fab-group #movetop,
.footer-fab-group .task-list-btn,
.footer-fab-group .recent-upload-btn {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
}

.footer-fab-group #movetop {
  background: var(--primary-color, #386F59);
  color: white;
  box-shadow: 0 4px 15px rgba(61, 138, 107, 0.4);
}

.footer-fab-group #movetop:hover {
  background: #1C362B;
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 6px 20px rgba(61, 138, 107, 0.6);
}

.footer-fab-group .task-list-btn {
  position: relative;
  background: #386F59;
  color: white;
  font-size: 1.3rem;
  box-shadow: 0 4px 15px rgba(61, 138, 107, 0.4);
}

.footer-fab-group .task-list-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(61, 138, 107, 0.6);
}

/* 返回近期開啟檔案按鈕 - 統一外觀 */
.footer-fab-group .recent-upload-btn {
  background: #6A7265 !important;
  color: white !important;
  font-size: 1.2rem !important;
  box-shadow: 0 4px 15px rgba(106, 114, 101, 0.4) !important;
}

.footer-fab-group .recent-upload-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(106, 114, 101, 0.6) !important;
  background: #5B6156 !important;
}

.task-list-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  border: 2px solid white;
}

/* 工作列表 Modal */
.task-list-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: footerFadeIn 0.3s ease;
}

.task-list-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-list-modal-content {
  background: white;
  border-radius: 16px;
  width: 92%;
  max-width: 1100px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: footerSlideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* 批次動作工具列：勾選全部 + 批次取消 + 批次移除
   外層加 !important 來覆蓋頁面層的 button { display: block } 等廣域樣式，
   避免每顆按鈕被撐成整列、把工具列拉成 5 行高的版型。 */
.task-list-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #F2F3F1;
  background: #FAFBF9;
  flex-wrap: wrap;
  row-gap: 8px;
}
.task-list-toolbar > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.task-list-toolbar label.task-list-selectall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #3B4D46;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.task-list-toolbar label.task-list-selectall input[type="checkbox"] {
  flex-shrink: 0;
}
.task-list-toolbar .task-list-selcount {
  font-size: 0.8rem;
  color: #767F70;
  white-space: nowrap;
  flex-shrink: 0;
}
.task-list-toolbar .task-list-toolbar-btn {
  padding: 6px 12px;
  border: 1px solid #D5DCD0;
  background: white;
  color: #3B4D46;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}
.task-list-toolbar .task-list-toolbar-btn:hover:not(:disabled) {
  border-color: #386F59;
  color: #386F59;
}
.task-list-toolbar .task-list-toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.task-list-toolbar .task-list-toolbar-btn.danger { color: #b91c1c; border-color: #fca5a5; }
.task-list-toolbar .task-list-toolbar-btn.danger:hover:not(:disabled) { background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* 每張 task-item：勾選框置於左上角，標題與其它內容左移避開
   （實際的 padding 值統一在下方 L306 的主要 .task-item 規則裡設定，避免 shorthand 覆蓋） */
.task-item { position: relative; }
.task-item .task-item-checkbox {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
/* 沒有 checkbox 的 task（mapping/某些 cleanup）保留同樣留白讓版型一致 */
.task-item.task-item-no-checkbox { padding-left: 56px; }
.task-item.task-item-selected {
  border-color: #386F59;
  background: #F0F7F4;
}
.task-item .task-item-title {
  word-break: break-word;
}
/* 完成時間 / 耗時：放在 meta 下方，使用較淡顏色避免搶版面 */
.task-item-meta-times {
  font-size: 0.78rem;
  color: #A5ACA0;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.task-item-meta-times .meta-time-label {
  color: #767F70;
  margin-right: 4px;
}

/* ──────────────────────────────────────────────────────────────────────
   任務類型背景色：讓使用者一眼就能分清每張卡片來自哪個功能面向。
   色票刻意走「很淡的底色 + 可辨識的左側條」組合，確保不影響文字可讀性
   （跟 .task-item.task-item-selected 的 #eff6ff 形狀一致）。
   命中判斷使用 data-typegroup，因為 taskType 本身顆粒度不夠
   （例如 bgtask 同時涵蓋「remap.*」對應與「inst.*」向量庫同步兩種面向）。
   .task-item-selected 的邊框仍會覆寫，避免勾選狀態被底色吃掉。
   ────────────────────────────────────────────────────────────────────── */
.task-item[data-typegroup="mapping"]    { background: #ecfdf5; border-left: 6px solid #295E4B; }
.task-item[data-typegroup="vectordb"]   { background: #F2F9F6; border-left: 6px solid #87BAA4; }
.task-item[data-typegroup="preprocess"] { background: #fefce8; border-left: 6px solid #eab308; }
.task-item[data-typegroup="cleanup"]    { background: #fef2f2; border-left: 6px solid #ef4444; }
.task-item[data-typegroup="bgtask"]     { background: #FAFBF9; border-left: 6px solid #767F70; }
.task-item[data-typegroup="other"]      { background: #F9F9F9; border-left: 6px solid #A5AAA1; }
/* hover 時加強邊框對比（顏色沿用 group 色） */
.task-item[data-typegroup="mapping"]:hover    { border-color: #295E4B; box-shadow: 0 4px 15px rgba(41, 94, 75,0.18); }
.task-item[data-typegroup="vectordb"]:hover   { border-color: #87BAA4; box-shadow: 0 4px 15px rgba(135, 186, 164,0.18); }
.task-item[data-typegroup="preprocess"]:hover { border-color: #eab308; box-shadow: 0 4px 15px rgba(234,179,8,0.20); }
.task-item[data-typegroup="cleanup"]:hover    { border-color: #ef4444; box-shadow: 0 4px 15px rgba(239,68,68,0.18); }
.task-item[data-typegroup="bgtask"]:hover     { border-color: #767F70; box-shadow: 0 4px 15px rgba(118, 127, 112,0.18); }

/* 類型徽章：擺在卡片左上角、checkbox 右側；用額外 padding-top 把下方內容讓開，避免壓到標題 */
.task-item-typebadge {
  position: absolute;
  top: 14px;
  left: 44px;
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
.task-item-typebadge-mapping    { background: #d1fae5; color: #1C372E; }
.task-item-typebadge-vectordb   { background: #ECF4F0; color: #34785A; }
.task-item-typebadge-preprocess { background: #fef3c7; color: #a16207; }
.task-item-typebadge-cleanup    { background: #fee2e2; color: #b91c1c; }
.task-item-typebadge-bgtask     { background: #E8EBE7; color: #3B4D46; }
.task-item-typebadge-other      { background: #F4F5F4; color: #565C52; }
/* 卡片整體往下讓一列給徽章；同時把 checkbox 拉高與徽章同一水平線上對齊 */
.task-item[data-typegroup]                   { padding-top: 44px; }
.task-item[data-typegroup] .task-item-checkbox { top: 16px; }

.task-list-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #386F59;
  color: white;
  padding: 20px 25px;
  border-radius: 16px 16px 0 0;
}

.task-list-modal-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  color: white;
}

.task-list-modal-title i {
  line-height: 1;
  display: flex;
  align-items: center;
}

.task-list-modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
  line-height: 1;
}

.task-list-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.task-list-modal-body {
  padding: 25px;
  overflow-y: auto;
  flex: 1;
}

.task-list-loading,
.task-list-empty {
  text-align: center;
  padding: 40px;
  color: #747A6F;
}

.task-list-empty {
  padding: 60px 20px;
}

.task-list-loading i {
  font-size: 2rem;
  animation: footerSpin 1s linear infinite;
  margin-bottom: 15px;
}

.task-list-empty i {
  font-size: 4rem;
  color: #E2E4E0;
  margin-bottom: 20px;
}

.task-item {
  background: #F9F9F9;
  border: 2px solid #ECEDEB;
  border-radius: 12px;
  /* 刻意用四向分開：不能用 padding: 20px shorthand，否則會覆蓋上面 L191 的 padding-left/right，
     導致 checkbox 壓到首字、右上角取消鈕壓到狀態徽章。
     padding-left 58px  = 勾選框 (left:18 + 18wide = 36) + 充足留白
     padding-right 86px = 操作鈕區 (絕對定位 right:14 + 最寬 "取消" 按鈕 ~60px) + 緩衝 */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 58px;
  padding-right: 86px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.task-item:hover {
  border-color: #3D8A6B;
  box-shadow: 0 4px 15px rgba(61, 138, 107, 0.15);
}

.task-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  /* 右側預留給絕對定位的 .task-item-actions（刪除／取消 圖示按鈕，
     約 32px 寬 + 14px 右偏移 + 8px gap）避免與「失敗／處理中」徽章重疊。 */
  padding-right: 56px;
}

.task-item-info {
  flex: 1;
}

.task-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #354740;
  margin: 0 0 5px 0;
}

.task-item-meta {
  font-size: 0.85rem;
  color: #747A6F;
  margin-top: 5px;
}

.task-item-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.task-item-status.processing {
  background: #E7F2EE;
  color: #306E55;
}

.task-item-status.completed {
  background: #d4edda;
  color: #155724;
}

.task-item-status.error {
  background: #f8d7da;
  color: #721c24;
}

.task-item-progress {
  margin-top: 15px;
}

.task-progress-row {
  margin-bottom: 10px;
}

.task-progress-row:last-of-type {
  margin-bottom: 0;
}

.task-progress-label {
  display: inline-block;
  font-size: 0.85rem;
  color: #4F544C;
  margin-bottom: 4px;
}

.task-item-progress-bar {
  background-color: #ECEDEB;
  border-radius: 8px;
  height: 25px;
  overflow: hidden;
  position: relative;
}

.task-item-progress-fill {
  background: linear-gradient(135deg, #3D8A6B 0%, #386F59 100%);
  height: 100%;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
}

.task-item-progress-fill.task-progress-done {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.task-item-progress-fill.task-progress-failed {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

/* 狀態訊息：單行灰字；失敗或過長訊息的第一行當提要 */
.task-item-msg {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #747A6F;
  text-align: left;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.task-item-msg.task-item-msg-error {
  color: #b91c1c;
  font-weight: 500;
}

/* 折疊的完整錯誤堆疊：等寬、可捲動，不讓版面被撐開 */
.task-item-errdetails {
  margin-top: 6px;
  font-size: 0.78rem;
  color: #757B70;
}

.task-item-errdetails summary {
  cursor: pointer;
  color: #377F62;
  font-size: 0.78rem;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

.task-item-errdetails summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
}

.task-item-errdetails[open] summary::before {
  content: '▾ ';
}

.task-item-errdetails pre {
  margin: 6px 0 0 0;
  padding: 8px 10px;
  background: #fdf2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-family: var(--tw-font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: #7f1d1d;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 操作鈕區塊：原本一整列、按鈕被撐到全寬 → 改成右上角絕對定位的精簡圖示組，
   只在「卡片右側 padding-right:44px 區域」內出現。force inline-flex/auto-width
   來對抗各頁可能的 button{ display:block } 全域樣式。 */
.task-item-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 6px !important;
  margin: 0 !important;
  z-index: 2;
}
.task-item-actions .task-item-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.task-item-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-item-btn-view {
  background: #3D8A6B;
  color: white;
}

.task-item-btn-view:hover {
  background: #386F59;
}

.task-item-btn-cancel {
  background: #747A6F;
  color: white;
}

.task-item-btn-cancel:hover {
  background: #60655D;
}

@keyframes footerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes footerSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes footerSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .footer-fab-group {
    bottom: 20px;
    right: 20px;
    gap: 3px;
  }

  .footer-fab-group #movetop,
  .footer-fab-group .task-list-btn,
  .footer-fab-group .recent-upload-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  .task-list-modal-content {
    width: 95%;
    max-height: 90vh;
  }
}

/* Footer 區塊 */
footer {
  padding: 16px 0;
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}

.footer-text {
  margin: 0;
  line-height: 1.6;
  font-size: 0.95rem;
  color: #747A6F;
  text-align: center;
}

.footer-text span {
  display: inline;
}

.footer-sep {
  margin: 0 8px;
  opacity: 0.6;
}

.footer-meta {
  font-size: 0.85rem;
  color: #747A6F;
}

/* 統一 Toast：依提供的 Error Dialog 設計（錯誤提示卡片 + SVG 警告 icon）*/
.footer-toast-wrap {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.footer-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  min-width: 280px;                /* 留足空間給 icon + 訊息（約 10em）+ 關閉鈕，避免文字直排 */
  max-width: 360px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(200, 50, 50, 0.08);
  animation: footerSlideUp 0.35s ease;
  line-height: 1.6;
}

.footer-toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-toast-icon svg {
  width: 100%;
  height: 100%;
}

.footer-toast-message {
  flex: 1;
  min-width: 10em;                /* 至少約 10 字寬，讓「無法返回近期檔案」等短句橫向顯示 */
  font-size: 14px;
  line-height: 1.6;
  writing-mode: horizontal-tb;    /* 強制橫書，不受父層直書影響 */
  direction: ltr;
  white-space: nowrap;            /* 強制單行橫向，避免被壓窄時變成直排 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 錯誤提示卡片 */
.footer-toast-error {
  background: #fff0f0;
  border: 1px solid #ffc5c5;
  box-shadow: 0 2px 8px rgba(200, 50, 50, 0.08);
}

.footer-toast-error .footer-toast-icon {
  color: #e05252;
}

.footer-toast-error .footer-toast-message {
  color: #c0392b;
}

.footer-toast-error .footer-toast-close {
  color: #c0392b;
  opacity: 0.6;
}

.footer-toast-error .footer-toast-close:hover {
  opacity: 1;
}

/* 資訊提示（沿用相同版型，藍色系）*/
.footer-toast-info {
  background: #F0F7F5;
  border: 1px solid #CCE4DB;
  box-shadow: 0 2px 8px rgba(50, 116, 90, 0.08);
}

.footer-toast-info .footer-toast-icon {
  color: #32745A;
}

.footer-toast-info .footer-toast-message {
  color: #214D3C;
}

.footer-toast-info .footer-toast-close {
  color: #214D3C;
  opacity: 0.6;
}

.footer-toast-info .footer-toast-close:hover {
  opacity: 1;
}

.footer-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  font-size: 16px;
  transition: opacity 0.2s;
}