/* Сайт Ложки поверх брендбука RoboWB (brand/robowb.css): своё — логотип и то, чего нет в кабинете RoboWB:
   медиа Telegram, inline-кнопки, черновики и статусы, альбомы, документы. Цвета и размеры — токены --rb-*. */

/* Логотип — градиент «чернила → петроль», фон ленты — тёплая бумага вместо белого: глаза меньше устают.
   Белыми остаются только то, что поверх ленты: поле ввода, карточки, пузыри пользователя. */
:root { --lz-logo-color: #1F4E5F; --lz-logo-gradient: linear-gradient(100deg, #1E2240, #1F6E7A); --lz-paper: #F7F5F0; --lz-paper-deep: #EFECE4;
  /* Состояния интерфейса — тёплые и одинаковые везде: наведение, выбранное, отметка (галочки, полоски).
     Градиент логотипа — только у логотипа. */
  --lz-hover: #F1ECE3; --lz-selected: #EBE3D5; --lz-mark: #B0582F; --lz-mark-soft: #F6E7DC }
/* Кнопки поля ввода (плюс, микрофон) — то же наведение, что у чипов модели и мышления */
.rb-composer__tool:hover { background: var(--lz-hover) }
body { margin: 0; background: var(--rb-page); color: var(--rb-ink); font-family: var(--rb-font-body) }
.rb-workspace { background: var(--lz-paper) }
.rb-chat__message.is-user { background: var(--rb-canvas) }
.rb-richtext code, .rb-richtext pre { background: var(--lz-paper-deep) }
.rb-mobilebar { background: color-mix(in srgb, var(--lz-paper) 82%, transparent) }

/* Поле ввода чуть выше от края — раньше было прижато к низу (+12 px к отступу RoboWB); «Прокрутить вниз» — над ним */
.rb-chat__compose { bottom: calc(var(--rb-keyboard-height, 0px) + 26px) }
.rb-chat__scroll-end { bottom: calc(var(--rb-compose-height, 138px) + var(--rb-keyboard-height, 0px) + 38px) }
/* Новый чат: поле ввода ближе к центру, «С чего начнём?» — прямо над ним */
.rb-chat.is-empty .rb-chat__compose { bottom: 34%; transition: bottom .25s ease }
.rb-chat.is-empty .rb-chat__empty { position: absolute; left: 0; right: 0; bottom: calc(34% + var(--rb-compose-height, 138px) + 18px); margin: 0 auto; padding: 0 24px }
@media (max-width: 720px) { .rb-chat.is-empty .rb-chat__compose { bottom: 24% } .rb-chat.is-empty .rb-chat__empty { bottom: calc(24% + var(--rb-compose-height, 138px) + 14px) } }
.rb-chat__messages { padding-bottom: calc(var(--rb-compose-height, 138px) + var(--rb-keyboard-height, 0px) + 46px) }
/* «Стоп» — когда у черновика ответа есть кнопка остановки; отправлять при этом тоже можно, как в Telegram */
.rb-chat__stop:not([hidden]) { display: grid }
[hidden] { display: none !important }

/* ---------- логотип ---------- */
/* Логотип «Lozhkabot» (пробовали и «Ложкабот») — Unbounded (шрифт бренда RoboWB, уже в brand/), градиент «чернила → петроль».
   Thesignature был только латинским; цвет текста прозрачный — его рисует фон под буквами (background-clip) */
.lz-logo { display: inline-block; padding-right: 2px; font: 600 22px/1.1 var(--rb-font-brand); letter-spacing: -.01em; white-space: nowrap;
  text-decoration: none; background: var(--lz-logo-gradient); -webkit-background-clip: text; background-clip: text; color: transparent }
.lz-logo:hover { color: transparent }   /* у RoboWB a:hover красит ссылки в красный */
.lz-logo--sm { font-size: 18px }
.lz-logo--lg { font-size: 40px }

/* ---------- вход ---------- */
.lz-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px }
.lz-login__card { width: min(440px, 100%); display: grid; justify-items: center; gap: 18px; padding: 40px 32px; text-align: center; box-shadow: var(--rb-shadow-card) }
.lz-login__lead { margin: 0; color: var(--rb-muted); line-height: 1.55 }
.lz-login__button { min-width: 240px; justify-content: center }
.lz-login__state { margin: 0; font-size: 13px; color: var(--rb-muted) }

