/*
 * «Помощник» — оформление главной витрины (core/designs.py, по умолчанию).
 *
 * Слой поверх app.css: та же разметка и те же данные. Тон — поисковик и
 * помощник для бизнеса и покупателей, а не продавец: цвета темы и палитры
 * сайта, без ярких градиентов, огоньков и конфетти. Движение — только там,
 * где помогает читать (появление списка, отклик на нажатие), и выключается
 * при prefers-reduced-motion. Разбор — docs/dashboard.md («Оформление «Помощник»»).
 */

body.emo { --emo-a: var(--ru, #7c8cff); }

/* Полоска «это превью»: человек должен знать, где он и как вернуться. */
.emo-flag { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 6px 16px; font-size: 13px; color: var(--text); background: var(--ru-soft); border-bottom: 1px solid var(--line); }
.emo-flag a { color: var(--ru); font-weight: 600; }

/* --- Первый экран --------------------------------------------------------- */
/* Спокойная панель в цветах темы: ответ «что тут есть и сколько», а не плакат. */
.emo-hero { position: relative; margin: 12px 16px 6px; border-radius: var(--radius, 14px); color: var(--text);
  padding: 18px 22px; display: block;
  background: var(--surface); border: 1px solid var(--line); }
.emo-hero h2 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.15; letter-spacing: -.3px; font-weight: 700; }
.emo-hero h2 em { font-style: normal; color: var(--gain); }
.emo-hero p.lead { margin: 0 0 14px; color: var(--muted); font-size: 15px; max-width: 36em; }
.emo-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.emo-cta a, .emo-cta button { border-radius: 10px; padding: 9px 14px; font: 600 14px system-ui, sans-serif;
  cursor: pointer; text-decoration: none; color: #fff; background: var(--ru); border: 1px solid var(--ru);
  transition: background-color .15s, border-color .15s; }
.emo-cta .alt { background: transparent; color: var(--text); border-color: var(--line-strong, var(--line)); }
.emo-cta a:hover, .emo-cta button:hover { filter: brightness(1.05); }
.emo-cta .alt:hover { border-color: var(--muted); filter: none; }

/* --- Плитки итогов и фильтры ---------------------------------------------- */
.emo .kpi { transition: border-color .15s; }
.emo .kpi-btn:hover, .emo .kpi-sub:hover { border-color: var(--muted); }
.emo .chip, .emo .ghost, .emo .btn { transition: transform .1s, background-color .15s, border-color .15s; }
.emo .chip:active, .emo .ghost:active, .emo .btn:active, .emo .kpi-btn:active { transform: scale(.98); }
/* Волна от нажатия — тихая: отклик, а не эффект. */
.emo-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .12;
  transform: scale(0); animation: emo-ripple .45s ease-out forwards; }
@keyframes emo-ripple { to { transform: scale(2.4); opacity: 0; } }

/* --- Карточки машин ------------------------------------------------------- */
.emo .card { transition: border-color .15s, box-shadow .15s; }
.emo .card:hover { border-color: var(--muted); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35); }
.emo .card.emo-in { animation: emo-rise .3s ease-out both; animation-delay: calc(var(--emo-i, 0) * 30ms); }
@keyframes emo-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes emo-pop { from { opacity: 0; transform: scale(.96); } }

