*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#viewport {
  position: absolute;
  inset: var(--map-inset);
  z-index: var(--z-viewport);
  border-radius: var(--map-radius);
  /* не overflow:hidden — в Chrome с radius даёт тёмные AA-дуги на лоадере */
  clip-path: inset(0 round var(--map-radius));
  background: var(--color-bg);
}

#app[data-mode="map"] #viewport {
  background: var(--color-surface);
}

.viewport-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.viewport-panel[hidden] {
  /* Не display:none — Chrome теряет WebGL-контекст.
     Не оставлять в потоке: relative+height 100% выталкивает вторую панель
     (и плашку загрузки) за clip вьюпорта. */
  display: block !important;
  position: absolute !important;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.viewport-status {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  text-align: center;
  pointer-events: none;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

.viewport-status--error {
  color: var(--color-ink);
  pointer-events: auto;
}

#ui-overlay {
  position: absolute;
  inset: var(--map-inset);
  z-index: var(--z-overlay);
  pointer-events: none;
}

#ui-overlay > * {
  pointer-events: auto;
}

/* Попап-слой не должен есть pan/клики карты (3dinfokioski: HTML POI поверх canvas). */
#ui-overlay > #popup-root,
#popup-root,
#popup-root.is-open {
  pointer-events: none;
}

#chips-root {
  position: absolute;
  top: var(--chips-top);
  left: var(--chips-side);
  right: var(--chips-side);
  z-index: 2;
  padding-bottom: var(--space-3);
}

#zoom-root {
  position: absolute;
  right: var(--zoom-right);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

#toggle-root {
  position: absolute;
  left: 50%;
  bottom: var(--toggle-bottom);
  transform: translateX(-50%);
  z-index: 2;
}

#popup-root {
  position: absolute;
  inset: 0;
  z-index: var(--z-popup);
  pointer-events: none;
}

#app[data-mode="pano"] #chips-root {
  display: none;
}

@media (max-width: 440px) {
  #toggle-root {
    left: 12px;
    right: 12px;
    transform: none;
    display: flex;
    justify-content: center;
  }
}