*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* Полосы прокрутки не показываем НИГДЕ: в мини-приложении их роль уже играет
   затухание у края (карточка снизу, слои справа), а системная полоса приходит
   из десктопного Chrome со стрелками на концах и выглядит как чужая деталь —
   ни инстаграм, ни авито её не показывают.
   Прокрутка при этом остаётся: прячем ВИД, а не поведение. Там, где сигнал
   «ниже есть ещё» нужен, он даётся затуханием — иначе обрезанная строка
   читается как поломка (frontend.md 18). */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;overflow:hidden}
/* Клавиатуры `100dvh` НЕ ЗАМЕЧАЕТ: высота остаётся прежней, и низ экрана уезжает
   под неё. Замер 04.09.2026 на Pixel 7 (клавиатура 336 px, видимая область 447):
   композер стоял на 441…500 — 53 px за краем, человек печатал в поле, нижнего
   края которого на экране нет. Спасал положение браузер, прокручивая страницу к
   фокусу, — то есть «экран сдвигался вверх» не по нашей воле.
   Правду о видимой высоте знает только visualViewport; её подставляет
   watchKeyboard, и ставит ДО класса, поэтому к моменту включения правила
   переменная уже на месте. */
body.kbd #app{height:var(--app-h)}
/* Ни одна строка интерфейса не имеет права быть шире экрана: в вебвью
   горизонтальной прокрутки нет, и всё, что вылезло, просто не видно. */
#app > *,
.chat, .chat-bar, .grip, .composer, .feed{min-width:0;max-width:100%}
.chat-bar, .grip, .composer{overflow:hidden}
.toast{
  position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;
  font-size:12.5px;box-shadow:var(--shadow-lift);z-index:calc(var(--z-modal) + 100);max-width:90%;
}