/* Dialog (Sendplane design system): at most 620px, in three bands (header,
 * fields, actions) on surface-elevated, over the blurred scrim. It fades and
 * scales up from .97 over 180ms. The imported .modal classes use it. */

.modal-backdrop {
  position: fixed;
  z-index: var(--z-dialog);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  animation: dialog-scrim-in 180ms ease both;
}
.modal {
  width: min(var(--dialog-width), calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-dialog);
  color: var(--fg-primary);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-dialog);
  animation: dialog-in 180ms var(--ease-out) both;
}
.modal-wide { width: min(700px, calc(100vw - 32px)); }
.modal-xl { width: min(800px, calc(100vw - 32px)); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.modal-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.modal-subtitle { max-width: 440px; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
.modal-body { padding: 22px 24px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 24px; border-top: 1px solid var(--border-subtle); background: var(--surface-elevated); }
.modal-sticky-footer .modal-footer { position: sticky; z-index: 1; bottom: 0; }

@keyframes dialog-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes dialog-scrim-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .modal-header, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }
}