/* ---------- боковая панель ---------- */
.lz-nav-new { width: calc(100% - 16px); border: 0; background: transparent; cursor: pointer; text-align: left }
.lz-nav-new .ic, .rb-nav-item .ic { width: 18px; height: 18px; flex: none }
.lz-pinned.ic, .lz-pinned .ic { width: 12px !important; height: 12px !important; margin-left: auto; color: var(--rb-faint) }
.rb-nav-chat:hover .lz-pinned, .rb-nav-chat.is-confirming .lz-pinned { visibility: hidden }
.rb-nav-item--chat { gap: 10px; padding-block: 7px }
.rb-nav-item--chat > .lz-logo-img { width: 18px; height: 18px; flex: none; opacity: .9 }
.rb-nav-item--chat.is-active > .lz-logo-img { opacity: 1 }
.rb-nav-chat .rb-nav-item--chat .lz-nav-chat__copy { display: grid; gap: 1px; min-width: 0; flex: 1; overflow: visible; white-space: normal }
.lz-nav-chat__copy b, .lz-nav-chat__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-nav-chat__copy b { font-weight: inherit }
.lz-nav-chat__copy small { font-size: 11px; font-weight: 400; line-height: 1.25; color: var(--rb-faint) }
.rb-nav-chat .rb-nav-item--chat .lz-busy { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; overflow: visible; font-size: 11px; color: var(--rb-faint); font-variant-numeric: tabular-nums }
.rb-nav-chat .rb-nav-item--chat .lz-busy span { overflow: visible }
.lz-busy .rb-agent-work__dots span { background: var(--lz-mark) }
.rb-nav-chat:hover .lz-busy, .rb-nav-chat.is-confirming .lz-busy { visibility: hidden }
/* На телефоне кнопки беседы видны всегда: пока беседа работает — вместо них индикатор; закреп видно по кнопке */
@media (hover: none) {
  .rb-nav-chat.is-busy:not(.is-confirming) .rb-nav-chat__actions { display: none }
  .rb-nav-chat.is-busy .rb-nav-item--chat { padding-right: 12px }
  .rb-nav-chat:not(.is-confirming) .lz-busy { visibility: visible }
  .lz-pinned { display: none }
}
.rb-nav-item--chat.is-unread::after { content: ""; margin-left: auto; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lz-mark) }
.lz-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 8px 10px; padding: 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas) }
.lz-balance__copy { display: grid; gap: 3px; min-width: 0 }
.lz-balance__copy b { font: 600 17px/1.2 var(--rb-font-body); font-variant-numeric: tabular-nums; white-space: nowrap }
.lz-balance__topup { flex: none; height: 32px; padding-inline: 12px; font-size: 12px }
.lz-account { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 0 8px; padding: 8px 10px; border: 0; border-radius: var(--rb-radius-md); background: transparent; color: inherit; text-align: left; cursor: pointer }
.lz-account:hover { background: color-mix(in srgb, var(--rb-ink) 6%, transparent) }
.lz-account .rb-account__copy { flex: 1; min-width: 0 }
.lz-account > i .ic { width: 16px; height: 16px; color: var(--rb-muted) }
.rb-sidebar { display: flex; flex-direction: column }
.rb-sidebar__recents { flex: 1 }

