/* ─────────────────────────────────────────────────────────────────
   Toast notifications — append into ui.css
   ─────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 20px;              /* быстрые toast'ы — СЛЕВА (правый низ занят уведомлениями о сообщениях) */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}

/* ── Всплывающие уведомления о новых сообщениях (десктоп, правый низ) ────────────────────────── */
/* Только широкий десктоп (синхронно с NOTIFY_MIN_WIDTH в msg-notify.js): сузилось окно → блок прячется. */
@media (max-width: 1023px) { .msg-notify { display: none !important; } }

.msg-notify {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 8500;   /* ниже тёмных оверлеев/модалок (9000+), но выше обычного контента */
}
.msg-notify[hidden] { display: none; }

/* Карточка-контейнер: фон + тень. Ширину задаёт JS = ширина кол-3 минус небольшой отступ (налету). */
.msg-notify__card {
  width: 264px;                     /* фолбэк; JS перебьёт под ширину кол-3 */
  max-width: calc(100vw - 40px);
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f0f1f8;   /* сплошной фон блока (без прозрачности), тон как прежний лёгкий hover */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.4);
  padding: 12px 0px;
}
.msg-notify__card[hidden] { display: none; }

/* Футер: слева «Скрыть все», справа кнопка «свернуть» (в нижнем правом углу). */
.msg-notify__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0 18px;
}
.msg-notify__footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-notify__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.msg-notify__count[hidden] { display: none; }
.msg-notify__collapse {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: transparent;
  color: var(--color-text-muted); cursor: pointer; border-radius: 50%;
}
.msg-notify__collapse:hover { background: rgba(0,0,0,.08); color: var(--color-text); }
.msg-notify__collapse svg { width: 18px; height: 18px; }

.msg-notify__list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;          /* накопление → скролл, старые (снизу) уходят вниз */
  overflow-x: hidden;
  min-height: 0;
}

/* Элементы — БЕЗ фона и тени, разделены простой линией. */
.msg-notify__item {
  position: relative;
  cursor: pointer;
  padding: 14px 34px 14px 18px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.msg-notify__item:last-child { border-bottom: none; }
.msg-notify__item:hover { background: var(--color-surface); }   /* при наведении — белый (контраст к фону блока) */
.msg-notify__close {
  position: absolute;
  top: 12px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;                    /* появляется только при наведении на сообщение */
  transition: opacity var(--transition);
}
.msg-notify__item:hover .msg-notify__close { opacity: 1; }
.msg-notify__close:focus-visible { opacity: 1; }
.msg-notify__close:hover { background: rgba(0,0,0,.08); color: var(--color-text); }
.msg-notify__close svg { width: 14px; height: 14px; }
.msg-notify__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.msg-notify__title {
  flex: 1 1 auto;
  min-width: 0;                  /* чтобы имя обрезалось многоточием, а не распирало строку */
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-notify__body {
  font-size: 13px;
  color: #3f4656;   /* немного темнее, чем muted */
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;         /* не сильно обрезаем — до 3 строк, дальше многоточие */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.msg-notify__time {
  flex: 0 0 auto;                /* напротив имени справа, не сжимается */
  white-space: nowrap;
  font-size: 11px;               /* чуть мельче текста */
  color: #9aa0ad;                /* светлее текста сообщения */
  line-height: 1;
}

/* «Скрыть все» — слева в футере. */
.msg-notify__clear {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.msg-notify__clear:hover { background: rgba(10,23,131,.06); }

/* Свёрнутое состояние — круглая кнопка в углу. */
.msg-notify__fab {
  position: relative;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 50%;
  background: var(--color-primary); color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.45);
}
.msg-notify__fab[hidden] { display: none; }
.msg-notify__fab svg { width: 24px; height: 24px; }
.msg-notify__fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.msg-notify__fab-badge[hidden] { display: none; }

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(10, 23, 131, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 250ms ease-out, opacity 250ms ease-out;
  border-left: 4px solid #94a3b8;
}

.toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.toast--leaving {
  transform: translateX(120%);
  opacity: 0;
}

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast__icon svg {
  width: 100%;
  height: 100%;
}

.toast__msg {
  flex: 1;
  word-wrap: break-word;
}

.toast--success { border-left-color: #16a34a; }
.toast--success .toast__icon { color: #16a34a; }

.toast--error   { border-left-color: #dc2626; }
.toast--error   .toast__icon { color: #dc2626; }

.toast--info    { border-left-color: #0a1783; }
.toast--info    .toast__icon { color: #0a1783; }

@media (max-width: 768px) {
  .toast-stack {
    bottom: 80px; /* выше mobile-nav */
    right: 12px;
    left: 12px;
  }
  .toast {
    min-width: 0;
    max-width: none;
  }
}