/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.modal-overlay.visible {
  display: flex;
  opacity: 1;
}

/* Modal Container */
.modal {
  background: var(--white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  width: 100%;
  max-width: var(--max-width);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  padding-bottom: env(safe-area-inset-bottom);
}

.modal-overlay.visible .modal {
  transform: translateY(0);
}

/* Full screen modal */

/* Tall modal */
.modal--tall {
  max-height: 85vh;
}

.modal--full {
  border-radius: 0;
  max-height: 100vh;
  max-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}

/* Modal Handle */
.modal__handle {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0 var(--space-1);
}

.modal__handle::after {
  content: '';
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
}

/* Modal Header */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: background var(--transition-fast);
}

.modal__close:active {
  background: var(--gray-100);
}

.modal__close svg {
  width: 20px;
  height: 20px;
}

/* Modal Body */
.modal__body {
  padding: var(--space-4);
}

/* Modal Footer */
.modal__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--gray-100);
}

.modal__footer .btn {
  flex: 1;
}

/* Confirm Dialog */
/* с.108 (v970): диалог подтверждения обязан быть выше ЛЮБОГО оверлея приложения.
   Инлайновые шторки живут на 10001-10004 (детали напоминания, редактор, пикеры),
   а у диалога было 300 — подтверждение удаления рисовалось под затемнением и не
   получало кликов: экран выглядел зависшим. Класс общий, не только для напоминаний. */
.confirm-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.confirm-dialog.visible {
  display: flex;
}

.confirm-dialog__box {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.confirm-dialog__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.confirm-dialog__text {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-6);
}

.confirm-dialog__actions {
  display: flex;
  gap: var(--space-3);
}

.confirm-dialog__actions .btn {
  flex: 1;
}