/* ============================================
   XONE Trading Platform — Mobile Responsive Fixes
   只在手機 (< 768px) 生效，桌面版完全不動
   ============================================ */

@media (max-width: 768px) {

  /* ── 1. 頂欄→48px，字縮小，padding 減半 ── */
  .h-14 {
    height: 3rem !important;
  }
  /* header 內左半（選單+logo）縮間距 */
  .h-14 .flex.items-center.gap-2,
  .h-14 .flex.items-center.gap-3 {
    gap: 0.25rem !important;
  }
  /* 藏掉不重要的文字 */
  .h-14 .hidden.lg\:inline {
    display: none !important;
  }

  /* ── 2. Trading Floor 地圖 + 排行卡 → 上下堆疊 ── */
  /* AgentLauncher 裡的 .flex.flex-1 > .flex 那一層 */
  .flex-1 .flex > .relative.flex-1 + div[class*="border-l"] {
    width: 100% !important;
    min-width: 100% !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid rgba(30,30,48,0.3) !important;
  }
  /* 地圖區域也全寬 */
  .flex-1 .flex > .relative.flex-1 {
    min-height: 260px !important;
  }

  /* ── 3. 排行卡文字不換行 ── */
  .card .text-xs,
  .card [style*="width: 185"] .text-xs {
    white-space: nowrap !important;
  }

  /* ── 4. 所有 table 在手機 → 水平捲動 + 不換行 ── */
  table {
    font-size: 0.6875rem !important;
  }
  table th,
  table td {
    white-space: nowrap !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  /* 表格容器加原生捲動 */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 5. 主內容縮邊距 ── */
  main.p-3,
  main.p-3.md\:p-4 {
    padding: 0.5rem !important;
  }

  /* ── 6. Cards 間距縮小 ── */
  .space-y-3 > * + *,
  .gap-3 {
    --tw-space-y-reverse: 0;
    margin-top: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* ── 7. 標題縮小 ── */
  .orbitron.text-xblue {
    font-size: 0.75rem !important;
  }

  /* ── 8. TAB 按鈕縮小 ── */
  .flex.items-center.gap-1.mb-5 button {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.625rem !important;
  }

  /* ── 9. iOS 輸入不放大 ── */
  input[type="text"],
  input[type="number"],
  input[type="password"] {
    font-size: 16px !important;
  }

  /* ── 10. Card padding 縮小 ── */
  .card.p-5 {
    padding: 0.75rem !important;
  }
}

/* ── 小手機 < 480px ── */
@media (max-width: 480px) {
  /* 市場行情表→卡片式 */
  table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.25rem 0.5rem !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(30,30,48,0.5) !important;
  }
  table thead {
    display: none !important;
  }
  /* 幣種名跨全寬 */
  table tbody tr td:first-child {
    grid-column: 1 / -1 !important;
    font-size: 0.8125rem !important;
  }
}

/* ── PWA standalone safe-area ── */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}