/* Mol* viewer container styling */
#molstar-container {
  width: 100%;
  height: 600px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-0);
  position: relative;
  contain: layout style paint;
}

/* Responsive: shorter on mobile */
@media (max-width: 768px) {
  #molstar-container {
    height: 400px;
    min-height: 300px;
  }
}

/* Override Mol* default styles for dark mode compatibility */
.msp-plugin {
  background: transparent !important;
}

/* Loading state indicator */
#molstar-container.loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

#molstar-container.loading::after {
  content: "Loading structure...";
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Prevent Mol* from breaking out of container */
#molstar-container .msp-plugin {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Ensure no Mol* elements escape the container */
#molstar-container * {
  max-width: 100%;
}

/* Prevent Mol* from disabling body scroll */
body {
  overflow-y: auto !important;
  position: static !important;
}

html {
  overflow-y: auto !important;
}