:root {
  /* ЭКСПЕРИМЕНТ: тёмно-серая тема захардкожена напрямую (не через
     var(--tg-theme-*, ...) fallback), чтобы проверить внешний вид независимо
     от текущей темы Telegram у пользователя. Чтобы вернуть обычную схему
     (подстройка под тему Telegram) - раскомментировать блок ниже и удалить
     этот. */
  --bg: #121212;
  --secondary-bg: #1e1e1e;
  --text: #f2f2f2;
  --hint: #9a9a9e;
  --link: #4da3ff;
  --button: #2481cc;
  --button-text: #ffffff;
  --separator: rgba(255, 255, 255, 0.15);
  --green: #34c759;
  --amber: #ff9f0a;
  --red: #ff453a;
}
/*
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2481cc);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --separator: rgba(120, 120, 128, 0.2);
  --green: #34c759;
  --amber: #ff9f0a;
  --red: #ff453a;
}
*/

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* Разрешаем только вертикальную прокрутку — жест пинч-зума и двойного
     тапа для увеличения браузер даже не начинает обрабатывать. */
  touch-action: pan-y;
}

body {
  /* height:100% из общего правила выше при box-sizing:border-box означает,
     что padding-bottom считается ВНУТРИ этой фиксированной высоты, а не
     добавляется после переполняющего контента - на длинных списках резерв
     под кнопку корзины просто "съедался" где-то в середине контента и не
     создавал видимый отступ в конце. min-height вместо height позволяет body
     расти вместе с контентом, и padding-bottom честно оказывается в самом
     конце после последнего элемента. */
  height: auto;
  min-height: 100%;
  /* var(...) без fallback-переменной внутри даёт 0px, если Telegram не
     проставил safe-area (обычный expand() без fullscreen, десктоп, браузер) -
     складывать безопасно всегда, а не только "если fullscreen".
     --cart-fab-h - реальная высота кнопки корзины (меряется в JS, см. app.js);
     когда корзина пуста и кнопка скрыта, эта переменная = 0px, и лишний
     отступ снизу не резервируется. +16px - её собственный отступ от края
     экрана (см. .cart-fab), ещё +16px - зазор, чтобы последний пункт списка
     не утыкался прямо в кнопку, а был чуть выше неё.
     Не применяем на главном меню (body.menu-active) - там подвал сам прижат
     к низу экрана отдельным механизмом (#screen-menu ниже) и с кнопкой
     корзины не пересекается; лишний резерв там просто оставлял бы пустую
     полосу под подвалом. */
  padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px));
}

body:not(.menu-active) {
  padding-bottom: calc(
    var(--cart-fab-h, 44px) + 16px + 16px + var(--tg-safe-area-inset-bottom, 0px)
  );
}

