/* ============================================================
   NOTIFICATIONS — единый тост для Django messages (success/error/
   warning/info), нижний правый угол экрана (4em от нижнего и правого
   края). Грузится ГЛОБАЛЬНО (base.html), т.к. {% if messages %}
   встречается на 8+ внутренних страницах дашборда, и раньше у каждой
   было своё оформление — где-то модалка с блюром (message-box/
   blurred-background в forms.css), где-то произвольные inline
   pure-alert с пастельными цветами, где-то <ul class="messages">.
   Теперь один компонент и один источник правды: users/js/notifications.js.

   Разметка на странице (см. partial/notifications.html):
   <div id="notifications">
     <div class="toast toast-success">
       <svg class="toast-icon">...</svg>
       <p>Текст сообщения.</p>
       <span class="toast-bar"></span>
     </div>
   </div>
   ============================================================ */

#notifications{
  position: fixed;
  bottom: 4em;
  right: 4em;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .6em;
  max-width: 22em;
  pointer-events: none;
}

.toast{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .6em;
  background: var(--c-surface);
  border: 1px solid var(--g3, var(--c-border));
  border-left: 3px solid var(--g3, var(--c-border));
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: .75em .9em;
  overflow: hidden;
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.toast.is-shown{ transform: translateX(0); opacity: 1; }
.toast.is-leaving{ transform: translateX(120%); opacity: 0; }

.toast-icon{
  width: 1.15em; height: 1.15em; flex: none; margin-top: .1em;
}
.toast p{
  margin: 0;
  font-size: .94em;
  line-height: 1.4;
  color: var(--c-text);
}

/* Полоска-таймер до автоскрытия — та же роль, что у .bar в макете,
   считает от border-left того же цвета. */
.toast-bar{
  position: absolute; left: 0; bottom: 0; height: 2px;
  transform-origin: left; transform: scaleX(1);
  transition: transform 4s linear;
}
.toast.is-shown .toast-bar{ transform: scaleX(0); }

.toast-success{ border-left-color: var(--c-success); }
.toast-success .toast-icon{ color: var(--c-success); }
.toast-success .toast-bar{ background: var(--c-success); }

.toast-error{ border-left-color: var(--c-error); }
.toast-error .toast-icon{ color: var(--c-error); }
.toast-error .toast-bar{ background: var(--c-error); }

.toast-warning{ border-left-color: var(--c-warn); }
.toast-warning .toast-icon{ color: var(--c-warn); }
.toast-warning .toast-bar{ background: var(--c-warn); }

.toast-info{ border-left-color: var(--c-accent); }
.toast-info .toast-icon{ color: var(--c-accent); }
.toast-info .toast-bar{ background: var(--c-accent); }

@media (prefers-reduced-motion: reduce){
  .toast{ transition: opacity .2s ease; }
  .toast-bar{ transition: none; }
}