/* ============================================================================
   OKO · СЛОЙ ПОЛИРОВКИ v2
   Грузится ПОСЛЕ app.css. Здесь живут сквозные правила адаптации, типографики
   и хрома, которые обязаны перекрывать точечные стили ядра.

   Принципы:
     1. Безопасные зоны — только через --oko-safe-*. Никаких голых env().
     2. Ни один текст не обрезается и не рвётся посреди слова.
     3. Ни один блок не залезает под интерфейс Telegram сверху и снизу.
     4. Одинаковое поведение: Telegram Mini App, мобильный браузер, планшет, ПК.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ТИПОГРАФИКА: запрет разрывов посреди слова
   Причина бага «Пополнит / ь», «Перевест / и»: узкие flex-ячейки + унаследованный
   word-break:break-all. Ставим нормальный перенос по словам, а неразрывные
   куски (адреса кошельков, хеши) отдельно помечаем классом .oko-breakable.
   --------------------------------------------------------------------------- */
button, .btn, .chip, .svc-label, .tab-btn, .chip-btn,
nav#tabs > button, nav#tabs > button span,
.wal-act span, .wal-act b, .w2-row b, .w2-row span,
label, .lbl, h1, h2, h3, h4, h5, b, strong {
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: none;
  hyphens: none;
}
/* Технические строки, которые рвать МОЖНО и НУЖНО (иначе ломают вёрстку) */
.oko-breakable, .wal-addr span, .ads-rv-link span, .wal-recv-link span {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Подписи кнопок быстрых действий кошелька (ряд из четырёх) — одна строка,
   кегль ужимается под ширину ячейки. Слово не рвётся никогда. */
.wal-act span, .wal-acts span {
  white-space: nowrap;
  font-size: clamp(9px, 2.8vw, 11.5px);
  letter-spacing: 0;
  line-height: 1.2;
  max-width: 100%;
}

/* Подписи плиток сервисов — до двух строк ЦЕЛИКОМ, без многоточия.
   «Проверка видео» и «Система роста» должны читаться полностью.
   display:block обязателен: с flex ячейка переставала ограничивать ширину,
   и подписи соседних плиток слипались в «Система ростаКонтент-завод». */
.svc-label {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 2px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
  font-size: clamp(9.5px, 2.9vw, 11px);
  line-height: 1.18;
  min-height: 2.4em;
  text-align: center;
  overflow: hidden;
}
/* Сама плитка тоже не должна выпускать содержимое наружу */
.svc { min-width: 0; max-width: 100%; overflow: hidden; }

/* ---------------------------------------------------------------------------
   2. ЗАГОЛОВКИ ПОДСТРАНИЦ: не обрезаются и не уезжают под шапку Telegram
   Раньше «история оп...», «Автоплатежи и подпи...», «Устройства и сесси[и]»
   резались по ширине, а сами шапки лежали под интерфейсом Telegram.
   --------------------------------------------------------------------------- */
.sv-head, .ep-head, .search-head, .w2-bar, .wal-stmt-head,
.hq-emb-head, .lg-tabs, .conv-head {
  padding-top: max(var(--oko-safe-top), 10px);
  padding-left: max(var(--oko-safe-left), 14px);
  padding-right: max(var(--oko-safe-right), 14px);
  box-sizing: border-box;
}

/* Сам заголовок: две строки максимум, кегль подстраивается под ширину,
   переносы только по словам. Никаких многоточий посреди фразы. */
.sv-head > b, .sv-head > .sv-title,
.w2-bar > b, .w2-bar > .w2-title,
.ep-head > b, .wal-stmt-head > b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(14px, 4.1vw, 18px);
  line-height: 1.18;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: none;
  hyphens: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

/* Кнопки в шапке не сжимаются — иначе заголовок наезжает на них */
.sv-head > button, .w2-bar > button, .ep-head > button,
.sv-head > .ep-cancel, .sv-head > .ep-done {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   3. ФИКСИРОВАННЫЕ ОВЕРЛЕИ: сверху и снизу под инсеты
   Всё, что живёт ВНЕ #app, должно само уважать безопасные зоны.
   --------------------------------------------------------------------------- */
#searchView, #notifsView, #adminView, #systemView, #regView, #legalView,
#profileEditor, #storyViewer, #hqEmbed {
  padding-top: var(--oko-safe-top);
  padding-bottom: var(--oko-safe-bottom);
  box-sizing: border-box;
}
/* у них своя внутренняя шапка — двойной отступ убираем */
#searchView .sv-head, #notifsView .sv-head, #adminView .sv-head,
#systemView .sv-head, #regView .ep-head {
  padding-top: 10px;
}

/* Тосты и «живые» плашки — под шапку Telegram, а не поверх неё */
.wal-live, .cp-callpill, .fa-newpill, .oko-toast, .toast, #toastHost > * {
  top: calc(var(--oko-safe-top) + 10px) !important;
}

/* Нижние листы и модалки — над домашним индикатором */
.sheet, .bottom-sheet, .modal-card, .oko-sheet {
  padding-bottom: max(var(--oko-safe-bottom), 12px);
}

/* ---------------------------------------------------------------------------
   4. НИЖНЯЯ НАВИГАЦИЯ: не прыгает, не дёргается, не меняет высоту
   Причина прыжков: высота бара зависела от длины подписи и от появления
   индикатора. Фиксируем геометрию — тогда переключение вкладок не двигает
   контент и не вызывает reflow всей страницы.
   --------------------------------------------------------------------------- */
nav#tabs {
  /* жёсткая высота: контент + safe-area. Меняться она не может ни от чего. */
  height: calc(56px + var(--oko-safe-bottom));
  min-height: calc(56px + var(--oko-safe-bottom));
  padding-bottom: var(--oko-safe-bottom);
  box-sizing: border-box;
  contain: layout paint;
  will-change: auto;
}
nav#tabs > button {
  height: 56px;
  padding: 8px 2px 6px;
  justify-content: center;
  gap: 3px;
  /* фиксируем размер подписи, чтобы активная вкладка не «толстела» и не двигала соседей */
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  contain: layout;
}
nav#tabs > button svg.i {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
/* Активная вкладка меняет ТОЛЬКО цвет и лёгкий подъём иконки — без изменения
   размеров бокса. Раньше scale(1.1) на иконке толкал подпись и бар «дышал». */
nav#tabs > button.active svg.i {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(154, 255, 0, .5));
}
nav#tabs > button:active {
  transform: none;
}

