/* H5 status/safe-area canvas must belong to the immersive room, not the
   paper-colored storefront underneath it. The class is removed on exit. */
html.qj-live-viewport,
.qj-live-viewport body,
.qj-live-viewport #app,
.qj-live-viewport uni-page-body {
  background: #090a0d;
}
.qj-live-viewport .live-room-page.mall-page.live-room-page {
  --live-viewport-safe-top: env(safe-area-inset-top, 0px);
  position: fixed;
  inset: 0;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  padding: 0;
}
.qj-live-viewport .live-room-page .portrait-header {
  top: calc(var(--live-viewport-safe-top) + 10px);
}
.qj-live-viewport .live-room-page .room-notice {
  top: calc(var(--live-viewport-safe-top) + 50px);
}
.qj-live-viewport .live-room-page .reservation-card {
  top: calc(var(--live-viewport-safe-top) + 111px);
}
.qj-live-viewport .live-room-page .coupon-entry {
  top: calc(var(--live-viewport-safe-top) + 79px);
}
/* Video/cover extends behind the status area. A light scrim keeps white
   status icons legible without replacing the picture with a solid strip.
   The overlay never captures taps and stays behind the room controls. */
.qj-live-viewport .live-room-page .room-video-shell::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--live-viewport-safe-top) + 100px);
  background: linear-gradient(to bottom, rgba(9,10,13,.35), rgba(9,10,13,0));
  pointer-events: none;
}