/* Sprint 5 Phase 4 — Mobile modal workflow improvements */
.modal-backdrop.open {
  overscroll-behavior: contain;
}

.modal-backdrop .modal {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 900px);
}

.modal-backdrop .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-backdrop .a3-modal-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e5e7eb);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .08);
}

.a3-modal-drag-handle {
  display: none;
}

.modal-backdrop[data-a3-dirty] .modal-title::after {
  content: ' •';
  color: var(--warning, #d97706);
  font-weight: 900;
}

@media (max-width: 768px) {
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-backdrop .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 94dvh;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    transform-origin: bottom center;
    transition: transform .18s ease;
  }

  .modal-backdrop .modal-header {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 58px;
    padding-top: 18px;
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    touch-action: none;
  }

  .a3-modal-drag-handle {
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted, #64748b) 45%, transparent);
    transform: translateX(-50%);
  }

  .modal-backdrop .modal-body {
    padding-bottom: 22px;
  }

  .modal-backdrop .modal-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }

  .modal-backdrop .modal-footer .btn {
    min-height: 46px;
    width: 100%;
  }

  .modal-backdrop .modal-close {
    min-width: 42px;
    min-height: 42px;
  }

  .modal-backdrop .modal.a3-modal-dragging {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop .modal { transition: none !important; }
}