
/* Step configuration popups: retain the canvas width and group router setup. */
.flow-workspace .native-dialog:has(.flow-step-popup) { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; }
.flow-workspace .native-dialog.wide:has(.flow-step-popup) { width: min(880px, calc(100vw - 24px)); }
.flow-step-popup { min-width: 0; }
.flow-step-popup form { padding: 20px; }
.flow-step-popup .flow-inspector-fields { border: 0; padding: 0; min-width: 0; }
.flow-step-popup .native-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.flow-step-popup .native-field { min-width: 0; }
.flow-step-popup .native-field:has(textarea), .flow-step-popup .flow-audio-field { grid-column: 1 / -1; }
.flow-popup-section, .flow-step-popup .flow-mappings { margin: 0 0 24px; }
.flow-popup-section h3, .flow-step-popup .flow-mappings h3 { font-size: 16px; margin: 0 0 6px; }
.flow-popup-section > p, .flow-step-popup .native-panel-heading p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.flow-step-popup .native-panel-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.flow-step-popup .native-form-section { min-width: 0; padding: 16px; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: #faf9fc; }
.flow-step-popup .native-form-section legend { padding: 0 6px; font-weight: 600; }
.flow-step-popup .native-field small { font-size: 12px; color: var(--muted); }
.flow-router-empty { padding: 20px; border: 1px dashed var(--border); border-radius: 12px; }
.flow-step-popup summary { cursor: pointer; font-weight: 600; padding: 14px 0; }
.flow-step-popup .native-form-actions { position: sticky; bottom: -20px; background: white; padding: 16px 0 20px; margin-bottom: -20px; border-top: 1px solid var(--border); display: flex; gap: 10px; z-index: 1; }
.flow-step-popup .native-form-actions .native-danger { margin-right: auto; }
@media (max-width: 600px) {
 .flow-step-popup form { padding: 16px; }
 .flow-step-popup .native-form-grid { grid-template-columns: minmax(0,1fr); }
 .flow-step-popup input, .flow-step-popup textarea, .flow-step-popup select { font-size: 16px; }
 .flow-step-popup .native-form-actions { flex-wrap: wrap; bottom: -16px; margin-bottom: -16px; padding-bottom: 16px; }
 .flow-step-popup .native-form-actions button { min-height: 44px; }
 .flow-step-popup .native-form-actions .native-danger { flex-basis: 100%; justify-content: flex-start; }
}

.flow-step-popup { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.flow-step-popup { overflow-anchor: none; }
