/* Minor polish on top of Tailwind (loaded via CDN). */

:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

/* The Three.js canvas fills its container. */
#viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* Dropzone active (drag-over) state, toggled from JS. */
#dropzone.is-dragging {
  border-color: rgb(14 165 233 / 0.8);
  background-color: rgb(14 165 233 / 0.08);
}

/* Touch-friendly option buttons + checkout on small screens. */
#material-options button,
#quality-options button,
#supports-options button,
#infill-pattern-options button {
  min-height: 2.75rem;
}

@media (max-width: 639px) {
  #toast-root {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* Slim scrollbars for a tidier dark UI. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184 / 0.3) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.3);
  border-radius: 9999px;
}

/* Toast entrance animation. */
.toast {
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#simplify-tips summary::-webkit-details-marker {
  color: rgb(148 163 184);
}