/* Выбор модели, мышления и комментарий — ОДИН слой для приложения и сайта (10.11.2026). Подключают: приложение
   (index.html, до app.css) и страницы сайта (проверка текста). Отрисовка — brand/pickers.js (LZPickers). Правила
   перенесены из app.css как есть; в app.css остались только тёмная тема и то, что есть лишь в приложении («@», разделы
   медиа, место под полем). Цвета — токены. Значения ниже переопределяет app.css в приложении. */
:root { --lz-selected: var(--lz-paper-deep); --lz-mark: var(--rb-ink); --lz-paper: var(--rb-canvas); --lz-icon: 17px }
/* ---------- модель и размышления: внизу поля ввода — логотип, название, уровень ---------- */
.lz-model { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: min(300px, 46vw); height: 34px; padding: 0 10px 0 8px; border: 0; border-radius: var(--rb-radius-pill); background: transparent; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-model:hover, .lz-model[aria-expanded="true"] { background: var(--lz-hover) }
.lz-model__logo { display: inline-grid; place-items: center; flex: none }
.lz-model__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-model .ic { width: 14px; height: 14px; flex: none; color: var(--rb-muted) }
.lz-logo-img { width: 18px; height: 18px; flex: none; object-fit: contain }
.lz-logo-emoji { width: 18px; flex: none; text-align: center; font-size: 15px; line-height: 1 }
/* Размер окна моделей постоянный (зависит от экрана, не от числа моделей) — при переключении вкладок не прыгает */
.lz-models { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: min(460px, 100%); height: min(480px, 62vh); display: flex; flex-direction: column; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas); box-shadow: var(--rb-shadow-lift); pointer-events: auto; overflow: hidden }
.lz-models__list { overflow-y: auto; padding: 6px 6px 10px; overscroll-behavior: contain }
.lz-models__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--rb-radius-sm) }
.lz-models__row:hover { background: var(--lz-hover) }
.lz-models__row.is-active { background: var(--lz-selected) }
.lz-models__pick { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 6px 10px; border: 0; background: transparent; color: var(--rb-ink); font: 500 14px/1.25 var(--rb-font-body); text-align: left; cursor: pointer }
.lz-models__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-models__check.ic, .lz-models__check .ic { width: 16px; height: 16px; flex: none; color: var(--lz-mark) }
.lz-models__star { display: grid; place-items: center; width: 34px; height: 34px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rb-faint); cursor: pointer; opacity: .45 }
.lz-models__row:hover .lz-models__star, .lz-models__star.is-on { opacity: 1 }
.lz-models__star .ic { width: 16px; height: 16px }
.lz-models__star.is-on { color: var(--lz-star) }
.lz-models__star.is-on .ic { fill: currentColor }
.lz-models__empty { padding: 24px; text-align: center; color: var(--rb-muted) }
/* ---------- пикер: вкладки семейств, меню мышления ---------- */
.lz-models__bar { display: flex; align-items: center; gap: 4px; flex: none; padding: 8px 10px; border-bottom: 1px solid var(--rb-line) }
.lz-models__find { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rb-muted); cursor: pointer }
.lz-models__find:hover, .lz-models__bar.is-searching .lz-models__find { background: var(--lz-hover); color: var(--rb-ink) }
.lz-models__find .ic { width: 16px; height: 16px }
/* Поиск свёрнут в иконку; по клику поле занимает место вкладок */
.lz-models__search { display: none; flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: var(--rb-radius-pill); background: var(--rb-surface-soft); color: var(--rb-ink); font: 400 14px/1 var(--rb-font-body); outline: none }
.lz-models__bar.is-searching .lz-models__search { display: block }
.lz-models__bar.is-searching .lz-models__tabs { display: none }
.lz-models__tabs { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none }
.lz-models__tabs::-webkit-scrollbar { display: none }
.lz-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px 0 9px; border: 0; border-radius: var(--rb-radius-pill); background: transparent; color: var(--rb-muted); font: 500 13px/1 var(--rb-font-body); cursor: pointer; white-space: nowrap }
.lz-tab:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-tab.is-active { background: var(--rb-ink); color: var(--rb-canvas) }
.lz-tab.is-active .lz-logo-img { filter: brightness(0) invert(1) }
.lz-tab__star.ic, .lz-tab__star .ic { width: 15px; height: 15px; fill: var(--lz-star); color: var(--lz-star) }
/* Плашки у моделей — цветами брендбука: обычная (и «новая») — бирюза, «дорогая» — мёд, как маркер выделения */
.lz-models__tag { flex: none; padding: 2px 8px; border-radius: var(--rb-radius-pill); background: color-mix(in srgb, var(--lz-teal) 12%, var(--rb-canvas)); color: var(--lz-teal); font: 600 10.5px/1.45 var(--rb-font-body); letter-spacing: .01em }
.lz-models__list { flex: 1; min-height: 0; padding: 6px }
.lz-think-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px; border: 0; border-radius: var(--rb-radius-pill); background: transparent; color: var(--rb-muted); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-think-chip:hover, .lz-think-chip[aria-expanded="true"] { background: var(--lz-hover); color: var(--rb-ink) }
.lz-think-chip .ic { width: 15px; height: 15px }
.lz-think-chip > span { white-space: nowrap }
.lz-think-chip > i:last-child .ic { width: 12px; height: 12px }
.lz-think { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: min(340px, 100%); padding: 6px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas); box-shadow: var(--rb-shadow-lift); pointer-events: auto }
.lz-think__head { padding: 8px 10px 6px; color: var(--rb-muted); font: 600 11px/1.3 var(--rb-font-mono); letter-spacing: .04em; text-transform: uppercase }
.lz-think__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--rb-radius-sm); background: transparent; color: var(--rb-ink); text-align: left; cursor: pointer }
.lz-think__item:hover { background: var(--lz-hover) }
.lz-think__item.is-active { background: var(--lz-selected) }
.lz-think__copy { display: grid; gap: 2px; flex: 1; min-width: 0 }
.lz-think__copy b { font: 600 14px/1.2 var(--rb-font-body) }
.lz-think__copy span { color: var(--rb-muted); font-size: 12px; line-height: 1.35 }
.lz-think__item .ic { width: 16px; height: 16px; flex: none; color: var(--lz-mark) }
/* мозг уровня слева — тот же, что у кнопки «Мышление» (app.js brainSvg); галочка справа остаётся маленькой */
.lz-think__brain { display: inline-flex; flex: none }
.lz-think__item .lz-think__brain .ic { width: var(--lz-icon); height: var(--lz-icon); color: var(--rb-ink) }
/* Цена за 1000 знаков ответа и пометка дорогих моделей */
.lz-models__price { flex: none; color: var(--rb-faint); font: 400 11px/1 var(--rb-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.lz-models__tag.is-pricey { background: var(--lz-honey); color: color-mix(in srgb, var(--lz-honey) 25%, var(--rb-ink)) }
/* Мозг «Мышления» — один сплошной цвет, степень — самим цветом (app.js brainSvg): Low — светло-серый, Medium —
   бледно-зелёный, High — ярко-зелёный, XHigh и Max — градиентом в фиолетовый; середина и складка прорезаны цветом фона */
:root { --lz-think-fill: var(--rb-good); --lz-think-grey: var(--rb-faint) }
.lz-brain { display: inline-flex }
.lz-brain .lz-brain__fill { stroke: none }
/* XHigh и Max — сверх зелёного: градиент в фиолетовый (цвета логотипа RoboWB), Max — ещё малиновый и свечение */
:root { --lz-think-violet: var(--lz-violet-bright); --lz-think-magenta: var(--rb-brand-2) }
.lz-brain .lz-brain--max { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lz-think-magenta) 85%, transparent))
  drop-shadow(0 0 1px color-mix(in srgb, var(--lz-think-violet) 60%, transparent)) }
