/* Website-owned mobile adjustments. Keep the protected build untouched. */
@media (max-width: 900px), (pointer: coarse) {
  .topbar {
    height: 56px;
    gap: 6px;
    padding: 0 7px 0 12px;
  }

  .brand-block {
    gap: 8px;
  }

  .brand-titles {
    overflow: hidden;
  }

  .project-title,
  .scene-title {
    max-width: 100%;
  }

  .nav-button,
  .close-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .nav-button {
    justify-content: center;
    padding: 0;
  }

  .nav-label {
    display: none;
  }

  .nav-cta {
    margin-left: 4px;
  }

  .guide-button {
    min-height: 44px;
  }

  .guide-skip {
    min-height: 44px;
    padding: 10px 12px;
  }

  .guide-card {
    max-height: calc(100vh - 20px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .map-panel,
  .finishes-panel {
    max-height: calc(100vh - 20px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .map-panel .panel-header,
  .finishes-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--glass-strong);
  }

  .floorplan-wrap,
  .finishes-list {
    max-height: none;
  }

  .finishes-list {
    overflow: visible;
  }

  .scene-list,
  .welcome-screen {
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .view-hint,
  .toast {
    max-width: calc(100vw - 32px - var(--safe-left) - var(--safe-right));
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .view-hint {
    text-align: center;
  }
}

@media (max-width: 900px) and (max-height: 650px) and (orientation: landscape),
       (pointer: coarse) and (max-height: 650px) and (orientation: landscape) {
  .scene-drawer,
  .map-panel,
  .finishes-panel {
    top: calc(8px + var(--safe-top));
    bottom: calc(8px + var(--safe-bottom));
    max-height: calc(100vh - 16px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
  }
}