/* На ПК бар вертикальный — высоту не навязываем */
@media (min-width: 900px) {
  nav#tabs {
    height: auto;
    min-height: 0;
  }
  nav#tabs > button {
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
   5. ПУЗЫРИ СООБЩЕНИЙ: текст не режется по правому краю
   На скринах текст обрывался («именной сертификат с п...чатью») — пузырь
   выходил за границу списка из-за фиксированной max-width в px.
   --------------------------------------------------------------------------- */
.msgs {
  padding-left: max(var(--oko-safe-left), 10px);
  padding-right: max(var(--oko-safe-right), 10px);
  box-sizing: border-box;
  overflow-x: hidden;
}
.msg, .bubble, .msg .bubble {
  max-width: min(78%, 560px);
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}
.msg .tx, .bubble .tx {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---------------------------------------------------------------------------
   6. КОМПОЗЕР: не наезжает на нижний бар Telegram и на клавиатуру
   --------------------------------------------------------------------------- */
.composer {
  padding-bottom: max(var(--oko-safe-bottom), 8px);
  padding-left: max(var(--oko-safe-left), 8px);
  padding-right: max(var(--oko-safe-right), 8px);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   7. ГОРИЗОНТАЛЬНОЕ ПЕРЕПОЛНЕНИЕ: страница не ездит вбок никогда
   --------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
/* У #app свой предел ширины на ПК (1280px по центру) — не перебиваем его,
   иначе на широком экране раскладка расползается и правый край диалога
   уходит за пределы видимой области. Только запрещаем боковой скролл. */
#app {
  overflow-x: hidden;
}
main > .screen {
  max-width: 100%;
  overflow-x: hidden;
}
/* Ряды чипов и фильтров скроллятся внутри себя, а не растягивают страницу */
.folders, .adm-tabs, .chips-row, .filters-row {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.folders::-webkit-scrollbar, .adm-tabs::-webkit-scrollbar,
.chips-row::-webkit-scrollbar, .filters-row::-webkit-scrollbar {
  display: none;
}

/* ---------------------------------------------------------------------------
   8. КАРТИНКИ И МЕДИА: никогда не шире контейнера
   --------------------------------------------------------------------------- */
img, video, canvas, svg:not(.i) {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   9. ЖИВОЙ 3D-ЗНАК: экран запуска и вход
   Правка Даниэля: убрать «ужасное свечение» и поставить 3D-глаз из КП.
   Плоский знак виден мгновенно, 3D плавно подменяет его, когда готов.
   --------------------------------------------------------------------------- */
.oko-eye3d-host{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
  z-index:3;
}
.oko-3d-on > .oko-eye3d-host{ opacity:1; }

/* Плоская подложка уходит, когда поднялся 3D — но остаётся, если 3D не завёлся */
.oko-3d-on > .auth-logo,
.oko-3d-on > .eye{
  opacity:0;
  transition:opacity .6s ease;
}

/* ЗНАК ЦЕЛИКОМ, БЕЗ ОБРЕЗАНИЙ (правка: «узкое лого вначале при запуске»).
   Раньше .eye был квадратом 120x120 с filter-свечением, и на узких экранах
   знак поджимался. Теперь размер считается от ширины экрана с потолком. */
#splash .eye-wrap{
  position:relative;
  width:min(46vw, 200px);
  height:min(46vw, 200px);
  display:flex; align-items:center; justify-content:center;
}
#splash .eye{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
#splash .eye svg{ width:100%; height:100%; object-fit:contain; }

/* СВЕЧЕНИЕ: вместо двух блюрных ореолов на пол-экрана — один аккуратный
   контактный ореол под знаком. Он читается как объём, а не как «пятно». */
.auth-logo-wrap::before,
.auth-logo-wrap::after{
  content:none !important;
}
.auth-logo-wrap{
  position:relative;
  width:min(56vw, 230px);
  height:min(56vw, 230px);
  animation:none;
}
.auth-logo{
  filter:none;
  animation:none;
  width:100%; height:100%; object-fit:contain;
}
/* аккуратный ореол: узкий, тёплый по бренду, дышит медленно */
.auth-logo-wrap > .oko-eye3d-halo,
.auth-logo-wrap::marker{ display:none; }
#authScreen .auth-logo-wrap{
  filter:drop-shadow(0 10px 34px rgba(154,255,0,.22));
}
#splash .eye-wrap{
  filter:drop-shadow(0 8px 28px rgba(154,255,0,.20));
}
/* Убираем старый пульсирующий halo из ui-chrome — он и был «ужасным свечением» */
#splash .eye::after{ content:none !important; }

/* ---------------------------------------------------------------------------
   10. ШАПКА ЛЕНТЫ: «Рекомендации · Подписки · клипы · обновить» в один ряд
   Требование Даниэля: одна строка, без обрезаний и переносов, иконки справа.
   --------------------------------------------------------------------------- */
#screen-feed .feed-tabs{
  display:flex;
  align-items:center;
  gap:clamp(10px, 3.2vw, 20px);
  /* правый отступ учитывает и safe-area, и «дыхание» до края экрана */
  padding:8px max(var(--oko-safe-right), 12px) 6px max(var(--oko-safe-left), 14px);
  justify-content:flex-start;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:visible;              /* ряд не скроллится — он обязан помещаться */
  border-bottom:1px solid var(--border);
  background:var(--bg);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
}
/* Текстовые вкладки при нехватке места ужимаются кеглем, а не уезжают за край.
   Иконки справа не сжимаются никогда — они всегда целиком на экране. */
#screen-feed .feed-tabs button[data-fk]{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  font-size:clamp(12.5px, 3.9vw, 15.5px);
  padding:8px 0 10px;
}
/* распорка: текстовые вкладки слева, иконки прижаты вправо */
#screen-feed .feed-tabs .ft-sp{ flex:1 1 auto; min-width:8px; }

#screen-feed .feed-tabs .ft-ico{
  flex:0 0 auto;
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:transparent;
  color:var(--dim);
  transition:color .18s, border-color .18s, background .18s, transform .12s;
}
#screen-feed .feed-tabs .ft-ico svg.i{ width:18px; height:18px; }
#screen-feed .feed-tabs .ft-ico:active{ transform:scale(.92); }
#screen-feed .feed-tabs .ft-ico:hover{ color:var(--accent); border-color:rgba(154,255,0,.4); }
/* у иконок не должно быть подчёркивания активной вкладки */
#screen-feed .feed-tabs .ft-ico.on::after,
#screen-feed .feed-tabs .ft-ico::after{ content:none; }