/* ---------- лента ---------- */
.lz-feed, .lz-live { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.lz-msg { position: relative }
.lz-msg.is-user { white-space: normal }
.lz-text { white-space: pre-wrap; overflow-wrap: anywhere }
.lz-rich { white-space: normal }
.lz-caption { margin-top: 8px }
.lz-msg__meta { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; font: 400 10px/1.2 var(--rb-font-mono); color: var(--rb-faint) }
.lz-msg.is-assistant .lz-msg__meta { justify-content: flex-start }
.lz-msg.is-user .lz-msg__meta { flex-direction: row-reverse; justify-content: flex-start }
.lz-msg__reactions { font-size: 14px }
/* Скопировать — как в Nanako: иконка 14px, проявляется при наведении на сообщение, ✓ после копирования */
.lz-msg__meta { align-items: center }
.lz-copy { display: grid; place-items: center; width: 22px; height: 22px; padding: 3px; border: 0; background: transparent; color: var(--rb-faint); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s }
.lz-copy svg { width: 14px; height: 14px }
.lz-msg:hover .lz-copy, .lz-copy:focus-visible, .lz-copy.is-done { opacity: 1 }
.lz-copy:hover { color: var(--lz-mark) }
.lz-copy.is-done { color: var(--rb-good) }
@media (hover: none) { .lz-copy { opacity: .7 } }
.lz-msg--history { opacity: .78 }

.lz-divider { align-self: center; margin: 6px 0; padding: 3px 10px; border-radius: var(--rb-radius-pill); background: var(--rb-surface-soft); color: var(--rb-muted); font: 500 11px/1.4 var(--rb-font-body) }
.lz-reply { margin-bottom: 6px; padding: 4px 10px; border-left: 2px solid var(--lz-mark); background: var(--lz-mark-soft); border-radius: var(--rb-radius-xs); font-size: 12px; color: var(--rb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* rich: заголовки, цитаты, свёрнутые блоки, формулы */
.lz-rich blockquote, .lz-text blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--rb-line); color: var(--rb-muted) }
.lz-rich details { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-sm); background: var(--rb-canvas) }
.lz-rich summary { cursor: pointer; font-weight: 600 }
.lz-rich details[open] summary { margin-bottom: 6px }
.lz-rich figure { margin: 0 0 8px }
.lz-rich figcaption { margin-top: 6px; font-size: 13px; color: var(--rb-muted) }
.lz-rich hr { border: 0; border-top: 1px solid var(--rb-line); margin: 12px 0 }
.lz-math { margin: 8px 0; overflow-x: auto; overflow-y: hidden }
.katex { font-size: 1.08em }
.katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0 }
.lz-spoiler { border-radius: 4px; background: var(--rb-ink); color: transparent; cursor: pointer; transition: background .2s, color .2s }
.lz-spoiler.is-open { background: transparent; color: inherit; cursor: auto }

/* медиа */
.lz-media { display: block; max-width: min(420px, 100%); border-radius: var(--rb-radius-md); overflow: hidden }
.lz-media + .lz-text, .lz-media + .lz-rich { margin-top: 8px }
.lz-media.is-spoiler { filter: blur(18px); cursor: pointer }
.lz-media__img, .lz-media__video { display: block; width: 100%; max-height: 520px; object-fit: contain; background: var(--rb-surface-soft); border-radius: var(--rb-radius-md); cursor: zoom-in }
.lz-media__video { cursor: auto }
.lz-media__video.is-round { width: 240px; height: 240px; border-radius: 50%; object-fit: cover }
.lz-rich .lz-media__img, .lz-rich .lz-media__video { max-width: min(420px, 100%) }
.lz-collage { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; max-width: 520px }
.lz-collage figcaption, .lz-collage .lz-figmeta { grid-column: 1 / -1 }
.lz-stack { display: grid; gap: 6px; justify-items: start }
.lz-stack .lz-media { max-width: 100% }
.lz-collage .lz-media, .lz-collage .lz-media__img { max-width: none; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rb-radius-xs) }
.lz-audio { display: grid; gap: 6px; width: min(360px, 78vw) }
.lz-audio__title { font-size: 13px; font-weight: 600 }
.lz-audio audio { width: 100% }
.lz-doc { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-ink) !important; text-decoration: none !important }
.lz-doc:hover { box-shadow: var(--rb-shadow-hover) }
.lz-doc__badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--rb-radius-sm); background: var(--lz-mark-soft); color: var(--lz-mark); font: 600 11px/1 var(--rb-font-mono) }
.lz-doc__copy { display: grid; min-width: 0 }
.lz-doc__copy b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-doc__copy span { font-size: 12px; color: var(--rb-muted) }


/* черновик и статусы («думаю…», «🎧 Слушаю голосовое…», табло ожидания) */
.lz-msg.is-draft { color: var(--rb-ink) }
.lz-thinking { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; background: none; color: var(--rb-muted); font: 500 13px/1.4 var(--rb-font-body) }
.lz-thinking__icon { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--lz-mark); animation: lz-status-pulse 1.6s ease-in-out infinite }
.lz-thinking__icon svg { width: 16px; height: 16px }
@keyframes lz-status-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.rb-voice-recorder__wave i { opacity: .9 }
.lz-transcript { margin-top: 6px; max-width: min(420px, 100%); color: var(--rb-muted); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere }
.lz-thinking + .lz-thinking { margin-top: 4px }
.lz-typing { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--rb-muted); font-size: 12px }

