/* ==========================================================================
   VoiceNX mockup — iPad frame
   .stage  : full-viewport backdrop that centers the device
   .device : the hardware (bezel, corners, camera). Add .is-portrait to rotate.
   .screen : the 1180×820 logical display; everything in the app lives here.
   The frame auto-shrinks on small laptops (zoom steps) and disappears
   entirely when viewed on a real tablet, so the mockup fills the device.
   ========================================================================== */

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #ffffff;
}

.device {
  position: relative;
  width: calc(var(--ipad-w) + var(--ipad-bezel) * 2);
  height: calc(var(--ipad-h) + var(--ipad-bezel) * 2);
  padding: var(--ipad-bezel);
  border-radius: var(--ipad-radius);
  background: linear-gradient(160deg, #2a2b2f 0%, #121316 55%, #1c1d21 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 2px 0 rgba(255, 255, 255, .05) inset,
    0 40px 80px -30px rgba(17, 25, 54, .55),
    0 18px 36px -18px rgba(17, 25, 54, .35);
  flex: none;
}

/* Front camera — on the long edge for landscape, top for portrait */
.device::before {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2e3340, #05060a 70%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .06);
  top: calc(var(--ipad-bezel) / 2 - 4.5px);
  left: 50%;
  transform: translateX(-50%);
}

.device.is-portrait {
  width: calc(var(--ipad-h) + var(--ipad-bezel) * 2);
  height: calc(var(--ipad-w) + var(--ipad-bezel) * 2);
}
.device.is-portrait::before {
  top: 50%;
  left: calc(var(--ipad-bezel) / 2 - 4.5px);
  transform: translateY(-50%);
}

.screen {
  position: relative;
  width: var(--ipad-w);
  height: var(--ipad-h);
  border-radius: var(--screen-radius);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
  isolation: isolate;
}
.device.is-portrait .screen {
  width: var(--ipad-h);
  height: var(--ipad-w);
}

/* ---- iPadOS status bar ---- */
.statusbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--statusbar-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  z-index: 50;
  pointer-events: none;
}
.statusbar__left,
.statusbar__right { display: flex; align-items: center; gap: 6px; }
.statusbar__right svg { height: 11px; width: auto; }

/* ---- Fit the frame to smaller viewports (pure CSS, stepped) ---- */
/* Landscape frame ≈ 1232×872 + stage padding; portrait ≈ 872×1232. */
@media (max-width: 1320px), (max-height: 940px) { .device { zoom: 0.90; } }
@media (max-width: 1200px), (max-height: 850px) { .device { zoom: 0.80; } }
@media (max-width: 1060px), (max-height: 760px) { .device { zoom: 0.70; } }
@media (max-width: 940px),  (max-height: 670px) { .device { zoom: 0.60; } }
@media (max-width: 820px),  (max-height: 580px) { .device { zoom: 0.50; } }

@media (max-height: 1300px) { .device.is-portrait { zoom: 0.90; } }
@media (max-height: 1180px) { .device.is-portrait { zoom: 0.80; } }
@media (max-height: 1050px) { .device.is-portrait { zoom: 0.72; } }
@media (max-height: 950px)  { .device.is-portrait { zoom: 0.64; } }
@media (max-height: 850px)  { .device.is-portrait { zoom: 0.56; } }
@media (max-height: 750px)  { .device.is-portrait { zoom: 0.48; } }

/* ---- Real tablet: drop the bezel, fill the display ---- */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) {
  .stage { padding: 0; background: var(--paper); min-height: auto; }
  .device, .device.is-portrait {
    zoom: 1;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .device::before { display: none; }
  .screen, .device.is-portrait .screen {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .statusbar { display: none; }
  :root { --statusbar-h: env(safe-area-inset-top, 0px); }
}