/* ═══════════════════════════════════════════════════════════
   фидоня.дети — Обратная связь: тосты, полосы прогресса, заглушки
   ═══════════════════════════════════════════════════════════ */

/* ── 16. Тосты ───────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 120; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: var(--r-2);
  font-size: 0.85rem; font-weight: 600;
  background: var(--surface-solid); color: var(--text-1);
  border: 1px solid var(--border-1); box-shadow: var(--shadow-4);
  animation: toast-in 0.36s var(--ease-out);
}
.toast[data-kind="error"] { border-color: color-mix(in srgb, var(--live) 45%, transparent); color: var(--live); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.95); } }

.progress-track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s var(--ease); }
.progress-bar[data-share] { width: 0; }

/* ── Заглушка пустого списка ─────────────────────────────────── */
.empty-note { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; }