.wm-hud-surface {
  position: fixed;
  z-index: 1060;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 220px;
  max-width: min(340px, 100vw - 2rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
  transform: translateY(-4px);
}
.wm-hud-surface--visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.wm-hud-surface--peek, .wm-hud-surface--expanded {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.wm-hud-surface--zone-right-center {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.wm-hud-surface--zone-right-center.wm-hud-surface--visible, .wm-hud-surface--zone-right-center.wm-hud-surface--peek, .wm-hud-surface--zone-right-center.wm-hud-surface--expanded {
  transform: translateY(0);
}
.wm-hud-surface--zone-top-right {
  right: 1rem;
  top: 5rem;
}
.wm-hud-surface--zone-bottom-right {
  right: 1rem;
  bottom: 1rem;
}
.wm-hud-surface--zone-bottom-left {
  left: 1rem;
  bottom: 1rem;
}
@media (max-width: 639px) {
  .wm-hud-surface--zone-right-center, .wm-hud-surface--zone-top-right, .wm-hud-surface--zone-bottom-right {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    min-width: 0;
    border-radius: var(--wm-radius-lg, 0.75rem) var(--wm-radius-lg, 0.75rem) 0 0;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
  }
}

/*# sourceMappingURL=hud-surface-manager.css.map */