/* ─────────────────────────────────────────────────────────────────
   css/device-frame.css
   Visual styling for the builder's device-preview switcher (Phase A,
   2026-05-23). Pairs with js/builder/device-frame.js.
   --------------------------------------------------------------------
   The frame is sized by CSS variables --device-w + --device-h that
   device-frame.js sets on the element. Chrome (status bar +
   home indicator) is a soft decorative skin — visually communicates
   "this is what it looks like on hardware" without pretending to be
   an exact device replica.
───────────────────────────────────────────────────────────────── */

/* 2026-05-25 — When the device-switcher enters preview mode, it
   stamps `data-device-preview-active="1"` on the legacy
   #builderTabletFrame. Strip the legacy chrome (background, border,
   box-shadow, padding, max-width) so only the inner .device-frame
   chrome is visible. Without this, two frames stack and the legacy
   iPad-shape chrome dominates visually — producing the "device size
   is stuck on iPad" bug Luke caught. */
[data-device-preview-active="1"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.device-frame {
  /* Width + height come from --device-w / --device-h set inline by
     device-frame.js. Default 800×1000 in case JS hasn't fired yet.
     2026-05-25 — device-frame.js ALSO sets `width` + `height`
     directly inline with !important so any parent-cascade width
     override gets defeated (the bug Luke caught — the CSS-var
     indirection alone was being clobbered somewhere downstream). */
  width: var(--device-w, 800px);
  height: var(--device-h, 1000px);
  max-width: 100%;
  max-height: calc(100vh - 200px);
  margin: 24px auto;
  background: #1a1d23;
  border-radius: 28px;
  box-shadow:
    0 0 0 8px #2a2d35,
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: width 200ms ease, height 200ms ease;
}

.device-frame-chrome {
  background: #0c0e12;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-frame-chrome-top {
  height: 22px;
  border-radius: 16px 16px 6px 6px;
  /* Faux notch indicator */
  position: relative;
}

.device-frame-chrome-top::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 8px;
  background: #000;
  border-radius: 6px;
  opacity: 0.85;
}

.device-frame-chrome-bottom {
  height: 14px;
  border-radius: 6px 6px 16px 16px;
  position: relative;
}

.device-frame-chrome-bottom::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 4px;
  background: #6e6e76;
  border-radius: 2px;
}

.device-frame-slot {
  flex: 1;
  min-height: 0;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* iframe inserted by preview-bridge fills the slot */
.device-frame-slot iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}

/* Desktop and Custom devices skip the device chrome — flatter rect */
.device-frame-no-chrome {
  background: transparent;
  box-shadow:
    0 0 0 1px #d4d4d8,
    0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 0;
}
.device-frame-no-chrome .device-frame-chrome { display: none; }
.device-frame-no-chrome .device-frame-slot { border-radius: 6px; }

/* Per-OS tints to subtly differentiate at a glance */
.device-frame[data-device-os="iOS"] { background: #1d1d1f; }
.device-frame[data-device-os="iPadOS"] { background: #1d1d1f; }
.device-frame[data-device-os="Android"] { background: #202124; }

/* Reduced-motion respects the global preference */
@media (prefers-reduced-motion: reduce) {
  .device-frame { transition: none; }
}