/* композер */
.rb-composer__tool .ic, .rb-chat__send .ic, .rb-chat__stop .ic { width: 18px; height: 18px }
.rb-composer__tool.is-active { color: var(--rb-bad) }
.lz-file { display: inline-flex; align-items: center; gap: 6px }
.lz-file.is-loading { opacity: .65 }
.lz-file.is-error { border-color: var(--rb-bad) }
.lz-file__raw { border: 0; background: transparent; color: var(--lz-mark); font-size: 11px; cursor: pointer; padding: 0 2px }
.lz-file__remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rb-muted); cursor: pointer }
.lz-file__remove .ic { width: 12px; height: 12px }

/* пополнение, просмотр фото */
.lz-topup { width: min(460px, calc(100vw - 32px)) }
.lz-topup__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 }
.lz-topup__email { display: grid; gap: 6px }
/* Просмотр фото: картинка вписана в экран (раньше max-height:100% в grid не ограничивал — фото уезжало вниз) */
.lz-viewer { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--rb-ink) 82%, transparent); cursor: zoom-out }
.lz-viewer__stage { position: relative; line-height: 0; cursor: crosshair; touch-action: none }
.lz-viewer__stage img { display: block; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); object-fit: contain; border-radius: var(--rb-radius-sm); box-shadow: var(--rb-shadow-modal) }
.lz-lens { position: absolute; z-index: 2; border: 3px solid rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, .4); background-repeat: no-repeat; pointer-events: none; transform: translate(-50%, -50%) }
.lz-viewer__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--rb-canvas) 18%, transparent); color: var(--rb-canvas); cursor: pointer }
.lz-viewer__close:hover { background: color-mix(in srgb, var(--rb-canvas) 30%, transparent) }
.lz-viewer__close .ic { width: 18px; height: 18px }

/* ---------- модель и размышления: внизу поля ввода — логотип, название, уровень ---------- */
.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 }
.rb-composer__foot { gap: 4px }

/* Размер окна моделей постоянный (зависит от экрана, не от числа моделей) — при переключении вкладок не прыгает */
.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: #C9A227 }
.lz-models__star.is-on .ic { fill: currentColor }
.lz-models__empty { padding: 24px; text-align: center; color: var(--rb-muted) }

/* ---------- медиа и файлы беседы ---------- */
.lz-drawer { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; border-left: 1px solid var(--rb-line); background: var(--rb-canvas); box-shadow: var(--rb-shadow-modal) }
.lz-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px }
.lz-drawer__head h2 { margin: 0; font: var(--rb-weight-heading) 18px/1.2 var(--rb-font-heading) }
.lz-drawer__filters { display: grid; gap: 8px; justify-items: start; padding: 4px 16px 12px; border-bottom: 1px solid var(--rb-line) }
.lz-drawer__filters .rb-segmented__item { min-height: 30px; padding: 0 12px }
.lz-drawer__body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; overscroll-behavior: contain }
.lz-drawer__empty { padding: 40px 0; text-align: center; color: var(--rb-muted) }
.lz-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.lz-gallery--list { grid-template-columns: minmax(0, 1fr) }
.lz-gallery__item { margin: 0; display: grid; gap: 6px; min-width: 0 }
.lz-gallery__preview { width: 100%; border-radius: var(--rb-radius-sm); background: var(--rb-surface-soft) }
img.lz-gallery__preview, video.lz-gallery__preview { aspect-ratio: 1; object-fit: cover; cursor: zoom-in }
video.lz-gallery__preview { cursor: auto }
.lz-gallery--list .lz-doc.lz-gallery__preview { width: auto; justify-self: start; background: var(--rb-canvas) }
.lz-gallery__item figcaption { display: grid; gap: 3px; min-width: 0; font-size: 12px; line-height: 1.35 }
.lz-gallery__item figcaption b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-gallery__who { justify-self: start; padding: 1px 7px; border-radius: var(--rb-radius-pill); font: 600 10px/1.5 var(--rb-font-mono) }
.lz-gallery__who.is-bot { background: var(--lz-mark-soft); color: var(--lz-mark) }
.lz-gallery__who.is-user { background: var(--rb-surface-soft); color: var(--rb-muted) }
.lz-gallery__meta { color: var(--rb-faint); font-family: var(--rb-font-mono); font-size: 10px }
.lz-gallery__prompt { color: var(--rb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.lz-gallery__actions { display: flex; gap: 12px }
.lz-gallery__actions a, .lz-gallery__actions button { padding: 0; border: 0; background: none; color: var(--lz-mark); font: 500 12px/1.4 var(--rb-font-body); text-decoration: none; cursor: pointer }
.lz-msg.is-flash { animation: lz-flash 1.6s ease }
@keyframes lz-flash { 20% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lz-mark) 30%, transparent); border-radius: var(--rb-radius-lg) } }
/* Панель медиа на широком экране отодвигает ленту, а не закрывает её */
@media (min-width: 721px) { html.lz-drawer-open .rb-workspace { margin-right: 440px } }
html.lz-drawer-open .rb-composer__enter { display: none }
@media (max-width: 1100px) { .rb-composer__enter { display: none } }
.lz-select { width: auto; min-width: 170px; height: 36px; padding: 0 10px; font: inherit; font-size: 13px; background: var(--rb-canvas) }

