/* ═══════════════════════════════════════════════════════════
   MOBILE — Touch & Small-Screen Polish
   Loaded LAST so these rules win over earlier stylesheets.
   ═══════════════════════════════════════════════════════════ */

/* ── Touch behavior (all sizes) ── */
button,
a,
.nav-btn,
.stab,
.layer-btn,
.card-item {
  touch-action: manipulation;           /* kills 300ms tap delay + double-tap zoom */
  -webkit-tap-highlight-color: transparent;
}

/* Media can never cause horizontal overflow */
img,
svg,
video,
iframe {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   PHONES (≤ 767px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── iOS Safari: inputs under 16px trigger forced page zoom on
        focus, which is the #1 "site jumps around on my phone" bug.
        Force every field to 16px. ── */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ── iPhone notch / home-indicator safe areas ── */
  :root {
    --statusbar-h: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .statusbar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .floating-whatsapp {
    bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Main nav: proper 48px touch targets, readable labels ──
     Seven tabs no longer fit as equal columns on a 400px screen — the
     labels overlapped. Each button now sizes to its label and the strip
     scrolls sideways (the nav already hides its scrollbar) instead of
     printing "OVERVIEWWORLD MAP". */
  .nav-btn {
    min-height: 48px;
    flex: 1 0 auto;
    min-width: 50px;
    padding: 0 6px;
  }

  .nav-btn__label {
    font-size: 8px;
    letter-spacing: 0.02em;
  }

  /* ── Global overflow guard: nothing scrolls the page sideways ── */
  .tab-panel--scroll {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Long words / URLs / AI prose can't blow out the layout */
  .desk-response,
  .news-card__title,
  .news-card__re-text,
  .card-item,
  .signal-card__chain,
  .signal-card__trigger,
  .country-panel,
  .rd__body,
  .modal,
  .macro-card,
  .dubai-card {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ── World Map tab: better map/sidebar split ── */
  .tab-panel--map .map-wrap {
    min-height: 50vh;
  }

  .tab-panel--map .sidebar {
    max-height: 45vh;
  }

  /* Sidebar tabs: bigger touch targets */
  .stab {
    height: 48px;
    font-size: 11px;
  }

  .sidebar__content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;       /* sheet scroll doesn't drag the page */
  }

  /* Refresh buttons: comfortable tap area */
  .news-refresh-btn {
    min-height: 38px;
    padding: 8px 14px;
  }

  /* Map layer buttons: 36px min */
  .layer-btn {
    height: 36px;
  }

  /* ── Country panel: full-width bottom sheet ── */
  .country-panel {
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
    max-height: 48vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Modals: always scrollable, big close button ── */
  .modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal__close {
    width: 40px;
    height: 40px;
  }

  .consult-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }




  .desk-ask__suggestions {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }

  .desk-ask__suggestions::-webkit-scrollbar {
    display: none;
  }

  .desk-ask__suggestions > * {
    flex-shrink: 0;
    min-height: 36px;
  }

  /* Stock list: taller scroll area on phones so browsing is usable */

  /* Region drawer: full-screen sheet */
  .region-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONES (≤ 479px) — grids that still overflow at 400px+
   minimums collapse to a single column
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  .macro-grid,
  .signals-grid,
  .broadcasts-grid,
  .dubai-grid {
    grid-template-columns: 1fr;
  }


  .section {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

/* ═══════════════════════════════════════════════════════════
   INVESTING COCKPIT — MOBILE
   Loaded last, so these win over css/invest.css.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Tap targets ──
     The star is the primary way to build a watchlist and was a ~22x18px
     hit area. Expand it to a proper touch target without changing the
     visual size of the glyph. ── */
  .invest-row__star {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    font-size: 17px;
    padding: 0;
  }

  .invest-detail__star {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-left: 0;
  }

  .invest-view-btn,
  .invest-sweepbar__run,
  .invest-sweepbar__news,
  .invest-sweepbar__clear { min-height: 42px; }

  /* ── Rows: give symbols room, never let them clip ── */
  .invest-row {
    grid-template-columns: 32px minmax(56px, auto) minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: 52px;
  }

  .invest-row__class { display: none; }

  .invest-row__sym {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .invest-row__name {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Both price and change stay visible — the change is the point of the row.
     The name column absorbs the squeeze instead. */
  .invest-row__price { font-size: 11px; text-align: right; }
  .invest-row__chg { font-size: 10px; min-width: 46px; }

  /* ── List / detail proportions ── */
  .invest-list { max-height: 46vh; }

  /* ── Detail header ── */
  .invest-detail__head { gap: var(--space-3); }
  .invest-detail__sym { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xl); }
  .invest-detail__price { font-size: var(--text-xl); }

  /* ── TradingView widgets ── */
  .tv-tape { height: 76px; }
  .tv-view__body { height: 68vh; min-height: 380px; }
  #invest-tv { height: 260px; }

  /* ── Advisor output ── */
  .invest-advisor__head { gap: var(--space-3); }
  .invest-call { gap: var(--space-2); }
  .invest-call__badge { font-size: var(--text-sm); padding: 5px 12px; }

  /* ── Watchlist news + sweep ── */
  .wnews__item { padding: var(--space-3) var(--space-4); min-height: 52px; }
  .wnews__group-head { padding: var(--space-3) var(--space-4) var(--space-2); }
  .wnews__name { display: none; }
  .sweep__item { padding: var(--space-3) var(--space-4); }
  .sweep__head { flex-wrap: wrap; }

  /* ── Profile modal: full screen on a phone ── */
  .profile-overlay { padding: 0; align-items: stretch; }

  .profile-modal {
    max-width: none;
    max-height: none;
    min-height: 100%;
    border: none;
    border-radius: 0;
  }

  .profile-modal__header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
  }

  .profile-form__actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    padding-top: var(--space-3);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    margin-bottom: 0;
  }
}

/* Very small phones */
@media (max-width: 419px) {
  .invest-row { grid-template-columns: 28px minmax(50px, auto) minmax(0, 1fr) auto auto; }
  .invest-row__name { display: none; }
  .invest-detail__sym { font-size: var(--text-lg); }
  .tv-view__body { height: 62vh; min-height: 340px; }
  .invest-profile-chip__value { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Landscape phones: the modal and widgets must not exceed the viewport */
@media (max-height: 500px) and (max-width: 900px) {
  .profile-modal { min-height: auto; max-height: 100vh; }
  .tv-view__body { height: 82vh; min-height: 260px; }
  .invest-list { max-height: 60vh; }
}