#dialog.managed-dialog { position: fixed; padding: 0; width: min(1000px, calc(100vw - 32px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 32px); overflow: hidden; }
.managed-dialog #dialog-content { display: flex; flex-direction: column; max-height: inherit; }
.managed-dialog .dialog-head { flex: none; display: flex; gap: 16px; padding: 16px 20px; margin: 0; background: white; border-bottom: 1px solid var(--line); }
.managed-dialog .dialog-head h2 { min-width: 0; overflow-wrap: anywhere; text-align: start; }
.managed-dialog .dialog-controls { display: flex; flex: none; gap: 8px; }
.managed-dialog .dialog-controls button { min-width: 36px; min-height: 36px; font-size: 20px; line-height: 1; }
.managed-dialog .dialog-body { min-height: 0; padding: 20px; overflow: auto; overscroll-behavior: contain; }
.managed-dialog .dialog-body[hidden] { display: none; }
#dialog.dialog-minimized { width: min(420px, calc(100vw - 16px)); z-index: 50; }
.dialog-minimized .dialog-head { border: 0; }
@media (min-width: 900px) and (pointer: fine) {
  .managed-dialog .dialog-head { cursor: grab; }
  .managed-dialog .dialog-head.dragging { cursor: grabbing; user-select: none; }
  .managed-dialog .dialog-controls { cursor: auto; }
}
@media (max-width: 600px) {
  #dialog.managed-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .managed-dialog .dialog-head { padding: 10px 12px; gap: 8px; }
  .managed-dialog .dialog-head h2 { font-size: 16px; }
  .managed-dialog .dialog-body { padding: 12px; }
}