/* Narrower phone frame on desktop only. Touch devices keep their own width,
   which is simply the screen. Load this after the other stylesheets. */
@media (hover: hover) and (pointer: fine) {
  :root {
    --luxora-frame-width: 390px;
  }

  .base-page,
  .product-phone,
  .orders-phone,
  .exchange-phone,
  .panel-root,
  .pending-match-banner,
  .public-page-luxora-label-register,
  .login-page-di,
  .register-page-di,
  .cs-phone,
  .cs-chat-screen,
  .cs-loading-screen,
  .cs-guest-intake,
  .cs-lightbox,
  .legal-phone,
  .about-phone,
  .public-auth-sheet-layer,
  .cookie-consent-sheet,
  body > [data-luxora-sections] {
    max-width: var(--luxora-frame-width);
  }

  .header-fixed,
  .product-added-toast {
    width: min(var(--luxora-frame-width), 100vw);
  }

}

/* The outer desktop mockup marks its iframe explicitly. This must not depend
   on pointer media features, which can differ between the parent and iframe. */
html[data-lucora-desktop-preview] .public-header-luxora-label-register {
  height: 48px;
  margin-bottom: -48px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: min(390px, 100vw);
}

/* Lift the chat controls clear of the desktop mockup's home indicator. */
html[data-lucora-desktop-preview] .cs-chat-composer {
  padding-bottom: 30px;
}