.topbar {
  /* position:sticky здесь регулярно "терял" отрисовку на середине скролла в
     Telegram WebView (даже с transform:translateZ(0) - не помогло) - похоже
     на рассинхрон layout- и visual-viewport, которым Telegram двигает свою
     оболочку в fullscreen. position:fixed пересчитывается компоузером каждый
     кадр напрямую от visual viewport и этому не подвержен. Высота шапки
     переменная (safe-area, показан ли nav-row/search-row) - поэтому реальную
     высоту меряем в JS и прокидываем как --header-h (см. app.js), а не
     захардкоживаем здесь. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg);
  padding: 10px 12px;
  padding-top: calc(
    10px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)
  );
  border-bottom: 1px solid var(--separator);
}

/* :not([hidden]) — иначе display:flex здесь перебивает [hidden]{display:none}
   из UA-стилшита (см. аналогичный комментарий у .brand-list/.offer-list ниже). */
.search-row:not([hidden]) {
  display: flex;
  gap: 8px;
}

.nav-row:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

/* Плоская стрелка "Назад" без кружка-фона — как в нав-баре iOS: акцентный
   цвет ссылки, лёгкое затемнение при нажатии вместо сжатия в кружке. */
.nav-back {
  border: none;
  background: none;
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 34px;
  padding: 0 6px 0 0;
  margin-left: -6px;
  border-radius: 8px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.nav-back:active {
  opacity: 0.45;
}

.nav-title {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Главное меню ---------- */

.menu-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.menu-tile {
  background: var(--secondary-bg);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.menu-tile:active {
  transform: scale(0.98);
}

.menu-tiles.vertical .menu-tile {
  padding: 14px 16px;
}

.menu-tile-icon {
  font-size: 28px;
  line-height: 1;
}

.menu-tile-body {
  flex: 1;
  min-width: 0;
}

.menu-tile-title {
  font-weight: 700;
  font-size: 15px;
}

.menu-tile-desc {
  color: var(--hint);
  font-size: 13px;
  margin-top: 2px;
}

.menu-tile .chevron {
  color: var(--hint);
  font-size: 18px;
}

.menu-footer {
  /* Прибито к низу экрана через flex-колонку у #screen-menu (см. ниже), а не
     просто "следующий блок" — иначе на экранах с малым числом плиток подвал
     повисал бы сразу под последней плиткой, а не внизу. margin-top:auto
     выталкивает его вниз доступного места; если контента больше высоты
     экрана - просто идёт сразу за плитками и скроллится вместе с ними. */
  margin-top: auto;
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.menu-footer-logo {
  width: 170px;
  height: auto;
  opacity: 0.9;
}

.menu-footer-text {
  color: var(--hint);
  font-size: 11px;
  line-height: 1.5;
}

/* ---------- VIN / автомобиль ---------- */

.vin-input-row {
  display: flex;
  gap: 8px;
}

.vin-photo-link {
  color: var(--link);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vin-photo-link:active {
  opacity: 0.6;
}

.vin-input-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

/* Заглавные буквы нужны только самому полю VIN, а не всем полям, которые
   переиспользуют .vin-input-row как обёртку (например поиск по названию). */
#vin-input {
  text-transform: uppercase;
}

#byname-input {
  width: 100%;
  padding-right: 34px;
}

.vin-input-row input::placeholder {
  color: var(--hint);
  text-transform: none;
}

.vin-submit-btn {
  border: none;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font-size: 15px;
  font-weight: 600;
  padding: 0 18px;
  cursor: pointer;
}

.vin-submit-btn[disabled] {
  opacity: 0.6;
}

.manager-link {
  margin: 10px 2px 4px;
  font-size: 13px;
}

.motor-oil-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.motor-oil-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.motor-oil-field-label {
  font-size: 13px;
  color: var(--hint);
}

.motor-oil-field select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 15px;
  outline: none;
}

#mo-search-btn {
  width: 100%;
  padding: 13px 18px;
  margin-bottom: 14px;
}

.manager-link a {
  color: var(--link);
  text-decoration: none;
}

.saved-vehicle {
  position: relative;
}

.saved-vehicle-remove {
  border: none;
  background: none;
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
}

.qty-remove {
  border: none;
  background: none;
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.qty-remove:active {
  transform: scale(0.9);
}

.vehicle-summary-card {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.vehicle-summary-line {
  font-size: 14px;
}

.vehicle-summary-line:first-child {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.breadcrumb {
  color: var(--hint);
  font-size: 13px;
  margin: 4px 2px 10px;
}

/* ---------- Детали (карточки OEM) ---------- */

.part-card {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.part-oem {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 700;
  font-size: 14px;
}

.part-name {
  font-size: 14px;
  color: var(--text);
}

.part-approval {
  color: var(--hint);
  font-size: 13px;
}

.part-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.part-analog-hint {
  color: var(--hint);
  font-size: 12px;
}

.part-pick-btn {
  border: none;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
  font-weight: 600;
  padding: 9px;
  cursor: pointer;
  margin-top: 2px;
  width: 100%;
}

.unit-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
  margin: 10px 2px 2px;
}

.unit-group-title:first-child {
  margin-top: 4px;
}

/* ---------- Комплект ТО ---------- */

.tokit-added-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tokit-skip-note {
  color: var(--hint);
  font-size: 13px;
  padding: 4px 2px;
}

.checkout-btn.spaced {
  margin-top: 14px;
}

.input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

#search-input {
  width: 100%;
  padding: 11px 34px 11px 14px;
  border-radius: 12px;
  border: none;
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

#search-input::placeholder {
  color: var(--hint);
}

#search-btn {
  border: none;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font-size: 18px;
  padding: 0 16px;
  cursor: pointer;
}

.input-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: var(--hint);
  color: var(--bg);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.7;
}

.input-clear:active {
  opacity: 1;
  transform: translateY(-50%) scale(0.9);
}

#content {
  /* --header-h выставляется в JS (ResizeObserver над .topbar) - шапка теперь
     position:fixed и вышла из потока, контент под неё больше не подвинется
     сам. 60px - разумный запас на случай, если JS ещё не успел отмерить. */
  padding: calc(var(--header-h, 60px) + 12px) 12px 12px;
}

/* Растягиваем главное меню на весь экран, чтобы .menu-footer (margin-top:auto)
   всегда прижимался к самому низу, а не повисал сразу под последней плиткой
   при малом числе пунктов меню. --header-h (реальная высота шапки, меряется
   в JS) + 24px (верх+низ padding #content) уже вычтены через padding
   #content выше - здесь довычитаем только safe-area снизу (fullscreen на
   мобильных). Резерв под плавающую кнопку корзины (--cart-fab-h в padding
   body) намеренно не вычитаем - кнопка в правом нижнем углу, с подвалом
   визуально не пересекается. Если реального контента больше этой высоты -
   просто скроллится как обычно. */
#screen-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h, 60px) - 24px - var(--tg-safe-area-inset-bottom, 0px));
  min-height: calc(100dvh - var(--header-h, 60px) - 24px - var(--tg-safe-area-inset-bottom, 0px));
}

