/* Desktop stage: phone chassis around the mobile UI (Web only). */

body.qp-web {
  --stage-bg: #12151c;
  --stage-glow: rgba(240, 122, 40, 0.14);
  --device-shell: #0a0a0c;
  --device-edge: #2a2e36;
  --device-bezel-top: 32px;
  --device-bezel-x: 6px;
  --device-bezel-bottom: 10px;
  --stage-pad: 6px;
  --device-w: 600px;
  background: var(--stage-bg) !important;
  background-image:
    radial-gradient(900px 480px at 50% -10%, var(--stage-glow), transparent 60%),
    radial-gradient(700px 420px at 80% 100%, rgba(27, 58, 107, 0.28), transparent 55%) !important;
}

body.qp-web::before,
html.qp-web::before {
  display: none !important;
}

html.qp-web,
body.qp-web {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.qp-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stage-pad);
  box-sizing: border-box;
}

.qp-device {
  position: relative;
  width: min(var(--device-w), calc(100vw - var(--stage-pad) * 2));
  /* Fill viewport height — no low pixel cap so the stage actually grows taller */
  height: calc(100dvh - var(--stage-pad) * 2);
  max-height: none;
  /* Top bezel holds the island — screen content starts below it */
  padding: var(--device-bezel-top) var(--device-bezel-x) var(--device-bezel-bottom);
  border-radius: 42px;
  background:
    linear-gradient(160deg, #3a3f4a 0%, var(--device-shell) 28%, #15171c 70%, #2c3038 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.qp-device::before,
.qp-device::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 3px;
  border-radius: 2px;
  background: #3a3f48;
}

.qp-device::before {
  top: 140px;
  height: 28px;
}

.qp-device::after {
  top: 188px;
  height: 56px;
}

.qp-device-island {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 5;
  width: 118px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.qp-device-screen {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--page-bg, #f5f7fb);
  /* Make position:fixed (tabs/modals) resolve to the phone screen, not the browser. */
  transform: translateZ(0);
  isolation: isolate;
}

.qp-device-screen .app-shell {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

.qp-device-screen .app-content {
  max-width: none;
  width: 100%;
  --page-x: 14px;
  --page-top: 8px;
  padding-bottom: calc(var(--tab-h) + 10px + var(--safe-bottom));
}

.qp-device-screen .app-content.no-tabs {
  padding-bottom: calc(16px + var(--safe-bottom));
}

.qp-device-screen .tab-bar {
  max-width: none;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.qp-device-home {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 5;
  width: 108px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

/* Real phone / narrow browser: full bleed, no chassis */
@media (max-width: 720px) {
  body.qp-web {
    background: var(--page-bg) !important;
    background-image: none !important;
    --page-x: 14px;
    --page-top: 6px;
  }

  .qp-stage {
    padding: 0;
    display: block;
    min-height: 100%;
    height: 100%;
  }

  .qp-device {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: block;
  }

  .qp-device::before,
  .qp-device::after,
  .qp-device-island,
  .qp-device-home {
    display: none;
  }

  .qp-device-screen {
    border-radius: 0;
    height: 100%;
    transform: none;
  }

  .qp-device-screen .app-content {
    max-width: none;
    width: 100%;
    padding-bottom: calc(var(--tab-h) + 8px + var(--safe-bottom));
  }
}

/* Wide desktop: larger chassis */
@media (min-width: 1280px) {
  body.qp-web {
    --stage-pad: 8px;
    --device-w: 680px;
  }
}

@media (min-width: 1600px) {
  body.qp-web {
    --stage-pad: 10px;
    --device-w: 720px;
  }
}