/* Import Apple Maps Styles */
@import url('./apple-maps.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Styles */
@layer base {
  /* Native App Base Styles */
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Improve font rendering */
    text-size-adjust: 100%;
    tab-size: 2;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-feature-settings: 'kern' 1, 'liga' 1;
    /* Improve text contrast */
    font-variant-ligatures: common-ligatures;
  }

  /* iOS-style focus styles */
  :focus {
    outline: none;
  }

  :focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
  }

  /* Disable text selection on UI elements */
  button, .mobile-nav-container, .app-header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Enhanced Touch Targets */
  button {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent double-tap zoom on buttons */
  button {
    touch-action: manipulation;
  }

  /* Improved scrolling performance */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* System UI Font Stack */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 
                 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 
                 'Inter', 'Segoe UI', 'Roboto', 'Arial', sans-serif;
  }
}

@layer components {
  /* Result Container */
  .result-container {
    @apply bg-white rounded-lg shadow-sm;
    animation: slideUpIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* Native App Scrollbar */
  .native-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .native-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .native-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  
  .native-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }

  /* Map Container Optimization */
  #map {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }

  /* iOS Style Button */
  .ios-button {
    @apply px-5 py-2.5 bg-blue-500 text-white rounded-full;
    @apply font-medium text-base;
    @apply transition-all duration-200 ease-out;
    @apply active:scale-95 hover:bg-blue-600;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* iOS Style Card */
  .ios-card {
    @apply bg-white rounded-2xl;
    @apply shadow-[0_2px_10px_rgba(0,0,0,0.08)];
    @apply transition-all duration-300;
  }
  
  .ios-card:hover {
    @apply shadow-[0_4px_20px_rgba(0,0,0,0.12)];
  }

  /* Haptic Feedback Animation */
  .haptic-tap {
    animation: hapticFeedback 0.1s ease-out;
  }
  
  @keyframes hapticFeedback {
    0% { transform: scale(1); }
    50% { transform: scale(0.97); }
    100% { transform: scale(1); }
  }

  /* Native Loading State */
  .native-loading {
    @apply flex items-center justify-center p-8;
  }
  
  .native-loading::after {
    content: '';
    @apply w-8 h-8 border-2 border-gray-300;
    @apply border-t-blue-500 rounded-full;
    animation: spin 0.8s linear infinite;
  }

  /* 六爻顯示容器 */
  .hexagram-container {
    @apply flex flex-col-reverse gap-2 my-4 items-center;
  }
  
  /* 六爻線條 */
  .hexagram-line {
    @apply h-3 w-20 relative;
    transition: all 0.3s ease;
  }
  
  /* 陽爻 - 實線 */
  .hexagram-line.yang {
    @apply bg-gray-800;
  }
  
  /* 陰爻 - 虛線（中間斷開） */
  .hexagram-line.yin {
    @apply bg-transparent;
    position: relative;
  }
  
  .hexagram-line.yin::before,
  .hexagram-line.yin::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 38%;
    @apply bg-gray-800;
  }
  
  .hexagram-line.yin::before {
    left: 0;
  }
  
  .hexagram-line.yin::after {
    right: 0;
  }
  
  /* 動爻標記 */
  .hexagram-line.changing {
    position: relative;
  }
  .hexagram-line.changing::after {
    content: '●';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: #d97706;
    font-size: 8px;
  }

  /* 之卦小型六爻圖 */
  .hexagram-container.hexagram-small {
    @apply gap-1;
  }
  .hexagram-small .hexagram-line {
    @apply h-2 w-12;
  }

  /* 爻線懸停效果 */
  .hexagram-line:hover {
    transform: scaleX(1.05);
    @apply shadow-sm;
  }
  
  /* 結果狀態顯示區域 - 共用樣式 */
  .result-display {
    @apply bg-white rounded-lg;
    overflow: visible !important; /* 確保八字邀請卡片能顯示 */
  }

  /* 手機版需要padding - 減少左右padding增加內容寬度 */
  @media (max-width: 767px) {
    .result-display {
      @apply py-6 px-3;
    }
  }
  
  /* 卦象區塊 */
  .hexagram-section {
    @apply text-center mb-6 p-6 bg-gradient-to-b from-gray-50 to-white rounded-lg;
  }
  
  .hexagram-symbol {
    @apply text-6xl mb-4 text-gray-800;
    font-family: 'Noto Sans TC', sans-serif;
  }
  
  .hexagram-name {
    @apply text-2xl font-bold text-gray-800 mb-2;
  }
  
  /* 結果顯示動畫 */
  @keyframes slideUpIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 初始狀態區域 */
  .result-initial-state {
    @apply bg-white p-8 rounded-lg text-center;
    @apply flex flex-col items-center justify-center;
    min-height: 400px;
  }
  
  .initial-icon {
    @apply text-6xl mb-4 text-gray-400;
  }
  
  .initial-title {
    @apply text-xl font-semibold text-gray-700 mb-2;
  }
  
  .initial-subtitle {
    @apply text-gray-500;
  }

  /* 地理數據卡片 */
  .geo-data-grid {
    @apply grid grid-cols-2 gap-3 mb-6;
  }
  
  .geo-data-card {
    @apply p-3 bg-gray-50 rounded-lg;
    @apply border border-gray-200;
    @apply transition-all duration-200;
  }
  
  .geo-data-card:hover {
    @apply bg-gray-100 border-gray-300;
    @apply shadow-sm;
  }
  
  .geo-data-label {
    @apply text-xs text-gray-600 mb-1;
  }
  
  .geo-data-value {
    @apply text-lg font-semibold text-gray-800;
  }
  
  /* 詮釋文字區域 */
  .interpretation-section {
    @apply p-6 bg-blue-50 rounded-lg;
    @apply border border-blue-200;
  }
  
  .interpretation-title {
    @apply text-lg font-semibold text-blue-900 mb-3;
    @apply flex items-center gap-2;
  }
  
  .interpretation-text {
    @apply text-gray-700 leading-relaxed;
    line-height: 1.8;
  }

  /* 手機端響應式調整 */
  @media (max-width: 768px) {
    .hexagram-symbol {
      @apply text-5xl;
    }
    
    .hexagram-name {
      @apply text-xl;
    }
    
    .geo-data-grid {
      @apply grid-cols-1;
    }
    
    .hexagram-line {
      @apply w-16;
    }
  }

  /* 載入動畫點 */
  .loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
  }
  
  @keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
  }

  /* 地理數據顯示優化 */
  #geo-data-display {
    @apply bg-gray-50 p-4 rounded-lg;
  }
  
  #geo-data-display .data-grid {
    @apply grid grid-cols-2 gap-3;
  }
  
  #geo-data-display .data-item {
    @apply flex justify-between items-center;
    @apply p-2 bg-white rounded;
  }
  
  #geo-data-display .data-label {
    @apply text-sm text-gray-600;
  }
  
  #geo-data-display .data-value {
    @apply font-semibold text-gray-900;
  }

  /* 桌面版特定樣式 */
  @media (min-width: 1024px) {
    .desktop-calculate-btn {
      @apply px-6 py-3 text-base;
      @apply hover:shadow-lg transform hover:-translate-y-0.5;
      @apply transition-all duration-200;
    }
    
    .desktop-result-area {
      @apply h-full overflow-y-auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    
    .desktop-result-area::-webkit-scrollbar {
      width: 8px;
    }
    
    .desktop-result-area::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .desktop-result-area::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }
  }

  /* 設定面板樣式 */
  .settings-panel {
    @apply bg-white rounded-lg shadow-lg p-6;
    @apply border border-gray-200;
  }
  
  .settings-title {
    @apply text-lg font-semibold text-gray-800 mb-4;
    @apply flex items-center justify-between;
  }
  
  .settings-group {
    @apply space-y-4 mb-6;
  }
  
  .setting-item {
    @apply flex flex-col space-y-2;
  }
  
  .setting-label {
    @apply text-sm font-medium text-gray-700;
    @apply flex items-center gap-2;
  }
  
  .setting-description {
    @apply text-xs text-gray-500 mt-1;
  }
  
  .setting-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    @apply transition-colors duration-200;
  }
  
  .setting-slider {
    @apply w-full;
  }
  
  .setting-value {
    @apply text-sm font-mono text-blue-600 ml-2;
  }
  
  /* 進階設定開關 */
  .settings-toggle {
    @apply flex items-center justify-center;
    @apply px-4 py-2 text-sm text-gray-600;
    @apply hover:text-gray-800 hover:bg-gray-100;
    @apply rounded-md transition-colors duration-200;
    @apply cursor-pointer select-none;
  }
  
  .settings-toggle-icon {
    @apply ml-2 transform transition-transform duration-200;
  }
  
  .settings-toggle.active .settings-toggle-icon {
    @apply rotate-180;
  }

  /* 參數重置按鈕 */
  .reset-settings-btn {
    @apply px-4 py-2 text-sm;
    @apply bg-gray-100 text-gray-700;
    @apply hover:bg-gray-200;
    @apply rounded-md transition-colors duration-200;
  }
  
  .save-settings-btn {
    @apply px-4 py-2 text-sm;
    @apply bg-blue-600 text-white;
    @apply hover:bg-blue-700;
    @apply rounded-md transition-colors duration-200;
  }

  /* 響應式設定面板 */
  @media (max-width: 768px) {
    .settings-panel {
      @apply p-4;
      @apply max-h-[60vh] overflow-y-auto;
    }
    
    .setting-item {
      @apply space-y-1;
    }
    
    .settings-group {
      @apply space-y-3 mb-4;
    }
  }

  /* 用戶認證樣式 */
  .auth-modal {
    @apply fixed inset-0 z-50 flex items-center justify-center;
    @apply bg-black bg-opacity-50;
    animation: fadeIn 0.2s ease-out;
  }
  
  .auth-modal-content {
    @apply bg-white rounded-2xl shadow-2xl;
    @apply w-full max-w-md mx-4 p-6;
    animation: slideUpIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .auth-title {
    @apply text-2xl font-bold text-gray-800 text-center mb-6;
  }
  
  .auth-form {
    @apply space-y-4;
  }
  
  .auth-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply transition-all duration-200;
  }
  
  .auth-button {
    @apply w-full py-3 bg-blue-600 text-white rounded-lg;
    @apply font-medium hover:bg-blue-700;
    @apply transition-colors duration-200;
    @apply active:scale-[0.98];
  }
  
  .auth-divider {
    @apply relative my-6;
  }
  
  .auth-divider::before {
    content: '';
    @apply absolute inset-0 flex items-center;
    @apply border-t border-gray-300;
  }
  
  .auth-divider span {
    @apply relative px-3 bg-white text-sm text-gray-500;
  }
  
  .google-signin-btn {
    @apply w-full py-3 bg-white border border-gray-300 rounded-lg;
    @apply flex items-center justify-center gap-3;
    @apply font-medium text-gray-700;
    @apply hover:bg-gray-50 hover:border-gray-400;
    @apply transition-all duration-200;
  }
  
  .google-icon {
    @apply w-5 h-5;
  }

  /* 用戶菜單樣式 */
  .user-menu {
    @apply absolute right-0 top-12 mt-2;
    @apply bg-white rounded-lg shadow-lg;
    @apply border border-gray-200;
    @apply py-2 w-48;
    @apply opacity-0 invisible;
    @apply transform scale-95 origin-top-right;
    @apply transition-all duration-200;
  }
  
  .user-menu.active {
    @apply opacity-100 visible scale-100;
  }
  
  .user-menu-item {
    @apply px-4 py-2 text-sm text-gray-700;
    @apply hover:bg-gray-100;
    @apply transition-colors duration-150;
    @apply cursor-pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
  }
  
  .user-menu-item.danger {
    @apply text-red-600 hover:bg-red-50;
  }
  
  .user-menu-divider {
    @apply my-1 border-t border-gray-200;
  }

  /* Toggle Switch（用戶選單內） */
  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
  }

  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 20px;
    transition: background-color 0.2s;
  }

  .toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
  }

  .toggle-switch input:checked + .toggle-slider {
    background-color: #6366f1;
  }

  .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
  }

  /* 用戶頭像 */
  .user-avatar {
    @apply w-8 h-8 rounded-full;
    @apply bg-gradient-to-br from-blue-500 to-purple-600;
    @apply flex items-center justify-center;
    @apply text-white text-sm font-medium;
    @apply cursor-pointer select-none;
    @apply transition-transform duration-200;
  }
  
  .user-avatar:hover {
    @apply transform scale-110;
  }

  /* Toast 通知樣式 */
  .toast-container {
    @apply fixed top-4 right-4 z-50;
    @apply space-y-2;
  }
  
  .toast {
    @apply bg-white rounded-lg shadow-lg;
    @apply border-l-4 p-4 min-w-[300px] max-w-md;
    @apply transform translate-x-0;
    animation: slideInRight 0.3s ease-out;
  }
  
  .toast.success {
    @apply border-green-500;
  }
  
  .toast.error {
    @apply border-red-500;
  }
  
  .toast.info {
    @apply border-blue-500;
  }
  
  .toast.warning {
    @apply border-yellow-500;
  }
  
  .toast-message {
    @apply text-gray-800 text-sm;
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* 查詢歷史樣式 */
  .query-history-modal {
    @apply fixed inset-0 z-50 flex items-center justify-center;
    @apply bg-black bg-opacity-50 p-4;
  }
  
  .query-history-content {
    @apply bg-white rounded-xl shadow-2xl;
    @apply w-full max-w-4xl max-h-[85vh];
    @apply flex flex-col;
    animation: fadeInScale 0.3s ease-out;
  }
  
  .query-history-header {
    @apply px-6 py-4 border-b border-gray-200;
    @apply flex items-center justify-between;
  }
  
  .query-history-title {
    @apply text-xl font-semibold text-gray-800;
  }
  
  .query-history-body {
    @apply flex-1 overflow-y-auto p-6;
  }
  
  .query-card {
    @apply bg-gray-50 rounded-lg p-4 mb-4;
    @apply border border-gray-200;
    @apply hover:bg-gray-100 hover:border-gray-300;
    @apply transition-all duration-200;
    @apply cursor-pointer;
  }
  
  .query-card-header {
    @apply flex items-center justify-between mb-3;
  }
  
  .query-date {
    @apply text-sm text-gray-600;
  }
  
  .query-location {
    @apply font-medium text-gray-800 mb-2;
  }
  
  .query-hexagram {
    @apply flex items-center gap-3 mb-3;
  }
  
  .query-hexagram-symbol {
    @apply text-3xl;
  }
  
  .query-hexagram-name {
    @apply font-semibold text-gray-800;
  }
  
  .query-interpretation {
    @apply text-sm text-gray-600 line-clamp-2;
  }
  
  .query-geo-data {
    @apply grid grid-cols-3 gap-2 mt-3 pt-3 border-t border-gray-200;
    @apply text-xs text-gray-500;
  }
  
  .query-actions {
    @apply flex gap-2 mt-3;
  }
  
  .rerun-query,
  .delete-query {
    @apply px-3 py-1 text-xs rounded;
    @apply transition-all duration-200;
  }
  
  .rerun-query {
    @apply bg-blue-100 text-blue-700 hover:bg-blue-200;
  }
  
  .delete-query {
    @apply bg-red-100 text-red-700 hover:bg-red-200;
  }
  
  /* 空狀態 */
  .empty-state {
    @apply text-center py-12;
  }
  
  .empty-icon {
    @apply text-6xl text-gray-300 mb-4;
  }
  
  .empty-title {
    @apply text-lg font-medium text-gray-600 mb-2;
  }
  
  .empty-subtitle {
    @apply text-sm text-gray-500;
  }
  
  /* 載入狀態 */
  .loading-spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300;
    @apply border-t-blue-600 rounded-full;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Line clamp utility */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 數據來源標籤 */
  .data-source-badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
    @apply bg-blue-100 text-blue-800;
  }
  
  .data-source-badge.cached {
    @apply bg-green-100 text-green-800;
  }
  
  .data-source-badge.mock {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .confidence-indicator {
    @apply inline-flex items-center gap-1 text-xs text-gray-600;
  }
  
  .confidence-bar {
    @apply w-20 h-2 bg-gray-200 rounded-full overflow-hidden;
  }
  
  .confidence-fill {
    @apply h-full bg-gradient-to-r from-yellow-400 to-green-500;
    transition: width 0.5s ease-out;
  }

  /* 成本節省指示器 */
  .cost-savings-badge {
    @apply inline-flex items-center px-3 py-1;
    @apply bg-gradient-to-r from-green-50 to-emerald-50;
    @apply text-green-700 text-xs font-medium;
    @apply rounded-full border border-green-200;
  }
  
  .cost-savings-icon {
    @apply w-4 h-4 mr-1;
  }

  /* 滑動指示器 */
  .slide-indicator {
    @apply absolute bottom-4 left-1/2 transform -translate-x-1/2;
    @apply flex gap-2;
  }
  
  .slide-dot {
    @apply w-2 h-2 rounded-full bg-gray-300;
    @apply transition-all duration-300;
  }
  
  .slide-dot.active {
    @apply w-8 bg-blue-500;
  }

  /* 分析範圍指示器 */
  .range-indicator {
    @apply absolute top-4 right-4;
    @apply bg-white bg-opacity-90 backdrop-blur-sm;
    @apply px-3 py-2 rounded-full;
    @apply text-xs font-medium text-gray-700;
    @apply shadow-md;
  }
  
  .range-value {
    @apply text-blue-600 font-bold;
  }

  /* 回饋按鈕動畫 */
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  .pulse-animation {
    animation: pulse 2s infinite;
  }

  /* 查詢記錄項目動畫 */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .query-item-enter {
    animation: slideInLeft 0.3s ease-out;
  }

  /* 自適應卡片網格 */
  .adaptive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }
  
  @media (max-width: 640px) {
    .adaptive-grid {
      grid-template-columns: 1fr;
    }
  }

  /* 地理數據視覺化 */
  .geo-visualization {
    @apply relative p-4 bg-gradient-to-br from-blue-50 to-purple-50;
    @apply rounded-lg border border-blue-200;
  }
  
  .geo-chart {
    @apply w-full h-32;
  }
  
  .geo-legend {
    @apply flex justify-between mt-3 text-xs text-gray-600;
  }

  /* 交互提示 */
  .interaction-hint {
    @apply absolute -top-8 left-1/2 transform -translate-x-1/2;
    @apply bg-gray-800 text-white text-xs px-3 py-1 rounded;
    @apply opacity-0 pointer-events-none;
    @apply transition-opacity duration-200;
  }
  
  .interaction-hint::after {
    content: '';
    @apply absolute top-full left-1/2 transform -translate-x-1/2;
    @apply border-4 border-transparent border-t-gray-800;
  }
  
  *:hover > .interaction-hint {
    @apply opacity-100;
  }

  /* 版本標記 */
  .version-badge {
    @apply fixed bottom-4 left-4;
    @apply bg-gray-900 bg-opacity-75 text-white;
    @apply px-3 py-1 rounded-full text-xs;
    @apply backdrop-blur-sm;
  }

  /* 歷史記錄篩選器 */
  .history-filter {
    @apply flex gap-2 mb-4 p-2 bg-gray-100 rounded-lg;
  }
  
  .filter-chip {
    @apply px-3 py-1 rounded-full text-sm;
    @apply bg-white text-gray-600 border border-gray-300;
    @apply cursor-pointer transition-all duration-200;
  }
  
  .filter-chip.active {
    @apply bg-blue-500 text-white border-blue-500;
  }
  
  .filter-chip:hover:not(.active) {
    @apply bg-gray-50 border-gray-400;
  }

  /* 進度條動畫 */
  @keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
  }
  
  .progress-bar {
    @apply h-1 bg-blue-500 rounded-full;
    animation: progress 3s ease-out;
  }

  /* 浮動操作按鈕 */
  .fab {
    @apply fixed bottom-20 right-6;
    @apply w-14 h-14 bg-blue-600 text-white;
    @apply rounded-full shadow-lg;
    @apply flex items-center justify-center;
    @apply hover:bg-blue-700 active:scale-95;
    @apply transition-all duration-200;
    @apply z-40;
  }
  
  .fab-icon {
    @apply w-6 h-6;
  }

  /* 地標標記動畫 */
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  .landmark-marker {
    animation: bounce 2s ease-in-out infinite;
  }

  /* 範圍圈動畫 */
  @keyframes ripple {
    0% {
      transform: scale(0.95);
      opacity: 1;
    }
    100% {
      transform: scale(1.05);
      opacity: 0;
    }
  }
  
  .range-circle-pulse {
    animation: ripple 2s ease-out infinite;
  }

  /* 卦象轉換動畫 */
  @keyframes hexagramReveal {
    0% {
      opacity: 0;
      transform: scale(0.8) rotateY(90deg);
    }
    50% {
      transform: scale(1.1) rotateY(0deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotateY(0deg);
    }
  }
  
  .hexagram-reveal {
    animation: hexagramReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    perspective: 1000px;
  }

  /* 互動式教學提示 */
  .tutorial-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50;
    @apply flex items-center justify-center;
  }
  
  .tutorial-spotlight {
    @apply absolute bg-white bg-opacity-10;
    @apply border-2 border-white border-dashed;
    @apply rounded-lg;
    animation: pulse 2s infinite;
  }
  
  .tutorial-tooltip {
    @apply absolute bg-white rounded-lg shadow-xl;
    @apply p-4 max-w-xs;
    @apply transform -translate-y-full -mt-4;
  }
  
  .tutorial-arrow {
    @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full;
    @apply w-0 h-0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
  }

  /* 錯誤狀態樣式 */
  .error-state {
    @apply bg-red-50 border border-red-200 rounded-lg p-6;
    @apply text-center;
  }
  
  .error-icon {
    @apply text-4xl text-red-400 mb-3;
  }
  
  .error-title {
    @apply text-lg font-semibold text-red-800 mb-2;
  }
  
  .error-message {
    @apply text-sm text-red-600;
  }
  
  .retry-button {
    @apply mt-4 px-4 py-2 bg-red-100 text-red-700;
    @apply rounded-lg hover:bg-red-200;
    @apply transition-colors duration-200;
  }

  /* 成功狀態動畫 */
  @keyframes checkmark {
    0% {
      stroke-dashoffset: 100;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  .success-checkmark {
    stroke-dasharray: 100;
    animation: checkmark 0.5s ease-out forwards;
  }

  /* 資料更新指示器 */
  .update-indicator {
    @apply absolute -top-1 -right-1;
    @apply w-3 h-3 bg-green-500 rounded-full;
    @apply animate-pulse;
  }
  
  .update-indicator::after {
    content: '';
    @apply absolute inset-0 bg-green-500 rounded-full;
    animation: ripple 1.5s ease-out infinite;
  }

  /* 查詢歷史時間軸 */
  .timeline {
    @apply relative pl-8;
  }
  
  .timeline::before {
    content: '';
    @apply absolute left-3 top-0 bottom-0;
    @apply w-0.5 bg-gray-300;
  }
  
  .timeline-item {
    @apply relative mb-6;
  }
  
  .timeline-dot {
    @apply absolute left-0 w-6 h-6;
    @apply bg-white border-2 border-blue-500 rounded-full;
    @apply -translate-x-1/2;
  }
  
  .timeline-content {
    @apply ml-6;
  }

  /* 統計圖表樣式 */
  .stat-card {
    @apply bg-white rounded-lg p-4 shadow-sm;
    @apply border border-gray-200;
  }
  
  .stat-value {
    @apply text-2xl font-bold text-gray-800;
  }
  
  .stat-label {
    @apply text-sm text-gray-600 mt-1;
  }
  
  .stat-change {
    @apply text-xs mt-2;
    @apply flex items-center gap-1;
  }
  
  .stat-change.positive {
    @apply text-green-600;
  }
  
  .stat-change.negative {
    @apply text-red-600;
  }

  /* 快捷鍵提示 */
  .keyboard-shortcut {
    @apply inline-flex items-center gap-1;
    @apply text-xs text-gray-600;
  }
  
  .key {
    @apply px-2 py-1 bg-gray-100 rounded;
    @apply border border-gray-300;
    @apply font-mono text-xs;
  }

  /* 動畫延遲類 */
  .delay-100 { animation-delay: 100ms; }
  .delay-200 { animation-delay: 200ms; }
  .delay-300 { animation-delay: 300ms; }
  .delay-400 { animation-delay: 400ms; }
  .delay-500 { animation-delay: 500ms; }

  /* 淡入淡出過渡 */
  .fade-enter {
    opacity: 0;
    transform: translateY(10px);
  }
  
  .fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
  }
  
  .fade-exit {
    opacity: 1;
    transform: translateY(0);
  }
  
  .fade-exit-active {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
  }

  /* 頁面過渡動畫 */
  @keyframes pageTransition {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .page-enter {
    animation: pageTransition 0.5s ease-out;
  }

  /* 查詢卡片懸停效果 */
  .query-card .rerun-query,
  .query-card .delete-query {
    @apply opacity-60 hover:opacity-100 transition-opacity duration-200;
  }
  
  .query-card:hover .rerun-query,
  .query-card:hover .delete-query {
    @apply opacity-80;
  }
  
  /* 響應式樣式 */
  @media (max-width: 640px) {
    #query-history-modal .max-w-4xl {
      @apply max-w-full mx-2;
    }
    
    .query-card {
      @apply text-sm;
    }
    
    .query-card .grid-cols-3 {
      @apply text-xs;
    }
  }
  
  /* Mobile Loading State Styles */
  #loading-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 2rem;
    text-align: center;
    transition: opacity 0.3s ease;
  }

  #loading-state .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  #loading-state .loading-spinner {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #loading-state .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  #loading-state .loading-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
  }

  #loading-state .loading-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }

  #loading-state .loading-progress {
    margin-top: 1rem;
  }

  #loading-state .progress-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  #loading-state .progress-dots .dot {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
  }

  #loading-state .progress-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
  }

  #loading-state .progress-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
  }

  #loading-state .loading-status {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
  }

  /* Desktop Loading State Styles */
  #desktop-loading-state {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
  }
  
  #desktop-loading-state .loading-content {
    max-width: 320px;
  }
  
  #desktop-loading-state .loading-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  #desktop-loading-state .loading-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* 八字輸入模態框樣式優化 - 修復小螢幕滾動問題 */
  #bazi-input-modal {
    -webkit-overflow-scrolling: touch;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  #bazi-input-modal .bg-gray-800 {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  
  /* 小螢幕專用優化 */
  @media (max-height: 700px) {
    #bazi-input-modal .bg-gray-800 {
      max-height: 95vh;
    }
    
    #bazi-input-modal .flex-1 {
      padding: 1rem;
    }
    
    #bazi-input-modal .space-y-4 > * {
      margin-bottom: 0.75rem;
    }
  }
  
  /* iPhone 12 mini 等小螢幕設備優化 */
  @media (max-height: 600px) {
    #bazi-input-modal .bg-gray-800 {
      max-height: 98vh;
      margin: 0.25rem;
    }
    
    #bazi-input-modal .p-6 {
      padding: 0.75rem;
    }
    
    #bazi-input-modal .mb-6 {
      margin-bottom: 0.75rem;
    }
    
    #bazi-input-modal .space-y-4 > * {
      margin-bottom: 0.5rem;
    }
  }
  
  /* 設定模態框樣式優化 - 修復小螢幕滾動問題 */
  #settings-modal {
    -webkit-overflow-scrolling: touch;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  #settings-modal .bg-gray-800 {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  
  /* 小螢幕專用優化 */
  @media (max-height: 700px) {
    #settings-modal .bg-gray-800 {
      max-height: 95vh;
    }
    
    #settings-modal .flex-1 {
      padding: 1rem;
    }
    
    #settings-modal .space-y-6 > * {
      margin-bottom: 1rem;
    }
  }
  
  /* iPhone 12 mini 等小螢幕設備優化 */
  @media (max-height: 600px) {
    #settings-modal .bg-gray-800 {
      max-height: 98vh;
      margin: 0.25rem;
    }
    
    #settings-modal .p-6 {
      padding: 0.75rem;
    }
    
    #settings-modal .space-y-6 > * {
      margin-bottom: 0.75rem;
    }
    
    #settings-modal .space-y-4 > * {
      margin-bottom: 0.5rem;
    }
  }

  /* ===== 歷史查詢標記樣式 ===== */

  /* 歷史標記圖標容器 */
  .history-marker-icon {
    background: transparent !important;
    border: none !important;
  }

  /* 歷史標記樣式 */
  .history-marker {
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .history-marker:hover {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5)) !important;
  }

  /* 歷史標記 Popup 樣式 */
  .history-marker-popup .leaflet-popup-content-wrapper {
    @apply rounded-lg shadow-xl;
    padding: 0;
    background: white;
  }

  .history-marker-popup .leaflet-popup-content {
    margin: 0;
    padding: 0;
    min-width: 280px;
  }

  .history-popup {
    @apply p-4;
  }

  .history-popup h4 {
    @apply text-gray-900;
  }

  .history-marker-popup .leaflet-popup-tip {
    @apply bg-white;
  }

  /* 歷史標記控制按鈕 */
  .history-markers-control {
    position: absolute;
    bottom: 140px;
    right: 10px;
    z-index: 1000;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
  }

  .history-markers-control:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .history-markers-toggle {
    @apply w-11 h-11 rounded-lg flex items-center justify-center;
    @apply transition-all duration-200;
    @apply cursor-pointer;
    background: white;
    border: 1px solid #e5e7eb;
  }

  .history-markers-toggle:hover {
    @apply bg-gray-50;
    transform: scale(1.05);
  }

  .history-markers-toggle.active {
    @apply bg-blue-500 text-white border-blue-500;
  }

  .history-markers-toggle svg {
    @apply w-5 h-5;
  }

  /* 歷史標記計數徽章 */
  .history-markers-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid white;
  }

  /* 響應式調整 */
  /* 🔥 電腦版：將按鈕移到桌面面板左側 */
  @media (min-width: 769px) {
    .history-markers-control {
      right: 420px; /* 桌面面板寬度 400px + 20px 間距 */
      bottom: 80px;
    }
  }

  @media (max-width: 768px) {
    .history-markers-control {
      display: none; /* 手機版移到用戶選單，隱藏浮動按鈕 */
    }

    .history-marker-popup .leaflet-popup-content {
      min-width: 260px;
    }
  }

  @media (max-width: 640px) {
    .history-markers-control {
      display: none; /* 手機版移到用戶選單，隱藏浮動按鈕 */
    }

    .history-marker-popup .leaflet-popup-content {
      min-width: 240px;
    }

    .history-popup {
      @apply p-3;
    }
  }

  /* ========================================
     AI 詮釋系統樣式
     ======================================== */

  /* 傳統詮釋區塊 */
  .traditional-interpretation {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-left: 4px solid #6366f1;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .traditional-interpretation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #4f46e5;
    margin-bottom: 1rem;
    font-size: 0.95rem;
  }

  .traditional-icon {
    font-size: 1.25rem;
  }

  .traditional-title {
    letter-spacing: 0.025em;
  }

  .traditional-interpretation-content {
    color: #374151;
    line-height: 2;
    font-size: 1rem;
    white-space: pre-wrap;
    font-family: "Noto Serif TC", "Source Han Serif TC", serif;
    letter-spacing: 0.05em;
    text-align: justify;
  }

  /* 易經原文特殊樣式 */
  .traditional-interpretation-content::first-line {
    font-weight: 600;
    color: #4f46e5;
  }

  /* AI 解說區塊 */
  .ai-interpretation {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    padding: 1.5rem;
    border-radius: 0.75rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .ai-interpretation-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .ai-interpretation-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #d97706;
    font-size: 0.95rem;
  }

  .ai-icon {
    font-size: 1.25rem;
  }

  .ai-interpretation-body {
    color: #374151;
    line-height: 1.8;
    font-size: 0.95rem;
  }

  /* AI Loading 狀態 */
  .ai-loading {
    text-align: center;
    padding: 2rem;
    color: #78716c;
  }

  .ai-loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #f3f4f6;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .ai-loading-text {
    margin-top: 0.75rem;
    font-size: 0.9rem;
  }

  /* AI 不可用狀態 */
  .ai-unavailable {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
  }

  .ai-unavailable-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }

  .ai-unavailable-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  .ai-unavailable-message {
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
  }

  .ai-retry-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: #f59e0b;
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 0.9rem;
  }

  .ai-retry-button:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .ai-retry-button:active {
    transform: translateY(0);
  }

  /* 配額超限狀態 */
  .ai-quota-exceeded {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 0.75rem;
    border: 1px solid #f59e0b;
  }

  .ai-quota-exceeded .ai-unavailable-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .ai-quota-exceeded .ai-unavailable-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  .ai-quota-exceeded .ai-unavailable-message {
    font-size: 0.875rem;
    color: #78350f;
    margin-bottom: 0.75rem;
    line-height: 1.5;
  }

  .ai-quota-info {
    font-size: 0.75rem;
    color: #92400e;
    margin-bottom: 1rem;
    opacity: 0.8;
  }

  .ai-login-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
  }

  .ai-login-button:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
  }

  .ai-login-button:active {
    transform: translateY(0);
  }

  .ai-quota-note {
    font-size: 0.75rem;
    color: #78350f;
    margin-top: 1rem;
    opacity: 0.7;
  }

  /* 響應式設計 */
  @media (max-width: 640px) {
    .traditional-interpretation,
    .ai-interpretation {
      padding: 1.25rem;
      margin-bottom: 1.25rem;
    }

    .traditional-interpretation-header,
    .ai-interpretation-title {
      font-size: 0.875rem;
    }

    .traditional-interpretation-content,
    .ai-interpretation-body {
      font-size: 0.875rem;
    }

    .ai-interpretation-badge {
      font-size: 0.7rem;
      padding: 0.2rem 0.6rem;
    }
  }
}