/* =====================================================================
   ArtistBots — Mobile compact layout
   Pages: Documentation, API keys (Dashboard), Wallet, Billing.
   Loaded LAST (see base.html) and wrapped in max-width media queries,
   so desktop / PC layout is completely unchanged.
===================================================================== */

@media (max-width: 720px) {

  /* ---------- Shared: page padding + headings ---------- */
  .docs, .dash, .bill { padding: 20px 14px 70px; }
  .docs h1, .bill h1, .dash-header h1 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 4px; }
  .docs > p, .bill-sub, .dash-header p { font-size: .9rem; margin-bottom: 18px; }
  .dash-header { margin-bottom: 18px; gap: 10px; }
  .dash-avatar { width: 42px; height: 42px; flex-shrink: 0; }

  /* Comfortable tap targets for small buttons */
  .docs .btn-sm, .dash .btn-sm, .bill .btn-sm { min-height: 40px; justify-content: center; }

  /* =================================================================
     1) DOCUMENTATION
  ================================================================= */
  .doc-block { padding: 16px; border-radius: 16px; margin-bottom: 14px; }
  .doc-block h2 { font-size: 1.05rem; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .doc-block p { font-size: .88rem; margin-bottom: 12px; line-height: 1.55; }
  .doc-block pre { font-size: .75rem; padding: 12px; border-radius: 12px; margin-bottom: 12px; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .method-tag { font-size: .72rem; padding: 2px 8px; }
  /* fit the screen instead of scrolling sideways */
  .param-table { font-size: .76rem; min-width: 0; }
  .param-table th, .param-table td { padding: 6px 6px; vertical-align: top; line-height: 1.4; }
  .param-table th { font-size: .64rem; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }
  /* never split a word mid-way, except in the long Description column */
  .param-table th, .param-table td { overflow-wrap: normal; word-break: normal; }
  .param-table td:first-child, .param-table td:first-child code { white-space: nowrap; }
  .param-table th:last-child, .param-table td:last-child { overflow-wrap: anywhere; white-space: normal; }
  .param-table td code { font-size: .74rem; }
  .doc-copy-box { padding: 10px 12px; }
  .doc-copy-box code { font-size: .8rem; }
  .doc-locked { padding: 28px 18px; }
  .doc-locked h2 { font-size: 1.1rem; }
  .doc-locked p { font-size: .88rem; }

  /* =================================================================
     2) API KEYS (Dashboard)
  ================================================================= */
  /* stat cards: 2 per row instead of one huge card per row */
  .dash .stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .dash .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dash .stat-card { padding: 14px; gap: 6px; border-radius: 16px; }
  .dash .stat-label { font-size: .7rem; }
  .dash .stat-value { font-size: 1.25rem; }
  .dash .dash-mini { font-size: .76rem; }

  .dash .key-panel { padding: 16px; border-radius: 18px; margin-bottom: 20px; }
  .dash .key-panel h2 { font-size: 1.2rem; margin-bottom: 4px; }
  .dash .key-panel > p { font-size: .84rem; margin-bottom: 14px; line-height: 1.5; }
  .dash .sub-list { gap: 12px; }
  .dash .sub-card { padding: 14px; border-radius: 14px; }
  .dash .sub-head { margin-bottom: 10px; gap: 8px; }
  .dash .sub-plan { font-size: 1rem; }
  .dash .badge { font-size: .74rem; padding: 3px 10px; }

  .dash .key-box { padding: 10px 12px; margin-bottom: 12px; gap: 8px; border-radius: 12px; }
  .dash .key-box code { font-size: .78rem; line-height: 1.45; }
  .dash .key-box button { width: 100%; justify-content: center; }

  .dash .sub-facts { font-size: .77rem; gap: 4px 14px; margin-bottom: 10px; }
  .dash .sub-actions { gap: 8px; }
  .dash .sub-actions .btn { flex: 1 1 130px; padding: 8px 10px; font-size: .8rem; white-space: nowrap; }
  .dash .sub-note { font-size: .74rem; margin-top: 8px; }
  .dash .key-warning { font-size: .78rem; }
  .dash .past-subs { font-size: .82rem; }
  .dash .key-actions .btn { width: 100%; justify-content: center; }

  /* "Integrate in seconds" code card + usage cards */
  .dash .guide-panel { margin-top: 26px; }
  .dash .guide-panel h2 { font-size: 1.25rem; }
  .dash .guide-sub { font-size: .85rem; }
  .dash .guide-pre { font-size: .74rem; padding: 12px 14px 16px; }
  .dash .usage-head h2 { font-size: 1.2rem; }
  .dash .u-card { padding: 14px; border-radius: 16px; }
  .dash .u-total { font-size: 1.7rem; }

  /* =================================================================
     3) WALLET
  ================================================================= */
  .bill .panel { padding: 16px; border-radius: 18px; margin-bottom: 16px; }
  .bill .panel h2 { font-size: 1.05rem; }

  .bill .wallet { padding: 18px 16px; }
  .bill .wallet::before { width: 170px; height: 170px; right: -60px; top: -80px; }
  .bill .wallet-label { font-size: .7rem; }
  .bill .wallet-balance { font-size: 2rem; margin: 4px 0 2px; }
  .bill .wallet-min { font-size: .76rem; margin-bottom: 14px; line-height: 1.45; }
  .bill .topup-row { flex-direction: column; gap: 10px; }
  .bill .amount-input { min-width: 0; width: 100%; flex: none; }
  .bill .amount-input input { padding: 11px 12px 11px 28px; font-size: 1rem; }  /* >=16px: stops iOS zoom on focus */
  .bill .topup-row .btn { width: 100%; justify-content: center; padding: 12px; }
  .bill .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .bill .chip { padding: 8px 4px; font-size: .8rem; text-align: center; }
  .bill .pay-note { font-size: .72rem; margin-top: 12px; }

  /* Payment history: table -> compact cards (no sideways scrolling) */
  .bill .sec-title { font-size: 1.15rem; }
  .bill .tbl-wrap { border: none; border-radius: 0; overflow: visible; }
  .bill .hist, .bill .hist tbody { display: block; width: 100%; white-space: normal; }
  .bill .hist thead { display: none; }
  .bill .hist tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px;
    grid-template-areas: "desc amt" "date status" "bal bal";
    padding: 12px 14px; margin-bottom: 10px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow);
  }
  .bill .hist td { display: block; padding: 0; border: none; text-align: left; }
  .bill .hist td:nth-child(1) { grid-area: date; font-size: .74rem; color: var(--text-dim); align-self: center; }
  .bill .hist td:nth-child(2) { grid-area: desc; font-weight: 700; font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
  .bill .hist td:nth-child(3) { grid-area: amt; text-align: right; font-size: .95rem; }
  .bill .hist td:nth-child(4) { grid-area: bal; font-size: .74rem; color: var(--text-dim); margin-top: 4px; }
  .bill .hist td:nth-child(4)::before { content: attr(data-label) ": "; }
  .bill .hist td:nth-child(5) { grid-area: status; text-align: right; }
  .bill .hist td .badge { font-size: .68rem; padding: 2px 9px; }
  .bill .hist td[colspan] { grid-column: 1 / -1; grid-area: auto; text-align: center; padding: 18px 0; }
  .bill .hist tr:has(td[colspan]) { display: block; }

  /* =================================================================
     4) BILLING
  ================================================================= */
  .bill .my-subs { gap: 12px; }
  .bill .my-sub { padding: 14px; border-radius: 14px; }
  .bill .state-row { margin-bottom: 10px; gap: 8px; }
  .bill .plan-name { font-size: 1.15rem; }
  .bill .plan-name.gradient-text { font-size: 1.25rem; }
  .bill .meters { gap: 12px; }
  .bill .meter-head { font-size: .78rem; }
  .bill .mini-facts { gap: 10px 18px; margin-top: 14px; padding-top: 12px; font-size: .78rem; }
  .bill .mini-facts b { font-size: .92rem; }
  .bill .my-sub-actions { gap: 8px; margin-top: 12px; }
  .bill .my-sub-actions .btn { flex: 1 1 140px; padding: 8px 10px; font-size: .8rem; white-space: nowrap; }
  .bill .free-note { font-size: .76rem; }
  .bill .plan-upgrade-btn { width: 100%; margin-top: 12px; }
  .bill .no-plan p { font-size: .88rem; }

  .bill p.muted { font-size: .82rem !important; line-height: 1.5; }
  .bill .bill-banner { font-size: .82rem; padding: 11px 13px; margin-bottom: 16px; }

  /* plan cards stay 2-per-row, just tighter */
  .bill .plans { gap: 10px; margin: 14px 0 26px; }
  .bill .plan-card { padding: 14px 12px; gap: 8px; border-radius: 16px; }
  .bill .plans > .plan-card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* odd count: last card full width */
  .bill .plan-flag { top: -9px; left: 10px; font-size: .6rem; padding: 2px 9px; }
  .bill .plan-icon { width: 30px; height: 30px; border-radius: 9px; }
  .bill .plan-card h3 { font-size: .95rem; }
  .bill .plan-desc { font-size: .72rem; line-height: 1.35; }
  .bill .plan-price { font-size: 1.35rem; }
  .bill .plan-price small { display: block; font-size: .68rem; margin-top: 3px; }
  .bill .plan-specs { font-size: .72rem; gap: 5px; }
  .bill .plan-specs .i { width: 13px; height: 13px; flex-shrink: 0; }
  .bill .plan-card .btn { font-size: .78rem; padding: 9px 8px; }
  .bill .plan-hint, .bill .plan-owned { font-size: .7rem; padding: 5px 6px; }

  /* "Plan activated" popup + toasts */
  .key-modal-backdrop { padding: 14px; }
  .key-modal { padding: 20px 16px; border-radius: 20px; }
  .km-icon { width: 46px; height: 46px; border-radius: 14px; }
  .key-modal h3 { font-size: 1.15rem; }
  .km-key { flex-wrap: wrap; padding: 10px 12px; }
  .km-key code { font-size: .8rem; white-space: normal; word-break: break-all; }
  .km-key .btn { width: 100%; justify-content: center; }
  .km-actions .btn { flex: 1 1 100%; justify-content: center; }
  .bill-toast-host { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Very small phones (≤ 380px): plan cards one per row so text never gets squeezed */
@media (max-width: 380px) {
  .bill .plans { grid-template-columns: 1fr; }
  .dash .stats { grid-template-columns: 1fr; }
  .docs h1, .bill h1, .dash-header h1 { font-size: 1.35rem; }
}

/* =====================================================================
   Menu bar / drawer: identical size on EVERY page (phones).
   The home page shrinks the root font-size to 14.5px on phones (home.css), which made the
   menu look smaller there than on every other page. These px values are exactly what the home
   page already renders, so the menu now looks the same everywhere and Home does not change.
   ===================================================================== */
@media (max-width: 600px) {
  .nav-inner, .nav-tools, .notif-wrap, .notif-panel, .notif-list, .nav-overlay, .nav-links,
  .drawer-head, .drawer-profile, .drawer-user, .nav-links-scroll, .nav-links-account { font-size: 14.5px; }
  .nav-inner .brand { font-size: 18.125px; }
  .nav-inner .brand-name { font-size: 17.4px; }
  .notif-badge { font-size: 8.7px; }
  .notif-head { font-size: 13.775px; }
  .notif-head strong { font-size: 14.21px; }
  .notif-empty { font-size: 13.05px; }
  .drawer-avatar { font-size: 15.225px; }
  .drawer-user strong { font-size: 14.21px; }
  .drawer-user small { font-size: 11.31px; }
  .nav-section-label { font-size: 9.57px; letter-spacing: 1.1484px; }
  .nav-links-scroll a { font-size: 13.485px; }
  .nav-avatar { font-size: 13.05px; }
  .nav-links-account .btn { font-size: 13.485px; }
}