/* styles.css - 視覺增強與行動端觸控體驗 */

/* 專用模態彈窗層樣式：獨立於 Tailwind 類別，避免 !important 破壞 md:flex 等響應式佈局 */
.app-modal {
  display: none;
}
.app-modal.open {
  display: flex !important;
}

/* iOS Safe Area Inset 避開瀏海、動態島與底欄 */
:root {
  --sat: env(safe-area-inset-top, 28px);
  --sab: env(safe-area-inset-bottom, 16px);
}

.safe-top-header {
  padding-top: max(env(safe-area-inset-top, 28px), 24px) !important;
}

.safe-bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px) !important;
}

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

/* 點擊水波紋與觸控回饋 */
.tap-highlight {
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.tap-highlight:active {
  transform: scale(0.97);
}

/* 熱度圖色階 */
.heat-0 { background-color: #f8fafc; color: #94a3b8; }
.heat-1 { background-color: #e0e7ff; color: #4338ca; font-weight: 500; }
.heat-2 { background-color: #c7d2fe; color: #3730a3; font-weight: 600; }
.heat-3 { background-color: #a5b4fc; color: #312e81; font-weight: 700; }
.heat-4 { background-color: #818cf8; color: #ffffff; font-weight: 800; }
.heat-5 { background-color: #4f46e5; color: #ffffff; font-weight: 800; }

/* 浮動提示 Toast */
#toast-container {
  pointer-events: none;
  z-index: 9999;
}
.toast-msg {
  animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.25s 1.75s forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* 列印專用樣式 */
@media print {
  header, nav, #toast-container, .no-print, .mobile-bottom-bar {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .print-page {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
}