/* 2026-08-13b — centered mobile app shell on wide screens.
   Goal: desktop must render the same compact 390px composition as mobile,
   without any viewport-wide headers/tables/fixed controls breaking out. */

@media (min-width: 601px) {
  :root { --ig-app-shell-width: 390px; }

  html {
    min-width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    background: #f4f7fb !important;
  }

  body {
    box-sizing: border-box !important;
    width: var(--ig-app-shell-width) !important;
    max-width: var(--ig-app-shell-width) !important;
    min-width: var(--ig-app-shell-width) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow-x: hidden !important;
  }

  /* Normal page wrappers always stay inside the centered app shell. */
  body > .container,
  body > .container-fluid,
  body > main,
  body > .main-container,
  body > .page-container,
  body > .language-container,
  body > .profile-container,
  body > .fund-container,
  body > .staking-page,
  body > .help-container,
  body > .question-details,
  #cryptos-view,
  .main-container,
  .page-container,
  .language-container,
  .profile-container,
  .fund-container,
  .staking-page,
  .help-container,
  .question-details,
  .ig-header,
  .ig-header .container-fluid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Undo old "physical viewport wide" safeguards. Those rules are correct on
     phones, but on desktop they caused the header to stay at the far left and
     the market table to stretch across the monitor. */
  body.broker-theme .header,
  body.broker-theme .language-header,
  body.broker-theme .trading-header,
  body.broker-theme .staking-header,
  body.broker-theme .profile-header,
  body.broker-theme .top-header,
  body.broker-theme .page-header,
  body.broker-theme.ig-future-page > .trading-header,
  body.broker-theme:not(.has-bottom-nav) > .trading-header,
  body > .header,
  body > .language-header,
  .container-fluid > .header,
  .container-fluid > .language-header,
  .header,
  .language-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  /* Home market list must be edge-to-edge INSIDE the 390px app, not 100vw. */
  body.broker-theme.has-bottom-nav .trading-header,
  body.broker-theme.has-bottom-nav .trading-pairs {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.broker-theme.has-bottom-nav .trading-header > .container-fluid,
  body.broker-theme.has-bottom-nav .trading-pairs > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Title calculations that previously referenced 100vw now reference the
     shell naturally through percentage width. */
  .header-title,
  .language-title {
    max-width: calc(100% - 92px) !important;
  }

  /* Fixed navigation belongs to the centered shell. */
  body > iframe[src*="nav.html"],
  iframe[src="nav.html"] {
    box-sizing: border-box !important;
    width: var(--ig-app-shell-width) !important;
    max-width: var(--ig-app-shell-width) !important;
    min-width: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .bottom-nav {
    box-sizing: border-box !important;
    width: var(--ig-app-shell-width) !important;
    max-width: var(--ig-app-shell-width) !important;
    min-width: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Fixed trading controls must follow the same shell. */
  body.ig-binary-page .buy-sell-buttons,
  body.ig-binary-page > .main-container > .buy-sell-buttons,
  body.ig-binary-page .ig-floating-trade-wrap,
  body.ig-future-page .buy-sell-buttons {
    box-sizing: border-box !important;
    width: var(--ig-app-shell-width) !important;
    max-width: var(--ig-app-shell-width) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Full-screen Bootstrap overlays are visually limited to the app shell on
     desktop while still behaving normally on phones. */
  body > .modal {
    width: var(--ig-app-shell-width) !important;
    max-width: var(--ig-app-shell-width) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}