/* noch-stick.css — липкая кнопка связи для главной и пяти кейсов (круг 3, решение владельца 29.09).
   Один файл на шесть страниц: главная core.css не подключает, кейсы не подключают noch.css, а токены
   --brass, --night и --ff-body у обоих слоёв одинаковые по имени и значению. Текст на кнопке: --night,
   как у .go главной; светлое кольцо фокуса: --paper у кейсов, --ink у главной (оба тёплый белый).
   Эталон: mainletter.ru/1440-03 (банк студий G4): вкладка сбоку, а не круглая кнопка поверх текста;
   на телефоне правого поля нет (текст идёт до 20 px от края), поэтому там пилюля внизу справа, и
   stick.js прячет её, когда под ней стенд, кадр кейса или поля формы.
   Кнопку создаёт stick.js: без скрипта её нет, шапка с Telegram остаётся. position:fixed, в поток
   не входит: появление не двигает вёрстку (CLS 0). Скрыта через visibility: невидимая не ловит Tab. */

.stick {
  position: fixed;
  z-index: 40;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--night);
  box-shadow: 0 0 0 2px var(--night);   /* тот же ободок цвета ночи, что у .go: на светлом кадре латунь не сливается */
  font: 600 16px/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* уходит быстро (110 мс, --dur-press): когда под кнопку въезжает строка, она не должна висеть поверх неё;
     приходит за 200 мс (--dur-ui, бюджет UI до 300) на жест вверх, уходит на жест вниз (stick.js, с 27.10) */
  transition:
    opacity 110ms cubic-bezier(.22, 1, .36, 1),
    transform 110ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 110ms;
}
.stick.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms cubic-bezier(.22, 1, .36, 1),
    transform 200ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}
.stick:active { transform: scale(.97); transition: transform 110ms cubic-bezier(.22, 1, .36, 1); }
.stick:focus-visible {
  outline: 2px solid var(--paper, var(--ink));
  outline-offset: 2px;
}

/* широкий экран: вкладка на правом краю, текст снизу вверх, половина пилюли (G4). Только от 82rem (1312 px):
   колонки главной кончаются на 1256 px, правое поле от 56 px; на 1024 поля 26 px, и вкладка закрывала концы строк
   цены (худший случай круга 3), там пилюля внизу. Где под вкладкой стенд, кадр или текст «Как я работаю»,
   stick.js её прячет */
@media (min-width: 82rem) {
  .stick {
    right: 0;
    top: 50%;
    bottom: auto;
    min-width: 44px;
    min-height: 132px;
    padding: 20px 0;
    border-radius: 999px 0 0 999px;
    writing-mode: vertical-rl;
    transform: translate(8px, -50%) rotate(180deg);
  }
  .stick.is-on { transform: translate(0, -50%) rotate(180deg); }
  .stick:active { transform: translate(0, -50%) rotate(180deg) scale(.97); }
}

/* без движения: кнопка не едет, только проявляется и гаснет; резкое включение-выключение на краю зрения
   читалось бы миганием, а прозрачность вестибулярно безопасна (apple-design §14) */
@media (prefers-reduced-motion: reduce) {
  .stick { transform: none; transition: opacity 110ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 110ms; }
  .stick.is-on { transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  /* без сдвига нажатие отвечает подсветкой, как у стендов (improve-animations, круг 3) */
  .stick:active { transform: none; filter: brightness(.88); }
  @media (min-width: 82rem) {
    .stick, .stick.is-on, .stick:active { transform: translate(0, -50%) rotate(180deg); }
  }
}