/* :not([hidden]) — та же история, что у .search-row/.nav-row выше: без него
   display:flex перебивает [hidden]{display:none}. Отступ между блоками нужен
   на всех экранах VIN-раздела (карточки авто, категорий, узлов, деталей и т.д.) —
   там HTML просто конкатенируется без собственной обёртки с gap. */
#screen-vin:not([hidden]),
#screen-orders:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Вложенный контейнер результатов поиска по названию — тот же приём,
   родительский gap на #screen-vin до него не достаёт. */
#byname-results:not(:empty),
#mo-results:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#vin-saved-wrap:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--hint);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-state .hint {
  font-size: 13px;
  margin-top: 6px;
}

.status-line {
  text-align: center;
  color: var(--hint);
  padding: 24px 0;
}

/* :not([hidden]) — иначе display:flex здесь перебивает по специфичности
   стандартное [hidden]{display:none} и блок не скрывается атрибутом hidden. */
.brand-list:not([hidden]),
.offer-list:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 4px 2px;
}

.card {
  background: var(--secondary-bg);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card.clickable {
  cursor: pointer;
}

.brand-card .brand-name,
.brand-group-header .brand-name {
  font-weight: 600;
  font-size: 15px;
}

.brand-card .brand-desc,
.brand-group-header .brand-desc {
  color: var(--hint);
  font-size: 13px;
  margin-top: 2px;
}

.brand-card .chevron,
.brand-group-header .chevron,
.order-card-head .chevron {
  color: var(--hint);
  font-size: 18px;
  display: inline-block;
  transition: transform 0.4s ease;
}

.brand-group-header.open .chevron,
.order-card-head.open .chevron {
  transform: rotate(90deg);
}

/* Плавное нажатие — лёгкое сжатие для всех тапаемых элементов. */
.card.clickable,
.add-btn,
.show-more-btn,
.cart-fab,
.qty-control button,
.sheet-close {
  transition: transform 0.12s ease;
}

.card.clickable:active,
.add-btn:not([disabled]):active,
.show-more-btn:active,
.cart-fab:active,
.qty-control button:active,
.sheet-close:active {
  transform: scale(0.96);
}

.offer-card {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.offer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.offer-brand {
  font-weight: 700;
  font-size: 15px;
}

.offer-number {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--hint);
  font-size: 13px;
}

.offer-same-note {
  color: var(--hint);
  font-size: 12px;
  font-style: italic;
}

.offer-desc {
  color: var(--hint);
  font-size: 13px;
}

.offer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.offer-price {
  font-weight: 700;
  font-size: 16px;
}

.offer-meta {
  font-size: 13px;
  color: var(--hint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot-green {
  color: var(--green);
}

.dot-amber {
  color: var(--amber);
}

.pick-card {
  border: 1.5px solid var(--button);
  background: var(--bg);
}

.pick-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--button);
}

.show-more-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--secondary-bg);
  color: var(--link);
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  margin: 2px 0 4px;
}

/* Раскрывающийся блок без display:none — анимируем высоту через grid-rows
   (0fr -> 1fr), это плавно работает даже когда высота содержимого неизвестна
   заранее. Открытое/закрытое состояние переключается классом .open, а не
   атрибутом hidden. minmax(0, 0fr) обязателен: без явного минимума 0 браузер
   всё равно резервирует под трек min-content дочернего элемента (например
   высоту кнопки с white-space:nowrap), и "свёрнутый" блок остаётся с щёлкой
   в несколько десятков пикселей вместо настоящего нуля. */
.collapsible {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.45s ease;
}

.collapsible.open {
  grid-template-rows: 1fr;
}