/* --- Ждём и пусто --------------------------------------------------------- */
/* Только пустой список: у .shot.empty (карточка без фото) свой вид. */
.emo .deals > .empty { border-style: solid; background: var(--surface); }
.emo-empty-art { display: block; width: 120px; margin: 0 auto 8px; opacity: .85; }
.emo-empty-act { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* --- Подтверждение подписки ------------------------------------------------ */
.emo-cheer { position: fixed; left: 50%; bottom: 28px; z-index: 3001; transform: translateX(-50%);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px;
  font-weight: 600; box-shadow: var(--shadow, 0 10px 30px -12px rgba(0,0,0,.4)); animation: emo-pop .25s both; }

/* --- Чипы первого экрана: «новое с прошлого визита», «продолжить отбор» --- */
.emo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.emo-chips:empty { display: none; }
.emo-chips a { color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; border-radius: 999px;
  padding: 5px 12px; border: 1px solid var(--line); background: var(--surface-2); }
.emo-chips a:hover { border-color: var(--muted); }
.emo-chips a.hot { border-color: var(--gain); color: var(--gain); }

/* --- «Под ключ в РФ» на карточке ------------------------------------------ */
.emo .card .money .price { font-size: 15px; color: var(--muted); }
.emo-landed { display: block; margin: 6px 0; padding: 7px 10px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line); line-height: 1.3; }
.emo-landed .lbl { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.emo-landed b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emo-landed small { display: block; font-size: 12px; color: var(--muted); }

/* --- Значки на фото: новое для вас, сравнить ------------------------------ */
.emo-new { position: absolute; top: 34px; left: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--surface); color: var(--gain); border: 1px solid var(--gain); }
.emo-cmp { position: absolute; right: 8px; bottom: 8px; z-index: 3; border: 0; border-radius: 999px; cursor: pointer;
  padding: 5px 10px; font: 600 12px system-ui, sans-serif; color: #fff; background: rgba(20, 24, 32, .66);
  transition: background .15s; }
.emo-cmp:hover, .emo-cmp.on { background: var(--ru); }
.shot.failed .emo-cmp { bottom: 6px; padding: 3px 8px; }
.shot.failed .emo-new { display: none; }

/* --- Полоса сравнения и нижняя панель ------------------------------------- */
.emo-cmpbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 35;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 8px 8px 12px;
  border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong, var(--line));
  box-shadow: var(--shadow, 0 10px 30px -12px rgba(0,0,0,.4)); animation: emo-pop .2s both; }
