/**
 * Компактные модалки: не «на весь экран», плотнее отступы (склад / WebView).
 */

.modal.ds-modal-sheet .modal-dialog {
  margin-top: var(--ds-space-4);
  margin-bottom: var(--ds-space-4);
}

@media (max-width: 575.98px) {
  .modal.ds-modal-sheet .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    max-width: min(100% - 1.25rem, 26rem);
  }

  .modal.ds-modal-sheet .modal-content {
    border-radius: var(--ds-radius-lg);
    /* Внутренний отступ снизу: жест / классическая панель в браузере; в APK основной расчёт — max-height */
    padding-bottom: max(var(--ds-space-2), env(safe-area-inset-bottom, 0px));
  }

  .modal.ds-modal-sheet .modal-header {
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--ds-divider);
  }

  .modal.ds-modal-sheet .modal-title {
    font-size: 1rem;
    line-height: var(--ds-line-tight);
  }

  .modal.ds-modal-sheet .modal-body {
    padding: var(--ds-space-3) var(--ds-space-4);
  }

  .modal.ds-modal-sheet .modal-footer {
    padding: var(--ds-space-3) var(--ds-space-4);
    gap: var(--ds-space-2);
    flex-wrap: wrap;
  }

  .modal.ds-modal-sheet .modal-footer .btn {
    flex: 1 1 auto;
    min-width: min(100%, 8rem);
  }
}

@media (min-width: 576px) {
  /* Не сужать широкие диалоги (тэги, превью и т.д.) */
  .modal.ds-modal-sheet .modal-dialog.modal-lg {
    max-width: min(800px, calc(100% - 3rem));
  }
  .modal.ds-modal-sheet .modal-dialog.modal-xl {
    max-width: min(1140px, calc(100% - 3rem));
  }
  .modal.ds-modal-sheet .modal-dialog:not(.modal-lg):not(.modal-xl) {
    max-width: 420px;
  }
}