/* =============================================================================
   ROB E BANK AI — Mobile Responsive Layout
   Breakpoints:
     ≤ 768px  tablet / mobile  — single-column vertical stack
     ≤ 430px  small mobile     — extra-compact spacing and sizing
   Desktop layout above 768px is ENTIRELY UNCHANGED.
   All trading / Deriv / execution logic is in backend — no changes here.
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════════
   TABLET / MOBILE   max-width: 768px
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Overflow guard ──────────────────────────────────────────────────────────
     Prevents any element from causing horizontal page scroll.
     Individual elements below are also fixed at the source.                    */
  html, body { overflow-x: hidden; }


  /* ── Container ───────────────────────────────────────────────────────────── */
  .container { padding: 10px 10px 36px; }


  /* ── Navigation ──────────────────────────────────────────────────────────── */
  .nav {
    height: auto;
    min-height: 44px;
    padding: 6px 12px;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .nav-brand-text { font-size: 12px; }

  /* Nav links are non-functional placeholders (#) — hide on mobile to
     prevent overflow. The status dot + brand remain fully visible.            */
  .nav-links,
  .nav-divider { display: none; }


  /* ── Hero card ───────────────────────────────────────────────────────────── */
  .hero-card     { padding: 12px 13px; }
  .hero-actions  { flex-wrap: wrap; gap: 6px; }


  /* ── Analyzer header banner ──────────────────────────────────────────────── */
  .analyzer-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }


  /* ── Workspace — two columns → single vertical stack ────────────────────── */
  /* Order: left (Deriv + Strategies) comes first, right (workspace) below.
     This gives the mobile order:
       1. Deriv API Connection
       2. Trading Strategies
       3. Trade X Workspace / Trade History                                     */
  .workspace {
    flex-direction: column;
    gap: 9px;
  }
  .workspace-left {
    width: 100%;
    flex-shrink: unset;
  }
  .workspace-right {
    width: 100%;
    flex: unset;
    min-width: 0;
  }


  /* ── Deriv API Connection card ───────────────────────────────────────────── */
  .deriv-card { padding: 12px 12px; }

  /* Token input row: stack input above the Get API Token button */
  .input-row       { flex-wrap: wrap; gap: 6px; }
  .token-input     { width: 100%; }
  .btn-get-token   { width: 100%; text-align: center; }

  /* Account stat boxes stay 2-col on tablet/mobile — values are short */
  .stat-boxes { grid-template-columns: 1fr 1fr; }


  /* ── Trading Strategies card ─────────────────────────────────────────────── */
  .strategies-card { padding: 12px 12px; }


  /* ── Empty workspace state ───────────────────────────────────────────────── */
  .workspace-card { min-height: 180px; }
  #right-empty    { padding: 32px 16px; }
  .empty-desc     { max-width: 100%; }


  /* ── Trade X workspace ───────────────────────────────────────────────────── */
  .tradex-workspace { gap: 8px; }


  /* ── Settings card ───────────────────────────────────────────────────────── */
  .tx-settings-card { padding: 12px 12px; }

  /* Market / Symbol / Trade Type: 3-column grid → single column.
     Note: the Digit / Duration row has an inline style (1fr 1fr) that CSS
     cannot override, so it correctly stays 2-col on mobile as the wireframe
     shows.                                                                    */
  .tx-selectors-row {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 8px;
  }

  /* Stake buttons: allow wrapping so they never overflow the card */
  .tx-stake-btns   { flex-wrap: wrap; gap: 5px; }
  .stake-btn       { flex: 1 0 28%; padding: 5px 8px; }
  .tx-custom-stake { flex: 1 0 28%; min-width: 68px; width: auto; }


  /* ── Intelligent DIFFERS / MATCHES analyzer card ─────────────────────────── */
  .tx-analyzer-card   { padding: 10px 12px; }
  .tx-analyzer-header { flex-wrap: wrap; gap: 6px; }

  /* Ticks strip: 30 digits × spaces ≈ 650 px at desktop letter-spacing.
     On mobile: reduce spacing and allow wrapping so all digits stay visible
     without causing horizontal scroll.                                         */
  .tx-ticks-strip {
    font-size: 12px;
    letter-spacing: 2px;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
  }


  /* ── Digit board ──────────────────────────────────────────────────────────── */
  .tx-digit-board       { padding: 10px 10px; }
  .tx-digit-board-title { font-size: 9.5px; }
  /* 5-column digit grid already uses 1fr columns — no change needed.
     max-width: 48px on digit-btn keeps buttons from growing too large.        */


  /* ── Execution buttons ───────────────────────────────────────────────────── */
  /* All buttons already use width: 100% — just tighten the gap */
  .tx-exec-section { gap: 6px; }


  /* ── Trade History card ──────────────────────────────────────────────────── */
  .tx-history-card  { padding: 12px 12px; }
  .tx-stats-row     { grid-template-columns: 1fr 1fr; gap: 7px; }
  .tx-stat-value    { font-size: 14px; }

  /* Filter tabs: allow wrapping if all three labels don't fit one row */
  .tx-filter-row { flex-wrap: wrap; gap: 4px; }
  .tx-filter-btn { flex: 1 0 auto; font-size: 10px; padding: 5px 6px; }

  /* Bounded internal scroll on mobile — page stays compact */
  .tx-history-list { max-height: 420px; }

  /* Trade cards: top row wraps for long symbol names */
  .tc-top {
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
  }
  /* Symbol badge: truncate long names rather than breaking layout */
  .tc-sym {
    max-width: calc(100% - 86px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Row label / value pairs: allow wrapping */
  .tc-row { flex-wrap: wrap; gap: 2px; }

} /* end 768px */


/* ═══════════════════════════════════════════════════════════════════════════════
   SMALL MOBILE   max-width: 430px
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── Container ───────────────────────────────────────────────────────────── */
  .container { padding: 8px 8px 28px; }


  /* ── Navigation ──────────────────────────────────────────────────────────── */
  .nav            { padding: 5px 10px; }
  .nav-brand-text { font-size: 11.5px; }


  /* ── Hero card ───────────────────────────────────────────────────────────── */
  .hero-card  { padding: 10px 11px; gap: 10px; }
  .hero-icon  { font-size: 22px; }
  .hero-title { font-size: 12.5px; }
  .hero-desc  { font-size: 10.5px; line-height: 1.45; }


  /* ── Deriv card ──────────────────────────────────────────────────────────── */
  .deriv-card { padding: 10px 10px; }

  /* At ≤430px, account balance can be a long string (e.g. "10,000.00 USD").
     Switch stat boxes to single column so the value always fits.             */
  .stat-boxes { grid-template-columns: 1fr; gap: 5px; }


  /* ── Settings card ───────────────────────────────────────────────────────── */
  .tx-settings-card { padding: 10px 10px; }

  /* Stake buttons: 3 per row at tiny sizes */
  .stake-btn { flex: 1 0 28%; font-size: 10.5px; padding: 5px 5px; }


  /* ── Analyzer card ───────────────────────────────────────────────────────── */
  .tx-analyzer-card { padding: 9px 10px; }
  .tx-ticks-strip   { font-size: 11px; letter-spacing: 1.5px; }
  .tx-rec-digit     { font-size: 28px; }


  /* ── Digit board ──────────────────────────────────────────────────────────── */
  .tx-digit-board { padding: 9px 8px; }
  .digit-btn      { font-size: 12px; }
  .digit-pct      { font-size: 8.5px; }


  /* ── Trade History card ──────────────────────────────────────────────────── */
  .tx-history-card { padding: 10px 10px; }
  .tx-stat-value   { font-size: 13px; }
  .tx-filter-btn   { font-size: 9.5px; padding: 4px 5px; }
  .tc-sym          { font-size: 9.5px; }

} /* end 430px */