@media (max-width: 720px) {
  .rb-composer__enter { display: none }
  .lz-model { max-width: 52vw }
  /* Выбор модели на телефоне — шторкой снизу на всю ширину */
  .lz-models { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 72dvh; border-radius: var(--rb-radius-xl) var(--rb-radius-xl) 0 0; box-shadow: 0 -10px 40px color-mix(in srgb, var(--rb-ink) 25%, transparent) }
  html.lz-sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: color-mix(in srgb, var(--rb-ink) 30%, transparent) }
  html.lz-sheet-open .rb-chat__compose { z-index: 40 }
  .lz-models__pick { min-height: 46px }
  .lz-drawer { width: 100vw; border-left: 0 }
  html.lz-drawer-open .rb-chat__compose { right: 0 }
  .lz-settings__row { flex-wrap: wrap }
  .lz-settings__row .rb-segmented { justify-content: flex-start }
}

/* ---------- пикер: вкладки семейств, меню мышления ---------- */
.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: #C9A227; color: #C9A227 }

.lz-models__tag { flex: none; padding: 2px 7px; border-radius: var(--rb-radius-pill); background: var(--rb-surface-soft); color: var(--rb-muted); font: 500 10px/1.4 var(--rb-font-mono) }
.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 > 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) }

/* ---------- профиль: баланс, статистика, настройки ---------- */
.lz-profile { width: min(560px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 40px)); display: flex; flex-direction: column; overflow: hidden }
.lz-profile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px }
.lz-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rb-radius-pill); background: var(--rb-surface-soft) }
.lz-tabs__item { height: 34px; padding: 0 16px; border: 0; border-radius: var(--rb-radius-pill); background: transparent; color: var(--rb-muted); font: 600 13px/1 var(--rb-font-body); cursor: pointer }
.lz-tabs__item:hover { color: var(--rb-ink) }
.lz-tabs__item.is-active { background: var(--rb-canvas); color: var(--rb-ink); box-shadow: var(--rb-shadow-card) }
.lz-profile__body { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 14px; padding: 16px 20px 20px; background: var(--lz-paper) }
.lz-profile__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--rb-line); font-size: 12px }
.lz-card { padding: 16px 18px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas) }
.lz-card h3 { margin: 0 0 4px; font: 600 15px/1.3 var(--rb-font-body) }
.lz-card > p { margin: 0 0 12px; font-size: 13px; line-height: 1.45 }
.lz-hero { display: grid; gap: 6px; padding: 22px 20px; border-radius: var(--rb-radius-lg); background: var(--rb-ink); color: var(--rb-canvas) }
.lz-hero .rb-caps { color: color-mix(in srgb, var(--rb-canvas) 60%, transparent) }
.lz-hero__value { font: 600 38px/1.1 var(--rb-font-heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.lz-discount { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px }
.lz-discount .rb-muted { color: color-mix(in srgb, var(--rb-canvas) 60%, transparent) }
.lz-discount__bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--rb-canvas) 18%, transparent); overflow: hidden }
.lz-discount__bar i { display: block; height: 100%; border-radius: 3px; background: #E3A57F }
.lz-field { display: grid; gap: 6px; margin-bottom: 12px }
.lz-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px }
.lz-amount { height: 48px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-ink); font: 600 16px/1 var(--rb-font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--rb-ease), box-shadow var(--rb-ease) }
.lz-amount:hover:not(:disabled) { border-color: var(--lz-mark); box-shadow: var(--rb-shadow-hover) }
.lz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.lz-stat { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas) }
.lz-stat b { font: 600 22px/1.15 var(--rb-font-heading); font-variant-numeric: tabular-nums }
.lz-stat .rb-muted { font-size: 12px }
.lz-usage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0 }
.lz-usage__name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px }
.lz-usage__bar { height: 8px; border-radius: 4px; background: var(--rb-surface-soft); overflow: hidden }
.lz-usage__bar i { display: block; height: 100%; border-radius: 4px; background: var(--lz-mark) }
.lz-usage__count { color: var(--rb-muted); font: 500 12px/1 var(--rb-font-mono); font-variant-numeric: tabular-nums }
.lz-usage__fav { margin: 10px 0 0 !important; font-size: 12px }
.lz-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.lz-choice__item { height: 40px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-ink); font: 500 14px/1 var(--rb-font-body); cursor: pointer }
.lz-choice__item:hover { background: var(--lz-hover) }
.lz-choice__item.is-active { border-color: var(--lz-mark); background: var(--lz-selected); color: var(--rb-ink); font-weight: 600 }
.lz-about { width: 100%; box-sizing: border-box; min-height: 96px; padding: 10px 12px; resize: vertical; font: inherit; line-height: 1.5 }
.lz-about__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px }
.lz-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--rb-ink) 7%, transparent) }
.lz-card h3 + .lz-setting { border-top: 0 }
.lz-setting strong { font: 500 14px/1.3 var(--rb-font-body) }
.lz-setting p { margin: 3px 0 0; font-size: 12px; line-height: 1.4 }
@media (max-width: 720px) {
  .lz-think { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; border-radius: var(--rb-radius-xl) var(--rb-radius-xl) 0 0; padding-bottom: 18px }
  html.lz-think-open .rb-chat__compose { z-index: 40 }
  .lz-profile { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0 }
  .lz-hero__value { font-size: 32px }
  .lz-model { max-width: 40vw }
}

