/* Host-page pre-mount skeleton for the dental viewer. Shipped as
   dist/skeleton.css and linked by the host page before the bundle loads.
   The height tokens are the single source of truth for the viewer's
   footprint (applied to skeleton AND mounted app below); breakpoints
   mirror viewer/responsive.css (830px height) and mobile-modal.css
   (899px width). rem so the reservation scales with user font size. */

:root {
  --dv-app-min-height: 43.0625rem;
  --dv-app-min-height-compact: 33.3125rem;
  --dv-app-min-height-mobile: 23.75rem;
}

@media (max-height: 830px) {
  :root {
    --dv-app-min-height: var(--dv-app-min-height-compact);
  }
}

@media (max-width: 899px) {
  :root {
    --dv-app-min-height: var(--dv-app-min-height-mobile);
  }
}

.dental-app.dental-app {
  min-height: var(--dv-app-min-height);
}

.dv-skeleton {
  display: flex;
  gap: 20px;
  width: 100%;
  min-height: var(--dv-app-min-height);
}

.dv-skeleton__viewer {
  flex: 1 1 0;
  border-radius: 10px;
  background: #e0ecff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.dv-skeleton__viewer img {
  opacity: 0.5;
  animation: dv-pulse 1.6s ease-in-out infinite;
}

.dv-skeleton__panel {
  width: 344px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #fde8e8;
  position: relative;
  overflow: hidden;
}

.dv-skeleton__viewer::after,
.dv-skeleton__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  animation: dv-shimmer 1.8s infinite;
}

@keyframes dv-shimmer {
  to { transform: translateX(100%); }
}

@keyframes dv-pulse {
  50% { opacity: 0.25; }
}

@media (max-width: 899px) {
  .dv-skeleton__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-skeleton__viewer::after,
  .dv-skeleton__panel::after,
  .dv-skeleton__viewer img { animation: none; }
}