.collapsible-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.groups-inner {
  gap: 10px;
}

.brand-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* !important — гарантированно перебивает .brand-group{display:flex} независимо
   от порядка правил (см. баг с [hidden] выше: класс той же специфичности
   иначе не всегда побеждает). */
.brand-group.filtered-out {
  display: none !important;
}

.brand-filter-wrap {
  position: relative;
  margin-bottom: 2px;
}

.brand-filter-input {
  width: 100%;
  padding: 10px 34px 10px 14px;
  border-radius: 10px;
  border: none;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  outline: none;
}

.brand-filter-input::placeholder {
  color: var(--hint);
}

.items-inner {
  gap: 8px;
  padding-left: 4px;
}

.add-btn {
  border: none;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.secondary-btn {
  border: 1.5px solid var(--separator);
  background: none;
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease;
}

.secondary-btn:active {
  transform: scale(0.96);
}

.tokit-item-actions {
  display: flex;
  gap: 8px;
}

.tokit-item-actions .add-btn,
.tokit-item-actions .secondary-btn {
  flex: 1;
}

.add-btn[disabled] {
  opacity: 0.6;
}

.cart-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--tg-safe-area-inset-bottom, 0px));
  z-index: 20;
  border: none;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sheet.open .sheet-backdrop {
  opacity: 1;
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.sheet.open .sheet-panel {
  transform: translateY(0);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 12px;
}

.sheet-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-header h2 {
  margin: 0;
  font-size: 18px;
}

.sheet-close {
  border: none;
  background: var(--secondary-bg);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

/* Мусорка в шапке корзины — плоская и красная (деструктивное действие),
   в отличие от нейтрального серого кружка-крестика рядом. */
.sheet-close.destructive {
  background: none;
  color: #ff453a;
  width: auto;
  height: 34px;
  padding: 0 4px;
  font-size: 17px;
}

.cart-items {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.cart-item {
  background: var(--secondary-bg);
  border-radius: 12px;
  padding: 10px 12px;
}

.cart-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.cart-item-desc {
  color: var(--hint);
  font-size: 12px;
  margin-top: 2px;
}

.cart-item-status:not(:empty) {
  margin-top: 4px;
}

.cart-item-warning {
  color: #ff453a;
  font-size: 12px;
  font-weight: 600;
}

.cart-item-price-note {
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
}

.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px 8px;
}

.qty-control button {
  border: none;
  background: none;
  color: var(--link);
  font-size: 16px;
  font-weight: 700;
  width: 22px;
  cursor: pointer;
}

.order-card {
  display: flex;
  flex-direction: column;
}

.order-card-head .order-number {
  font-weight: 600;
  font-size: 14px;
}

.order-card-sub {
  color: var(--hint);
  font-size: 13px;
  margin-top: 2px;
}

.order-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-status {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.order-status.status-red {
  color: var(--red);
}

.order-status.status-green {
  color: var(--green);
}

.order-status.status-amber {
  color: var(--amber);
}

.order-status.status-blue {
  color: var(--link);
}

/* Товары заказа изначально скрыты (см. .collapsible выше) — раскрываются
   по тапу на карточку заказа, чтобы список истории не был перегружен. */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--secondary-bg);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
}

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--separator);
}

.order-item:first-child {
  padding-top: 0;
  border-top: none;
}

.order-item-name {
  font-weight: 600;
  font-size: 14px;
}

.order-item-desc {
  color: var(--hint);
  font-size: 12px;
  margin-top: 2px;
}

.order-item-meta {
  color: var(--hint);
  font-size: 12px;
  margin-top: 2px;
}

.order-reorder-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.cart-total {
  border-top: 1px solid var(--separator);
  padding-top: 12px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
}

.empty-cart {
  color: var(--hint);
  text-align: center;
  padding: 32px 0;
}

.min-warning {
  color: var(--amber);
  font-size: 13px;
  text-align: center;
  padding: 8px 0 0;
}

.checkout-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 700;
  padding: 13px;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.12s ease;
}

.checkout-btn:active {
  transform: scale(0.97);
}

.checkout-btn.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.checkout-btn[disabled] {
  opacity: 0.6;
}

.checkout-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 13px;
  color: var(--hint);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 16px;
  outline: none;
  font-family: inherit;
  resize: none;
}

.form-field.invalid input,
.form-field.invalid textarea {
  box-shadow: 0 0 0 1.5px #ff453a inset;
}

.form-error {
  color: #ff453a;
  font-size: 12px;
}

