/* Global fixes for model-viewer element sizing issues */

/* Ensure proper canvas rendering across all browsers */
model-viewer {
  --poster-color: transparent;
  --progress-bar-height: 0.3rem;
  --progress-bar-track-color: rgba(255, 255, 255, 0.2);
  --progress-bar-color: rgba(255, 255, 255, 0.8);
  background-color: transparent !important;
}

/* Force correct sizing for ALL internal model-viewer elements */
model-viewer::part(default), 
model-viewer div[role="img"],
model-viewer div.userInput,
model-viewer .slot.canvas,
model-viewer canvas,
model-viewer canvas#webgl-canvas,
model-viewer canvas[data-engine],
#profile-model::part(default),
#profile-model div[role="img"],
#profile-model div.userInput,
#profile-model .slot.canvas,
#profile-model canvas,
#profile-model canvas#webgl-canvas,
model-viewer slot[name="canvas"] canvas {
  width: 100% !important;
  height: 100% !important;
  min-width: 200px !important;
  min-height: 200px !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Handle iOS Safari specific issues */
@supports (-webkit-touch-callout: none) {
  model-viewer {
    touch-action: pan-y pan-x;
  }
  
  model-viewer div[role="img"],
  model-viewer canvas {
    transform: translateZ(0);
    will-change: transform;
  }
}

/* Fix for Android Chrome */
@supports not (-webkit-touch-callout: none) {
  model-viewer canvas {
    object-fit: contain;
  }
}