/* Цена за 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-mark-soft); color: var(--lz-mark) }
/* Предупреждение о дорогой модели — над полем ввода */
.lz-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 6px 8px; padding: 10px 10px 10px 12px; border: 1px solid color-mix(in srgb, var(--lz-mark) 30%, var(--rb-line)); border-radius: var(--rb-radius-md); background: var(--lz-mark-soft); color: var(--rb-ink); font-size: 13px; line-height: 1.45; pointer-events: auto }
.lz-notice > i .ic, .lz-notice > i.ic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--lz-mark) }
.lz-notice span { flex: 1 }
.lz-notice__close { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rb-muted); cursor: pointer }
.lz-notice__close:hover { background: color-mix(in srgb, var(--lz-mark) 12%, transparent); color: var(--rb-ink) }
.lz-notice__close .ic { width: 12px; height: 12px }

/* Кнопки «Стоп» и «Отправить» всегда справа. В RoboWB их прижимает подсказка «Enter — отправить» (margin-left:
   auto); там, где она скрыта (узкий экран, открыта панель медиа), прижимает первая из кнопок. */
@media (max-width: 1100px) {
  .rb-composer__foot .rb-chat__stop:not([hidden]),
  .rb-composer__foot .rb-chat__stop[hidden] + .rb-chat__send { margin-left: auto }
}
html.lz-drawer-open .rb-composer__foot .rb-chat__stop:not([hidden]),
html.lz-drawer-open .rb-composer__foot .rb-chat__stop[hidden] + .rb-chat__send { margin-left: auto }