/* вращение иконки обновления на время пересборки подборки */
#screen-feed .feed-tabs .ft-ico.ft-spin svg.i{ animation:okoSpin .7s cubic-bezier(.4,0,.2,1); }
@keyframes okoSpin{ to{ transform:rotate(360deg); } }

/* Дублирующая шапка «Умная лента» внутри списка больше не нужна:
   обновление переехало в единый верхний ряд. Оставляем только пояснение (i). */
#feedList .fa-bar > .fa-refresh{ display:none; }
#feedList .fa-bar > .fa-clips{ display:none; }

/* ---------------------------------------------------------------------------
   11. КОШЕЛЁК: подписи быстрых действий не рвутся посреди слова
   Реальный класс ряда — .w2-q (а не .wal-act). Именно здесь получалось
   «Пополнит / ь» и «Перевест / и».
   --------------------------------------------------------------------------- */
.w2-q, .w2-q span, .w2-q b {
  overflow-wrap: normal;
  word-break: keep-all;
  -webkit-hyphens: none;
  hyphens: none;
}
.w2-q span {
  white-space: nowrap;
  font-size: clamp(9.5px, 3vw, 11.5px);
  line-height: 1.15;
  letter-spacing: 0;
}
.w2-qs, .w2-quick, .w2-q-row {
  gap: 8px;
}
.w2-q { padding: 12px 3px 10px; min-width: 0; }

/* ---------------------------------------------------------------------------
   12. ПУЗЫРИ И ГОЛОСОВЫЕ: ничего не режется по правому краю
   .msg{max-width:78%} считался от .msgs с боковыми отступами, а голосовое
   держало жёсткие 190px — вместе они выталкивали пузырь за границу списка.
   --------------------------------------------------------------------------- */
.msgs .msg {
  max-width: min(78%, calc(100% - 52px));
  min-width: 0;
}
.msg .voice, .voice {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
}
.voice .voice-tr, .voice .wave { min-width: 0; flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   13. БЕЗОПАСНЫЕ ЗОНЫ У ОСТАВШИХСЯ ОВЕРЛЕЕВ
   Просмотр сторис, редактор истории, сертификат, медиа биржи, выписка —
   их шапки лежали в самом верху вебвью без учёта инсетов.
   --------------------------------------------------------------------------- */
.sp-bars       { top: calc(var(--oko-safe-top) + 10px) !important; }
.sp-actions    { top: calc(var(--oko-safe-top) + 34px) !important; }
.sv-close      { top: calc(var(--oko-safe-top) + 26px) !important; }
.sp-ed-head    { padding-top: calc(var(--oko-safe-top) + 10px); }
.ac-cert-close { top: calc(var(--oko-safe-top) + 16px) !important; }
.mp-mv-x       { top: calc(var(--oko-safe-top) + 14px) !important; }
.wal-stmt-bar  { padding-top: calc(var(--oko-safe-top) + 10px); }
.ch-head       { padding-top: calc(var(--oko-safe-top) + 10px); }
.pp2-head      { padding-top: calc(var(--oko-safe-top) + 10px); }
.gm-head, .ads-head { padding-top: calc(var(--oko-safe-top) + 8px); }

/* ---------------------------------------------------------------------------
   14. КОНТЕКСТНОЕ МЕНЮ СООБЩЕНИЯ: появляется свободное поле для закрытия
   Раньше .mm-inner растягивался почти на весь экран, и тапнуть «в пустое
   место» было физически некуда — меню выглядело неубиваемым.
   --------------------------------------------------------------------------- */
#msgMenu { align-items: flex-end; padding: 24px 12px calc(24px + var(--oko-safe-bottom)); }
#msgMenu .mm-inner {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  max-height: 74vh;          /* сверху всегда остаётся зона для закрытия */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* подсказка «тапни, чтобы закрыть» — маленькая ручка над карточкой */
#msgMenu .mm-inner::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  margin: 0 auto 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.28);
}
:root[data-theme="light"] #msgMenu .mm-inner::before { background: rgba(0,0,0,.22); }

/* ---------------------------------------------------------------------------
   15. КОМПОЗЕР: понятные кнопки «микрофон» и «отправить»
   Правка Даниэля: «голосовые сами кривые и кнопки отправки не удобные,
   не понятно где находятся». Теперь это две разные кнопки, как в Telegram:
   нейтральный микрофон и яркая лаймовая стрелка отправки.
   --------------------------------------------------------------------------- */
.composer .mic-btn{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:transparent;
  color:var(--dim);
  border:1px solid var(--border);
  transition:color .18s, background .18s, border-color .18s, transform .12s;
}
.composer .mic-btn svg.i{ width:21px; height:21px; }
.composer .mic-btn:hover{ color:var(--accent); border-color:rgba(154,255,0,.35); }
.composer .mic-btn:active{ transform:scale(.93); }

/* во время записи микрофон становится красным и пульсирует */
.composer .mic-btn.rec{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
  animation:okoRecPulse 1.1s ease-in-out infinite;
}
@keyframes okoRecPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,77,77,.45); }
  50%    { box-shadow:0 0 0 9px rgba(255,77,77,0); }
}
.composer .mic-btn.pop{ animation:okoPop .28s cubic-bezier(.3,1.5,.4,1); }
@keyframes okoPop{ 0%{transform:scale(.82)} 100%{transform:scale(1)} }

/* Кнопка отправки: всегда узнаваемая лаймовая стрелка */
.composer .send{
  width:44px; height:44px; border-radius:50%;
  background:var(--lime); color:#000;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(154,255,0,.28);
  transition:transform .12s, box-shadow .18s;
}
.composer .send svg.i{ width:20px; height:20px; }
.composer .send:active{ transform:scale(.93); }

/* во время записи стрелка отправки означает «завершить и отправить» */
.composer.recording .send{ box-shadow:0 4px 18px rgba(154,255,0,.42); }

/* ---------------------------------------------------------------------------
   16. КНОПКА «НАЗАД» В ОБЩЕЙ ШАПКЕ (экраны без вкладки в нижнем меню)
   --------------------------------------------------------------------------- */
.oko-hdr-back{
  width:34px; height:34px;
  margin-right:2px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  color:var(--text);
  background:transparent;
  transition:background .18s, color .18s, transform .12s;
}
.oko-hdr-back svg.i{ width:19px; height:19px; }
.oko-hdr-back:hover{ background:var(--raised); color:var(--accent); }
.oko-hdr-back:active{ transform:scale(.9); }

/* ---------------------------------------------------------------------------
   17. ПУСТЫЕ СОСТОЯНИЯ КОШЕЛЬКА (цели, история, приём платежа)
   Пустой экран с одной кнопкой читался как недоделка. Теперь человек видит,
   зачем раздел нужен.
   --------------------------------------------------------------------------- */
