/* ============================================================
   Marketplace-Assist — Notice Toast (персистентное напоминание) styles
   Подключать ПОСЛЕ theme.css.
   Все цвета/размеры — через CSS-переменные из theme.css.
   Никаких hardcoded hex/rgba (failure-taxonomy 1.x).
   ============================================================ */

/* Селекторы квалифицированы `.ma-notice.ma-toast` (а не «голый» `.ma-toast`):
   на /analytics/ и /pricing/ их page-styles.css объявляет СВОЙ `.ma-toast`
   (другой тост, `pointer-events:none` + show-класс `.visible`), который грузится
   ПОЗЖЕ и при равной специфичности перебивал наш тост-напоминание → он был
   невидим и некликабелен. Двойной класс `.ma-notice.ma-toast` поднимает
   специфичность (0,2,0 > 0,1,0) → наш стиль выигрывает независимо от порядка
   подключения CSS. `.ma-notice` ставится в notice-toast.js на корень тоста. */
/* ── Стек тостов: один fixed flex-column контейнер у низ-право экрана ──────────
   Несколько напоминаний складываются друг над другом с gap'ом и не
   накладываются даже при многострочном тексте (заменяет ручной bottomOffset).
   72px от низа — ВЫШЕ summary-bar (она у низа экрана). column-reverse: новый
   тост появляется снизу стека (ближе к глазу), старые поднимаются. */
.ma-toast-stack {
  position: fixed;
  bottom: 72px;
  right: 16px;
  z-index: 9400;                 /* ниже ErrorToast (9500) — ошибки приоритетнее */
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  align-items: flex-end;
  pointer-events: none;          /* контейнер прозрачен для кликов; тосты — auto */
  max-width: calc(100vw - 32px);
}

.ma-notice.ma-toast {
  /* КРИТ: тост лежит ВНУТРИ стека (.ma-toast-stack) и должен участвовать в его
     flex-потоке. На analytics/pricing есть СВОЙ page-local `.ma-toast`
     (alert-замена) с `position:fixed; bottom:24px` — он бы вырвал наш тост из
     потока (стек схлопывается в height:0, тосты накладываются). Двойной класс
     `.ma-notice.ma-toast` (0,2,0) перебивает page-local `.ma-toast` (0,1,0) →
     сбрасываем позиционирование в static, раскладку держит стек. */
  position: static;
  bottom: auto;
  right: auto;
  top: auto;
  /* page-local `.ma-toast` (analytics/pricing) добавляет padding:10px 18px на
     корень — нам padding держат .ma-toast-row/.ma-toast-actions, корень = 0. */
  padding: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  /* NB: акцентной полосы border-left:3px НЕТ — это анти-AI-tell (ma-design).
     Акцент несут иконка info-кружок + ссылка-действие, не цветная кромка. */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);       /* theme-aware тень из theme.css */
  font-size: 13px;
  color: var(--text);
  /* Тост-напоминание интерактивен (кнопки снуза/action) — явно перебиваем
     возможный `pointer-events:none` от page-local `.ma-toast` И от стека. */
  pointer-events: auto;
  /* стартовое состояние для анимации появления */
  opacity: 0;
  transform: translateX(110%);
  transition: opacity .25s ease, transform .25s ease;
}
.ma-notice.ma-toast--in {
  opacity: 1;
  transform: translateX(0);
}

/* Ряд 1: иконка + сообщение (на всю ширину) + «×». Сообщение получает всю
   ширину тоста → переносится нормально (2-3 строки), а не по одному слову. */
.ma-toast-row {
  display: flex;
  align-items: flex-start;        /* иконка по верхнему краю многострочного текста */
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
}

.ma-toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--ma-toast-accent, var(--accent));
  /* вектор подхватывает currentColor → бренд/зелёный, не оранж */
  margin-top: 1px;                /* оптическое выравнивание с первой строкой */
}
.ma-toast-icon svg { display: block; }

.ma-toast-msg {
  flex: 1;
  line-height: 1.4;
  min-width: 0;
}

/* Ряд 2: кнопка действия под текстом, выровнена вправо. */
.ma-toast-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--space-3) var(--space-3);
}

/* Действие — стиль ССЫЛКИ, ОДИН-в-один с advisory-баннером tax-status-banner.js
   (его `.ma-tax-banner__link`): синий акцент-текст, font-weight 600, без заливки
   и рамки, подчёркивание на hover. Зелёной/залитой кнопки НЕТ (зелёный = success
   в нашей системе; залитая кнопка на мягком advisory выглядит агрессивно и
   конфликтовала с синим фоном). Это <button>, но визуально = ссылка. */
.ma-toast-action {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease;
}
.ma-toast-action:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.ma-toast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text2);
  cursor: pointer;
  padding: 0 2px;
  font-family: inherit;
}
.ma-toast-dismiss:hover { color: var(--text); }

/* Меню «закрыть на…» (раскрывается под строкой) */
.ma-toast-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}
.ma-toast-menu[hidden] { display: none; }

.ma-toast-menu-hint {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

.ma-toast-snooze {
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.ma-toast-snooze:hover {
  background: var(--accent-light);
  border-color: var(--border);
}
/* «Больше не показывать» — приглушаем, чтобы не был самым заметным вариантом
   (мягкое подталкивание оставить напоминание). */
.ma-toast-forever { color: var(--text2); }
.ma-toast-forever:hover { color: var(--red); }

/* ── A11y (№36): видимый фокус на кнопках тоста ──────────────────────────────
   :focus-visible (а не :focus) — кольцо только при клавиатурной навигации,
   мышиный клик его не показывает. Токен --accent из theme.css (обе темы). */
.ma-toast-action:focus-visible,
.ma-toast-dismiss:focus-visible,
.ma-toast-snooze:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}