/* 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);
}

/* On desktop the public, login and register pages paint the page black so the
   390px column reads as letterboxed. Inside the preview the column already is
   the frame width, so that black never shows as intended — only as a hairline
   where two white blocks meet on a fractional boundary (the register form
   lands on 687.688px). Paint white behind them instead; the blocks still cover
   the frame, so nothing else changes. */
html[data-lucora-desktop-preview],
html[data-lucora-desktop-preview] body {
  background: #fff;
}

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