/* ═══════════════════════════════════════════════════
   mobile.css — Mobile, Tablet, PWA responsive fixes
   Supports: iPhone SE (375px), Android (360px),
   iPad (768px), iPad Pro (1024px), desktop
   NO design changes — only layout adaptation
═══════════════════════════════════════════════════ */

/* ── SAFE AREA INSETS (notched phones) ── */
nav { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
main { padding-bottom: env(safe-area-inset-bottom); }
.toast { bottom: max(24px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }

/* ── TOUCH TARGETS (min 44px for iOS/Android) ── */
@media (pointer: coarse) {
  .nav-tab { min-height: 40px; min-width: 40px; }
  .mod-btn, .gold-btn, .swap-cta, .confirm-cta { min-height: 48px; }
  .sidebar-item { min-height: 44px; }
  .pct-btn { min-height: 36px; min-width: 36px; }
  .fchip, .mod-tab { min-height: 36px; }
  .token-pick { min-height: 40px; }
  .ob-cancel { min-height: 32px; }
}

/* ── MOBILE ≤ 480px (iPhone SE, small Android) ── */
@media (max-width: 480px) {
  /* Nav: fit everything on small screen */
  nav { height: 52px; padding: 0 6px; gap: 2px; }
  .nav-left { gap: 4px; }
  .nav-logo { min-width: 32px; gap: 0; }
  .nav-logo-img { width: 28px; height: 28px; }
  .nav-logo-img img { width: 22px; height: 22px; }
  .nav-logo-text { font-size: .46rem; }
  .nav-logo-sub { display: none; }
  .nav-tabs { gap: 0; padding: 2px; }
  .nav-tab { padding: 4px 6px; font-size: .5rem; gap: 2px; }
  /* Hide ALL text labels in tabs on mobile — show only icons */
  .nav-tab > span:last-child { display: none !important; }
  .nav-right { gap: 3px; }
  .nav-right > div:first-child { display: none; } /* hide LIVE badge */
  .chain-btn { padding: 3px 6px; font-size: .56rem; }
  #chainName { display: none; }
  .chain-caret { display: none; }
  .connect-btn { padding: 5px 8px; font-size: .54rem; }

  /* Main content */
  main { padding: 8px 8px env(safe-area-inset-bottom); }
  .pools-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .section-title { font-size: 1.1rem; }
  .section-sub { font-size: .7rem; }

  /* Swap card */
  .swap-card { padding: 14px 12px; border-radius: 14px; }
  .swap-header { flex-wrap: wrap; gap: 6px; }
  .amt-input { font-size: 1.2rem; }
  .meta-btns { gap: 3px; }
  .pct-btn { padding: 4px 6px; font-size: .58rem; }

  /* Stats bar */
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-card { padding: 10px 8px; }
  .stat-value { font-size: .9rem; }
  .stat-label { font-size: .5rem; }

  /* Sidebar */
  .sidebar { width: 80vw; max-width: 280px; }

  /* Modals */
  .modal { width: min(96vw, calc(100vw - 16px)) !important; max-height: 90vh; overflow-y: auto; }
  .confirm-modal { width: min(96vw, calc(100vw - 16px)) !important; }
  .wallet-modal { width: min(96vw, calc(100vw - 16px)) !important; }
  .liq-modal { width: min(96vw, calc(100vw - 16px)) !important; }
  .create-pool-modal { width: min(96vw, calc(100vw - 16px)) !important; }

  /* Toast */
  .toast { left: 8px; right: 8px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast-inner { width: 100%; }

  /* Pools table scroll */
  .pools-table-wrap { margin: 0 -8px; padding: 0 8px; }
  table { font-size: .66rem; }
  thead th { padding: 6px 8px; font-size: .52rem; }
  tbody td { padding: 6px 8px; }

  /* Chain dropdown */
  .chain-drop { width: min(272px, calc(100vw - 20px)); right: 0; }

  /* Ticker */
  .ticker-bar { font-size: .58rem; height: 26px; }

  /* Module layouts */
  .mod-layout, .mod-layout-3 { grid-template-columns: 1fr; gap: 10px; }
  .bot-layout { grid-template-columns: 1fr; gap: 10px; }
  .bot-dash-grid { grid-template-columns: 1fr 1fr; }
  .plat-grid { grid-template-columns: 1fr; }
}

/* ── SMALL MOBILE ≤ 375px (iPhone SE, older Android) ── */
@media (max-width: 375px) {
  nav { padding: 0 4px; height: 48px; }
  .nav-left { gap: 2px; }
  .nav-logo { min-width: 26px; }
  .nav-logo-img { width: 24px; height: 24px; }
  .nav-logo-img img { width: 20px; height: 20px; }
  .nav-logo-text { display: none; }
  .nav-tab { padding: 3px 5px; }
  .connect-btn { padding: 4px 6px; font-size: .5rem; }
  .swap-card { padding: 12px 10px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 8px 6px; }
}

/* ── TABLET 481px–768px ── */
@media (min-width: 481px) and (max-width: 768px) {
  nav { padding: 0 14px; height: 60px; }
  .nav-logo-sub { display: none; }
  .nav-tab { padding: 5px 8px; font-size: .62rem; }
  #chainName { font-size: .66rem; }
  main { padding: 12px; }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .mod-layout { grid-template-columns: 1fr 1fr; }
  .sidebar { width: 260px; }
}

/* ── TABLET LANDSCAPE / IPAD 769px–1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {
  nav { padding: 0 20px; }
  .nav-tab { padding: 5px 10px; font-size: .66rem; }
  main { padding: 16px; }
  .sidebar { width: 260px; }
}

/* ── LANDSCAPE MOBILE ── */
@media (max-width: 768px) and (orientation: landscape) {
  nav { height: 48px; }
  .nav-logo-img { width: 28px; height: 28px; }
  .nav-logo-text { font-size: .5rem; }
  .nav-logo-sub { display: none; }
  main { padding: 8px 12px; }
  .stats-bar { grid-template-columns: repeat(5, 1fr); }
  .swap-layout { grid-template-columns: 1fr 1fr; }
}

/* ── PWA STANDALONE MODE ── */
@media (display-mode: standalone) {
  nav { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .ticker-bar { padding-top: env(safe-area-inset-top); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-scroll { animation: none !important; }
  .robot-loading .beam, .robot-loading .beam-dot, .robot-loading .beam-particle { animation: none !important; }
}

/* ── PRINT ── */
@media print {
  nav, .sidebar, .sidebar-overlay, .ticker-bar, .toast, #bgCanvas, #usdw-robot-wrap { display: none !important; }
  main { padding: 0; }
  .tab-content { display: block !important; }
  .mod-card, .swap-card { break-inside: avoid; border: 1px solid #ccc; }
}