/* =========================
   ECG MODAL FIX (mobile + desktop)
   ========================= */

/* 1) Блокируем скролл страницы, когда модалка открыта */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

/* 2) Оверлей модалки: фиксируем на весь экран */
.ecg-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  /* скрыто по умолчанию */
  display: none;

  /* фон */
  background: rgba(0,0,0,.55);

  /* центрирование */
  align-items: center;
  justify-content: center;

  /* чтобы свайпы по фону не прокручивали страницу */
  touch-action: none;
}

.ecg-modal.is-open {
  display: flex;
}

/* 3) Коробка модалки */
.ecg-modal__dialog {
  width: min(920px, 92vw);
  max-height: 88vh;              /* ключ: ограничиваем высоту */
  background: #fff;
  border-radius: 16px;
  overflow: hidden;              /* внутренний скролл будет в body */
  display: flex;
  flex-direction: column;
}

/* 4) Шапка (если есть) — не обязательна, но удобно */
.ecg-modal__header {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* 5) ВОТ ТУТ СКРОЛЛ */
.ecg-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;              /* ключ: скроллим внутри */
  -webkit-overflow-scrolling: touch;
  padding: 16px;

  /* разрешаем вертикальный свайп только внутри контента */
  touch-action: pan-y;
}

/* 6) Низ (если есть кнопки) */
.ecg-modal__footer {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* 7) Чуть более “мобильно” */
@media (max-width: 768px) {
  .ecg-modal__dialog {
    width: 94vw;
    max-height: 92vh;
    border-radius: 14px;
  }
  .ecg-modal__body {
    padding: 14px;
  }
}
/* Блокируем скролл сайта, когда модалка открыта */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

/* Модалка должна быть поверх и фиксированная */
.ecg-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

/* Внутри модалки делаем панель ограниченной по высоте */
.ecg-modal__panel {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* А вот тело модалки делает скролл */
.ecg-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Блокируем скролл сайта, когда модалка открыта */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

/* Оверлей на весь экран */
.ecg-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: none;
  background: rgba(0,0,0,.55);

  align-items: center;
  justify-content: center;

  /* чтобы свайпы по фону не прокручивали сайт */
  touch-action: none;
}

/* показываем модалку */
.ecg-modal.is-open {
  display: flex !important;
}

/* Панель модалки: ограничиваем высоту */
.ecg-modal__panel {
  width: min(920px, 92vw);
  max-height: 88vh;
  /* не трогаем background — пусть берётся из responsive.css (тёмный) */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* ТУТ СКРОЛЛ */
.ecg-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;              /* ключ */
  -webkit-overflow-scrolling: touch;

  padding: 16px;

  /* разрешаем вертикальный свайп только тут */
  touch-action: pan-y;
}

@media (max-width: 768px) {
  .ecg-modal__panel {
    width: 94vw;
    max-height: 92vh;
    border-radius: 14px;
  }
}
#ecg-result-modal .ecg-alert{
  display: flex;
  gap: 12px;
  border-radius: 14px;
  padding: 12px 12px;
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,0.08);
}

#ecg-result-modal .ecg-alert__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  flex: 0 0 28px;
  color: #fff;
}

#ecg-result-modal .ecg-alert__title{
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

#ecg-result-modal .ecg-alert__text{
  color: rgba(255,255,255,0.86);
}

#ecg-result-modal .ecg-alert--danger{
  background: rgba(255, 71, 87, 0.12);
  border-color: rgba(255, 71, 87, 0.35);
}

#ecg-result-modal .ecg-alert--danger .ecg-alert__icon{
  background: rgba(255, 71, 87, 0.9);
}

#ecg-result-modal .ecg-alert--muted{
  background: rgba(255,255,255,0.06);
}
#ecg-modal { z-index: 99998; }
#ecg-result-modal { z-index: 99999; }