.lz-brain .lz-brain__folds { stroke: var(--lz-paper) }
.lz-models__group { padding: 10px 10px 4px; color: var(--rb-faint); font: 500 11px/1 var(--rb-font-mono); text-transform: uppercase; letter-spacing: .06em }
.lz-wsdock__comment { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none;
  color: var(--rb-ink); font: 500 14px/1 var(--rb-font-body); cursor: pointer }
.lz-wsdock__comment:hover { background: var(--lz-hover) }
.lz-wsdock__comment .ic { width: 17px; height: 17px; color: var(--rb-muted) }
/* скрытые окна и кнопки — сам компонент (в приложении то же делает общее [hidden], на сайте его нет) */
.lz-models[hidden], .lz-think[hidden], .lz-model[hidden], .lz-think-chip[hidden], .lz-wsdock__comment[hidden] { display: none }
/* значки внутри компонента — своим размером (в приложении это делает общее правило для data-icon, на сайте его нет) */
.lz-tab__star, .lz-models__check, .lz-think__item > i { display: inline-flex; flex: none }
/* ---------- полное окно (все модели, в приложении — по «@»): разделы сверху, крестик, строка под стрелками ---------- */
.lz-models__kinds { display: flex; gap: 2px; flex: none; padding: 8px 8px 0; overflow-x: auto; scrollbar-width: none }
.lz-models__kinds::-webkit-scrollbar { display: none }
.lz-kind { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px 0 10px; border: 0;
  border-radius: var(--rb-radius-sm) var(--rb-radius-sm) 0 0; background: transparent; color: var(--rb-muted);
  font: 500 13.5px/1 var(--rb-font-body); cursor: pointer; border-bottom: 2px solid transparent }
.lz-kind .ic { width: 17px; height: 17px }
.lz-kind:hover { color: var(--rb-ink); background: var(--lz-hover) }
.lz-kind.is-active { color: var(--rb-ink); border-bottom-color: var(--rb-ink) }
.lz-models__close { position: sticky; right: 0; display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto;
  padding: 0; border: 0; border-radius: 50%; background: var(--rb-canvas); color: var(--rb-muted); cursor: pointer }
.lz-models__close:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-models__close .ic { width: 18px; height: 18px }
.lz-models.is-search-all .lz-models__tabs { visibility: hidden }     /* поиск из «@» — по всем разделам, вкладки семейств не нужны */
.lz-models__row.is-hl { background: var(--lz-hover) }
/* телефон: название модели целиком в первой строке, «дорогая» и цена — второй строкой под ним */
@media (max-width: 720px) {
  .lz-models__pick { min-height: 46px; flex-wrap: wrap; row-gap: 3px; padding-block: 9px }
  .lz-models__pick > :first-child { flex: none }
  .lz-models__name { flex: 1 1 calc(100% - 58px); white-space: normal; overflow: visible }
  .lz-models__check { order: 1 }
  .lz-models__tag { order: 2; margin-left: 28px }
  .lz-models__price { order: 3 }
  .lz-models__name + .lz-models__price { margin-left: 28px }
}
.lz-kind > i, .lz-models__close > i { display: inline-flex }
/* черта между нынешними моделями и прежними версиями (webchat/models.py _order, поле old) — не до краёв */
.lz-models__sep { height: 1px; margin: 6px 16px; background: var(--rb-line) }