.modal-overlay {
  animation: modal-fade-in 0.2s ease;
  background: var(--surface-overlay);
  inset: 0;
  position: fixed;
  z-index: var(--z-modal);
}

.modal-overlay--closing { animation: modal-fade-out 0.2s ease forwards; }

/* Настройки заявок — рабочая модалка, а не продолжение оливкового
   фона страницы. Затемнение нейтральное, чтобы карточки и поля читались
   как отдельный спокойный слой. */
.modal-overlay--lead-settings {
  background: rgb(8 10 9 / 72%);
}

/* Появление и уход — свойством translate, а не transform: в transform
   живёт центровка (а после перетаскивания — none), и кадры анимации
   её затирали, отчего панель прыгала вбок. */
.modal-panel {
  animation: modal-slide-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--admin-canvas);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: calc(100vh - 48px);
  max-width: min(680px, calc(100vw - 32px));
  min-width: 320px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-panel--closing { animation: modal-slide-out 0.18s ease-in forwards; }

/* Широкая модалка — формы контента с редактором. Высота задана, чтобы
   прокручивалась только форма, а её нижняя панель оставалась на месте. */
.modal-panel--wide {
  height: min(900px, calc(100vh - 48px));
  max-width: min(880px, calc(100vw - 32px));
  overflow: hidden;
  padding-bottom: 0;
}

.modal-panel--lead-settings {
  background: var(--lead-settings-panel);
  border: 1px solid var(--lead-settings-border);
}

.modal-panel--lead-create {
  max-width: min(560px, calc(100vw - 32px));
}

.modal-panel--lead-settings .modal-body {
  background: var(--lead-settings-panel);
}

.modal-panel--lead-settings .modal-header {
  background: var(--lead-settings-chrome);
  border-bottom-color: var(--lead-settings-border);
  box-shadow: 0 6px 18px -10px var(--lead-settings-shadow);
}

.modal-header {
  align-items: center;
  background: var(--admin-chrome);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 8px -6px var(--admin-chrome-shadow);
  cursor: grab;
  display: flex;
  gap: var(--sp-4);
  justify-content: space-between;
  padding: 6px 12px;
  position: relative;
  touch-action: none;
  user-select: none;
}

/* Класс ставит/снимает сам drag в Modal.tsx: :active не годится,
   курсор должен оставаться «схвачен», пока палец не за шапкой */
.modal-panel.is-dragging .modal-header {
  cursor: grabbing;
}

/* Овальная риска сверху — подсказка «за это можно тянуть», как у
   шторок в macOS/iOS. Сама не интерактивна, drag ловит вся шапка.
   Видна только при наведении на шапку — вне ховера не нужна */
.modal-grip {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  height: 4px;
  left: 50%;
  position: absolute;
  top: 7px;
  transition: var(--tr-fast);
  translate: -50% 0;
  width: 34px;
}

.modal-header:hover .modal-grip,
.modal-panel.is-dragging .modal-grip {
  width: 60px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  padding-left: 8px;
  color: var(--color-bone-50);
}

.modal-close {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-s);
  color: var(--color-text-soft);
  display: flex;
  flex-shrink: 0;
  font-size: 1.4rem;
  height: 32px;
  justify-content: center;
  line-height: 1;
  transition: background var(--tr-fast), color var(--tr-fast);
  width: 32px;
  padding: 4px;
}

.modal-close:hover {
  background: var(--state-danger-soft);
  color: var(--state-danger);
}

/* Полоса прокрутки скрыта, прокрутка остаётся: колесо, тач, клавиши */
.modal-body {
  -ms-overflow-style: none;
  overflow-y: auto;
  padding: 0 18px 24px;
  scrollbar-width: none;
}

.modal-body::-webkit-scrollbar {
  display: none;
}

/* В широкой модалке тело — единственный прокручиваемый слой: шапка
   сверху и футер снизу вынесены на уровень панели. */
.modal-panel--wide .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Слот нижней панели. Пуст, когда компонент в него ничего не портит */
.modal-footer {
  flex-shrink: 0;
}

.modal-footer:empty {
  display: none;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
}

@keyframes modal-fade-out {
  to { opacity: 0; }
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

@keyframes modal-slide-out {
  to {
    opacity: 0;
    translate: 0 14px;
  }
}