/* ---------- Komod dialog (KomodDialogHost); the backdrop and head are the host's .modal-backdrop / .modal-head ---------- */

/* Komod UI in a dialog: large, resizable from the corner (CSS resize), or maximized. */
.komod-dialog-backdrop {
    padding-top: 4vh;
    outline: none;
}

.komod-dialog {
    width: min(1100px, 100%);
    height: min(80vh, 900px);
    min-width: 320px;
    min-height: 240px;
    max-width: 100%;
    max-height: calc(100vh - 6vh);
    padding: 12px 16px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    resize: both;
    overflow: hidden;
}

.komod-dialog.maximized {
    width: 100%;
    height: calc(100vh - 6vh);
    resize: none;
}

.komod-dialog-head h2 {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.komod-dialog-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

@media (max-width: 700px) {
    .komod-dialog-backdrop { padding: 0; }
    .komod-dialog { width: 100%; height: 100vh; max-height: 100vh; min-width: 0; border-radius: 0; resize: none; }
}