.emo-cmpbar[hidden], .emo-modal-back[hidden] { display: none; }
.emo-cmpbar .list { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.emo-cmpbar .list span { white-space: nowrap; font-size: 12.5px; background: var(--surface-2); border-radius: 999px;
  padding: 4px 6px 4px 10px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.emo-cmpbar .list button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 4px; }
.emo-cmpbar .go { flex: none; border: 0; border-radius: 10px; padding: 9px 14px; font: 600 14px system-ui, sans-serif;
  background: var(--ru); color: #fff; cursor: pointer; }
.emo-cmpbar .go:disabled { opacity: .5; cursor: default; }
.emo-dock { display: none; }
@media (max-width: 760px) {
  .emo-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .emo-dock button { border: 0; background: none; color: var(--text); font: 600 11.5px system-ui, sans-serif;
    display: grid; justify-items: center; gap: 2px; padding: 4px 0; cursor: pointer; border-radius: 10px; position: relative; }
  .emo-dock button span { font-size: 19px; line-height: 1; }
  .emo-dock button:active { background: var(--surface-2); }
  .emo { padding-bottom: 64px; }
  /* Панель не прячется под окном карты: карта занимает экран над ней, а
     «Карта» в панели закрывает окно повторным нажатием (emo.js). Над другими
     окнами (заявка, «Следить») панель не поднимается — закрыла бы их низ. */
  .emo .rcdmap-back { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.emo:has(.rcdmap-back):not(:has(.sb-back, .fl-back, .ord-back, .nx-back, .hp-back, .fb-back, .rcd-auth-back, .emo-modal-back, .rcdroute-back)) .emo-dock { z-index: 1001; }
  body.emo:has(.rcdmap-back) .emo-dock [data-map-open] { color: var(--ru); }
  .emo .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .emo-cmpbar { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* Панель машины открыта (app.js ставит body overflow: hidden) — нижняя панель
   и полоса сравнения не лезут поверх неё. */
body.emo[style*="overflow: hidden"] .emo-dock, body.emo[style*="overflow: hidden"] .emo-cmpbar { display: none; }

/* --- Окно сравнения ------------------------------------------------------- */
.emo-modal-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.emo-modal { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); animation: emo-rise .3s both; }
.emo-modal .head { display: flex; align-items: center; padding: 16px 18px 6px; }
.emo-modal h3 { margin: 0; font-size: 19px; }
.emo-modal .x { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 24px; cursor: pointer; }
.emo-modal .body { padding: 6px 18px 18px; }
.emo-modal .tbl { overflow-x: auto; }
.emo-modal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.emo-modal th, .emo-modal td { padding: 8px; border-bottom: 1px solid var(--line-soft, var(--line)); text-align: left; vertical-align: top; }
.emo-modal thead th { min-width: 150px; }
.emo-modal thead img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.emo-modal thead small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.emo-modal tbody th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.emo-modal td { font-variant-numeric: tabular-nums; }
.emo-modal td.best { color: var(--gain); font-weight: 700; }
.emo-modal .muted { color: var(--muted); font-size: 12.5px; }

/* --- Знакомство ----------------------------------------------------------- */
.emo-tour { position: fixed; z-index: 1001; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(380px, calc(100% - 24px));
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong, var(--line)); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow, 0 10px 30px -12px rgba(0,0,0,.4)); animation: emo-pop .2s both; }
.emo-tour b { display: block; font-size: 16px; margin: 6px 0 2px; }
.emo-tour p { margin: 0; font-size: 14px; color: var(--muted); }
.emo-tour .dots { display: flex; gap: 5px; }
.emo-tour .dots i { width: 18px; height: 4px; border-radius: 4px; background: var(--line); }
.emo-tour .dots i.on { background: var(--ru); }
.emo-tour .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.emo-tour button { border: 0; border-radius: 10px; padding: 8px 12px; font: 600 13.5px system-ui, sans-serif; cursor: pointer;
  background: var(--surface-2); color: var(--text); }
.emo-tour button.go { background: var(--ru); color: #fff; }
@media (max-width: 760px) { .emo-tour { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.emo-lit { position: relative; z-index: 5; outline: 2px solid var(--ru); outline-offset: 3px; border-radius: 10px; }

@media (max-width: 760px) {
  /* Телефон, шапка «Помощника». Блоки и подписи те же, что в «Классике»
     (лозунг, «Карта», «Тема») — меняется только раскладка: лозунг уходит
     своей строкой под знак, а не жмётся в четыре строки между знаком и
     кнопками. «Классику» эти правила не трогают: она остаётся как была. */
  .emo .top-row-brand { flex-wrap: wrap; row-gap: 2px; }
  .emo .slogan-h { order: 3; flex-basis: 100%; }
  .emo .slogan { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Строка «кто мы» уезжает вместе со страницей, липнут поиск и кнопки:
     8 px поля + 36 строки + 2 + 15 лозунга + 8 промежутка. */
  .emo .top { top: -69px; }
  .emo #menuBtn { gap: 0; }
  /* Подписи плиток разной длины (одна — три строки): числа под ними стояли
     на разной высоте. Подпись тянется, число и пояснение прижаты к низу. */
  .emo .kpis > .kpi:not(.kpi-group) > span:first-child { flex: 1 0 auto; }
  /* Одно поле на весь телефон: у шапки и плиток 12 px, у списка было 16. */
  .emo .layout { padding-left: 12px; padding-right: 12px; }
  .emo .auction-best { margin-left: 0; margin-right: 0; }
  .emo-hero { margin: 8px 12px 4px; padding: 14px; border-radius: 12px; }
  .emo-hero h2 { font-size: 20px; }
  .emo-hero p.lead { font-size: 13.5px; margin-bottom: 10px; }
  .emo-cta a { flex: 1; text-align: center; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .emo *, .emo *::before, .emo *::after { animation: none !important; transition: none !important; }
}