/**
 * Mobile shell width rules.
 * Below 426px: full viewport (phones).
 * 426px–767px: centered 426px frame (tablet-ish mobile).
 */

html:not(.app-layout--desktop) {
  html,
  body,
  #app {
    min-height: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  body {
    overscroll-behavior: none;
  }

  .desktopConfig,
  .app-main {
    min-height: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .app-main > * {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .app-dock-add-bar,
  .wallet-card-slider {
    box-sizing: border-box;
  }

  @media screen and (max-width: 425.98px) {
    body {
      display: block !important;
      width: 100% !important;
      overflow-x: hidden;
    }

    #app,
    .desktopConfig,
    .app-main,
    .main-with-bottom-chrome,
    .main-with-bottom-chrome-inner {
      width: 100% !important;
      max-width: 100vw !important;
      min-width: 0 !important;
      margin: 0 !important;
    }

    .wrap-fix,
    .bottom-appbar {
      width: 100% !important;
      max-width: 100vw !important;
      left: 0 !important;
      right: 0 !important;
      margin: 0 !important;
      transform: none !important;
    }

    .app-dock-add-bar,
    .wallet-card-slider {
      width: 100% !important;
      max-width: 100vw !important;
      left: 0 !important;
      right: 0 !important;
      margin: 0 !important;
      transform: none !important;
    }
  }

  @media screen and (min-width: 426px) and (max-width: 767.98px) {
    body {
      display: flex !important;
      justify-content: center;
    }

    .desktopConfig {
      width: 426px !important;
      max-width: 426px !important;
    }

    .wrap-fix,
    .bottom-appbar {
      width: 426px !important;
      max-width: 426px !important;
      left: 50% !important;
      right: auto !important;
      margin: 0 !important;
      transform: translateX(-50%) !important;
    }

    .app-dock-add-bar,
    .wallet-card-slider {
      width: 426px !important;
      max-width: 426px !important;
      left: 50% !important;
      right: auto !important;
      margin: 0 !important;
      transform: translateX(-50%) !important;
    }
  }
}