/* ============================================================
   Desktop frame

   The exchange is one mobile-first UI at every viewport. Above the frame width
   this keeps that layout exactly as it is and simply centres it in a
   phone-width column, so a desktop browser shows the same app instead of a
   stretched one — chrome, content and footer alike.

   Loading this file *is* the opt-in: the selectors below are deliberately
   unscoped, so a page joins the frame by including
   ~{fragments/mobile-frame :: head} and leaves it by not doing so. The admin,
   worker, owner, manager and support panels never include it and are
   untouched. Its companion, mobile-frame.js, re-evaluates width media queries
   against the frame width so the pages still on the legacy layout adopt their
   phone arrangement rather than a squeezed desktop one.
   ============================================================ */
:root { --mchrome-frame: 540px; }

@media (min-width: 541px) {
  /* html keeps a non-visible overflow so the body's own overflow is not
     propagated up to the viewport: the frame, not the window, is what clips.
     Legacy content that is wider than a phone then spills the way it does on a
     phone — out of sight — instead of across the desktop background. */
  html { background: #04070B; overflow-x: hidden; }

  body {
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: var(--mchrome-frame);
    /* mobile-chrome.css sets body margin-top with !important, so the
       horizontal centring has to win the cascade the same way. */
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100vh;
    border-left: 1px solid #151B24;
    border-right: 1px solid #151B24;
  }

  /* Fixed layers resolve against the viewport, not against the body, so every
     full-bleed one has to be re-centred on the frame by hand. A page's own
     layers (bottom sheets, modal backdrops, action bars) opt in by adding
     .mchrome-layer next to their own class.

     These win with !important on purpose: every selector here names something
     whose own rule says "span the viewport" (left: 0; right: 0, or inset: 0),
     written in the page's or the legacy theme's stylesheet at the same
     specificity. Re-anchoring them on the frame is the whole point, so it must
     not depend on which stylesheet a page happens to load last. */
  .mchrome-header,
  .mchrome-nav,
  .mchrome-menu,
  .mchrome-layer,
  #mchrome-toast,
  /* The same treatment for the full-bleed fixed layers the legacy pages still
     bring with them — Vuetify dialogs, overlays and snackbars, the cookie
     banner, the loading screens and the legacy drawers. */
  .v-dialog__content,
  .v-dialog--fullscreen,
  /* Only the viewport-anchored variants; the --absolute ones are positioned
     against a parent and must be left where they are. */
  .v-overlay:not(.v-overlay--absolute),
  .v-snack:not(.v-snack--absolute),
  .cookie,
  .load-app-screen,
  .load-screen,
  #loader-wrapper,
  .nuxt-progress,
  .error-form,
  .background-menu,
  .mobile-backdrop,
  .mobile-menu,
  .chart-button-mobile,
  .history__content__nav__wrapper,
  .history__content__nav.mobile,
  .privacy-policy__container-wrapper .privacy-policy__menu,
  /* The legacy header goes in the same bucket, and needs it most: it carries
     left/right in a style attribute. Pages with the mobile chrome hide it
     outright; this is for the ones still using it, such as sign-in. */
  .main-header {
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    max-width: var(--mchrome-frame) !important;
    margin-left: calc(var(--mchrome-frame) / -2) !important;
  }

  /* The support/assistant widget is anchored to the viewport's right edge;
     bring it inside the frame and keep it narrower than the column. */
  .support-button,
  .chat-box {
    right: calc(50% - var(--mchrome-frame) / 2 + 15px) !important;
  }
  .chat-box {
    width: calc(var(--mchrome-frame) - 30px) !important;
  }
}