/* ===================================================================== */
/* assets/notify.css — стили “уведомлений” (тостов)                       */
/* Маленькие полупрозрачные карточки в правом нижнем углу.               */
/* Цвета: зелёный (success), оранжевый (warning), красный (error).       */
/* ===================================================================== */

.tp-toast-container {
  position: fixed;
  right: 16px;           /* нижний правый угол */
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;             /* расстояние между тостами */
  z-index: 2147483000;   /* поверх всего UI */
  pointer-events: none;  /* кликабельны только сами тосты внутри */
}

.tp-toast-container[popover] {
  inset: auto 16px 16px auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.tp-toast {
  pointer-events: auto;  /* сам тост кликабелен */
  min-width: 260px;
  max-width: 420px;
  box-sizing: border-box;

  padding: 12px 48px 12px 12px;
  border-radius: 12px;
  color: #0b0f0f; /* тёмный текст для читабельности */
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 28px rgba(2, 6, 23, .18);

  /* полупрозрачная подложка по умолчанию (перекрывается модификаторами) */
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(0,0,0,.08);

  position: relative;
  animation: tp-toast-in 160ms ease-out both;
}

/* Цветовые модификаторы */
.tp-toast--success {
  background: rgba(16, 185, 129, .15);   /* зелёный с прозрачностью */
  border-color: rgba(16, 185, 129, .35);
}
.tp-toast--warning {
  background: rgba(245, 158, 11, .18);   /* оранжевый */
  border-color: rgba(245, 158, 11, .40);
}
.tp-toast--error {
  background: rgba(239, 68, 68, .20);    /* красный */
  border-color: rgba(239, 68, 68, .45);
}

.tp-toast__text {
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap; /* поддержка \n */
  word-wrap: break-word;
}

/* Кнопка закрытия (крестик) в правом верхнем углу карточки */
.tp-toast button.tp-toast__close {
  position: absolute;
  right: 9px;
  top: 9px;
  display: grid;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(11,15,15,.68);
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
}
.tp-toast button.tp-toast__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.tp-toast button.tp-toast__close:hover {
  background: rgba(0,0,0,.06);
}
.tp-toast button.tp-toast__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Анимации появления/исчезновения */
@keyframes tp-toast-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.tp-toast--hiding {
  animation: tp-toast-out 140ms ease-in forwards;
}
@keyframes tp-toast-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

/* Мобильная адаптация: при узком экране растянем до края */
@media (max-width: 560px) {
  .tp-toast-container,
  .tp-toast-container[popover] {
    inset: auto 8px 8px 8px;
  }
  .tp-toast {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 767px) {
  body:has(.mobile-nav) .tp-toast-container,
  body:has(.mobile-nav) .tp-toast-container[popover] {
    inset: auto 8px calc(var(--mobile-nav-height, 68px) + env(safe-area-inset-bottom) + 8px) 8px;
  }
}