/* Styles for the public model viewer (model.php, model2.php).
   Kept neutral and white so the viewer blends into client websites that embed it.
   After changing this file or viewer.js, bump the "?v=" in model.php and model2.php. */
:root {
  --ink: #16181d;
  --ink-hover: #000;
  --muted: #6b7280;
  --track: #eceef1;
  --surface: #fff;
  --shadow: 0 8px 28px rgba(17, 24, 39, 0.14), 0 1px 3px rgba(17, 24, 39, 0.08);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --edge: 16px;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

model-viewer {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--surface);
  --poster-color: transparent;
}

/* Hide slotted controls until model-viewer has loaded */
:not(:defined) > * {
  display: none;
}

/* Close button, only shown when the viewer is opened directly (removed inside iframes) */
#close-button {
  position: fixed;
  top: var(--edge);
  left: var(--edge);
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#close-button:hover {
  background: #f3f4f6;
}

.logo-img {
  position: fixed;
  top: var(--edge);
  right: var(--edge);
  z-index: 10;
  max-width: 120px;
  max-height: 56px;
  object-fit: contain;
}

/* Loading bar */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}

.loader-track {
  width: 160px;
  height: 4px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.bar {
  width: 0%;
  height: 100%;
  border-radius: 4px;
  background: var(--ink);
  transition: width 0.2s ease-out;
}

.load-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 80%);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.load-error strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

/* "View in your space" buttons: the AR button on phones, the QR code button on computers */
.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 500 15px/1 var(--font);
  white-space: nowrap;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.pill-button:hover {
  background: var(--ink-hover);
}

.pill-button:active {
  transform: scale(0.97);
}

.pill-button:focus-visible,
#close-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

#ar-button,
#qr-code {
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

#ar-button:active {
  transform: translateX(-50%) scale(0.97);
}

/* Controls appear once the model has loaded */
body:not(.is-loaded) #ar-button,
body:not(.is-loaded) #qr-code {
  opacity: 0;
  pointer-events: none;
}

#ar-button,
#qr-code {
  transition: opacity 0.3s;
}

/* QR code card shown above the button on computers */
.qr-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  width: 220px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
  animation: fadeIn 0.2s ease-out;
}

.qr-card[hidden] {
  display: none;
}

.qr-card img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 14px;
}

.qr-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.qr-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 480px) {
  :root {
    --edge: 12px;
  }

  .logo-img {
    max-width: 96px;
    max-height: 44px;
  }
}