/* ═══════════════════════════════════════════════════════
   DEVICE VIEWPORT — sidenav button + popover + preview sizing
   ═══════════════════════════════════════════════════════ */

/* ---------- Sidenav button ---------- */
.annotate-cluster #btn-device.device-open,
body.preview-active .annotate-cluster #btn-device.device-open { color: #ff6090 !important; }
.annotate-cluster #btn-device.device-constrained,
body.preview-active .annotate-cluster #btn-device.device-constrained { color: #4080ff !important; }
.annotate-cluster #btn-device.device-constrained:hover,
body.preview-active .annotate-cluster #btn-device.device-constrained:hover { color: #ff6090 !important; }

/* ---------- Popover ---------- */
.device-popover {
  position: fixed;
  top: 0; left: 0;
  min-width: 160px;
  padding: 4px 0;
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  z-index: 1200;
  opacity: 0;
  transform: translateX(-6px) scale(0.98);
  transform-origin: left top;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.device-popover.open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.device-option {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: none; border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.device-option > i:first-child { width: 14px; text-align: center; font-size: 13px; }
.device-option:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.device-option.active { color: var(--text-primary); }
.device-option .device-check {
  margin-left: auto;
  font-size: 10px;
  color: #fff;
  visibility: hidden;
}
.device-option.active .device-check { visibility: visible; }

/* ---------- Framed chrome (tablet / mobile) ----------
   A fixed grey a step lighter than the chat sidebar (#000) replaces the
   colours extracted from the rendered page. The existing preview-active rules
   read these variables, so pane and sidenav buttons pick them up as-is. */
body.device-framed {
  --preview-bg: #171717;
  --preview-fg: var(--text-secondary);
  --preview-tab-border: rgba(255, 255, 255, 0.12);
}
body.preview-active .side-tab { transition: color 0.2s ease, background 0.3s ease; }
body.preview-active #preview-container { transition: background 0.3s ease; }

/* ---------- Preview viewport sizing ----------
   #preview-frame carries the device size and chrome; the iframe fills it.
   Switching devices runs in three phases (device.js), mirroring the sidebar
   collapse in code view: the rendered page disintegrates into particles, the
   empty frame animates to its new size, then the page reassembles. */
#preview-container { align-items: stretch; }
#preview-frame {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  align-self: center;
  width: 100%; max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0 solid rgba(128, 128, 128, 0.32);
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  --device-h: 100%;
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              margin 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.32s ease,
              border-width 0.32s ease,
              box-shadow 0.32s ease;
}
#preview-frame > #preview-iframe {
  width: 100%; height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  transform-origin: center center;
}
/* Tablet / mobile: a bounded, rounded device frame centred in the pane.
   The page scrolls inside the iframe, not the pane. */
#preview-container[data-device="tablet"] #preview-frame,
#preview-container[data-device="mobile"] #preview-frame {
  flex: 0 0 auto;
  height: min(var(--device-h), calc(100% - 48px));
  margin: 24px 0;
  --device-radius: 6px;
  --device-border: 1px;
  border-radius: var(--device-radius);
  border-width: var(--device-border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 18px 48px rgba(0, 0, 0, 0.35);
}
#preview-container[data-device="tablet"] #preview-frame,
#preview-container[data-device="mobile"] #preview-frame {
  --device-h: 1080px;
  width: 820px;
}
#preview-container[data-device="mobile"] #preview-frame {
  --device-h: 844px;
  width: 390px;
}
/* The iframe is a composited layer, so the frame's overflow clip does not
   reliably round its corners. Clip it to the frame's inner radius directly. */
#preview-container[data-device="tablet"] #preview-iframe,
#preview-container[data-device="mobile"] #preview-iframe {
  --device-inner-radius: calc(var(--device-radius) - var(--device-border));
  border-radius: var(--device-inner-radius);
  clip-path: inset(0 round var(--device-inner-radius));
}

/* Phase 1 / 3: reuse the code-pane keyframes from style.css */
#preview-iframe.disintegrating {
  animation: pane-disintegrate 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
#preview-iframe.reassembling {
  animation: pane-reassemble 0.32s cubic-bezier(0, 0, 0.2, 1) forwards;
  pointer-events: none;
}
/* Phase 2: page stays hidden while the empty frame resizes */
#preview-iframe.device-hidden {
  opacity: 0 !important;
  filter: blur(3px) brightness(1.8) saturate(0.2);
  pointer-events: none;
}