/* ---------- веб-витрина вместо телеграмного rich: кнопки, подписи, карточка медиа ---------- */
/* Inline-кнопки бота — компактные «пилюли» с переносом, а не телеграмные во всю ширину */
.lz-kb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-width: 640px }
.lz-kb__row { display: contents }
.lz-kb__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 13px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-pill); background: var(--rb-canvas); color: var(--rb-ink) !important; font: 500 13px/1.2 var(--rb-font-body); text-align: center; text-decoration: none !important; cursor: pointer; transition: background var(--rb-ease), border-color var(--rb-ease) }
.lz-kb__btn:hover:not(:disabled) { background: var(--lz-hover) }
.lz-kb__btn.is-link::after { content: "↗"; color: var(--rb-faint) }
.lz-kb__btn.is-pressed { opacity: .6 }
.lz-kb__btn:disabled { color: var(--rb-faint) !important; cursor: not-allowed }
/* Подпись «логотип модель · цена» под ответом и под медиа — тихая */
.lz-foot, .lz-figmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--rb-faint); font: 400 12px/1.4 var(--rb-font-body) }
.lz-foot .lz-inline-logo, .lz-figmeta .lz-inline-logo { width: 14px; height: 14px; opacity: .85 }
.lz-inline-logo { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; object-fit: contain }
.lz-figdl { margin-left: auto; color: var(--rb-muted) !important; text-decoration: none !important; font-size: 12px }
.lz-figdl:hover { color: var(--rb-ink) !important }
.lz-rich figure { margin: 0 0 4px; max-width: min(420px, 100%) }
/* Карточка результата: свёрнутые блоки и кнопки — одной компактной строкой под фото; раскрытый блок — на всю ширину */
.lz-rich.is-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px }
.lz-rich.is-card > * { flex-basis: 100%; margin: 0 }
.lz-rich.is-card > details, .lz-rich.is-card > .lz-kb__row { flex-basis: auto }
.lz-rich.is-card > .lz-kb__row { display: contents }
.lz-rich.is-card > details[open] { flex-basis: 100%; order: 10 }
.lz-rich details:not([open]) { padding: 0; border: 0; background: transparent }
.lz-rich.is-card details > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 6px 13px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-pill); background: var(--rb-canvas); font: 500 13px/1.2 var(--rb-font-body); list-style: none; cursor: pointer }
.lz-rich.is-card details > summary::-webkit-details-marker { display: none }
.lz-rich.is-card details > summary:hover { background: var(--lz-hover) }
.lz-rich.is-card details[open] { padding: 10px 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-muted); font-size: 13px }
.lz-rich.is-card details[open] > summary { min-height: 0; margin: 0 0 6px; padding: 0; border: 0; background: transparent; color: var(--rb-ink) }

/* Поиск в «Медиа и файлах» — иконкой, как в окне моделей */
.lz-drawer__row { display: flex; align-items: center; gap: 8px; width: 100% }
.lz-drawer__search { flex: 1; min-width: 0; padding: 0; border: 0 }
.lz-drawer__search .lz-models__find { margin-left: auto }
.lz-drawer__search.is-searching .lz-models__find { margin-left: 0 }
/* Фото карточки занимает всю строку (пилюли — под ним), а сама картинка и её подпись — не шире 420 px */
.lz-rich.is-card > figure, .lz-rich.is-card > .lz-collage { flex-basis: 100%; max-width: none }
.lz-rich.is-card > figure > * { max-width: min(420px, 100%) }
.lz-gallery__title { display: flex; align-items: center; gap: 6px; min-width: 0 }
.lz-gallery__title .lz-logo-img { width: 14px; height: 14px }
.lz-login__alt { display: inline-block; margin-top: 8px; font-size: 13px }

