/**
 * Mobile / Android display polish
 * Loaded last so it can override screenshot-locked 473px styles.
 * IMPORTANT: do not lock html/body height or set overflow-x on scroll roots —
 * that breaks page scrolling on Android Chrome.
 */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  -webkit-tap-highlight-color: rgba(240, 185, 11, 0.12);
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.app-frame {
  width: 100%;
  max-width: min(100vw, var(--phone-w));
  min-height: 100dvh;
}

/* Top inset for notched / punch-hole Android devices */
.top-nav {
  padding-top: max(8px, var(--safe-top));
  min-height: calc(var(--header-h) + var(--safe-top));
}

/* Content: don’t force bottom nav padding on every page */
.app-content {
  padding-left: max(14px, var(--safe-left));
  padding-right: max(14px, var(--safe-right));
  padding-bottom: max(24px, var(--safe-bottom));
  max-width: 100%;
}
.app-frame:has(.bottom-nav) .app-content {
  padding-bottom: calc(118px + var(--safe-bottom));
}

/* Readable controls — stops Android Chrome zoom-on-focus */
@media (max-width: 520px) {
  input,
  select,
  textarea,
  .auth-field input,
  .auth-field select,
  .sc-input,
  .search-input,
  [type="text"],
  [type="email"],
  [type="password"],
  [type="number"],
  [type="tel"],
  [type="search"] {
    font-size: 16px !important;
  }

  .icon-btn,
  .back-btn,
  .bottom-nav-item {
    min-width: 44px;
    min-height: 44px;
  }

  .bottom-nav-item {
    font-size: 10px;
    gap: 2px;
    justify-content: flex-start;
    padding-top: 6px;
  }

  .bottom-nav {
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
    padding-bottom: max(8px, var(--safe-bottom));
  }

  .bottom-nav-inner {
    margin-bottom: 4px;
  }

  /* Dense 4-up grids → 2x2 on phones (keep home metrics / bots summary / landing stats as one row) */
  .stats-4,
  .kpi-grid.cols-4,
  .metrics-row,
  .hm-stats,
  .bt-stats,
  .bd-stats,
  .rf-stats,
  .ct-stats,
  .mct-stats,
  .pro-stats-4,
  .sm-quick,
  .acc-stats,
  .da-kpis,
  .wal-stats,
  .format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stats-4 .stat-card .label { font-size: 11px; }
  .stats-4 .stat-card .value { font-size: 16px; }

  /* Home / bots / performance stats: always one row like the screenshot */
  .hm-metrics,
  .bt-summary,
  .hl-stats,
  .pf-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .hm-met {
    padding: 8px 4px 9px !important;
    min-width: 0;
  }
  .hm-met .k {
    font-size: 8px !important;
    white-space: nowrap !important;
  }
  .hm-met .v {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hm-met .v.gold {
    letter-spacing: -0.02em;
  }

  /* Bot list rows — keep screenshot layout (avatar · id · today · pnl+spark) */
  .bt-row-main {
    grid-template-columns: 34px minmax(0, 1.35fr) minmax(0, 0.72fr) minmax(0, 1fr) !important;
    gap: 8px;
  }
  .bt-row-main .bt-col:first-of-type {
    display: block !important;
  }
  .bt-col-v { font-size: 12.5px !important; }
  .bt-pair .nm { font-size: 13px; }
  .bt-meta { font-size: 10px; }
  .bt-spark svg { width: 48px !important; height: 24px !important; display: block !important; }

  .page-title { font-size: clamp(20px, 5.6vw, 26px); }
  .page-subtitle { font-size: 13px; line-height: 1.4; }

  .btn,
  .btn-primary,
  .btn-create-bot,
  .auth-btn,
  .hl-btn.solid {
    min-height: 44px;
  }

  /* Cards / panels don’t spill past the viewport */
  .card,
  .panel,
  .hl-panel,
  .auth-card,
  .sc,
  .acc,
  table {
    max-width: 100%;
  }

  .table-scroll,
  .tabs,
  .tabs-icons,
  .filter-tabs-row {
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small Android widths (360–390 CSS px) */
@media (max-width: 390px) {
  :root {
    --header-h: 52px;
    --nav-h: 64px;
  }

  .app-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-name { font-size: 16px; }
  .brand-tagline {
    font-size: 7.5px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .brand-live {
    font-size: 10px;
  }

  .bottom-nav-item {
    min-width: 52px;
    font-size: 9.5px;
  }
  .bottom-nav-item span {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-h1,
  .hl-h1 {
    font-size: clamp(24px, 7vw, 28px);
  }

  .hl-hero-ctas {
    flex-wrap: nowrap;
  }
  .hl-hero-ctas .hl-btn {
    flex: 0 0 auto;
  }

  /* Keep bots/copy/rewards as intro | cards (screenshot layout) */
  .hl-panel-row,
  .hl-panel-row.is-rewards {
    grid-template-columns: minmax(112px, 132px) minmax(0, 1fr) !important;
    gap: 8px;
  }
  .hl-panel-intro > .hl-btn {
    margin-top: auto;
    width: fit-content;
  }
}

/* Landscape phones: keep chrome usable */
@media (max-height: 480px) and (orientation: landscape) {
  .top-nav {
    min-height: 44px;
    padding-top: max(4px, var(--safe-top));
  }
  .app-frame:has(.bottom-nav) .app-content {
    padding-bottom: calc(84px + var(--safe-bottom));
  }
  .bottom-nav-inner {
    height: 56px;
    margin-bottom: 2px;
  }
}

/* Prefer system UI fonts when Inter is slow/blocked on mobile networks */
@media (max-width: 520px) {
  body {
    font-family: var(--font), Roboto, 'Noto Sans', 'Helvetica Neue', sans-serif;
  }
}

/* Multi-device push enable toast (phones + laptops) */
.tb-push-toast {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, #1A1D23, #12151A);
  border-bottom: 1px solid #2B3139;
}
.tb-push-toast[hidden] { display: none !important; }
.tb-push-toast-copy {
  flex: 1;
  min-width: 0;
}
.tb-push-toast-copy strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #F0B90B;
  line-height: 1.25;
}
.tb-push-toast-copy span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #848E9C;
}
.tb-push-toast-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tb-push-toast-btn {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  background: #F0B90B;
  color: #0B0E11;
  cursor: pointer;
  white-space: nowrap;
}
.tb-push-toast-x {
  border: 0;
  background: transparent;
  color: #848E9C;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}