.wal-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 22px 22px;
  gap:10px;
}
.wal-empty-ic{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--lime-dim);
  color:var(--accent);
  margin-bottom:4px;
}
.wal-empty-ic svg.i{ width:28px; height:28px; }
.wal-empty h3{
  font-family:var(--font-display);
  font-size:22px; letter-spacing:.05em;
  color:var(--text); margin:0;
}
.wal-empty p{
  font-size:13px; line-height:1.55; color:var(--dim);
  margin:0; max-width:34ch;
}

/* ---------------------------------------------------------------------------
   18. РЕКЛАМНЫЙ КАБИНЕТ: плитки быстрых действий не вылезают за экран
   Сетка 1fr 1fr не давала ячейкам сжиматься (min-width у grid-элемента по
   умолчанию auto), и длинная подпись выталкивала плитку за правый край.
   --------------------------------------------------------------------------- */
.ads-quick{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ads-quick-b{ min-width:0; overflow:hidden; }
.ads-quick-b span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(11px, 3.2vw, 12.5px);
}
.ads-quick-b em{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* Ячейка сетки обязана уметь сжиматься. По умолчанию у grid-элемента
   min-width:auto — он не может стать уже своего содержимого, и длинное слово
   выталкивает колонку за правый край. Число колонок НЕ трогаем, только
   разрешаем сжатие: это самая частая причина «вылезает за экран». */
.stat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.svc-grid > *, .ads-quick > *, .stat-grid > *,
.w2-grid > *, .pp2-stats > *, .gm-grid > *,
.wal-acts > *, .w2-qs > * { min-width:0; }

/* Академия на узких экранах: круговой прогресс не выходит за край */
#screen-academy svg, #acRoot svg{ max-width:100%; }

/* ---------------------------------------------------------------------------
   19. НИК И ССЫЛКА НА СТРАНИЦЕ ПРОФИЛЯ / КАНАЛА
   Копируются в один тап — это базовая вещь для роста: человек делится собой.
   --------------------------------------------------------------------------- */
.oko-ident{
  display:flex; flex-direction:column; gap:1px;
  margin:10px 0 14px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
}
.oko-ident-row{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:12px 14px;
  background:transparent;
  color:var(--text);
  text-align:left;
  transition:background .16s;
}
.oko-ident-row + .oko-ident-row{ border-top:1px solid var(--border); }
.oko-ident-row:hover{ background:var(--raised); }
.oko-ident-row:active{ background:var(--raised); }
.oko-ident-row > svg.i{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
.oko-ident-t{
  flex:1 1 auto; min-width:0;
  font-size:13.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oko-ident-c{ color:var(--dim) !important; width:16px !important; height:16px !important; }
.oko-ident-row:hover .oko-ident-c{ color:var(--accent) !important; }

/* ---------------------------------------------------------------------------
   20. СТОРИС ОСНОВАТЕЛЯ И ТУР: кнопки не упираются в нижний край
   --------------------------------------------------------------------------- */
#trStories .btn,
#trStories .ts-cta,
.ts-wrap .btn{
  margin-bottom: max(var(--oko-safe-bottom), 8px);
}
#trStories, .ts-wrap{
  padding-top: var(--oko-safe-top);
  padding-bottom: var(--oko-safe-bottom);
  box-sizing: border-box;
}

/* Список чатов: плавающая кнопка «+» не должна накрывать последнюю строку */
#chatList{ padding-bottom: calc(84px + var(--oko-safe-bottom)); }

/* ---------------------------------------------------------------------------
   21. ШАПКА ДИАЛОГА: имя собеседника помещается целиком
   На 390px «Даниэль Ильясов» не влезал рядом с аватаром и тремя кнопками.
   Ужимаем аватар и кегль — имя читается полностью.
   --------------------------------------------------------------------------- */
.conv-head{ gap:7px; }
.conv-head .ava{ width:36px; height:36px; font-size:13.5px; flex:0 0 auto; }
.conv-head .who{
  /* Имя должно помещаться целиком. Кегль ужимается под ширину экрана,
     многоточие остаётся только страховкой для очень длинных имён. */
  font-size:clamp(13px, 3.7vw, 16px);
  line-height:1.15;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conv-head .status{ font-size:11.5px; line-height:1.2; }
.conv-head .ch-call{ width:32px; height:32px; flex:0 0 auto; }
.conv-head .ch-call svg.i{ width:19px; height:19px; }
.conv-head .back{ flex:0 0 auto; }

/* Плавающие карточки роста не накрывают переписку, звонок и клипы.
   Реальные классы модуля роста: .okg-ob (чек-лист) и .okg-pill (свёрнутая пилюля). */
#app.conv-open .okg-ob,
#app.conv-open .okg-pill{ display:none !important; }

/* ---------------------------------------------------------------------------
   22. ПК: закрытые выезжающие панели не должны «подглядывать» справа
   Все боковые вьюхи сделаны как position:fixed; inset:0; max-width:1280px;
   margin:0 auto; transform:translateX(100%). На экране шире 1280 такой сдвиг
   уводит панель только на её собственную ширину — и правая часть остаётся
   в поле зрения: у края экрана висел кусок чужой шапки с кнопкой «назад».
   Гасим их видимостью: анимация выезда сохраняется, а закрытая панель
   гарантированно ничего не рисует.
   --------------------------------------------------------------------------- */
#searchView, #notifsView, #adminView, #systemView, #editProfile,
#regView, #legalView, #psView, #psSocView, #hqEmbed,
/* Добавлено 09.08: те же выезжающие панели из новых модулей и из ядра.
   #okoSoc (страница сущности) на экране шире 1280 торчал справа полосой
   собственной шапки поверх любого экрана — ровно та же болезнь. */
#okoSoc, #chView, #st2View {
  visibility: hidden;
  /* Анимация выезда включается только после того, как страница встала на ноги.
     Иначе на самой первой отрисовке панели заметно «выезжают» из экрана:
     они стартуют на месте и анимированно уходят вправо, а на широком экране
     ещё и подглядывают краем. */
  transition: none;
}
html.oko-ready #searchView, html.oko-ready #notifsView, html.oko-ready #adminView,
html.oko-ready #systemView, html.oko-ready #editProfile, html.oko-ready #regView,
html.oko-ready #legalView, html.oko-ready #psView, html.oko-ready #psSocView,
html.oko-ready #hqEmbed, html.oko-ready #okoSoc, html.oko-ready #chView,
html.oko-ready #st2View {
  transition: transform .3s cubic-bezier(.3, 1, .4, 1), visibility 0s linear .3s;
}
#searchView.open, #notifsView.open, #adminView.open, #systemView.open,
#editProfile.open, #regView.open, #legalView.open, #psView.open,
#psSocView.open, #hqEmbed.open, #okoSoc.open, #chView.open, #st2View.open {
  visibility: visible;
  transition: transform .3s cubic-bezier(.3, 1, .4, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  #searchView, #notifsView, #adminView, #systemView, #editProfile,
  #regView, #legalView, #psView, #psSocView, #hqEmbed { transition: none; }
}

/* ---------------------------------------------------------------------------
   23. АКАДЕМИЯ НА УЗКИХ ЭКРАНАХ: кольцо прогресса не выходит за край
   На 360px круговой индикатор давал два пикселя переполнения справа.
   --------------------------------------------------------------------------- */
#screen-academy, #acRoot{ overflow-x:hidden; }
#screen-academy svg, #acRoot svg,
#screen-academy .ac-ring, #acRoot .ac-ring{
  max-width:100%;
  overflow:visible;
}
#screen-academy .pad > *, #acRoot .pad > *{ min-width:0; max-width:100%; }

