/* Зов к вопросам Насте: плашка в правом нижнем углу, счётчик у «Штаб» и
   вид вопроса на доске.

   Плашка стоит НАД кнопкой замечаний (`.golos`, 52 px в том же углу) и над
   «Наверх»: три плавающих предмета в одном углу иначе накрыли бы друг
   друга. Токены общие (`osnovy.css`), своих цветов файл не заводит.

   Появление — сдвиг снизу с прозрачности; без скрипта класса `zov-viden`
   нет, и плашка стоит сразу, без перехода. Тот, кто попросил систему убрать
   анимацию, получает то же: правило под `prefers-reduced-motion`. */

/* --- плашка ------------------------------------------------------------ */

.zov {
  position: fixed;
  z-index: 21;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 52px + 14px);
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--accent-ring);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-2), 0 12px 32px -8px oklch(0.21 0.04 266 / 0.22);
  font-size: 15px;
  line-height: 1.5;
}
.zov-slova { margin: 0 0 10px; }
.zov-slova strong { font-weight: 600; }
.zov-knopki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Кнопки не меньше 44 px по высоте: планка тура знакомства, та же рука. */
.zov-knopki .btn { min-height: 44px; }
.zov-pozzhe { color: var(--fg-2); }
/* «Без звука» — тихая ссылка-кнопка, без рамки: решение на устройство, а не
   действие по вопросу. */
.zov-bez-zvuka {
  margin-left: auto;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--fg-3);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.zov-bez-zvuka:hover { color: var(--ink); }
.zov-bez-zvuka[disabled] { text-decoration: none; cursor: default; }

/* Появление и уход. Начальное положение — чуть ниже и прозрачно; класс
   `zov-viden` ставит скрипт на следующем кадре после загрузки. Без скрипта
   класса нет, поэтому в покое плашка ОБЯЗАНА быть видимой — начальные
   значения действуют только вместе со скриптом, через `.zov-zhivaya`. */
.zov-zhivaya { opacity: 0; transform: translateY(12px); }
.zov-zhivaya.zov-viden { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .zov-zhivaya {
    transition: opacity 220ms var(--e-out), transform 260ms var(--e-out);
  }
}

@media (max-width: 600px) {
  .zov {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    font-size: 16px;
  }
}

/* --- счётчик у ссылки «Штаб» в шапке ---------------------------------- */

.topbar .zov-schyot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
}

/* --- призыв и вид вопроса на доске ------------------------------------ */

.shtab-prizyv {
  margin: 0 0 18px;
  padding: 16px 20px;
  border: 1px solid var(--accent-ring);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-wash);
}
.shtab-prizyv > h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.shtab-prizyv > p { margin: 0 0 6px; max-width: 62em; line-height: 1.55; }
.shtab-prizyv > p:last-child { margin-bottom: 0; }

.shtab-nomer { font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; }
.shtab-nomer-tiho { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.shtab-novaya {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
}
.shtab-karta-novaya { box-shadow: var(--sh-1), 0 0 0 2px var(--accent-wash); }
.shtab-zhdyot { font-size: 12px; color: var(--accent-ink); }
.shtab-gorit {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--stop);
  background: color-mix(in oklch, var(--stop) 7%, transparent);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-1);
}

.shtab-zadacha {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
.shtab-minuty {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--bd-2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-2);
  white-space: nowrap;
}