/* ═══════════════════════════════════════════════════════════════════════════
   SpellBook · ЕДИНЫЙ ТОСТ (результат оплаты и родня). САМОДОСТАТОЧНЫЕ стили.
   Разметка: includes/sb_toast.php · логика: /js/sb-toast.js

   Сделан по образцу /css/auth-modal.css: все токены объявлены ЛОКАЛЬНО на
   .sb-toasts, поэтому вид одинаков и на маркет-шелле (data-theme), и на
   страницах header.php (всегда тёмные), и внутри assistant.php.

   Верх по центру: результат оплаты приходит полной перезагрузкой после
   возврата от банка, человек смотрит в верх экрана, а низ на iPhone занят
   панелью Safari и «домашней» чертой.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Локальные токены. Значения = /css/marketplace.css:74-104 ─────────────── */
.sb-toasts{
  --sb-modal:#1c1c1f; --sb-ring:rgba(255,255,255,0.14);
  --sb-text:#f0f0f0; --sb-text-2:#9a9a9a;
  --sb-pos:#2ebd85; --sb-neg:#e5484d; --sb-pro:#f5b301; --sb-info:#3b9eff;
  --sb-shadow:0 18px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --sb-font:"Exo 2","Exo 2 Fallback",system-ui,sans-serif;
  --sb-ease:cubic-bezier(0.22,1,0.36,1); --sb-dur:220ms;
  /* Высота шапки. header.php: 64px, ≤1023px 60px. Маркет-шелл: --hdr-h 58px.
     Страница без шапки (assistant.php прячет .header) ставит 0. */
  --sb-hdr:64px;
}
[data-theme="light"] .sb-toasts,
body.light-theme .sb-toasts{
  --sb-modal:#ffffff; --sb-ring:rgba(0,0,0,0.16);
  --sb-text:#18181b; --sb-text-2:#5c5c66;
  --sb-pos:#1a9e6b; --sb-neg:#d83a3f; --sb-pro:#b45309; --sb-info:#2b8aef;
  --sb-shadow:0 18px 48px rgba(15,23,42,0.20), 0 2px 8px rgba(15,23,42,0.10);
}
@media (max-width:1023px){ .sb-toasts{ --sb-hdr:60px; } }
.sb-toasts[data-hdr="market"]{ --sb-hdr:58px; }
.sb-toasts[data-hdr="none"]{ --sb-hdr:0px; }

/* ── Полоса тостов ────────────────────────────────────────────────────────── */
.sb-toasts{
  position:fixed;
  top:calc(var(--sb-hdr) + 12px + env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%);
  /* z выше шапки монолита (1000), полосы загрузки (99999) и модалки входа
     (100000): результат оплаты нельзя ничем перекрыть. */
  z-index:100010;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:max-content; max-width:min(440px, calc(100vw - 24px));
  pointer-events:none;
  font-family:var(--sb-font);
  /* Типографика не наследуется от страницы: у монолита body 16px, у маркета 14px. */
  font-size:13.5px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
.sb-toasts:empty{ display:none; }

/* ── Тост ─────────────────────────────────────────────────────────────────── */
.sb-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  width:100%; min-height:52px; box-sizing:border-box;
  padding:12px 10px 12px 13px;
  border-radius:12px;
  border:1px solid var(--sb-ring);
  /* Слева цветной кант тона. Проверено: нейтральная подложка даёт против фона
     страницы всего 1,1:1, а этот кант 5,3-8,2:1. Заметность держит именно он. */
  border-left:3px solid var(--sb-tone, var(--sb-info));
  background:var(--sb-modal);
  color:var(--sb-text);
  /* !important: на страницах монолита есть глобальное
     * { box-shadow:none !important } (header.php:526, index.php, marketplace.php,
     sidebar_layout.php:641). Класс с !important его перебивает. */
  box-shadow:var(--sb-shadow) !important;
  animation:sb-toast-in var(--sb-dur) var(--sb-ease) both;
}
.sb-toast.is-out{ animation:sb-toast-out 180ms var(--sb-ease) both; }
.sb-toast[data-tone="ok"]{    --sb-tone:var(--sb-pos); }
.sb-toast[data-tone="error"]{ --sb-tone:var(--sb-neg); }
.sb-toast[data-tone="warn"]{  --sb-tone:var(--sb-pro); }
.sb-toast[data-tone="info"]{  --sb-tone:var(--sb-info); }

/* Иконка. Только линейный SVG, эмодзи в интерфейсе запрещены. */
.sb-toast-ic{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; color:var(--sb-tone); }
.sb-toast-ic svg{ display:block; width:20px; height:20px; }

.sb-toast-body{ min-width:0; flex:1 1 auto; }
.sb-toast-title{ font-weight:600; font-size:14.5px; line-height:1.3; color:var(--sb-text); }
.sb-toast-text{ margin-top:2px; color:var(--sb-text-2); overflow-wrap:anywhere; }
.sb-toast-title + .sb-toast-text{ margin-top:3px; }

.sb-toast-act{
  flex:0 0 auto; align-self:center;
  padding:6px 11px; border:0; border-radius:8px; cursor:pointer;
  background:var(--sb-text); color:var(--sb-modal);
  font:600 13px/1 var(--sb-font);
}
.sb-toast-close{
  flex:0 0 auto; align-self:flex-start;
  width:28px; height:28px; padding:0; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--sb-text-2);
  display:flex; align-items:center; justify-content:center;
}
.sb-toast-close:hover{ color:var(--sb-text); background:rgba(128,128,128,0.14); }
.sb-toast-close:focus-visible,
.sb-toast-act:focus-visible{
  outline:2px solid var(--sb-tone); outline-offset:2px;
  box-shadow:none !important;
}
.sb-toast-close svg{ display:block; width:16px; height:16px; }

/* ── Телефон. Здесь всё и происходит: платят с iPhone ─────────────────────── */
@media (max-width:600px){
  .sb-toasts{
    left:12px; right:12px; transform:none;
    width:auto; max-width:none;
  }
  .sb-toast{ padding:12px 8px 12px 12px; }
  .sb-toast-title{ font-size:15px; }
  .sb-toast-text{ font-size:14px; }
  /* Действие уезжает во вторую строку, а не сжимает текст в колонку.
     Метку data-act ставит JS: :has() тут не нужен, правило работает и на
     старых движках. */
  .sb-toast[data-act]{ flex-wrap:wrap; }
  .sb-toast[data-act] .sb-toast-body{ flex-basis:100%; }
  .sb-toast[data-act] .sb-toast-act{ margin-left:30px; }
}

/* ── Движение ─────────────────────────────────────────────────────────────── */
@keyframes sb-toast-in{
  from{ opacity:0; transform:translateY(-10px) scale(0.98); }
  to{ opacity:1; transform:none; }
}
@keyframes sb-toast-out{
  from{ opacity:1; }
  to{ opacity:0; transform:translateY(-6px); }
}
/* Человек попросил меньше движения: появление мгновенное, время показа то же. */
@media (prefers-reduced-motion: reduce){
  .sb-toast, .sb-toast.is-out{ animation:none; }
}