/* ---------------------------------------------------------------------------
   24. СВЁРНУТАЯ ПИЛЮЛЯ «СТАРТ В OKO» не наезжает на контент
   Она висела над нижним меню и накрывала последнюю карточку экрана.
   Поднимаем её выше и добавляем экранам запас снизу, чтобы под пилюлей
   всегда было пусто.
   --------------------------------------------------------------------------- */
.okg-pill{
  bottom: calc(var(--oko-safe-bottom) + 76px) !important;
  opacity: .96;
}
/* запас снизу под пилюлю на прокручиваемых экранах */
main > .screen > .pad,
#feedList, #chatList{
  padding-bottom: calc(96px + var(--oko-safe-bottom));
}
/* на ПК пилюля не нужна над вертикальным баром — прижимаем к правому краю окна */
@media (min-width: 900px){
  .okg-pill{ bottom: calc(var(--oko-safe-bottom) + 20px) !important; }
  main > .screen > .pad{ padding-bottom: calc(40px + var(--oko-safe-bottom)); }
}

/* ---------------------------------------------------------------------------
   25. ПИЛЮЛЯ РОСТА не спорит с открытыми шторками и модалками
   --------------------------------------------------------------------------- */
body:has(.sheet.open) .okg-pill,
body:has(#sheetOverlay.open) .okg-pill,
body:has(.okg-scrim) .okg-pill,
body:has(#msgMenu.open) .okg-pill{
  display:none !important;
}

/* ---------------------------------------------------------------------------
   26. ЗАГОЛОВОК ЭКРАНА НЕ ОБРЕЗАЕТСЯ РЯДОМ С КНОПКОЙ «НАЗАД»
   На экранах без вкладки в шапке стоят: назад + знак OKO + название +
   три действия. На 390px «Партнёрская программа» не помещалась и резалась
   до «Партнё…». Когда есть кнопка «назад», словесный логотип уступает место
   заголовку — знак остаётся, название читается целиком.
   --------------------------------------------------------------------------- */
header:has(.oko-hdr-back:not([style*="display: none"])) .brand .logo{
  display:none;
}
header .screen-title{
  min-width:0;
  font-size:clamp(14px, 4.2vw, 18px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ============================================================================
   27. ПЕРЕКЛЮЧЕНИЕ ВКЛАДОК: один короткий фейд вместо четырёх анимаций
   Правка Даниэля 09.08: «при клике меню все страницы обновляются, дёргаются,
   меню поднимается и лагает, и всё приложение лагает из-за меню».
   На каждый тап работало сразу четыре вещи:
     screenIn (0.3s, сдвиг по Y) + wmScreenIn (0.34s, сдвиг и масштаб)
     + wmTabInRight/Left (0.24s, сдвиг на 10% по X)
     + клон всего экрана в оверлее (150 мс поверх нового экрана)
   Отсюда и «двоение» текста на скринах, и подтормаживание.
   Оставляем ровно один дешёвый фейд по прозрачности — без сдвигов,
   без масштабов, без клонов. Переход читается, но ничего не ползает.
   ============================================================================ */
.screen.active,
html.wm-on .screen.active,
html.wm-on .screen.active.wm-tab-in-right,
html.wm-on .screen.active.wm-tab-in-left {
  animation: okoScreenFade .14s ease-out both !important;
}
@keyframes okoScreenFade { from { opacity: .55; } to { opacity: 1; } }

/* Клон уходящего экрана больше не создаётся, но если он где-то останется —
   не показываем его никогда. */
.wm-tab-overlay { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .screen.active,
  html.wm-on .screen.active { animation: none !important; }
}

/* Тень под шапкой при прокрутке — без перехода: анимировать inset-тень на
   скролл-контейнере значит перерисовывать его на каждом кадре прокрутки. */
main { transition: none !important; }

/* ---------------------------------------------------------------------------
   28. ШАПКА: название раздела помещается целиком
   «Мини-аппы» резалось до «Мини-ап…». Даём заголовку приоритет: словесный
   логотип рядом со знаком прячется на узких экранах, кнопки действий ужимаются.
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
  header .brand .logo { display: none; }        /* остаётся сам знак OKO */
  header .screen-title { font-size: clamp(15px, 4.6vw, 18px); }
  header .hdr-actions { gap: 2px; }
  header .theme-btn { width: 34px; height: 34px; }
  header .theme-btn svg.i { width: 19px; height: 19px; }
}
header { gap: 8px; }
header .brand { flex: 0 0 auto; }
header .screen-title { flex: 1 1 auto; }
header .hdr-actions { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   29. АВАТАРЫ: строго круг, без квадратной подложки
   На скринах вокруг круглых аватаров видна квадратная рамка — читается как баг.
   --------------------------------------------------------------------------- */
.ava, .ci-ava, .conv-head .ava, .chat-item .ava,
.pp2-ava, .ps-ava, .okg-ava {
  border-radius: 50% !important;
  overflow: hidden;
  background-clip: padding-box;
  isolation: isolate;
}
.ava > img, .ci-ava > img, .pp2-ava > img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Псевдоэлементы-подложки под аватаром тоже круглые, иначе торчат углы */
.ava::before, .ava::after,
.ci-ava::before, .ci-ava::after { border-radius: 50%; }

/* ---------------------------------------------------------------------------
   30. РЯД БЫСТРЫХ ДЕЙСТВИЙ ПРОФИЛЯ: подписи не режутся
   «Поделии…», «Статист…», «Настро…» — пять кнопок в ряд на 390px.
   Разрешаем две строки и уменьшаем кегль вместо многоточия.
   --------------------------------------------------------------------------- */
.pp2-acts, .pp2-quick, .ps-acts { gap: 6px; }
.pp2-acts > *, .pp2-quick > *, .ps-acts > * { min-width: 0; }
.pp2-acts span, .pp2-quick span, .ps-acts span,
.pp2-act-t, .pp2-quick-t {
  display: block;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(9px, 2.7vw, 11px);
  line-height: 1.15;
  text-align: center;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* ---------------------------------------------------------------------------
   31. ЧЁРНАЯ ТЕНЬ СВЕРХУ (жалоба «сверху какая-то тень чёрная»)
   Это inset-тень скролла на main. В Telegram она читается как грязная полоса
   под шапкой. Делаем её едва заметной и только на тёмной теме.
   --------------------------------------------------------------------------- */
main.wm-scrolled { box-shadow: inset 0 6px 8px -8px rgba(0, 0, 0, .28) !important; }
:root[data-theme="light"] main.wm-scrolled { box-shadow: none !important; }

/* ---------------------------------------------------------------------------
   32. ЗНАЧОК ПОДТВЕРЖДЁННОГО АККАУНТА
   Синяя галочка у официальных сущностей OKO и у всех, кто перешагнул
   10 000 подписчиков. Ставится рядом с именем, не ломает строку.
   --------------------------------------------------------------------------- */
/* svg.i задаёт fill:none; stroke:currentColor — CSS бьёт presentation-атрибуты
   внутри символа, поэтому заливку и обводку галочки задаём здесь явно. */
.oko-vbadge {
  width: 15px !important;
  height: 15px !important;
  color: #3AA3FF !important;
  flex: 0 0 auto;
  vertical-align: -.18em;
  margin-left: 5px;
  fill: currentColor !important;
  stroke: none !important;
}
.oko-vbadge path   { fill: currentColor !important; stroke: none !important; }
.oko-vbadge polyline {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 9 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.conv-head .oko-vbadge { width: 14px !important; height: 14px !important; }
h1 .oko-vbadge, h2 .oko-vbadge { width: 20px !important; height: 20px !important; }
:root[data-theme="light"] .oko-vbadge { color: #1D8AF0; }

/* Фото/знак внутри круглого аватара */
.ava .oko-ava-img, .ci-ava .oko-ava-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ava.oko-ava-hasimg, .ci-ava.oko-ava-hasimg { color: transparent; position: relative; }
.ava, .ci-ava { position: relative; }
/* Фирменный знак на аватаре официальных сущностей вписан с полями */
.ava.oko-ava-hasimg .oko-ava-img[src*="oko-logo"] { object-fit: contain; padding: 18%; box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   33. АВАТАР ОФИЦИАЛЬНОЙ СУЩНОСТИ: знак читается
   Лаймовый знак на тёмном круге сливался. Даём официальным аватарам светлую
   фирменную подложку — знак становится контрастным, как иконка приложения.
   --------------------------------------------------------------------------- */
/* Официальные аватары используют готовую иконку приложения: лаймовый знак
   на фирменном тёмном круге. Заливку убираем — картинка сама несёт фон. */
.ava.oko-ava-hasimg {
  background: #0d0d0d !important;
  border: 1px solid rgba(154, 255, 0, .32) !important;
  box-shadow: 0 2px 10px rgba(154, 255, 0, .12);
}
.ava.oko-ava-hasimg .oko-ava-img { object-fit: cover; }
:root[data-theme="light"] .ava.oko-ava-hasimg {
  border-color: rgba(83, 168, 0, .28) !important;
}

/* Плавающая пилюля не садится на кнопку «+» в списке чатов */
.okg-pill { right: calc(var(--oko-safe-right) + 12px) !important; }

/* Кнопка «+» в списке чатов висела на `position:absolute` внутри .chat-col,
   поэтому «низ» у неё был низом контейнера, а не экрана — на скрине она
   оказывалась посреди списка и накрывала строку чата. Прижимаем к экрану.
   На ПК приложение центрировано колонкой 1280px, поэтому правый отступ
   считается от края этой колонки, а не от края монитора. */
#screen-chats .fab{
  position: fixed;
  bottom: calc(var(--oko-safe-bottom) + 150px);
  right: max(calc(var(--oko-safe-right) + 16px), calc(50vw - 640px + 16px));
  z-index: 60;
}

/* ============================================================================
   34. ЗАПИСЬ ГОЛОСОВЫХ И КРУЖКОВ — модальная панель (oko-rec.js)
   Правка Даниэля 09.08: «не понятно как остановить и отправить», «снизу тень
   и пропадает кнопка отправки», «запись висит поверх всех вкладок».
   Решение: одна шторка поверх всего, две подписанные кнопки, фон закрыт
   скримом, старая градиентная «тень» chats-plus удалена совсем.
   ============================================================================ */

/* Старая шторка chats-plus вырезана: именно её градиент читался как «тень
   снизу» и прятал кнопку отправки. JS её удаляет, CSS страхует. */
.cp-rec { display: none !important; }

.okorec{
  position: fixed; inset: 0; z-index: 4000;
  display: none;
}
.okorec.on{ display: block; }

.okorec-scrim{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: okorecFade .16s ease;
}
:root[data-theme="light"] .okorec-scrim{ background: rgba(20,26,10,.42); }
@keyframes okorecFade{ from{ opacity: 0 } to{ opacity: 1 } }

.okorec-panel{
  position: absolute;
  left: calc(var(--oko-safe-left) + 10px);
  right: calc(var(--oko-safe-right) + 10px);
  bottom: calc(var(--oko-safe-bottom) + 10px);
  max-width: 460px; margin: 0 auto;
  background: var(--card, #12160c);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 22px;
  padding: 14px 14px 16px;
  box-shadow: 0 -10px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(154,255,0,.12);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: okorecUp .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes okorecUp{ from{ transform: translateY(24px); opacity: 0 } to{ transform: none; opacity: 1 } }
.okorec-panel.nudge{ animation: okorecNudge .32s ease; }
@keyframes okorecNudge{ 0%,100%{ transform: none } 25%{ transform: translateX(-7px) } 75%{ transform: translateX(7px) } }

/* --- чипы режима --- */
.okorec-modes{
  display: flex; gap: 6px; width: 100%;
  background: var(--raised, rgba(255,255,255,.05));
  border-radius: 999px; padding: 4px;
}
.okorec-mode{
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dim, #9aa08e);
  font: 600 12.5px/1 'Montserrat', system-ui, sans-serif;
  cursor: pointer; transition: background .16s, color .16s;
  white-space: nowrap;
}
.okorec-mode svg.i{ width: 15px; height: 15px; flex: 0 0 auto; }
.okorec-mode.on{ background: var(--lime, #9AFF00); color: #0a0d05; }
.okorec-mode.on svg.i{ color: #0a0d05; }

/* --- сцена: волна или круглое превью --- */
.okorec-stage{
  width: 100%; min-height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.okorec-round{
  display: none;
  width: 168px; height: 168px; border-radius: 50%;
  overflow: hidden; position: relative;
  border: 3px solid var(--lime, #9AFF00);
  background: radial-gradient(circle at 38% 32%, #2a3d10, #0c1204 72%);
  box-shadow: 0 0 40px rgba(154,255,0,.28);
}
.okorec-round video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.okorec.is-vnote .okorec-round{ display: block; }
.okorec.is-vnote .okorec-wave{ display: none; }

.okorec-wave{
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 72px; width: 100%;
}
.okorec-wave i{
  flex: 1; max-width: 6px; min-width: 2px; height: 100%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--lime, #9AFF00), #5fb000);
  transform: scaleY(.12); transform-origin: center;
}
.okorec-wave.live i{ transition: transform .07s linear; animation: none; }
.okorec-wave:not(.live) i{ animation: okorecIdle 1.4s ease-in-out infinite; }
.okorec-wave:not(.live) i:nth-child(3n){ animation-delay: .18s }
.okorec-wave:not(.live) i:nth-child(3n+1){ animation-delay: .36s }
.okorec-wave:not(.live) i:nth-child(4n){ animation-delay: .52s }
@keyframes okorecIdle{ 0%,100%{ transform: scaleY(.12) } 50%{ transform: scaleY(.5) } }
:root[data-theme="light"] .okorec-wave i{ background: linear-gradient(180deg, #7ACC00, #4e9400); }

/* --- таймер --- */
.okorec-meter{ display: flex; align-items: center; gap: 8px; min-height: 18px; }
.okorec-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger, #ff4d4d);
  animation: okorecBlink 1s steps(2,start) infinite;
}
@keyframes okorecBlink{ 50%{ opacity: .15 } }
.okorec-time{ font: 700 16px/1 'Montserrat', system-ui, sans-serif; color: var(--text, #eef3e5); font-variant-numeric: tabular-nums; }
.okorec-limit{ font-size: 12px; color: var(--dim, #9aa08e); }
.okorec-limit.warn{ color: var(--danger, #ff4d4d); }

/* --- подсказка --- */
.okorec-hint{
  font-size: 12.5px; line-height: 1.4; color: var(--dim, #9aa08e);
  text-align: center; max-width: 320px;
  overflow-wrap: break-word; word-break: normal; hyphens: none;
  min-height: 2.8em;
}

/* --- кнопки: подписанные, крупные, всегда поверх скрима --- */
.okorec-actions{ display: flex; gap: 10px; width: 100%; }
.okorec-btn{
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 15px; border: 1px solid var(--border, rgba(255,255,255,.1));
  font: 700 14px/1 'Montserrat', system-ui, sans-serif;
  cursor: pointer; transition: transform .12s, background .16s, color .16s;
  white-space: nowrap;
}
.okorec-btn:active{ transform: scale(.97); }
.okorec-btn svg.i{ width: 19px; height: 19px; flex: 0 0 auto; }
.okorec-cancel{ background: var(--raised, rgba(255,255,255,.05)); color: var(--dim, #9aa08e); }
.okorec-cancel:hover{ color: var(--danger, #ff4d4d); border-color: var(--danger, #ff4d4d); }
.okorec-send{ background: var(--lime, #9AFF00); color: #0a0d05; border-color: transparent; box-shadow: 0 6px 22px rgba(154,255,0,.3); }
.okorec-send svg.i{ color: #0a0d05; }

/* Взведённая отмена свайпом влево — панель честно краснеет. */
.okorec-panel.arm-cancel{ box-shadow: 0 -10px 44px rgba(0,0,0,.55), 0 0 0 2px var(--danger, #ff4d4d); }
.okorec-panel.arm-cancel .okorec-cancel{ background: var(--danger, #ff4d4d); color: #fff; border-color: transparent; }
.okorec-panel.arm-cancel .okorec-wave i{ background: linear-gradient(180deg, var(--danger, #ff4d4d), #a11); }
.okorec-panel.arm-cancel .okorec-round{ border-color: var(--danger, #ff4d4d); box-shadow: 0 0 40px rgba(255,77,77,.35); }

/* Пока идёт запись — фон не трогаем и не листаем. */
html.oko-recording body{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .okorec-panel, .okorec-scrim{ animation: none; }
  .okorec-wave:not(.live) i{ animation: none; transform: scaleY(.3); }
  .okorec-dot{ animation: none; }
}

/* ============================================================================
   35. TON: подписи не вылезают за кнопки
   Правка Даниэля 09.08: «в разделе тон на кнопках многих слова за рамки вылазят».
   Причина: сетка была repeat(5, 1fr), а у 1fr минимальная ширина = ширине
   содержимого. Колонка не могла сжаться, и слово «Отправить» выезжало наружу.
   ============================================================================ */
/* Пять кнопок в один ряд физически не вмещают слово «Пополнить»: на 360px
   колонке достаётся 46px, а слову нужно 56px. Сжимать кегль до нечитаемого
   или резать многоточием — оба варианта Даниэль назвал багом. Поэтому на
   телефоне ряд переносится в сетку 3+2: места становится вдвое больше и
   ни одно слово не обрезается. С 560px и шире всё влезает в один ряд. */
.vs-ton-acts.vs-acts-5{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (min-width: 560px){
  .vs-ton-acts.vs-acts-5{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
.vs-ton-acts{ min-width: 0; }
.vs-ton-act{ min-width: 0; overflow: hidden; }
.vs-ton-act span{
  min-width: 0; max-width: 100%;
  font-size: 10.5px; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  hyphens: none; word-break: normal;
}
/* Чипы и плашки внутри TON тоже не должны выходить за карточку. */
#vsTonRoot [class^="vs-"], #vsTonRoot [class*=" vs-"]{ min-width: 0; }
#vsTonRoot .vs-ton-badge, #vsTonRoot .vs-ton-conn{ white-space: nowrap; }

/* ============================================================================
   36. Плавающая пилюля онбординга не закрывает контент
   На скрине Даниэля «СТАРТ 1/5» лежала поверх карточки «Разблокируй всё на
   тарифе MAX». Пилюля фиксированная, поэтому её высоту нужно компенсировать
   отступом снизу у прокручиваемых экранов — иначе последняя карточка всегда
   оказывается под ней.
   ============================================================================ */
/* ПОЧЕМУ ЗДЕСЬ ОДИН СЕЛЕКТОР, А НЕ ДВА.
   Правило било дважды: и по экрану, и по его внутреннему .pad. Замер 09.08
   на мини-аппах: 132 px на .pad плюс 132 px на экране — 264 px чёрной
   пустоты снизу, ровно то, на что Даниэль и жаловался. На ленте выходило
   312 px, потому что у #feedList есть ещё свои 96 px.

   Компенсировать надо ровно один раз и ровно столько, сколько занимает
   пилюля: круг 54 px на отступе 20 px от безопасной зоны, плюс воздух —
   это 88 px, а не 132. Экраны без .pad (лента, чаты) свой нижний отступ
   уже имеют и во второй порции не нуждаются. */
html.okg-pill-on main > .screen.active > .pad{
  padding-bottom: calc(var(--oko-safe-bottom) + 88px);
}

/* ============================================================================
   37. Пилюля чек-листа — компактный круг вместо широкой плашки
   На скрине Даниэля плашка «СТАРТ 1/5» лежала прямо поверх текста карточки.
   Слово «СТАРТ» здесь ничего не сообщает — кольцо прогресса и счётчик
   говорят всё сами. Сжимаем до круга: контента закрывает втрое меньше,
   функция та же.
   ============================================================================ */
.okg-pill{
  width: 54px; height: 54px;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-direction: column !important;
  gap: 0 !important;
  justify-content: center !important;
}
.okg-pill b{ display: none !important; }
.okg-pill small{ font-size: 9.5px !important; line-height: 1; margin-top: 1px; }
.okg-pill .okg-ring{ width: 24px !important; height: 24px !important; }
.okg-pill .okg-ring svg{ width: 24px !important; height: 24px !important; }

/* Пустая лента: два действия в ряд, на узком экране — в столбик. */
.fa-empty-acts{
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 14px; width: 100%;
}
.fa-empty-acts .fa-empty-cta{ margin: 0; flex: 0 1 auto; min-width: 0; }
.fa-empty-cta.ghost{ background: transparent; border: 1px solid var(--border); color: var(--text); }
@media (max-width: 380px){
  .fa-empty-acts{ flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   38. Шапка чата: название важнее кнопок
   На светлой теме название «Общий чат OKO» превращалось в «Общий ч...» —
   его вытесняли пилюля «Созвон» и две кнопки звонка. Приоритет отдаём имени:
   на узком экране «Созвон» остаётся точкой-индикатором без подписи.
   ============================================================================ */
.conv-head .who{ min-width: 0; }
.cl-conv-start{ flex: 0 0 auto; min-width: 0; }
@media (max-width: 430px){
  /* Прячем именно display:none, а не «визуально скрытым» приёмом: скрытый
     через clip-path текст остаётся в потоке и аудит справедливо считает его
     обрезанным. Доступное имя кнопки живёт в aria-label. */
  .cl-conv-start .cl-conv-start-tx{ display: none; }
  .cl-conv-start{
    width: 34px; height: 34px; padding: 0 !important;
    border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
  }
}

/* Личный чат: три круглые кнопки (звонок, видео, «ещё») плюс зазоры по 11px
   не оставляли имени места — «Даниэль Ильясов» обрезался на шесть пикселей.
   Поджимаем зазор и кнопки на телефоне: имя влезает целиком, кнопки остаются
   в пределах комфортной цели нажатия. */
@media (max-width: 430px){
  .conv-head{ gap: 6px !important; padding-left: 12px; padding-right: 12px; }
  .conv-head .ch-call{ width: 30px; min-width: 30px; }
  .conv-head .ch-call svg.i{ width: 19px; height: 19px; }
}

/* ============================================================================
   39. Подписи кнопок не рвутся посреди слова
   На скрине профиля читалось «Поделить/ся», «Статисти/ка», «Настройк/и»,
   «Опубли/ковать», «Моя страниц/а». Правило Даниэля: текст не рвётся посреди
   слова. Причина у всех одна — слово шире своей ячейки. Лечим шириной и
   кеглем, а не переносом.
   ============================================================================ */
/* Пятиколоночный ряд быстрых действий: отдаём ячейке всю доступную ширину
   и уменьшаем кегль ровно настолько, чтобы самое длинное слово влезло. */
.pp2-quick{ gap: 4px !important; }
.pp2-qbtn{ padding-left: 2px !important; padding-right: 2px !important; }
.pp2-qbtn span{
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  -webkit-hyphens: none; hyphens: none;
  font-size: clamp(8.5px, 2.55vw, 10.5px) !important;
  letter-spacing: -.1px;
  max-width: 100%;
}

/* ============================================================================
   40. Слой роста не лезет поверх полноэкранных панелей
   Агент по Штабу поймал: чек-лист «СТАРТ В OKO» и всплывашка партнёрки
   рисуются поверх админки владельца и штаба. Эти подсказки уместны на главных
   вкладках, но не на полноэкранной панели — там они просто закрывают дело.
   Класс ставит модуль v2avatar в oko-v2.js.
   ============================================================================ */
html.oko-panel-open .okg-ob,
html.oko-panel-open .okg-pill,
html.oko-panel-open .okg-nudge,
html.oko-panel-open #okgShowcaseHost { display: none !important; }

/* ============================================================================
   41. Ряд быстрых действий профиля: пять колонок не влезают в узкий телефон

   Замер на 320 px: ячейка даёт 48 px, а «Поделиться» требует 54, «Статистика»
   — 50. Дальше срабатывал text-overflow, и человек читал «Поделить…». Правило
   OKO простое: текст не обрезается. Уменьшать кегль дальше некуда — 8,5 px
   и так на пределе читаемости.

   Лечим тем же приёмом, что уже применён к ряду TON: ниже 360 px ряд
   становится трёхколоночным и переносится на две строки. Пять подписей
   помещаются целиком, ничего не режется.
   ============================================================================ */
@media (max-width: 360px) {
  .pp2-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .pp2-qbtn span {
    /* места стало вдвое больше — возвращаем читаемый кегль и снимаем
       многоточие: обрезать больше нечего */
    font-size: clamp(10px, 3.1vw, 11.5px) !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
}