/* Зефир — уведомления и индикатор связи.
   Токены берём из app.css: --brand, --warm, --ok, --bad, --surface,
   --line, --ink, --r-md, --sh2. Своих цветов не заводим, иначе
   тёмная тема разъедется. */

/* ─── стопка уведомлений ─── */

.zf-toasts{
  position:fixed; z-index:80;
  left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;              /* сквозь пустое место стопки можно нажимать */
}
/* нижняя панель списка занимает низ экрана — поднимаемся над ней */
.zf-toasts--above{ bottom:calc(76px + env(safe-area-inset-bottom)) }

@media(min-width:640px){
  .zf-toasts{ left:auto; right:20px; bottom:20px; width:380px; max-width:calc(100vw - 40px) }
  .zf-toasts--above{ bottom:20px }
}

.zf-toast{
  --zf-c:var(--brand);
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  min-height:56px; padding:11px 8px 11px 14px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-left:3px solid var(--zf-c);
  border-radius:var(--r-md); box-shadow:var(--sh2);
  font-size:14.5px; line-height:1.45;
  animation:zf-rise .26s var(--ease,ease) both;
}
.zf-toast--ok{ --zf-c:var(--ok) }
.zf-toast--warn{ --zf-c:var(--warm) }
.zf-toast--error{ --zf-c:var(--bad) }

.zf-toast__icon{ flex:none; color:var(--zf-c); display:grid; place-items:center;
  width:20px; height:20px; margin-top:2px }
.zf-toast__body{ flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:6px; padding-top:1px }
.zf-toast__text{ margin:0; overflow-wrap:anywhere }

/* Действие — это выбор человека, поэтому оно выглядит кнопкой,
   а не ссылкой в тексте, и держит тач-цель 44 пикселя.
   Цвет у кнопки всегда фирменный, а не по типу уведомления: красная кнопка
   рядом с ошибкой читается как «удалить», хотя это «повторить». */
.zf-toast__act{
  min-height:44px; padding:9px 15px; margin:2px 0 1px;
  border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius:999px;
  background:var(--surface); color:var(--brand);
  font-size:14px; font-weight:600; cursor:pointer;
}
.zf-toast__act:hover{ border-color:var(--brand); background:var(--tint,transparent) }

.zf-toast__x{
  flex:none; width:44px; height:44px; margin:-4px 0 -4px 0;
  display:grid; place-items:center;
  border:0; border-radius:999px; background:none;
  color:var(--ink30,#B5ADA3); cursor:pointer;
}
.zf-toast__x:hover{ color:var(--ink) }

.zf-toast.is-out{
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .2s var(--ease,ease), transform .2s var(--ease,ease);
}

/* ─── плашка «нет связи» ─── */

.zf-net{
  position:fixed; z-index:90; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:var(--warm-t,#FFEDE5); color:var(--ink);
  border-bottom:1px solid color-mix(in srgb, var(--warm) 35%, transparent);
  font-size:13.5px; font-weight:600; line-height:1.35; text-align:center;
  animation:zf-drop .24s var(--ease,ease) both;
}
.zf-net svg{ flex:none; color:var(--warm) }

/* Плашка висит над страницей, поэтому страница отодвигается на её высоту:
   иначе она закрывает шапку с логотипом и кнопкой. Высоту меряет net.js —
   текст на узком экране может лечь в две строки. */
html.zf-offline body{ padding-top:var(--zf-net-h,40px) }
html.zf-offline .hd{ top:var(--zf-net-h,40px) }

/* ─── оптимистичное обновление ─── */

.zf-optimistic{ animation:zf-rise .3s var(--ease,ease) both }
form[data-queue][aria-busy="true"]{ opacity:.7 }

/* ─── движение ─── */

@keyframes zf-rise{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }
@keyframes zf-drop{ from{ opacity:0; transform:translateY(-100%) } to{ opacity:1; transform:none } }
@keyframes zf-show{ from{ opacity:0 } to{ opacity:1 } }

/* Кому движение мешает — тому только появление, без выезжания. */
@media (prefers-reduced-motion:reduce){
  .zf-toast,.zf-net,.zf-optimistic{ animation:zf-show .12s linear both }
  .zf-toast.is-out{ transform:none; transition-duration:.12s }
}