:root {
    --modal-safe-bottom: calc(16px + env(safe-area-inset-bottom));
}

.modal-dialog {
    margin: 0 5px;
    gap: 10px;
    max-width: none;
    width: calc(100% - 10px);
}

.modal-content-inner {
    max-height: calc(100vh - 220px);
    font-size: 16px;
    line-height: 1.6;
}

.modal-content {
    max-width: none;
}

.modal-content-scroll {
    max-height: calc(100vh - 240px);
}

.modal h2,
.modal-feedback h2,
.step h2 {
    font-size: 22px;
}

.modal-actions {
    margin-bottom: var(--modal-safe-bottom);
    padding: 8px 12px;
    gap: 10px;
}

.modal-actions.is-single {
    padding: 6px 8px;
    gap: 0;
}

.modal-nav-button {
    width: 52px;
    height: 52px;
}

.modal-nav-button::before {
    width: 38%;
    height: 38%;
}

@media (max-height: 700px) {
    .modal-content-inner {
        max-height: calc(100vh - 300px);
    }

    .modal-actions {
        margin-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}