/*
 * Success-overlay thumbnail capture: same shrink-wrapped handset + ~2:3 card scene as standalone
 * public /card (see web/card/card.css body:not(.gc-embed-mode) rules). Scoped so we do not load
 * full card.css on the builder (that file styles body and would restyle the whole app).
 */

.gkz-thumb-capture-viewer {
  box-sizing: border-box;
  width: min(530px, calc(100vw - 32px));
  aspect-ratio: unset;
  height: fit-content;
  max-height: none;
  min-height: 0;
  margin: 0 auto 2px;
  background: #111;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 0 36px rgba(0, 245, 42, 0.22);
  overflow: visible;
}

.gkz-thumb-capture-viewer .phoneScreen {
  height: auto;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: gkz-thumb-phone;
}

.gkz-thumb-capture-viewer .clip-fab-anchor,
.gkz-thumb-capture-viewer .clip-fab-bubble,
.gkz-thumb-capture-viewer .card-edit-chip {
  display: none !important;
}

/* Match standalone public /card: .gkz-card-viewer-frame .card-scene (not tall full-bleed scene). */
.gkz-thumb-capture-viewer .card-scene {
  width: min(calc(100% - 6px), 360px) !important;
  max-width: 360px !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  max-height: min(540px, 92dvh) !important;
  margin: 14px auto 8px !important;
  transform-origin: 50% 40% !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render {
  opacity: 1 !important;
  animation: none !important;
  visibility: visible !important;
  min-height: 0 !important;
}

.gkz-thumb-capture-viewer .card-ambient-ring,
.gkz-thumb-capture-viewer .card-rim-ember {
  z-index: 0 !important;
}

.gkz-thumb-capture-viewer .card-scene > .card-inner {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0;
}

/* Flatten 3D for reliable html2canvas + parity with public gkz-safe-render */
.gkz-thumb-capture-viewer .card-scene.gkz-safe-render .card-inner {
  transform: none !important;
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render .card-face {
  transition: opacity 0.35s ease !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render .card-face.card-back {
  display: flex !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render:not(.is-flipped) .card-face.card-back {
  opacity: 0 !important;
  pointer-events: none !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render:not(.is-flipped) .card-face.card-front {
  opacity: 1 !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render.is-flipped .card-face.card-front {
  opacity: 0 !important;
  pointer-events: none !important;
}

.gkz-thumb-capture-viewer .card-scene.gkz-safe-render.is-flipped .card-face.card-back {
  opacity: 1 !important;
  pointer-events: auto !important;
}