/* ============================================================
   Nexpeco — дрібні спільні компоненти, які створює js/utils.js.
   Раніше .toast стилізувався лише в styles/profile.css, а
   повідомлення про помилки вставлялись інлайн-стилями з js.
   ============================================================ */

/* --- Тост --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 1rem);
  transform: translate(-50%, 1rem);
  z-index: 2000;

  max-width: min(90vw, 26rem);
  padding: 0.75rem 1.1rem;

  font-size: 0.9rem;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity var(--t-base) var(--ease-out-strong), transform var(--t-spring) var(--ease-spring);
}

/* --- Інформаційний рядок замість вмісту списку/контейнера --- */

.notice {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.notice-error { color: #ffb4b4; }

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