/* ── Mobile optimisation ─────────────────────────────────────────────────────
   Breakpoints:
   ≤ 640px  — phones (main mobile target)
   ≤ 400px  — small phones
   640–960px — tablets
────────────────────────────────────────────────────────────────────────────── */

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  nav { padding: 0 24px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  PHONE  ≤ 640px                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Nav ──────────────────────────────────────────────────────────────── */
  nav { padding: 0 20px !important; }
  nav > div { gap: 12px !important; }

  /* Hide secondary text links — keep avatars, CTAs, theme toggle */
  nav a[style*="color:#888"],
  nav a[style*="color: #888"] { display: none !important; }

  /* Re-show the single link on simple auth pages */
  nav > a[href="/login.html"],
  nav > a[href="/signup.html"] { display: flex !important; }

  /* ── Main content ─────────────────────────────────────────────────────── */
  main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Top padding — keep content comfortably below the fixed nav */
  [style*="padding-top:120px"] { padding-top: 104px !important; }
  [style*="padding-top:100px"] { padding-top: 96px !important; }
  [style*="padding-top:80px"]  { padding-top: 80px !important; }

  /* ── Grids ────────────────────────────────────────────────────────────── */

  /* 5-col feature grid → 2-col with breathing room */
  [style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* 4-col stat grids → 2-col */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* 2-col grids → single col */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Pricing cards */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 20px !important;
  }

  /* results.html main layout */
  .results-main-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* results sub-grids */
  .results-two-col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── Cards: more internal breathing room ──────────────────────────────── */
  .card { padding: 20px !important; }

  /* Override specific tight paddings */
  .card[style*="padding:16px"] { padding: 20px !important; }
  .card[style*="padding:20px"] { padding: 20px !important; }

  /* Pricing cards keep their generous padding */
  .pricing-grid .card { padding: 28px 24px !important; }

  /* ── Section spacing ──────────────────────────────────────────────────── */
  [style*="margin-bottom:12px"] { margin-bottom: 16px !important; }
  [style*="margin-bottom:10px"] { margin-bottom: 14px !important; }
  [style*="gap:10px"]           { gap: 14px !important; }
  [style*="gap:12px"]           { gap: 14px !important; }

  /* ── Upload zone ──────────────────────────────────────────────────────── */
  [style*="padding:52px 32px"] { padding: 40px 24px !important; }

  /* ── Chat panel: unstick, comfortable height ──────────────────────────── */
  .chat-panel {
    position: static !important;
    height: 460px !important;
    top: auto !important;
  }

  /* ── Transaction description truncation ──────────────────────────────── */
  .tx-desc { max-width: 170px !important; }

  /* ── Flex rows: allow wrapping with proper spacing ────────────────────── */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* ── Forms: full width on mobile ──────────────────────────────────────── */
  [style*="max-width:420px"],
  [style*="max-width:460px"],
  [style*="max-width:380px"] {
    max-width: 100% !important;
  }

  /* ── Typography: scale down large headings ────────────────────────────── */
  h1[style*="font-size:28px"] { font-size: 24px !important; }
  h1[style*="font-size:26px"] { font-size: 22px !important; }

  /* ── Footer: more padding ─────────────────────────────────────────────── */
  footer { padding: 40px 20px !important; }
  footer > div { gap: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  SMALL PHONE  ≤ 400px                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 2-col feature grid stays 2-col but cards get more padding */
  [style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stat grids collapse to 1-col for more breathing room */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hide brand text on tiny screens, keep logo icon */
  nav span[style*="font-size:15px"] { display: none !important; }

  .chat-panel { height: 400px !important; }

  /* Ensure cards never feel cramped */
  .card { padding: 18px 16px !important; }
}