/* =========================================================================
   KATRIN BAYER — APP SHELL (стадия 4)
   Специфика самого приложения (компоновка экранов, роутинг-контейнер).
   Токены и переиспользуемые компоненты — в design-system.css, сюда их не
   дублировать.
   ========================================================================= */

/* Вне Telegram (например, открыли в обычном браузере для проверки) —
   центрируем "телефон" на сером фоне, чтобы было удобно смотреть.
   Внутри Telegram WebView эти лишние отступы не мешают: там #kb-app и так
   занимает весь экран, .kb-app-outer просто растягивается. */
html, body{ margin:0; height:100%; }
body{ background:#EFEAE0; }
.kb-app-outer{
  height:100%;
  display:flex; justify-content:center;
}
.kb-app-frame{
  width:100%; max-width:430px; height:100vh;
  background: var(--kb-bg);
  display:flex; flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

/* min-height:0 обязателен: без него flex-элемент растягивается по контенту
   и overflow-y:auto перестаёт работать (браузер просто не считает контейнер
   переполненным) — на этом стоило поймать баг с infinite scroll. */
#kb-screen{ flex:1; min-height:0; overflow-y:auto; padding-bottom: var(--kb-space-4); -webkit-overflow-scrolling:touch; }
#kb-screen.kb-no-scroll-pad{ padding-bottom:0; }

.kb-screen-pad{ padding: 0 var(--kb-space-4) var(--kb-space-4); }

/* Общая шапка + контент экрана */
.kb-nav{ position:sticky; bottom:0; z-index:10; }

/* Категорийные чипы — горизонтальный скролл без видимого скроллбара */
.kb-chips-row{ display:flex; gap:8px; padding: 2px var(--kb-space-4) var(--kb-space-3); overflow-x:auto; scrollbar-width:none; }
.kb-chips-row::-webkit-scrollbar{ display:none; }

/* Полоса загрузки в конце сетки при infinite scroll */
.kb-load-sentinel{ grid-column: 1 / -1; height:1px; }
.kb-grid-skeleton{ aspect-ratio:3/4; }

/* Кнопка снизу — когда нет нативного Telegram MainButton (просмотр вне Telegram),
   делаем её "sticky" внутри экрана вручную. */
.kb-sticky-btn{ position:sticky; bottom:0; padding: var(--kb-space-3) var(--kb-space-4) calc(var(--kb-space-4) + var(--kb-safe-bottom)); background: var(--kb-bg); }

/* Индикатор корзины на иконке в шапке (используем topbar__icon-btn + badge-dot из design-system) */

/* Модальный тост подтверждения (добавлено в корзину и т.п.) — тихий, без анимационных
   библиотек, простая CSS-транзиция */
.kb-toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%, 10px);
  background: var(--kb-ink); color: var(--kb-bg); padding:10px 18px; border-radius: var(--kb-radius-full);
  font-size:12px; font-weight:600; opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  z-index:50; white-space:nowrap;
}
.kb-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* Разделитель суммы в корзине/оформлении */
.kb-summary-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.kb-summary-row.kb-summary-total{ border-top:1px solid var(--kb-border); margin-top:4px; padding-top:14px; }

/* Текст замовлення для копіювання на екрані "перейшли до менеджера" —
   на випадок, коли автопідстановка тексту в поле чату не спрацювала
   (обмеження конкретного клієнта Telegram, а не самого застосунку). */
.kb-msg-box{
  text-align:left; white-space:pre-wrap; word-break:break-word;
  background: var(--kb-surface); border:1px solid var(--kb-border); border-radius: var(--kb-radius-m);
  padding: 12px 14px; font-family: var(--kb-font-sans); font-size:12.5px; line-height:1.6; color: var(--kb-ink);
}