.view-controls {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  pointer-events: none;
}

.view-controls__switch,
.view-controls__group {
  pointer-events: auto;
}

.view-controls__group {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.view-controls__group[hidden] { display: none; }

.view-controls__group button {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: var(--color-bg);
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.view-controls__group button[aria-pressed="true"] {
  background: var(--color-accent);
}

.view-controls__group button:hover { background: var(--color-accent-hover); }
.view-controls__group button:disabled { opacity: 0.6; cursor: wait; }

.view-controls__status {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  max-width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
}

.view-controls__status:empty { display: none; }

.view-controls__group .view-controls__zoom-step { min-width: 44px; padding: 10px; font-size: 18px; }
.view-controls__group .view-controls__zoom-reset { min-width: 68px; padding: 10px 8px; font-variant-numeric: tabular-nums; }
.view-controls__group .view-controls__zoom-step:disabled,
.view-controls__group .view-controls__zoom-reset:disabled { cursor: default; }

.view-controls__group > button,
.view-controls__camera > button { display: grid; place-items: center; width: 44px; padding: 10px; }
.view-controls__camera { position: relative; }
.view-controls__camera-menu { position: absolute; bottom: calc(100% + 12px); left: 0; min-width: 180px; padding: 4px; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-heading) 12%, transparent); }
.view-controls__camera-menu[hidden] { display: none; }
.view-controls__camera-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.view-controls__camera-presets button { display: grid; place-items: center; min-width: 44px; padding: 10px; }
.view-controls__camera-menu .view-controls__roof-switch { display: flex; align-items: center; width: 100%; gap: 10px; margin-top: 4px; padding: 10px 8px; text-align: left; }
.view-controls__switch-track { position: relative; flex: 0 0 32px; height: 18px; border: 1px solid var(--color-heading); background: var(--color-border); border-radius: 12px; }
.view-controls__switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-heading); }
.view-controls__roof-switch[aria-checked="true"] .view-controls__switch-track { background: var(--color-accent); }
.view-controls__roof-switch[aria-checked="true"] .view-controls__switch-track::after { left: 16px; }
.view-controls__plan-info { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.view-controls__plan-info[hidden] { display: none; }
.view-controls__zoom { display: flex; gap: 2px; padding: 2px; background: var(--color-surface); border: 1px solid var(--color-border); }
.view-controls__zoom button { min-width: 28px; min-height: 28px; padding: 3px 6px; border: 0; background: var(--color-bg); font-size: 11px; cursor: pointer; }
.view-controls__zoom .view-controls__zoom-reset { min-width: 43px; font-variant-numeric: tabular-nums; }
.view-controls__zoom button:hover { background: var(--color-accent-hover); }
.view-controls__zoom button:disabled { opacity: .5; cursor: default; }
@media (max-width: 1100px) {
  .view-controls { bottom: 70px; }
  .editor-status { bottom: 138px; }
}
@media (pointer: coarse) {
  .view-controls__zoom button { min-width: 44px; min-height: 44px; }
}