.segmented {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.segmented-option {
  border: 1.5px solid var(--separator);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}

.segmented-option:active {
  transform: scale(0.98);
}

.segmented-option.active {
  border-color: var(--button);
  background: var(--secondary-bg);
  font-weight: 600;
}

.checkout-summary {
  background: var(--secondary-bg);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.checkout-summary-total {
  border-top: 1px solid var(--separator);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  font-size: 16px;
}

.checkout-success {
  text-align: center;
  padding: 24px 8px;
}

.checkout-success .icon {
  font-size: 44px;
  margin-bottom: 12px;
}

.checkout-success h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.checkout-success p {
  color: var(--hint);
  font-size: 14px;
  margin: 4px 0;
}

.checkout-fail {
  text-align: center;
  padding: 16px 8px;
  color: var(--amber);
  font-size: 14px;
}

/* ---------- ИИ эксперт ---------- */

/* Чат — единственный экран с СОБСТВЕННЫМ скроллом (а не скроллом всей
   страницы, как остальные экраны): пока он открыт, body перестаёт
   прокручиваться и превращается в flex-колонку высотой во весь видимый
   вьюпорт (100dvh — в отличие от 100vh сам сжимается под открывшуюся
   мобильную клавиатуру, без ручного подсчёта отступов и без position:fixed,
   который на мобилках после открытия клавиатуры "подпрыгивает" не сразу).
   #screen-expert внутри — тоже колонка: список сообщений растягивается и
   скроллится сам (flex:1 + overflow-y), а строка ввода — обычный (не fixed)
   последний элемент этой колонки, поэтому всегда прижата к низу видимой
   области и не может перекрыться/потеряться. */
body.expert-active {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  /* --app-height обновляется JS-ом из window.visualViewport в реальном
     времени по ходу анимации открытия клавиатуры (см. app.js) — на iOS
     WKWebView (в котором открывается мини-апп в Telegram) сама dvh
     пересчитывается только ПОСЛЕ завершения анимации клавиатуры, а не
     синхронно с ней, из-за чего строка ввода заметно "запаздывала". */
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

body.expert-active #content {
  flex: 1;
  min-height: 0;
  padding: 0;
}

#screen-expert:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.expert-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expert-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.expert-msg.user {
  align-self: flex-end;
  background: var(--button);
  color: var(--button-text);
  border-bottom-right-radius: 4px;
}

.expert-msg.assistant {
  align-self: flex-start;
  background: var(--secondary-bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.expert-vin-btn {
  align-self: center;
  width: 100%;
  text-align: center;
}

.expert-vehicle-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

.expert-msg.hint {
  align-self: center;
  background: none;
  color: var(--hint);
  font-size: 13px;
  text-align: center;
  max-width: 100%;
}

.expert-typing {
  align-self: flex-start;
  background: var(--secondary-bg);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
  display: flex;
  gap: 4px;
}

.expert-typing span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--hint);
  animation: expert-typing-bounce 1s infinite ease-in-out;
}

.expert-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.expert-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes expert-typing-bounce {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.expert-offers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  align-self: stretch;
}

.expert-offer-card {
  background: var(--bg);
  border: 1.5px solid var(--separator);
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.expert-offer-card:active {
  transform: scale(0.97);
}

.expert-offer-card .offer-brand {
  font-size: 14px;
}

.expert-offer-card .offer-number {
  font-size: 12px;
}

.expert-offer-card .expert-offer-price {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.expert-compose {
  flex-shrink: 0;
  background: var(--bg);
  border-top: 1px solid var(--separator);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex;
}

/* Кнопка отправки лежит ВНУТРИ поля ввода, а не рядом с ним — так строка
   тянется на всю ширину, а кнопка всегда по центру по высоте (top:50% +
   translateY), а не по нижнему краю растущей многострочной textarea. */
.expert-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.expert-input {
  width: 100%;
  max-height: 100px;
  padding: 10px 46px 10px 14px;
  border-radius: 18px;
  border: none;
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: none;
  display: block;
}

.expert-input::placeholder {
  color: var(--hint);
}

.expert-send {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.expert-send:active {
  transform: translateY(-50%) scale(0.92);
}

.expert-send[disabled] {
  opacity: 0.5;
}

/* Плавающая кнопка корзины на весь экран чата ни к чему — только мешает
   строке ввода в правом нижнем углу, и в самом чате покупка не оформляется
   напрямую (для этого есть переход в поиск по артикулу через карточки). */
body.expert-active .cart-fab {
  display: none;
}