/* PTZ is a non-modal tool: reserve space rather than cover the live video. */
#modal-ptz-controller.ptz-panel {
  position: fixed;
  inset: 12px 12px 12px auto;
  width: 320px;
  z-index: 80;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
#modal-ptz-controller.ptz-panel .ptz-controller-dialog {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  min-height: 0;
}
#modal-ptz-controller .modal-header { padding: 12px; }
#modal-ptz-controller .modal-header h3 { font-size: 15px; }
#modal-ptz-controller .modal-body { padding: 12px; overflow-y: auto; min-height: 0; }
#modal-ptz-controller .ptz-hud-target { flex-wrap: wrap; gap: 6px; }
#modal-ptz-controller .ptz-dpad-container { gap: 12px !important; margin: 10px 0 !important; }
#modal-ptz-controller select { min-width: 0; }
body:has(#modal-ptz-controller.open) #main-content {
  margin-right: 344px;
  min-width: 0;
}
@media (max-width: 1000px) {
  #modal-ptz-controller.ptz-panel {
    inset: auto 8px 8px 8px;
    width: auto;
    height: 42dvh;
  }
  #modal-ptz-controller.ptz-panel .ptz-controller-dialog { max-width: 100% !important; }
  body:has(#modal-ptz-controller.open) #main-content {
    margin-right: 0;
    height: 56dvh;
    max-height: 56dvh;
    min-height: 0;
  }
}