@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* Giữ ảnh không tràn (đang dùng) */
#live_preview_area {
  /* Mặc định tỉ lệ 600x400 = 3/2; JS có thể set động: el.style.setProperty('--preview-ar', `${w} / ${h}`) */
  --preview-ar: 3 / 2;

  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--preview-ar);
  height: auto;                 /* để aspect-ratio điều khiển chiều cao */
  max-height: 60vh;             /* không vượt quá 60% viewport */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1rem;

  display: flex;                /* canh giữa img */
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.03);
}

#live_preview_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: middle;
}

/* Preview sticky chỉ bật trên màn hình lớn */
#preview_sticky { position: static; }
@media (min-width: 1024px) {
  .builder-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* preview | builder */
    gap: 2rem;
  }
  #preview_sticky {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}
/* Điều chỉnh trần chiều cao theo viewport từng breakpoint */
@media (max-width: 1024px) {
  #live_preview_area { max-height: 48vh; }
}
@media (max-width: 640px) {
  #live_preview_area { max-height: 42vh; border-radius: 0.75rem; }
}
@media (max-width: 420px) {
  #live_preview_area { max-height: 38vh; }
}
/* ==== Mini preview nổi (nhẹ nhàng, tránh tràn safe-area) ==== */
#mini_preview {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: clamp(120px, 28vw, 180px);
  aspect-ratio: 3 / 2;         /* luôn đúng tỉ lệ mini */
  height: auto;

  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 50;
  display: none;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#mini_preview.show { display: block; }
#mini_preview img { width: 100%; height: 100%; object-fit: contain; }
#mini_preview .hint {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 12px; color: #334155; opacity: 0.7;
  background: rgba(255,255,255,0.8); padding: 2px 6px; border-radius: 8px;
}