/* Действия под медиа — слева, тихие, каждое со своей иконкой: «Промпт · Сослаться · Скачать» */
.lz-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; justify-content: flex-start }
.lz-rich.is-card > .lz-acts { flex-basis: 100%; margin-top: 0 }
.lz-msg.is-user .lz-acts { justify-content: flex-end }
.lz-act { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--rb-muted) !important; font: 500 12px/1.4 var(--rb-font-body); text-decoration: none !important; cursor: pointer; transition: color .15s }
.lz-act__icon { width: 14px; height: 14px; flex: none; opacity: .8 }
.lz-act:hover, .lz-act.is-on { color: var(--lz-mark) !important }
.lz-act:hover .lz-act__icon, .lz-act.is-on .lz-act__icon { opacity: 1 }
.lz-act.is-pressed { opacity: .6 }
/* Ссылка на файл из ленты: в своём сообщении — «Из сообщения выше», над полем ввода — чип с миниатюрой */
.lz-reply.is-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border-top: 0; border-right: 0; border-bottom: 0; font: 500 12px/1.4 var(--rb-font-body); cursor: pointer }
.lz-reply.is-ref .lz-act__icon { width: 13px; height: 13px }
.lz-file--ref { cursor: pointer; border-color: color-mix(in srgb, var(--lz-mark) 35%, var(--rb-line)) }
.lz-file__thumb { width: 28px; height: 28px; flex: none; border-radius: 6px; object-fit: cover; background: var(--rb-surface-soft) }
.lz-file__icon.ic, .lz-file__icon .ic, .lz-file__icon { width: 18px; height: 18px; flex: none; color: var(--rb-muted) }
.lz-file--own.is-loading .lz-file__thumb { opacity: .55 }
.lz-file--ref > .ic { width: 18px; height: 18px; flex: none; color: var(--lz-mark) }

/* Рамки кода и текста: язык, «2 990 зн», «Скопировать»; текст переносится и правится по клику */
.lz-code { margin: 10px 0; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); overflow: hidden; max-width: 100% }
.lz-code__head { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border-bottom: 1px solid var(--rb-line); background: var(--lz-paper); font: 500 11px/1.3 var(--rb-font-body); color: var(--rb-faint) }
.lz-code__lang { text-transform: lowercase; letter-spacing: .02em }
.lz-code.is-prose .lz-code__lang { text-transform: none }
.lz-code__count { margin-left: auto; font-variant-numeric: tabular-nums }
.lz-code__head .lz-copy { opacity: 1 }
.lz-code > pre, .rb-richtext .lz-code > pre { margin: 0; padding: 10px 12px; border-radius: 0; background: transparent; overflow-x: auto; white-space: pre; font: 12.5px/1.5 var(--rb-font-mono, monospace) }
.lz-code > pre code { padding: 0; background: transparent; font: inherit }
.lz-code__text { padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/1.6 var(--rb-font-body); color: var(--rb-ink); outline: none; cursor: text; max-height: 70vh; overflow-y: auto }
.lz-code__text:focus { background: color-mix(in srgb, var(--lz-mark-soft) 35%, var(--rb-canvas)) }
.lz-code.is-prose:focus-within { border-color: color-mix(in srgb, var(--lz-mark) 45%, var(--rb-line)) }
.lz-rich.is-card > .lz-card-detail { position: relative; flex-basis: 100%; order: 10; padding: 10px 36px 10px 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-muted); font-size: 13px; line-height: 1.5 }
.lz-card-detail .lz-copy { position: absolute; top: 8px; right: 8px; opacity: 1 }
/* Статусы — один чип для «Думаю…», статусов бота и «печатает» */
.lz-typing { align-self: flex-start; padding: 0 !important; background: transparent !important; border: 0 !important }

/* Дифф правок документа: удалённое — красным, добавленное — зелёным, контекст — тихо */
.lz-diff, .rb-richtext details.lz-diff, .rb-richtext details.lz-diff[open] { margin: 8px 0; padding: 0 0 6px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); overflow: hidden }
.lz-diff > summary, .rb-richtext details.lz-diff > summary { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--rb-line); background: var(--lz-paper); font: 500 13px/1.4 var(--rb-font-body); cursor: pointer }
.lz-diff:not([open]) > summary { border-bottom: 0 }
.lz-diff { font: 13px/1.6 var(--rb-font-mono, monospace) }
.lz-diff mark, .lz-diff s, .lz-diff i { display: inline-block; width: 100%; padding: 0 12px; font-style: normal; text-decoration: none; box-sizing: border-box }
.lz-diff s { background: color-mix(in srgb, var(--rb-bad) 10%, transparent); color: color-mix(in srgb, var(--rb-bad) 80%, var(--rb-ink)) }
.lz-diff mark { background: color-mix(in srgb, var(--rb-good) 13%, transparent); color: color-mix(in srgb, var(--rb-good) 70%, var(--rb-ink)) }
.lz-diff i { color: var(--rb-muted) }
.lz-diff br { display: none }
.lz-act.is-done { color: var(--rb-good) !important; cursor: default }