/* Уведомления: стопка справа снизу. Карточки стеклянные, у каждой
   полоса остатка времени; наведение ставит её на паузу, карточку
   можно смахнуть вбок. Префикс классов — toast-. */

/* Правый верхний угол; column-reverse — свежее уведомление сверху */
.toast-list {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: calc(100vw - 32px);
  position: fixed;
  right: 24px;
  top: 24px;
  width: 380px;
  z-index: var(--z-toast);
}

/* Пока курсор не в стопке, старые карточки чуть отступают на задний план */
.toast-list:not(.is-open) .toast:not(:last-child) {
  opacity: 0.72;
  scale: 0.97;
}

.toast {
  align-items: flex-start;
  animation: toast-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(8px);
  background: var(--admin-glass-surface);
  border: 1px solid var(--admin-glass-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-modal);
  color: var(--color-text);
  cursor: grab;
  display: flex;
  gap: 10px;
  overflow: hidden;
  padding: 12px 14px;
  position: relative;
  touch-action: pan-y;
  transition: opacity var(--tr-fast), scale var(--tr-fast), transform var(--tr-fast);
  user-select: none;
}

.toast.is-dragging {
  cursor: grabbing;
  transition: none;
}

.toast.is-leaving {
  animation: toast-out 0.22s ease forwards;
}

.toast-icon {
  align-items: center;
  display: flex;
  flex: none;
  height: 20px;
  justify-content: center;
  width: 20px;
}

/* Плашка красится под тип, не только иконка: одного стекла
   (--admin-glass-surface) на тёмном фоне админки не видно —
   карточка сливалась с подложкой. Заливка полупрозрачная (58%),
   не сплошная: это стекло, а не цветная карточка — сквозь него
   должно быть видно то, что под ним, просто с зелёным (красным,
   золотым) оттенком. От того, что проглядывает резкой картинкой,
   спасает backdrop-filter на .toast — он размывает подложку под
   всей плашкой. Текст и иконка светлые: на цветном стекле тёмный
   --color-text перестаёт читаться. */
.toast--success {
  background: color-mix(in srgb, #1f8a4c 48%, transparent);
  border-color: rgb(255 255 255 / 24%);
  box-shadow: var(--shadow-modal), 0 0 22px rgb(31 138 76 / 30%);
  color: var(--color-bone-50);
}

.toast--error {
  background: color-mix(in srgb, #be3a2e 58%, transparent);
  border-color: rgb(255 255 255 / 24%);
  box-shadow: var(--shadow-modal), 0 0 22px rgb(190 58 46 / 30%);
  color: var(--color-bone-50);
}

.toast--info {
  background: color-mix(in srgb, #a3761f 58%, transparent);
  border-color: rgb(255 255 255 / 24%);
  box-shadow: var(--shadow-modal), 0 0 22px rgb(163 118 31 / 30%);
  color: var(--color-bone-50);
}

.toast--success .toast-icon,
.toast--error .toast-icon,
.toast--info .toast-icon {
  color: var(--color-bone-50);
}

.toast--success .toast-description,
.toast--error .toast-description,
.toast--info .toast-description {
  color: rgb(243 238 223 / 78%);
}

.toast--success .toast-close,
.toast--error .toast-close,
.toast--info .toast-close {
  color: rgb(243 238 223 / 78%);
}

.toast--success .toast-close:hover,
.toast--error .toast-close:hover,
.toast--info .toast-close:hover {
  color: var(--color-bone-50);
}

.toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toast-message {
  font-size: 0.92rem;
  line-height: 1.35;
  margin: 0;
}

.toast-description {
  color: var(--color-text-soft);
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
}

.toast-action {
  background: var(--surface-hover);
  border: 1px solid var(--admin-glass-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  flex: none;
  font-family: var(--font-main);
  font-size: 0.78rem;
  margin-left: auto;
  padding: 5px 12px;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}

.toast-action:hover {
  background: var(--surface-raised);
  border-color: var(--admin-accent);
}

.toast-close {
  background: none;
  border: 0;
  color: var(--color-text-soft);
  cursor: pointer;
  flex: none;
  line-height: 0;
  margin-left: auto;
  opacity: 0;
  padding: 4px;
  transition: color var(--tr-fast), opacity var(--tr-fast);
}

.toast-action + .toast-close { margin-left: 0; }

.toast:hover .toast-close,
.toast-close:focus-visible {
  opacity: 1;
}

.toast-close:hover { color: var(--color-text); }

/* Остаток времени: полоса ужимается ровно duration, пауза — при наведении */
.toast-progress {
  animation: toast-progress linear forwards;
  background: currentColor;
  bottom: 0;
  height: 2px;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transform-origin: left center;
  width: 100%;
}

/* currentColor на насыщенной заливке был бы того же цвета, что и
   фон, и полоса стала бы не видна — здесь она светлая, приглушённая */
.toast--success .toast-progress,
.toast--error .toast-progress,
.toast--info .toast-progress {
  color: var(--color-bone-50);
  opacity: 0.4;
}

.toast-spinner {
  animation: toast-spin 0.7s linear infinite;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border-top-color: var(--admin-accent);
  display: block;
  height: 15px;
  width: 15px;
}

/* Прозрачность в появлении не участвует намеренно: в фоновой вкладке
   анимации стоят на паузе, и карточка залипла бы на первом кадре */
@keyframes toast-in {
  from { transform: translateY(-14px) scale(0.96); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(24px) scale(0.96); }
}

@keyframes toast-progress {
  to { transform: scaleX(0); }
}

@keyframes toast-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .toast-list {
    left: 16px;
    right: 16px;
    top: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }

  .toast-progress {
    display: none;
  }
}