/* ==========================================================================
   Kinox Mobile Viewer (view.html)
   Full-screen canvas with touch controls. Colors, buttons, the brand mark and the language switcher
   come from style.css; this file only lays out the viewer.
   ========================================================================== */
.viewer-page {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.viewer-layout {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}

/* Top bar */
.viewer-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(env(safe-area-inset-right, 0px) + 12px) 6px calc(env(safe-area-inset-left, 0px) + 12px);
  background: rgba(13, 17, 23, 0.94);
  border-bottom: 1px solid var(--border-color);
  z-index: 20;
}

.viewer-brand {
  flex-shrink: 0;
  min-height: 44px;
}

.viewer-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-lang {
  flex-shrink: 0;
}

.viewer-lang .lang-btn {
  height: 38px;
  min-width: 40px;
  font-size: 12px;
}

/* Guided tour button (tours/viewer.js, styled by tour.css) after the language buttons, as tall as they are. On narrow
   phones it shows only its icon (its name stays in the accessible label), so the world's title keeps its room. */
.viewer-topbar .viewer-tour-button {
  flex-shrink: 0;
  min-height: 38px;
}

@media (max-width: 419px) {
  .viewer-topbar .viewer-tour-button {
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }

  .viewer-tour-button .kinox-tour-button-label {
    display: none;
  }
}

/* Stage */
.viewer-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #05070a;
}

.viewer-canvas {
  position: absolute;
  inset: 0;
}

.viewer-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.viewer-path-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 5;
}

.viewer-path-progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
}

.viewer-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  background: rgba(13, 17, 23, 0.88);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.4s ease;
}

.viewer-hint.is-fading {
  opacity: 0;
}

/* Loading and error overlays */
.viewer-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(6, 8, 12, 0.92);
}

.viewer-overlay-text {
  max-width: 420px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-main);
}

.viewer-load-track {
  width: min(240px, 70%);
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.viewer-load-bar {
  width: 0;
  height: 100%;
  background: var(--accent-cyan);
  transition: width 0.2s ease;
}

.viewer-error-icon {
  font-size: 40px;
}

.viewer-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.viewer-error-actions .btn {
  min-height: 44px;
  text-decoration: none;
}

/* Toolbar: large touch targets above the home indicator */
.viewer-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px calc(env(safe-area-inset-right, 0px) + 10px) calc(env(safe-area-inset-bottom, 0px) + 8px) calc(env(safe-area-inset-left, 0px) + 10px);
  background: rgba(13, 17, 23, 0.94);
  border-top: 1px solid var(--border-color);
  z-index: 20;
}

.viewer-tool {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: var(--font-sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.viewer-tool:active {
  background: rgba(255, 255, 255, 0.12);
}

.viewer-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.viewer-tool:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.viewer-tool[aria-pressed="true"] {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #07090e;
}

.viewer-tool-primary {
  background: linear-gradient(135deg, #1f6feb 0%, #0099ff 100%);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.viewer-tool-icon {
  font-size: 18px;
  line-height: 1;
}

.viewer-tool-label {
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .viewer-tool:not(:disabled):not([aria-pressed="true"]):not(.viewer-tool-primary):hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--border-hover);
  }
}

/* Narrow phones: the logo alone leaves the title more room */
@media (max-width: 419px) {
  .viewer-brand .brand-name {
    display: none;
  }
}

/* Wider screens: the toolbar floats over the bottom of the stage */
@media (min-width: 768px) {
  .viewer-toolbar {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateX(-50%);
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
  }

  .viewer-tool {
    flex: 0 0 auto;
    min-width: 104px;
  }

  .viewer-hint {
    bottom: 104px;
  }

  .viewer-title {
    font-size: 15px;
  }
}

/* The <model-viewer> that opens AR stays off-screen; the toolbar button calls it. */
.viewer-ar-source {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -10px;
  top: -10px;
  opacity: 0;
  pointer-events: none;
}

/* Embedded in another page (view.html?...&embed=1): the stage and toolbar only, plus a link to the full viewer. */
.viewer-embed .viewer-topbar {
  display: none;
}

.viewer-open-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.78);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 12px;
  text-decoration: none;
}

.viewer-open-link[hidden] {
  display: none;
}